Quantcast

SVG powered images

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

SVG powered images

Sannyasin Brahmanathaswami via use-livecode
Hi All,

Jonathan Lynch wrote:
> Hey guys - I figured out a solution for that bug I had previously
> written a hack for. I use the image.onload handler in the JavaScript
> for this. It works consistently now. I just had to get my order of events
> correct in the JavaScript.
> So please check out the new version

This versions works really well with Animated SVG.
Check a step by step recipe to play them in
my answer to Klaus message:

Klaus  Major wrote about running animated svg:
> not when viewed in Safari on a Mac!

Macs always store a surprise or two! :D
Check if this step by step recipe works
in a Mac:

1) Download most recent version of Jonathan Lynch's stack:
http://livecodeshare.runrev.com/stack/830/SVG-Powered-Images

2) Download this animated svg:
https://openclipart.org/detail/230261/gearanimation02-remix

This mechanical gears animation is better for detecting
any "jump" in the animation conversion.

3) Import mechanical gears animated svg
into Jonathan's stack

4) edit the script of gears bitmap image and
add this script after "resizecontrol" handler

 on mousedown
  put the id of me into tID
    repeat while the mouse is down
       send "processSVG tID" to widget "SVGBrowser1"
    end repeat
 end mousedown

5) Click and hold down the mouse button over
one gear and see them move.

Tell us if this works fine on a Mac (or other OS that
you use on a PC or within a Virtual Machine)

Hermann Hoch wrote:
> I have also a fast method, runs with 30 fps,
> for taking PNG-frames from a video, so that
> converting an SVG animation to PNGs is
> no problem (though I can't see any sense
> in doing that).

Converting a video at 30 frames per seconds
in PNG images? This is amazing! :D

After you publish this stack, we will find many uses
for this feature.

Hermann, your resourceful and detailed stacks
are a rich source of inspiration for many of us:

http://livecodeshare.runrev.com/stack/831/SVG2PNG_6789
http://livecodeshare.runrev.com/stack/832/SVG-TextCrawler

Keep Up your Great Work! :D

Al
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: SVG powered images

Sannyasin Brahmanathaswami via use-livecode
Hola Al,

> Am 13.05.2017 um 07:37 schrieb Alejandro Tejada via use-livecode <[hidden email]>:
>
> Hi All,
>
> Jonathan Lynch wrote:
>> Hey guys - I figured out a solution for that bug I had previously
>> written a hack for. I use the image.onload handler in the JavaScript
>> for this. It works consistently now. I just had to get my order of events
>> correct in the JavaScript.
>> So please check out the new version
>
> This versions works really well with Animated SVG.
> Check a step by step recipe to play them in
> my answer to Klaus message:
>
> Klaus  Major wrote about running animated svg:
>> not when viewed in Safari on a Mac!
>
> Macs always store a surprise or two! :D
> Check if this step by step recipe works
> in a Mac:
>
> 1) Download most recent version of Jonathan Lynch's stack:
> http://livecodeshare.runrev.com/stack/830/SVG-Powered-Images
>
> 2) Download this animated svg:
> https://openclipart.org/detail/230261/gearanimation02-remix
>
> This mechanical gears animation is better for detecting
> any "jump" in the animation conversion.
>
> 3) Import mechanical gears animated svg
> into Jonathan's stack
>
> 4) edit the script of gears bitmap image and
> add this script after "resizecontrol" handler
>
> on mousedown
>  put the id of me into tID
>    repeat while the mouse is down
>       send "processSVG tID" to widget "SVGBrowser1"
>    end repeat
> end mousedown
>
> 5) Click and hold down the mouse button over
> one gear and see them move.
>
> Tell us if this works fine on a Mac (or other OS that
> you use on a PC or within a Virtual Machine)

well, nothing actually happens, except that LC almost freezes for a couple of seconds!?
Works fine in Safari though :-D


Best

Klaus
--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: SVG powered images

Sannyasin Brahmanathaswami via use-livecode
Addition, the animated SVG is not displayed in any browser widget at all!?


Best

Klaus

--
Klaus Major
http://www.major-k.de
[hidden email]


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: SVG powered images

Sannyasin Brahmanathaswami via use-livecode
For svg animation, it seems like it would be more efficient to let the animation play in the widget and just periodically export a frame, rather than rewrite the svg every time.



Sent from my iPhone

> On May 13, 2017, at 6:50 AM, Klaus major-k via use-livecode <[hidden email]> wrote:
>
> Addition, the animated SVG is not displayed in any browser widget at all!?
>
>
> Best
>
> Klaus
>
> --
> Klaus Major
> http://www.major-k.de
> [hidden email]
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: SVG powered images

Sannyasin Brahmanathaswami via use-livecode
In reply to this post by Sannyasin Brahmanathaswami via use-livecode
@Klaus
I tested the svg-to-png conversion using both revBrowser and browser widget on
Mac 10.12.4. This works. It doesn't work on Mac 10.10. (probably also Mac 10.11).
This is caused by webkit which LC uses on Mac.
Where it runs, taking frames from an svg animation or from a video is "stuttering"
because the svg or video already takes most of the graphic card's power.

@Alejandro
This SVG animation is a fine demo to show that pure LC script can be much better
than SVG animation. Adjust there with a menu the speed to your machine (you can
also change color and sizes of the gears while the animation is running).

http://forums.livecode.com/viewtopic.php?p=137068#p137068
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: SVG powered images

Sannyasin Brahmanathaswami via use-livecode
I feel like HH has an important point - this method uses a lot of processor power. We should minimize the burden on the processor (small animation, efficient JavaScript) and make sure our target users will consistently have the processing power to handle this kind of animation.


Sent from my iPhone

> On May 13, 2017, at 8:22 AM, hh via use-livecode <[hidden email]> wrote:
>
> @Klaus
> I tested the svg-to-png conversion using both revBrowser and browser widget on
> Mac 10.12.4. This works. It doesn't work on Mac 10.10. (probably also Mac 10.11).
> This is caused by webkit which LC uses on Mac.
> Where it runs, taking frames from an svg animation or from a video is "stuttering"
> because the svg or video already takes most of the graphic card's power.
>
> @Alejandro
> This SVG animation is a fine demo to show that pure LC script can be much better
> than SVG animation. Adjust there with a menu the speed to your machine (you can
> also change color and sizes of the gears while the animation is running).
>
> http://forums.livecode.com/viewtopic.php?p=137068#p137068
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Loading...