SVG powered images

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

SVG powered images

Bob Sneidar via use-livecode
Hi Jonathan,

This stack opens up a lot of new possibilities.
Many thanks again for sharing! :D
http://livecodeshare.runrev.com/stack/830/SVG-Powered-Images

If we modify SVG file on the custom property mysvgdata
Does images updates automatically?

How could we load an animated svg and play it,
frame by frame, using the png image?
For example, this Mechanical Gears animation:
https://openclipart.org/download/228417/gear-anim.svg

Thanks in advance for your answers and
Keep Up this 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
|

Re: SVG powered images

Bob Sneidar via use-livecode
Jonathan,

nice idea and clever work, congratulations.

Two remarks:

(1) Actually the svg-to-png conversion method toDataUrl() yields
at most a 96 dpi image.
So, if you scale the svg once to an image of twice the maximum size
you will need, then set the resizequality of that image to "best"
and scale it down _with LC_ to the size you actually need, you may
have better results on some devices.

(2) You speak in your help of a "peculiar bug". It is not a bug.
It is a first look at the js "callback hell":
The call of "liveCode.JStoLC(myImage,tID);" in your html comes too
early. The second call then shows the result of meanwhile finished
first call.

Hermann

_______________________________________________
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
|

Re: SVG powered images

Bob Sneidar via use-livecode
In reply to this post by Bob Sneidar via use-livecode
Thanks Ajelandro,

I have thought a bit about how to show a browser animation through an image object.

I think it can be done, but might use a lot of processing power.

Could be really cool with webgl animations.

Sent from my iPhone

> On May 11, 2017, at 4:32 PM, Alejandro Tejada via use-livecode <[hidden email]> wrote:
>
> Hi Jonathan,
>
> This stack opens up a lot of new possibilities.
> Many thanks again for sharing! :D
> http://livecodeshare.runrev.com/stack/830/SVG-Powered-Images
>
> If we modify SVG file on the custom property mysvgdata
> Does images updates automatically?
>
> How could we load an animated svg and play it,
> frame by frame, using the png image?
> For example, this Mechanical Gears animation:
> https://openclipart.org/download/228417/gear-anim.svg
>
> Thanks in advance for your answers and
> Keep Up this 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

_______________________________________________
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
|

Re: SVG powered images

Bob Sneidar via use-livecode
Thanks Hermann

If it were from that, then we could not switch back and forth between resizing different images. It would show the output of the previous image processed. But that does not happen.

I thought I chained the commands linearly, but I will check that again.

Sent from my iPhone

> On May 11, 2017, at 5:25 PM, [hidden email] wrote:
>
> Thanks Ajelandro,
>
> I have thought a bit about how to show a browser animation through an image object.
>
> I think it can be done, but might use a lot of processing power.
>
> Could be really cool with webgl animations.
>
> Sent from my iPhone
>
>> On May 11, 2017, at 4:32 PM, Alejandro Tejada via use-livecode <[hidden email]> wrote:
>>
>> Hi Jonathan,
>>
>> This stack opens up a lot of new possibilities.
>> Many thanks again for sharing! :D
>> http://livecodeshare.runrev.com/stack/830/SVG-Powered-Images
>>
>> If we modify SVG file on the custom property mysvgdata
>> Does images updates automatically?
>>
>> How could we load an animated svg and play it,
>> frame by frame, using the png image?
>> For example, this Mechanical Gears animation:
>> https://openclipart.org/download/228417/gear-anim.svg
>>
>> Thanks in advance for your answers and
>> Keep Up this 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

_______________________________________________
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
|

Re: SVG powered images

Bob Sneidar via use-livecode
In reply to this post by Bob Sneidar via use-livecode
> JL wrote:
> If it were from that, then we could not switch back and forth
> between resizing different images. It would show the output of
> the previous image processed. But that does not happen.
> I thought I chained the commands linearly, but I will check
> that again.

I didn't say the second call shows the result from the _previous_ call,
I said it shows the result from the meanwhile finished _first_ call
(with that svg data, that is thereafter cached).


_______________________________________________
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
|

Re: SVG powered images

Bob Sneidar via use-livecode
Ah

Yes - the svg data is cached.

That would explain why it must happen for every image.

Thanks Hermann.

I will tinker some more.

Sent from my iPhone

On May 11, 2017, at 5:52 PM, hh via use-livecode <[hidden email]> wrote:

>> JL wrote:
>> If it were from that, then we could not switch back and forth
>> between resizing different images. It would show the output of
>> the previous image processed. But that does not happen.
>> I thought I chained the commands linearly, but I will check
>> that again.
>
> I didn't say the second call shows the result from the _previous_ call,
> I said it shows the result from the meanwhile finished _first_ call
> (with that svg data, that is thereafter cached).
>
>
> _______________________________________________
> 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
|

Re: SVG powered images

Bob Sneidar via use-livecode
Did some more research. Yup - the image renders in the canvas asynchronously. So, on first load it is exporting the canvas image before that image is rendered.

Going to see if I can add an event handler that is triggered when the canvas is finished.

Thanks for the tip :)

Sent from my iPhone

> On May 11, 2017, at 5:59 PM, [hidden email] wrote:
>
> Ah
>
> Yes - the svg data is cached.
>
> That would explain why it must happen for every image.
>
> Thanks Hermann.
>
> I will tinker some more.
>
> Sent from my iPhone
>
> On May 11, 2017, at 5:52 PM, hh via use-livecode <[hidden email]> wrote:
>
>>> JL wrote:
>>> If it were from that, then we could not switch back and forth
>>> between resizing different images. It would show the output of
>>> the previous image processed. But that does not happen.
>>> I thought I chained the commands linearly, but I will check
>>> that again.
>>
>> I didn't say the second call shows the result from the _previous_ call,
>> I said it shows the result from the meanwhile finished _first_ call
>> (with that svg data, that is thereafter cached).
>>
>>
>> _______________________________________________
>> 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
|

Re: SVG powered images

Bob Sneidar via use-livecode
In reply to this post by Bob Sneidar via use-livecode
You could try to leave out the "liveCode.JStoLC" from the html.
Instead send the conversion 'delayed", 1 tick should be enough:

 local svgb="SVGBrowser1"
 send "processSVG tID" to widget svgb
 put "var dd=document.getElementById('canvas1');" & \
     "liveCode.JStoLC(dd.toDataURL(),tID)") into js
 send "do js in widget svgb" to me in 1 tick


_______________________________________________
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
|

Re: SVG powered images

Bob Sneidar via use-livecode
I tried splitting up the chain like this. Even sending in 10 milliseconds did not work. The best test is to close LiveCode then open it back up and run the stack. If resizing one of the images works the first time, then it is good.

However, delaying the command to send for the image does not work for the first resizing of the image in this scenario.

The way it is posted right now seems to work fine. I am going to leave it that way for now, while I try to find a way to detect when the canvas is fully rendered in JavaScript.

Sent from my iPhone

> On May 11, 2017, at 7:24 PM, hh via use-livecode <[hidden email]> wrote:
>
> You could try to leave out the "liveCode.JStoLC" from the html.
> Instead send the conversion 'delayed", 1 tick should be enough:
>
> local svgb="SVGBrowser1"
> send "processSVG tID" to widget svgb
> put "var dd=document.getElementById('canvas1');" & \
>     "liveCode.JStoLC(dd.toDataURL(),tID)") into js
> send "do js in widget svgb" to me in 1 tick
>
>
> _______________________________________________
> 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