WebServerCL, Ausgaben mit Javascript pimpen

[Familienvater]

Moin,

ich mal wieder... Habe noch ein bisschen weiterenwickelt und das ganze Erweitert..

Langweiliges "Original" (Die ersten 4 Zeilen könnte ich eigentlich auch mit meinem AddRow reinwerfen...)

WohnziOri.png (11.35 KiB) 2483 mal betrachtet

Nachdem mein Javascript gewütet hat

Der Block für die HTML-Einfügungen ist kleiner geworden, weil ich meine Funktionen in eine extra Datei auf der CCU ausgelagert habe:

Code: Alles auswählen

HTML2=<script type="text/JavaScript" src="/addons/contronics/funcs_cs.js">
HTML2=</script>
HTML2=<SCRIPT language="javascript">
HTML2=var DrehgriffColors={"verriegelt":"B:#00FF00", "gekippt":"T:#FFFF00", "offen":"B:#FF0000|T:#FFFFFF"};
HTML2=var RMColors={"OK":"B:#00FF00", "Timeout":"#FFFF00", "Alarm":"B:#FF0000|T:#FFFFFF"};
HTML2=addRow('TabObj',4,'Wohnzimmer','center|'+%<XT_WOHNZIMMER>,'',2);
HTML2=addRowColor('TabObj',5,'Rauchmelder','center|%<RM_EG_WOHNZIMMER>','',2, RMColors);
HTML2=addRowColor('TabObj',7,'center|letzte Meldung','%<RM_EG_WOHNZIMMER.zeitLastPing>','',2, {});
HTML2=addRowColor('TabObj',9,'Terassent&uuml;r','center|%<EG_WZ_BALKONTUER_SUED>','',2, DrehgriffColors);
HTML2=addRow('TabObj',10,'center|letzte Meldung','%<EG_WZ_BALKONTUER_SUED.CT>','',2);
HTML2=addRow('TabObj',12,'center|letzte Meldung','%<RS_EG_BALKONTUER_SUED.CT>','',2);
HTML2=addRow('TabObj',13,'center|Zeit wartet bis','%<VRS_EG_BALKONTUER_SUED.ZEITWARTETBIS>','',2);
HTML2=addRow('TabObj',16,'center|letzte Meldung','%<RS_EG_BALKONTUER_SWEST.CT>','',2);
HTML2=addRow('TabObj',17,'center|Zeit wartet bis','%<VRS_EG_BALKONTUER_SWEST.ZEITWARTETBIS>','',2);
HTML2=addRowColor('TabObj',19,'Balkont&uuml;re West','center|%<EG_WZ_BALKONTUER_WEST>','',2, DrehgriffColors);
HTML2=addRow('TabObj',20,'center|letzte Meldung','%<EG_WZ_BALKONTUER_WEST.CT>','',2);
HTML2=addRow('TabObj',22,'center|letzte Meldung','%<RS_EG_BALKONTUER_WEST.CT>','',2);
HTML2=addRow('TabObj',23,'center|Zeit wartet bis','%<VRS_EG_BALKONTUER_WEST.ZEITWARTETBIS>','',2);
HTML2=addRow('TabObj',19,'center|<br>West','','',-3);
HTML2=addRow('TabObj',15,'center|<br>S&uuml;d-West','','',-3);
HTML2=addRow('TabObj',9,'center|<br>S&uuml;d','','',-3);
HTML2=addRow('TabObj',28,'center|<br>Sonstiges Sinnloses Equipment','','',-3);
HTML2=addRow('TabObj',5,'center|<br>Rauchmelder','','',-3);
HTML2=addRow('TabObj',9,'center|<br>Gimmicks','','',-3);

Den Positions-Parameter von addRow habe ich jetzt verändert, -1 ist immer noch vorne eine Zeile anhängen, 0 ist hinten eine Zeile anhängen, und >0 ist genau an dieser Stelle in der Tabelle eine Zeile einfügen. (Das ist ein bisschen fummelig, weil sich damit die Zeilennmmerierung darunter verändert, deswegen müsste ich eigentlich die Zeilen aus dem Beispiel mal sauber von oben nach unten durchordnen)

Auch der Cols-Parameter kann jetzt mehr, mit -2 können die ersten beiden Spalten "gemerged" werden, mit -3 entsprechend alle Spalten für Überschriften z.B. (Wert und Option werden dann nicht mehr ausgeben)

Ausserdem habe ich eine neue Funktion addRowColor gemacht, der eine assoziative Werteliste mit Zuständen und die zu benutzenden Farben für Text und Hintergrund übergeben werden kann.
Wer sich gar nicht mit Programmieren auskennt, der muss sich dann evtl. woanders mal schlau machen, wie es funktioniert, ich habe mir das heute auch "erGoogelt":

var DrehgriffColors={"verriegelt":"B:#00FF00", "gekippt":"T:#FFFF00", "offen":"B:#FF0000|T:#FFFFFF"}; (man könnte die Liste auch direkt als Parameter in der Funktion übergeben)
Bedeutet z.B. bei "verriegelt" mache den Hintergrund in grün ("B:#00FF00", B: wie Background und dann halt noch die Farbe)
bei "gekippt" gibt es gelben Text ("T:#FFFF00")
bei "offen" mache den Hintergrund in rot ("B:#FF0000") , und den Text in weiss ("T:#FFFFFF")


Und hier der Inhalt der Datei funcs_cs.js (Alternativ kann man auch den Inhalt der Datei wieder mit <SCRIPT language="javascript">.... </SCRIPT> in den HTML-Einfügungen reinkopieren (aber wenn sich was ändert, muss man es theoretisch in jeder Seite ändern...)

Code: Alles auswählen

// History
// 2013-05-19: neue Funktion addRowColor, die Werte und Optionen anhand von übergebenem Assoc.Array einfärben kann
//             Mergen von Spalten für Überschriften
//             Doppelte Teile in Unterfunktionen gepackt
// 2013-05-18: Bezeichnung, Wert und Option automatisch << durch <br> ersetzen
// 2013-05-14: erste Version

// Wrapper für Kompatibilität/schreibfaule (Parameter wie bei addRowColor, nur ohne WertColors)

function addRow(tableID, Position, Bezeichnung, Wert, Option, Cols) {
	addRowColor(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:     -1 -> vorne einfügen, 0 -> hinten anhängen, >0 -> An dieser Position einfügen
// 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, wie immer...
// Cols:         2 oder 3 -> 2 oder 3 Spalten, bei 3 Spalten wird Option genutzt, 
//               -2 oder -3 -> Spalten für Überschrift oder so zusammenfassen
// WertColors:   Assoziatives Array in der Form "Zustand":"HTML-TextFarbe", Optional "Zustand":"B:HTML-BackgroundFarbe|T:HTML-TextFarbe"
// Bsp. Array für WertColors = {"geschlossen":"B:#00FF00|T:#FFFF00", "gekippt":"T:#FFFF00", "offen":"B:#FF0000"}

function addRowColor(tableID, Position, Bezeichnung, Wert, Option, Cols, WertColors) {
	var table = document.getElementById(tableID);
	var cssStyle = "valcs"
	var Items=null;
	if (Position < 0) // Position -1: Vorne anhängen, Position 0: Hinten anhängen, >0 genau da hin
	{
		var row = table.insertRow(0);
	} else if (Position == 0)
	{
		var row = table.insertRow(table.rows.length);
	} else {
		var row = table.insertRow(Position);
	}

	// Erste Spalte mit Wert aus Bezeichnung
	var cell = row.insertCell(0);
	cell.className=cssStyle;
	if (Bezeichnung.indexOf("|")>0 )
	{
		var Temp = Bezeichnung.split("|",2);
		cell.style.textAlign=Temp[0];
		cell.innerHTML = Temp[1].replace("<<","<br>");
	}
	else
	{
		cell.innerHTML = Bezeichnung.replace("<<","<br>");
	}

	if (Cols<0)
	{
		cell.colSpan= Math.abs(Cols);
	}
	else
	{
		// Zweite Spalte mit Wert aus Wert
		cell = row.insertCell(1);
		cell.className=cssStyle;

		addAlignedText(cell, Wert, WertColors);

		if (Cols == 3)
		{
			// opt. Dritte Spalte mit Wert aus Option
			cell = row.insertCell(2);
			cell.className=cssStyle;

			addAlignedText(cell, Option, WertColors);
		}
	}
}

// Subroutine zum Einfügen des Textes in die Zelle mit optionalem Alignment
// Da der einzufügende Wert in dieser Subroutine ermittelt wird, auch gleich die Routine zum Einfärben aufrufen
// 
// WertColors:  Assoziatives Array in der Form "Zustand":"HTML-TextFarbe", Optional "Zustand":"B:HTML-BackgroundFarbe|T:HTML-TextFarbe"
// Bsp. Array für WertColors = {"geschlossen":"B:#00FF00|T:#FFFF00", "gekippt":"T:#FFFF00", "offen":"B:#FF0000"}

function addAlignedText(TheCell, TheText, WertColors)
{
	var TextCol=null;
	if (TheText.indexOf("|")>0 ) {
		var Temp = TheText.split("|",2);
		TheCell.style.textAlign=Temp[0];
		textCol = WertColors[Temp[1]];
		TheCell.innerHTML = Temp[1].replace("<<","<br>");
	}
	else {
		textCol = WertColors[TheText];
		TheCell.innerHTML = TheText.replace("<<","<br>");
	}
	// Falls eine Farbangabe für den Wert gefunden wurde
	if (textCol)
	{
		cellColor(TheCell, textCol);
	}
}


// Subroutine zum Einfärben der Übergebenen Tabellen-Zelle
// Text und Hintergrundfarbe
// Erwartet wird soetwas wie "B:#00FF00|T:#FFFF00" für TheColorValues
function cellColor(TheCell, TheColorValues)
{
	var Items = TheColorValues.split("|");
	for (var i=0; i< Items.length; i++)
	{
		var Temp = Items[i].split(":",2);
		if (Temp[0] == "T")
		{
			TheCell.style.color=Temp[1];
		} else if (Temp[0] == "B")
		{
			TheCell.style.backgroundColor =Temp[1];
		} else {
			TheCell.style.color=Temp[0];
		}
	}
}

Ich habe das bei mir alles in eine Datei func_cs.js, die ich bei mir auf der ccu in folgenden Ordner gepackt habe (Wer die woanders hinhaben will, muss entsprechend <script type="text/JavaScript" src="/addons/contronics/funcs_cs.js"> anpassen):

Code: Alles auswählen

ccu:/usr/local/etc/config/addons/www/contronics # dir
drwxrwx---    1 root     root          512 Apr 13  2012 .
drwxr-xr-x    1 root     root          512 Jan 28  2010 ..
-rwxr-xr-x    1 root     root       174624 Mar 26  2012 CLWEBServer.ccc
-rwxr-xr-x    1 root     root        53972 Dec  1  2010 CLWebI.ccc
-rwxr--r--    1 root     root        26885 Dec  7  2009 download.ccc
drwxrwx---    1 root     root          512 Apr 13  2012 files
-rwxr-xr-x    1 root     root         3825 May 19 22:10 funcs_cs.js
-rwxr-xr-x    1 root     root       238864 May 15  2009 libXmlRpc.so
lrwxrwxrwx    1 root     root           14 Oct 20  2012 logs -> /var/datadisk/
-rwxr-xr-x    1 root     root        20284 Dec  1 23:47 showtextfile.ccc

Was "leider" logischerweise nicht geht:
Den ganzen addRow-Zeilen-Block auch in eine js-Datei zu packen und reinzusourcen (ginge schon, nur werden dann die %<...> Werte dann nicht vom CL-Webserver ersetzt).

Eigentlich müsste man auch an die "zwingend" per Webserver-CL einzufügenden Zellen rankommen, um die auch noch verunstalten zu können.
Oder man müsst eigentlich auch anhand des Zustands so wie beim Einfärben per assoziativem Array Bildcher für jeden Zustand verlinken können, nur irgendwann ist dann das Dateisystem auf der CCU voll.
Aber: Ein symbolischer Link namens logs aus dem Ordner, wo ich auch die func_cs.js hingelegt habe auf den Stick existiert ja schon... Da könnte man der Ordnung halber einen neuen Ordner auf dem Stick für Bildchers machen und einen neuen Link auf den Bilder-Ordner setzen.


Schöne Pfingsten,

der Familienvater

P.S.:
Soll ich aufhören, Euch mit JS-Script-Zeugs und Tabellen-Pimpen zu nerven?

[KSE]

Also ich finde es doch sehr komisch, dass dir noch niemand geantwortet hat.
Ich will auf jeden Fall mehr erfahren, da ich alles über den WebServer realisieren will.

Interessant wäre natürlich, wenn anstatt einer Tabelle die einzelnen Messwerte/Aktoren auf einem Hintergrundbild über Positionsangaben
angeordnet werden könnten.

Gruß
KSE

[Familienvater]

Moin KSE,

schön, das mal jemand auf den "alten" Kram antwortet...
Das von Dir gewünschte ist sicherlich realisierbar, hobbyquaker hat es ja mit seinem DashUI hingekriegt, aber das ist mehr als nur eine viertel-Stunde googlen und try-and-Error.
Erschwerend kommt hinzu, das die Webseiten, die CL ausliefert, auf der CCU beim ausliefern dynamisch erzeugt werden, um den Status eines Aktors in der Visu upzudaten müsste man dauernd die Seite neuladen, da soetwas wie ein Push über den Webserver von CL nicht möglich ist. Das würde nur gehen, wenn man die gesamte Kommunikation von Visuwin Reverse-Enginered, und dann mit der ExecEngine über den für VisuWin vorgesehenen Port spricht und sich für gepushte Updates registriert. Dann ist aber das Problem mit 3 Sessions, mehr als 3 aktive Clients an einer ExecEngine werden nicht unterstützt. Und wann die ExecEngine eine abgestürzte Session wieder freigibt weiß ich, habe ich noch nicht getestet.

Ich habe meinem JS noch ein bisschen Formatierungs-Optionen beigebracht, aber ich bin noch nicht dazu gekommen, die zwingend für die Eingabe von Webserver-CL generierten HTML-Tabellenzeilen per JS zu identifizeren und nachträglich umzumodeln. Und zur Zeit hat das auch bei mir keine hohe Priorität, ich habe eh schon viel zu viel Zeit damit verdaddelt

Der Familienvater

[Familienvater]

Moin,

es gibt mal wieder neues von der Pimp-My-Webserver mit Javascript-Front

Ich habe mich immer geärgert, das ich der HPCL-Website kein FavIcon geben kann, alle Seiten der CCU haben das gleiche Icon bei den Lesezeichen gehabt.

FavIcon1.png (9.48 KiB) 2067 mal betrachtet

Jetzt ist es besser, die HPCL-Webseite auf der CCU hat ihr eigenes Favicon (getestet mit Firefox, IE11 und Chrome...)

Der kleine Block muss in eine HTML-Einfügung der Webseitendefinition (jeder Seite!, je nach Gusto kann man es auch in eine Funktion packen, wenn man eh eine .js-Datei hat, die man lädt):

Code: Alles auswählen

<SCRIPT language="javascript">
var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = '/addons/contronics/hpcl.ico';

document.getElementsByTagName('head')[0].appendChild(favicon);
</SCRIPT>

Das Icon eures Geschmack müsst Ihr auf die CCU hochladen, wer will könnte aber auch das Icon einer fremden Webseite angeben. Ich habe einfach das Icon aus dem HPCL-Editor auf dem PC extrahiert, und mit winscp auf die CCU (bei der CCU1 in /www/addons/contronics) gepackt.

Schönen Sonntag noch,

der Familienvater

[AFi]

Hi,

habe diesen Thread über die Diskussion "Grundrisszeichnung für Hintergrund CL Software" entdeckt und muss eigentlich bestätigen, dass ich eine WEB-Seite besser finde als eine APP auf einem Tablet.

Wenn ich in diesem Thread alles richtig verstehe wird im WEBServer durch Javascript die Seite verschönert. Javascript ist jetzt wirklich nicht meine Welt. Ist es denkbar mit einer Software (z. B. MS Word) die vorhandene WEBSeite auf der CCU zu ergänzen bzw. zu ersetzen?

Gruß AFi

[Familienvater]

Hi,

eher nicht. Die "eigentliche" Webseite wird dynamisch zusammengebaut, aus den "Anweisungen", die in den *.sht-Dateien stehen.
Man muss eben "nachträglich", nachdem die Seite dynamisch zusammengebaut wurde, die "Document-Struktur" anpassen, in dem ich ich z.B. selbst nachträglich Zeilen an die vom Webserver generierte Tabelle anhänge/zwischendrin reinfummel. Damit kann man theoretisch alles machen, wenn man nur genug javascript hintendran schreibt.
Wenn Du nur Werte anzeigen willst, bist Du relativ frei bei dem, was Du machen kannst, weil der Webserver beim "dynamischen" zusammenbauen der Webseiten auch z.B. den javascript-Code oder auch anderen Benutzerdefinierten-HTML-Code auf zu ersetzende Schlüsselwörter prüft (<%OBJEKT>, oder <%OBJEKT.VARIABLE>). Je nach HPCL-Objekt/Variablen-Typ kommen dann aber Strings wieder in Quotes, die man ggf. nicht sehen will, und dann braucht es mit meinen Kenntnissen javascript, um das zu ändern/umzuformatieren, seit dem HPCL die Option bietet, das Dezimaltrennzeichen festzulegen, hat sich auch die Ausgabe der Werte vom Webserver geändert, früher waren Gleitkommazahlen schön mit . zur Abtrennung des Nachkommaanteils, jetzt kommt per Default ein ",", was man erstmal wieder mühsam ersetzen muss, um dann wieder ein Gleitkommawert in javascript zum Rechnen zu haben.
Zum Steuern/Modifizieren taugt das aber alles weniger, weil da bereits in der PC-Webserver-Software der Objektname in den Objektindex gewandelt wird, weil das setzen im Webserver nur über den Objektindex passiert (deswegen müssen die Webseiten peinlich-genau zum Projekt passen, sonst ändert man irgendwas, evtl. sogar eine eigentlich fixe String-Konstante im laufenden Projekt). Oder man müsste selbst von der Webseite aus irgendwie das webCLI-Interface ansteuern, womit man ja auch Objekte/Variablen mit ihrem Namen setzen kann. Aber das müsste auch "irgendwie" mit javascript oder so passieren, weil sonst bekäme man als Ergebnis der Änderung die RESULT->OK Meldung vom WebCLI, und nicht die neu geladene Webseite mit den geänderten Werten.

Der Familienvater