ESP8266 BASIC

lbenson

Senior Member
Thanks, Hemi. That is indeed the ticket. I wish I knew more HTML (and could remember what I had known).
 

lbenson

Senior Member
Would it be possible to start the code even though my parts haven’t arrived yet
It appears to me that hippy has made a huge step towards solving the web page problems you will face in this thread:

He has code serving a page with a 28X2 and I have it working with a 40X2 serving a page like the one you're working on. He has coded it so that it is set up to run also on a 20X2, but there could be some question of whether the scratchpad is large enough on that chip.

If you download his file, note that it has to be broken into 4 pieces, 3 of which are then "included" in the short main stub.
 

Electronics Learner 123

Well-known member
It appears to me that hippy has made a huge step towards solving the web page problems you will face in this thread:

He has code serving a page with a 28X2 and I have it working with a 40X2 serving a page like the one you're working on. He has coded it so that it is set up to run also on a 20X2, but there could be some question of whether the scratchpad is large enough on that chip.

If you download his file, note that it has to be broken into 4 pieces, 3 of which are then "included" in the short main stub.
Hi Ibenson,
This is a great source.
Does this mean that I will need to get a picaxe server or can it be preferably be run of the NodeMCU?

In his code he uses #include is this Basic
 

lbenson

Senior Member
PICAXE net server is no longer sold. Hippy is producing what I see as an upgraded replacement, using a 28X2 or 40X2 PICAXE and an esp8266 like the ESP-01 or NodeMCU to provide wifi access.

The #include files are basic code. His code with my html code (similar to your 2-pushbutton code) is about 3K, so too big for a 20x2.
 

Hemi345

Senior Member
Would it be possible to store the HTML on a website (so not stored on the Picaxe) which the Picaxe then can access
Yes, this is what I initially did with my first PICAXE-powered humidistat. I had a very basic web page programmed into the PICAXE that referenced Javascripts on my website. The javascripts made AJAX calls to other files on the website that built most of the web page. Then I was able to get as fancy as I wanted to without the storage and programming limitations of using the PICAXE to serve up the entire page/site.

FWIW, I eventually abandoned the concept of using the PICAXE as a webserver because it was much easier to keep the PICAXE doing what *I* think it's best used for (interacting with sensors, ADC, etc) and let the ESP handle the web communications with a simple UART bus between them.

Most of my IoT devices only publish data to the web. My home HVAC system's humidifier is controlled by a PICAXE and reports the stats to the web. My window blinds are also PICAXE controlled and used to have the capability to open and close on demand rather than light level, but because they're 12ft off the floor, they needed to be battery powered and the ESP was much too hungry to leave powered up all the time. Now they just check in once a day to report battery voltage so I know when I'll need to break out the ladder and swap the batteries :)
 

Hemi345

Senior Member
Example webpage on PICAXE:
Code:
<!html>
<head>
<link type="text/css" rel="stylesheet" href="http://mywebsite.com/s.css">
<script src="http://mywebsite.com/s.js"></script>
</head>
<body></body>
</html>
 

Electronics Learner 123

Well-known member
Example webpage on PICAXE:
Code:
<!html>
<head>
<link type="text/css" rel="stylesheet" href="http://mywebsite.com/s.css">
<script src="http://mywebsite.com/s.js"></script>
</head>
<body></body>
</html>
Hi, thanks for the information, would it be possible for you to send the HTML/css/javascript etc... code for your actual website and for the Picaxe so that I can have a look at how it works?

Kind Regards
Electronic Learner 123
 

Hemi345

Senior Member
Take a look at this TUTORIAL. She pulls it all together at the end of the article and that's basically what I was doing in a nutshell.

Note how she includes the script file at the end of the document. That ensures the DOM has finished loading and the various page elements will be ready to be manipulated with the JS.

My example in the previous post won't work unless you use a ready function to ensure the DOM has loaded. Otherwise, your JS code will fire before the page has finished rendering unless you programmatically check that the DOM is loaded and ready before doing anything.
 
Last edited:

lbenson

Senior Member
I'm afraid I know nothing about this kind of use, and my goal is not to have to program more than one device.
 

Hemi345

Senior Member
Will you be able to help in terms of getting the webpage to talk to the nodemcu to send variables etc...
The process is the same regardless if the webpage is delivered by the PICAXE or from remote scripts.

All the code on PICAXE:
Code:
<!html>
<body>
<form method="get">
<button type="submit" name="L" value="0">LED Off</button>
<button type="submit" name="L" value="1">LED On</button>
</form>
</body>
</html>
Will look and operate the same as having only following on the PICAXE:
Code:
<!html>
<body></body>
<script src="http://mywebsite.com/s.js"></script>
</html>
which references s.js on your website that actually builds the form:

Code:
document.body.innerHTML = '<form method="get">' +
'<button type="submit" name="L" value="0">LED Off</button>' +
'<button type="submit" name="L" value="1">LED On</button>' +
'</form>';
Above is extremely rudimentary but gets the point across without getting down into the weeds of the JS language. The difference and main advantage of using JS is you don't have to keep reprogramming the PICAXE when you want to change/tweak the content or look of the webpage. You make all your changes in the code on your website and your browser will fetch and merge this content when it requests the page from the PICAXE.

If programming in JS is comfortable for you and you have a website, then I would go that route. If you don't have a website and/or aren't comfortable with JS, then just put it all on the PICAXE like in the first code snippet at the beginning of this post.
 

Electronics Learner 123

Well-known member
The process is the same regardless if the webpage is delivered by the PICAXE or from remote scripts.

All the code on PICAXE:
Code:
<!html>
<body>
<form method="get">
<button type="submit" name="L" value="0">LED Off</button>
<button type="submit" name="L" value="1">LED On</button>
</form>
</body>
</html>
Will look and operate the same as having only following on the PICAXE:
Code:
<!html>
<body></body>
<script src="http://mywebsite.com/s.js"></script>
</html>
which references s.js on your website that actually builds the form:

Code:
document.body.innerHTML = '<form method="get">' +
'<button type="submit" name="L" value="0">LED Off</button>' +
'<button type="submit" name="L" value="1">LED On</button>' +
'</form>';
Above is extremely rudimentary but gets the point across without getting down into the weeds of the JS language. The difference and main advantage of using JS is you don't have to keep reprogramming the PICAXE when you want to change/tweak the content or look of the webpage. You make all your changes in the code on your website and your browser will fetch and merge this content when it requests the page from the PICAXE.

If programming in JS is comfortable for you and you have a website, then I would go that route. If you don't have a website and/or aren't comfortable with JS, then just put it all on the PICAXE.
Thanks, how would I go about controlling the Picaxe from a webpage now, for example I would like to turn a led on? I haven’t got all my parts yet but still would like to know how to do it! 😃
 

Hemi345

Senior Member
Once you get the PICAXE and ESP hardware and program it to serve up a page, come back if you still need help figuring out how to act on a response to turn an LED on/off. There is a wealth of information on this forum. Search here for Wiznet as those threads cover a lot of the concepts for serving up a page and acting on data returned in the query string.

I have to say that this is a very ambitious project for your first experience with the PICAXE and ESP. You'll in for a lot of reading.
 

Hemi345

Senior Member

lbenson

Senior Member
Ok, I hope this does not represent a total hijack of the thread, since I think it's going in a direction which will help the OP.

I followed up Hemi's idea of hosting a web-page producing javascript file and a CSS file on a web server on a Raspberry Pi Zero-W on my local network. It's too complicated at this point to fold in the ESP8266 and the PICAXE, so I'm invoking it from my PC.

Here's my PC browser code (note my pi webserver is on port 20780), named js5.html:
<html><head><link type=text/css rel=stylesheet href=http://192.168.1.144:20780/s.css>
</head><body><script src=http://192.168.1.144:20780/b5.js></script></body></html>

Here is the file, s.css:
Code:
body {
    background-color: #d0d0d0;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}
And here is my javascript file, js5.js:
Code:
document.body.innerHTML = +
'<html><head><title> LED Control</title></head>' +
'<body><form name = input method = get>' +
' <font color=blue><font size=5>Picaxe Web Server</font><br><br>' +
'  <font color=black>' +
'  <table border="1">' +
'  <tr><td><input type="radio" id="A" name="L" value="1">LED ON</td>' +
'  <td><input type="radio" id="B" name="L" value="0" checked>LED OFF</td></tr>' +
'  <tr><td><input type="radio" id="C" name="P" value="1">PWM ON </td>' +
'  <td><input type="radio" id="D" name="P" value="0" checked>PWM OFF</td></tr>' +
'  <tr><td><input type="radio" id="E" name="R" value="1">Ramp/Fade ON  </td>' +
'  <td><input type="radio" id="F" name="R" value="0" checked>Ramp/Fade ' +
'    OFF</td></tr></table>' +
'' +
'  <p>PWM Duty Cycle:</p>' +
'  <input type="text" id="G" name="N"><br><br>' +
'' +
'  <p>Select LED:</p>' +
'  <input type="radio" id="H" name="X" value="R">Red<br>' +
'  <input type="radio" id="I" name="X" value="Y">Yellow<br>' +
'  <input type="radio" id="J" name="X" value="B">Blue<br>' +
'  <input type="radio" id="K" name="X" value="G">Green<br>' +
'  <input type="radio" id="L" name="X" value="W">White<br>' +
'  <input type="radio" id="M" name="X" value="O">Orange<br>' +
'' +
'  <br><button type=submit>Submit</button>' +
'</form></body></html>        '
Here is the output when I put js5.html in my browser (with path specified)
js5_html.jpg
So far so good, except that I have no idea where "NaN" at the top comes from.

If I click some buttons and submit, I get "js5.html?L=0&P=1&R=1&N=511&X=W" as expected (indicating main LED off, PWM on with a duty cycle maximum of 511, ramping and fading, and the white LED lit), and could suppose that this would come back to the PICAXE through the ESP8266 ok, and I can deal with starting PWM and turning on LEDs as indicated.

My question is, how do I refresh the web page so that it shows the proper radio buttons checked and the current PWM Duty Cycle value in place?
 
Last edited:

hippy

Technical Support
Staff member
So far so good, except that I have no idea where "NaN" at the top comes from.
That's "Not a Number". I would guess from the plus after the equals ...
Code:
document.body.innerHTML = +
If assigning to .innerHTML you just need the "=", if adding to it I think that should be "+=".

My question is, how do I refresh the web page so that it shows the proper radio buttons checked and the current PWM Duty Cycle value in place?
You either get the PICAXE ( or whatever ) to send a new page back or use AJAX/REST to read the page and update your current one.
 

lbenson

Senior Member
That's "Not a Number". I would guess from the plus after the equals ...
Right you are. I changed it to: document.body.innerHTML = "" +
Maybe the |"" +| isn't needed.

You either get the PICAXE ( or whatever ) to send a new page back or use AJAX/REST to read the page and update your current one.
Nothing is ever as straightforward as one would like it to be.
 
Last edited:

Hemi345

Senior Member
My question is, how do I refresh the web page so that it shows the proper radio buttons checked and the current PWM Duty Cycle value in place?
Code:
<html><head><link type=text/css rel=stylesheet href=http://192.168.1.144:20780/s.css>
</head><body></body><script src=http://192.168.1.144:20780/b5.js></script></html>
First off, you should move the <script ..></script> tags below/outside your body tag, as shown above. Otherwise, when the javascript fires, it'll overwrite the reference to itself when it builds the body of the page.

To make it so the page loads with the options pre-selected as they currently are on the PICAXE, you can add something like the 1st script contents in the following example to your js5.html:
Code:
<html><head><link type=text/css rel=stylesheet href=http://192.168.1.144:20780/s.css></head>
<body></body>
<script>var arrayCurVals = [0,1,1,511,W];</script>
<script src=http://192.168.1.144:20780/b5.js></script>
</html>
the array, arrayCurVals would be dynamically created with the PICAXE with something like:
Code:
sertxd ("<script>var arrayCurVals = [",#b0,",",#b1,",",#b2,",",#b3,",",#b5,"];<script>")
Then within your b5.js after the code that builds the page, you can use that array to configure the form elements. e.g.,

Code:
var ledStatus = arraryCurVals[0];  // this will be "0"
var pwmStatus = arraryCurVals[1]; //this will be "1"
//...
var ledColor = arrayCurVals[4]; // this will be "W"
//etc

var ledInputOn = document.getElementById("A");               // reference the first LED radio button, ID "A"
var ledInputOff = document.getElementById("B");               // reference the first LED radio button, ID "B"
if (ledStatus == 1) {
    ledInputOn.setAttribute("checked", true);
}
else {
    ledInputOff.setAttribute("checked", true);
}
Since when you submit the form, the PICAXE will be sent the values in the query string, you'll handle them and turn the LEDs on/off/pwm etc, then the PICAXE will rebuild the page (assuming the browser doesn't cache it), and the array will have the current values and the form will reflect the current choices.
 

Hemi345

Senior Member
This has been a good exercise, but I'm still not convinced that it is the way to go. I'd like to see how easy it is to update the page before continuing down what might be a dead end.
The allure to me was I could develop the web page look and feel and immediately see the results without ever having to (re)program the PICAXE. Having the PICAXE deliver the basics with
Code:
<html><head><link type=text/css rel=stylesheet href=http://192.168.1.144:20780/s.css></head>
<body></body>
<script>var arrayCurVals = [0,1,1,511,W];</script>
<script src=http://192.168.1.144:20780/b5.js></script>
</html>
means you would never have to touch the PICAXE code again to make changes to the look and feel of the web page.

Also, the Content-Length header needs to be accurate otherwise the browser will keep waiting and eventually timeout if the content length is too long or truncate the content because you miscounted and came up short. I got tired of manually counting bytes or stripping out my PICAXE code and pasting it into Word to count characters. I'm constantly tweaking the interface, adding new features, etc and am reasonably comfortable with JS, so that's the path I chose to go. :)
 

Electronics Learner 123

Well-known member
Those should work fine. I have several similar. A bit on the clunky side as an appendage to a PICAXE, but they should have all the necessary features.

Do you have breadboards or flying wires (e.g., Dupont 40-pin cables) or the like for making connections? A usb serial module like this: https://www.ebay.co.uk/itm/USB-To-RS232-TTL-CH340G-Converter-Module-5v-3-3v-Serial-Port-Module-PL2303-UK/253513002243

Picaxe and means to program it?
What would I use the USB To RS232 TTL CH340G Converter Module 5v 3.3v Serial Port Module for? And how would I use it?
 

lbenson

Senior Member
What would I use the USB To RS232 TTL CH340G Converter Module 5v 3.3v Serial Port Module for? And how would I use it?
Connect USB module TX to ESP RX and USB RX to ESP TX, 0V to 0V, and 5V from somewhere--5V from my USB module worked to power the ESP8266 D1 Mini that I used, but some ESPs may need to be separately powered (e.g., from a hefty phone charger, with 0V also connected). Plug USB module into your PC. Don't connect 5V to ESP 3V3.

Then start puTTY or your favorite terminal program at 115200 baud and the proper COMM port for the USB module, type AT<Enter><Ctrl-J> and see if you get back "OK". If you don't, check your wiring; if you do, proceed with other AT commands such as "AT+GMR" and additional AT commands to find and hook up to your wifi. Hippy's code in the above-referenced "Where's the Wizard?" thread goes through all the necessary steps.

If your ESP has its own USB connector, you can plug that it and use your terminal with that (though again, sometime you will need a heftier power supply than you will get from your PCs usb port).
 
Last edited:

lbenson

Senior Member
To make it so the page loads with the options pre-selected as they currently are on the PICAXE, you can add something like the 1st script contents in the following example to your js5.html:
Hemi--this is great stuff. So hard to learn this by just searching the web.

So I did everything to the extent of my understanding, and I'm still not getting the initial values I think I have set. Can you see what is wrong?
js5.html on the PC (from view source):
Code:
<html><head><link type=text/css rel=stylesheet href=http://192.168.1.144:20780/s.css>
</head><body></body>
<script>var arrayCurVals = [1,0,0,111,R];</script>
<script src=http://192.168.1.144:20780/b5.js></script>
</html>
b5.js on the pi:
Code:
document.body.innerHTML = "" +
'<html><head><title> LED Control</title></head>' +
'<body><form name = input method = get>' +
' <font color=blue><font size=5>Picaxe Web Server</font><br><br>' +
'  <font color=black>' +
'  <table border="1">' +
'  <tr><td><input type="radio" id="A" name="L" value="1">LED ON</td>' +
'  <td><input type="radio" id="B" name="L" value="0">LED OFF</td></tr>' +
'  <tr><td><input type="radio" id="C" name="P" value="1">PWM ON </td>' +
'  <td><input type="radio" id="D" name="P" value="0">PWM OFF</td></tr>' +
'  <tr><td><input type="radio" id="E" name="R" value="1">Ramp/Fade ON  </td>' +
'  <td><input type="radio" id="F" name="R" value="0">Ramp/Fade ' +
'    OFF</td></tr></table>' +
'' +
'  <p>PWM Duty Cycle:</p>' +
'  <input type="text" id="G" name="N"><br><br>' +
'' +
'  <p>Select LED:</p>' +
'  <input type="radio" id="H" name="X" value="R">Red<br>' +
'  <input type="radio" id="I" name="X" value="Y">Yellow<br>' +
'  <input type="radio" id="J" name="X" value="B">Blue<br>' +
'  <input type="radio" id="K" name="X" value="G">Green<br>' +
'  <input type="radio" id="L" name="X" value="W">White<br>' +
'  <input type="radio" id="M" name="X" value="O">Orange<br>' +
'' +
'  <br><button type=submit>Submit</button>' +
'</form></body></html>        '
var ledStatus = arraryCurVals[0];  // this will be "1"
var pwmStatus = arraryCurVals[1]; //this will be "0"
var pwmRamp = arraryCurVals[2]; //this will be "0"
var pwmDuty = arraryCurVals[3]; //this will be, e.g., "321"
var ledColor = arrayCurVals[4]; // this will be "R"

if (ledStatus == 1) { document.getElementById("A").setAttribute("checked", true); }
else { document.getElementById("B").setAttribute("checked", true); }
if (pwmStatus == 1) { document.getElementById("C").setAttribute("checked", true); }
else { document.getElementById("D").setAttribute("checked", true); }
if (pwmRamp == 1) { document.getElementById("E").setAttribute("checked", true); }
else { document.getElementById("F").setAttribute("checked", true); }
document.getElementById("G").innerHTML=pwmDuty
document.getElementById(ledColor).setAttribute("checked", true);
js5_html2.jpg
 
Last edited:

Hemi345

Senior Member
Good evening Lance. While viewing your web page, press F12 to bring up the developer tool bar. This will help you debug and view the "new" source code after the JS manipulates it (see the "Elements" tab). If you view the "Console" tab, it'll mention any errors or issues as the page executes. The "console.log" statement I included below is an example of how you can write things to the console, just like sertxd'ing data to the terminal in PE6.

I forgot to include double quotes around the "W" in my example for the array. Strings need them.
Code:
    var arrayCurVals = [1,0,0,111,"G"];
I also had a misspelling when referencing the array ("arraryCurVals"). Sorry about that.

Here's a working b5.js:
Code:
document.body.innerHTML = '<form name = "input" method = "get">' +
' <font color=blue><font size=5>Picaxe Web Server</font><br><br>' +
'  <font color=black>' +
'  <table border="1">' +
'  <tr><td><input type="radio" id="A" name="L" value="1">LED ON</td>' +
'  <td><input type="radio" id="B" name="L" value="0">LED OFF</td></tr>' +
'  <tr><td><input type="radio" id="C" name="P" value="1">PWM ON </td>' +
'  <td><input type="radio" id="D" name="P" value="0">PWM OFF</td></tr>' +
'  <tr><td><input type="radio" id="E" name="R" value="1">Ramp/Fade ON  </td>' +
'  <td><input type="radio" id="F" name="R" value="0">Ramp/Fade ' +
'    OFF</td></tr></table>' +
'' +
'  <p>PWM Duty Cycle:</p>' +
'  <input type="text" id="G" name="N"><br><br>' +
'' +
'  <p>Select LED:</p>' +
'  <input type="radio" name="X" value="R">Red<br>' +
'  <input type="radio" name="X" value="Y">Yellow<br>' +
'  <input type="radio" name="X" value="B">Blue<br>' +
'  <input type="radio" name="X" value="G">Green<br>' +
'  <input type="radio" name="X" value="W">White<br>' +
'  <input type="radio" name="X" value="O">Orange<br>' +
'' +
'  <br><button type=submit>Submit</button>';
    var ledStatus = arrayCurVals[0];  // this will be "1"
    var pwmStatus = arrayCurVals[1]; //this will be "0"
    var pwmRamp = arrayCurVals[2]; //this will be "0"
    var pwmDuty = arrayCurVals[3]; //this will be, e.g., "321"
    var ledColor = arrayCurVals[4]; // this will be "R"
    
    if (ledStatus == 1) { document.getElementById("A").setAttribute("checked", true); }
    else { document.getElementById("B").setAttribute("checked", true); }
    if (pwmStatus == 1) { document.getElementById("C").setAttribute("checked", true); }
    else { document.getElementById("D").setAttribute("checked", true); }
    if (pwmRamp == 1) { document.getElementById("E").setAttribute("checked", true); }
    else { document.getElementById("F").setAttribute("checked", true); }
    document.getElementById("G").value=pwmDuty;
    var ledColors = document.getElementsByName("X"); //collection of all radio buttons for led color
    console.log("Led color options: ",ledColors.length); //display in teh browser how many radio buttons were found for color
    for (var i=0; i<ledColors.length; i++) {    //loop through the led color radio buttons
        var curRadio = ledColors[i]; // current radio button
        if (curRadio.value == ledColor) {
            curRadio.checked = true;  // select the radio button that matches the value from the array
        }
    }
The "document.body.innerHTML = " statement is telling the browser to replace everything in between the <body> and </body> tags. You don't want to redeclare the <html> <head> etc, within that.
 

lbenson

Senior Member
How would I receive at commands at the Picaxe side (what BASIC would be needed) and what would be any prerequisites?
Trying to get to that point, but still working out bugs.

For the picaxe to work with the ESP, you will need everything that is in hippy's code in the "Where's the Wizard?" thread (although you can and probably should ultimately set up the ESP to connect to your wifi on power-up (but the picaxe would still need to check that it is connected, and attempt the connection if it is not)). No way to avoid that long call-and-response sequence if the picaxe-to-esp combination is used. Hemi's technique just offloads the actual building of the web page to the javascript on the server machine.
 

lbenson

Senior Member
While viewing your web page, press F12 to bring up the developer tool bar. This will help you debug and view the "new" source code after the JS manipulates it (see the "Elements" tab). If you view the "Console" tab, it'll mention any errors or issues as the page executes. The "console.log" statement I included below is an example of how you can write things to the console, just like sertxd'ing data to the terminal in PE6.
Perfect, Hemi. Thanks very much for your time (and knowledge). Everything works. I should have figured out about the quotation marks. Didn't know about the F12 trick (though I had been doing Right-click, Inspect (but didn't know what to look for)). Good stuff.
 
Top