Demo - HTML Conversion

The previous Demo1 showed that Annex-Wifi Basic is able to serve up web files, thereby making it capable of hosting multi-page websites.
But perhaps we might prefer to integrate .html code within Annex-Wifi Basic in order to interface with its power and flexibility.
So let's convert our html  analog clock script into a Basic script to show how it's done.

It's actually quite easy, because the Annex-Wifi Basic 'system' provides its own html-to-basic conversion facility.
But first, a quick overview to understand what we are trying to do...

All html and css 'scripts' contain only pure text, so any numbers are actually represented by their text equivalents.
All string variables are suffixed with '$' to denote that they contain character strings rather than numeric variables.
An important Annex-Wifi Basic instruction is 'HTML "content$"', which sends the html content$ string to the browser queue.
Each use of the HTML command causes a short delay while the command is executed.
Repeatedly calling HTML for every line of output to be sent to the browser would cause noticable accumulation of delays.
A more efficient method is to append subsequent output strings together, then send all at the same time with one HTML command.
The Annex-Wifi Basic conversion program wraps each html line into an accumulating string variable, freeing you from such tedious repetition and leaving you to deal with the accumulated variable as appropriate.

Let's try it. On your computer, drill down into your Annex-Wifi Basic folder and double-click on the AnnexToolKit.exe 'tool'.
Click on the 'Html Converter' tab.


The left-hand window shows a simple html web page example which we will convert.
Change the upper-case A$ variable in the centre to lower-case a$ ... which is actually pointless because upper and lower case are seen as the same in Annex-Wifi Basic... but it let's us prove who's the boss!

Then click the central '>>>' button to trigger the conversion - some things to point out...
The chosen variable already has its intialisation code inserted at the top of the resulting script, so don't forget about that if you are appending to an existing variable, because the variable will lose any previous accumulated contents.
Not everything converted will necessarilly be sent using the HTML instruction - eg: javascript is handled differently - so nothing has been added at the bottom of the script, because that is being left up to the user... in this instance you would need to add 'HTML a$' at the bottom to send the accumulated variable content out to the browser queue.

NOTE: with large web pages it is possible for the string variable to grow too big for the browser queue to 'gulp' down in one go, so it might need to be sent in multiple smaller mouthfuls by strategically inserting  HTML a$:  pause 300: a$=""  into the script (pausing between mouthfuls).


Now for our clock... open the browser Editor window and load /html/clock.html into the editor, then right-click and 'Select All' and right-click again and choose 'Copy' (or use the CTRL A, CTRL C keyboard shortcuts).

Next time we use the editor will be to paste and save a .bas script, so before we forget, let's change the filename extension to .bas and click to Save in readiness, to avoid risk of accidentally overwriting our original clock.html file (we are looking ahead to pre-empt clumsy mistakes).

Returning to the converter tool, note that you simply need click the 'Paste' button under the left-hand window to paste your new clipboard contents over the top of previous, so you don't need to pre-select the existing contents before overwriting.


If you are happy with the variable name, click the '>>>' convert button, then note that you just need to click the right-hand 'Copy' button to copy the contents to the clipboard without needing to select them all first.
 
Return to the browser editor, overwrite the existing contents by pasting our new basic script over the top (so Select All first), then click Save.
Now that we will be editing a basic script, select 'Basic' from the editors Syntax dropdown list.


Our clock includes javascript, which needs to be handled slightly differently to html, so there are some things we need to do manually to finish the conversion... which I'll explain as we go.
 
 First, add CLS at the very top to clear away old screen contents each time it is run.

 Second, comment out (or delete) the line which references javascript - which should now be line 7, just below the <title> line.
   'a$ = a$ + |        <script type="text/javascript" src="script.js"></script>|

Third, modify the CSS line just underneath to specify the full path to the .css file, so it should look like:
  a$ = a$ + |        <link type="text/css" rel="stylesheet" href="/html/style.css">|   

Lastly, add the following 3 lines to the bottom of the script  (I've commented them to explain what they do).
  html a$                                          'sends the accumulated a$ variable to the browser queue for display
  jsexternal "/html/script.js"              'points to a required external javascript file
  jscall "clock()"                                'calls the first shown javascript function in the javascript file

Save edits.

NOTE: All external file references need to include their full root-relative paths even if the files are in the same local folder.

Prudence caused us to rename our clock.html file with a .bas extension to avoid accidentally overwriting it when saving the converted file, but this means that our Basic .bas file was saved into the /html folder which is not where we would normally choose to keep it.

If our Basic script must refer to external files by their full root-relative paths anyway, then we may as well move it out of the /html folder (it is not a web file) to somewhere more appropriate such as /program, because it will still be able to access the external files from anywhere.
So I'll use the 'quirk' to your advantage by demonstrating how to move a file using the File Manager page (which doesn't have a Move button).

TIP:  when needing to open a File Manager page (or Config) I prefer to click the File Manager button from the Output page if it is open, because you can 'return' when done without problems, whereas returning after clicking any button from the Editor page will have lost editor settings and file connection (editor file will need to be Opened or Saved to re-link to the ESP even though the wifi connection has not actually been broken).

    Let's move clock.bas from the  /html  subfolder into  /program , so...



    Open the File Manager page,
    Highlight /html/clock.html file, 
    Click the Rename button.










In the 'New Name' window change  /html  to  /program
(you could type any new path and if the folder doesn't exist it will be created)

  
It should be pointed out that everything done up until now, including all the power and control you have been shown, has still all been done without even running a Basic script yet.
So now let's change that.
Here is what your Basic clock.bas script should look like...

Basic:
cls
a$ = |<!DOCTYPE html>|
a$ = a$ + |<html>|
a$ = a$ + |    <head>|
a$ = a$ + |        <title>Analog Clock</title>|
'a$ = a$ + |        <script type="text/javascript" src="/html/script.js"></script>|
a$ = a$ + |        <link type="text/css" rel="stylesheet" href="/html/style.css">|
a$ = a$ + |    </head>|
a$ = a$ + |    <body>|
a$ = a$ + |        <div class="analog-clock">|
a$ = a$ + |            <svg width="140" height="140">|
a$ = a$ + |                <circle id="clock-face" cx="70" cy="70" r="65" />|
a$ = a$ + |                <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />|
a$ = a$ + |                <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />|
a$ = a$ + |                <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />|
a$ = a$ + |                <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />|
a$ = a$ + |                <text x="62" y="18">12</text>|
a$ = a$ + |                <text x="126" y="76">3</text>|
a$ = a$ + |                <text x="66" y="130">6</text>|
a$ = a$ + |                <text x="7" y="76">9</text>|
a$ = a$ + |            </svg>|
a$ = a$ + |            <div class="time-text">|
a$ = a$ + |                <span id="hr">00</span>|
a$ = a$ + |                <span>:</span>|
a$ = a$ + |                <span id="min">00</span>|
a$ = a$ + |                <span>:</span>|
a$ = a$ + |                <span id="sec">00</span>|
a$ = a$ + |                <span id="suffix">--</span>|
a$ = a$ + |            </div>|
a$ = a$ + |        </div>|
a$ = a$ + |    </body>|
a$ = a$ + |</html>|
html a$                                           'sends the accumulated a$ variable to the browser queue for display
jsexternal "/html/script.js"              'points to a required external javascript file
jscall "clock()"                                'calls the first shown javascript function in the javascript file


... if in any doubt just copy and paste from above, then Save to  /program/clock.bas

Open an Output page (click Output button in your File Manager page if that is still open)
Click the Run button.
You should see your familiar analog clock ticking away... but it is now a Basic script instead of the original web page.
So now that you've seen how Annex-Wifi Basic can tame a wild beast, lets make our beast do some tricks.