Analoge Anzeige von temperatur und luftfeuchte, windrichtung

Analoge Anzeige von temperatur und luftfeuchte, windrichtung

Beitragvon zdenko33 » 11. Januar 2015, 15:50

Hallo
Da es, bei mediola, nur eine werte anzeige gibt, das dann immer für einen datenpunkt, habe ich im internet gesucht, eine schöne analoge
anzeige, die möglichst viel darstellen könnte.
Die basis zum suchen waren wetter daten und darstellung.
Hier bin ich fundig geworden :)
http://wiki.sandaysoft.com/a/SteelSeries_Gauges
Da dieses an mehr an wetterstationen zugeschnitten ist, habe ich eine möglichkeit gesucht, wie ich meine werte,
in diesen hübschen anzeigern, angezeigt bekomme.
Dann bin ich auf diese seite gestossen, die fast meinen anforderungen passte (scripts usw)
http://www.eskofier.de/projekte/modellb ... darstellen

Hier wird auch eine (pywws) usb-wetterstation (auf raspberry pi), benutzt. Da ich keine habe, musste ich erstmal, die scripte etwas an die, der ccu anpassen.
Noch ein problem war die erstellung, aller werte (temperatur, luftfeuchte und die minimalen und maximalen werte) im json format.
Wieder gesucht, um mit php json daten aus arrays in eine datei zu schreibe. Habe alles gefunden und möchte denen,
die mittels mediola oder dashui, euere werte darstellen wollen (vorausgesetzt die gauge anzeigen gefallen euch :roll: ),
erklären-beschreiben.

Vorausetzung dafür ist eine pi, oder ein anderer server, wo apache läuft.
Zuerst erstellen wir ein verzeichnis, im www ordner der pi, z.b. /gauge_temp
Ich werde alle dateien bereitstellen, die hierfür nötig sind (von mir etwas angepasst), aber zuerst ein screenshot,
um zu sehen wie das dann aussieht :
Bildschirmfoto 2015-01-11 um 14.13.25.png


Dazu muss ich sagen dass man die dinger sehr schön und leicht anpassen kann,(farblich,wertlich usw...) diese anzeigen gibt es in allen
möglichen varianten, (z.b. eine schöne uhr für mediola oder dashui) am besten könnt ihr euch hier ansehen:
http://binicki.de/gauge/demoExtras.html
http://binicki.de/gauge/demoLcdSections.html
http://binicki.de/gauge/demoLightBulb.html
http://binicki.de/gauge/demoLinear.html
http://binicki.de/gauge/demoRadial.html
http://binicki.de/gauge/demoStopWatch.html
http://binicki.de/gauge/demoTrafficLight.html

Wer alles selber machen will, kann die gaugen von hier holen:
https://github.com/HanSolo/SteelSeries-Canvas

Auf jeden fall brauchen wir diese libs von obiger url:
tween-min.js und steelseries-min.js
in unserem ordner
Dann erstellen wir die index.php datei:
Code: Alles auswählen
    <!DOCTYPE HTML>
    <html>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Temperatur und Luftfeuchte"/>
        <meta name="keywords" content="aktuelles wetter"/>
        <title>CCU Temperatur und Luftfeuchte</title>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="expires" content="-1" />
        <meta http-equiv="Cache-control" content="no-cache" />
     
        <link rel="stylesheet" href="template.css" type="text/css" />
     
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     
        <script type="text/javascript">
            var sInitMode;
            sInitMode = 'GAUGES';
        </script>
     
        <!-- init and execution script for steelseries gauges -->
        <script language="JavaScript" src="http://pi/wetter/tween-min.js"></script>
        <script language="JavaScript" src="http://pi/wetter/steelseries-min.js"></script>


        <script language="JavaScript" src="http://pi/wetter/liveGaugesData.js"></script>
     
     </head>
     <body>
     
                <!-- show current data timestamp -->
            <div id="display_values">
                <div id="header">
                   
                               
                                <abbr id="weather_timestamp"></abbr>
                           
                </div>
                                 
                <!-- display steelseries gauges -->
                <div id="gauges">
                    <table width="100%" border="0" cellspacing="0" cellpadding="5">
                        <tr>
                            <td align="center">
                                <canvas id="canvasTempActual" width="201" height="201"></canvas>
                            </td>
                            <td align="center">
                                <canvas id="canvasHumidity" width="201" height="201"></canvas>
                            </td>
                        </tr>
                    </table>
                </div> <!-- end of steelseries gauges -->
     
            </div> <!-- end of div.display_values -->
     
       
     
     </body>
    </html>

die css datei für die index.php, um hintergrundfarben anzupassen,
template.css:

Code: Alles auswählen
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, span, a, table, td, form, img, li {
            margin: 0px;
            padding: 0px;
            font-family: Arial, Helvetica, sans-serif;
            font-style: normal;
            color: #000000;
    }
     
    h1
    {
            font-weight: bold;
            font-size: 14px;
    }
     
    h2, h3, h4, h5, h6
    {
            font-weight: bold;
            font-size: 12px;
     
    }
     
    html, body
    {
            font-size: 12px;
    background-color: #181818

    }
     
    p
    {
            margin: 0px;
            padding: 4px 4px 5px 5px;
    }
     
    #page
    {
            margin: 0px;
    }
     
    #display_values
    {
           
            padding: 0px;
            width: 0px;
    }
     
    #header
    {
            display:none;
           
            margin: 4px 0px 4px 0px !important;
            padding: 0px;
            width: 0px;
    }
     
    #gauges
    {
           
            background-color: #181818;
            margin: 4px 0px 4px 0px !important;
            padding: 5px 0px 0px 0px;
            width: 500px;
    }
     
    #charts
    {
      display:none;     
    background-color: rgb(245,245,245);
            padding: 0px;
            width: 0px;
    }


Jetzt brauchen wir eine gaugesdata.php (hier werden die werte aus der json datei mydata.json gelesen):
Code: Alles auswählen
    <?php
    session_cache_limiter('nocache');
    header('Expires: ' . gmdate('r', 0));
    header('Content-type: application/json');
    $weather_data = file_get_contents("mydata.json");
    echo json_encode($weather_data);
    ?>


dann erstellen wir die datei mydata.json mit folgendem inhalt:
diese datei müssen wir schreibrechte geben!!!!

Code: Alles auswählen
    [
        {
            "TEMP_IN": "19.80",
            "TEMP_IN_MIN_DAY": "13.50",
            "TEMP_IN_MAX_DAY": "23.00",
            "HUM_IN": "55",
            "HUM_IN_MIN_DAY": "44",
            "HUM_IN_MAX_DAY": "66"
        }
    ]


die werte sind, da ich nur innen wandthermostat habe:
temperatur innen, min temperatur am tag und max temperatur am tag,
sowie luftfeuchte innen, minimale und maximale luftfeuchte am tag.
Diese werte kann man leicht an eigene anpassen...

dann brauchen wir noch ein javascript: liveGaugesData.js
Code: Alles auswählen
    /*
     Initialize life gauges display for weather data.
     Based on Code from http://wiki.sandaysoft.com/a/SteelSeries_Gauges
     (c) 2013-08-29, Peter Eskofier
    */
    setInterval( "readWeather();", 20000 );
    // -------------------------------------------
    function setGauges(data)
    {
        // --------------------------------------------------
        // prepare variables to copy data from JSON Array
        var curWindDir, avgWindDir;
        var curTemp, maxTemp, minTemp;
        // --------------------------------------------------
        // parse JSON data from server request
        var myArray = jQuery.parseJSON(data);
        // --------------------------------------------------
        // put timestamp to page
        // this requires an element called "weather_timestamp" in the indes.php!
        //document.getElementById("weather_timestamp").innerHTML=myArray[0].DATE;
         
        // --------------------------------------------------
        // read data from JSON Array
        // humidity in
        curHum =  myArray[0].HUM_IN;
        minHum = myArray[0].HUM_IN_MIN_DAY;
        maxHum = myArray[0].HUM_IN_MAX_DAY;
         
        // temperatures
        curTemp = myArray[0].TEMP_IN;
        minTemp = myArray[0].TEMP_IN_MIN_DAY;
        maxTemp = myArray[0].TEMP_IN_MAX_DAY;
             
        // -------------------------------------------------
        // now set values in gauges
        humActual.setValueAnimated(curHum);
        humActual.setMinMeasuredValue(minHum);
        humActual.setMaxMeasuredValue(maxHum);
         
        tempActual.setValueAnimated(curTemp);
        tempActual.setMinMeasuredValue(minTemp);
        tempActual.setMaxMeasuredValue(maxTemp);
    };
    // --------------------------------------------
    // get actual values from server json file
    // and set data in gauges
    function readWeather()
    {
            $.getJSON( "gaugesdata.php", setGauges);
    };
    // --------------------------------------------
    // init gauges
    function initGauges()
    {
        var gaugeFrameDesign = steelseries.FrameDesign.CHROME;
        var gaugeBackgroundColor = steelseries.BackgroundColor.BEIGE;
        var gaugeSize = 201;
        // Define some sections
        var sectionsTemperature = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
                        steelseries.Section(0, 30, 'rgba(150, 220, 0, 0.3)'),
                        steelseries.Section(30, 65, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(65, 100, 'rgba(240, 10, 0, 0.3)')],
    sectionsTemperature1 = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
                        steelseries.Section(0, 15, 'rgba(240, 10, 0, 0.3)'),
       steelseries.Section(15, 19, 'rgba(150, 220, 0, 0.3)'),
                        steelseries.Section(19, 25, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(25, 100, 'rgba(240, 10, 0, 0.3)')],


            sectionsHumid = [steelseries.Section(0, 20, 'rgba(130, 40, 230, 0.3)'),
                        steelseries.Section(20, 80, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(80, 100, 'rgba(240, 10, 0, 0.3)')],
                         
            // Define one area
            areasWind = [steelseries.Section(0, 1, 'rgba(220, 0, 0, 0.3)')],
         
            // Define value gradient for bargraph
            valGrad = new steelseries.gradientWrapper(  0,
                                                        100,
                                                        [ 0, 0.33, 0.66, 0.85, 1],
                                                        [ new steelseries.rgbaColor(0, 0, 200, 1),
                                                          new steelseries.rgbaColor(0, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 200, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1),
                                                          new steelseries.rgbaColor(200, 0, 0, 1) ]);
         
        // --------------------------------------------------
        // Actual humidity gauge
        humActual = new steelseries.Radial('canvasHumidity',
        {
            size: gaugeSize,
            section: sectionsTemperature,
            frameDesign: gaugeFrameDesign,
            pointerType: steelseries.PointerType.TYPE2,
            pointerColor: steelseries.ColorDef.BLUE,
            backgroundColor: gaugeBackgroundColor,
            titleString: 'Luftfeuchte',
            unitString: '\u0025',
            lcdVisible: true,
            minValue: 0,
            maxValue: 100,
            thresholdVisible: false,
            ledVisible: false,
            lcdDecimals: 2,
            minMeasuredValueVisible: true,
            maxMeasuredValueVisible: true
        });
        humActual.setMinMeasuredValue(0);
        humActual.setMaxMeasuredValue(0);
        humActual.setValue(0);
       
         
        // --------------------------------------------------
        // Actual inside tempurature gauge
        tempActual = new steelseries.Radial('canvasTempActual',
        {
            size: gaugeSize,
            section: sectionsTemperature1,
            frameDesign: gaugeFrameDesign,
            pointerType: steelseries.PointerType.TYPE2,
            pointerColor: steelseries.ColorDef.BLUE,
            backgroundColor: gaugeBackgroundColor,
            titleString: 'Temperatur',
            unitString: '\u00B0C',
            lcdVisible: true,
            minValue: -5,
            maxValue: 40,
            thresholdVisible: false,
            ledVisible: false,
            lcdDecimals: 2,
            minMeasuredValueVisible: true,
            maxMeasuredValueVisible: true
        });
        tempActual.setMinMeasuredValue(0);
        tempActual.setMaxMeasuredValue(0);
        tempActual.setValue(0);
         
    };
    // --------------------------------------------
    // init page -> enable gauges and load current values from JSON file
    function initPage(initMode)
    {
        if (initMode == "GAUGES")
        {
            initGauges();
        }
        readWeather();
    };
    // --------------------------------------------
    // do after page was load
    window.onload = function () { initPage(sInitMode); };

hier werden die werte an unsere anzeigen übergeben, hier werden die gaugen angepasst, sowie initialisiert.

und noch die datei writedata.php
Code: Alles auswählen
    <?php

    // check if all form data are submited, else output error message
    if(isset($_GET['TEMP_IN']) && isset($_GET['TEMP_IN_MIN_DAY']) && isset($_GET['TEMP_IN_MAX_DAY']) && isset($_GET['HUM_IN'])&& isset($_GET['HUM_IN_MIN_DAY'])&& isset($_GET['HUM_IN_MAX_DAY'])) {
      // if  empty, outputs message, else, gets their data
      if(empty($_GET['TEMP_IN']) || empty($_GET['TEMP_IN_MIN_DAY']) || empty($_GET['TEMP_IN_MAX_DAY']) || empty($_GET['HUM_IN']) || empty($_GET['HUM_IN_MIN_DAY']) || empty($_GET['HUM_IN_MAX_DAY'])) {
        echo 'Not all data submited';
      }
      else {
        // gets and adds form data into an array
        $formdata = array(
          'TEMP_IN'=> $_GET['TEMP_IN'],
          'TEMP_IN_MIN_DAY'=> $_GET['TEMP_IN_MIN_DAY'],
          'TEMP_IN_MAX_DAY'=> $_GET['TEMP_IN_MAX_DAY'],
          'HUM_IN'=> $_GET['HUM_IN'],
          'HUM_IN_MIN_DAY'=> $_GET['HUM_IN_MIN_DAY'],
          'HUM_IN_MAX_DAY'=> $_GET['HUM_IN_MAX_DAY'],
          'HUM_IN'=> $_GET['HUM_IN'],
        );

       // encodes the array into a string in JSON format (JSON_PRETTY_PRINT - uses whitespace in json-string, for human readable)
     
     $arr_data[] =$formdata;
    $jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);
        // saves the json string in "mydata.json" (in  folder)
        // outputs error message if data cannot be saved
        if(file_put_contents('mydata.json', $jsondata)) echo 'Data successfully saved';
        else echo 'Unable to save data in "mydata.json"';
      }
    }
    else echo 'data not submited';
    ?>

an dieses script werden unsere daten mittels cuxd übergeben, und dann in mydata.json wieder geschrieben.

Um es zu testen reicht ein script in der ccu :
Code: Alles auswählen
    var tempin = "19.80";
    var tempmin = "13.50";
    var tempmax = "23.00";
    var hudin = "55";
    var hudmin = "44";
    var hudmax = "66";

    var url = "http://pi/wetter/writedata.php?TEMP_IN="#tempin#"&TEMP_IN_MIN_DAY="#tempmin#"&TEMP_IN_MAX_DAY="#tempmax#"&HUM_IN="#hudin#"&HUM_IN_MIN_DAY="#hudmin#"&HUM_IN_MAX_DAY="#hudmax#"";
    var cURL="LD_LIBRARY_PATH=/usr/local/addons/cuxd /usr/local/addons/cuxd/curl";
    dom.GetObject("CUxD.CUX2801001:2.CMD_EXEC").State(cURL#" -s -m 5 '"#url#"'");
    WriteLine(tempin);


vom browser aus geht es dann so:
http://pi/gauge_temp/writedata.php?TEMP ... MAX_DAY=61
wo pi, die ip adresse der pi ist..

Natürlich muss man diese beispiel variablen, mit richtigen variablen befüllen :)
kann man in ein script einbauen und dann im programm das jede minute läuft, die daten mit cuxd weiter geben an writedata.php
mit kleinen anpassungen kann man nur, die aktuele temperatur, sowie luftfeuchte darstellen.
Wichtig ist dass man alle werte in der zeile:

Code: Alles auswählen
    http://pi/gauge_temp/writedata.php?TEMP_IN=21.7&TEMP_IN_MIN_DAY=17.2&TEMP_IN_MAX_DAY=22.4&HUM_IN=55&HUM_IN_MIN_DAY=48&HUM_IN_MAX_DAY=61

übergibt. Wer nur die temperatur und luftfeuchte anzeigen möchte, muss die writedata.php, und liveGaugesData.js, entsprechend ändern...
Möglich ist mit noch einer gauge, die werte für gestern darzustellen.

Die werte für min und max temperatur, sind die kleinen dreiecke in den gaugen, auf dem bild.
Die farben für bestimmte werte z.b. -5-0 grad, 0-15 grad usw. sowie für luftfeuchte von 0-30 % 30-65% und 65%-100% sind hier, in liveGaugesData.js, zu editieren
Code: Alles auswählen
    // Define some sections
        var sectionsTemperature = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
                        steelseries.Section(0, 30, 'rgba(150, 220, 0, 0.3)'),
                        steelseries.Section(30, 65, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(65, 100, 'rgba(240, 10, 0, 0.3)')],
    sectionsTemperature1 = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
                        steelseries.Section(0, 15, 'rgba(240, 10, 0, 0.3)'),
       steelseries.Section(15, 19, 'rgba(150, 220, 0, 0.3)'),
                        steelseries.Section(19, 25, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(25, 100, 'rgba(240, 10, 0, 0.3)')],


mit in rgba werten: 240, 10, 0 ist grün

ich hoffe es hilft jemandem um eigene werte, meine meinung nach, schön darzustellen :roll:

In mediola einfach webseitenelement mit dieser url erstellen:
Code: Alles auswählen
http://pi/gauge_temp/index.php

pi ist die ip adresse der pi, oder anderen server...

hier noch die gauge_temp.zip für die, die es gleich ausprobieren wollen, ohne den code zu kopieren, ohne die dateien selber zu erstellen.

gauge_temp.zip
zdenko33
 
Beiträge: 253
Registriert: 8. Dezember 2014, 20:52

Zurück zu mediola a.i.o. creator

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste

cron