Online grafer med ingenting men en Arduino, Ethernet Shield och Sensor (2 / 5 steg)

Steg 2: SD-kort förberedelserna

Innan vi börjar måste vi se till att våra SD-kort är bra att gå. Den bör vara formaterad som en FAT16- eller FAT32-filsystem, den information som finns på den officiella webbplatsen för Arduino. När det är gjort, måste vi säkerställa två saker finns i rotkatalogen på kortet: HC.htm filen och en data / katalog för våra datafiles. Datakatalogen görs enkelt med samma dator som användes för att formatera kortet förutsatt att man har en SD-kortläsare av något slag. HC.htm består av följande kod:

<! DOCTYPE HTML >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset = utf-8 ">
< title > Super Graphing Data Logger! < / title >

< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" >< / script >
< script type = "text/javascript" >
funktion getDataFilename(str) {
Peka = str.lastIndexOf ("filen =") + 4;

tempString = str.substring(point+1,str.length)
om (tempString.indexOf("&") == -1) {
Return(tempString);
}
annat {
återgå tempString.substring (0,tempString.indexOf("&"));
}

}

Query = window.location.search;

var dataFilePath = "/ data/"+getDataFilename(query);

$(funktion () {
var diagrammet.
$(document).ready(function() {

göra inställningar för
var alternativ = {

diagram: {
renderTo: "container",
zoomType: "x",
spacingRight: 20
},

Titel: {
text: "Light nivåer av Arduino"
},

SUBTITLE: {
text: "Klicka och dra i ritytan att zooma in"
},

xAxis: {
typ: 'datetime',
maxZoom: 2 * 3600000
},

yAxis: {
Titel: {
text: "ljusnivåer (0 - 1024)"
},
min: 0,
startOnTick: falska,
showFirstLabel: falskt
},

legend: {
aktiverad: falskt
},

verktygstips: {
Formatter: function() {
retur "< b >" + this.series.name + "< /b >< br / >'+
Highcharts.dateFormat ('% H: %M - %b %e, %Y', this.x) + ":" + this.y;
}
},

plotOptions: {
serie: {
markör: "pekare",
lineWidth: 1.0,
punkt: {
händelser: {
Klicka på: function() {
hs.htmlExpand (null {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat ('% H: %M - %b %e, %Y', this.x) + ": < br / > ' +
This.y,
bredd: 200
});
}
}
},
}
},

serie: [{
Namn: ljus nivåer,
markör: {
radie: 2
}
}]
};

Läsa in data asynkront med jQuery. På framgång, lägga till data
till alternativ och initiera diagrammet.
http://api.jquery.com/jQuery.get/

jQuery.get (dataFilePath, null, funktion (csv, staten, xhr) {
var rader = [],
datum,

Ställ in två dataserien
lightLevels = [];

inkonsekvens
om (typeof csv! == 'sträng') {
CSV = xhr.responseText;
}

dela data tillbaka i linjer och tolka dem
CSV = csv.split(/\n/g);
jQuery.each (csv, funktion (jag, line) {

alla data rader börjar med ett dubbelt citattecken
linje = line.split(',');
datum = parseInt (linje [0], 10) * 1000;

lightLevels.push([
datum,
parseInt (linje [1], 10)
]);

});

Options.Series[0].data = lightLevels;

diagram = nya Highcharts.Chart(options);
});
});

});
< / script >
< / head >
< body >
< p style = "text-align: center;" > Låt diagrammet att ladda, kan det ta upp till 30 sekunder < /p >
< hr / >
< script src = "http://cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js" >< / script >

<!--ytterligare filer för Highslide popup effekt-->
< script type = "text/javascript" src = "http://www.highcharts.com/highslide/highslide-full.min.js" >< / script >
< script type = "text/javascript" src = "http://www.highcharts.com/highslide/highslide.config.js" charset = "utf-8" >< / script >
< länka rel = "stylesheet" type = "text/css" href = "http://www.highcharts.com/highslide/highslide.css" / >

< div id = "behållare" style = "min-bredd: 400 pixlar; höjd: 400 pixlar; marginal: 0 auto ">< / div >

< / body >
< / html >

Du kommer att behöva redigera filen först så att den pekar mot den föredra läget i highcharts.js-filer. Du kan lämna det som det offentliga CDN: http://cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js, ändra den till pekar mot ditt eget webbhotell, eller det kan även vara på Arduino's SD-kort (detta kommer att vara långsam). Det är inte nödvändigt att skapa en datafile innan handen, SGDL skissen tar hand om det när den beslutar att spela in sin första datapunkt. Innan vi får som långt ändå, är det nödvändigt att se till att vi har konfigurerat EEPROM minnet för SGDL skissen.