A web app launcher with responsive design

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 283
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

A web app launcher with responsive design

Post by SWEdeAndy » Sat Aug 13, 2022 8:26 pm

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
Andreas Bergendal
Independent app and system developer
Free LC dev tools: https://github.com/wheninspace
(WIS_WebDeployHelper, WIS_ScriptDependencies, WIS_BrowserAnimation)
WhenInSpace: https://wheninspace.se/en

stam
Posts: 2848
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: A web app launcher with responsive design

Post by stam » Sat Aug 13, 2022 8:37 pm

Very nicely done Andreas, works as advertised!
Keep em coming :-)

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 283
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: A web app launcher with responsive design

Post by SWEdeAndy » Sun Aug 14, 2022 11:51 am

Thanks Stam! :)
--

To clarify (as was asked on the use-list): It is made with LC 10 dp 4 which uses the wasm tech and not the old html5 tech.

And 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_ ... ackage.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
Andreas Bergendal
Independent app and system developer
Free LC dev tools: https://github.com/wheninspace
(WIS_WebDeployHelper, WIS_ScriptDependencies, WIS_BrowserAnimation)
WhenInSpace: https://wheninspace.se/en

stam
Posts: 2848
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: A web app launcher with responsive design

Post by stam » Sun Aug 14, 2022 1:56 pm

Thanks for the share Andreas!

I have other priorities right now, but will definitely test on my server when i get a chance.
I have been following the web stuff with interest, but part of me wants to wait until there is more native support...

My biggest concern is security - while i grasp the basics of cloud hosted databases etc, running a web app probably does increase exposure (I'm guessing), and possibly adds to the security concerns although i'm not an expert (hence my concerns!)

S.

SparkOut
Posts: 2872
Joined: Sun Sep 23, 2007 4:58 pm

Re: A web app launcher with responsive design

Post by SparkOut » Sun Aug 14, 2022 2:24 pm

On Samsung Internet browser on Android it works in landscape but not responsively in portrait mode - at least the portrait presentation overlaps the objects that don't fit the width (the side by side presentation is a bit bewildering as the windows are on top of each other and the swapping option doesn't get shown, but becomes apparent in landscape.)
In the wordle demo it is not intuitive that you have to press enter/go for each letter rather than have it auto-tab to the next box, and it doesn't seem to respond to long-presses or at least I can't find a way to get the "right-click" effect.
Still it all looks impressive, and I am happy to see some good progress on the web deployment of LiveCode.

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 283
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: A web app launcher with responsive design

Post by SWEdeAndy » Sun Aug 14, 2022 3:05 pm

Yes, in mobile browsers the side-by-side example fails horribly, in its current crude state. That one is only interesting for desktop browsers, I think.

If the other examples look bad in portrait mode on your Android device, it might be that the stacks need some tweaking of both the layout and the screen-width threshold I've set - 500 pixels - for triggering the portrait layout. Or it may be a specific Samsung/Android problem. I don't have the equipment to experiment with that unfortunately.

The wordle helper is older and was just thrown in here to have yet another stack to link to. It is not great on mobile. However, it does auto-tab to the next letter on every device I've tried it on, so that seems to be a new, maybe Samsung specific issue. On mobile, to indicate feedback, the spacebar must be used instead of right-click (no long press), as the instructions on the page say...
Well, room for improvement, as always. So many projects, so little time... :)
Andreas Bergendal
Independent app and system developer
Free LC dev tools: https://github.com/wheninspace
(WIS_WebDeployHelper, WIS_ScriptDependencies, WIS_BrowserAnimation)
WhenInSpace: https://wheninspace.se/en

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7283
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: A web app launcher with responsive design

Post by jacque » Mon Aug 15, 2022 5:00 pm

I ran it in Chrome on my 8" Huawei tablet and it worked fine, including the side by side example. It also worked when I rotated the device. I'm pretty impressed.

Edit: I just tried it on my Pixel 6 phone and all examples work well there too. I used Firefox to test this time. The side by side ran off the narrow screen but could be scrolled horizontally to see all of the right side stack.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7283
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: A web app launcher with responsive design

Post by jacque » Tue Aug 16, 2022 5:47 pm

@SWEdeAndy, how did you make the loading spinner? Yesterday I made my first web app and I'd like to add that. On newer machines the loading is pretty fast but it took about 15 seconds on my old tablet.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 283
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: A web app launcher with responsive design

Post by SWEdeAndy » Tue Aug 16, 2022 6:58 pm

jacque wrote:
Tue Aug 16, 2022 5:47 pm
@SWEdeAndy, how did you make the loading spinner? Yesterday I made my first web app and I'd like to add that. On newer machines the loading is pretty fast but it took about 15 seconds on my old tablet.
Oh, the loading spinner is the standard one that the standalone builder includes. It should appear when you test your web app.
It should be possible to change the code though (the js in the html file), to get a different loading spinner. I'd prefer one that shows a percentage, if possible. I seem to recall that someone hinted about that possibility in the LC conference, but I fail to find that now when browsing the sessions.

Yes, I also experience quite fast loading times, both on an iPhone X and a 2018 MacBook Pro, even on the first load.
Andreas Bergendal
Independent app and system developer
Free LC dev tools: https://github.com/wheninspace
(WIS_WebDeployHelper, WIS_ScriptDependencies, WIS_BrowserAnimation)
WhenInSpace: https://wheninspace.se/en

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7283
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: A web app launcher with responsive design

Post by jacque » Wed Aug 17, 2022 12:14 am

So the loading spinner was enabled without doing anything? I didn't get a spinner on any of my test devices. Your app had it though.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bobcole
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 139
Joined: Tue Feb 23, 2010 10:53 pm
Location: Saint Louis, Missouri USA

Re: A web app launcher with responsive design

Post by bobcole » Wed Aug 17, 2022 6:19 am

When testing in the IDE (localhost), a small "Hello World" stack may load from disk so quickly the spinner may not seem to appear.
I tested a slightly larger stack in the IDE and the spinner appears briefly.
When downloading an app from a server, the spinner grinds away for a few seconds. Refreshing the browser page loads quickly because it is in the cache.
Try my word helper stack:
https://morrevbon.com/wordhelper.html
Bob

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7283
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: A web app launcher with responsive design

Post by jacque » Wed Aug 17, 2022 5:45 pm

I followed the directions in a LC lesson which provided a generic js script to be used in addition to the LC ones. It does say there is no loading indicator. What files did you use? Are the four files LC creates enough?

Edit: Never mind. The LC lesson is obsolete and the .js script is not necessary. Going directly to the html file works and does show the spinner. My mistake was trying to use documentation. :)
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bobcole
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 139
Joined: Tue Feb 23, 2010 10:53 pm
Location: Saint Louis, Missouri USA

Re: A web app launcher with responsive design

Post by bobcole » Thu Aug 18, 2022 4:33 am

I was curious as to what the minimum html file, with the minimum javaScript, might be.
I put this into a .html file (I called it "Minimum.html") and put it in the standalone folder on my server.
I navigated the browser to open that file on the server. It worked for a simple LiveCode stack I'm playing with at the moment (-dp-3).
No spinner, no formatting, absolute minimum html and JS.

Code: Select all

<html>
<body>
<!-- The canvas -->
<div><canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas> </div>
<!-- The Module object -->
<script type="text/javascript">var Module = { canvas: document.getElementById('canvas'), };</script>
<!-- Engine download -->
<script async type="text/javascript" src="standalone-10.0.0-dp-3.js"></script>
</body>
</html>
The LiveCode Users Guide.pdf (Help > User Guide) has a good explanation starting around page 526 (see "Build for Web").
This may not be useful in other situations.
FYI,
Bob

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 283
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: A web app launcher with responsive design

Post by SWEdeAndy » Thu Aug 18, 2022 7:46 pm

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.

Some change I made caused the fullscreen example to start working very badly, I haven't figured out why yet...
Andreas Bergendal
Independent app and system developer
Free LC dev tools: https://github.com/wheninspace
(WIS_WebDeployHelper, WIS_ScriptDependencies, WIS_BrowserAnimation)
WhenInSpace: https://wheninspace.se/en

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4047
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: A web app launcher with responsive design

Post by bn » Thu Aug 18, 2022 8:34 pm

Hi Andreas,

This version runs much better on Safari Version 15.6.1 MacOs 12.5.1 than the one before.
Especially resizing th browser window vertically and horizontally and both is now smooth.
Congratulations.

Kind regards
Bernd

Post Reply

Return to “HTML5”