Siemens AWL mit Javascript / PHP abfragen

Lostb1ker · 1. Juni 2015

PHP habe ich lieber als Javascript - also vom schreiben und verstehen - gerne... gucks mir gleich mal an.

EDIT: ... glaube nicht so recht, dass ich da was ändern kann, suche aber weiter...

wolf · 1. Juni 2015

Keine sorge, verwenden trotzdem weiter JS, dann hat man nämlich keine lästigen reloads
Aber mal eine Dumme frage, der Simens-server kann doch ne HTML seite ausliefern? dann tu das Javascript doch einfach in der HTML Datei des Servers belassen und wir arbeiten dort weiter.. also mir ist es wurscht

Lostb1ker · 1. Juni 2015

welches Javascipt meinst du?

wolf · 1. Juni 2015

Naja, das wir dann erstellen.. das geht schon oder?

Lostb1ker · 1. Juni 2015

jo, baue gerade eine Seite um.
Aus performance-Gründen musste ich die HTML, welche im Jsonp-Format die verschiedenen Zustände ausgeben, aufteilen. Dadurch habe ich eine Datei pro Raum. Selbst so, erhalte ich meinen Zustand für den jeweiligen Raum nach 1-2 Sekunden... Vorher waren es über 5 Sekunden. Schnell ist was anderes. Aber ich baue mal eine Seite fertig und stell sie dann mal rein. Denke, dass man das noch kompakter schreiben kann. Aber ich bau erstmal.

Danke für deine Hilfe! Hätte nicht gedacht, dass ich so eine gute Hilfe finde!

wolf · 1. Juni 2015

Schreib mal wenn du mit den Dateien fertig bist.. und wie deine Entscheidung ausgefallen ist WO das Script zum Anzeigen liegen soll (System oder Webserver)

Lostb1ker · 1. Juni 2015

Also... hier mal eine komplett fertige Seite:

HTML

<?php
include "../PHP/Funktionen.php";
HTML_Kopf('EG','Aussenbereich');
?>




<script>

  $(document).ready(function() {
  setInterval(function() {
  $.ajax({
        url : "http://192.168.???.???/awp/Haus/Status/Status_EG_AB.html",
        dataType:"jsonp",
        jsonp:"mycallback",
        jsonpCallback: 'jsonCallback_EG_AB',
        success:function(data)
        {

            $("#AB_LE01_Leistung").html('<img src="../Images/Status0' + data.EG_AB_LE01_Leistung + '.gif" width="30" />'); 
            $("#AB_LE01_1Schalter").html('<img src="../Images/Status0' + data.EG_AB_LE01_1Schalter + '.gif" width="30" />');
            $("#AB_LE01_2Schalter").html('<img src="../Images/Status0' + data.EG_AB_LE01_2Schalter + '.gif" width="30" />');

            $("#AB_LE07_Leistung").html('<img src="../Images/Status0' + data.EG_AB_LE07_Leistung + '.gif" width="30" />'); 
            $("#AB_LE07_1Schalter").html('<img src="../Images/Status0' + data.EG_AB_LE07_1Schalter + '.gif" width="30" />'); 
            $("#AB_LE07_2Schalter").html('<img src="../Images/Status0' + data.EG_AB_LE07_2Schalter + '.gif" width="30" />');

            $("#AB_LE03_1Schalter").html('<img src="../Images/Status0' + data.EG_AB_LE03_1Schalter + '.gif" width="30" />');

            $("#AB_SD01").html('<img src="../Images/Status0' + data.EG_AB_SD01 + '.gif" width="30" />');   

        }
    });

    }, 1000);
    });
  </script>




<div style="text-align:left;" class="Zeile">
<br >
<table style="width:100%" border="0">         




<tr>




<td style="width:2%">&nbsp;</td>
<td style="width:5%">Eingang Leistung</td>




<td style="width:5%">&nbsp;</td>




<td style="width:1%"><?php Button_Ausgeben('EG', 'AB.LE01_Leistung', 'on'); ?></td>                               
<td style="width:1%"><?php Button_Ausgeben('EG', 'AB.LE01_Leistung', 'off'); ?></td>      
<td style="width:1%"><div id="AB_LE01_Leistung">&nbsp;</div></td>




<td style="width:5%;" style="text-align:right">&nbsp;&nbsp;&nbsp;&nbsp;Eingang Voll</td>
<td style="width:5%">&nbsp;</td>




<td style="width:1%"><?php Button_Ausgeben('EG', 'AB.LE01_1Schalter', 'on'); ?></td>
<td style="width:1%"><?php Button_Ausgeben('EG', 'AB.LE01_1Schalter', 'off'); ?></td>
<td style="width:1%"><div id="AB_LE01_1Schalter">&nbsp;</div></td>
<td style="width:1%">&nbsp;</td>




</tr>




<tr><td colspan="15"><hr></td></tr>




<tr>




<td>&nbsp;</td>
<td>Eingang Alarm</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.LE01_2Schalter', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.LE01_2Schalter', 'off'); ?></td>
<td><div id="AB_LE01_2Schalter">&nbsp;</div></td>




</tr>




<tr><td colspan="15"><hr></td></tr>




<tr>




<td>&nbsp;</td>
<td>Terrasse Leistung</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.LE07_Leistung', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.LE07_Leistung', 'off'); ?></td>
<td><div id="AB_LE07_Leistung">&nbsp;</div></td>




<td>&nbsp;&nbsp;&nbsp;&nbsp;Terrasse Voll</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.LE07_1Schalter', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.LE07_1Schalter', 'off'); ?></td>
<td><div id="AB_LE07_1Schalter">&nbsp;</div></td>
<td>&nbsp;</td>




</tr>




<tr><td colspan="15"><hr></td></tr>




<tr>




<td>&nbsp;</td>
<td>Terrasse Alarm</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.LE07_2Schalter', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.LE07_2Schalter', 'off'); ?></td>
<td><div id="AB_LE07_2Schalter">&nbsp;</div></td>




</tr>




<tr><td colspan="15"><hr></td></tr>




<tr>




<td>&nbsp;</td>
<td>Frontbereich</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.LE03_1Schalter', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.LE03_1Schalter', 'off'); ?></td>
<td><div id="AB_LE03_1Schalter">&nbsp;</div></td>




<td>&nbsp;&nbsp;&nbsp;&nbsp;Außensteckdose</td>
<td>&nbsp;</td>




<td><?php Button_Ausgeben('EG', 'AB.SD01', 'on'); ?></td>
<td><?php Button_Ausgeben('EG', 'AB.SD01', 'off'); ?></td>
<td><div id="AB_SD01">&nbsp;</div></td>
<td>&nbsp;</td>




</tr>




<tr><td>&nbsp;</td></tr>




</table>




<div class="Zeile_Text" style="color:white;text-align:right;font-size:12px;">
&nbsp;&nbsp;&copy; Christian</div>




</div>
</div>
</div>
</body>
</html>

Alles anzeigen

und so sieht die HTML-Datei für diesen Raum, welche auf dem Webserver der Siemens SPS läuft:

HTML

jsonCallback_EG_AB(
{
"EG_AB_LE01_Leistung":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE01_Leistung' -->:="DB_EG_Zustand_PLC".AB.LE01_Leistung:,
"EG_AB_LE01_1Schalter":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE01_1Schalter' -->:="DB_EG_Zustand_PLC".AB.LE01_1Schalter:,
"EG_AB_LE01_2Schalter":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE01_2Schalter' -->:="DB_EG_Zustand_PLC".AB.LE01_2Schalter:,
"EG_AB_LE07_Leistung":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE07_Leistung' -->:="DB_EG_Zustand_PLC".AB.LE07_Leistung:,
"EG_AB_LE07_1Schalter":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE07_1Schalter' -->:="DB_EG_Zustand_PLC".AB.LE07_1Schalter:,
"EG_AB_LE07_2Schalter":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE07_2Schalter' -->:="DB_EG_Zustand_PLC".AB.LE07_2Schalter:,
"EG_AB_LE03_1Schalter":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.LE03_1Schalter' -->:="DB_EG_Zustand_PLC".AB.LE03_1Schalter:,
"EG_AB_SD01":<!-- AWP_In_Variable Name='"DB_EG_Zustand_PLC".AB.SD01' -->:="DB_EG_Zustand_PLC".AB.SD01:,
}
);

Alles anzeigen

so schauts im Browser aus - siehe Anhang...

ist bisschen Tippelarbeit, aber sind ja nur 6 Räume pro Etage (EG+OG)

wolf · 1. Juni 2015

Ja gut, wenn du es so machen willst.. hinder ich dich nicht.. ich wollte einen eleganteren weg erarbeiten aber ok

Lostb1ker · 1. Juni 2015

Nur zu... bin offen für andere Dinge

hab nur auf dem Siemens-Webserver nur mit Einschränkungen zu kämpfen

wolf · 1. Juni 2015

Das sind alles nur on/off schalter, seh ich das richtig?

Lostb1ker · 1. Juni 2015

jo. Diese ja. Später kommen noch die Heizungswerte dazu, aber das steht auf einem anderen Papier

wolf · 1. Juni 2015

und wo willst du die Seite jetzt abrufen können? auf deinem Webserver oder auf deinem Simens server?

ich empfehler mal den Webserver

Lostb1ker · 1. Juni 2015

auf jedem Fall vom externen Webserver, durch den größeren Handlungsspielraum. Zum Beispiel kann mein Webserver durch die Speicherkarte ca mac. 1,5mb groß sein... Reicht mir nicht.

wolf · 1. Juni 2015

Okay, dann mach doch mal für jedes Stockwerk oder wie auch immer du es unterteilen willst eine Seite mit dem hier

Code

{
  "steckdose_1": 0,
  "steckdose_2": 1,
  "variable_4": "middle"
}

Kein Jsonp oder sowas

Lostb1ker · 1. Juni 2015

ist fix gemacht, dazu muss ich nur was wegnehmen. Wie greife ich dann darauf zu?

EDIT: fertsch

wolf · 1. Juni 2015

Dann bauen wir ein PHP Script das die Daten des Stockwerks läd..
speciher es am besten unter 'floorLoader.php' auf deinem Web-Server

PHP

<?php
  error_reporting(E_ALL); //alle Fehler anzeigen
  define('PATH', 'http://192.168.178.000/folder/with/files/');//Den Pfad zum Ordner der Dateien definieren
  define('ERROR_MSG', 'No content found!');//Fehlermeldung die übertragen wird wenn kein inhalt gefunden wurde




  $floor = empty($_GET['floor']) ? 'EG' : $_GET['floor'];//die id des stocks (wenn keine mitgegeben wurde EG)
  //gehen wir mal davon aus das deine Datei nach dem schema 'data_[floor].html' benannt sind (bsp: data_EG.html)
  $filePath = PATH.'data_'.$floor.'.html';//generiert ein Pfad wie 'http://192.168.178.000/folder/with/files/data_EG.html'
  $rawData = file_get_contents($filePath);//Inhalt der Datei auslesen
  if (!empty($rawData)) {//wenn Daten angekommen sind
    echo($rawData);//Die Daten ausgeben
  }
  else{
    header('HTTP/1.1 406 Not Acceptable');//dem JS mitteilen das etwas nicht stimmt
    echo '{"error":"'.ERROR_MSG.'"}';//Die Fehlermeldung ausgeben
  }
?>

Alles anzeigen

Dieses Script können wir nun via AJAX laden und uns damit die Stockwerk-Daten dynamisch nachladen wenn wir sie Brauchen

EDIT
In Zeile 8 hat sich ein Fehler eingeschlichen, bitte neue Version verwenden..

Lostb1ker · 1. Juni 2015

sieht interessant aus. Gleich mal probieren. Danke

hab mal für ein Raum das gerade realisiert... die Daten sind blitzschnell da. Jetzt muss ich die im PHP noch für mich aufbereiten und Ajax mit jQuery bauen. Sieht aber schon mal sehr vielversprechend aus. Fettes Danke!

wolf · 1. Juni 2015

NEEIIN nix aufbereiten
Das machen wir jetzt mit Javascript..

Lostb1ker · 1. Juni 2015

okkkkk

wolf · 1. Juni 2015

Habe gerade schon ein bisschen rumgespielt und neue Technologie ausprobiert.. http://codepen.io/wolf-w/pen/ZGLdPr
Ouh yes

Wenn du noch Power hast,
kannst du für jedes Stockwerk so ein Template erstellen und diese alle in einer HTML Datei speichern

HTML

<template data-template="EG">
  <h2>Erdgeschoss</h2>
  <div class="box" data-input-id="schalter_02">
    <span>Licht Eingang</span>
    {toggle_schalter_02}
  </div>
  <div class="box" data-input-id="schalter_06">
    <span>Licht Küche</span>
    {toggle_schalter_06}
  </div>
</template>

Alles anzeigen

Die 'data-input-id' sollte immer den dazugehörigen 'key' aus den Daten beschreiben ..

Weiter gehts morgen

Siemens AWL mit Javascript / PHP abfragen

Jetzt mitmachen!

Teilen