Hi,
thanks for the introdcution. I habe sucessfully created some stacks in LC10, but now I have some questions:

1. How to get rid of the Livecode Button upper left and the checkboxes on the upper rioght side?

2. Why did "put url theWebAdress into field 1" does not work in the browser?

Cheers
Torsten

Hello Torsten,

1. You can customise the html output, by editing the template html here:

/Applications/LiveCode 10.0.0 (dp 1).app/Contents/Tools/Runtime/Emscripten/wasm/standalone-10.0.0-dp-1.html

For example, you can remove the LiveCode logo by deleting the whole
tag

Similarly, to remove the various checkboxes at the top right you can delete these tags:

Resize canvas

Lock/hide mouse pointer

You get the idea.

2. Currently it seems that the inclusion of the Internet library breaks the URL calls (including put url ...). It might be worth trying without the Internet library inclusion, but this issue will be fixed in next releases of LC 10.

Cheers,
Panos

Manually selecting inclusion and then de-checking internet library does not change the behavior :-/
When will the next release be available?

Cheers,
Torsten

Thorsten, 'put url' currently doesn't seem to work. There is already a report for this.
https://quality.livecode.com/show_bug.cgi?id=23470
You could add your email address to the CC list of that report to be informed about the status.

Hi Panos,

I have played around with the html-tempate but i am still a bit confused. Is ist possible to have a template of the html-file whre only the app is running an no other things are visible?

Cheers,
Torsten

Hi Torsten. Yes, this is possible, you need to edit the code on the html page to do this. We will look at making this easier in later releases of LiveCode 10. Right now, you need to identify the code that displays the LiveCode logo and loading symbols and delete it.

Hi Heather,

"Right now, you need to identify the code that displays the LiveCode logo and loading symbols and delete it."

That is exactly the problem ;-) Just deleting some tags results in a blank screen, because there are some references in the Javascript code to these tags.

What I suggest is a very plan simple html-page, where only the stack itself appears and nothing else. Code I could also copy into another page where e.g. the usage of the app is explained.

My be this is very easy for someone who knows Javascript, but I don't :-)

Cheers,
Torsten

Hello Torsten,

If you want to remove the whole LC logo part from the html template, you have to remove the part starting from <a href="https://livecode.com">,
until the part </svg></a> (included)

Hope this helps.

Kind regards,
Panos

Hi Panos,

this part is easy, but removing the "non functioning" buttons is more dangerous.

My best attempt was here: https://www.urban-codesign.com/projects/localstickers/index.html

But there is an error message I did not understand.

Cheers,
Torsten

I just realised that in one of my previous messages some text did not appear as I would expect, so some info is missing. So I am re-writing my reply here:
...
Similarly, to remove the various checkboxes at the top right you can delete these tags:

<span><input type=checkbox id=resize>Resize canvas</span>

<span><input type=checkbox id=pointerLock checked>Lock/hide mouse pointer </span>

<span><input type=button onclick='Module.requestFullScreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)'value=Fullscreen></span>

You get the idea.

Thanks for this.
The browser seems to cache everything when fetching from remote site.
This is good for avoiding repeated downloads of the engine, but less helpful for testing.
What is the best way to post different versions of your LC HTML app?
For example, Is it possible to just change .js, .wasm files?

Thanks!

To avoid the caching issue when developing, you can turn off caching for the page your app is on. In Chrome (but others will be similar) go to Developer Tools>Network and there is a “Disable Cache” checkbox. That should do it.

Thanks, Heather!

Thank you very much for the article.

Can you provide the code showing the stack and only the stack?
I tried quite a lot until now without any success.

I also suggest to ass some options directly in the standalone settings, for example:

Scale the stack to the browser window.
Set the min-width of the stack
Set the max-width of the stack
Keep the stack aspect ratio
Set the browser background color
etc

But for now, the most important is to provide a strict minimal HTML instead of a pretty complex one.

Hello Philippe,
Assuming you use LC 10.0.0-dp-4, you can use something like this:

<html>

<body>

<canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

<script type="text/javascript">

var Module = { canvas: document.getElementById('canvas') };

</script>

<script async type="text/javascript" src="standalone-10.0.0-dp-5.js"></script>

</body>

</html>

To test how this will look, you can create a file named "standalone.html" with this ^^ content, and add it to the Copy Files section. This "custom" html will replace the html template used by LC. Hope this helps!

Heh, sorry for the multiple comments - I was struggling to achieve proper html formatting.

In the html of the previous comment, the line:

<script async type="text/javascript" src="standalone-10.0.0-dp-5.js"></script>

should be:

<script async type="text/javascript" src="standalone-10.0.0-dp-4.js"></script>

Hi,

Thank you very much for your answer.

Here is the full code I finally put:

body {
margin: 0;
padding: 0
}

var Module = { canvas: document.getElementById('canvas') };

To be able to test it I simply replace the "standalone-10.0.0-dp-4.html" file with it.

I still have two problems, though.

1) I still have a margin or padding. As you can see in the code, I attempt to style the body of the HTML but had no success on that. Any advise?

The other problem, more annmying I guess, is the style of the app is also very different than what I have in Livecode.
I made a screen copy:
https://nftstorage.link/ipfs/bafybeickadmwrsvcz2vgyvktm6fkfvscpfqv7v3hydpest7vic7bnyr35i

Hello Philippe,

RE (1), I think you could set the background of the webpage to match the one of the stack (or vice versa), so as to "mask" the margin/padding
RE (2), yeah, some elements are drawn differently on Web (they use the Motif theme) and can be ugly :) A solution for this would be to hide the scrollbars and use some javascript to allow scrolling. I'll try to write a lesson on this today - I'll post the link here when it is ready. Another difference is the fonts used - in this case you could just add the custom font in the Copy Files section of the standalone application settings.

Cheers,
Panos
--

Hi Panos,

Thank you, your answer is laser sharp.
For the BG, that is already clear (not too annoying)

Now for the scrolling field, it's another matter:
It's even a problem within LiveCode itself.
When you style a field, it seems you have no way to style the scroll.
I'm working on an editor with a dark theme, and it's pretty ugly.
The insane thing is that it updates the interface faster than photoshop!

The real solution could be to develop a custom scroll bar.
We could have a group that contains the custom scroll and the field. With the code in the group.

The custom scroll will be made of a grc that would be the background and a button that would be the slider.
The height of the button would represent the size of the content of the field relative to the height of the grc.
We would slide the button with a simple grab and update the field using the loc of the btn collected in the mousemove (we will block the x moves in the mousemove).

I think it would be a wonderful lesson and I saw several comments about the problem of styling the scroll of a field. this would be an elegant solution. And will definitively prove the beauty of LiveCode.

I'll probably try again however my chances of success are quite low.

Best.

Hello Philippe,

Thanks. Indeed, implementing a custom scrollbar sounds like a nice solution.

BTW, the lesson about using javascript to scroll a LC text field on Web is here: https://lessons.livecode.com/m/2592/l/1595736-scrolling-a-livecode-text-field-on-web-using-javascript

Hopefully it will allow you to get rid of the ugly Motif scrollbars :)

Kind regards,
Panos
--

Thanks, Panos. I have checked the solution
Mhhh... It's still pretty ugly... and it's still fairly complex.
Maybe it would be better to style the field using CSS? I guess there is a CSS that styles everything to keep the look and feel of Livecode.
So why not style the fields correctly when you build the standalone?
The idea of LiveCode is to have everything working without changing the code, right?

I know there are solutions to go around the problem, but what do you plan to fix it? And when can it be done?

A go-around is always not so easy and can cause trouble to maintain.

I thank you already for your answer :)

Hello Philippe,
The plan is to have both scrolling and appearance as well as all other functionalities to work "out of the box" when LC 10 goes GM. These all are just workarounds that will help users keep going until then.

Kind regards

Thank you, Panos, for the encouragement to use Livecode 10. Using the discussion here above I suceeded in starting the app, and the iPad-keyboard now works well. But there is a new difficulty: My app has some cascade popup buttons with submenus and subsubmenus (and 1 subsubsub!). These too work well on desktop, but not on iPad. The first submenu works only by double fingertip, the deeper subsubmenus don't work at all. Perhaps you know this problem? I couldn't find a solution. Thank you already now!

Dear Gottfried,

What you describe sounds like a bug. Could you please file a report in https://quality.livecode.com, and ideally attach a simple sample stack that demonstrates the issue? We will then try to fix it asap and include it in the next LC 10 release.

Kind regards,
Panos

Dear Panos,
I have another problem: polytonic Greek seems not to work in a standalone for web. The words ἐν ἀρχῇ ἦν ὁ λόγος, entered correctly in fields of an app are shown correctly in all other standalones, but not in the standalone for web. It shows Greek, but the special characters for old Greek are missing.

Hello Gottfried,
I have not tested this, but I think you have to include a custom font (in the Copy Files section of the standalone) that supports polytonic Greek, and set the textFont property of the field that contains the polytonic greek text to this font.

Kind regards,
Panos

Dear Panos, thank you for your help. Now it works.
Kind regards
Gottfried

I use the browser widget.
I can navigate to it and, for example, jump somewhere in a YouTube video with player.seelTo().
In the desktop version, I just read the position from the video during idle and let the user and YouTube control the video.
In the web version, I don't manage to read data from the video.
Help is gratefully accepted.
https://pravilo.icu/youTube-Learner32/youTube-Learner.html

Hello Thomas,

Could you share the script that reads the position from the video during idle?

Also, do you mean that you do this in the "on idle" message? If yes, this message is not supported in the Web standalone.

Kind regards,
Panos
--

put "var element = player.getPlayerState();alert(element);liveCode.getLaeuft(element);" into dasscript
if the platform is "web" then
--put "console.log(228)" into dasscript

DO DASSCRIPT as javascript

else
DO DASSCRIPT IN WIDGET "BROWSER"

end if

And idle is supported in LC10 WEB - I thought that this could be the problem, but I can "alert(1)" via idle.
You can have the whole stack - and we try it for "the cloud". You are from LiveCode? Contact me directly and perhaps do not "post" this message

@Thomas
Oh, I had a look at the dictionary entry for the "idle" message and it does not include "Web" in the supported platforms - i guess we need to update these docs then.

RE your stack - I looked up your license and it does not include email support - so in this case we cannot accept your stack. You could ask for help in our user forums though: https://forums.livecode.com

Kind regards,
Panos
--

Just a hint that this helper tool/stack makes web deployment even easier and adds useful features: https://github.com/wheninspace/WIS_WebDeployHelper/releases/latest

How would you adjust the stack dimensions to fit the user's screen size? Mine appears to fill up just half the screen.

Also how would you adjust the image size in proportion the stack size?

Hello,

You've likely noticed that fullscreen for web has a long-standing issue that makes it impossible to use.

With regards to the width of the stack, setting the rect of the stack to the screenRect should suffice. Height is not so easily set this way since it would appear that the screenRect will change whenever the stack changes height; you will notice that setting the rect of the stack to the screenRect repeatedly will result in the stack becoming taller and taller.

For keeping things in proportion, I would suggest consulting this lesson: https://lessons.livecode.com/m/4071/l/19026-geometry-manager
I would also point out that if your stack happens to have multiple cards, you may need to resize the stack with every card change to force it to reposition everything correctly.

If you happen to have the LiveCode Enhancements bundle, I would invite to you additionally look at this article on using Responsive Layout: https://livecode.com/i-built-a-responsive-web-app-using-our-new-widgets-and-libraries/