Interesantes Design...vielleicht auch bald mit CometVisu?!

[netsrac]

Bin schon auf ein anfängliches Problem gestossen. Habe mal "pitchblack" (wegen den 12 cols) als Ausgang genommen.

Dort ist ja eine Spalte 8.33% von der Bildschirmbreite.

Um die Kacheln darzustellen müsste ja "width = height" sein. Sehe im Moment keinen Weg, das nur über das CSS zu machen, oder sehe ich das falsch?!

Mit "colspan=1 rowspan=1" würde soll also eine einfache Kachel gezeigt werden, mit "colspan=2 rowspan=2" eine größere...

Aber wie bringe ich ihm das mit der Höhe bei?!


Müsste ich nicht in der "design_setup.js" folgendes dazu nutzen können?

var cw = $('.widget').width();
$('.widget').css({'height':cw+'px'});

Oder hat zum Zeitpunkt wo die design_setup.js aufgerufen wird, die template engine noch nicht "fertig"?

[Chris M.]

So was in der Art sollte schon funktionieren. Notfalls einfach verzögern, bis die Seite geladen wurde...

Zum Umfärben ggf. mal bei Planet schauen.

[netsrac]

So was in der Art sollte schon funktionieren. Notfalls einfach verzögern, bis die Seite geladen wurde...

Zum Umfärben ggf. mal bei Planet schauen.

Da ich die Höhe sowieso beim Resize anpassen will hilft das (scheinbar auch schon beim Laden):

$(window).resize(function() {
  var cw = $('.widget').width();
  $('.widget').css({'height':cw+'px'});
});

Habe jetzt mal ein bischen weiter gespielt...(siehe Screenshot). Eine Kachel besteht immer aus zwei Elementen, die mit <group> zusammengefasst werden. Damit kann man oben einen Text und unten einen GA Zustand abbilden.

So far so good...allerdings stoße ich da noch auf so einige Probleme:

Die Temperatur besteht aus einer "<page>" und einem "<info>" Element zum Anzeigen der Temperatur. Ich möchte natürlich, das ein Klick auf die gesamte Kachel zur Page führt und nicht nur, wenn man das page-label trifft.

Umgekehrt ist das bei "StudioDG". Das ist eine Gruppe von <text> (fürs Label) und einem <toggle> Element. Hier löst nur ein Klick auf das <toggle> Element etwas aus.

Daher zwei Fragen:

Gibt es die Möglichkeit, den Klick auf die gesamte Gruppe zu legen?

Das Umfärben der background-color der gesamten Gruppe ist mir auch noch nicht gelungen...vermutlich müsste ich hierfür was im Code ändern, oder?!

Ich denke man müsste der <group> zusätzliche Funktionen / Parameter mitgeben...

Hier mal die Config für den Screenshot:

<group>
    <text>Demo Icon</text>

    <switch mapping="audio_mute">
      <address transform="DPT:1.001" type="">12/7/1</address>
    </switch>

</group>
<group>
    <text>Studio DG</text>
      <toggle mapping="On_Off" styling="Green_Red">
        <address transform="DPT:1.001" readonly="readonly" writeonly="false" variant="">1/3/30</address>
      </toggle>
</group>
<group>
    <page name="Temperaturen" label="Demo Page" styling="Red_Green">
      <diagram rrd="TemperaturAussen" unit="°C" series="day" period="1" datasource="AVERAGE" refresh="300" linecolor="#ff9600" width="600" height="300" previewlabels="true" popup="true">
        <label>Temperatur Aussen</label>
      </diagram>
    </page>
    <info format="%.1f °C">
      <label></label>
      <address transform="DPT:9.001" readonly="false" variant="">7/5/101</address>
    </info>
</group>

[Chris M.]

Eine Kachel besteht immer aus zwei Elementen, die mit <group> zusammengefasst werden. Damit kann man oben einen Text und unten einen GA Zustand abbilden.

So far so good...allerdings stoße ich da noch auf so einige Probleme:

Die Temperatur besteht aus einer "<page>" und einem "<info>" Element zum Anzeigen der Temperatur. Ich möchte natürlich, das ein Klick auf die gesamte Kachel zur Page führt und nicht nur, wenn man das page-label trifft.
[...]
Gibt es die Möglichkeit, den Klick auf die gesamte Gruppe zu legen?

Nein, es gibt keine Möglichkeit eine ganze Group "aktiv" zu machen.

Was aber geht - und Planet auch so macht (daher der Hinweis dort zu spicken...) - ist bei einem Widget die aktive Fläche zu vergrößern und das Label da hinein zu platzieren.
(Mir ist klar, dass ich von Labels abgeraten habe und empfohlen habe auf Groups mit Text-Element zu gehen. Aber gerade für solche Tricks wird's wohl Labels noch etwas länger geben...)

Das Umfärben der background-color der gesamten Gruppe ist mir auch noch nicht gelungen...vermutlich müsste ich hierfür was im Code ändern, oder?!

Auch das ist bei der Widget-Lösung möglich.

Bei Groups geht das mit den heutigen Möglichkeiten von CSS leider nicht. Hier hätte ich mir eine der Lösungen gewünscht über ein Sub-Element auszuwählen, die z.Zt. diskutiert werden.

Ich denke man müsste der <group> zusätzliche Funktionen / Parameter mitgeben...

So etwas kann man andenken. Hier wird es aber schwierig die richtige Linie zwischen zu wenig und zu vielen Features (Komplexität, Bloat) zu finden. Und wie man das intuitiv umsetzt.
Für Vorschläge bin ich gerne offen.

[makki]

Nunja...mit der Farbe wird das schon schwer. Würde ja gerne die "Kacheln" in Abhängigkeit einer GA einfärben. Ist z.B. ein Fenster im Haus Offen ..

Grundsätzlich ja, ich hab da noch was zu ersetzen
Das ist für mich aber z.B. klassisch Logik, nicht Visu (also die Auswertung, nicht die Darstellung)
Im Kern wär ich aber dabei, die Visu soll mir auf einen Blick vermitteln was hier Sache ist! (Nicht wie das Einsteiger oft miss-interpretieren - den Nachbarn mit 3D beeindrucken )

Makki

[netsrac]

Grundsätzlich ja, ich hab da noch was zu ersetzen
Das ist für mich aber z.B. klassisch Logik, nicht Visu (also die Auswertung, nicht die Darstellung)
Im Kern wär ich aber dabei, die Visu soll mir auf einen Blick vermitteln was hier Sache ist!

Einspruch Euer Ehren! :-) Was ist dabei die Logik?

Ich habe doch eine GA, die mir z.B. den Gesamtstatus der Fenster zeigt - 0, wenn alle zu, 89 wenn irgendwo was auf Kipp und 255 wenn irgendwo ein Fenster offen ist.

Ähnlich dem Styling würde ich die Kachel dann entsprechend der GA einfärben wollen - da ich den Wert habe, geht's ja nur um die "Visu"alisierung :-)

Nein, es gibt keine Möglichkeit eine ganze Group "aktiv" zu machen.

Was aber geht - und Planet auch so macht (daher der Hinweis dort zu spicken...) - ist bei einem Widget die aktive Fläche zu vergrößern und das Label da hinein zu platzieren.
(Mir ist klar, dass ich von Labels abgeraten habe und empfohlen habe auf Groups mit Text-Element zu gehen. Aber gerade für solche Tricks wird's wohl Labels noch etwas länger geben...)

Okay...aber ich denke, was wird schwer. Betrachtet man meinen Screenshots, so passiert doch folgendes:

Kachel 1 und 2 haben ein Label (oder auch Text Element) und darunter den "Aktor" - ich müsste also den aktiven Bereich nach oben vergrößern, damit die gesamte Fläche Aktiv ist. So far so good...

Bei der 3. Kachel handelt es sich aber um eine Page - da ist also das obere Element das "aktive" und ich müsste nach unten vergrößern, damit die gesamte Kachel aktiv wird,

Problem, oder?!

[Chris M.]

Bei der 3. Kachel handelt es sich aber um eine Page - da ist also das obere Element das "aktive" und ich müsste nach unten vergrößern, damit die gesamte Kachel aktiv wird,

Problem, oder?!

Das "Problem" bei 3 ist, dass Du ein neues Widget generieren möchtest - eine Page mit Info.

Neue Widgets kann man aber nicht im Design oder per Config generieren, dass muss man im Code machen (z.B. in der structure_custom.js in der deine persönlichen Widgets liegen - kleines Problem dabei: das jemand sein eigenes Page-Widget schreiben will habe ich nicht bedacht, das könnte steinig werden, insb. was die Wartbarkeit angeht)

[Robert_Mini]

Das "Problem" bei 3 ist, dass Du ein neues Widget generieren möchtest - eine Page mit Info.

...das jemand sein eigenes Page-Widget schreiben will habe ich nicht bedacht, das könnte steinig werden, insb. was die Wartbarkeit angeht)

Könnte man hier nicht eine Group aus Text und PageJump (analog Navbar) oder Group aus Page und PageJump verwenden? Zweiteres würde dann auch gleich im ganzen Group-Feld anklickbar sein, oder? Außerdem wäre das Aussehen dann auch analog zur mittleren Group im Beispiel.

Nur so eine Idee, hoffe das ist nicht kompletter Mist...

lg Robert

[Chris M.]

Damit bekommst Du leider nicht die <info> mit hinein.

Was aber zukunftsvertäglich gehen müsste wäre ein eigenes, neues Widget zu schreiben, das <pagejump> mit <info> kombiniert.

Von daher ist die Denkrichtung gar nicht so falsch gewesen

[netsrac]

Das "Problem" bei 3 ist, dass Du ein neues Widget generieren möchtest - eine Page mit Info.

Interessanterweise habe ich es mittels CSS geschafft, den aktiven Bereich (ich glaube über das pedding) so zu erweitern, dass der Click auch unten beim info widget angenommen wird.

Was mir allerdings nicht gelingt, ist es bei Kachel 1 oder 2 das untere info widget nach oben zu erweitern, so dass oben das text widget mit aktiv wird.

Aber klar, da könnte ich jetzt mit 'nem Label für das info widget arbeiten.

Generell ist es natürlich schwer, hier eine Logik (und damit eine Machbarkeit für Andere) aufzustellen, aber so wie ich es sehen muss man folgendes machen:

1) Oben Text und unten Aktives Widget:

Text mittels Label setzen, nur ein Element für eine Kachel


2) Oben aktives Widget (z.B. Pagejump):

Zwei Elemente mittels Group verbinden, wobei das via CSS die aktive Fläche nach unten verlängert wird.


Problem bei 1) muss die Höhe des Widgets gleich der Breite gesetzt werden. Bei 2) hingegen muss die Höhe nur die halbe Breite haben.


Während ich das hier schreibe kommt mir allerdings noch eine Idee, die ich jetzt zwar nicht ausprobieren kann: Vielleicht kann man generell immer eine Gruppe von zwei Elementen nehmen wobei oben das aktive Element ist und unten das passive. Mittels CSS (und damit vermutlich als Parameter zum Widget) müsste man angeben, ob das jeweilige Element oben oder unten steht. Aber das nur in der Theorie...muss ich mal in CSSEdit probieren...

[makki]

Einspruch Euer Ehren! :-) Was ist dabei die Logik?

Einverstanden, das ist keine Logik

Makki

[greentux]

Spricht etwas dagegen, das eine Page optional ein Info haben kann? Das wäre dann auch abwärtskompatibel. Ich überblicke da aber nur <50%

[Chris M.]

Spricht etwas dagegen, das eine Page optional ein Info haben kann? Das wäre dann auch abwärtskompatibel.

Ohne in de Code geschaut zu haben: ich denke aus technischer Sicht nichts.

Aber der nächste will statt dessen einen Trigger, oder Slider, oder ColorChooser, oder...

Für genau so einen Fall sind eigentlich die Groups gebaut worden - gruppiere das zusammen, was hier logisch zusammen gehört.

Im konkreten Fall reichen aber eben die Groups nicht mehr aus. Daher würde ich lieber die erweitern - mir fehlt nur gerade die passende Idee (s.o.)

[netsrac]

Im konkreten Fall reichen aber eben die Groups nicht mehr aus. Daher würde ich lieber die erweitern - mir fehlt nur gerade die passende Idee (s.o.)

Naja, man müsste für die "groups" ein "onClick" definieren können...nur die Frage, wie man das dann auf ein beliebiges Widget biegt...

...da bin ich auch ein wenig ratlos...

[Robert_Mini]

Ohne in de Code geschaut zu haben: ich denke aus technischer Sicht nichts.

Aber der nächste will statt dessen einen Trigger, oder Slider, oder ColorChooser, oder...

Ich glaube das ist in diesem Fall nicht ganz richtig.

Ich leide auch immer ein wenig daran, dass eine Page keine Info hat, insofern gefällt mir Greentux's Vorschlag gut.

Mit Slider etc. kombinieren geht aus meiner Sicht in die flasche Richtung =>
1) Feld klicken und Status ändern
2) Feld klicken (mit sichtbarer Info) und Unterseite aufrufen.

Alles andere als diese 2 Varianten würde das Feld in 2 Bereiche mit unterschiedlichem Verhalten aufteilen, was diesem Visu-Gedanken aus meiner Sicht widerspricht.

lg
Robert

PS: Page+Info Widget gehört in jedem Fall zur CV Grundausstattung .