my question is really simple and I still didn't find the answer, maybe because I misspoke about it or didn't use the right keywords, anyways here is the topic:
I have an SVG script that contains some animation (like Bezier curves), I want to put it online, so I get back a link and whenever a user clicks on it, it's going to display my SVG file on the browser.
Is it possible?
Related
I'm trying to make a web page formatted similar to that of Netflix. Where a list of videos are displayed in a div with two arrows in either direction on each side. When the number of videos are more than the width of the window clicking the arrows moves the displayed videos in the corresponding direction by one video.
And(key part), when a video is clicked, the clicked video gets displayed on another div(main part of the screen) with a text of introduction and an excerpt of the video playing in the background of that section, plus a "play" button to start the video.
I would probably be able to sort it out with vanilla code. But this page is managed by WordPress so I would have to plug in my code with wordpress.
My assumption is that hacking the existing elementor code for the video widget would be the quickest way to do it. But I don't know how to find the code corresponding to the functionality I need to modify to customize it to do what I want. I can locate the video-widget file, but still, it's a huge file with lots of code. How do I find the functionality I need specifically to import into my own code?
Thank you and sorry for the verbose phrasing.
I am playing around various ways to try circumvent Cross-origin issues when loading (node, not img) SVG into a local html file. There's no reason I can't just simply use a web-server, but this is for fun/educational purposes.
So, current experiment is this: inside the SVG which is embedded via <object> tag, I have a script which makes a new <text> and writes the entire SVG there. The idea was to write it down, delete all other nodes and make a select-all copy the entire text in the window (it's a pop-up window) and then return to original HTML document to paste the text in and then make my inline SVG!
The parts I have working are all the way up to the 'select-all' piece. I know that we have the ability to select text out of a <textarea> with .select(), but inside of SVG that's not a thing. Now I'm stumped whether it's even possible to dispatch the Cmd+A keys , or anything, in order to get the browser to select-all.
Alternatively I can just change the .svg to '.txt' which would make my pop-up-copy strategy at least work past the select-all part, but if it takes post-processing my svg manually then it defeats the purpose of these experimentations!
Ideas welcome! :)
Can I put a HTML code in my chrome extension's icon? According to the Google API (setBadgeText) this isn't possible.
Is there any way to put it there?
While .setBadgeText is, as implied by name, text-only, you can draw anything and set that as your icon.
You'll need to draw on a <canvas>, extract image data and use .setIcon({imageData: /*...*/}) to update the icon.
See this question for a brief example, and maybe this article.
It's not quite "using HTML", but with some work you can output anything to your icon.
Badge is plain text only as can be seen in source code. There's no way around.
I need to draw a simple "flow chart" that is used to navigation on my site. What I have been doing now is that I've drawn this MSPaint, then I add pixelmaps so that it navigate the user to different pages according to where in the pictures he clicks.
What I also want is that the page the user is on, changes colour (for instance, if user clicks on step 3, he navigates to page 3, and the page 3 changes colour to to green).
What is the best method to implement this? SVG? Canvas? JavaScript? CSS?
All answers that can point me to the right direction is very welcome.
Your first mistake here, I'd say, is that you're using pixelmaps; for something as simple as this, I'd recommend just making it a pure HTML/CSS entity, then giving a .active class or some equivalent to whatever page you're actually on. This is the easiest way of doing things in my books, and it has the benefit of degrading gracefully if the image fails to load for whatever reason.
That said, if you don't want to do it that way and are really attached to the static image for whatever reason, you could have variants of that image where the specific step is highlighted, and display whatever image is appropriate for that page. That would accomplish what you're looking for, but I wouldn't recommend it--it's very heavy in terms of network usage when compared with an HTML solution.
Now, bear in mind you could draw this with canvas, but that seems like overkill in this situation if you're basically just drawing a navbar; if you were drawing a full flowchart already and just wanted to reuse that code, well, that would be a different story; but in this case, with static imagery, just use HTML--it's just faster and easier.
I want to get a very basic interaction with a SVG loaded through Athens in Pharo using Morphic. This example shows what I'm looking for. I have used
(ASVGMorph fromFile: 'lion.svg') drawOn: Display getCanvas
but clicking the SVG makes the picture dissapear. However all examples I have seen were using a web browser. Is this possible using Athens? There is any other work in this area?
That's because you are drawing it in display canvas, which is refreshed every time... so is natural that you lost it...
What you need to do is:
(ASVGMorph fromFile: 'lion.svg') openInWorld.
or better, you probably want to put it in a window:
(ASVGMorph fromFile: 'lion.svg') openInWindow.
at the end, you will probably want it inside some other morph that you create, but debugging anyone of the solutions above with show you how to proceed :)
Yes, as Esteban pointed, to keep morph on desktop, you should add it to world, i.e. use
openInWorld, or #openInWindow.
ASVGMorph is very basic, however, and not intended to serve all possible use cases.
For more advanced uses, it is preferred to use ASVGRoot instance and draw it in own morph or compose with other drawings.