Anfängerfragen VIS-2

[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

[io2345]

Ich hätte jetzt ein Design gefunden das mich anspricht. Allerding weiß ich nicht, welche Widget-Familie das ist. Kann mir da einer helfen?

[sigi234]

@io2345

Vis 2 - Material-Widgets
Schalter oder Knöpfe

Vis 2 - Material-Widgets
Thermostat

E-Charts

[io2345]

@sigi234 Danke dir. Ich bin wohl zu doof (oder jedenfalls zu unerfahren) dafür. Wie bringt man alleine das mit den Farben hin?
Könntest du eventuell eine klitzekleine Testseite erstellen, auf der nur das Bad- oder Gartenelement liegt und das von den Farben her so ähnlich aussieht wie im Screenshot? Natürlich nur, wenn's nicht viel Arbeit ist. Den Export dieser Seite wenn du mir zur Verfügung stellen könntest, dann komme ich vermutlich alleine weiter. Die anderen Elemente funktionieren ja wohl analog dazu.

[sigi234]

@io2345 sagte in Anfängerfragen VIS-2:

Könntest du eventuell eine klitzekleine Testseite erstellen

Bitte sehr.

VIEW_Test1_VIS2.txt

[io2345]

@sigi234 Ja super, das sieht schon mal gut aus!
Ein Problem hab ich noch. Wie bekomme ich da ein Komma rein, wenn der Wert aus dem Datenpunkt ohne ankommt? Da sollte 24,7 stehen, nicht 247: