I realize the scope of this forum is not such that it involves explanations of how HTML works
or is coded and used in conjunction with Arduino webserver sketches.
I am in the process of gaining a basic understanding of HTML in order to embellish my Arduino based webpages. The following code is an extract from the modified IDE library file: SimpleWebServerWifi. John Woolsey presents this on his website as a tutorial for those who want to use a UNO WiFi Rev2.
void showWebPage(WiFiClient client) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
// the content of the HTTP response follows the header:
client.println("<h1>Arduino Remote Control</h1>");
client.println("<table border=1 style='text-align:center'>");
client.println("<tr><th>Component</th><th>Status</th><th>Control</th></tr>");
// Red LED
client.print("<tr><td>Red LED</td><td>");
if (digitalRead(redLED)) {
client.print("<font style='color:green;'>ON</font>");
} else {
client.print("<font style='color:red;'>OFF</font>");
}
client.println("</td><td><a href='/redLED/on'>ON</a> / <a href='/redLED/off'>OFF</a></td></tr>");
// Yellow LED
client.print("<tr><td>Yellow LED</td><td>");
if (digitalRead(yellowLED)) {
client.print("<font style='color:green;'>ON</font>");
} else {
client.print("<font style='color:red;'>OFF</font>");
}
client.println("</td><td><a href='/yellowLED/on'>ON</a> / <a href='/yellowLED/off'>OFF</a></td></tr>");
// Green LED
client.print("<tr><td>Green LED</td><td>");
if (digitalRead(greenLED)) {
client.print("<font style='color:green;'>ON</font>");
} else {
client.print("<font style='color:red;'>OFF</font>");
}
client.println("</td><td><a href='/greenLED/on'>ON</a> / <a href='/greenLED/off'>OFF</a></td></tr>");
client.println("</table>");
// The HTTP response ends with another blank line
client.println();
}
Here is a screenshot of the sketch webpage showing the HTML properties:
You can see on the right side the breakdown of the values for the various elements of the webpage. There are values for padding and borders, pixels widths and what have you.
I am failing to understand how all this information is embedded in the sketch code that is uploaded to the client webpage.
How is the HTML in the sketch being interpolated to generate all this additional element information? I am missing a fundamental understanding in how all this goes together and is manipulated to produce the overall appearance.
Any resources or links are appreciated beyond just my buying an HTML book and starting from ground zero. I can invest the time but I was hoping to embellish my webpages without
getting bogged down in all the intracacies of HTML. I have been using W3schools in copying and pasting some code to see how it appears but I still fail to see how the Arduino webpage code is generating all these elements and location assignments.
At this point it seems magical....lol.
What leads you to believe that it is embedded in the sketch code?
If you don't specify a font for the text on your Web page, one will be chosen by the Web browser by default. And so forth for the rest of the rest of the design choices for the Web page.
If you wish to overrule your Web browser's default choices for font, etc., then you need to learn HTML, and yes, that is beyond the scope of the Arduino programming section of these forums. I recommend you start here:
Aha, so the web browser has the luxury to make the display appear as it chooses if not specified. I can accept that especially since I have no choice in the matter. ...lol...
So learning HTML in depth seems to be a requirement I was hoping to avoid.
Another bucket list item has been added to my pail....
And, more likely, CSS, which is the preferred place to define all the user-defined formatting. You can embed a few CSS parameters directly in the HTML, but that approach quicklly becomes unmanageable. HTML is pretty straight-forward. CSS, not so much.
Not if you're like me and simply can't be bothered to have a Web page that doesn't look like it's from 1994. But the amount of "depth" in which you need to learn HTML depends on the amount of bells and whistles you wish to include.
I can relate to that sentiment. If I can just get the screen to a nice background color instead
of the snow white I currently deal with I may be mostly happy. With this learning curve involved
you have to decide if the "bells & whistles" are worth the investment of time.
I do not agree with this point of view: a web page, especially if it is used as a web-app, must have good usability and cognitive ergonomics such as not to make it's use frustrating.
Learning a bit of HTML and CSS and especially the use of JavaScript is not that difficult with the right tools (dev tools of browser first of all)!
It's true, they are very vast worlds, but good results can be achieved even with little and my personal opinion is that it's really funny. You can do whatever you want with a little JS/CSS/HTML!
Of course, developing on Arduino as in the example proposed is "inconvenient" to say the least.
The first step as I see it, is to abandon this way of building the page at runtime and start using an AJAX development style to make the page dynamic and interactive (basically using JavaScript).
This allows you to define the web page statically using a char array with a C++ literal string.
With some MCU you can either store HTML, CSS an JS directly on the flash memory, or as alternative you could use either also a SD memory card for that.
For example:
static const char homepage[] PROGMEM = R"anyLiteralStringYouLike(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple test page</title>
<style type="text/css" media="screen">
/*This style rule will affect all page body element */
body {
width: 70%;
margin: auto;
background-color: darkslategrey;
color: papayawhip;
font-family: serif;
text-align: center;
}
/*This style rule will affect all HTML input element with type == "text" */
input[type="text"] {
border: 1px solid #917272;
border-radius: 5px;
background: transparent;
color: white;
}
button {
padding: 6px 15px;
background-color: #3898ec;
color: #fff;
border: 0;
cursor: pointer;
border-radius: 5px;
}
/*This style rule will affect input element only on mouse hover*/
button:hover {
filter: brightness(65%);
}
/*This style rule (.) will affect all HTML element with class == "box" */
.box {
border: 1px solid white;
border-radius: 10px;
padding: 5px; margin:
10px;
}
.header {
background: grey;
}
/*This style rule (#) will affect only HTML element with id == "log" */
#log {
min-height: 250px;
}
</style>
</head>
<body>
<div class="box header">
<h1>Simple test page</h1>
</div>
<div class="box">
<h4>Write a message and click button</h4>
Message: <input type="text" id="message-txt" value="" class="box">
<button id="send-btn">Send Message</button>
</div>
<div class=box>
<main id=log></main>
</div>
<!--JS scripts usually are inserted before the end of body, so you at this point all HTML element are created-->
<script type="text/javascript">
function sendMessageToArduino() {
console.log('Send message to Arduino');
var message = document.getElementById('message-txt').value;
fetch('/parse?message=' + message) // Do the HTML request
.then((response) => response.text()) // Parse the response
.then(text => { // DO something with response
document.getElementById('log').innerHTML = text;
})
}
// Bind the button with id=send-btn to the function sendMessageToArduino
document.getElementById('send-btn').addEventListener('click', sendMessageToArduino);
</script>
</body>
</html>
)anyLiteralStringYouLike";
This is just a simple test page which you can save for example on a file called "homepage.h" and include in your sketch as usual.
P.S. In order to work, the sketch must handle the /parse?message=...... HTML AJAX request
There is definitely room for a middle ground here.
Perhaps you just want to know how to make a font big, so you can read it on your phone; or how to make a button big, so you can tap on it more easily. Here is my example, which is maybe not the best but should get the point across: http://robsmisc.com/arithmetic.html
Or maybe, like the OP said, you dislike the default white background color and want to change it.
You don't have to make something that looks like it was created with a $100,000 marketing budget just so that you can, for example, read a thermometer from your phone, and maybe adjust the thermostat from your phone too. We don't know exactly what it is the OP wants to do with his Web pages, but if they are simply meant to be used as tools (as in my thermometer/thermostat example), it is probably best to keep things simple.
Totally, but incorporating what you want to show into an Arduino sketch is the basic requirement, and unfortunately the compiler will not check the HTML code.
I had to dive into HTML myself since that section of my computer education was missing (i was doing other things while my friends back home were building websites for people as a gig to put them thru Uni)
And even with just very basic body styles and html forms you can more or less do what you want, and for more complex things, some CSS and later on some JS became quite handy.
All in all though i would say that a basic HTML book is a must. You have to have some idea of what you are doing and how you can transfer information that a user enters on a page into code that can actually do something.
Now the whole 'client.print()' thing is really a bit difficult to see how a webpage is constructed, but i think there are more user friendly webserver libraries available als for the UNO WiFi, (although i use ESP's for webpages and stuff)
This is true!
To remedy this, for such MCUs I have developed my own library which includes an ACE editor as a builtin page.
This way I can load the sources directly into the flash and modify them at runtime and immediately see how each small change behaves.
With the help of the browser's dev-tools, developing the web app in this way is quick and "easy".
Then at the end of the process, if I deem it necessary, I can package everything in a string literal, although I usually prefer to create a byte array containing the gzip version of the web page like this one for example.
Basically I took inspiration from what is shown in the example included with Arduino core (FSBrowser.ino) encapsulating it in a class and to which I added everything that was useful to me in these cases (WiFi manager, OTA firmware update etc etc)
I like how you are able to do all these things using developer tools, byte arrays, string literals, and such but your level of expertise & competency makes all this possible. For an old neophyte fart like me who has little to no exposure w/ HTML/CSS coding and only a smattering of C language ability it remains a daunting task.
What I would like to see is someone with your skills develop an online site that caters to folks like myself who could load their sketch field points and then construct their own customized webpage with the desired bells and whistles. After which they are left with a file that is simply attached to the ino sketch. And a fee for such a service would not be a deal breaker.
As i said before probably just changing the background screen color is all I am going to attempt as there is a law of diminshing returns with someone like myself who lacks any degree of programming savvy.
Merry Chrisitmas/ Happy New Year..
I haven't studied this type of language, just as I haven't studied C/C++ either to tell the truth.
What I have learned over the years is only the result of passion and interest and if I have succeeded, anyone can succeed
However, everyone has their own goals and their own level of satisfaction with them and that's ok👍
I would like do something like you hope, but my skills is not so good and in addition I'm not a good teacher at all ...
but, serving a webserver from file could be a good starting point for you because you can build the webpage with a PC or with some online builder and then simply copy the exported sources to your SD for example
Who is going to view this page? Does that impact how fancy it should look?
Note that you can write a manual html file on disk and view it from the browser. It may be easier to experiment that way and build the code that generates your design later on.
If I could have a Santa wish list for the webpage:
change background color
segregate data points on the webpage into quadrant groups, ie analog inputs, digtial Inputs, digital outputs, alarm parameters.
have alarm data fields change to red blocked background when in an alarm state
have green backgrounds for certain data
top section that creatively shows INO version number; RSSI value, days online, void loop
process time
the ultimate icing on the cake would be a: interactive control of digital outputs which would
allow me to override commands to equipment b: change alarm setpoint values.
"pie in the sky"....lol
p.s. the thing about all this "HTML/CSS stuff" is that once you figure out how to do it for one application you can then just modify that code to fit any other applications you might have, so the process goes much faster.
Just me for the most part. Beyond the changing of the background from the snow white it is not that important to do much else. Although a few bells & whistles would be nice.
It isn't. The info you're talking about is provided by the browser and local environment.
HTML was originally designed so that the actual formatting of "content" would be left u to the local environment (browser), depending on things like screen size, orientation, user-selected color schemes (eg "dark mode", "high contrast for the visually impaired", etc), font selections, and so on.
That's what you'll get if you use "basic" HTML - the user's browser will fill in the details, of exactly what a 3x4 table with text labels will look like. You get choices like "bigger text", "heading", "emphasized", and similar.
It turns out that content creators don't particularly LIKE having their content reformatted; sometimes they want things to look exactly the way the intended. Over time, features have been added to HTML (and to web browsers) to give the content-creators more control. This has resulted in travesties like pages that can't be viewed on B&W monitors (one of the first things to go :-(), pages that are unreadable depending on users' color choices, pages that require ridiculous amounts of side scrolling or window resizing, pages that "work best when viewed with Internet Explorer", and so on and on. Not to mention pages that download many more bytes of formatting information than actual content.
Presumably, you can modify all of the variables you asked about, using additional HTML, similar to the way that the existing example modifies the font color without actually specifying the other font details. Or use "more advanced" features to achieve similar results.
I appreciate your sharing the HTML development history and I now understand why things work the way they do.
Number 2 is a biggee. I have to ask myself is the investment of time in learning HTML and CSS at the level where I can embellish my "bare bones" webpages without spending an inordinate amount of time. I have around a half a dozen processors strewn around on my homestead LAN in various structures and currently they all have a webpage display like a 1980s vintage BBS; for those of you old enough to remember and have used the original internet BBS. I am gonna delve into HTML/CSS a little and if I get some basic things established I will call it a win. Lowering my expectations will also lower my level of frustration...lol.
I'm no expert on the topic, but I find it odd that your example code doesn't contain tags for html, head and body. Something (browser?) is quite happy to render the page without them, but that removes options for document wide styling. See here for a simple example of background color:
The wifi client and ethernet clients apparently use much the same code and I see in an ethernet example that you can provide the html tags: html tags.
I'll guess that you can similarly add body tags and then you can use the w3schools simple example to add styling for background color.
I suggest that you try that and then you can add the head tags and throw some css in there if you want to get fancy. Once you're sending a complete well formed html page, you should easily be able to find many examples of styling elements you can add to it.
...