Re: WebServerCL, Ausgaben mit Javascript pimpen
Verfasst: 19.05.2013, 23:29
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...) 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:
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...)
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):
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?
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...) 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ü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ü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üd-West','','',-3);
HTML2=addRow('TabObj',9,'center|<br>Sü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);
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];
}
}
}
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
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?