mediola

WebServerCL, Ausgaben mit Javascript pimpen

Programmierung der HomeMatic CCU mittels contronics homeputer CL

Werbung


WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon Familienvater » 12.05.2013, 18:38

Moin,

da ja der Release-Zyklus für Updates/Erweiterungen des Webservers nicht ganz mit meinen Vorstellungen übereinstimmt, habe ich jetzt auch an dieser Stelle angefangen, um "Unzulänglichkeiten" herumzuprogrammieren, und mich dafür kurz mit javascript auseinandergesetzt:

Wer kennt es nicht, für die Visu ein mehrzeiliges Zeichenelement, aber im Webserver doof:
einzeilig.png
einzeilig.png (4.83 KiB) 2396-mal betrachtet


Ein bisschen Javascript-Hokus-Pokus im Bereich HTML-Einfügungen:
mehrzeilig.png
mehrzeilig.png (2.53 KiB) 2396-mal betrachtet


Schon freut sich der Vadder :-)

Hokus-Pokus für die ganze Tabelle
Code: Alles auswählen
<table ID=MyTable border=2 cellspacing=2 cellpadding=2 align=center>
<tr><td class=objcs >Wohnzimmer</td>
<td class=valcs ><div align="right">
<script type="text/javascript">var str=%<XT_WOHNZIMMER>;document.write(str.replace("<<","<br>"));</script>
</div></td>
</tr>
</table>


Daraus wird dann in der Webseite
Code: Alles auswählen
<table ID=MyTable border=2 cellspacing=2 cellpadding=2 align=center>
<tr><td class=objcs >Wohnzimmer</td>
<td class=valcs ><div align="right">
<script type="text/javascript">var str="20.7°C<<54 %";document.write(str.replace("<<","<br>"));</script>
</div></td>
</tr>
</table>


Wer sich eh schon per eigenem HTML-Code und %<>-Referenzen Werte ausgeben läßt, und sich darüber ärgert, das bei Zeichenketten dann immer Anführungszeichen da sind:
Anfuehrungszeichen.png
Anfuehrungszeichen.png (6.22 KiB) 2396-mal betrachtet


So bekommt man diese bei Zeichenketten weg:
Code: Alles auswählen
<table ID=MyTable border=2 cellspacing=2 cellpadding=2 align=center>
<tr><td class=objcs >Beispiel mit Anführungszeichen</td>
<td class=valcs ><div align="right">%<XX_HEIZUNG.SOLLAUFZEITMONAT></div></td>
<tr><td class=objcs >Beispiel ohne Anführungszeichen</td>
<td class=valcs ><div align="right"><script type="text/javascript">document.write(%<XX_HEIZUNG.SOLLAUFZEITMONAT>);</script>
</div></td>
</tr>
</table>


Und falls jemand einen Link auf eine Datei auf dem USB-Stick der CCU setzen will, sich aber der Dateiname ändert, dafür habe ich auch eine Lösung...
dynLink.png
dynLink.png (9.3 KiB) 2396-mal betrachtet

Hier jetzt mal nur die zwei Zeilen, die Tabellendefinition ist wie immer:
Code: Alles auswählen
<tr><th class=objcs colspan="2"><div align="center">Logging<div></tr>
<tr><td class=objcs >meine Log-Datei anzeigen</td>
<td class=valcs ><div id="MyLog" align="right">
    <script language="Javascript">
        var divEl = document.getElementById('MyLog');
        var aElem = document.createElement('a');
        aElem.href="http://ccu/addons/contronics/showtextfile.ccc?path=/var/datadisk/&file="+%<SETTINGS.LOCALLOGNAME>;
        aElem.target="_blank";
        var aElemTN = document.createTextNode(%<SETTINGS.LOCALLOGNAME>);
        aElem.appendChild(aElemTN);
        divEl.appendChild(aElem);
    </script>
</div></td>
</tr>
<tr><td class=objcs >HPCL-Syslog anzeigen</td>
<td class=valcs ><div align="right"><a href="http://ccu/addons/contronics/showtextfile.ccc?path=/var/datadisk/&file=syslog.txt">HPCL-Syslog</div></td>
</tr>


Hoffe, konnte damit jemand helfen oder Anregungen geben...

Der Familienvater
Familienvater
 
Beiträge: 6130
Registriert: 31.12.2006, 16:18
Wohnort: Rhein-Main

Farben nach Bedingung

Beitragvon WAdler 68 » 13.05.2013, 14:43

Das hier ist sicher nicht neu. Doch es könnte ja doch noch einer danach suchen.
Um verschiedene Warnfarben, die sich auch nach ereignisse ändern können, verwenden zu können programmiere ich die CLWeb Ausgaben im CL. zB.: es regnet

wenn trocken....
WEBANZEIGE := "</th><th><font color=#0000FF> es ist Trocken </font></th></tr>"
sonst
WEBANZEIGE := "</th><th> <font color=#FF0000> es regnet </font></th></tr>"
endewenn

hier tauchen aber noch die "" auf. da muß ich noch mal wie oben beschrieben ran.
WAdler 68
 
Beiträge: 1256
Registriert: 09.11.2008, 17:29

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon Familienvater » 13.05.2013, 15:32

Moin,

ich will die Tage noch probieren, per Javascript neue Zeilen für meine "Spezialitäten" direkt an die Objekt-Tabelle (table ID=TabObj) der Webseite dranzuhängen, um nur noch eine Tabelle zu haben, und in dieser Tabelle auch die Möglichkeit zu haben, Zustände zu setzen. (Das ginge zwar auch im HTML-Einfügungsbereich, aber bei Änderungen im HPCL-Projekt müsste man dann den Index/mögl. Zustände der Variable immer per Hand aktualisieren...

Eigentlich mag ich kein Javascript, und will es auch nicht lernen ;-)

Der Familienvater
Familienvater
 
Beiträge: 6130
Registriert: 31.12.2006, 16:18
Wohnort: Rhein-Main

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon WAdler 68 » 13.05.2013, 15:53

Ich hatte das früher auch mal gemacht. Doch durch die fummligen fensterchen in dem WEB CL verliert man da schnell den Überblick. Desshalb suchte ich den Weg, alles in CL fürs WEB vorzukauen und dort nur noch darzustellen. Es lassen sich aber so auch ganze Java Sequenzen, oder fertige Tabellen einbinden.
WAdler 68
 
Beiträge: 1256
Registriert: 09.11.2008, 17:29

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon Familienvater » 13.05.2013, 16:40

Moin,

für so eine handvoll "einfache" Dinge wie es regnet in verschiedenen Farben darzustellen mag das Funktionieren und praktikabel sein, aber ich habe bei mir ~300 Module. Wenn ich da nur für die Hälfte noch Webanzeige-Objekte bauen muss... Und es ist ja meistens noch der Inhalt einer Variable (Und wenn es .CT ist), der mich besonders interessiert.
Für den dynamischen Text, den ich in der Visu haben will, habe ich ja schon extra Anzeige-Zeichen-Objekte, und wenn ich einfach mit JavaScript recyclen kann, mache ich das dann jetzt.

In dem Fummel-Fenster vom WebServer mach ich nur Copy und Paste, den HTML-Code selber editiere ich in meinem Lieblingseditor mit Tag-Highlighting etc.

Der Familienvater
Familienvater
 
Beiträge: 6130
Registriert: 31.12.2006, 16:18
Wohnort: Rhein-Main

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon WAdler 68 » 13.05.2013, 17:06

Ok. Ich mag das Visu nicht und benutze es auch nicht. es muß alles mit WEB laufen. da es ja nicht Objekte bedingt um im WEB etwas dar zustellen, kann ich so viel freier mir mal schnell etwas darstellen lassen (ich meine %<Obj.Var>). So benötige ich nur extra Objekte, die ich fürs WEB aufhüpchen will.
WAdler 68
 
Beiträge: 1256
Registriert: 09.11.2008, 17:29

zurrück zu dir...

Beitragvon WAdler 68 » 13.05.2013, 17:13

Ich versuche gerade eine Datei vom USB Stick einzulesen...
-->
Und falls jemand einen Link auf eine Datei auf dem USB-Stick der CCU setzen will, sich aber der Dateiname ändert, dafür habe ich auch eine Lösung...
<--
ich habe den von dir gezeigten code in eine Tabelle gesteckt. aber 1:1genommen. Es kommt aber nur eine Fehlerseite:

Fehler: Server nicht gefunden







Der Server unter ccu konnte nicht gefunden werden.





Bitte überprüfen Sie die Adresse auf Tippfehler, wie
ww.example.com statt
www.example.com
Wenn Sie auch keine andere Website aufrufen können, überprüfen Sie bitte die
Netzwerk-/Internetverbindung.
Wenn Ihr Computer oder Netzwerk von einer Firewall oder einem Proxy geschützt wird, stellen Sie bitte sicher,
dass Firefox auf das Internet zugreifen darf.

Ich habe den pfad der syslog. txt die ich anzeigen möchte geprüft. Es ist der originale wie bei dir.
Dann habe ich es mal so probiert:
<table border="1">
<tr><th class=objcs colspan="2"><div align="center">Logging<div></tr>
<tr><td class=objcs >meine Log-Datei anzeigen</td>
<td class=valcs ><div id="MyLog" align="right">
<script language="Javascript">
var divEl = document.getElementById('MyLog');
var aElem = document.createElement('a');
aElem.href="http://ccu/addons/contronics/showtextfile.ccc?path=/var/datadisk/&file=syslog.txt";
aElem.target="_blank";
var aElemTN = document.createTextNode(%<SETTINGS.LOCALLOGNAME>);
aElem.appendChild(aElemTN);
divEl.appendChild(aElem);
</script>
</div></td>
</tr>
<tr><td class=objcs >HPCL-Syslog anzeigen</td>
<td class=valcs ><div align="right"><a href="http://ccu/addons/contronics/showtextfile.ccc?
path=/var/datadisk/&file=syslog.txt">HPCL-Syslog</div></td>
</tr>

</table>
doch es kommt der selbe Fehler. Was ist da falsch?
WAdler 68
 
Beiträge: 1256
Registriert: 09.11.2008, 17:29

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon Familienvater » 13.05.2013, 19:16

Moin,

meine ccu heißt ccu...

Ich weiß nicht, wie Deine heißt, aber anstelle von meinem
"http://ccu/" müsste dann bei Dir "http://ip-adresse/" oder "http://mein-ccu-heißt-walther/"
rein.

Es könnte auch ein "relativer" Pfad ohne Hostname gehen, aber habe ich nicht lang ausprobiert, und einfach das längste reingeklatscht.

Der Familienvater
Familienvater
 
Beiträge: 6130
Registriert: 31.12.2006, 16:18
Wohnort: Rhein-Main

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon WAdler 68 » 13.05.2013, 19:35

Familienvater hat geschrieben:Moin,

meine ccu heißt ccu...

Ich weiß nicht, wie Deine heißt, aber anstelle von meinem
"http://ccu/" müsste dann bei Dir "http://ip-adresse/" oder "http://mein-ccu-heißt-walther/"
rein.

Es könnte auch ein "relativer" Pfad ohne Hostname gehen, aber habe ich nicht lang ausprobiert, und einfach das längste reingeklatscht.

Der Familienvater


DAS WARS! Danke funktioniert perfeckt!
WAdler 68
 
Beiträge: 1256
Registriert: 09.11.2008, 17:29

Re: WebServerCL, Ausgaben mit Javascript pimpen

Beitragvon Familienvater » 13.05.2013, 19:42

Moin,

es geht weiter, Tabelle modifzieren geht (die 4 Zeilen mit an/aus sind auf der Objektseite reingeklickt):
tabelle.png
tabelle.png (14.64 KiB) 2337-mal betrachtet


So ist die Seite im Webserver-CL definiert:
cl_seitenlayout.png

cl_objekte.png

cl_html_einf.png


Der ganze Block HTML-Einfügung 1:
Code: Alles auswählen
<SCRIPT language="javascript">
function addRow(tableID, Position, Bezeichnung, Wert, Option, Cols) {
   var table = document.getElementById(tableID);
   if (Position < 0)   // Position -1: Vorne anhängen, Position +1: Hinten anhängen
   {
      var row = table.insertRow(0);
   }
   else
   {
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
   }

   var cell1 = row.insertCell(0);
   cell1.className="valcs";
   if (Bezeichnung.indexOf("|")>0 )
   {
      var Temp1 = Bezeichnung.split("|",2);
      cell1.style.textAlign=Temp1[0];
      cell1.innerHTML = Temp1[1];
   }
   else
   {
      cell1.innerHTML = Bezeichnung;
   }

   var cell2 = row.insertCell(1);
   cell2.className="valcs";
   if (Wert.indexOf("|")>0 ) {
      var Temp2 = Wert.split("|",2);
      cell2.style.textAlign=Temp2[0];
      cell2.innerHTML = Temp2[1];
   }
   else {
      cell2.innerHTML = Wert;
   }

   if (Cols == 3)
   {
      var cell3 = row.insertCell(2);
      cell3.className="valcs";
      if (Option.indexOf("|")>0 ) {
         var Temp3 = Option.split("|",2);
         cell3.style.textAlign=Temp3[0];
         cell3.innerHTML = Temp3[1];
      }
      else {
         cell3.innerHTML = Option;
      }
   }
}
</SCRIPT>


Und nochmal mein ganzer Block in HTML-Einfügungen 2:
Code: Alles auswählen
<SCRIPT language="javascript">
addRow('TabObj',+1,'Helligkeitssensor Terrasse West','right|%<HS_TERRASSE_WEST>','',2);
addRow('TabObj',+1,'center|Zeitpunkt letzte Meldung','%<HS_TERRASSE_WEST.CT>','',2);
addRow('TabObj',+1,'Bewegungsmelder Terrasse West','%<BW_TERRASSE_WEST>','',2);
addRow('TabObj',+1,'center|Zeitpunkt letzte Bewegung','%<BW_TERRASSE_WEST.CT>','',2);
addRow('TabObj',-1,'right|Uhrzeit','center|%<UHR.UHRUHRZEIT>',
'center|%<UHR.DATDATUM>',3);
</SCRIPT>


Ich habe eine Funktion in Javascript erstellt, die 6 Parameter erwartet:
function addRow(tableID, Position, Bezeichnung, Wert, Option, Cols)
tableID ist die ID der Tabelle, an die Zeilen zugefügt werden sollen, sollte immer 'TabObj' sein, außer man will an der Makro-Tabelle basteln, dann wäre es 'TabMacro'
Position gibt an, wo die Zeile eingefügt werden soll, ich habe mir das so gedacht: -1 ist ganz oben, vor den Objekten, und +1 ist am Ende, die Reihenfolge der addRow-Aufrufe legt die Reihenfolge fest. Es ist auch möglich, mit mehreren -1 mehrere Zeilen oben anzufügen, der letzte Aufruf ist dann die oberste Zeile...
Bezeichnung ist der Text in der ersten Spalte, optional kann eine Ausrichtung angegeben werden, in dem vor dem Text right| oder center| angegeben wird (left| würde auch gehen...)
Wert ist der Wert/Zustand in der zweiten Spalte, optional kann eine Ausrichtung angegeben werden, in dem vor dem Text right| oder center| angegeben wird (left| würde auch gehen...)
Option ist eine Einheit oder was auch immer, die optional in der dritten Spalte auftauchen soll, optional kann eine Ausrichtung angegeben werden, in dem vor dem Text right| oder center| angegeben wird (left| würde auch gehen...)
Cols sollte 2 oder 3 sein, 2 wenn kein Option angegeben ist oder die Tabelle keine Eingabemöglichkeiten hat und eh nur 2-spaltig ist, oder 3 wenn ein Wert in der 3. Spalte auftauchen soll, oder zumindest die Tabellenzelle vorhanden sein soll.

Aufruf seht Ihr ja in meinem Beispiel.
WICHTIG
Wenn Ihr wie bei meinem Uhrzeit-Beispiel mehrere Werte ausgeben wollt, müssen diese in neuen Zeilen stehen, der Webserver auf der ccu hört nach einer Ersetzung von einem %<> in einer Zeile auf und macht mit der nächsten Zeilen weiter!


Viel Spaß,

der Familienvater
Familienvater
 
Beiträge: 6130
Registriert: 31.12.2006, 16:18
Wohnort: Rhein-Main

Nächste

Zurück zu homeputer CL Software

Wer ist online?

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







© homematic-forum.de & Lizenzgebern. Alle Rechte vorbehalten. Alle Bilder & Texte auf dieser Seite sind Eigentum
der jeweiligen Besitzer und dürfen ohne deren Einwilligung weder kopiert noch sonstwie weiter verwendet werden.