Re: A web app launcher with responsive design

[Andreas Bergendal via use-livecode]

I have now redesigned the portal page and made it much more responsive and also 
with clearer sections for the example stacks:
https://wheninspace.com/portal/  
(You may need to clear the browser cache, or open the link in a private browser 
window if it looks the same as before.)

I've also updated the download package and put a link to it from the portal 
stack.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Jim Lambert via use-livecode]

Andreas,

Very nice!

Thanks,
Jim Lambert

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Andreas Bergendal via use-livecode]

Hi all,

Thanks for your feedback on this first test version. It is made with LC 10 dp 4 
which indeed uses the wasm tech and not the old html5 tech.

And don’t worry - I wouldn’t have half the knowledge I have in LC coding if it 
weren’t for the generous sharing on this list and in the forum. Being able to 
make a small contribution to this knowledge bank is my pleasure.

Here’s a link to a zip file with all the stacks used in the example, plus the 
index.html file (with I use to replace the standalone.html file produced by the 
standalone maker):
https://wheninspace.com/portal/LC_wasm_example_package.zip

Note that the links used in the scripts to open stacks all point to my 
server/domain (obviously) , so if you want to experiment with your copy you’ll 
need to have a server to put them on and change the links accordingly. It will 
not work by using the Test deployment (at least not out-of-the-box). I do all 
testing live on the server.

Note the order in which the stacks fire up: LCweblauncher.livecode (which 
becomes standalone.zip when built) -> uses WISwebLauncherLib.livecodescript -> 
opens WISwebPortal.livecode -> opens the other stacks.

I’m sure there's room for vast improvement to all this, and I believe there 
will also be more support for natively handling some things in coming LC10 
versions.
But the future looks promising! :)

/Andreas


> 13 aug. 2022 kl. 23:39 skrev Mark Smith :
> 
> Congratulations Andreas and thanks for sharing. I haven’t done any work with 
> the new LC HTML5 engine but I was really impressed with the speed of loading 
> it on my new M1 Pro — about 3-4 seconds on first download and then a second 
> or so thereafter. On my iPhone 12 not so fast… more like 30 on the first 
> download but again very quick (a second or two) on subsequent loads. It looks 
> like you’ve got a lot of the tech working with objects and screens and the 
> adaptive resizing. When I do get around to getting into this (and it looks 
> very enticing) I’ll know where to go for help :)
> 
> Mark
> 
> 
>> On 13 Aug 2022, at 8:24 pm, Andreas Bergendal via use-livecode 
>>  wrote:
>> 
>> Friends, I have done wonderful things with LC10 web deployment!
>> 
>> I’m excited to share with you the fruits of this week's extensive research 
>> and testing!
>> 
>> TL;DR:
>> Try this: https://wheninspace.com/portal/
>> 
>> Long version:
>> 
>> I wanted to do two things:
>> 
>> 1) Like we often do with desktop standalones: Create a minimal 
>> launcher/splash stack as standalone, which only does one thing - open an 
>> external stack that does everything else. This way I can then update 
>> individual stacks, without having to build a new standalone each time.
>> 
>> 2) Get the resizing of the browser window to trigger the resize of the 
>> stacks and all the responsive design therein, and make it look good on both 
>> desktop and mobile. (Refining the example from the mothership, ”Meeting 
>> space”.)
>> 
>> I have accomplished both!
>> You can see and test the result here:
>> https://wheninspace.com/portal/
>> 
>> Please try it both in desktop browsers (resizing the browser to various 
>> sizes) and mobile browsers (both portrait and landscape orientation).
>> 
>> The standalone consists of a minimal launch stack that just acts as event 
>> listening agent (even after closing itself) and opens the Portal stack which 
>> is an external LC stack. The Portal stack then has buttons for opening 
>> additional external LC stacks. 
>> 
>> When the launcher stack receives a resize signal from the browser (from the 
>> JavaScript in the html file), it dispatches ”resizeEvent” with the 
>> width/height values to the topStack, which can subsequently rearrange its 
>> stack rect and content accordingly.
>> 
>> As a bonus, I also demonstrate the possibility to show several stacks in the 
>> same browser window!
>> 
>> I find the LC web deployment option a true game-changer! A new world is 
>> opening! Let’s build it! :)
>> 
>> /Andreas
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Mark Wieder via use-livecode]

On 8/13/22 17:16, Alex Tweedly via use-livecode wrote:


On 13/08/2022 20:24, Andreas Bergendal via use-livecode wrote:

Friends, I have done wonderful things with LC10 web deployment!

I’m excited to share with you the fruits of this week's extensive 
research and testing!



Wow. Thanks Andreas.

Resize, etc. work well for me on Safari, but fail badly on Chrome 
browser (details not included) - all build-for-web attempts fail on this 
version of Chrome.  (which it says is up-to-date).


OTOH, it's working fine for me on Chrome. Go figger.

--
 Mark Wieder
 ahsoftw...@gmail.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Mark Smith via use-livecode]

Hi Tom, Andreas didn’t mention what the platform was in his message so I just 
googled  “LC web deployment” and it turned up this… 

https://lessons.livecode.com/m/4071/l/800867-how-do-i-put-my-first-app-on-the-web

However, since you mentioned WASM I looked it up and you are correct, LC 10 
(which Andreas was using) is using Web Assembly not HTML5. 

Sent from my iPhone

> On Aug 14, 2022, at 1:07 AM, Tom Glod via use-livecode 
>  wrote:
> 
> Hey Andreas, thanks for sharing, cool example of responsive design.
> 
> I thought the HTML5/javascript export was dead, and WASM would be used
> instead.
> It could be my own confusion about terminology being used.
> Can someone clarify this for me?
> 
> Thanks,
> 
> Tom
> 
> 
>> On Sat, Aug 13, 2022 at 5:41 PM Mark Smith via use-livecode <
>> use-livecode@lists.runrev.com> wrote:
>> 
>> Congratulations Andreas and thanks for sharing. I haven’t done any work
>> with the new LC HTML5 engine but I was really impressed with the speed of
>> loading it on my new M1 Pro — about 3-4 seconds on first download and then
>> a second or so thereafter. On my iPhone 12 not so fast… more like 30 on the
>> first download but again very quick (a second or two) on subsequent loads.
>> It looks like you’ve got a lot of the tech working with objects and screens
>> and the adaptive resizing. When I do get around to getting into this (and
>> it looks very enticing) I’ll know where to go for help :)
>> 
>> Mark
>> 
>> 
>>> On 13 Aug 2022, at 8:24 pm, Andreas Bergendal via use-livecode <
>> use-livecode@lists.runrev.com> wrote:
>>> 
>>> Friends, I have done wonderful things with LC10 web deployment!
>>> 
>>> I’m excited to share with you the fruits of this week's extensive
>> research and testing!
>>> 
>>> TL;DR:
>>> Try this: https://wheninspace.com/portal/ <
>> https://wheninspace.com/portal/>
>>> 
>>> Long version:
>>> 
>>> I wanted to do two things:
>>> 
>>> 1) Like we often do with desktop standalones: Create a minimal
>> launcher/splash stack as standalone, which only does one thing - open an
>> external stack that does everything else. This way I can then update
>> individual stacks, without having to build a new standalone each time.
>>> 
>>> 2) Get the resizing of the browser window to trigger the resize of the
>> stacks and all the responsive design therein, and make it look good on both
>> desktop and mobile. (Refining the example from the mothership, ”Meeting
>> space”.)
>>> 
>>> I have accomplished both!
>>> You can see and test the result here:
>>> https://wheninspace.com/portal/ 
>>> 
>>> Please try it both in desktop browsers (resizing the browser to various
>> sizes) and mobile browsers (both portrait and landscape orientation).
>>> 
>>> The standalone consists of a minimal launch stack that just acts as
>> event listening agent (even after closing itself) and opens the Portal
>> stack which is an external LC stack. The Portal stack then has buttons for
>> opening additional external LC stacks.
>>> 
>>> When the launcher stack receives a resize signal from the browser (from
>> the JavaScript in the html file), it dispatches ”resizeEvent” with the
>> width/height values to the topStack, which can subsequently rearrange its
>> stack rect and content accordingly.
>>> 
>>> As a bonus, I also demonstrate the possibility to show several stacks in
>> the same browser window!
>>> 
>>> I find the LC web deployment option a true game-changer! A new world is
>> opening! Let’s build it! :)
>>> 
>>> /Andreas
>>> ___
>>> use-livecode mailing list
>>> use-livecode@lists.runrev.com
>>> Please visit this url to subscribe, unsubscribe and manage your
>> subscription preferences:
>>> http://lists.runrev.com/mailman/listinfo/use-livecode
>> 
>> 
>> ___
>> use-livecode mailing list
>> use-livecode@lists.runrev.com
>> Please visit this url to subscribe, unsubscribe and manage your
>> subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>> 
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Alex Tweedly via use-livecode]

On 13/08/2022 20:24, Andreas Bergendal via use-livecode wrote:

Friends, I have done wonderful things with LC10 web deployment!

I’m excited to share with you the fruits of this week's extensive research and 
testing!


Wow. Thanks Andreas.

Resize, etc. work well for me on Safari, but fail badly on Chrome 
browser (details not included) - all build-for-web attempts fail on this 
version of Chrome.  (which it says is up-to-date).



However, the way I read your email ( "...excited to share with you the 
fruits of this week's..."), I think ui intend to make this code 
available for the rest of us to use. But, I cant see a link, or a way to 
get access to the source.


Please tell me I'm not over-interpreting your words. Please say that you 
have, or will, publish the text of the stacks involved.


Many thanks again,

Alex.



___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Tom Glod via use-livecode]

Hey Andreas, thanks for sharing, cool example of responsive design.

I thought the HTML5/javascript export was dead, and WASM would be used
instead.
It could be my own confusion about terminology being used.
Can someone clarify this for me?

Thanks,

Tom


On Sat, Aug 13, 2022 at 5:41 PM Mark Smith via use-livecode <
use-livecode@lists.runrev.com> wrote:

> Congratulations Andreas and thanks for sharing. I haven’t done any work
> with the new LC HTML5 engine but I was really impressed with the speed of
> loading it on my new M1 Pro — about 3-4 seconds on first download and then
> a second or so thereafter. On my iPhone 12 not so fast… more like 30 on the
> first download but again very quick (a second or two) on subsequent loads.
> It looks like you’ve got a lot of the tech working with objects and screens
> and the adaptive resizing. When I do get around to getting into this (and
> it looks very enticing) I’ll know where to go for help :)
>
> Mark
>
>
> > On 13 Aug 2022, at 8:24 pm, Andreas Bergendal via use-livecode <
> use-livecode@lists.runrev.com> wrote:
> >
> > Friends, I have done wonderful things with LC10 web deployment!
> >
> > I’m excited to share with you the fruits of this week's extensive
> research and testing!
> >
> > TL;DR:
> > Try this: https://wheninspace.com/portal/ <
> https://wheninspace.com/portal/>
> >
> > Long version:
> >
> > I wanted to do two things:
> >
> > 1) Like we often do with desktop standalones: Create a minimal
> launcher/splash stack as standalone, which only does one thing - open an
> external stack that does everything else. This way I can then update
> individual stacks, without having to build a new standalone each time.
> >
> > 2) Get the resizing of the browser window to trigger the resize of the
> stacks and all the responsive design therein, and make it look good on both
> desktop and mobile. (Refining the example from the mothership, ”Meeting
> space”.)
> >
> > I have accomplished both!
> > You can see and test the result here:
> > https://wheninspace.com/portal/ 
> >
> > Please try it both in desktop browsers (resizing the browser to various
> sizes) and mobile browsers (both portrait and landscape orientation).
> >
> > The standalone consists of a minimal launch stack that just acts as
> event listening agent (even after closing itself) and opens the Portal
> stack which is an external LC stack. The Portal stack then has buttons for
> opening additional external LC stacks.
> >
> > When the launcher stack receives a resize signal from the browser (from
> the JavaScript in the html file), it dispatches ”resizeEvent” with the
> width/height values to the topStack, which can subsequently rearrange its
> stack rect and content accordingly.
> >
> > As a bonus, I also demonstrate the possibility to show several stacks in
> the same browser window!
> >
> > I find the LC web deployment option a true game-changer! A new world is
> opening! Let’s build it! :)
> >
> > /Andreas
> > ___
> > use-livecode mailing list
> > use-livecode@lists.runrev.com
> > Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> > http://lists.runrev.com/mailman/listinfo/use-livecode
>
>
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: A web app launcher with responsive design

[Mark Smith via use-livecode]

Congratulations Andreas and thanks for sharing. I haven’t done any work with 
the new LC HTML5 engine but I was really impressed with the speed of loading it 
on my new M1 Pro — about 3-4 seconds on first download and then a second or so 
thereafter. On my iPhone 12 not so fast… more like 30 on the first download but 
again very quick (a second or two) on subsequent loads. It looks like you’ve 
got a lot of the tech working with objects and screens and the adaptive 
resizing. When I do get around to getting into this (and it looks very 
enticing) I’ll know where to go for help :)

Mark


> On 13 Aug 2022, at 8:24 pm, Andreas Bergendal via use-livecode 
>  wrote:
> 
> Friends, I have done wonderful things with LC10 web deployment!
> 
> I’m excited to share with you the fruits of this week's extensive research 
> and testing!
> 
> TL;DR:
> Try this: https://wheninspace.com/portal/ 
> 
> Long version:
> 
> I wanted to do two things:
> 
> 1) Like we often do with desktop standalones: Create a minimal 
> launcher/splash stack as standalone, which only does one thing - open an 
> external stack that does everything else. This way I can then update 
> individual stacks, without having to build a new standalone each time.
> 
> 2) Get the resizing of the browser window to trigger the resize of the stacks 
> and all the responsive design therein, and make it look good on both desktop 
> and mobile. (Refining the example from the mothership, ”Meeting space”.)
> 
> I have accomplished both!
> You can see and test the result here:
> https://wheninspace.com/portal/ 
> 
> Please try it both in desktop browsers (resizing the browser to various 
> sizes) and mobile browsers (both portrait and landscape orientation).
> 
> The standalone consists of a minimal launch stack that just acts as event 
> listening agent (even after closing itself) and opens the Portal stack which 
> is an external LC stack. The Portal stack then has buttons for opening 
> additional external LC stacks. 
> 
> When the launcher stack receives a resize signal from the browser (from the 
> JavaScript in the html file), it dispatches ”resizeEvent” with the 
> width/height values to the topStack, which can subsequently rearrange its 
> stack rect and content accordingly.
> 
> As a bonus, I also demonstrate the possibility to show several stacks in the 
> same browser window!
> 
> I find the LC web deployment option a true game-changer! A new world is 
> opening! Let’s build it! :)
> 
> /Andreas
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

A web app launcher with responsive design

[Andreas Bergendal via use-livecode]

Friends, I have done wonderful things with LC10 web deployment!

I’m excited to share with you the fruits of this week's extensive research and 
testing!

TL;DR:
Try this: https://wheninspace.com/portal/ 

Long version:

I wanted to do two things:

1) Like we often do with desktop standalones: Create a minimal launcher/splash 
stack as standalone, which only does one thing - open an external stack that 
does everything else. This way I can then update individual stacks, without 
having to build a new standalone each time.

2) Get the resizing of the browser window to trigger the resize of the stacks 
and all the responsive design therein, and make it look good on both desktop 
and mobile. (Refining the example from the mothership, ”Meeting space”.)

I have accomplished both!
You can see and test the result here:
https://wheninspace.com/portal/ 

Please try it both in desktop browsers (resizing the browser to various sizes) 
and mobile browsers (both portrait and landscape orientation).

The standalone consists of a minimal launch stack that just acts as event 
listening agent (even after closing itself) and opens the Portal stack which is 
an external LC stack. The Portal stack then has buttons for opening additional 
external LC stacks. 

When the launcher stack receives a resize signal from the browser (from the 
JavaScript in the html file), it dispatches ”resizeEvent” with the width/height 
values to the topStack, which can subsequently rearrange its stack rect and 
content accordingly.

As a bonus, I also demonstrate the possibility to show several stacks in the 
same browser window!

I find the LC web deployment option a true game-changer! A new world is 
opening! Let’s build it! :)

/Andreas
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode