Layout von Widgets anhand einer html-table ?

[navino]

Hallo,

ich habe mal eine Frage zum organisieren von Widgets auf einer View:

Das folgende Bild sind in den verschiedenen Browsern unterschiedlich aus.

Hier noch das widget dazu:

[{"tpl":"tplHtml","data":{"visibility-cond":"==","visibility-val":1,"refreshInterval":"0","html":"

Fenster und Türen

\n

Küchenfenster vorne

\n

Küchenfenster seite

\n

Esszimmer-Tür

\n

Esszimmer-Fenster

\n

Wohnzimmer-Tür

\n

Wohnzimmer-Fenster

\n

Studio-Tür

\n

Studio-Fenster

\n

Gästetoilette

\n

Hausstür

\n

Arbeitszimmer

\n

Schalfzimmer

\n

SS-Bereit

\n

Status Alarmanlage

\n

Alarmlampe

\n"},"style":{"left":"8px","top":"3px","width":"344px","height":"623px","border-width":"4px","border-style":"solid","border-color":"#ffffff","border-radius":"25px","background-color":""},"widgetSet":"basic"}]

Ich würde das Layout gerne mit HTML-Tabellen machen (in der Hoffnung, das es dann auf den Browsern ähnlicher aussieht).

Und dann in der jeder Zeile, in der Spalte 1 die Beschriftung und Spalte 2 das widget einfügen (momentan hier ein tplValueListHtml8).

Ich kann ja vieles per Drag and Drop machen, bekomme es aber nicht hin, in die 2 Spalte das widget einzufügen.

Wie kann ich das machen? Vielleicht ist das auch keine gute Idee mit einer Tabelle??

Gruß

navino
639_tabelle.jpg

[pix]

Hallo navino,
@navino:

Hallo,
ich habe mal eine Frage zum organisieren von Widgets auf einer View:
Das folgende Bild sind in den verschiedenen Browsern unterschiedlich aus.
Hier noch das widget dazu:
[{"tpl":"tplHtml","data":{"visibility-cond":"==","visibility-val":1,"refreshInterval":"0","html":"

Fenster und Türen\n

Küchenfenster vorne\n

Küchenfenster seite\n

Esszimmer-Tür\n

Esszimmer-Fenster\n

Wohnzimmer-Tür\n

Wohnzimmer-Fenster\n

Studio-Tür\n

Studio-Fenster\n

Gästetoilette\n

Hausstür\n

Arbeitszimmer\n

Schalfzimmer

\n

SS-Bereit\n

Status Alarmanlage

\n

Alarmlampe\n"},"style":{"left":"8px","top":"3px","width":"344px","height":"623px","border-width":"4px","border-style":"solid","border-color":"#ffffff","border-radius":"25px","background-color":""},"widgetSet":"basic"}]

Ich würde das Layout gerne mit HTML-Tabellen machen (in der Hoffnung, das es dann auf den Browsern ähnlicher aussieht).
Und dann in der jeder Zeile, in der Spalte 1 die Beschriftung und Spalte 2 das widget einfügen (momentan hier ein tplValueListHtml8).
Ich kann ja vieles per Drag and Drop machen, bekomme es aber nicht hin, in die 2 Spalte das widget einzufügen.
Wie kann ich das machen? Vielleicht ist das auch keine gute Idee mit einer Tabelle??
Gruß
navino
ich verstehe das Problem. Du kannst allerdings keine Widgets innerhalb von Tabellen anordnen. Die einzige Möglichkeit, HTML Tabellen in VIS zu editieren, ist das Widget Basic HTML. Innerhalb des Widgets kannst du aber nur HTML Befehle verwenden, bzw.die VIS - Bidnings (Objekte in geschweiften Klammern).
Somit ist die Umsetzung als Tabelle in VIS nicht möglich.
ABER:
Du kannst die Logik hinter den Anzeigen der Zustände in der zweiten Spalte in Javascript verlegen und dort den passenden HTML Befehl inkl. CSS Formatierung gleich zusammenbauen. Also statt das tplValueListHtml8 zu nutzen, legst du im Skript - je nach Zustand des Fensters - gleich den richtigen HTML Code für die Anzeige im Browser in das entsprechende Objekt und bindes das Objekt später via Binding mit geschweiften Klammer in die HTML-Tabelle ein.
Hier ein Beispiel Code für ein Fenster.

```__/* ********************************
   *  RHS Wohnzimmer Fenster links
   ******************************** */
createState('Status.HTML.Wohnzimmer.Fenster.links', {forceCreation: true}, {name: 'Status Wohnzimmer Fenster links'});
on("hm-rpc.0.LEQ0283197.1.STATE"/*Fenster links Wohnzimmer.STATE*/, function (data) {
    var zustand = data.newState.val;
    var html_text = "";
    if (zustand === 0 || zustand === "0") { // Fenster zu, grün, Text Fenster geschlossen
        html_text = "

zu";
    } else if (zustand === 1 || zustand === "1") { // Fenster gekippt, gelb, Text Fenster gekippt
        html_text = "

gekippt ";
    } else if (zustand === 2 || zustand === "2") { // Fenster offen, rot, Text Fenster geöffnet
        html_text = "

offen ";
    }
    setState("javascript.0.Status.HTML.Wohnzimmer.Fenster.links", html_text);
});
`
Bei mehreren Fenstern/Türen et. kann man natürlich weiter substituieren und Code sparen

zu","

gekippt ","

offen "] // Ausgabe 0,1,2
var html_text_tfk = ["

zu","

offen "] // Ausgabe 0,1


/* ********************************
   *  RHS Wohnzimmer Fenster links
   ******************************** */
createState('Status.HTML.Wohnzimmer.Fenster.links', {forceCreation: true}, {name: 'Status Wohnzimmer Fenster links'});
on("hm-rpc.0.LEQ0283197.1.STATE"/*Fenster links Wohnzimmer.STATE*/, function (data) { 
   log('Kontrollausgabe Fenster WZ links' + data.newState.val); // optional
   setState("javascript.0.Status.HTML.Wohnzimmer.Fenster.links", html_text_rhs[data.newState.val]);
});

/* **************************
   *  TFK WC Fenster
   ************************** */
createState('Status.HTML.WC.Fenster.TFK', {forceCreation: true}, {name: 'Status WC Fenster TFK'});
on("hm-rpc.0.LEQ0283197.1.STATE"/*Fenster links Wohnzimmer.STATE*/, function (data) { 
   log('Kontrollausgabe Fenster WC Fenster' + data.newState.val); // optional
   setState("javascript.0.Status.HTML.Wohnzimmer.Fenster.links", html_text_tfk[data.newState.val]);
});

// und hier weitere anfügen
`
Dann die Tabelle im Basic HTML Widget in VIS bauen:

Fenster und Türen
Beschreibung
Zustand

Wohnzimmerfenster links
{javascript.0.Status.HTML.Wohnzimmer.Fenster.links}

WC-Fenster
{javascript.0.Status.HTML.WC.Fenster.TFK}

`
Und schließlich oben drüber noch die Style Anweisungen in CSS (die Radien sind geschätzt, habe den Code nur hier im Forumeditor geschrieben, nicht getestet):

`
Die Adressierung ist sehr genau genommen, das geht natürlich auch einfacher (___.gruen_ statt ___table\#fenster\_tueren tbody.fenster\_tueren\_body td.zustand div.gruen_), aber so ist zweifellos klar, welcher Teil welcher Tabelle gemeint ist. Bei mehreren Tabellen in deinem VIS - Projekt kommt es sonst evtl. zu Verwirrung.
Ich sehe, dass das ne Menge Arbeit ist. Aber man macht das ja nicht ständig. Und für die Ausgabe auf verschiedenen Browser scheint das ein guter Weg zu sein. Leider muss man im Kopf neben der Bedienung von VIS auch noch mit HTML, CSS und Javascript hantieren.
Tipp: Habs auch schon an anderer Stelle gesagt. Es empfiehlt sich, die CSS Anweisungen ins Basic HTML Widget innerhalb der Style Anweisung zu schreiben. Sie sind dann alle zusammen, man weiss zu welcher Tabelle sie gehören (die waird ja im gleichen Widget eingebunden) und sie sind auch leicht zu ändern. Ich verstehe, dass eigentlich der CSS-Reiter dazu gedacht ist. Mir sind aber bereits mehrmals CSS-Anweisungen aus dem Reiter verloren gegangen. Daher vertraue ich lieber auf das Widget.
******EDIT 18.9.2015 (pix): Den Tipp muss ich zurücknehmen! Sorry. Ich empfehle, den CSS-Editor in VIS zu nutzen. Also nicht die Style-Anweisungen ins Widget schreiben, sondern in den Editor rechts im Reiter CSS.**
Gruß
Pix

[navino]

Hallo Pix,

und Danke für das ausführliche Beipiel! Ich glaube dafür benötige ich wohl das Wochenende zum verstehen und zum umsetzen.

Gruß

navino