Browser Widget/HTML5/LC Integration

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

Browser Widget/HTML5/LC Integration

JJS via use-livecode
How many devs here would be willing to pitch in $ to cover the cost for HQ to add "deep integration" between the browser widget and Livecode.

Currently there is a "wall" between LC and the browser widget. Jonathan Lynch, myself and Andre have been looking into this very closely. There is no way for a javacript to "ping" LC and get an immediate response.

Our use case is simple: the browser widget by default can only store data in the web indexDB space.  But if you want to run a SQLLite database in your mobile app, and use html5 for either, complete robust small app modules or even as light weight "views" … you need to have the browser widget act and behave and communicate with the LC back like any other control. Presently if, e.g. you issue click down in the browser widget to fire some handler in LC (to store some data in the database)  and the LC handler is supposed to store the data.. that handler's response never gets back to the Javascript. You have to start building up crazy solutions where you set values in LC and then other JS handler check those… it turns into "call back hell" with no means to control the timing.

I've as HQ to quote on this… I'm wondering if anyone else is interested. It expands the horizons for you team, as you could engage some young html5 wizard to build stuff, that could be fully integrated into your LC platform.

Brahmanathaswami






_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
Sannyasin Brahmanathaswami wrote:

 > Currently there is a "wall" between LC and the browser widget.
...
 > Our use case is simple: the browser widget by default can only store
 > data in the web indexDB space.  But if you want to run a SQLLite
 > database in your mobile app, and use html5 for either, complete
 > robust small app modules or even as light weight "views" … you need
 > to have the browser widget act and behave and communicate with the LC
 > back like any other control. Presently if, e.g. you issue click down
 > in the browser widget to fire some handler in LC (to store some data
 > in the database)  and the LC handler is supposed to store the data..
 > that handler's response never gets back to the Javascript. You have
 > to start building up crazy solutions where you set values in LC and
 > then other JS handler check those… it turns into "call back hell"
 > with no means to control the timing.

There seems to be another, perhaps bigger, question implied here:

What needs to be added in LC which would make it easier to develop GUIs
in than HTML/CSS/JavaScript, so that you wouldn't need to split your
work between such very different paradigms?

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
So as not to burden this list which  "use" list and not a "complain" list  I have responded to you at length directly.

in a word:

1) the graphics rendering layer of LC is behind the graphics rendering layer of the browser

2) an IDE that provides a tool box for super elegant 21st century UI  -- smooth, responsive, easy to change the Look/Feel
even my attempts with AnimationEngine  which is, I believe as good as it's going to ever get with LC's engine, have a clunky, jerky feel
e.g. try a ken burns: move the image while simultaneously increasing is rect in proportion. even rotating a ball around a circular path… has this subtle "1990" feel to it vs the same thing done with CSS animation in the browser. Maybe not an issue for all those whose use case is business/systems/tools etc. but in our shop it has to look fabulous or the horse is not considered a viable vehicle for the content delivery. Period end of discussion.

I don't know why or the technical issues behind that… I would be interested to know to understand it

3) robust surport for SVG (not just a single color) on top of 1 and 2 above

even shorter summary

vector perfect, smooth as glass, motion graphics

Isn’t the dictionary html in a widget? Why? There's one answer to your question from HQ itself.

If a player serves to provide the space to show content develop on another platform (video/Premiere)

Why not the browser widget to provide a space to show HTML5?

I believe it has tremendous potential for engagement across a wide spectrum of developers, going both ways.

More in the email I sent you

BR



 

On 1/27/17, 12:21 PM, "use-livecode on behalf of Richard Gaskin via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    There seems to be another, perhaps bigger, question implied here:
   
    What needs to be added in LC which would make it easier to develop GUIs
    in than HTML/CSS/JavaScript, so that you wouldn't need to split your
    work between such very different paradigms?

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
BR wrote:
"Even my attempts with AnimationEngine which is, I believe as good as it's
going to ever get with LC's engine, have a clunky, jerky feel."

I tried to generate such "bad" graphics in LC without any success. So:
Could we see (at least one of) such attempts? Don't forget the source code.

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
Sure.. try this:

go stack url "http://wiki.hindu.org/uploads/SivasHawaiiRevels_v001.livecode"

it's so "bad" as it is "just below par" enough to cause others to blink at it.

I realize this seems like a challenge but take my word for it.  Here in our shop  we have several Keynote presentation masters that can make a keynote look almost like a good short flick-movie done in Hollywood.

 One html5 man who work in Angular and soon React. We also develop videos, movies on a monthly basis…and we have hired out some HTML5 development, and I get to see the iterations on development of those media modules in any browser; so it's not like this is just opinionated griping.

We are working in a very real world media context where *everything*  is about what you see and how it moves and how easy/hard it is to develop the front end (what you see)

And that is the other issue -- developing the "views"  Again this not opinion but based very real hard experience.

Take the new home screen for our new app (I'll let everyone download from GIT soon if you are interested)

http://wiki.hindu.org/uploads/home-screen-1.jpg 
http://wiki.hindu.org/uploads/home-screen-2.jpg

This is in LC with a simple panel set of a group that has to scroll up and down.

You have no idea how much time was spend ($) getting this to work easily in LC, including the ability to change things very quickly across all parts of the whole group.

This same "view" could have been done Angular or React in a few hours. And, once done, be responsive, scrollable and any attribute that stake holder thought should be changed -- done on the spot with the minor adjustment of a single integer value in an CSS rule.

Put another way: a competent html5 dev can build gorgeous, responsive, easily tweakable GUI in 1/10 the time it takes to achieve the same level of production values in Livecode.

OTOH when it comes to coding the controllers/ models (libraries and scripts) my experience is that even html5 dev with a lot of experience in JS will still take 5 times longer to code the JS than Jacqueline who knows only LIvecode. And in the end Jacque's code is actually shorter and readable.

So: that's my point:  the ability to create/use HTML5 for "views" with lightweight JS that can talk to a robust LC back end, like any other LC control,  that would be a total snake pit if it were all done in JS.. it would require a level of expertise (and the money to pay for expertise hours)

We even have a small project done for "peanuts" by a very low priced HTML5 man in Belaruz. The UI is so simple but gorgeous animation , but cost for just a tiny framework, even at low rates is very high relative to the output. An LC developer code out the module in 1/10 the time/cost  .

I would past the URL to see what he has done, but he changed the framework on the back end so that the page would load faster  -- another "cost" of the JS/Python/Node code requirements to put up a simple animated splash screen.

Point: html + CSS + a small bit of JS  = Marvelous UI

+

LC on the backend

dynamite combo!



 

On 1/28/17, 12:46 AM, "use-livecode on behalf of hh via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    BR wrote:
    "Even my attempts with AnimationEngine which is, I believe as good as it's
    going to ever get with LC's engine, have a clunky, jerky feel."
   
    I tried to generate such "bad" graphics in LC without any success. So:
    Could we see (at least one of) such attempts? Don't forget the source code.
   
   

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
Sannyasin Brahmanathaswami wrote:

 > So as not to burden this list which  "use" list and not a "complain"
 > list  I have responded to you at length directly.

...ands yet here we are, so we might as well enjoy the discussion.

 > 1) the graphics rendering layer of LC is behind the graphics
 > rendering layer of the browser

Likely, but since both Chrome and LC use Skia we'd have to look a little
deeper.

Specifics are helpful.


 > 2) an IDE that provides a tool box for super elegant 21st century UI
 >  -- smooth, responsive, easy to change the Look/Feel even my attempts
 > with AnimationEngine  which is, I believe as good as it's going to
 > ever get with LC's engine, have a clunky, jerky feel e.g. try a ken
 > burns: move the image while simultaneously increasing is rect in
 > proportion. even rotating a ball around a circular path… has this
 > subtle "1990" feel to it vs the same thing done with CSS animation
 > in the browser. Maybe not an issue for all those whose use case is
 > business/systems/tools etc. but in our shop it has to look fabulous
 > or the horse is not considered a viable vehicle for the content
 > delivery. Period end of discussion.

That's a good use case.  UIs are increasingly animated, so animation
performance is increasingly useful.

Anyone on the team listening in and can offer some insight into this?


 > 3) robust surport for SVG (not just a single color) on top of 1 and 2
 > above

What limitations currently exist in the SVG widget?

Let's identify the remaining specifics and see if we can get a plan
together to handle those.


 > Isn’t the dictionary html in a widget? Why? There's one answer to
 > your question from HQ itself.

I believe the Dictionary is indeed using the Browser widget.

My question is why, since that content doesn't require full HTML
rendering, doesn't it use a field object?

But at this point my question is not for the team.  They already have
the Dictionary in pretty good order, and the remaining nits can be
addressed without a complete rewrite easily enough.

My question would be for any community members eager to explore
alternate designs.


 > If a player serves to provide the space to show content develop on
 > another platform (video/Premiere)
 >
 > Why not the browser widget to provide a space to show HTML5?

There is a browser widget.  I believe I'd read an earlier post in which
you said you're using it, so I don't understand this question.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
> BR wrote:
> Sure.. try this:
> go stack url "http://wiki.hindu.org/uploads/SivasHawaiiRevels_v001.livecode"
> it's so "bad" as it is "just below par" enough to cause others to blink at it.

It's not the LC graphics it's the "jagged" and "uncomplete" scripting.
LC can do much more.

Some basic examples related to the starting animation:
= You use "wait <time>" for animations (!!!) and moreover
  +++ with <time> far below the refreshrate of the app.
  +++ with <time> independent of the device.
= You animate along a random (jagged) line of points ignoring the
  existence of smooth curves.
= You use an image that doesn't even have an antialiased border.

So
> BR wrote:
> ... one html5 man who work in Angular and soon React.
You need help to use huge non-free JS frameworks?

Compare that in *real* costs to LiveCode. LiveCode is not a presentation app
(like PowerPoint or its daughter Keynote or some Adobe products).
It's not an image processing app (like Photoshop or Gimp or GraphicConverter).
It's not a vector graphics app (like Inkscape or some Adobe products).
And it's not a "robust" WebApp framework (robust against package-coded HTML5)*.
But you can have special parts of that built on LiveCode:
Simply buy extensions for your specialised uses, hire freelancers.

(To avoid any misunderstanding, I'm not a freelancer but I know some. Probably
I don't know as many as you know).

_____
* Also, some of LC's HTML5 deployment modules could do a lot of that.
It needs supporters by buying HTML5-licenses, do you have one?


_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
Until we hear that HQ is listening or want to know more I'll keep it short

1) SVG requirements

rendering this would be a minimum. If here is a way to do it now in LC let me know

http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg

resize your browser, it remains perfect!

More robust example… not currently set to resize, (but could be)  

http://wiki.hindu.org/uploads/SivaSivaDiagram.svg 

2) Yes I am using the browser widget to show pages on our web site. Even that has lots of issues, but we are working with it. and HQ has been responsive on the issue of thecontent rendering in odd rects.. though I am still seeing this in 8.1.3  need to do more testing in the next few days… we made be forced out to use launch URL and send the user off the LC app into the browser app on the phone.. (rather not have to do that)

3) HTML Integration has two use cases (in my current purview, there could be more)
   
  i. simple views

this can be created in less than 5 minutes the view consists of  a few lines

<ul class="flexdiv">
        <li class="flexpanel1"> Mangos</li>
        <li class="flexpanel2"> Mangos</li>
        <li class="flexpanel1"> Papayas</li>
        <li class="flexpanel2"> Chiku</li>
<ul>

touch of CSS and you get this:

http://wiki.hindu.org/uploads/gui-eg.html

responsive, easily tweaked if the content people want another four rows in the panel, cut and paste, changing props, sure, it's a text file, but so what… change one integer value and all rows change.

This simply cannot be done that easily created in Livecode. (Please don't respond with "yes we can make this in LC" I know you can, but to scale change and make it responsive change colors on all objects in the group at once etc.. you need to be an old xTalk wizard with toolboxes)

  Now if touch events, JS handlers, for a small HTML5 widget/view could talk back to LC controllers and models and actually call a function and get the return value synchronously then we have a power house  combination…

build simple gui views in html… robust LC backend.
 
  ii. full web app integration
       - This is a recent app we released, HTML5 done in Ionic/Angular2
       - I can actually copy the core pages/js/css assets and drop them in a folder in an LC app and point the browser widget (URL) to the index.html file and the app runs perfectly, right inside the browser widget.
      -- trouble is I can't really get a robust handshaking going on. LC can "poke" the app (but get nothing in return) and the web app can "poke" LC (but get nothing in return)  and we need more for true integration
   This is more like Jonathan's use case: It's not only about creating views, it's also about the possibility of wrapping existing complex web apps in an LC framework… but we need the browser widget's javascript handlers to be, basically, in the message path up and down.

HQ gave me a quote on doing this, but it's out our budgets, I fishing for anyone else who might be interested to pitch in.    


 back to work here..

On 1/28/17, 3:45 PM, "Richard Gaskin via use-livecode" <[hidden email]> wrote:

    Sannyasin Brahmanathaswami wrote:
   
    > So as not to burden this list which  "use" list and not a "complain"
    > list  I have responded to you at length directly.
   
    ...ands yet here we are, so we might as well enjoy the discussion.
   
    > 1) the graphics rendering layer of LC is behind the graphics
    > rendering layer of the browser
   
    Likely, but since both Chrome and LC use Skia we'd have to look a little
    deeper.
   
    Specifics are helpful.
   
   
    > 2) an IDE that provides a tool box for super elegant 21st century UI
    >  -- smooth, responsive, easy to change the Look/Feel even my attempts
    > with AnimationEngine  which is, I believe as good as it's going to
    > ever get with LC's engine, have a clunky, jerky feel e.g. try a ken
    > burns: move the image while simultaneously increasing is rect in
    > proportion. even rotating a ball around a circular path… has this
    > subtle "1990" feel to it vs the same thing done with CSS animation
    > in the browser. Maybe not an issue for all those whose use case is
    > business/systems/tools etc. but in our shop it has to look fabulous
    > or the horse is not considered a viable vehicle for the content
    > delivery. Period end of discussion.
   
    That's a good use case.  UIs are increasingly animated, so animation
    performance is increasingly useful.
   
    Anyone on the team listening in and can offer some insight into this?
   
   
    > 3) robust surport for SVG (not just a single color) on top of 1 and 2
    > above
   
    What limitations currently exist in the SVG widget?
   
    Let's identify the remaining specifics and see if we can get a plan
    together to handle those.
   
   
    > Isn’t the dictionary html in a widget? Why? There's one answer to
    > your question from HQ itself.
   
    I believe the Dictionary is indeed using the Browser widget.
   
    My question is why, since that content doesn't require full HTML
    rendering, doesn't it use a field object?
   
    But at this point my question is not for the team.  They already have
    the Dictionary in pretty good order, and the remaining nits can be
    addressed without a complete rewrite easily enough.
   
    My question would be for any community members eager to explore
    alternate designs.
   
   
    > If a player serves to provide the space to show content develop on
    > another platform (video/Premiere)
    >
    > Why not the browser widget to provide a space to show HTML5?
   
    There is a browser widget.  I believe I'd read an earlier post in which
    you said you're using it, so I don't understand this question.
   
   

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
Some problems here . . .

On 1/29/17 7:59 pm, Sannyasin Brahmanathaswami via use-livecode wrote:
> Until we hear that HQ is listening or want to know more I'll keep it short
>
> 1) SVG requirements
>
> rendering this would be a minimum. If here is a way to do it now in LC let me know
>
> http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg
This is coming up nice and clear in my browser (Waterfox, Mac OS 10.7.5)
>
> resize your browser, it remains perfect!
>
> More robust example… not currently set to resize, (but could be)
>
> http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
This is NOT doing well at all, what I am getting is this:

XML Parsing Error: prefix not bound to a namespace
Location: http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
Line Number 353, Column 13:            <image
xlink:href="Image_23AE112D-1E29-4436-8786-2DA3352AD676_0.png"
transform="matrix(0.197851,-0.002288,0.002534,0.219176,190.896141,26.273243)"
width="640.000000" height="960.000000"></image>
------------^

<snip>

Richmond.
_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
thanks for these tips… I will try again.



Svasti Astu, Be Well
Brahmanathaswami

www.himalayanacademy.com

 

On 1/28/17, 6:20 PM, "use-livecode on behalf of hh via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    It's not the LC graphics it's the "jagged" and "uncomplete" scripting.
    LC can do much more.
   
    Some basic examples related to the starting animation:
    = You use "wait <time>" for animations (!!!) and moreover
      +++ with <time> far below the refreshrate of the app.
      +++ with <time> independent of the device.
    = You animate along a random (jagged) line of points ignoring the
      existence of smooth curves.
    = You use an image that doesn't even have an antialiased border.
   
   

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
oops sorry, I was trying to make is responsive and broke something

try this now

http://wiki.hindu.org/uploads/SivaSivaDiagram.svg


 

On 1/29/17, 8:14 AM, "use-livecode on behalf of Richmond Mathewson via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:

    http://wiki.hindu.org/uploads/SivaSivaDiagram.svg

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
If that is meant to be a series of mobile phone outlines in a sort of
flowchart the thing is
viewable, but unlike the Himalayan Academy logo is doesn't scale at all.

Richmond.

On 1/29/17 8:25 pm, Sannyasin Brahmanathaswami via use-livecode wrote:

> oops sorry, I was trying to make is responsive and broke something
>
> try this now
>
> http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
>
>
>  
>
> On 1/29/17, 8:14 AM, "use-livecode on behalf of Richmond Mathewson via use-livecode" <[hidden email] on behalf of [hidden email]> wrote:
>
>      http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
>
> _______________________________________________
> 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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
I forget to give the URL for a complete web app that I was able to put into a LC browser widget  (too heavy for delivery becuase of all the audio content, but good proof of concept for using the brower widget to drive local html5 content in the same package:

www.himalayanacademy.com/apps/spiritual-workout

          - This is a recent app we released, HTML5 done in Ionic/Angular2

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
as mentioned… it's not responsive, that was just a quick export, would require some tweaking.

and the use case envisioned for larger ones is different: use pinch and zoom and swipe to move around and go in on the "map", this means we actually do not want it to scale down to fit….



On 1/29/17, 8:29 AM, "Richmond Mathewson via use-livecode" <[hidden email]> wrote:

    If that is meant to be a series of mobile phone outlines in a sort of
    flowchart the thing is
    viewable, but unlike the Himalayan Academy logo is doesn't scale at all.
   
    Richmond.
   
   

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
@ Richard.

OK, one more SVG example (I believe that's what you were asking for)

now you have three

http://wiki.hindu.org/uploads/floor-plan.svg # not responsive, but could be

http://wiki.hindu.org/uploads/SivaSivaDiagram.svg 
   # not responsive, but could be (though that's not wanted in this scenario  
   # imagine a "map world" you could explore…so it stays full size, user zooms in and out and swipes
   
http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg

So is SKIA in LC's future?

Again, I'm not clear about graphics engines issues.

BR

 

On 1/29/17, 8:29 AM, "Richmond Mathewson via use-livecode" <[hidden email]> wrote:

    If that is meant to be a series of mobile phone outlines in a sort of
    flowchart the thing is
    viewable, but unlike the Himalayan Academy logo is doesn't scale at all.
   
    Richmond.
   
   

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
Sannyasin Brahmanathaswami wrote:

 > 1) SVG requirements
 >
 > rendering this would be a minimum. If here is a way to do it now in
 > LC let me know
 >
 > http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg
 >
 > resize your browser, it remains perfect!

If the issue that LC won't render the image, or that it does but you
also want it automatically resized?

If the former, it would be good to know why LC's Skia isn't doing that.

For the latter, see below under 3).


 > More robust example… not currently set to resize, (but could be)
 >
 > http://wiki.hindu.org/uploads/SivaSivaDiagram.svg

I get:

   This page contains the following errors:
      error on line 353 at column 198: Namespace prefix xlink for
      href on image is not defined
   Below is a rendering of the page up to the first error.


 > 2) Yes I am using the browser widget to show pages on our web site.
 > Even that has lots of issues, but we are working with it. and HQ has
 > been responsive on the issue of thecontent rendering in odd rects..
 > though I am still seeing this in 8.1.3  need to do more testing in
 > the next few days… we made be forced out to use launch URL and send
 > the user off the LC app into the browser app on the phone.. (rather
 > not have to do that)

I would imagine the browser widget would provide easier messaging
integration than dealing with a completely separate app.  If you find
otherwise I would be interested in learning how to handle those messages
between apps.


 > 3) HTML Integration has two use cases (in my current purview, there
 > could be more)
 >
 >   i. simple views
 >
 > this can be created in less than 5 minutes the view consists of  a
 > few lines
 >
 > <ul class="flexdiv">
 > <li class="flexpanel1"> Mangos</li>
 > <li class="flexpanel2"> Mangos</li>
 > <li class="flexpanel1"> Papayas</li>
 > <li class="flexpanel2"> Chiku</li>
 > <ul>
 >
 > touch of CSS and you get this:
 >
 > http://wiki.hindu.org/uploads/gui-eg.html

The "touch of CSS" is longer than the object definitions:

<style type="text/css">
.flexdiv {
margin:0;
padding:0;
font-size: 200%;
text-align:center;
}
.flexpanel1 {

  width:100%;
  height:25%;
background-color:rgba(200,0,0,0.2);
}
.flexpanel2 {
  width:100%;
background-color:rgba(0,200,0,0.2);
}


Still more concise compared to equivalent LiveCode for doing the same
thing in script.  But with LC's GUI controls how often to we write code
to instantiate them and set all of their properties?

I usually drop an object in and only script things that will change
dynamically.

But on balance there are indeed opportunities here - and here we get to
the crux of things:

 > responsive, easily tweaked if the content people want another four
 > rows in the panel, cut and paste, changing props, sure, it's a text
 > file, but so what… change one integer value and all rows change.
 >
 > This simply cannot be done that easily created in Livecode. (Please
 > don't respond with "yes we can make this in LC" I know you can, but
 > to scale change and make it responsive change colors on all objects
 > in the group at once etc.. you need to be an old xTalk wizard with
 > toolboxes)

That last paragraph arbitrarily limits the scope of solutions available,
so I may not be able to help.  After all, once we decide not to enhance
LC to better serve your workflow needs why have this conversation here
at all?

So skipping that and looking at actionable possibilities, we can start
by reviewing the different rendering models in play:


HTML model: Natural Flow
------------------------
HTML has something we don't:  "natural flow", a set of conventions for
object placement that are implied and do not need to be specified in
order to get some form of reasonably useful layout.

The natural flow begins rendering block elements at the upper-left, and
continues wrapping without overlap downward for each successive element.
  No coordinates need to be specified to get this layout, which avoids
overlap as it maintains adjacency automatically.

This fits well with the original goal of HTML for laying out research
papers, and has been extended with admirable backward compatibility for
all the things done with it today.

It does require, however, a fair bit of learning when you want to
specify locations or any non-default placement; the differences between
"absolute", "relative", and "fixed" are rarely clear to the newcomer,
and results can vary depending on context.


App Model: Explicit Coordinates
-------------------------------
In contrast, LC follows the coordinate systems as defined by modern GUI
OSes, in which elements use explicitly-defined placement.

Whether using XCode's Interface Builder, MS Visual Studio's form tools,
GNOME Glade, or LC's IDE (among many others), objects are placed on
screen at a given size and location.  Any defaults are often similar to
those in LC's template objects, providing no automatic adjustment to
prevent overlap or accommodate resizing.

This is not at all a bad display model given the purpose of such tools,
making GUI apps, in contrast with HTML's original purpose of laying out
predominantly textual pages optionally augmented with images.

The particular layout you showed above is easier in HTML, but many
(most?) traditional GUIs will often require more code/definitions to lay
out in HTML than in GUI app makers.

The app model is very different from HTML, but not necessarily inferior.
  Each was designed to prioritize different sets of primary goals, and
with enough flexibility to allow good support for secondary goals with
reasonably acceptable effort.


REBOL View: a middle path
-------------------------
The distinct benefits of both HTML and app models find expression in
only one system I'm familiar with, REBOL View:
http://www.rebol.com/docs/view-guide.html

REBOL View allows explicit placement far more easily than is usually
found in CSS, but unlike most app models it also includes a sort of
"natural flow" for elements which do not have explicitly-defined
coordinates.

A simple example from about a third down the way on the page:

view layout [
     vh2 "Layout Definition:"
     text "Layouts describe graphical user interfaces."
     button "Remember"
]

...renders:
http://www.rebol.com/docs/graphics/layout3.png

The excellent design thinking evident in View's features is more than
I'd want to bastardize through summarization here.  That page is worth
spending at least 20 minutes with to get the gist of what View offers.



ONE (of hopefully many) POSSIBLE SOLUTION: libCC
------------------------------------------------
Some years ago I started scratching an itch for a simple way to define
objects in plain text.

The goal was to make defining objects as sparse as possible, which led
to a set of useful defaults, similar to how the R language handles
things, with positioning that relies on a natural flow for automatic
layout similar to HTML and REBOL View.

This was in a library I called CC, allowing things like:

CC:
fld "name"
fld "age"
btn "Submit"
/CC

...which could be placed in any text container (such as an email) so the
CC lib could parse it out to create the layout.

I could get into more details about CC, and if there's interest I could
dig around in my archives to find it and make it compatible with modern LC.

But the point here isn't necessarily my old implementation, but that
such an implementation can be made, and not without too much work.

I shelved CC simply because, as fun as it was to play with at the time,
I had no practical use for it.

But if there's sufficient interest in something like a library for
having a sort of REBOL View-inspired way of defining objects and their
placement/resizing, a sort of LC-flavored solution for providing
"natural flow", perhaps it may be worth resurrecting and completing.

Or anyone here could create something else that serves those goals.

Just as View is an optional extension to the REBOL core language, this
need not require any changes to the LiveCode engine to have it.

All it requires is sufficient interest from the community to get the
time to make it.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by JJS via use-livecode
Sannyasin Brahmanathaswami wrote:

 > OK, one more SVG example (I believe that's what you were asking for)
 >
 > now you have three
 >
 > http://wiki.hindu.org/uploads/floor-plan.svg # not responsive, but
 > could be
 >
 > http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
 >    # not responsive, but could be (though that's not wanted in this
 > scenario
 >    # imagine a "map world" you could explore…so it stays full size,
 > user zooms in and out and swipes
 >
 > http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg

Do those render in LC's SVG widget?


 > So is SKIA in LC's future?

Skia replaced LC's older graphics subsystem many versions ago (5.x?).
They did such a good job that most folks never noticed.  But where you
see new capabilities like the SVG widget, those are among the many
upsides of having switched to this popular graphics system.

--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  [hidden email]                http://www.FourthWorld.com

_______________________________________________
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: Browser Widget/HTML5/LC Integration

BNig
Sannyasin Brahmanathaswami wrote:

 > OK, one more SVG example (I believe that's what you were asking for)
 >
 > now you have three
 >
 > http://wiki.hindu.org/uploads/floor-plan.svg # not responsive, but
 > could be
 >
 > http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
 >    # not responsive, but could be (though that's not wanted in this
 > scenario
 >    # imagine a "map world" you could explore…so it stays full size,
 > user zooms in and out and swipes
 >
 > http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg

Do those render in LC's SVG widget?


 > So is SKIA in LC's future?

Skia replaced LC's older graphics subsystem many versions ago (5.x?).
They did such a good job that most folks never noticed.  But where you
see new capabilities like the SVG widget, those are among the many
upsides of having switched to this popular graphics system.

--
  Richard Gaskin


Peter Thirkell posted a -lcb file that has to be compiled using the Extension Builder that he uses to display simple color SVGs. No gradients and no advanced features of SVG.
http://forums.livecode.com/viewtopic.php?f=93&t=27811&p=150208#p150208
He parses svg export from Affinity Designer.

That said I scraped two of the above mentioned SVGs, after exporting them from Affinity Designer I was able to feed the logo to Peter's hacked SVG Color widget and it displayed fully. Rescalable and everything.

The floor plan lost the annotational text and some fills (because of gradients) but otherwise rendered ok.

I did not attempt to use the SivaSivaDiagramm because the source code was full of things Peter's widget can not display.

I recommend anybody interested in widgets to look at Peter's .lcb file and especially appreciate his parsing handlers.

That all said what the svg widget is lacking is a more advanced svg parser beyond black and white and transparency. Mark Waddingham had started on implementing an open source parser but apparently Infinite Livecode kept him from finishing it yet.
https://github.com/livecode/livecode/pull/3089

Kind regards
Bernd
Reply | Threaded
Open this post in threaded view
|

Re: Browser Widget/HTML5/LC Integration

JJS via use-livecode
@ Bernd  It's good to hear there is some progress! thanks for testing.  I will look into Peter's files but also hope for the day when this is in the product.

@ Richard, No, as you can see they will not display in the widget.  But here appears to be hope. I was not aware of the big shift over to SKIA (nor do I really know the scope of what that means in terms of future possibilities)

I'll do a small test loading these into a browser widget..

 

On 1/29/17, 11:41 AM, "BNig via use-livecode" <[hidden email]> wrote:

    Sannyasin Brahmanathaswami wrote:
   
     > OK, one more SVG example (I believe that's what you were asking for)
     >
     > now you have three
     >
     > http://wiki.hindu.org/uploads/floor-plan.svg # not responsive, but
     > could be
     >
     > http://wiki.hindu.org/uploads/SivaSivaDiagram.svg
     >    # not responsive, but could be (though that's not wanted in this
     > scenario
     >    # imagine a "map world" you could explore…so it stays full size,
     > user zooms in and out and swipes
     >
     > http://www.himalayanacademy.com/assets/img/khm-logo-full-horizontal.svg
   
    Do those render in LC's SVG widget?
   
   
     > So is SKIA in LC's future?
   
    Skia replaced LC's older graphics subsystem many versions ago (5.x?).
    They did such a good job that most folks never noticed.  But where you
    see new capabilities like the SVG widget, those are among the many
    upsides of having switched to this popular graphics system.
   
    --
      Richard Gaskin
   
   
    Peter Thirkell posted a -lcb file that has to be compiled using the
    Extension Builder that he uses to display simple color SVGs. No gradients
    and no advanced features of SVG.
    http://forums.livecode.com/viewtopic.php?f=93&t=27811&p=150208#p150208
    He parses svg export from Affinity Designer.
   
    That said I scraped two of the above mentioned SVGs, after exporting them
    from Affinity Designer I was able to feed the logo to Peter's hacked SVG
    Color widget and it displayed fully. Rescalable and everything.
   
    The floor plan lost the annotational text and some fills (because of
    gradients) but otherwise rendered ok.
   
    I did not attempt to use the SivaSivaDiagramm because the source code was
    full of things Peter's widget can not display.
   
    I recommend anybody interested in widgets to look at Peter's .lcb file and
    especially appreciate his parsing handlers.
   
    That all said what the svg widget is lacking is a more advanced svg parser
    beyond black and white and transparency. Mark Waddingham had started on
    implementing an open source parser but apparently Infinite Livecode kept him
    from finishing it yet.
    https://github.com/livecode/livecode/pull/3089
   
    Kind regards
    Bernd
   
   
   
    --
    View this message in context: http://runtime-revolution.278305.n4.nabble.com/Browser-Widget-HTML5-LC-Integration-tp4712003p4712034.html
    Sent from the Revolution - User mailing list archive at Nabble.com.
   
    _______________________________________________
    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: Browser Widget/HTML5/LC Integration

JJS via use-livecode
In reply to this post by BNig
Hmm, interesting

try this

http://wiki.hindu.org/uploads/SivaSivaDiagram.svg  # in firefox; chrome; LC browser widget

result:

 Firefox renders the gradients.
Chrome and the LC browser widget render some place holder in the same space.


On 1/29/17, 11:41 AM, "BNig via use-livecode" <[hidden email]> wrote:

    http://wiki.hindu.org/uploads/SivaSivaDiagram.svg

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