Omzetten JS naar Bootstrap

[krisken]

Beste UB'ers

Vorig weekend heb ik nog eens een oud projectje van onder het stof gehaald : temperatuurmonitoring met een raspberry pi. Over de werking heb ik geen klagen, maar de weergave van het geheel is niet geheel volgens mijn zin. Alles gebeurd namelijk via JS, en dit zou ik graag veranderd zien naar bootstrap...

1. De oorsprong
Raspberry 01 : http://temp01.mytemp.be/index.php?w=shed
Raspberry 02 : http://temp02.mytemp.be/index.php?w=shed
De gele bol (Outside Sun) : daar moet je niet op letten. Oorspronkelijk was het script bedoeld voor te werken met 3 temperatuursensors per raspberry pi, ik gebruik er hier maar twee.
VOORDEEL : je kan het temperatuurverloop bekijken per 1 dag, 2 dagen, 3 dagen, 4 dagen, 5 dagen, 6 dagen, 7 dagen, 30 dagen
NADEEL : zoals je ziet klopt het uur totaal niet : het loopt altijd 2 uur voor

2. De veranderde versie
Beide raspberry's in één view : http://www.mytemp.be/index.php
Een aantal maand geleden heb ik deze versie laten maken.
VOORDEEL : je ziet de temperatuur van beide raspberry pi's in één oogopslag
NADEEL : reclame "chart by amcharts.com" (gratis versie), het uur klopt nog steeds totaal niet, de index links (°C) geeft hij niet correct weer.

3. Wat ik wil
Ik zit te denken om beide raspberry pi's in één view te houden (zoals bij de veranderde versie), maar ipv de hele JS statistiek om dit via een bootstrap te doen (voorbeeld : http://wrapbootstrap.com/preview/WB0JLR295 zie bovenaan scherm). Daar de data van de raspberry pi's toch in een MySQL database zit vermoed ik dat dit perfect mogelijk is (let op : per raspberry pi is er een aparte database. In dit geval zijn er dus 2 databases!).
VOORDEEL : alles is HTML, gemakkelijker dus om bijvoorbeeld nog een raspberry pi toe te voegen, geen vervelende reclame
NADEEL : ik verlies de vertikale balk welke kan zeggen hoeveel graden het was bij alle 4 de sensors op een bepaald uur (geen prob)
OPGELET : ik zie maar één probleem en dat is bij de overgang winteruur/zomeruur. In oktober gaat het steeds van 3u terug naar 2u, in maart van 2u vooruit naar 3u. Ik zou bij de overgang naar het winteruur de data van 2u tot 3u deleten, en verder meten vanaf het "nieuwe" uur. Met de overgang naar zomertijd zou ik de lijn doortrekken van 2u tot 3u.

4. Hoe werkt het precies
De raspberry pi roept elke 2 minuten via python (+cronjob) een PHP script aan op de server. Daar roept hij dan de database op, en plaatst daarin de gemeten waarden (temp1, temp2, temp3). Het vierde veld (create_at) vermeld de datum/uur dat de server de informatie heeft binnen gekregen.
Zoals je ziet is de waarde van temp2 in 99% van de gevallen gelijk aan temp3. Gewoon omdat ik 2x dezelfde sensor in het script heb gezet. Iemand met de nodige know-how in python en php mag dit wat bij betreft er gerust uit doen, zodat er maar 2 sensors gemeten worden. Dit is echter geen must! Screenshot database : http://www.mytemp.be/images/tempdb.png

Wie heeft er zin of ziet dit zitten
Vragen? Shoot!

[ubremoved_539]

OPGELET : ik zie maar één probleem en dat is bij de overgang winteruur/zomeruur. In oktober gaat het steeds van 3u terug naar 2u, in maart van 2u vooruit naar 3u. Ik zou bij de overgang naar het winteruur de data van 2u tot 3u deleten, en verder meten vanaf het "nieuwe" uur. Met de overgang naar zomertijd zou ik de lijn doortrekken van 2u tot 3u.

Gewoon je data in UTC loggen.

[meon]

3. Wat ik wil
Ik zit te denken om beide raspberry pi's in één view te houden (zoals bij de veranderde versie), maar ipv de hele JS statistiek om dit via een bootstrap te doen (voorbeeld : http://wrapbootstrap.com/preview/WB0JLR295 zie bovenaan scherm). Daar de data van de raspberry pi's toch in een MySQL database zit vermoed ik dat dit perfect mogelijk is (let op : per raspberry pi is er een aparte database. In dit geval zijn er dus 2 databases!).
VOORDEEL : alles is HTML, gemakkelijker dus om bijvoorbeeld nog een raspberry pi toe te voegen, geen vervelende reclame
NADEEL : ik verlies de vertikale balk welke kan zeggen hoeveel graden het was bij alle 4 de sensors op een bepaald uur (geen prob)

Euh, de grafiek in dat bootstrap template dat je linkt staat los van het template. Bootstrap is trouwens ook JS (via jQuery) + CSS.
Dergelijke grafieken worden nog altijd via HTML5 canvas of SVG gegenereerd via Javascript hoor. Ik snap niet wat je wil oplossen .
Zelf gebruik ik voor grafieken gewoon de Google Charts API: https://developers.google.com/chart/int ... /linechart .

[8balljunkie]

Bootstrap is maar een framework om makkelijk layouts te genereren en is responsive van uit de doos, je kan het vergelijken met Material design van Google.
Grafieken ga je altijd zelf moeten doen zoals @meon zegt HTML5 canvas of SVG, maar je pakt best een externe JS library zoals http://www.chartjs.org/
Ze hebben daar een goeie documentatie die je goed op weg moet helpen.

[qless]

Waarom via een cronjob dingen ophalen als die 2e ook al een webserver is? Gewoon de browser zelf 't laten ophalen met een AJAX call (of nog mooier, websocket)

[krisken]

How how how momentje mannen Ik ken een beetje HTML, met een zeer klein beetje PHP maar al de rest is mij hier chinees hoor

@qless : doordat de raspberry een PHP script oproept via de webserver kan deze ook achter NAT staan. Zo kan je een raspberry pi neerpoten waar je wilt. Als hij kan connecten naar het internet, dan werkt het. Of begrijp ik je nu verkeerd?

[qless]

Dan nog zou een push mooier zijn naar je centrale databak... Dan kun je (tientallen) pi's neerzetten die alles dumpen in centrale db...daar mooie website (bootstrap + nodejs + websocket) op en ta-da

[ubremoved_539]

Dan nog zou een push mooier zijn naar je centrale databak...

En in dat opzicht zou ik dan eens kijken naar http://mqtt.org/

[krisken]

Dan nog zou een push mooier zijn naar je centrale databak... Dan kun je (tientallen) pi's neerzetten die alles dumpen in centrale db...daar mooie website (bootstrap + nodejs + websocket) op en ta-da

Dit is het hele scriptje dat draait op de RPI. Het is wel nog de versie welke gemaakt is voor 3 sensors (dus laatste sensor 2x uitgelezen, wat soms wel iets kan schelen fyi).

Code: Selecteer alles

import requests
import hashlib
import time

import sys;
reload(sys);
sys.setdefaultencoding("utf8")

#Dont forget to fill in PASSWORD and URL TO saveTemp (twice) in this file

sensorids = ["28-021463301bff", "28-0314620bafff", "28-0314620bafff"]

avgtemperatures = []
for sensor in range(len(sensorids)):
        temperatures = []
        for polltime in range(0,3):
                text = '';
                while text.split("\n")[0].find("YES") == -1:
                        # Open the file that we viewed earlier so that python can see what is in it. Replace the serial number as before.
                        tfile = open("/sys/bus/w1/devices/"+ sensorids[sensor] +"/w1_slave")
                        # Read all of the text in the file.
                        text = tfile.read()
                        # Close the file now that the text has been read.
                        tfile.close()
                        time.sleep(1)

                # Split the text with new lines (\n) and select the second line.
                secondline = text.split("\n")[1]
                # Split the line into words, referring to the spaces, and select the 10th word (counting from 0).
                temperaturedata = secondline.split(" ")[9]
                # The first two characters are "t=", so get rid of those and convert the temperature from a string to a number.
                temperature = float(temperaturedata[2:])
                # Put the decimal point in the right place and display it.
                temperatures.append(temperature / 1000)

        avgtemperatures.append(sum(temperatures) / float(len(temperatures)))
print avgtemperatures[0]
print avgtemperatures[1]
print avgtemperatures[2]

session = requests.Session()
nonce = session.get(url='http://eenhiddenurl.mytemp.be/saveTemp.php?w=enhierkomtnogiets').text

response = hashlib.sha256(nonce + 'PASSWORD' + str(avgtemperatures[0]) + str(avgtemperatures[1]) + str(avgtemperatures[2])).hexdigest()

post_data = {'temp1':avgtemperatures[0], 'temp2': avgtemperatures[1], 'temp3': avgtemperatures[2]}

post_request = session.post(url='http://temp02.mytemp.be/saveTemp.php?w=shed', data=post_data)

if post_request.status_code == 200 :
        print post_request.text