Guys ......
What is the best source on the net to learn embedded HTML from. ??
Thanks
Babar
"embedded html"? HTML is HTML. I like w3schools for web-design stuff (HTML, CSS, and JS).
On embedded systems, space is at a premium and large files are awkward - particularly if you're generating the code within your sketch (as opposed to serving it off an SD card or something) - so you'll naturally be making different tradeoffs than you would if you were serving it off a full scale server, but all the concepts, syntax, etc are the same.
That said - I tend to use a somewhat different paradigm when the embedded system is really cramped for resources: I serve most of the site with a bog standard apache server running on a raspi on the same network; this way, you can develop like you would on a normal server, instead of constantly worrying about the size of the pages you're serving up. The embedded system, instead of serving up HTML, just serves the data in JSON format (with the damned CORS header), and the page that the raspi serves up uses an XHR to grab that data. That way the embedded system is only serving what only it can, and the resource-rich raspi is serving up the html and other resources. An example of this is what I do for mood lighting in my room (not Arduino though - it's Espruino, so it's embedded JS) that uses this paradigm is here - This stuff is sitting on a raspi: AzzyProjects/Animate/WebControlPanel at master · SpenceKonde/AzzyProjects · GitHub while it's making those XHRs aimed at this lighting controller ( AzzyProjects/Version8.js at master · SpenceKonde/AzzyProjects · GitHub )
DrAzzy:
That said - I tend to use a somewhat different paradigm ....
While the details are very different that concept sounds the same as the way I use Python with the Bottle web framework. The Bottle part serves up the web pages and other parts of the Python code communicate with the Arduino to send and receive data - in my case, over the USB cable.
Using HTML, CSS and a little Javascript (with JQuery) makes it very easy to create a GUI.
And I also like the w3schools website.
...R
Edited to mention JQuery, which I had overlooked, and which makes Javascript much simpler
- I'd be careful about w3schools..... many have dub'd them w3fools. (I believe because they either have not updated or provide erroneous knowledge at times).
That being said.. I have used many examples from them without issue (I guess it depends on what your looking for)
There are so many HTML resources out there.. just google and pick one.
Codecademy has a nice lesson structure to it:
IMHO.. start with HTML 5 and CSS, learn the proper way to make efficient webpages..
- (and then forget it all if you ever have to make HTML emails!) lol
Javascript (not to be confused with JAVA) and jQuery would be the next building blocks IMO..
Thanks xl97,
I being only a newbie and hobbyist are trying to juggle with different GUIs to work from Chrome browser.
.
Problem that I have is, when I try to plug the standard html statements into Arduino IDE, it gives errors and errors.
.
So came to think, as if there is some different kind of html for embedded stuff or something like that ...... why the standard html won't work in this case, need a clue, Thanks.
DrAzzy,
Here's a statement of standard html;
However, when I try to plug it in Arduino IDE sketch code ...... I get nothing but error ... (I do print it to client by adding client.println(" ...... ...... ") ??
There isn't any help from the Arduino Reference also.
I am newbie / hobbyist ..... so you know 
Babar_Latif:
Here's a statement of standard html;However, when I try to plug it in Arduino IDE sketch code
Post the actual line of Arduino code that you are trying to use.
@travis-farmer's comment may well hold the solution
...R
Robin2:
Post the actual line of Arduino code that you are trying to use.@travis-farmer's comment may well hold the solution
...R
Hi Robin2,
Here's how I tried to code it in the sketch:
Original HTML statement:
Coded in the Sketch:
client.println("Tutorials Point");
Is there a good source to learn the Syntax to code html for Arduino IDE ??
Babar_Latif:
Coded in the Sketch:client.println("<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>");
The problem is not a HTML problem but due to your lack of knowledge of C++. Indeed I think the problem would also arise in any language, including in more complesx HTML
The problem is that the second double-quote matches the first one and is interpreted as the end of that piece of text. That leaves the text http://www.tutorialspoint.com" target= dangling in the breeze.
If you want to include double-quote characters in your text you must "escape" them by preceding them with a backslash like this (as suggested earlier by @travis-farmer)
client.println("<a href=\"http://www.tutorialspoint.com\" target=\"_self\">Tutorials Point</a>");
...R
Robin2:
The problem is not a HTML problem but due to your lack of knowledge of C++. Indeed I think the problem would also arise in any language, including in more complesx HTMLThe problem is that the second double-quote matches the first one and is interpreted as the end of that piece of text. That leaves the text http://www.tutorialspoint.com" target= dangling in the breeze.
If you want to include double-quote characters in your text you must "escape" them by preceding them with a backslash like this (as suggested earlier by @travis-farmer)
client.println("<a href=\"http://www.tutorialspoint.com\" target=\"_self\">Tutorials Point</a>");...R
Thanks Robin2,
You are right, I barely have any significant knowledge of C / C++ (though continuing as much as an hobbiyst can ). Escaping double quotes with backslashes worked out perfect.
.
I need further help on identifying the variable that changes by clicking text / button on the client side. Once I know the variable, rest I can handle.
Thanks
Babar_Latif:
I need further help on identifying the variable that changes by clicking text / button on the client side. Once I know the variable, rest I can handle.
Maybe I missed something earlier but that sounds a lot like "how do I adjust the seat on my 1963 car"
...R
Robin2:
Maybe I missed something earlier but that sounds a lot like "how do I adjust the seat on my 1963 car"...R
You are not wrong, but I tried to find the lever to adjust that seat and couldn't ...... 
Babar_Latif:
You are not wrong, but I tried to find the lever to adjust that seat and couldn't ......
The point I was trying to get you to appreciate is that you did not provide enough information with the question in Reply #11
...R
Robin2:
The point I was trying to get you to appreciate is that you did not provide enough information with the question in Reply #11...R
Yeah ... that's another problem. how good an answer is, depends on how good the question was !! ... Sorry about that.
.
At least please guide me to the study I should take, for interfacing C++ (server side) with html (client side), so that whatever data client sends back could be used for further actions in C++ by the server.
Babar_Latif:
At least please guide me to the study I should take, for interfacing C++ (server side) with html (client side), so that whatever data client sends back could be used for further actions in C++ by the server.
What will the server code be running on?
I have never written server code with C/C++ - life is too short. If you are running the server on a PC I suggest you have a look at the Python Bottle web framework. You can have a simple server working in 10 or 15 minutes.
...R
You can always look into stalling WAMP server (Windows) or LAMP (Linux/MAC)..
and then use some PHP as the server side scripting language.
php is pretty easy to learn the basics of.. lots of tutorials and community support as well.
Myself, I'm not 100% clear on what your trying to do/achieve in your project?
You mentioned HTML basics.. but how is this being used? What is the bigger picture of the project (technical stuff aside)
Robin2:
What will the server code be running on?I have never written server code with C/C++ - life is too short. If you are running the server on a PC I suggest you have a look at the Python Bottle web framework. You can have a simple server working in 10 or 15 minutes.
...R
I had written a detailed post on what I am trying to achieve but don't know how it got lost .... anyway ignore if you find a similar other post.
I am struggling with ESP8266 WiFi module running with Arduino C as server to toggle an LED from browser on my laptop as client running html.
For this I copied a public domain Arduino sketch for ESP8266 and everything is running OK.
However, for learning sake, I tweaked the C Sketch to add buttons in GUI which shows good on laptop browser. But I am failing to get the desired action for toggling the LED.
I am trying to get outputs from client button onclick or href=" inputs as server-client communication ??
Where this part of server - client communication is covered in C ?? .... I will study that.
Babar_Latif:
I am struggling with ESP8266 WiFi module running with Arduino C as server to toggle an LED from browser on my laptop as client running html.
I can't help with that. But I wonder if the end justifies the means. Building a web server on a cheap laptop is sooo much easier. I know you can buy a lot of ESP8266s for the price of a cheap laptop - but even so ...
...R
Hello Babar.
I am also new to the protocols of the web and have an interest in this topic.
For testing purposes, html code is loaded from my 2560 via SD card and pushed via serial to the esp8266; once received, it is stored in the EEPROM so that it is available after reboot. Like yourself, I have trolled the internet for information which appears to only have simple button control or info related to the Ethernet library.
I can load the page using the IP address of the esp8266. However, passing info from the web page to the esp8266 has unsuccessful due to my lack of knowledge.
esp8266 Facts: #include <EEPROM.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
esp8266 library- 2.3.0
Arduino IDE - 1.8.1
Goal: Enter IP, submask & gateway into webpage; press webpage button and pass info to esp8266; store in EEPROM.
html code (page loads - however, no info passed to esp8266):
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Test Page - IoT</title>
<script>
strLine1 = "";
strLine2 = "";
function SendText()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
strLine1 = "&L1=" + document.getElementById("txt_form").line1LCD.value;
strLine2 = "&L2=" + document.getElementById("txt_form").line2LCD.value;
request.open("GET", "ajax_inputs" + strLine1 + strLine2 + nocache, true);
request.send(null);
}
</script>
</head>
<body onload="GetArduinoIO()">
<p><b>My Test Page</b></p>
<p>Your Wifi Host IP Adress is:</p>
<p>Your Wifi Host IP Submask is:</p>
<p>Your Wifi Host IP Gateway is:</p>
<p></p>
<p><b>Enter text to send to TFT TouchScreen:</b></p>
<form id="txt_form" name="frmText">
<label>Line 1: <input type="text" name="line1LCD" size="16" maxlength="16" /></label>
<label>Line 2: <input type="text" name="line2LCD" size="16" maxlength="16" /></label>
</form>
<input type="submit" value="Update IP Settings" onclick="SendText()" />
</body>
</html>
Recommended links to info in this thread have been noted.
As I learn more of the esp8266 & html, I will add to this thread; I hope you'll do the same -information has become so fragmented and time consuming.
A working example from our peers would be greatly appreciated.
Hi JMeller,
Thanks for your understanding my problem, that is, how to receive data in ESP8266 from laptop once the button is clicked on the page received from ESP8266.
Question: How you read the data back in ESP8266 with onclick on the page ??
Ref: the relevant line from your code;