WebServer- on Steroids

I am using this example code with a Freetronics EtherTen board ( i love that board with Ethernet + SD Card ) and its working fine ... the only problem is the result of the analog values on the web client ( browser) look drab and dull !! I want to spruce it up like the attached image file.
WebInterface.PNG
I know it can be done but what i want to know exactly is which is the easy way to do such web interfaces ? I know its not a good idea to serve the whole interface with borders and bells and whistles .... but have the tabulation and text served once and fill in only the analog variables into that. And of course if possible the analog gauge simulation also... looks cool :slight_smile:

Looking for the proper approach for this ....

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 125);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(850);

void setup() {
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for native USB port only
  }


  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            int sensorReading = analogRead(analogChannel);
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(sensorReading);
            client.println("
");
          }
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}

To make things look pretty, you'll need to change the HTML & CSS.
The gauge, you'll need to use Javascript to draw it onto an HTML5 canvas. There are premade gauge on the inter web so do some searches and you can include it into your HTML page.

On my server, I use the SD card to serve all the the files. You might need to change your code to load and write the files.

mistergreen:
To make things look pretty, you'll need to change the HTML & CSS.
The gauge, you'll need to use Javascript to draw it onto an HTML5 canvas. There are premade gauge on the inter web so do some searches and you can include it into your HTML page.

Thanks.

Been hearing something on these lines and some more like Ajax, JSON. Frankly I am not a web guy. ( And going one step further I don't know what I am - but that's another topic altogether )

Would it be something like I can use the on board SD card to store the "beautiful things " and only serve the numbers to fill in ??

yes on the sd card

here's a tutorial