It appears to me that hippy has made a huge step towards solving the web page problems you will face in this thread:Would it be possible to start the code even though my parts haven’t arrived yet
Hi Ibenson,It appears to me that hippy has made a huge step towards solving the web page problems you will face in this thread:
Where's the Wizard ?
Prompted by the current thread about web-enabled ESP things, I revisited the PICAXE Net Server. ( https://www.picaxestore.com/net002 ). I have a couple of these, bought as scrap for £1.20 each, and both work fine, but I've not done anything with them. It was something relating to TC/PIP...picaxeforum.co.uk
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.
I don't see how that makes things any easier from the picaxe side. How do you think it might?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.Would it be possible to store the HTML on a website (so not stored on the Picaxe) which the Picaxe then can access
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?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>
I was thinking of doing this to save space on the PICAXE and have a better designed website without having to worry about storage etc... Would this be okay?I don't see how that makes things any easier from the picaxe side. How do you think it might?
No reason not for it to be ok if you can figure out how to do it.
The process is the same regardless if the webpage is delivered by the PICAXE or from remote scripts.Will you be able to help in terms of getting the webpage to talk to the nodemcu to send variables etc...
<!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>
<!html>
<body></body>
<script src="http://mywebsite.com/s.js"></script>
</html>
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>';
Will you still be able to help with the AT commands and controlling picaxe over the web?I'm afraid I know nothing about this kind of use, and my goal is not to have to program more than one device.
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!The process is the same regardless if the webpage is delivered by the PICAXE or from remote scripts.
All the code on PICAXE:
Will look and operate the same as having only following on the 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>
which references s.js on your website that actually builds the form:Code:<!html> <body></body> <script src="http://mywebsite.com/s.js"></script> </html>
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.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>';
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.
Sure, if I understand how web page values are getting back to the PICAXE through the ESP8266 which invokes javascript to build a web page residing on another site. But Hemi seems to have experience with this.Will you still be able to help with the AT commands and controlling picaxe over the web?
No, that won't work without building something to invert the signals. Buy official AXE027 programming cable: https://www.picaxestore.com/picaxe/picaxe-download-cables/axe027My Picaxe 20-X and project board came today, can I use this: https://www.ebay.co.uk/itm/USB-To-RS232-TTL-CH340G-Converter-Module-5v-3-3v-Serial-Port-Module-PL2303-UK/253513002243 to program it, and if so how?
body {
background-color: #d0d0d0;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
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> '
This is just sample html code to illustrate a few different html input controls.What does PWM on/off do and what is a PMW Duty Cycle: ?
That's "Not a Number". I would guess from the plus after the equals ...So far so good, except that I have no idea where "NaN" at the top comes from.
document.body.innerHTML = +
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.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?
Right you are. I changed it to: document.body.innerHTML = "" +That's "Not a Number". I would guess from the plus after the equals ...
Nothing is ever as straightforward as one would like it to be.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.
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.What would be the BASIC code for the Picaxe to receive these variables/ signals etc...
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?
<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>
<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>
sertxd ("<script>var arrayCurVals = [",#b0,",",#b1,",",#b2,",",#b3,",",#b5,"];<script>")
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);
}
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 withThis 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.
<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>
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?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?
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.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?
Hemi--this is great stuff. So hard to learn this by just searching the web.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:
<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>
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);
var arrayCurVals = [1,0,0,111,"G"];
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
}
}
Trying to get to that point, but still working out bugs.How would I receive at commands at the Picaxe side (what BASIC would be needed) and what would be any prerequisites?
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.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.