Smart IA: HTML5

Add the protocol to check and modify RTC time.

Get RTC Time

When you send "RTC0", it replies with T=<time stamp>

<time stamp> is only the sec part of POSIX time_t.

Set RTC Time

When you send "RTC<time stamp>", it replies with T=<time stamp>

Original Protocol

Get Last Data Block Number

When you send "GET0", it replies with N=<Data Block Number>

<Data Block Number>: "N=1" - "N=4294967295" unsigned 32 bit integer.

Of course, it will not get this big.

In the Data Log Code - Arduino Web Logger posting source code, SD_BASE_BLOCK becomes 0.

Get Data Block

When you send "GETn", it replies with

N = <Data Block Number>
T = <time stamp>
D = <data>

<time stamp> is only the sec part of POSIX time_t. Do *1000 since we don't use millisecond part. Of course it will be very difficult to see "T=4294967295" in our lifetime.

<data> is in +dd.ddd format.

"D=+12.345"
"D=" no data
"D=-99.999" termination. That certain Data Block send is completely finished.

Digital Out

When turning on "DOn=ON",

when turning off "DOn=OFF".

n is channel number between 0 to 7. There is no reply.

Digital In

When you send "DI", it replies with "bbbbbbbb".

b represents each input channel, and it becomes either '0' or '1'.

Analog In

When you send "AIn", it replies with "+dd.ddd".

n is channel number between 0 and 7, and "+dd.ddd" is from -10.000 to +10.000.

When you click [GetRTC] button display RTC time.

The incorrect RTC time gets set to current time when [SetRTC] button is clicked.

Now let's look at modified code. ( Look at link below for complete code )

Fixed code from Arduino

#include <SPI.h>
#include <Ethernet.h>
#include <WebSocket.h>
#include <SoftwareSerial.h>
#include "Sd2Card.h"
#include <minWire.h> // use the modified library code from RTC Preparation posting
#include <minRTClib.h>

// ... OMIT ...

//-------------------------------------DS-1307
RTC_DS1307 rtc;

// ... OMIT ...

//------------------------------------------------ setup()
void setup() {
 Serial.begin(9600);
 Wire.begin();
 rtc.begin();

 // ... OMIT ...

//-----------------------------------------------
// Create DATA Logging Block
//-----------------------------------------------
void makeLogBlock(void) {
 byte i;
 byte *pB;
 float fdata;
 DateTime now;

 // ... OMIT ...

 //------------------------- buffer is full
 if(LogBlockSize >= LOG_BLOCK_SIZE) {
  pB = sdBuffer;
  *((uint32_t*)pB) = USED_MARK;  //Used Flag
  pB += 4;
  now = rtc.now();
  *((uint32_t*)pB) = now.unixtime(); //Time-stamp

  // ... OMIT ...

void printTOD(void) {
 DateTime now = rtc.now();
 Serial.print(now.year(), DEC);
 printProg(DASH_MSG);
 Serial.print(now.month(), DEC);
 printProg(DASH_MSG);
 Serial.print(now.day(), DEC);
 printProg(SPACE_MSG);
 Serial.print(now.hour(), DEC);
 printProg(COMMA_MSG);
 Serial.print(now.minute(), DEC);
 printProg(COMMA_MSG);
 Serial.println(now.second(), DEC);
}

// ... OMIT ...

void onData(WebSocket &socket, char* rxLn, byte rxSz) {
 uint32_t para;
 DateTime now;

 //-----------------------------------
 // GET
 //-----------------------------------
 if((rxLn[0] == 'G') && (rxLn[1] == 'E') && (rxLn[2] == 'T')) {
  *(rxLn + rxSz) = 0x00;
  para = atol(rxLn + 3);
  
  if(para) 
   upload_DataBlock(para + SD_BASE_BLOCK);
  else 
   upload_lastBlockNo();
 }

 //-----------------------------------
 // RTC
 //-----------------------------------
 else if((rxLn[0] == 'R') && (rxLn[1] == 'T') && (rxLn[2] == 'C')) {
  *(rxLn + rxSz) = 0x00;
  para = atol(rxLn + 3);

  // set RTC
  if(para) {
   rtc.adjust(DateTime(para));
   delay(100);
  }

  // send current RTC
  printLn[0] = 'T';
  printLn[1] = '=';
  now = rtc.now();
  ltoa((long int)(now.unixtime()), printLn+2, 10);
  WSsend(printLn, strlen(printLn));
 }
}

Fixed code from HTML/JS

        // ... OMIT ...
        
        // receive Time Stamp
        if(ar[0] == 'T') {
            timeStamp = ar[1];
            // Locale standard is GMT. 
            // In order to view as Korean time, we need to -9 hrs.
            tod.setTime((timeStamp - (9 * 3600)) * 1000); 
            
    // ... OMIT ...
    
    function getRTC() {
        clearDspPara();
        ws.send('RTC0');
    }
    
    function setRTC() {
        clearDspPara();
        var t = new Date();
        // GMT problem. Ths time +9 hrs.
        ws.send('RTC' + (t / 1000 + 9 * 3600));
    }
    
// ... OMIT ...

<button type="button" onclick="getRTC()">Get RTC</button>
<button type="button" onclick="setRTC()">Set RTC</button>

// ... OMIT ...

Full codes can be found in following links

WSAdam5.ino:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam5/WSAdam5.ino
WSAdam6_5.html:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam6_5.html

The most basic HTML5.0 - Web SQL Database Tutorial.
http://www.tutorialspoint.com/html5/html5_web_sql.htm

1. Set DB's Name and Size.

    var db = openDatabase('WebLogger8', '1.0', 'Web Logger', 512 * 1024);

DB's name is WebLogger8 and the size is 512K bytes.

2. Create 2 DB Table. One with Index and the other with Data.

    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS LogIndex(block, timeStamp)');
        tx.executeSql('CREATE TABLE IF NOT EXISTS LogData(block, seq, data)');
    });

LogIndex: this is an index table with 2 columns

block number &
timeStamp

LogData: this is an data table

block number,
index within the block (500 ms = index 0, 1000 ms = index 1...)
actual data value

3. Add Data Block to DB Table.

    db.transaction(function(tx) {
        for (i = 0; i < rcvCnt; i++) {
            tx.executeSql('INSERT INTO LogData VALUES(?, ?, ?)', [blockNo, i, data[i]]);
        }
    });

Append the data table. You must write to DB after you have received entire Data Block. If you try to write data values every time you receive it, you will lose a lot of data. The confusing thing is that you receive correct number of data; however, you don't see the actual values anywhere.

We don't define data type for each column. This makes things simpler and confusing at the same time. When you actually write to DB the type gets defined. I am assuming that block becomes String, seq becomes Number, and data becomes String.

    db.transaction(function(tx) {
        tx.executeSql('INSERT INTO LogIndex VALUES(?, ?)', [blockNo, timeStamp]);
    });

Lastly append the index.
block and timeStamp are both String type.

Caution:

    db.transaction(function(tx) {
        tx.executeSql('INSERT INTO LogData VALUES(?, ?, ?)', [blockNo, i, data[i]]);
        tx.executeSql('INSERT INTO LogIndex VALUES(?, ?', [blockNo, timeStamp]);

Inside one db.transaction, do not append DB twice. Theoretically this is not a problem; however, if you continue to use that statement it causes error so let's avoid it.

4. Check DB Table.

    db.transaction(function(tx) {
        // Check all index.
        tx.executeSql('SELECT * FROM LogIndex', [], function(tx, results) {
            len = results.rows.length;

            for (i = 0; i < len; i++) {
                // we don't use millisecond part thus do *1000
                tod.setTime(results.rows.item(i).timeStamp * 1000);
                // if you do toLocaleString() to
                // day-time format variable, it returns a string
                // with a language sensitive representation of this
                // date.  There are many others. 
                // http://www.w3schools.com/jsref/jsref_obj_date.asp
                $("#dumpPara").append('' + results.rows.item(i).block + ',' + tod.toLocaleString() + '

');
            }
        }, null);
    });

    db.transaction(function(tx) {
        // search DB with block
        tx.executeSql('SELECT * FROM LogData WHERE block="' + blockNo + '"', [], function(tx, results) {
            len = results.rows.length;

            for (i = 0; i < len; i++) {
                // There is no guarantee that DB will read in order we
                // wrote. Thus we index it inside block.
                data[results.rows.item(i).seq] = results.rows.item(i).data;
            }

            for (i = 0; i < len; i++) {
                $("#dumpPara").append('

' + data[i] + '

');
            }
        }, null);
    });

5. For Less Confusion while Debugging...

When you try to change the name of DB, close all Chrome windows and re-open it. Otherwise new DB Table does not get created.
If HTML file is not in the same Folder path, close all Chrome windows and re-open it. If you don't do this WebSocket doesn't get connected.

Get the last SD logged Block Number from Arduino.

Click the [Get Last Data Block Number] button.

Enter the Block Number and Upload that certain Data Block from Arduino SD.

Enter the Block Number and click [Get Data Block] button.

If you upload, it gets inserted into both Index table and Log table.

Check Index Table.

Click [View Index] button.

It is displayed in Block, Time Stamp order.

Enter Data Block number to check Data Table.

Enter Block Number and click [View Data] button.

You will be able to see 120 values from that Block. Only the data will be shown.

Below is HTML/JS Code

The link to the code is posted in the end.

<!DOCTYPE html>
<html>
    <head>
        <title>WebLogger 6.3</title>
        <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
        <script>
            var ws;
            var blockNo, rcvCnt, timeStamp;
            var data = new Array();
            var tod = new Date();

            var db = openDatabase('WebLogger8', '1.0', 'Web Logger', 512 * 1024);

            $(document).ready(function() {
                db.transaction(function(tx) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS LogIndex(block, timeStamp)');
                    tx.executeSql('CREATE TABLE IF NOT EXISTS LogData(block, seq, data)');
                });

                WebSocketConnect();
            });

            function WebSocketConnect() {
                var ar = new Array();
                var arSz, i;

                try {
                    ws = new WebSocket('ws://192.168.219.16:80/');
                    ws.onopen = function() {
                        status('Connected...');
                    }

                    ws.onclose = function() { status('Closed...'); }
                    ws.onerror = function(evt) { status('Error ' + evt.data); }
                    ws.onmessage = function(evt) {
                        ar = evt.data.split('=');

                        // receive Last Data Block Number
                        if (ar[0] == 'N') {
                            blockNo = ar[1];
                            $("#blockNoPara").empty();
                            $("#blockNoPara").append('Block Number:' + blockNo);
                        }

                        // receive Time Stamp
                        if (ar[0] == 'T') {
                            timeStamp = ar[1];
                            tod.setTime(timeStamp * 1000);
                            $("#timestampPara").empty();
                            $("#timestampPara").append(tod.toLocaleString());
                        }

                        // receive Data Block
                        if (ar[0] == 'D') {
                            data[rcvCnt] = ar[1];

                            if (ar[1] != '-99.999') rcvCnt++;
                            else {
                                $("#recordCntPara").empty();
                                $("#recordCntPara").append('Record Count:' + rcvCnt);

                                if (blockNo != 0) {
                                    db.transaction(function(tx) {
                                        if (rcvCnt > 120) rcvCnt = 120;
                                        for (i = 0; i < rcvCnt; i++) {
                                            tx.executeSql("INSERT INTO LogData VALUES(?, ?, ?)", [blockNo, i, data[i]]);
                                        }
                                    });

                                    db.transaction(function(tx) {
                                        tx.executeSql("INSERT INTO LogIndex VALUES(?, ?)", [blockNo, timeStamp]);
                                    });
                                }
                            }
                        }
                    }
                } catch (exception) { status('Exception' + exception); }
            }

            function upload_lastBlockNo() {
                ws.send("GET0");
            }

            function upload_DataBlock() {
                blockNo = document.getElementById("DataBlockNo").value;
                ws.send("GET" + blockNo);
                blockNo = 0;
                rcvCnt = 0;
                $("#timestampPara").empty();
                $("#recordCntPara").empty();
                $("#dumpPara").empty();
            }

            function status(str) {
                $("#status").empty();
                $("#status").append(str);
            }

            function viewIndex() {
                var len, i;

                db.transaction(function(tx) {
                    tx.executeSql("SELECT * FROM LogIndex", [], function(tx, results) {
                        len = results.rows.length;
                        clearDspPara();

                        for (i = 0; i < len; i++) {
                            tod.setTime(results.rows.item(i).timeStamp * 1000);
                            $("#dumpPara").append('<p>' + results.rows.item(i).block + ',' + tod.toLocaleString() + '<p>');
                        }
                    }, null);
                });
            }

            function viewData() {
                var len, i;
                blockNo = document.getElementById("DataBlockNo").value;

                db.transaction(function(tx) {
                    tx.executeSql('SELECT * FROM LogData WHERE block="' + blockNo + '"', [], function(tx, results) {
                        len = results.rows.length;

                        if (len > 120) len = 120;

                        clearDspPara();

                        for (i = 0; i < len; i++) {
                            data[results.rows.item(i).seq] = results.rows.item(i).data;
                        }

                        for (i = 0; i < len; i++) {
                            $("#dumpPara").append('<p>' + data[i] + '<p>');
                        }
                    }, null);
                });
            }

            function clearDspPara() {
                $("#blockNoPara").empty();
                $("#timestampPara").empty();
                $("#recordCntPara").empty();
                $("#dumpPara").empty();
            }
        </script>
    </head>

    <body>
        <p id="status"></p>
        <button type="button" onclick="upload_lastBlockNo()">Get Last Data Block Number</button>
        <br />
        
        <input type="text" id="DataBlockNo" value="1">
        <button type="button" onclick="upload_DataBlock()">Get Data Block</button>
        <br />
        
        <button type="button" onclick="viewIndex()">View Index</button>
        <button type="button" onclick="viewData()">View Data</button>
        <p id="blockNoPara"></p>
        <p id="timestampPara"></p>
        <p id="recordCntPara"></p>
        <p id="dumpPara"></p>
        
    </body>
</html>