Anfängerfragen VIS-2

[UlliJ]

@io2345

da sind wir so langsam bei der Strukturierung der Vis und bei der der Darstellung für unterschiedliche Geräte.

• die Startseite besteht hier (das ist frei und individuell) aus Wettervorhersage, Kalender und Wlan Zugang für Gäste. Andere Seiten für das Menü wären z.B. Heizung gesamt oder einzelne Räume, Rechnerstatus, Iob Status mit Log, Status der VM's unter Proxmox, Kameras, Garten etc.

• hauptsächlich wird ein ipad für die Vis benutzt, gelegentlich (per VPN) auch ein Smartphone

Da wirst Du Dir selbst überlegen müssen wie das Ganze bei Dir aussehen soll und wo das wie bedient werden muss. Das Teil ist ein lebendes Objekt und entwickelt sich auch weiter...
Das ist für mich der Grund gewesen auf die Darstellung in einzelnen Karten zu gehen. Die passen auf dem Telefon und auf dem ipad, Letztlich muss auch die bessere Hälfte damit klar kommen und ich habe sie in die Gestaltung eingebunden. Hintergrund dazu: auch die Steuerung des TV, Aufnahmen, Spotify und Co geht nur über das ipad, als fall back über 3 Fernbedienungen.
Klar ist jedenfalls: mit Vis-1/2 geht das alles, aber es ist Zeitaufwand und Du wirst Deine eigene Richtung/Aussehen finden müssen. Eine Beschränkung seitens Vis-1/2 gibt es nicht, solange die Objekte/Scripte in iob verfügbar sind.

Deine Frage: bei Dir ist die Seite mit dem Aufruf von vorher die Startseite, aber da ist vielleicht noch eine andere die Du als Startseite haben willst

[io2345]

@ullij Also Startseite ist frei wählbar. Und wie funktioniert das mit der Navigation, also dass man zwischen den angezeigten Seiten wechseln kann? Da muss ja irgendwo ein Link auf der Seite sein, dass man vor und zurück kommt

[UlliJ]

@io2345 sagte in Anfängerfragen VIS-2:

Und wie funktioniert das mit der Navigation,

jede Seite, die Du im Menü links haben möchtest, braucht einen Eintrag im Reiter "Seite" (1) unter "Navigation" (2). Da werden auch die Symbole, Farbe, der Name, Menüausrichtung, Reihenfolge etc. festgelegt

Bei (3) legst Du die Spaltenbreite fest. Wird für das Verhalten bei Änderung der Fenstergröße gebraucht.

(4) ist die Anwendungsleiste mit Farbeinstellung, Titel, etc

[io2345]

@ullij Ein Importfunktion für andere Visualisierungen gibt es wahrscheinlich nicht (?) Ich hätte nämlich noch eine Seite in HABpanel erstellt, die ich übernehmen könnte. Ist aber wahrscheinlich auch kein großes Ding, das neu zu erstellen...

[UlliJ]

@io2345 sagte in Anfängerfragen VIS-2:

Ein Importfunktion für andere Visualisierungen gibt es wahrscheinlich nicht (?)

nicht das ich wüsste

[io2345]

@ullij In Beitrag 14 haben wir ja über diese Mini-Symbole gesprochen. Die outlined-Versionen sollten (nach meinem Verständnis) ja alle verfügbar sein.
Ich versuche aber vergeblich, das Symbol "mdiBatteryArrowDownOutline" anzeigen zu lassen. Irgendwas mache ich wohl falsch.

Die Widgets passend zu platzieren, damit die in gleicher Reihe und Höhe sind, ist per Maus eine ganz schöne Fummelei. Gibt's da nichts halb- oder vollautomatisches?

[UlliJ]

@io2345 sagte in Anfängerfragen VIS-2:

Ich versuche aber vergeblich, das Symbol "mdiBatteryArrowDownOutline" anzeigen zu lassen. Irgendwas mache ich wohl falsch.

das liegt vermutlich an dem Material Design Webfont Adapter. Die Symbole kommen Stück für Stück dazu und dann muss der Adapter/die Schriftdatei aktualisiert werden. Also nicht Dein Fehler... ein anderes icon nehmen oder wie oben aus 2 einzelnen zusammen setzen

Auswahl und Anordnen von Widgets
Auswahl mehrerer widgets geht über ein Fenster mit der Maus (links klick und ziehen) oder shift/strg+klick

wenn mehrere widgets ausgewählt sind hast Du oben verschiedene Ausrichtungsfunktionen zur Verfügung.

Alternativ kannst Du rechts unter "CSS Alllgemein" mit

• Position "none",
• links "xxx" pos horizontal absolut in pixel
• oben "xxx" pos vertikal absolut in pixel
  die Anordnung der widgets festlegen.
  Die Position/größe/breite/höhe kann auch eine Berechnung enthalten, wie z.B. calc(50% - 20px)
  50% der Seitengröße und nach links/oben um 20px versetzt (20px=halbe Größe des widgets) = das widget ist in der Mitte der Seite angeordnet

[io2345]

@ullij Wie bringt man eigentlich die Unter-Karten auf die Startseite "EnergieMain" und wie legt man die Position fest, wo die zu liegen kommen sollen? Ich wollte da nämlich ein paar runter nehmen und eigene dafür einfügen

[UlliJ]

@io2345
jede der Unterkarte ist ein "im widget anzeigen". Ein anderer view wird über das dropdown rechts unter Allgemein-Aussicht zugeordnet

@io2345 sagte in Anfängerfragen VIS-2:

wie legt man die Position fest, wo die zu liegen kommen sollen?

bei den Einstellungen der Seite "Energie-main" unter
CSS Allgemein: "flex" einstellen

Beim einzelnen "im widget anzeigen" unter CSS Allgemein:

position: relative
width: 100%
Höhe: hier 508 (die Karte ist doppelt so hoch wie die anderen auf der Seite)

Die Höhe aller Karten/Anwendungsleiste oben zusammen entspricht bei mir der Auflösung des Gerätes auf dem die vis im full-screen modus genutzt wird.
Die Anzahl der dargestellten Spalten/widgets nebeneinander hatten wir oben schon mal. Das ist die min. Spaltenbreite die im aktuellen Fenster für ganze Spalten verfügbar sein muss um in der Darstellung eine Spalte hinzu/weg zu nehmen. Auch hier ist die Breite des Menüs zu berücksichtigen...einfach ausprobieren.

Auch mit den anderen Werten bzgl. Größen, flex/block, Spaltenbreite der Seite kannst Du einfach mal spielen und die Auswirkungen bei Änderung der Fenstergröße anschauen.

Reihenfolge der Karten kannst Du über die Pfeile an den widgets anpassen

[io2345]

@ullij Das mit der Navigation hab ich immer noch nicht kapiert. Wenn ich den Haken bei "Seite" - > "Navigation" setze, erhalte ich die linke Navigationsspalte, aber da ist ja nur die Hauptseite selbst enthalten. Wie bekomme ich die anderen Karten in die Navigation? Denn wenn ich auf einer Karte "Seite" - > "Navigation" einschalte, dann hat nur die Karte selbst eine Navigation, und so soll das ja nicht sein.

[UlliJ]

@io2345
ich versuchs mal mit einem kleinen video

• neue Seite anlegen
• unter Register "Seite - Navigation"
• Navi aktivieren
• Name eintragen
• Position im Menü festlegen
• Symbol anlegen
  fertig...
  

wenn Du schon eine Seite im Menü hast, kannst Du auch die kopieren, umbenennen und in die vorhandenen "in widgets anzeigen" die neuen views (cards) einbinden. Hoffe ist jetzt etwas klarer

[io2345]

@ullij So hatte ich es gemacht. Allerdings hat jede Karte, bei der ich "Navigation" aktiviere, nun auch das Navigationsmenü auf der Karte selbst mit drauf. Schau mal:

[UlliJ]

@io2345

verstanden, Vis macht genau was Du eingestellt hast.

Du hast bei jeder "Karte" die Navigation aktiv. Der Aufbau dieser Vis besteht aber aus Seiten die den Inhalt einzelner/mehrerer Karten darstellen, also Seiten innerhalb einer Seite. Die Navigation wird ausschließlich für die Hauptseiten aktiviert und nicht für jede Karte. Die Karten sind in der Vis-Struktur natürlich auch Seiten, haben aber keine Navigation.

Du willst andere Bereiche in der Vis anlegen.
2 Möglichkeiten:

• eine neue Seite mit aktiver Navigation anlegen, widgets zur Anzeige einer anderen view ("Karten")auf der Seite einfügen, die views zuweisen, alles so hinschieben bis es Dir gefällt

oder

• deine Seite EnergieMain kopieren, ein neuer Name für die Seite muß beim kopieren ohnehin vergeben werden, die Einstellungen bei der Navigation (Symbol, Position im Menü, etc) anpassen. Auf dieser neuen Seite den bereits vorhandenen "Karten" die neuen views/Seiten zuweisen.

Letztere hat den Vorteil des minimalen Aufwandes für die Formatierung der Seite selbst und die Seiten unterscheiden sich nur durch den Inhalt, aber nicht in der Ansicht.

Besser? ist wohl missverständlich mit den Seiten, views und cards/Karten

[io2345]

@ullij said in Anfängerfragen VIS-2:

Auf dieser neuen Seite den bereits vorhandenen "Karten" die neuen views/Seiten zuweisen.

An der Stelle klemmts. Ich habe "EnergieMain" nach "Übersicht" kopiert. Da liegen dann schon drei Widgets auf der Seite, die drei verschiedene Karten repräsentieren - nämlich die, die in "Allgemein" -> "Aussicht" eingestellt sind.
Aber wie bringe ich die in die linke Navigationsspalte?

[UlliJ]

@io2345
stell doch bitte mal einen export des projektes hier rein. Ansonsten auch gerne meeting wie bereits angeboten.
Die Zusammenfassung, für die Beginner, schreibst Du

[io2345]

@ullij Der Export, falls das so geklappt hat...
2025-08-02-Dashboard.zip

[UlliJ]

@io2345
hat geklappt

Habe scheinbar noch nicht richtig verstanden, wie Deine Anordnung der Seiten/"cards" aussehen soll

[io2345]

@ullij Das weiß ich selber noch nicht so genau. Habe halt jetzt mal mit den vier Karten auf der Übersichtsseite angefangen:

Balkonkraftwerk, PV und Jalousiensteuerung sind weitgehend fertig und einsatzbereit, die "Info"-Seite ist als Platzhalter da und wird später mit Werten zur Wärmepumpe und Heiz-/Kühlkreis befüllt.

In der linken Spalte der Übersichtsseite soll man dann eben zu den einzelnen Karten navigieren können.

[UlliJ]

@io2345 sagte in Anfängerfragen VIS-2:

Das weiß ich selber noch nicht so genau

kann Jahre dauern...

Die einzige Möglichkeit, die mir einfällt. Jede Karte die einen eigenen Menüeintrag hat muss es 2x geben

1. als Karte für das view in widget anzeigen
2. als Seite (wegen dem Menüeintrag) mit aktiver Navigation.
   

Die Seiten sehen etwas leer aus... aber das wird, wenn Info's dazu kommen.
Weiter kannst Du für die Übersichtsseite die Spaltenbreite auf 4 Karten anpassen. Dann werden die "cards" nicht so klein.

[UlliJ]

@io2345
es gäbe noch
In der Übersichtsseite ein "inventwo universal widget" über jede Karte legen.
Konfiguration:

[
  {
    "tpl": "tplInventwoWidgetUniversal",
    "data": {
      "bindings": [],
      "type": "viewInDialog",
      "g_common": true,
      "mode": "singleButton",
      "direction": "row",
      "oid": "nothing_selected",
      "httpType": "send",
      "buttonSize": 110,
      "btnSpacing": 10,
      "countStates": 1,
      "dialogWidth": 500,
      "g_attr_group_type_view_in_dialog": true,
      "dialogHeight": 300,
      "dialogPadding": 10,
      "dialogBackground": "rgb(18, 18, 18)",
      "dialogTitleColor": "rgb(255,255,255)",
      "dialogTitleSize": 20,
      "dialogCloseButtonBackground": "rgba(255,255,255,0)",
      "dialogCloseButtonColor": "rgba(255,255,255,1)",
      "dialogCloseButtonSize": 14,
      "dialogBorderRadiusTopLeft": 12,
      "dialogBorderRadiusTopRight": 0,
      "dialogBorderRadiusBottomRight": 12,
      "dialogBorderRadiusBottomLeft": 0,
      "feedbackDuration": 0,
      "g_attr_group_click_feedback": true,
      "backgroundFeedback": "rgba(69, 86, 24, 1)",
      "outerShadowColorFeedback": "rgba(0, 0, 0, 1)",
      "contentBlinkInterval": 0,
      "g_attr_group_state_default": true,
      "outerShadowColor": "rgba(0, 0, 0, 1)",
      "colorPickerColorModel": "hex",
      "g_attr_content_color_picker": true,
      "colorPickerWidth": 200,
      "colorPickerHandleSize": 8,
      "colorPickerHandleMargin": 6,
      "colorPickerComponentsSpace": 12,
      "colorPickerDirection": "vertical",
      "colorPickerBorderWidth": 0,
      "colorPickerShowWheel": true,
      "colorPickerShowSaturation": true,
      "colorPickerShowValue": true,
      "textDecoration": "none",
      "g_attr_group_css_text": true,
      "textMarginTop": 0,
      "textMarginBottom": 0,
      "textMarginLeft": 0,
      "textMarginRight": 0,
      "contentType": "icon",
      "g_attr_group_css_content": true,
      "contentMarginTop": 0,
      "contentMarginBottom": 0,
      "contentMarginLeft": 0,
      "contentMarginRight": 0,
      "contentSize": 40,
      "contentRotation": 0,
      "contentMirror": false,
      "flexDirection": "column",
      "g_attr_group_css_alignment": true,
      "alignItems": "space-between",
      "textAlign": "start",
      "contentAlign": "center",
      "backgroundOpacity": 1,
      "g_attr_group_css_transparency": true,
      "contentOpacity": 1,
      "paddingLeft": 10,
      "g_attr_group_css_spacing": true,
      "paddingRight": 10,
      "paddingTop": 10,
      "paddingBottom": 10,
      "borderRadiusTopLeft": 12,
      "g_attr_group_css_border_radius": true,
      "borderRadiusTopRight": 0,
      "borderRadiusBottomRight": 12,
      "borderRadiusBottomLeft": 0,
      "borderSizeTop": 0,
      "g_attr_group_css_border": true,
      "borderSizeBottom": 0,
      "borderSizeLeft": 0,
      "borderSizeRight": 0,
      "borderStyle": "none",
      "outerShadowX": 2,
      "g_attr_group_css_outer_shadow": true,
      "outerShadowY": 2,
      "outerShadowBlur": 2,
      "outerShadowSize": 1,
      "innerShadowX": 0,
      "g_attr_group_css_inner_shadow": true,
      "innerShadowY": 0,
      "innerShadowBlur": 0,
      "innerShadowSize": 0,
      "view": "cardBalkonkraftwerk",
      "valueTrue": "1",
      "dialogFullscreen": true,
      "name": "navBKW",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "left": "21px",
      "top": "20px",
      "width": "532px",
      "height": "352px",
      "position": "absolute",
      "overflow": "visible",
      "z-index": 35,
      "opacity": "0.5"
    },
    "widgetSet": "vis-2-widgets-inventwo",
    "_id": "i000001"
  }
]

Der z-Index muss größer sein als der der anderen widgets und die opacity auf 0 setzen.
Anzeigt wird die Seite als Dialog im Vollbild

als Alternative
ein "inventwo universal widget" über jede Karte legen.
Konfiguration:

Spoiler

[
 {
   "tpl": "tplInventwoWidgetUniversal",
   "data": {
     "bindings": [
       "dialogWidth",
       "dialogHeight"
     ],
     "type": "viewInDialog",
     "g_common": true,
     "mode": "singleButton",
     "direction": "row",
     "oid": "nothing_selected",
     "httpType": "send",
     "buttonSize": 110,
     "btnSpacing": 10,
     "countStates": 1,
     "dialogWidth": "calc(100% - 50px)",
     "g_attr_group_type_view_in_dialog": true,
     "dialogHeight": "calc(100% - 50px)",
     "dialogPadding": 0,
     "dialogBackground": "rgb(18, 18, 18)",
     "dialogTitleColor": "rgb(255,255,255)",
     "dialogTitleSize": 0,
     "dialogCloseButtonBackground": "rgba(255,255,255,0)",
     "dialogCloseButtonColor": "rgba(255,255,255,1)",
     "dialogCloseButtonSize": 0,
     "dialogBorderRadiusTopLeft": 12,
     "dialogBorderRadiusTopRight": 0,
     "dialogBorderRadiusBottomRight": 12,
     "dialogBorderRadiusBottomLeft": 0,
     "feedbackDuration": 0,
     "g_attr_group_click_feedback": true,
     "backgroundFeedback": "rgba(69, 86, 24, 1)",
     "outerShadowColorFeedback": "rgba(0, 0, 0, 1)",
     "contentBlinkInterval": 0,
     "g_attr_group_state_default": true,
     "outerShadowColor": "rgba(0, 0, 0, 1)",
     "colorPickerColorModel": "hex",
     "g_attr_content_color_picker": true,
     "colorPickerWidth": 200,
     "colorPickerHandleSize": 8,
     "colorPickerHandleMargin": 6,
     "colorPickerComponentsSpace": 12,
     "colorPickerDirection": "vertical",
     "colorPickerBorderWidth": 0,
     "colorPickerShowWheel": true,
     "colorPickerShowSaturation": true,
     "colorPickerShowValue": true,
     "textDecoration": "none",
     "g_attr_group_css_text": true,
     "textMarginTop": 0,
     "textMarginBottom": 0,
     "textMarginLeft": 0,
     "textMarginRight": 0,
     "contentType": "icon",
     "g_attr_group_css_content": true,
     "contentMarginTop": 0,
     "contentMarginBottom": 0,
     "contentMarginLeft": 0,
     "contentMarginRight": 0,
     "contentSize": 40,
     "contentRotation": 0,
     "contentMirror": false,
     "flexDirection": "column",
     "g_attr_group_css_alignment": true,
     "alignItems": "space-between",
     "textAlign": "start",
     "contentAlign": "center",
     "backgroundOpacity": 1,
     "g_attr_group_css_transparency": true,
     "contentOpacity": 1,
     "paddingLeft": 10,
     "g_attr_group_css_spacing": true,
     "paddingRight": 10,
     "paddingTop": 10,
     "paddingBottom": 10,
     "borderRadiusTopLeft": 12,
     "g_attr_group_css_border_radius": true,
     "borderRadiusTopRight": 0,
     "borderRadiusBottomRight": 12,
     "borderRadiusBottomLeft": 0,
     "borderSizeTop": 0,
     "g_attr_group_css_border": true,
     "borderSizeBottom": 0,
     "borderSizeLeft": 0,
     "borderSizeRight": 0,
     "borderStyle": "none",
     "outerShadowX": 2,
     "g_attr_group_css_outer_shadow": true,
     "outerShadowY": 2,
     "outerShadowBlur": 2,
     "outerShadowSize": 1,
     "innerShadowX": 0,
     "g_attr_group_css_inner_shadow": true,
     "innerShadowY": 0,
     "innerShadowBlur": 0,
     "innerShadowSize": 0,
     "view": "cardBalkonkraftwerk",
     "valueTrue": "1",
     "dialogFullscreen": false,
     "name": "navBKW",
     "comment": null,
     "class": null,
     "filterkey": null,
     "multi-views": null,
     "locked": null,
     "g_fixed": true,
     "dialogCloseOnClickOutside": true
   },
   "style": {
     "bindings": [],
     "left": "21px",
     "top": "20px",
     "width": "532px",
     "height": "352px",
     "position": "absolute",
     "overflow": "visible",
     "z-index": 35,
     "opacity": "0.5"
   },
   "widgetSet": "vis-2-widgets-inventwo",
   "_id": "i000001"
 }
]

Unterschied
gerechnete Dialoggröße (annähernd Vollbild)
ohne Kopfbereich und close-button
Klick neben dem Dialog schließt den wieder