Widget usage examples

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

Widget usage examples

Mike Kerner via use-livecode
Today I started a new collection, hope some of you come in with "LC-specials".

This demo shall show that you need nothing more than a browser widget and a
set of image files located locally (e.g. in tmp-folder from stack resources)
or from a server in order to have a HQ Ken-Burns-effect show -- just try.

The stack is essentially a GUI to an effect implemented by John@Toymakerlabs
(http://www.github.com/toymakerlabs/kenburns/).
After your parameter settings are done, the stack creates a _self-contained_
htmlText-copy for you, you don't need to collect several files. Just copy,
(use a button) drag a browser widget to your stack, name it "KenBurns",
paste to a field named "HTML" and set the htmlText of widget "KenBurns" to
field "HTML" to have your own show. See the stack and a description here:
 
Widget usage example #1: Ken-Burns-Effect
http://forums.livecode.com/viewtopic.php?p=152547#p152547

Using LC 8.1.3/9.0.0-dp6 the stack runs (tested) smoothly a 960x540-show on
Mac 10.12 and Win 7/10. On Linux (Mint 181c) I got sadly soon the well-known
"linux-something-dialogs". I hope that somebody has on linux more success
and/or can help me to work around this bug of the browser widget.


_______________________________________________
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: Widget usage examples

Mike Kerner via use-livecode
HH you are wonderful! thanks for this contribution. I see someone we know in the cast of characters in the slide show, and I think some eleocarpus  fruits (blue Rudraksha) from our place here.

How great to see Wilhelm Sanke too.

Now, if only we could layer objects on top. I'm seeing more and more apps now that are using this kind of effect as the background, they also use looping video - not animated gif, but actual video: short small looping clips that run behind/ underneath a scrolling group of buttons or rows.

It would be super interesting to see how close we can come to this with native LC code. Even with Animation Engine, which I understand (I could be wrong) to be the "state of the art" as far as how good it gets in native LC… we still don't get this level of super smooth transitions/motion.


On 3/19/17, 10:40 AM, "use-livecode on behalf of hh via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    Today I started a new collection, hope some of you come in with "LC-specials".
   
    This demo shall show that you need nothing more than a browser widget and a
    set of image files located locally (e.g. in tmp-folder from stack resources)
    or from a server in order to have a HQ Ken-Burns-effect show -- just try.

_______________________________________________
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: Widget usage examples

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
> BR wrote
> Now, if only we could layer objects on top. I'm seeing more and more apps now
> that are using this kind of effect as the background, they also use looping
> video - not animated gif, but actual video: short small looping clips that
> run behind/ underneath a scrolling group of buttons or rows.

Didn't you see the mouseCoords in the LC field while moving the mouse over the
browser? Just do the layering in javascript and call LC by js-handlers.

And moreover: As soon as more than 20% of all apps use this it will become boring.
The next coloured cat is already entering the main street.

The smoothness is due to accessing the hardware not a result of using a special
language (although in this case the brilliant combining of CSS and javascript by
John at Toymakerlabs is very important):
If you try such an effect for example in a virtualbox that has < 50% of your GPU
and/or a small amount only of your CPU then you will have stuttering...

How should LC achieve all that native accesses and cross platform handling with
its small developer group? You compare to results that are done (in sum) by
hundreds of specialised developers!
_______________________________________________
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: Widget usage examples

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
Correction.

My widget usage example (Ken-Burns-Effekt)
http://forums.livecode.com/viewtopic.php?p=152547#p152547
misses one feature I have announced:

The images list is currently only working if you use image files from
a server (may be also a local server). My variant for local files was,
not in the stack yet, to translate local URLs of the form "file://"
into a data source of the form "data:image/png;base64,...").
But this doesn't work coreectly, as it is, with the current javascript.
As this should be a clean example, the original by John @ Toymakerlabs
only changed in parameter settings, this kind of "local loading" is
delayed to a future usage example. Sorry.

*** But this works for a usage without a (local) server: ***

Hit the button "COPY" while the show (adjusted to your taste) is running
and write the clipboard (= the htmltext of the widget) out to a local
".html"-file. Then use images from a folder relative to that file (server
is also allowed):
You can for setting image pathes and descriptions edit the html file at about
line 500. Then set the URL of your widget to that local file ("file://...").

_______________________________________________
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: Widget usage examples

Mike Kerner via use-livecode
Hi Herman,

To get the base64encoded data to work for an image in the browser widget, don't forget the following line in LC:

Replace linefeed with empty in tBase64data


When you export an image to a variable and then base64encode the variable, LC adds in extra linefeeds. They have to be removed to work in the browser widget.

Does that help?

Sent from my iPhone

> On Mar 20, 2017, at 8:53 AM, hh via use-livecode <[hidden email]> wrote:
>
> Correction.
>
> My widget usage example (Ken-Burns-Effekt)
> http://forums.livecode.com/viewtopic.php?p=152547#p152547
> misses one feature I have announced:
>
> The images list is currently only working if you use image files from
> a server (may be also a local server). My variant for local files was,
> not in the stack yet, to translate local URLs of the form "file://"
> into a data source of the form "data:image/png;base64,...").
> But this doesn't work coreectly, as it is, with the current javascript.
> As this should be a clean example, the original by John @ Toymakerlabs
> only changed in parameter settings, this kind of "local loading" is
> delayed to a future usage example. Sorry.
>
> *** But this works for a usage without a (local) server: ***
>
> Hit the button "COPY" while the show (adjusted to your taste) is running
> and write the clipboard (= the htmltext of the widget) out to a local
> ".html"-file. Then use images from a folder relative to that file (server
> is also allowed):
> You can for setting image pathes and descriptions edit the html file at about
> line 500. Then set the URL of your widget to that local file ("file://...").
>
> _______________________________________________
> 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: Widget usage examples

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
Hi Jonathan,

the problem is the slowdown/stuttering because base64 encoding
increases data sizes by round 30%. To avoid a huge html file I had
to use an extra callback for that. The other method I described
is simpler and faster anyway and can easily be LC-scripted.

As this is a widget usage example, that is more a 'snippet' than
an app, I decided to leave it (from the LC part) simple as it is.
Anyway thanks for the help.

Not sent from an iPhone ;-)

_______________________________________________
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: Widget usage examples

Mike Kerner via use-livecode
In reply to this post by Mike Kerner via use-livecode
Widget usage example #2: LC-ImageToolBox89_Basics
http://forums.livecode.com/viewtopic.php?p=152723#p152723

You will be astonished how close the core of the javascripts is to the
handling of imagedata in LCScript. There are a lot among you who will
add and change effects without knowing javascript, simply by using an
existing function as 'template' (and use a correct 'header' and 'footer'
around it).

Using LC 8.1.3/9.0.0-dp6 the stack runs (tested) well on
Mac 10.12 and Win 7/10, depends also on your CPU/GPU combination.

On Linux (Mint 181c) I got sadly the well-known "linux-something-dialogs".
I hope that somebody has on linux more success and/or can help me to work
around this bug of the browser widget.

> Widget usage example #1: Ken-Burns-Effect
> http://forums.livecode.com/viewtopic.php?p=152547#p152547

_______________________________________________
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