Trying to make SD.h to render an HTML5 file
i have been working on project getting set of readings , dumping them csv file.i thinking of adding export html option user can can quick visual idea on going on while device deployed,in addition providing expandability in future using xbee or type of ethernet.
the first problem sd.open (file.extention, file_write) not support 4 letter extentions.so creating .html file not possible.i had overcome using .htm , hoping browser smart enough render it.
in order give idea of how page supposed rendered html code:
using notepad++ , replacing " \" tabs \t , newlines \n came across code on arduino based on sd readwrite example created draft sketch:
the main problem occurs after line //start printing svg
if the code un-commented.even though if tested separately code functions create working file have comment out part of in order arduino not bootloop crashing on line
serial.println("initializing sd card...");
i suspect memory issue though binary sketch size: 15316 bytes (of 30720 byte maximum) seems ok.i tried closing , opening file halfway clear buffer no luck..
the board duemilanove 328p chip
any appreciated.
the first problem sd.open (file.extention, file_write) not support 4 letter extentions.so creating .html file not possible.i had overcome using .htm , hoping browser smart enough render it.
in order give idea of how page supposed rendered html code:
code: [select]
<!doctype html>
<html>
<head>
<title>quantitative metal detector data visualisation</title>
<style type="text/css">
table { margin-left: auto; margin-right: auto;text-align: center; }
svg { display: block;margin-right:auto;margin-left:auto;margin-top:10px;margin-bottom:10px; }
body { background-color:#eeeeee;}
</style>
</head>
<body>
<h1 align="center">metal detector data</h1>
<table border="2" width="1000">
<tr>
<th>measurement</th>
<th>coil 1</th>
<th>coil 2</th>
<th>coil 3</th>
<th>coil 4</th>
<th>coil 5</th>
<th>coil 6</th>
<th>coil 7</th>
<th>coil 8</th>
</tr>
<tr>
<td>1</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>200</td>
</tr>
</table>
<table border="1" width="100">
<tr>
<td><svg width="990" height="60" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<line id="line1" x1="0" y2="50" y1="0" x2="0" />
<line id="line2" x1="0" y2="30" y1="0" x2="0"/>
<line id="line3" x1="0" y2="20" y1="0" x2="0"/>
<line id="line4" x1="0" y2="50" y1="0" x2="0"/>
<line id="line5" x1="0" y2="10" y1="0" x2="0"/>
<line id="line6" x1="0" y2="40" y1="0" x2="0"/>
<line id="line7" x1="0" y2="40" y1="0" x2="0"/>
<line id="line8" x1="0" y2="50" y1="0" x2="0"/>
</defs>
<use xlink:href="#line1" x="260" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line2" x="360" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line3" x="460" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line4" x="560" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line5" x="660" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line6" x="760" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line7" x="860" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<use xlink:href="#line8" x="960" y="00" stroke="black" stroke-width="2" stroke-dasharray="6 6"/>
<polygon points="260,60 260,50
360,30 460,20 560,50 660,10 760,40 860,40
960,50 960,60"
style="stroke:#660000; fill:#cc3333; stroke-width: 1;"/></td>
</svg></td>
<tr>
</table>
</body>
</html>
using notepad++ , replacing " \" tabs \t , newlines \n came across code on arduino based on sd readwrite example created draft sketch:
code: [select]
/*
sd card read/write
example shows how read , write data , sd card file
circuit:
* sd card attached spi bus follows:
** mosi - pin 11
** miso - pin 12
** clk - pin 13
** cs - pin 4
created nov 2010
david a. mellis
updated 2 dec 2010
tom igoe
example code in public domain.
*/
#include <sd.h>
file myfile;
int cx = 300;
int linereadings[8];
int lineno = 1;
int xcoord = 260;
void getreadings(){
(int i=0;i<8;i++)
{
linereadings[i] = random(0,10);
}
}
void printreadings()
{
(int i=0;i<8;i++)
{
serial.print("reading : \t");
serial.print(i+1);
serial.print(" = ");
serial.print(linereadings[i]);
serial.println("");
}
}
void setup()
{
getreadings();
serial.begin(9600);
// on ethernet shield, cs pin 4. it's set output default.
// note if it's not used cs pin, hardware ss pin
// (10 on arduino boards, 53 on mega) must left output
// or sd library functions not work.
pinmode(10, output);
serial.println("initializing sd card...");
}
void loop()
{
serial.println("begin");
if (!sd.begin(4)) {
serial.println("initialization failed!");
}
else{
serial.println("initialization done.");
renderhtml();
}
// open file. note 1 file can open @ time,
// have close 1 before opening another.
//cannot open 4 characters extention name html replaced htm
printreadings();
serial.print("end");
while(1);
// nothing happens after setup
}
void renderhtml(){
myfile = sd.open("data.htm", file_write);
// if file opened okay, write it:
if (myfile) {
serial.print("writing test.txt...");
//begin html file header
myfile.println("<!doctype html>\n<html>\n<head>\n<title>quantitative metal detector data visualisation</title>\n");
//we cannot afford external css add them in head section of html , close head
myfile.println("<style type=\"text/css\">\ntable { margin-left:auto; margin-right:auto;text-align:center; }\nsvg { display:block;margin-right:auto;margin-left:auto;margin-top:10px;margin-bottom:10px; }\nbody {background-color:#eeeeee;}\n</style>\n</head>\n");
//start printing body , header
myfile.println("<body><h1 align=\"center\">metal detector data</h1>");
//create name part of data table
myfile.print("<table border=\"2\" width=\"1000\">\n\t<tr>\n\t\t<th>measurement</th>\n\t\t<th>coil 1</th>\n\t\t<th>coil 2</th>\n\t\t<th>coil 3</th>\n\t\t<th>coil 4</th>");
myfile.print("\n\t\t<th>coil 5</th>\n\t\t<th>coil 6</th>\n\t\t<th>coil 7</th>\n\t\t<th>coil 8</th>\n\t</tr>\n");
//create data part of table
myfile.print("\t<tr>\n\t\t<td>");
myfile.print(lineno);//print line number
myfile.print("</td>\n");
//go through each of readings
for(int =0;i<8;i++){
myfile.print("\t\t<td>");
myfile.print(linereadings[i]);//dump readings html table
myfile.print("</td>\n");
}
//close table
myfile.println("\t</tr>\n</table>\n");
//start printing svg part of file
/*
//create container table
myfile.println("<table border=\"1\" width=\"100\">\n\t<tr>");
//create svg header
myfile.println("<td><svg width=\"990\" height=\"60\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n\t<defs>");
//damp readings line euations
for(int =0;i<8;i++){
myfile.print("<line id=\"line");
myfile.print(i); //required name lines differently
myfile.print("\" x1=\"0\" y2=\"");
myfile.print(linereadings[i]); //data input line
myfile.print("\" y1=\"0\" x2=\"0\" />\n");
}
//close definitions part of svg
myfile.println("\t</defs>");
//dotprint();
/*
//make lines dotted , place them in x coordinates
for(int =0;i<8;i++){
myfile.print("<use xlink:href=\"#line");
myfile.print(i);//syncronize line name afrom above
myfile.print("\" x=\"");
myfile.print(xcoord); //add current point coordinate
myfile.print("\" y=\"00\" stroke=\"black\" stroke-width=\"2\" stroke-dasharray=\"6 6\"/>\n");
xcoord = xcoord + 100;
delaymicroseconds(100);
}
/*
xcoord = 260; //reset xcoord next loop
*/
//close table , svg
myfile.println("</svg></td>\n\t<tr>\n</table>");
//close html file
myfile.println("</body>\n</html>");
// close file:
myfile.close();
serial.println("done.");
} else {
// if file didn't open, print error:
serial.println("error opening test.txt");
}
}
the main problem occurs after line //start printing svg
if the code un-commented.even though if tested separately code functions create working file have comment out part of in order arduino not bootloop crashing on line
serial.println("initializing sd card...");
i suspect memory issue though binary sketch size: 15316 bytes (of 30720 byte maximum) seems ok.i tried closing , opening file halfway clear buffer no luck..
the board duemilanove 328p chip
any appreciated.
quote
i thinking of adding export html option user can can quick visual idea on going on while device deployed,in addition providing expandability in future using xbee or type of ethernet.
why need save htm(l) file? create data on fly, when requested.
quote
i suspect memory issue though binary sketch size: 15316 bytes (of 30720 byte maximum) seems ok.
there 3 kinds of memory. knowing how flash using tells nothing (very large) amount of sram using. strings take sram, , sd library needs on 1/4 of sram. running out.
Arduino Forum > Using Arduino > Storage > Trying to make SD.h to render an HTML5 file
arduino
Comments
Post a Comment