Siemens AWL mit Javascript / PHP abfragen

Lostb1ker

Klar hab ich Power^^ bei deiner Vorarbeit wäre es doch schade, nicht daran weiter zu machen - setze mich mal ran

wolf

Ich habe das Template nochmal leicht abgeändert..

Lostb1ker

Wäre kein Problem, wenn du etwas für mich hast, gerne

wolf

Hab es im beitrag davor eingetragen

Lostb1ker

Werde zum späteren Nachmittag dann eine Seite für einen Raum, nach dieser Vorgabe erstellen. Wie hast du dir dann das Javascript für die Verarbeitung vorgestellt?

wolf

Musst ja nur bei jedem {toggle] noch die ID des jeweiligen Feldes noch rein schreiben..
Hier mal das Komplette HTML. JS und CSS solltest du in eigene Dateien auslagern.. bei mir funktioniert es einwandfrei

HTML

<!DOCTYPE html>
<html>
<head>
  <title>AWL loader</title>
  <meta charset="utf-8">




  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){//nach laden des Dokuments
      AWL('EG','body');//die Daten für 'EG' in 'body' einfügen




      setTimeout(function(){//nach 5sec (einfach nur damit du siehst das man jetzt jederzeit nachladen kann oder wie auch immer)
        AWL('OG','body');//die Daten für 'OG' in 'body' einfügen
      },5000)
    })




    /**
     * AWL(floor, target)
     *
     * @param string floor ID of the wanted Floor-Data
     * @param string target JQ Selector of the Object, where the data should be appended
     * 
     * Die Daten des entsprechenden Geschosses werden geladen und an die render_list() Funktion weitergegeben.
     * Nach dem Rendern werden die Daten ins Zielobjekt eingefügt.
     */
    function AWL(floor, target){
      var PATH = 'floorLoader.php'//Path to data source
      $.ajax({
        url : PATH,
        method: 'GET',
        data: {'floor': floor},
      }).done(function (data) {//wenn die Daten geladen werden konnten
        try{//versuche
          json = JSON.parse(data);//daten zu parsen
          $(target).append(render_list(floor, json));//template füllen und ausgeben
        }
        catch(e){//wenn Fehler auftreten
          alert('Error while parsing JSON data!\n\n'+e);
        }
      }).fail(function() {//wenn fehler beim laden der Daten auftreten
        alert("Fehler beim Laden der Daten!");
      });
    }




    /**
     * render_list(floor, data)
     *
     * @param string floor ID of the target Template
     * @param object data The key/value object.
     * 
     * Zum 'data' Objekt werden noch entspechend 'toggle_KEY' Objekte aus einem anderen Template genereiert und in 'data' eingefügt.
     */
    function render_list(floor, data){
      $.each(data, function(key, value){//für jeden Datensatz (key)
        var x = {//die Daten für das 'toggle' Template erstellen
          id: key,//der key bilded die ID
          off: (value == 0) ? 'checked' : '',//wenn 'value' 0 ist, bekommt 'off' den inhalt 'checked' und ist somit vorausgewählt
          on: (value == 1) ? 'checked' : '',//wie bei 'off'
        };
        data['toggle_'+x.id] = fill_template('toggle',x);//Das 'toggle' Template ausfüllen und als 'toggle_KEY' zu 'data' abspeichern
      })




      return fill_template(floor, data);//Das Template ausfüllen und zurückgeben
    }




    /**
     * fill_template(template, data)
     *
     * @param string template The value of the attribute "data-template" of the template tag
     * @param object data The key/value object. Each placeholder would be removed if his key/value exist's
     * 
     * Die Funktion ersetzt alle Platzhalter im HTML des Templates, wenn dafür in 'data' ein Key existiert.
     * Das Template wird automatisch geladen aufgrund des Attributes 'data-template', wenn dies 'template' entspricht.
     */
    function fill_template(template, data){
      template = $('template[data-template="'+template+'"]').html();//den Inhalt des Templates mit 'data-template' = 'template' auslesen
      $.each(data, function(key, value){//für jeden KEY
        template = template.replace(new RegExp('{'+key+'}', 'gi'), value);//nach dem platzhalter "{'KEY'}" suchen und mit 'value' ersetzen (MEHRERE Ersetzungen zulassen + groß/klein-schreibung NICHT beachten)
      });

      return template;//template zurückgeben
    }




  </script>




  <style>
    *, *:before, *:after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }




    body {
      font-family: sans-serif;
      font-style: normal;
      font-weight: 400;
      padding: 50px;
      background-color: rgb(200,200,200);
    }
    h3{
      margin: 0 .7em;
    }
    .box{
      width: 400px;
      padding: 10px 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }




    /*
      CSS RADIO SWITCH STYLES




      Hardly based on  Nick Bottomley's Work <http://codepen.io/nickbottomley/pen/uhfmn>
    */
    .switch {
      display: inline-block;
      width: 184px;
      width: 11.5rem;
      position: relative;
      height: 32px;
      height: 2rem;
      font-size: 0;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    .switch input {
      position: absolute;
      top: 0;
      z-index: 2;
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      height: 32px;
      height: 2rem;
      width: 64px;
      width: 4rem;
      left: 60px;
      left: 3.75rem;
      margin: 0;
    }
    .switch input:checked {
      z-index: 1;
    }
    .switch input:checked + label {
      opacity: 1;
      filter: alpha(opacity=100);
      cursor: default;
    }
    .switch input:not(:checked) + label:hover {
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    .switch label {
      color: #344141;
      opacity: 0.33;
      filter: alpha(opacity=33);
      -webkit-transition: opacity 0.25s ease;
              transition: opacity 0.25s ease;
      cursor: pointer;
      font-size: 20px;
      font-size: 1.25rem;
      line-height: 32px;
      line-height: 2rem;
      display: inline-block;
      width: 60px;
      width: 3.75rem;
      height: 100%;
      margin: 0;
      text-align: center;
    }
    .switch label:last-of-type {
      margin-left: 64px;
      margin-left: 4rem;
    }
    .switch .toggle-outside {
      height: 100%;
      border-radius: 1.75rem;
      padding: 4px;
      padding: 0.25rem;
      overflow: hidden;
      -webkit-transition: 0.25s ease all;
              transition: 0.25s ease all;
      background: #FFFFFF;
      position: absolute;
      width: 64px;
      width: 4rem;
      left: 60px;
      left: 3.75rem;
    }
    .switch .toggle-inside {
      border-radius: 1.5rem;
      background: #344141;
      position: absolute;
      -webkit-transition: 0.25s ease all;
              transition: 0.25s ease all;
      height: 24px;
      height: 1.5rem;
      width: 24px;
      width: 1.5rem;
    }
    .switch input:checked ~ .toggle-outside .toggle-inside {
      left: 4px;
      left: 0.25rem;
    }
    .switch input ~ input:checked ~ .toggle-outside .toggle-inside {
      left: 35px;
      left: 2.1875rem;
    }
    /* END OF CSS RADIO SWITCH STYLES */
  </style>
</head>
<body>
  <!-- HIER DIE TEMPLATES FÜR ALLE STOCKWERKE EINFÜGEN -->
  <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>




  <template data-template="OG">
    <h2>Obergeschoss</h2>
    <div class="box" data-input-id="schalter_03">
      <span>Licht Bad</span>
      {toggle_schalter_03}
    </div>
    <div class="box" data-input-id="schalter_91">
      <span>Stecker Lichtleiste</span>
      {toggle_schalter_91}
    </div>
  </template>




  <!-- TEMPLATE FÜR DEN ON/OFF SWITCH (muss nicht verändert werden) -->
  <template data-template="toggle">
    <div class="switch">
      <input id="radio-a-{id}" type="radio" name="{id}" {off}/>
      <label for="radio-a-{id}">Off</label>
      <input id="radio-b-{id}" type="radio" name="{id}" {on}/>
      <label for="radio-b-{id}">On</label>
      <span class="toggle-outside"><span class="toggle-inside"></span></span>
    </div>
  </template>
</body>
</html>

Alles anzeigen

Hoffe das ist verständlich erklärt alles

Lostb1ker

Da hat sich aber jemand Mühe gemacht... Weiß gar nicht, wie ich mich bedanken soll :-). Nach der Arbeit versuche ich es gleich mal! Danke!

wolf

Und, funktioniert?

Lostb1ker

fange jetzt erst an ... Arbeit musste mal kurz vor gehen. Gestern konnte ich dazwischen das hier immer wieder rein mogeln. Ging heute leider nicht. Aber jetzt...
Bier auf, Shisha an.. los gehts

wolf

Wie lang war die Nacht noch?

Lostb1ker

Guten Morgen,

bin noch nicht 100% dahinter gestiegen. Sag mal kannst du mir vielleicht zeigen, wie genau die Daten auszusehen haben, welche ich ich per floorLoader.php schicke? Glaube dann ergründet sich mir alles. Danke dir.

wolf

Mein floorLoader.php antwortet bei mir mit

Code

{"schalter_02": 0, "schalter_06": 1}

Code

{"schalter_03": 1, "schalter_91": 1}

Je nach dem welches Geschoss gefordert ist..

du kannst mal testweise dir die Daten anzeigen wenn sie da sind (am besten nach 'JSON.parse()'

JavaScript

console.log(json)

dann landen die in der Konsole (strg+shift+i)

JavaScript: 17

/**
     * AWL(floor, target)
     *
     * @param string floor ID of the wanted Floor-Data
     * @param string target JQ Selector of the Object, where the data should be appended
     * 
     * Die Daten des entsprechenden Geschosses werden geladen und an die render_list() Funktion weitergegeben.
     * Nach dem Rendern werden die Daten ins Zielobjekt eingefügt.
     */
    function AWL(floor, target){
      var PATH = 'floorLoader.php'//Path to data source
      $.ajax({
        url : PATH,
        method: 'GET',
        data: {'floor': floor},
      }).done(function (data) {//wenn die Daten geladen werden konnten
        try{//versuche
          console.log(data);//das ist jetzt ein String und wird als Text in der Konsole ausgegeben (kopier das am besten mal und poste es)
          json = JSON.parse(data);//daten zu parsen
          console.log(json);//das ist jetzt ein Objekt
          $(target).append(render_list(floor, json));//template füllen und ausgeben
        }
        catch(e){//wenn Fehler auftreten
          alert('Error while parsing JSON data!\n\n'+e);
        }
      }).fail(function() {//wenn fehler beim laden der Daten auftreten
        alert("Fehler beim Laden der Daten!");
      });
    }

Alles anzeigen

Lostb1ker

Das wars gar nicht. Hatte mein floorLoader zu sehr verbogen^^ Jetzt gehts. Arbeite das jetzt in meiner Visu ein. Vielen Dank! Wenn ich das fertig habe, mache ich mein SVG-Grundriss weiter

Wenn ich so weit durch bin, gib ich dir dann mal eine Adresse, ums zu sehen^^

EDIT: Sehr eigenartig. Habe Fehler beim holen der Daten "Error while pasring JSON data! SyntaxError: Unexected token { " Wenn ich lokal diese hole, funktionierts, aber nicht vom externen SIemens-Webserver. Hab zum Test auch mal nur deine zwei Beispielschalter vom EG und OG genommen... komisch

genau die gleiche Datei, wenn ich nur mal floorLoader.php öffne:
24 {"schalter_02": 0, "schalter_06": 1} 0 -> der macht Zahlen vorn und hinten? Beim lokalen nicht.

HTML

686 { "EG_AB_LE01_Leistung": 1, "EG_AB_LE01_1Schalter": 0, "EG_AB_LE01_2Schalter": 0, "EG_AB_LE07_Leistung": 1, "EG_AB_LE07_1Schalter": 0, "EG_AB_LE07_2Schalter": 0, "EG_AB_LE03_1Schalter": 0, "EG_AB_SD01": 1, "EG_AB_LE01_Leistung": 1, "EG_AB_LE01_1Schalter": 0, "EG_AB_LE01_2Schalter": 0, "EG_AB_LE07_Leistung": 1, "EG_AB_LE07_1Schalter": 0, "EG_AB_LE07_2Schalter": 0, "EG_AB_LE03_1Schalter": 0, "EG_AB_SD01":1, "EG_AR_SD04": 1, "EG_AR_LE01": 0, "EG_AR_RM01_hoch": 0, "EG_AR_RM01_runter": 0, "EG_BD_SD01": 0, "EG_BD_SD06": 1, "EG_BD_LE01": 0, "EG_BD_RM01_hoch": 0, "EG_BD_RM01_runter": 0, "EG_FL_SD01": 1, "EG_FL_SD06": 0, "EG_FL_LE01": 0, "EG_FL_LE03": 1, "EG_FL_LE14": 0, "EG_KU_LE01": 0, "EG_KU_LE02": 0, "EG_KU_LE03": 0, "EG_KU_SD01": 1, "EG_KU_SD05": 1, "EG_KU_SD09": 0, "EG_KU_SD10": 1, "EG_KU_RM01_hoch": 0, "EG_KU_RM01_runter": 0, "EG_KU_RM02_hoch": 0, "EG_KU_RM02_runter": 0, "EG_TR_SD01": 0, "EG_TR_LE01": 0, "EG_TR_RM01_hoch": 1, "EG_TR_RM01_runter": 0, "EG_WZ_LE01": 0, "EG_WZ_LE02": 0, "EG_WZ_LE03": 0, "EG_WZ_LE08": 0, "EG_WZ_LE09": 0, "EG_WZ_LE10": 0, "EG_WZ_SD01": 1, "EG_WZ_SD03": 1, "EG_WZ_SD05": 0, "EG_WZ_SD07": 1, "EG_WZ_SD10": 1, "EG_WZ_RM01_hoch": 0, "EG_WZ_RM01_runter": 0, "EG_WZ_RM02_hoch": 0, "EG_WZ_RM02_runter": 0, "EG_WZ_RM03_hoch": 0, "EG_WZ_RM03_runter": 0, "EG_WZ_RM04_hoch": 0, "EG_WZ_RM04_runter": 0, "EG_Z1_LE01": 0, "EG_Z1_LE02": 0, "EG_Z1_LE03": 0, "EG_Z1_SD02": 1, "EG_Z1_SD04": 1, "EG_Z1_SD07": 1, "EG_Z1_RM01_hoch": 0, "EG_Z1_RM01_runter": 0, "EG_Z1_RM02_hoch": 0, "EG_Z1_RM02_runter": 0, "EG_Z1_RM03_hoch": 0, "EG_Z1_RM03_runter": 0 } 0

Der Vogel generiert irgendwelche Zahlen

Habe es mir einfach gemacht:

[...]

JavaScript

}).done(function (data) {//wenn die Daten geladen werden konnten
        try{//versuche

          var data = data.split('{', 2 );
          data = "{" + data[1];
          var data = data.split('}', 2 );
          data = data[0] + "}";

          json = JSON.parse(data);//daten zu parsen
          $(target).append(render_list(floor, json));//template füllen und ausgeben
        }
        catch(e){//wenn Fehler auftreten 
          alert(e);

Alles anzeigen

[...]

kürze einfach nach und hinter der Klammer das Zeug raus

Wenn es nun richtig verstanden habe, dann wird derzeit noch nichts gesendet bei Betätigung des Toogle-Schalters?

wolf

Genau, gesendet wird noch nix..
du brauchst eine funktion die die buttons überwacht ob sie verändert wurden
In jQery heist diese '$element.change( callback )'.
Das ganze packst du dann in eine Funktion die du immer wieder aufrufen kannst und somit nach jedem nachladen einfach ausführen kannst..
Diese Funktion ruft dann eine zum sichern der Daten auf

JavaScript

/**
     * init_toggle()
     */
    function init_toggle(){
      $('div[data-input-id] .switch input').change(function(){
        $this = $(this);
        var key = $this.attr('name'),
            val = $this.val();




        save(key,val, $this);
      })
    }




    /**
     * save(key, value, object = null)
     *
     * @param string key key of the value
     * @param string/int value value of the key :D
     * @param object object changed input object (not used actually)
     */
    function save(key, value, object = null){
      //AJAX call to save the value
    }

Alles anzeigen

Das ganze kannst du dann nach dem einfügen des Templates (append) immer aufrufen

JavaScript

$(target).append(render_list(floor, json));//template füllen und ausgeben




          setTimeout(init_toggle, 20);//kurz warten (20ms) damit auch alles da ist.. dann den button überwachen

Bei save() habe ich das Objekt mal mitgegeben damit man z.B. ein loading-icon zeigen kann währen die Daten an den server gesendet werden und dann nach dem senden wieder entfernen..

! Das Template für den on/off switch muss noch leicht geändert werden..
In zeile 4&6 wurde jeweils das Attibut 'value' hinzugefügt, was dann an den Server gesendet werden kann als neuer Status ..(Zeile 8 im JS oberhalb)

HTML

<!-- TEMPLATE FÜR DEN ON/OFF SWITCH (muss nicht verändert werden) -->
  <template data-template="toggle">
    <div class="switch">
      <input id="radio-a-{id}" type="radio" value="0" name="{id}" {off}/>
      <label for="radio-a-{id}">Off</label>
      <input id="radio-b-{id}" type="radio" value="1" name="{id}" {on}/>
      <label for="radio-b-{id}">On</label>
      <span class="toggle-outside"><span class="toggle-inside"></span></span>
    </div>
  </template>

Lostb1ker

Hallo,

bin gerade beim save -> senden. Habe es mal versucht über ajax -> GET und Post probiert, aber habe keinen Zugriff. Hast du eine Idee, wie ich nun schlussendlich den Befehl absende?

wolf

Ähm, kannst du mir nochmal ein gaaaaanz simples Beispiel zeigen, wie du bisher die Daten via HTML an den Server gesendet hast? (also das Formular dazu)

Lostb1ker

Hallo

also so funktioniert es ja:

HTML

<form target="hiddenIFrame" method="post" action="http://192.168.???.???/awp/Haus/index.html" method="GET">
  <input class="Z1_Button1" type="submit" value="OFF">
  <input type="hidden" name='"DB_OG_Ansteuerung_PLC".WZ.LE06_off' value="1">   
 </form>

jetzt habe ich mir es so gedacht:

JavaScript

function Schaltbefehl_senden(ID, Zustand) {
      //alert(ID + "Zustand: " + Zustand);
      // Befehl zusammensetzen
      //"DB_EG_Ansteuerung_PLC".FL.LE01_off
      Geschoss = ID.split('_' , 1 );
      Element = ID.split(Geschoss + "_", 2);  

      Daten = "'DB_" + Geschoss + "Ansteuerung_PLC'." + Element[1]+ "_" + Zustand ; 
      //Daten = Daten + "=1"; 
      alert(Daten);

      $.ajax({
				type: "GET",
				url: "http://192.168.???.???/awp/Haus/index.html",
				data: Daten,
				success: function(msg)
				{}
			});      


    }

Alles anzeigen

Leider erhalte ich aber bei der Diagnose einen Fehler:

"XMLHttpRequest cannot load http://192.168.???.???/awp/Haus/index.html?%27DB_EGAnsteuerung_PLC%27.AR_LE01_on. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access."

Danke für deine Hilfe!

Versuche es damit zu lösen:
http://aktuell.de.selfhtml.org/artikel/javascript/wertuebergabe/

wolf

Kannst du mir kurz mal eine Beispiel ID sagen?

...zum daten senden müssen wir wohl auch auf PHP umsteigen.
Sendest du immer '1' als value? (also bei an und aus?)

Hiermit gehts an? '<input type="hidden" name='"DB_OG_Ansteuerung_PLC".WZ.LE06_on' value="1">'
Und hiermit aus? '<input type="hidden" name='"DB_OG_Ansteuerung_PLC".WZ.LE06_off' value="1">'

Das mit den frames ist übelster Pfusch..

saveValue.php

PHP

<?php
  /**
   * saveValue.php?saveTo&record
   *
   * @param string saveTo path to http target
   * @param string record name of the 'input'
   */




  error_reporting(E_ALL); #^ E_NOTICE); //alle Fehler anzeigen außer notice
  define('ERROR_NOTVALIDFILE_MSG', 'File not found!');//Fehlermeldung die übertragen wird wenn der Dateipfad falsch (keine url [absolut]) ist
  define('ERROR_NORECORD_MSG', 'No record found!');//Fehlermeldung die übertragen wird wenn kein datensatz übergeben wurde




  //get and validate parameters
  $to = empty(trim($_GET['saveTo'])) ? 'http://192.168.178.000/awp/Haus/index.html' : trim($_GET['saveTo']);
  if (!preg_match('/^http/', $to)) {
    header('HTTP/1.1 406 Not Acceptable');//dem JS mitteilen das etwas nicht stimmt
    echo '{"error":"'.ERROR_NOTVALIDFILE_MSG.'"}';//Die Fehlermeldung ausgeben
    die();
  }




  if (!isset($_GET['record'])) {
    header('HTTP/1.1 406 Not Acceptable');//dem JS mitteilen das etwas nicht stimmt
    echo '{"error":"'.ERROR_NORECORD_MSG.'"}';//Die Fehlermeldung ausgeben
    die();
  }
  $rec = trim($_GET['record']);




  $http_data = array($rec => 1);




  //curl (aufrufen des scripts)
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $to);
  curl_setopt($ch, CURLOPT_POST, count($http_data));
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($http_data));
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $result = curl_exec($ch);
  curl_close($ch);




  //create a feedback
  $feedback = array(
    'feedback' => $result,
  );
  echo json_encode($feedback);
?>

Alles anzeigen

JavaScript

/**
 * save(key, value, object = null)
 *
 * @param string key key of the value
 * @param string/int value value of the key :D
 * @param object object changed input object (not used actually)
 */
function save(key, value, $object = null){
  var PATH = 'saveValue.php',
  is_jq = ($object instanceof jQuery);




  if (is_jq) {
    $box = $object.parent().parent();
    $box.addClass('loading');
  };
  //split the key in 'floor' and 'id' and create the record
  // do it..
  var floor = 'EG',
      id = 'schalter_06',
      value = (value == 1) ? 'on' : 'off';//value entweder 'on' oder 'off' zuweisen
      record = "'DB_"+floor+"_Ansteuerung_PLC'."+id+"_"+value;




  $.ajax({
    url: PATH,
    method: 'GET',
    data: {
      saveTo: 'http://192.168.178.000/awp/Haus/index.html',
      record: record
    }
  }).done(function(){
    console.log('saved '+key+' to '+value);
  }).fail(function(){
    console.error('could not save '+key+'!');
  }).always(function(){
    if (is_jq) {
      $box.removeClass('loading');
    };
  })
}

Alles anzeigen

So kann man's machen ..
Zeilen 18 + 19 muss man halt nochmal machen.. dafür bräucht ich deine ID

Lostb1ker

Hallo,

Beispiel-ID wäre:

"DB_EG_Ansteuerung_PLC".FL.LE01_off

-> stimmt. Ich setze den jeweiligen Zustand immer auf "1" -> also für jeden Zustand, gibt es eine ID -> on oder off (bei Schaltern) und hoch / runter (bei Rollos).

Muss erstmal durchblicken, was hier alles passiert. Möchte nicht einfach kopieren -> wills verstehen

Irgendwie mag mein Browser nicht die Zeile:

JavaScript

function save(key, value, $object = null){

-> also $Object = null -> "Uncaught SyntaxError: Unexpected token ="

wolf

Lösch das = null einfach weg, wird hier nicht gebraucht.
Das macht man wenn man variablen an funktionen mit einem standart Wert befüllen möchte wenn diese var nicht übergeben wurde.. verstehst du?

Jetzt mitmachen!