File path troubleshooting for HTML5

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
Bill Rose
Posts: 6
Joined: Tue Apr 07, 2015 3:58 pm

File path troubleshooting for HTML5

Post by Bill Rose » Thu Mar 15, 2018 10:01 pm

I have a stack that looks for two directories, one containing images for display, and the other a set of text files in array format. In my source, I have no problem accessing the external data:

put the filename of me into t
....
put t&"Images/"into gImagePath
put t&"Array Files/"into gTextPath

The app just looks for an Images directory at its level, and likewise for an Array Files directory. Works fine live, works fine published as a Mac standalone, but I can't get it to work as a Web publish.

put URL ("binfile:" & gImagePath & gCurrentImage) into image "Image Display"
...
get URL ("file:" & gTextPath & "arraySlideID_"& i &".txt")

For web publish, it says its filename is /boot/standalone/__boot.livecode

thus the paths become (after stripping off the stackname)

/boot/standalone/Images
/boot/standalone/Array Files

Thoughts? Sure doesn't look right!

Bill

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: File path troubleshooting for HTML5

Post by [-hh] » Sat Mar 17, 2018 3:53 pm

Thats correct.

See here a demo
http://hyperhh.org/html5/copyFilesTest-8.0.2X.html
[ And here an info how to get the source.
http://forums.livecode.com/viewtopic.ph ... 80#p139080 ]

IIRC it is simple. If for example "Images/*" is a folder in the "copy files" tab, then:

Code: Select all

set the defaultfolder to "Images" --> is now /boot/standalone/Images
set text of img 1 to url ("binfile:" & <filename>)
shiftLock happens

Bill Rose
Posts: 6
Joined: Tue Apr 07, 2015 3:58 pm

Re: File path troubleshooting for HTML5

Post by Bill Rose » Mon Mar 19, 2018 5:08 pm

-hh,

Thank you for taking the time to reply, and for the demo and source code! Clearly this demonstrates that this is doable.

Anyone with more programming experience would be off and running, given your help in supplying the missing link. But I am afraid I can't quite do that. Much of what you doing here makes sense to me, but I must back up a bit to some more fundamental questions before I can fix my code and be on my way.

Why two stacks? What does "__startup" do? What does "__boot" do? You must have a good reason for structuring it that way. Is this common practice for web publishing, or tied more to this particular situation? I can't find much detail on web publishing reqs and this could be an example of something very fundamental that I am missing.

I have been building a single stack, with the resultant publish being an HTML page of the same name as the stack, a standalone-commercial-8.1.8.html.mem file, a standalone-commercial-8.1.8.js file, and a standalone.zip. Are you publishing the startup stack and designating boot as a substack...? Are you including the myFiles folder inside the published package, or does it just live there (and the use of defaultFolder function allows it to be found)? I am still fumbling in the dark...

Sorry to ask such questions, but that is where I am. I am eager to break through, though. Any guidance you can point me to would be much appreciated.

Thanks again,

Bill

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: File path troubleshooting for HTML5

Post by [-hh] » Mon Mar 19, 2018 7:19 pm

The standalone.zip is your standalone's universe. Unzip it and you see the structure used by the HTML5 builder (see below).
For more information see the dictionary/Guide/HTML5 deployment.
Additional infos are given in several release notes. Search these PDFs for "HTML5".

The myFiles folder of my example is added in the copy files tab of the standalone application settings, just the same as for other platforms.

So this is the structure of a HTML5 standalone as made by the HTML5 builder.

0. <standaloneName>.html (includes/calls the files below, generated by the builder)
1. standalone-<version>.html.mem (bytecode generated by the builder)

2. standalone-<version>.js (the engine, generated by the builder via emscripten)

3. standalone.zip (made by the builder, naming may be adjusted, see guide), containing:

3.1. _startup.livecode (needed by the standalone, not from you)
3.2. standalone (folder named by the HTML5 builder), containing:

3.2a) _boot.livecode (named by the builder, contains your stack)
3.2b) other files and folders (added by you to the copy files tab of your standalones settings).

If you add fonts files to the copy files tab in newer versions of LC they may be collected in a folder fonts.

You can only partially control this structure (see guide).

All you have to care about is the tree of your files and folders which are put into /boot/standalone/ by adding them to the copy files tab of your standalone settings.
shiftLock happens

Monox18
Posts: 118
Joined: Tue Nov 25, 2014 9:48 pm
Location: Deggendorf, Germany

Re: File path troubleshooting for HTML5

Post by Monox18 » Sun May 31, 2020 10:37 pm

Hello hh, it's a pity to see that you are no longer making widgets & web apps. I hope everything is well in your current projets. Recently I discovered your stacks and have been learning from them. I'm exploring the options of HTML5. Thanks for uploading them.

Maybe someone else can help me here. I have been following the steps in this post and this is how far I can get. I want to set a custom font to a field. Although I can correctly retrieve the URL of the font file in the "fonts" folder, the start using font file won't work. Always returns the same error.

Code: Select all

   local tTemp, tTheFont, theError, tURL
   set the defaultfolder to "fonts"
   put the detailed files into tTemp
   put item 1 of line 1 of tTemp into tTheFont //contains "PasswordEntry.ttf"
   if tTheFont contains "PasswordEntry" then
      put the defaultFolder & "/PasswordEntry.ttf" into tTheFont -- contains "/boot/standalone/fonts/PasswordEntry.ttf" // I also tried ("file:" & "tTheFont" 
      start using font file url tTheFont
      put the result into theError
      answer theError //contains "can't load font file"
      set the TextFont of field "PasswordValue" to tTheFont //doesn't work. 
   end if
   
Monox
Developing a Cyber Physical System.
https://www.monoxware.com/

gsillevis
Posts: 40
Joined: Tue Oct 13, 2020 10:55 pm

Re: File path troubleshooting for HTML5

Post by gsillevis » Wed Nov 11, 2020 10:17 am

Did you ever figure this out? I'm trying to solve the same issue.

Monox18
Posts: 118
Joined: Tue Nov 25, 2014 9:48 pm
Location: Deggendorf, Germany

Re: File path troubleshooting for HTML5

Post by Monox18 » Wed Nov 11, 2020 11:40 am

Yes, but not exactly as I wanted.

I was testing and exploring the deployment to HTML5 option. hh made great stacks and you might learn from them, with patience you could find the answer you look from there. But there are some base issues that made me discard this option. Main issue was the loading time. When opening a webpage with an HTML5 LiveCode app the browser has to download the huge engine and this takes a long time. Out of my head, with 100MB Internet it takes like 10s. But with 2-10MB it takes well over 1 minute. So that's a deal breaker.

What I did instead is to follow a Hybrid approach (standalone executable with HTML5 support). I deploy to Windows PC as main target (later on will add Android support as well) and include HTML5 apps inside of it. The key component here is the Browser widget. It supports HTML5 very well. So I create .html files, including CSS and JS, and include them in the standalone. The widget shows a webpage inside the .exe file just as if it were a webpage on a web browser. You can't tell the difference. With normal CSS + JS knowledge you can then solve the issues.

Keep in mind that you can't test simultaneously both options (Native HTML5 deployment and Hybrid deployment)without a few tweaks because the widget browser is not supported in HTML5 which makes sense. You have to delete all Browser widgets and replace them somehow with Canvas objects. Then you will be able to test both deployment options.
Monox
Developing a Cyber Physical System.
https://www.monoxware.com/

Post Reply

Return to “HTML5”