How to in-line edit specific text on simple html web page, and save changes

Hi,

Components in use:

  • Arduino Mega 2560
  • Wiznet w5100 Ethernet shield with SD-Card slot

I have a home automation web page that controls power on and power off to a number of electrical wall sockets in the house using an Arduino Mega 2560 with Wiznet w5100 Ethernet shield with SD-Card slot. To this end the below web page is flashed into the Arduino memory.

Everything works as it should.

I want to develop this web page a little further though.

Here is why …

At times, a device plugged into a particular wall socket, is swapped for another device, e.g., the printer is removed (unplugged) and replaced with a desk lamp (plugged in).

Because of this I want to be able to in-line edit the part of the web page that refers to “Printer”, “Socket 2”, “Socket 3”, “Socket 4” on the fly; while the web page is live. In other words any person should be able to edit these parts of this page, from the page itself, without any knowledge of HTML or server side technologies.

The edited change will be saved permanently to the SD-Card (in a text file) until the next edit/ page change is made. The change will survive a power re-cycle.

What I am thinking is using a technology such as AJAX, with in-line edits/ changes saved permanently to an XML (or text) file on the SD-card.

It is only the occurrences of the text “Printer”, “Socket 2”, “Socket 3”, “Socket 4” that I need to be able to edit and change from the page itself, perhaps using a button per line to toggle between edit and save.

Does anyone know how I can do this?

Thank you

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <title></title>

  <style type="text/css">
  a{color:blue}.content1{width: 20px; float:right;}.content2{width: 20px; float:left;}
  </style>
</head>

<body>
  <center>
    

    

    <b><font size="+1" color='#CC33FF'>Living Room, Sockets 2</font></b>

    

    <a href='/?s2-all-on' target='x2'>All On</a>&nbsp;&nbsp;&nbsp;<a href='/?s2-all-off' target='x2'>All Off</a>

    <a href='/?s2-1on' target='x2'>Printer On</a>&nbsp;&nbsp;&nbsp;<a href='/?s2-1off' target='x2'>Printer Off</a>

    <a href='/?s2-2on' target='x2'>Socket 2 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s2-2off' target='x2'>Socket 2 Off</a>

    <a href='/?s2-3on' target='x2'>Socket 3 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s2-3off' target='x2'>Socket 3 Off</a>

    <a href='/?s2-4on' target='x2'>Socket 4 On</a>&nbsp;&nbsp;&nbsp;<a href='/?s2-4off' target='x2'>Socket 4 Off</a>

    

    

    <iframe name="x2" style='display:none' id="x2"></iframe>

   
    

    

  </center>
</body>
</html>

I don’t see the point of remotely changing a web page when the physical change may not have been made. A web page is only “live” when it is uploaded or refreshed. The below link might have some info on how to do what you want. Bottom is web page code that uses if statements to select what is to be embedded in the returned web page.

http://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-automatically-using-AJAX/

     client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>"); 
            //meta-refresh 0 for fast data
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>"); 
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("

");

You need to implement a more featured web server. The probably simplest solution is some kind of REST interface for changing the descriptions of different plugs.
I.e. you may take arguments encoded into the request URI via GET method. These arguments are e.g. either none for no change, or a plug-id and the new text.
The arguments then have to be processed, i.e. changes to be stored on the sd card.
The actual page you are displaying needs to be dynamic then as well.

Some kind of in-line edit is possible via html forms. They might be fancied up by css and javascript.

In case you only use one client over and over again, you may also store the textual descriptions in a cookie, full javascript.