Tutorial Google Charts met werkende sketch
7 berichten
• Pagina 1 van 1
Tutorial Google Charts met werkende sketch
door Enschot » 01 Nov 2013, 15:33
Hallo allemaal,
Ik heb geprobeert om Google charts i.c.m. Arduino een beetje in pasklare hapjes te orderen.
Het doorgronden van Google Charts is niet echt makelijk, en ik denk dat je met deze tutorial een heel stuk verder komt.
Als afronding heb ik er ook nog een sketch bijgevoegd, zodat je ook kan zien hoe Google Charts in de praktijk kan worden toegepast.
Indien er animo voor is zal ik ook nog uitwerken hoe je meerdere Google Charts kan gebruiken etc.
Veel plezier met Google Charts!!
Google Charts gebruiken in combinatie met Arduino projecten.
Om google charts te kunnen toepassen in je Arduino projecten moet je relatief diep in deze materie duiken. Ik ben zelf weken bezig geweest om uit te pluizen hoe ik de data van mijn Arduino via de Google Charts kon weergeven. Nadat me dit uiteindelijk lukte kosten het me nog een paar weken om er achter te komen hoe ik meerdere grafieken kon beheren. Maar uiteindelijk is me dan dan toch, welleswaar met de hulp van 3de gelukt.
Globale beschrijving van de werking.
Via het gratis te gebruiken hulpprogramma Pushingbox worden degegevens b.v. iedere minuut, of om de 5 minuten vanaf de Arduino via de Pushingbox naar een EXCEL bestand van Google documents geschreven. D.m.v. de Google Charts software wordt deze data op de Arduino verwerkt, en wordt hier een script samengesteld dat vervolgens naar de Client wordt verstuurt. De Grafiek verschijnt dan op de vooraf bepaalde plaats op je HTML pagina. Deze grafiek wordt vervolgens iedere 5 minuten automatisch geupdate.
GOOGLE Documents
We gebruiken Google documents als een database. Deze database bevindt zich als het ware in de CLOUD. Hij bevindt zich dus niet op je harddisc, maar op een server die je vanaf iedere willekeurige lokatie kan benaderen.
Om met Google documents te kunnen werken moet je een Google account hebben. Indien je er nog geen hebt maak er dan een aan.
• Ga naar Google.
• Log in.
• Klik op het Apps symbool, het 4de pictogram van rechts.
• Klik op het drive pictogram.
Op het onderstaande screenshot zie je een overzicht van de bestanden die op de Google Drive staan. Je ziet dat er steeds twee bestanden met dezelfde naam op de drive staan. Het eerste bestand is het formulier waar we de variabelen een naam geven, en het tweede bestand is een Spreadsheet waarin iedere minuut, of om de 10 minuten automatisch de gegevens worden bijgewerkt.
Als je Google Drive voor de eerste keer gebruik zal deze nog leeg zijn. We gaan nu verder met het aanmaken van een nieuw formulier, en kies een logische naam b.v. “Arduino Lijngrafiek” . Nadat je op “CREATE” hebt geklikt verschijnt onderstaand scherm. Klik vervolgens op “FORM”. Daarna zie je onderstaande dialoogbox, waar je de naam van het formulier “Arduino Lijngrafiek” kan invullen, en indien gewenst voor een ander thema kan kiezen.
Nadat je bovenstaande opdrachten hebt uitgevoert klik je op “OK”, en verschijnt er op het scherm een dialoogbox waar je de grafiek data kan benoemen. Als het gaat om een single lijn grafiek dan vul je slechts een variablennaam in, in mijn geval ging het om een 11 lijns grafiek. Als voorbeeld gaan we uit van een drie lijns grafiek. Automatisch zal er op het spread sheet formulier ook een datum en tijd kolom worden aangemaakt. Hieronder een screenshot van de dialoogbox waar we de variabelen kunnen invoeren.
We gaan hier dus 3 tekst variabelen invoeren, Lijn1, Lijn2, en Lijn3. Als Type selekteren we in de combobox “TEXT”. Daarna klikken we op “Add Item”, en nadat we de derde variabelennaam hebben ingevoerd klikken we op “Done”. Nadat we onze drie variabelennamen van het type Tekst hebben ingevoerd ziet onze dialoogbox er als volgt uit.
Nu is het zo dat deze variabelen gelinkt moeten worden met pushingbox. Deze link wordt gecreerd door op de knop “Send form” te drukken. Deze link copieren we voorlopig even naar een notepad zodat we deze later kunnen gebruiken in het programma pushingbox. Hieronder een screenshot van het dialoogvenster waarop de link is weergegeven.
Als je de link hebt gecopieerd klik je op “Done”. Voordat we de link later kunnen gebruiken moeten we deze ook nog even aanpassen. De link ziet er in zijn geheel als volgt uit. https://docs.google.com/forms/d/1zyJB69 ... 8/viewform
Het laatste stukje van de link “viewform” gaan we veranderen in “formResponse”. Als je daarna op de knop view responses klikt krijg je de spreadsheet the zien waarin vier kolommen zijn aangemaakt, een voor de datum en tijd, en driekolommen voor de gegevens. De spreadsheet ziet er als volgt uit.
Als alles juist is uitgevoerd dan zal er iedere minuut, of om de 10 minuten automatisch een nieuwe regel met data worden toegevoegd. Deze data wordt later weer opgevraagd met behulp van ons Arduino programma. Om dit mogelijk te maken moeten we deze data gaan publiceren, ofwel vrijgeven. Als we dit later vergeten dan zien we op de plaats waar straks onze grafiek moet verschijnen de melding “ACCESS DENIED”. Hoewel we het op dit moment nog niet hoeven te doen ga ik nu al vast uitleggen hoe we toestemming kunnen geven tot het publiceren van onze gegevens. Vanuit onze spreadsheet klikken we op File, en vervolgens op “publice to the web”. Daarna zie je onderstaande dialoogbox. Klik op “Start publishing”, en daarna op “Close”.
Als laatste moeten we nog drie links ophalen die we later nodig hebben in ons hulp programma Pushingbox. Hiervoor gaan we naar ons formulier. Voor de duidelijkheid, we hebben nu een formulier genaamd “Arduino grafiek” en een spreadsheet “Arduino grafiek responses” aangemaakt. Dus we gaan nu naar het formulier door op het groene vierkantje van de Google drive te klikken, en daarna op het Arduino grafiek formulier. Vervolgens klikken we op “View live form” waarna onderstaande dialoogbox zal verschijnen.
Klik nu met de rechtermuisknop in het invulvak van "temp1", en vervolgens op” inspect element”. Je krijgt nu als het goed is een stukje HTML taal te zien waarin je de link kan vinden die je later in het pushingbox programma nodig hebt. In ons geval is dit “entry.1055220030”. Deze links noteer je ook voor “temp2”, en “temp3”. Hieronder een voorbeeld van de HTML code.
Dit is het voorlopig voor wat betreft onze Google spreadsheet. We gaan nu verder met het instellen van ons hulpprogramma Pushingbox. Hopelijk is nog niemand afgehaakt, want het eindresultaat is zeker de moeite waard, en je programma’s zien er meteen een stuk gelikter uit.
Het hulpprogramma PUSHINGBOX
Pushingbox is eigenlijk een interface tussen de Arduino en de Google spreadsheet. Dus we gaan tussen deze twee een aantal verbindingen leggen. Ik stel voor dat we de namen die we voor de speadsheet hebben gekozen ook hier weer aanhouden, want je moet al met zoveel dingen rekening houden, en ik houd het het liefst allemaal zo simpel mogelijk. Als we Pushingbox opstarten dan krijgen we het hieronderstaande scherm te zien.
Het eerste wat we nu moeten doen is inloggen met ons Google account. Als hebben ingelogd start pushingbox op met het dashboard scherm wat er als volgt uitziet. Als je pushingbox voor de eerste keer opstart dan zal deze opstarten met een vrijwel leeg scherm. Zoals je ziet heb ik al wat zitten spelen met pushingbox.
We beginnen altijd met het aanmaken van een nieuwe service door op “My services” te klikken. Op het dan geopende scherm klikken we op “Add a Service” om een nieuwe service aan te maken. We selecteren vervolgens voor “CostumURL”. Na het selekteren van deze service krijgen we weer een dialoogbox te zien waar we een drietal waardes moeten invullen.
Zoals afgesproken gebruiken we hier voor de naam van de CustomURL ook weer dezelfde naam die we ook gebruikt hebben voor ons formulier, en de spreadsheet, dus “Arduino grafiek” Daarna copieren we de gemodificeerde link van Google docs in het invulvak “Root URL” genaamd. Voor de duidelijkheid het gaat om deze link
https://docs.google.com/forms/d/1zyJB69 ... 8/viewform
En als laatste selekteren we als Methode “POST” voordat we op het submit knopje klikken. De ingevulde dialoog zal uit moeten zien zoals hieronder is aangegeven.
We hebben nu een nieuwe Service aangemaakt die pushingbox koppelt met ons Google Documenten formulier. De volgende stap is het aanmaken van een scenario. Een Scenario is een verzameling van de variabelen die vanaf te Arduino worden verstuurd. Let er op dat deze string een maximale lengte heeft van 256 bytes. In de meeste gevallen is dat ruim voldoende, maar als je net als ik een lijngrafiek met 11 lijnen wil maken kan dit makelijk niet toereikend zijn. Hoe is deze string nu opgebouwd? In deze string worden de variabelen gebruikt die we uit het HTML formulier hebben gehaald, en deze worden op hun beurt weer gekoppeld aan de variabelen die we in ons Arduino programma gebruiken. Laten we maar eens beginnen met het aanmaken van een scenario, dan wordt alles snel een stuk duidelijker. Klik op “my Scenarios” . Onderstaand scherm wordt nu geopend.
In het configuratie gedeelte gaan we eerst een naam verzinnen voor het nieuwe Scenario wat we gaan aanmaken. Let wel deze naam moet beginnen met de kleine letter “h”. In ons geval pakken we weer voor het gemak weer dezelfde naam die we steeds gebruiken, maar nu voorafgegaan door de kleine letter “h”, dus “hArduinoGrafiek” en klikken dan vervolgens op “Add”. Onderstaand scherm wordt geopend.
Er is nu een lege string aangemaakt met de naam DeviceID : vADA11BC401496BF Deze link hebben we later ook weer nodig in ons Arduino programma, zodat we weten waar we onze variabelen naar toe kunnen schrijven. Nu zijn we zo ver dat we onze variabelen gaan definieren. We gaan dus eigenlijk een link legen tussen de variabelen die in de Google spreadsheet wordt gebruikt, en de variabelen die we gebruiken in ons Arduino programma. De string moet uiteraard wel aan een aantal voorwaarden voldoen, zoals het koppelteken &, wat tussen de verschillende variabelen moet staan, en de $ tekens die de variabelen die wordt gebruikt in ons Arduino programma insluit. Laten we maar een op de knop Add an Action drukken, en eens kijken hoe er dit uit ziet.
Na nog een keer op Add an Action with this Service the klikken verschijnt de bovenstaande dialoog box en kunnen we onze variabelen regel gaan invullen. De variabelen die we gaan invoeren zal ik hier voor de duidelijkheid nog even noemen, maar bij je eigen programma hebben deze natuurlijk een andere naam.
Temp1 = entry.1055220030
Temp2 = entry.2019960831
Temp3 = entry.1460467657
De variabelen die we in ons Arduino programma gebruiken zijn devolgende:
Temp1 = temp1
Temp2 = temp2
Temp3 = temp3
Als we nu de koppel, en sluittekens toevoegen komt de regel er als volgt uit te zien.
entry.1055220030=$temp1$&entry.2019960831=$temp2$&entry.1460467657=$temp3$
Nadat we bovenstaande string bij data hebben ingevoerd klikken we nog een keer op enter. Het scenario wordt aangemaakt, en we zijn klaar met het instellen van Google spreadsheet en Pushingbox
Je kan het scenario ook testen door een keer op de testknop te drukken, maar daar heb ik weinig vertrouwen in, want ik heb enkele keren een tikfout gemaakt die niet door deze test werd gedetecteerd. Dus mijn advies is netjes werken, en er de tijd voor nemen.
Het eindresultaat
Om het allemaal uit te kunnen proberen heb ik snel een voorbeeld sketch in elkaar geprutst, en ik denk ook dat dit echt geen overbodige luxe is. Als extra zitten in deze sketch nog een paar grafische HTML voorbeelden waar je misschien ook nog wat aan hebt. Het eindresultaat ziet er ongeveer uit als onderstaand voorbeeld.
Op bovenstaand voorbeeld heb je de mogelijkheid om te beslissen welke kanalen je wilt monitoren, en aan de hand van je keuze wordt dit ook nog eens door een flinke LED weergegeven. De grafiek wordt maar eens in de 5 minuten geüpdatet, en deze tijd is vast, en kan volgens mij niet worden veranderd. Indien dit wel zo is dan hoor ik het graag. Verder heb ik het programma zo gemaakt dat de analoge waardes iedere minuut naar de spreadsheet worden geschreven.
Ik heb geprobeert om Google charts i.c.m. Arduino een beetje in pasklare hapjes te orderen.
Het doorgronden van Google Charts is niet echt makelijk, en ik denk dat je met deze tutorial een heel stuk verder komt.
Als afronding heb ik er ook nog een sketch bijgevoegd, zodat je ook kan zien hoe Google Charts in de praktijk kan worden toegepast.
Indien er animo voor is zal ik ook nog uitwerken hoe je meerdere Google Charts kan gebruiken etc.
Veel plezier met Google Charts!!
Google Charts gebruiken in combinatie met Arduino projecten.
Om google charts te kunnen toepassen in je Arduino projecten moet je relatief diep in deze materie duiken. Ik ben zelf weken bezig geweest om uit te pluizen hoe ik de data van mijn Arduino via de Google Charts kon weergeven. Nadat me dit uiteindelijk lukte kosten het me nog een paar weken om er achter te komen hoe ik meerdere grafieken kon beheren. Maar uiteindelijk is me dan dan toch, welleswaar met de hulp van 3de gelukt.
Globale beschrijving van de werking.
Via het gratis te gebruiken hulpprogramma Pushingbox worden degegevens b.v. iedere minuut, of om de 5 minuten vanaf de Arduino via de Pushingbox naar een EXCEL bestand van Google documents geschreven. D.m.v. de Google Charts software wordt deze data op de Arduino verwerkt, en wordt hier een script samengesteld dat vervolgens naar de Client wordt verstuurt. De Grafiek verschijnt dan op de vooraf bepaalde plaats op je HTML pagina. Deze grafiek wordt vervolgens iedere 5 minuten automatisch geupdate.
GOOGLE Documents
We gebruiken Google documents als een database. Deze database bevindt zich als het ware in de CLOUD. Hij bevindt zich dus niet op je harddisc, maar op een server die je vanaf iedere willekeurige lokatie kan benaderen.
Om met Google documents te kunnen werken moet je een Google account hebben. Indien je er nog geen hebt maak er dan een aan.
• Ga naar Google.
• Log in.
• Klik op het Apps symbool, het 4de pictogram van rechts.
• Klik op het drive pictogram.
Op het onderstaande screenshot zie je een overzicht van de bestanden die op de Google Drive staan. Je ziet dat er steeds twee bestanden met dezelfde naam op de drive staan. Het eerste bestand is het formulier waar we de variabelen een naam geven, en het tweede bestand is een Spreadsheet waarin iedere minuut, of om de 10 minuten automatisch de gegevens worden bijgewerkt.
Als je Google Drive voor de eerste keer gebruik zal deze nog leeg zijn. We gaan nu verder met het aanmaken van een nieuw formulier, en kies een logische naam b.v. “Arduino Lijngrafiek” . Nadat je op “CREATE” hebt geklikt verschijnt onderstaand scherm. Klik vervolgens op “FORM”. Daarna zie je onderstaande dialoogbox, waar je de naam van het formulier “Arduino Lijngrafiek” kan invullen, en indien gewenst voor een ander thema kan kiezen.
Nadat je bovenstaande opdrachten hebt uitgevoert klik je op “OK”, en verschijnt er op het scherm een dialoogbox waar je de grafiek data kan benoemen. Als het gaat om een single lijn grafiek dan vul je slechts een variablennaam in, in mijn geval ging het om een 11 lijns grafiek. Als voorbeeld gaan we uit van een drie lijns grafiek. Automatisch zal er op het spread sheet formulier ook een datum en tijd kolom worden aangemaakt. Hieronder een screenshot van de dialoogbox waar we de variabelen kunnen invoeren.
We gaan hier dus 3 tekst variabelen invoeren, Lijn1, Lijn2, en Lijn3. Als Type selekteren we in de combobox “TEXT”. Daarna klikken we op “Add Item”, en nadat we de derde variabelennaam hebben ingevoerd klikken we op “Done”. Nadat we onze drie variabelennamen van het type Tekst hebben ingevoerd ziet onze dialoogbox er als volgt uit.
Nu is het zo dat deze variabelen gelinkt moeten worden met pushingbox. Deze link wordt gecreerd door op de knop “Send form” te drukken. Deze link copieren we voorlopig even naar een notepad zodat we deze later kunnen gebruiken in het programma pushingbox. Hieronder een screenshot van het dialoogvenster waarop de link is weergegeven.
Als je de link hebt gecopieerd klik je op “Done”. Voordat we de link later kunnen gebruiken moeten we deze ook nog even aanpassen. De link ziet er in zijn geheel als volgt uit. https://docs.google.com/forms/d/1zyJB69 ... 8/viewform
Het laatste stukje van de link “viewform” gaan we veranderen in “formResponse”. Als je daarna op de knop view responses klikt krijg je de spreadsheet the zien waarin vier kolommen zijn aangemaakt, een voor de datum en tijd, en driekolommen voor de gegevens. De spreadsheet ziet er als volgt uit.
Als alles juist is uitgevoerd dan zal er iedere minuut, of om de 10 minuten automatisch een nieuwe regel met data worden toegevoegd. Deze data wordt later weer opgevraagd met behulp van ons Arduino programma. Om dit mogelijk te maken moeten we deze data gaan publiceren, ofwel vrijgeven. Als we dit later vergeten dan zien we op de plaats waar straks onze grafiek moet verschijnen de melding “ACCESS DENIED”. Hoewel we het op dit moment nog niet hoeven te doen ga ik nu al vast uitleggen hoe we toestemming kunnen geven tot het publiceren van onze gegevens. Vanuit onze spreadsheet klikken we op File, en vervolgens op “publice to the web”. Daarna zie je onderstaande dialoogbox. Klik op “Start publishing”, en daarna op “Close”.
Als laatste moeten we nog drie links ophalen die we later nodig hebben in ons hulp programma Pushingbox. Hiervoor gaan we naar ons formulier. Voor de duidelijkheid, we hebben nu een formulier genaamd “Arduino grafiek” en een spreadsheet “Arduino grafiek responses” aangemaakt. Dus we gaan nu naar het formulier door op het groene vierkantje van de Google drive te klikken, en daarna op het Arduino grafiek formulier. Vervolgens klikken we op “View live form” waarna onderstaande dialoogbox zal verschijnen.
Klik nu met de rechtermuisknop in het invulvak van "temp1", en vervolgens op” inspect element”. Je krijgt nu als het goed is een stukje HTML taal te zien waarin je de link kan vinden die je later in het pushingbox programma nodig hebt. In ons geval is dit “entry.1055220030”. Deze links noteer je ook voor “temp2”, en “temp3”. Hieronder een voorbeeld van de HTML code.
Dit is het voorlopig voor wat betreft onze Google spreadsheet. We gaan nu verder met het instellen van ons hulpprogramma Pushingbox. Hopelijk is nog niemand afgehaakt, want het eindresultaat is zeker de moeite waard, en je programma’s zien er meteen een stuk gelikter uit.
Het hulpprogramma PUSHINGBOX
Pushingbox is eigenlijk een interface tussen de Arduino en de Google spreadsheet. Dus we gaan tussen deze twee een aantal verbindingen leggen. Ik stel voor dat we de namen die we voor de speadsheet hebben gekozen ook hier weer aanhouden, want je moet al met zoveel dingen rekening houden, en ik houd het het liefst allemaal zo simpel mogelijk. Als we Pushingbox opstarten dan krijgen we het hieronderstaande scherm te zien.
Het eerste wat we nu moeten doen is inloggen met ons Google account. Als hebben ingelogd start pushingbox op met het dashboard scherm wat er als volgt uitziet. Als je pushingbox voor de eerste keer opstart dan zal deze opstarten met een vrijwel leeg scherm. Zoals je ziet heb ik al wat zitten spelen met pushingbox.
We beginnen altijd met het aanmaken van een nieuwe service door op “My services” te klikken. Op het dan geopende scherm klikken we op “Add a Service” om een nieuwe service aan te maken. We selecteren vervolgens voor “CostumURL”. Na het selekteren van deze service krijgen we weer een dialoogbox te zien waar we een drietal waardes moeten invullen.
Zoals afgesproken gebruiken we hier voor de naam van de CustomURL ook weer dezelfde naam die we ook gebruikt hebben voor ons formulier, en de spreadsheet, dus “Arduino grafiek” Daarna copieren we de gemodificeerde link van Google docs in het invulvak “Root URL” genaamd. Voor de duidelijkheid het gaat om deze link
https://docs.google.com/forms/d/1zyJB69 ... 8/viewform
En als laatste selekteren we als Methode “POST” voordat we op het submit knopje klikken. De ingevulde dialoog zal uit moeten zien zoals hieronder is aangegeven.
We hebben nu een nieuwe Service aangemaakt die pushingbox koppelt met ons Google Documenten formulier. De volgende stap is het aanmaken van een scenario. Een Scenario is een verzameling van de variabelen die vanaf te Arduino worden verstuurd. Let er op dat deze string een maximale lengte heeft van 256 bytes. In de meeste gevallen is dat ruim voldoende, maar als je net als ik een lijngrafiek met 11 lijnen wil maken kan dit makelijk niet toereikend zijn. Hoe is deze string nu opgebouwd? In deze string worden de variabelen gebruikt die we uit het HTML formulier hebben gehaald, en deze worden op hun beurt weer gekoppeld aan de variabelen die we in ons Arduino programma gebruiken. Laten we maar eens beginnen met het aanmaken van een scenario, dan wordt alles snel een stuk duidelijker. Klik op “my Scenarios” . Onderstaand scherm wordt nu geopend.
In het configuratie gedeelte gaan we eerst een naam verzinnen voor het nieuwe Scenario wat we gaan aanmaken. Let wel deze naam moet beginnen met de kleine letter “h”. In ons geval pakken we weer voor het gemak weer dezelfde naam die we steeds gebruiken, maar nu voorafgegaan door de kleine letter “h”, dus “hArduinoGrafiek” en klikken dan vervolgens op “Add”. Onderstaand scherm wordt geopend.
Er is nu een lege string aangemaakt met de naam DeviceID : vADA11BC401496BF Deze link hebben we later ook weer nodig in ons Arduino programma, zodat we weten waar we onze variabelen naar toe kunnen schrijven. Nu zijn we zo ver dat we onze variabelen gaan definieren. We gaan dus eigenlijk een link legen tussen de variabelen die in de Google spreadsheet wordt gebruikt, en de variabelen die we gebruiken in ons Arduino programma. De string moet uiteraard wel aan een aantal voorwaarden voldoen, zoals het koppelteken &, wat tussen de verschillende variabelen moet staan, en de $ tekens die de variabelen die wordt gebruikt in ons Arduino programma insluit. Laten we maar een op de knop Add an Action drukken, en eens kijken hoe er dit uit ziet.
Na nog een keer op Add an Action with this Service the klikken verschijnt de bovenstaande dialoog box en kunnen we onze variabelen regel gaan invullen. De variabelen die we gaan invoeren zal ik hier voor de duidelijkheid nog even noemen, maar bij je eigen programma hebben deze natuurlijk een andere naam.
Temp1 = entry.1055220030
Temp2 = entry.2019960831
Temp3 = entry.1460467657
De variabelen die we in ons Arduino programma gebruiken zijn devolgende:
Temp1 = temp1
Temp2 = temp2
Temp3 = temp3
Als we nu de koppel, en sluittekens toevoegen komt de regel er als volgt uit te zien.
entry.1055220030=$temp1$&entry.2019960831=$temp2$&entry.1460467657=$temp3$
Nadat we bovenstaande string bij data hebben ingevoerd klikken we nog een keer op enter. Het scenario wordt aangemaakt, en we zijn klaar met het instellen van Google spreadsheet en Pushingbox
Je kan het scenario ook testen door een keer op de testknop te drukken, maar daar heb ik weinig vertrouwen in, want ik heb enkele keren een tikfout gemaakt die niet door deze test werd gedetecteerd. Dus mijn advies is netjes werken, en er de tijd voor nemen.
Het eindresultaat
Om het allemaal uit te kunnen proberen heb ik snel een voorbeeld sketch in elkaar geprutst, en ik denk ook dat dit echt geen overbodige luxe is. Als extra zitten in deze sketch nog een paar grafische HTML voorbeelden waar je misschien ook nog wat aan hebt. Het eindresultaat ziet er ongeveer uit als onderstaand voorbeeld.
- Code: Alles selecteren
/*
Web Server
A simple web server that shows how to use Google Charts in combination with an Arduino board.
using an Arduino Wiznet Ethernet shield.
Circuit:
* Ethernet shield attached to pins 10, 11, 12, 13
* Analog inputs attached to pins A0 through A2 (optional)
created 01 Nov 2013
by Frans van Enschot
*/
#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>
#define SD_CARD_CD_DIO 4
char serverName[] = "api.pushingbox.com"; //pushingbox server
char devid[] = "vADA11BC401496BF"; //device id
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0xAA, 0xBB, 0xCC, 0xDD, 0xEE, 0xFF };
EthernetClient client;
IPAddress ip(192,168,178,55);
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
byte DocsGoogleServer[] = {213,186,33,19};
EthernetServer server(80);
boolean Line1On = true;
boolean Line2On = true;
boolean Line3On = true;
int AnalogChannel0;
int AnalogChannel1;
int AnalogChannel2;
String HTTP_req;
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
Serial.println(F("Initializing SD card..."));
//make sure that the default chip select pin is set to
//output, even if you don't use it:
pinMode(53, OUTPUT);//When using a Mega2560 pcb
pinMode(10, OUTPUT);//Always as OUTPUT when using an Ethernet pcb
digitalWrite(53, HIGH);//When using a Mega2560 pcb
digitalWrite(10, HIGH);//Always as OUTPUT when using an Ethernet pcb
//See if the card is present and can be initialized:
if (!SD.begin(SD_CARD_CD_DIO))
{
Serial.println(F("Card failed, or not present"));
return;//don't do anything more:
}
//start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}//setup
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();
HTTP_req += c;//save the HTTP request 1 char at the time
// 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'){
//if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(F("Refresh: 60")); // refresh the page automatically every 5 sec
client.println();
client.println(F("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>"));
client.println(F("<html xmlns='http://www.w3.org/1999/xhtml'>"));
client.println(F("<head>"));
client.println(F("<meta http-equiv='content-type' content='text/html; charset=utf-8' />"));
client.println(F("<script type='text/javascript' src='http://www.google.com/jsapi'></script>"));
client.println(F("<script type='text/javascript'>"));
client.println(F("google.load('visualization', '1', {packages: ['corechart']});"));
client.print(F("function drawVisualization() {"));
client.println(F("google.visualization.drawChart({"));
client.println(F("'containerId': 'Data_div',"));
client.println(F("'dataSourceUrl': 'https://docs.google.com/spreadsheet/pub?key=0AnT1UmSGoJZzdFFLV0Z2SGk4eEpJVXFNMXUzQ3IteFE',"));
client.println(F("'chartType': 'LineChart',"));
client.println(F("'options': {'title':'Temperatuursensoren aangesloten op A0 t/m A2','vAxis':{'title':'Gemeten temperaturen'},'hAxis':{'title':'Meettijd'}}});}"));
client.println(F("google.setOnLoadCallback(drawVisualization)"));
client.println(F("</script>"));
client.println(F("</head>"));
client.println(F("<body style='font-family: Ariel:border: 0 none;'>"));
UpdateParameters();
client.println(F("<form method='get'>"));
client.print(F("<h1 align=center>Demonstratie van een dynamische Google Grafiek</h1>"));
client.print(F("<hr><h3><table border='10' width='100%'>"));
client.print(F("<tr>"));
client.print(F("<td width='10%'><center>Kanalen</center></td>"));
client.print(F("<td width='80%'><center>Grafiek</center></td>"));
client.print(F("<td width='10%'><center>Signalering</center></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line1On)
client.print(F("<td height='120'><input type='checkbox' name='line1' checked='yes'> Temp 1 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line1'> Temp 1 </td>"));
client.print(F("<td rowspan='3'><div id='Data_div' style='width: 900px; height: 400px;'></div></td>"));
if (Line1On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line2On)
client.print(F("<td height='120'><input type='checkbox' name='line2' checked='yes'> Temp 2 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line2'> Temp 2 </td>"));
if (Line2On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line3On)
client.print(F("<td height='120'><input type='checkbox' name='line3' checked='yes'> Temp 3 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line3'> Temp 3 </td>"));
if (Line3On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("</table>"));
client.println(F("<hr>"));
client.println(F("<center><input type='submit' name='Submit' value='BekrachtigKeuzes'></center>"));
CollectGraphData();
client.println(F("</form>"));
client.println(F("</body>"));
client.println(F("</html>"));
HTTP_req="";//Finished with request empty string
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");
}
}//loop
void CollectGraphData()
{
String data;
char StrValue[4];
data ="temp1=";
if (Line1On){
AnalogChannel0 = analogRead(0);
dtostrf(AnalogChannel0,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp2=";
if (Line2On){
AnalogChannel1 = analogRead(1);
dtostrf(AnalogChannel1,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp3=";
if (Line3On){
AnalogChannel2 = analogRead(2);
dtostrf(AnalogChannel2,3,0,StrValue);
data +=StrValue;}
else
data +='0';
client.stop();
if (client.connect(DocsGoogleServer,80)) {
client.print(F("POST /pushingbox?devid="));
client.print(devid);
client.println(F(" HTTP/1.1"));
client.print(F("Host: "));
client.println(serverName);
client.println(F("User-Agent: Arduino"));
client.println(F("Content-Type:application/x-www-form-urlencoded"));
client.println(F("Connection: close"));
client.print(F("Content-Length: "));
client.println(data.length());
client.println();
client.println(data);
client.println();
Serial.println(F("Sending data"));}
else
Serial.println(F("connection failed"));
if (!client.connected()) {
Serial.println(F("Disconnecting."));
client.stop();
}
}//CollectGraphData
void UpdateParameters()
{
Line1On = HTTP_req.indexOf("line1=on") != -1;
Line2On = HTTP_req.indexOf("line2=on") != -1;
Line3On = HTTP_req.indexOf("line3=on") != -1;
}//UpdateParameters
Op bovenstaand voorbeeld heb je de mogelijkheid om te beslissen welke kanalen je wilt monitoren, en aan de hand van je keuze wordt dit ook nog eens door een flinke LED weergegeven. De grafiek wordt maar eens in de 5 minuten geüpdatet, en deze tijd is vast, en kan volgens mij niet worden veranderd. Indien dit wel zo is dan hoor ik het graag. Verder heb ik het programma zo gemaakt dat de analoge waardes iedere minuut naar de spreadsheet worden geschreven.
Advertisement
- nicoverduin
-
- Berichten: 5043
- Geregistreerd: 13 Mei 2013, 20:57
- Woonplaats: Heemskerk
Re: Tutorial Google Charts met werkende sketch
door nicoverduin » 01 Nov 2013, 20:51
Goed verhaal Frans. Jammer dat ze hier kennelijk geen sticky's hebben of een omgeving om dit soort tutorials te kunnen bewaren. Nu verdwijnt het uiteindelijk een keer op pagina 20 en ziet niemand het meer.
- firework_409
- Berichten: 4
- Geregistreerd: 04 Dec 2013, 21:15
Re: Tutorial Google Charts met werkende sketch
door firework_409 » 04 Dec 2013, 21:34
Hoi Frans,
Ziet er goed uit. Ga ik zeker proberen.
Alleen jammer dat de bijlagen niet leesbaar zijn, dat maakt lastiger om het goed werkend te krijgen (ik heb geen ervaring met formulieren e.d.).
Ik wil voor mijn houtcv kachel meerdere temperaturen van de boiler weergeven, om zo te zien wat er tijdens het stoken gebeurt.
Ziet er goed uit. Ga ik zeker proberen.
Alleen jammer dat de bijlagen niet leesbaar zijn, dat maakt lastiger om het goed werkend te krijgen (ik heb geen ervaring met formulieren e.d.).
Ik wil voor mijn houtcv kachel meerdere temperaturen van de boiler weergeven, om zo te zien wat er tijdens het stoken gebeurt.
- firework_409
- Berichten: 4
- Geregistreerd: 04 Dec 2013, 21:15
Re: Tutorial Google Charts met werkende sketch
door firework_409 » 11 Dec 2013, 14:31
Met de hulp van Frans ben ik al een eind gekomen, maar heb twee punten.
Ten eerste wordt er alleen data geupload als ik de webserver heb draaien, dus als ik op een van mijn computers de website draai op http://192.168.178.34/ (adres Arduino) wordt de google sheet aangevuld.
Ik kan mij niet voorstellen dat dit zo hoort, of wel?
Het andere punt is dat in mijn sheet met drie kolommen de eerste kolom niet gevuld wordt, dit zijn lege cellen.
ik heb er nog geen metingen aan hangen, omdat ik stapje voor stapje verder wil en dus eerst het uploaden goed wil hebben.
Om het niet te groot te maken hier een stukje van mijn code, maar ik wil ook alles doorsturen als dat nodig is.
void CollectGraphData()
{
String data;
char StrValue[4];
data ="temp_boven=";
if (Line1On){
AnalogChannel0 = analogRead(0);
dtostrf(AnalogChannel0,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_onder=";
if (Line2On){
AnalogChannel1 = analogRead(1);
dtostrf(AnalogChannel1,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_midden=";
if (Line3On){
AnalogChannel2 = analogRead(2);
dtostrf(AnalogChannel2,3,0,StrValue);
data +=StrValue;}
else
data +='0';
Ten eerste wordt er alleen data geupload als ik de webserver heb draaien, dus als ik op een van mijn computers de website draai op http://192.168.178.34/ (adres Arduino) wordt de google sheet aangevuld.
Ik kan mij niet voorstellen dat dit zo hoort, of wel?
Het andere punt is dat in mijn sheet met drie kolommen de eerste kolom niet gevuld wordt, dit zijn lege cellen.
ik heb er nog geen metingen aan hangen, omdat ik stapje voor stapje verder wil en dus eerst het uploaden goed wil hebben.
Om het niet te groot te maken hier een stukje van mijn code, maar ik wil ook alles doorsturen als dat nodig is.
void CollectGraphData()
{
String data;
char StrValue[4];
data ="temp_boven=";
if (Line1On){
AnalogChannel0 = analogRead(0);
dtostrf(AnalogChannel0,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_onder=";
if (Line2On){
AnalogChannel1 = analogRead(1);
dtostrf(AnalogChannel1,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_midden=";
if (Line3On){
AnalogChannel2 = analogRead(2);
dtostrf(AnalogChannel2,3,0,StrValue);
data +=StrValue;}
else
data +='0';
- nicoverduin
-
- Berichten: 5043
- Geregistreerd: 13 Mei 2013, 20:57
- Woonplaats: Heemskerk
Re: Tutorial Google Charts met werkende sketch
door nicoverduin » 11 Dec 2013, 19:08
Ik zou het wel volledig willen zien omdat jouw probleem vermoedelijk niet hier zit. en graag tussen de code blokken 
- firework_409
- Berichten: 4
- Geregistreerd: 04 Dec 2013, 21:15
Re: Tutorial Google Charts met werkende sketch
door firework_409 » 11 Dec 2013, 22:37
Hierbij de code, het is de code van Frans met enkele kleine aanpassingen. Deze zijn aangegeven met ******************
ik heb een serialprint(data) toegevoegd om te zien of de string wel goed is.
De serial output is alsvolgt:
Initializing SD card...
server is at 192.168.178.34
new client
temp_boven=0&temp_onder=1&temp_midden=0
Sending data
client disconnected
de data string is "temp_boven=0&temp_onder=1&temp_midden=0" lijkt mij goed.
de spreadsheet ziet er zo uit:
Tijdstempel temp_boven temp_onder temp_midden
10-12-2013 12:27:30 1 0
bij pushingbox isbij scenario's het volgende ingevuld.
"Data : entry_7495419750=$temp_boven$&entry_1805961824=$temp_onder$&entry_1278378379=$temp_midden$"
Mocht er zo 1, 2, 3 niets aanwijsbaars zijn, dan ga ik misschien morgen alles vanaf het begin over doen, ik moest even zoeken in het begin, dus misschien is er toch wat misgegaan
/*
Web Server
A simple web server that shows how to use Google Charts in combination with an Arduino board.
using an Arduino Wiznet Ethernet shield.
Circuit:
* Ethernet shield attached to pins 10, 11, 12, 13
* Analog inputs attached to pins A0 through A2 (optional)
created 01 Nov 2013
by Frans van Enschot
*/
#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>
#define SD_CARD_CD_DIO 4
char serverName[] = "api.pushingbox.com"; //pushingbox server
char devid[] = "v6C38E32F4062568"; //device id ***************mijn ID************
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0xAA, 0xBB, 0xCC, 0xDD, 0xEE, 0xFF };
EthernetClient client;
IPAddress ip(192,168,178,34);//********mijn IP *****************
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
byte DocsGoogleServer[] = {213,186,33,19};
EthernetServer server(80);
boolean Line1On = true;
boolean Line2On = true;
boolean Line3On = true;
int AnalogChannel0;
int AnalogChannel1;
int AnalogChannel2;
String HTTP_req;
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
Serial.println(F("Initializing SD card..."));
//make sure that the default chip select pin is set to
//output, even if you don't use it:
pinMode(53, OUTPUT);//When using a Mega2560 pcb
pinMode(10, OUTPUT);//Always as OUTPUT when using an Ethernet pcb
digitalWrite(53, HIGH);//When using a Mega2560 pcb
digitalWrite(10, HIGH);//Always as OUTPUT when using an Ethernet pcb
//See if the card is present and can be initialized:
if (!SD.begin(SD_CARD_CD_DIO))
{
Serial.println(F("Card failed, or not present"));
return;//don't do anything more:
}
//start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}//setup
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();
HTTP_req += c;//save the HTTP request 1 char at the time
// 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'){
//if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(F("Refresh: 60")); // refresh the page automatically every 5 sec
client.println();
client.println(F("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>"));
client.println(F("<html xmlns='http://www.w3.org/1999/xhtml'>"));
client.println(F("<head>"));
client.println(F("<meta http-equiv='content-type' content='text/html; charset=utf-8' />"));
client.println(F("<script type='text/javascript' src='http://www.google.com/jsapi'></script>"));
client.println(F("<script type='text/javascript'>"));
client.println(F("google.load('visualization', '1', {packages: ['corechart']});"));
client.print(F("function drawVisualization() {"));
client.println(F("google.visualization.drawChart({"));
client.println(F("'containerId': 'Data_div',"));
client.println(F("'dataSourceUrl': 'https://docs.google.com/spreadsheet/ccc?key=0AqTcn3R6xReGdFU5MFh5LVlaQ0RXOWRPek5SVHd0bHc&usp=drive_web#gid=0',"));
client.println(F("'chartType': 'LineChart',"));
//*****adres van mijn spreadsheet****
client.println(F("'options': {'title':'Temperatuursensoren aangesloten op A0 t/m A2','vAxis':{'title':'Gemeten temperaturen'},'hAxis':{'title':'Meettijd'}}});}"));
client.println(F("google.setOnLoadCallback(drawVisualization)"));
client.println(F("</script>"));
client.println(F("</head>"));
client.println(F("<body style='font-family: Ariel:border: 0 none;'>"));
UpdateParameters();
client.println(F("<form method='get'>"));
client.print(F("<h1 align=center>Demonstratie van een dynamische Google Grafiek</h1>"));
client.print(F("<hr><h3><table border='10' width='100%'>"));
client.print(F("<tr>"));
client.print(F("<td width='10%'><center>Kanalen</center></td>"));
client.print(F("<td width='80%'><center>Grafiek</center></td>"));
client.print(F("<td width='10%'><center>Signalering</center></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line1On)
client.print(F("<td height='120'><input type='checkbox' name='line1' checked='yes'> Temp 1 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line1'> Temp 1 </td>"));
client.print(F("<td rowspan='3'><div id='Data_div' style='width: 900px; height: 400px;'></div></td>"));
if (Line1On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line2On)
client.print(F("<td height='120'><input type='checkbox' name='line2' checked='yes'> Temp 2 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line2'> Temp 2 </td>"));
if (Line2On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line3On)
client.print(F("<td height='120'><input type='checkbox' name='line3' checked='yes'> Temp 3 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line3'> Temp 3 </td>"));
if (Line3On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("</table>"));
client.println(F("<hr>"));
client.println(F("<center><input type='submit' name='Submit' value='BekrachtigKeuzes'></center>"));
CollectGraphData();
client.println(F("</form>"));
client.println(F("</body>"));
client.println(F("</html>"));
HTTP_req="";//Finished with request empty string
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");
}
}//loop
void CollectGraphData()
{
String data;
char StrValue[4];
data ="temp_boven="; //*******namen aangepast*****
if (Line1On){
AnalogChannel0 = analogRead(0);
dtostrf(AnalogChannel0,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_onder=";
if (Line2On){
AnalogChannel1 = analogRead(1);
dtostrf(AnalogChannel1,3,0,StrValue);
data +=StrValue;}
else
data +='1'; //**********hier even een getal ingevuld om niet alleen maar nullen te hebben
data +="&temp_midden=";
if (Line3On){
AnalogChannel2 = analogRead(2);
dtostrf(AnalogChannel2,3,0,StrValue);
data +=StrValue;}
else
data +='0';
Serial.println(data);//********om te zien dat hij wel drie getallen heeft***
client.stop();
if (client.connect(DocsGoogleServer,80)) {
client.print(F("POST /pushingbox?devid="));
client.print(devid);
client.println(F(" HTTP/1.1"));
client.print(F("Host: "));
client.println(serverName);
client.println(F("User-Agent: Arduino"));
client.println(F("Content-Type:application/x-www-form-urlencoded"));
client.println(F("Connection: close"));
client.print(F("Content-Length: "));
client.println(data.length());
client.println();
client.println(data);
client.println();
Serial.println(F("Sending data"));}
else
Serial.println(F("connection failed"));
if (!client.connected()) {
Serial.println(F("Disconnecting."));
client.stop();
}
void UpdateParameters()
{
Line1On = HTTP_req.indexOf("line1=on") != -1;
Line2On = HTTP_req.indexOf("line2=on") != -1;
Line3On = HTTP_req.indexOf("line3=on") != -1;
}//UpdateParameters
ik heb een serialprint(data) toegevoegd om te zien of de string wel goed is.
De serial output is alsvolgt:
Initializing SD card...
server is at 192.168.178.34
new client
temp_boven=0&temp_onder=1&temp_midden=0
Sending data
client disconnected
de data string is "temp_boven=0&temp_onder=1&temp_midden=0" lijkt mij goed.
de spreadsheet ziet er zo uit:
Tijdstempel temp_boven temp_onder temp_midden
10-12-2013 12:27:30 1 0
bij pushingbox isbij scenario's het volgende ingevuld.
"Data : entry_7495419750=$temp_boven$&entry_1805961824=$temp_onder$&entry_1278378379=$temp_midden$"
Mocht er zo 1, 2, 3 niets aanwijsbaars zijn, dan ga ik misschien morgen alles vanaf het begin over doen, ik moest even zoeken in het begin, dus misschien is er toch wat misgegaan
/*
Web Server
A simple web server that shows how to use Google Charts in combination with an Arduino board.
using an Arduino Wiznet Ethernet shield.
Circuit:
* Ethernet shield attached to pins 10, 11, 12, 13
* Analog inputs attached to pins A0 through A2 (optional)
created 01 Nov 2013
by Frans van Enschot
*/
#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>
#define SD_CARD_CD_DIO 4
char serverName[] = "api.pushingbox.com"; //pushingbox server
char devid[] = "v6C38E32F4062568"; //device id ***************mijn ID************
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0xAA, 0xBB, 0xCC, 0xDD, 0xEE, 0xFF };
EthernetClient client;
IPAddress ip(192,168,178,34);//********mijn IP *****************
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
byte DocsGoogleServer[] = {213,186,33,19};
EthernetServer server(80);
boolean Line1On = true;
boolean Line2On = true;
boolean Line3On = true;
int AnalogChannel0;
int AnalogChannel1;
int AnalogChannel2;
String HTTP_req;
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
Serial.println(F("Initializing SD card..."));
//make sure that the default chip select pin is set to
//output, even if you don't use it:
pinMode(53, OUTPUT);//When using a Mega2560 pcb
pinMode(10, OUTPUT);//Always as OUTPUT when using an Ethernet pcb
digitalWrite(53, HIGH);//When using a Mega2560 pcb
digitalWrite(10, HIGH);//Always as OUTPUT when using an Ethernet pcb
//See if the card is present and can be initialized:
if (!SD.begin(SD_CARD_CD_DIO))
{
Serial.println(F("Card failed, or not present"));
return;//don't do anything more:
}
//start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}//setup
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();
HTTP_req += c;//save the HTTP request 1 char at the time
// 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'){
//if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(F("Refresh: 60")); // refresh the page automatically every 5 sec
client.println();
client.println(F("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>"));
client.println(F("<html xmlns='http://www.w3.org/1999/xhtml'>"));
client.println(F("<head>"));
client.println(F("<meta http-equiv='content-type' content='text/html; charset=utf-8' />"));
client.println(F("<script type='text/javascript' src='http://www.google.com/jsapi'></script>"));
client.println(F("<script type='text/javascript'>"));
client.println(F("google.load('visualization', '1', {packages: ['corechart']});"));
client.print(F("function drawVisualization() {"));
client.println(F("google.visualization.drawChart({"));
client.println(F("'containerId': 'Data_div',"));
client.println(F("'dataSourceUrl': 'https://docs.google.com/spreadsheet/ccc?key=0AqTcn3R6xReGdFU5MFh5LVlaQ0RXOWRPek5SVHd0bHc&usp=drive_web#gid=0',"));
client.println(F("'chartType': 'LineChart',"));
//*****adres van mijn spreadsheet****
client.println(F("'options': {'title':'Temperatuursensoren aangesloten op A0 t/m A2','vAxis':{'title':'Gemeten temperaturen'},'hAxis':{'title':'Meettijd'}}});}"));
client.println(F("google.setOnLoadCallback(drawVisualization)"));
client.println(F("</script>"));
client.println(F("</head>"));
client.println(F("<body style='font-family: Ariel:border: 0 none;'>"));
UpdateParameters();
client.println(F("<form method='get'>"));
client.print(F("<h1 align=center>Demonstratie van een dynamische Google Grafiek</h1>"));
client.print(F("<hr><h3><table border='10' width='100%'>"));
client.print(F("<tr>"));
client.print(F("<td width='10%'><center>Kanalen</center></td>"));
client.print(F("<td width='80%'><center>Grafiek</center></td>"));
client.print(F("<td width='10%'><center>Signalering</center></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line1On)
client.print(F("<td height='120'><input type='checkbox' name='line1' checked='yes'> Temp 1 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line1'> Temp 1 </td>"));
client.print(F("<td rowspan='3'><div id='Data_div' style='width: 900px; height: 400px;'></div></td>"));
if (Line1On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line2On)
client.print(F("<td height='120'><input type='checkbox' name='line2' checked='yes'> Temp 2 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line2'> Temp 2 </td>"));
if (Line2On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("<tr>"));
if (Line3On)
client.print(F("<td height='120'><input type='checkbox' name='line3' checked='yes'> Temp 3 </td>"));
else
client.print(F("<td height='120'><input type='checkbox' name='line3'> Temp 3 </td>"));
if (Line3On)
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/yinq655tf/red_led_on_th.png\" img align=middle width=120 height=120/></td>"));
else
client.print(F("<td height='120'><img src=\"http://s5.postimage.org/s7iipq4kz/red_led_off_th.png\" img align=middle width=120 height=120/></td>"));
client.print(F("</tr>"));
client.print(F("</table>"));
client.println(F("<hr>"));
client.println(F("<center><input type='submit' name='Submit' value='BekrachtigKeuzes'></center>"));
CollectGraphData();
client.println(F("</form>"));
client.println(F("</body>"));
client.println(F("</html>"));
HTTP_req="";//Finished with request empty string
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");
}
}//loop
void CollectGraphData()
{
String data;
char StrValue[4];
data ="temp_boven="; //*******namen aangepast*****
if (Line1On){
AnalogChannel0 = analogRead(0);
dtostrf(AnalogChannel0,3,0,StrValue);
data +=StrValue;}
else
data +='0';
data +="&temp_onder=";
if (Line2On){
AnalogChannel1 = analogRead(1);
dtostrf(AnalogChannel1,3,0,StrValue);
data +=StrValue;}
else
data +='1'; //**********hier even een getal ingevuld om niet alleen maar nullen te hebben
data +="&temp_midden=";
if (Line3On){
AnalogChannel2 = analogRead(2);
dtostrf(AnalogChannel2,3,0,StrValue);
data +=StrValue;}
else
data +='0';
Serial.println(data);//********om te zien dat hij wel drie getallen heeft***
client.stop();
if (client.connect(DocsGoogleServer,80)) {
client.print(F("POST /pushingbox?devid="));
client.print(devid);
client.println(F(" HTTP/1.1"));
client.print(F("Host: "));
client.println(serverName);
client.println(F("User-Agent: Arduino"));
client.println(F("Content-Type:application/x-www-form-urlencoded"));
client.println(F("Connection: close"));
client.print(F("Content-Length: "));
client.println(data.length());
client.println();
client.println(data);
client.println();
Serial.println(F("Sending data"));}
else
Serial.println(F("connection failed"));
if (!client.connected()) {
Serial.println(F("Disconnecting."));
client.stop();
}
void UpdateParameters()
{
Line1On = HTTP_req.indexOf("line1=on") != -1;
Line2On = HTTP_req.indexOf("line2=on") != -1;
Line3On = HTTP_req.indexOf("line3=on") != -1;
}//UpdateParameters
- firework_409
- Berichten: 4
- Geregistreerd: 04 Dec 2013, 21:15
Re: Tutorial Google Charts met werkende sketch
door firework_409 » 15 Dec 2013, 15:44
Opgelost, alles van voorafaan opnieuw ingesteld (google form, sheet en pushingbox), nu werkt het goed.
Nu alleen nog even kijken hoe ik kan zorgen dat hij niet alleen update als de webpagina open is.
Nu alleen nog even kijken hoe ik kan zorgen dat hij niet alleen update als de webpagina open is.
7 berichten
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 16 gasten