I don't know HTML nor do I understand Arduino. I'm playing with Adobe Muse but when I export the site to HMTL it creates a css, image, index.html, scripts and sitemap.xml file
Looks very different from the sketch examples that I see.
What I'm trying to do is create a simple webpage hosted on SD with custom images, backgrounds and icons so I can control some servo to move up and down.
With this example that I copied from somewhere I was able to click on a left and right button and move my servos. But the webpage really lag, I wanted to do the same thing but on an SD card and have my own images and backgrounds etc... what I'm trying to do is integrate arduino with my Zwave home automation to pull some open and close.
//Serial.print(c);
}
//if HTTP request has ended
if (c == '\n') {
Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page
client.println("Content-Type: text/html");
client.println();
client.println("<HTML>");
client.println("<HEAD>");
client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
client.println("<link rel='stylesheet' type='text/css' href='http://randomnerdtutorials.com/ethernetcss.css' />");
client.println("<TITLE>Random Nerd Tutorials Project</TITLE>");
client.println("</HEAD>");
client.println("<BODY>");
client.println("<H1>Living Room Blinds Control</H1>");
client.println("<hr />");
client.println("
");
client.println("<H2>Arduino with Ethernet Shield</H2>");
client.println("
");
client.println("
");
client.println("<a href=\"/?button2on\"\">Rotate Left</a>");
client.println("<a href=\"/?button2off\"\">Rotate Right</a>
");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
//controls the Arduino if you press the buttons
if (readString.indexOf("?button2on") >0){
microservo.attach(9); // attaches the servo on pin 9 to the servo object
microservo.write(180); // sets the servo position according to the scaled value
delay(1150); // waits for it to get to the position
microservo.detach();
delay(1000); }
}
if (readString.indexOf("?button2off") >0){
microservo.attach(9); // attaches the servo on pin 9 to the servo object
}
microservo.write(0); // sets the servo position according to the scaled value
delay(1150); // waits for it to get to the position
microservo.detach();
delay(1000);
}} // waits 15ms for the servo to reach the position
} }
I'll bet it looks different from the examples - that sounds like a rather bloated page that it's creating, though I can't tell from what you've said.
I think most people are serving hand-written html, making it easier to keep the page small (since Arduino has very limited resources, compared to a modern webserver). You can also offload some bulky resources onto a normal webpage, so the Arduino only needs to serve the webpage, and it gets the images and stylesheet from your real webserver (for example, an AWS instance, or a webserver running on another device in your home).
I generally take it a step further, and don't serve any pages from the microcontroller - It just has a web API (maybe something RESTful, often not even that complicated) and the page, hosted elsewhere, controls it by making XHRs. In this case, the micro just needs to serve the data that needs to be presented, and the CORS header so that the browser won't refuse to make the requests.
@ Drazzy, I do have the ability to host the server locally. So that's definitely an option. Sounds like I'll get faster response. Xampp will probably be where I'll start. Any recommended articles on where to start with this?
@Robin... I'm not an expert with HTML but I've worked with it on and off. I just don't do it enough to remember the codes but with references available online, I'm confident that I can put a simple page with a couple buttons
The advantage of the approach with a separate CSS file is that it's a lot easier to give multiple pages the same look-and-feel; simply link the same CSS file in multiple web pages; it's referred to as 'external stylesheet'. For a single page, you can embed the CSS in the HTML page; the preferred way in my opinion is the 'internal stylesheet' so you will have consistency throughout the page. The last way is 'inline styles'; they are only advised for extremely simple pages and (if I'm not mistaken) strongly advised for HTML emails.
You just need to learn some basic HTML; optionally learn a little CSS if you want your page to look a little fancy.
Under windows I use Notepad++ and under Linux I use vi to design the pages (from scratch). It's hardcore but one learns the most of it (my opinion) and one knows exactly what one gets.