WebServerCL, Ausgaben mit Javascript pimpen

[Familienvater]

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 (4.83 KiB) 4281 mal betrachtet

Ein bisschen Javascript-Hokus-Pokus im Bereich HTML-Einfügungen:

mehrzeilig.png (2.53 KiB) 4281 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 (6.22 KiB) 4281 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 (9.3 KiB) 4281 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

[WAdler 68]

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.

[Familienvater]

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

[WAdler 68]

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.

[Familienvater]

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

[WAdler 68]

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]

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/showtextfi ... 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?

[Familienvater]

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

[WAdler 68]

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!

[Familienvater]

Moin,

es geht weiter, Tabelle modifzieren geht (die 4 Zeilen mit an/aus sind auf der Objektseite reingeklickt):

tabelle.png (14.64 KiB) 4241 mal betrachtet

So ist die Seite im Webserver-CL definiert:

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