Seite 3 - Seite 3

Seite 3 von 5

Jetzt ist der Punkt erreicht, wo es daran geht die Einstiegsseite für unsere Wetterstation zu bauen!

Damit die Seite schön angezeigt wird und die Formatierung an einer zentralen Stelle erfolgt, wird jetzt die Datei "template.css" im Unterverzeichnis "css" mit folgendem Inhalt erstellt:

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: rgb(102,102,102);
}

h1
{
        font-weight: bold;
        font-size: 14px;
}

h2, h3, h4, h5, h6
{
        font-weight: bold;
        font-size: 12px;

}

html, body
{
        font-size: 12px;
}

p
{
        margin: 0px;
        padding: 4px 4px 5px 5px;
}

#page
{
        margin: 5px;
}

#display_values
{
        background-color: rgb(245,245,245);
        padding: 2px;
        width: 746px;
}

#header
{
        border-radius: 4px;
        border: 2px solid #4572A7;
        background-color: #EFF2FB;
        margin: 4px 0px 4px 0px !important;
        padding: 0px;
        width: 740px;
}

#gauges
{
        border-radius: 4px;
        border: 2px solid #4572A7;
        background-color: #EFF2FB;
        margin: 4px 0px 4px 0px !important;
        padding: 5px 0px 0px 0px;
        width: 740px;
}

#charts
{
        background-color: rgb(245,245,245);
        padding: 0px;
        width: 750px;
}

Zum Schluss kommt noch die "index.php" Datei, welche in das doc root Verzeichnis des Webservers. Diese wird ausgeführt, sobald im Browser die URL des Webservers aufgerufen wird (also hier die des Raspberry Pi).

<!DOCTYPE HTML>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Meine Wetterstation"/>
    <meta name="keywords" content="aktuelles wetter"/>
    <title>Meine Wetterstation</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="/css/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="/js/lib/tween-min.js"></script>
    <script language="JavaScript" src="/js/lib/steelseries-min.js"></script>
    <script language="JavaScript" src="/js/liveGaugesData.js"></script>

 </head>
 <body>

    <div id="page">

        <!-- show current data timestamp -->
        <div id="display_values">
            <div id="header">
                <table>
                    <tr>
                        <td>
                            Datensatz vom:</br>
                            <abbr id="weather_timestamp"></abbr>
                        </td>
                    </tr>
                </table>
            </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="canvasWind_direction" width="201" height="201"></canvas>
                        </td>
                    </tr>
                </table>
            </div> <!-- end of steelseries gauges -->

        </div> <!-- end of div.display_values -->

    </div> <!-- end of div.page -->

 </body>
</html>

Wird jetzt im Borwser die URL des Raspberry aufgerufen, dann sollte das Ganze in etwa so aussehen:

pywws Daten mit Steelseries Gauges darstellen

Für jeden weiteren Wert der mit den Gauges dargestellt werden soll, muss folgendes gemacht werden:

in der Datei "liveGaugesData.js" muss in der Funktion "initGauges" eine weitere Code Sequenz für die Initialisierung der zusätzlichen Uhr eingefügt werden.
in der Datei "liveGaugesData.js" muss in der Funktion "setGauges(data)" ein Mapping der Werte aus den JSON Array auf die Gauges Variablen eingefügt werden
in der Datei "index.php" muss in der Tabelle für das Anzeigegitter der Gauges eine neue Zelle eingefügt und eine Verknüpfung zum Gauges Objekt in der liveGaugesData.js Datei eingefügt werden.

Kleiner Hinweis zum Thema CDN für die JQuery Bibliothek:

In der index.php wird die JQuery Bibliothek über eine CDN URL referenziert. Das bewirkt, dass die Bibliothek vom Browser nicht vom Raspberry geladen wird, sondern von einem CDN Webserver im Internet, der am nächsten zum Nutzer der Website steht. D. h. der Browser ruft die URL auf und über einen automatischen Mechanismus wird die Bibliothek vom nächstgelegenen Server geliefert, der diese auch bereitstellt.

Wenn die Wetterstation aber "offline", also nur über das eigene interne Netz bereitgestellt wird und keine Verbindung zur Aussenwelt besteht, so muss die Bibliothek "jquery-1.10.1.min.js" lokal auf den RasPi abgelegt werden. Das geht z. B. indem von folgender Website https://code.jquery.com/jquery/ die Datei mit Rechtsklick und "Ziel speichern unter" auf den eigenen Rechner heruntergeladen wird. Je nachdem, ob der Abruf direkt auf dem RasPi oder über einen anderen Rechner erfolgte, muss die Datei noch in das Webverzeichnis übertragen werden.

Da ggf. noch weitere Bibliotheken folgen (z. B. Highcharts) ist es eine gute Idee ein Untervezeichnis "lib" unterhalb von "js" anzulegen. Anschliessend wird die JQuery Datei dorthin kopiert. Jetzt muss nur noch in der index.php folgende Zeile:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

durch folgende ersetzt werden:

<script src="/js/lib/jquery-1.10.1.min.js"></script>

Wer experimentierfreudig ist, kann natürlich auch eine der neueren JQuery Bibliotheken ausprobieren. ;-)

Wetterdaten von pywws mit Steelseries Gauges und Highcharts darstellen - Seite 3