MainUI Standard Widgets erweitern

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
narf
Beiträge: 6
Registriert: 14. Sep 2021 15:16

MainUI Standard Widgets erweitern

Beitrag von narf »

Hallo!
Ich bin schon seit knapp 5 Jahren mit openHAB unterwegs und konnte mich bis zum Umstieg auf OH3 auch relativ gut über Wasser halten.
Meine Habpanel Konfiguration hab ich auch halbwegs an meine Bedürfnisse anpassen können aber eben auch nicht perfekt.
Wollte jetzt mit openHAB3 die Visu komplett neu gestalten und dabei auf die neue MainUI setzen, weil - soweit ich das einschätzen kann - wohl der Großteil der Community und die Entwickler sowie eher in die Rechnung gehen.

Leider tu ich mich mit dem Wechsel sehr schwer und die vorhandene englische Dokumentation erschlägt mich nahezu. Hab jetzt einiges gelesen, aber immer noch nicht schlauer...
Der ein oder andere hat meine Fragen sicher schon in dem ein oder anderen Forum gesehen, ich muss gestehen, dieses (wohl prädestinierte) Forum habe ich erst dieser Tage entdeckt :mrgreen:

Bei Habpanel konnte man ja den Code der Standard Widgets einsehen und damit was anfangen. Aber ist das bei der neuen UI auch möglich?
Möchte das Rollershutter-List Widget ein wenig erweitern (um die Stellung der Lamellen), aber ich komme nur semi gut voran...

Hier der Code, den ich mir aus x verschiedenen Code Beispielen zusammengeschustert habe:

Code: Alles auswählen

uid: rollershutter_list_widget
tags:
  - list
  - rollershutter
props:
  parameters:
    - description: The label for the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - context: rs_item
      description: Raffstore
      label: RS Item
      name: rs_item
      required: false
      type: TEXT
    - context: lm_item
      description: Lamellen
      label: LM Item
      name: lm_item
      required: false
      type: TEXT
    - context: auto_item
      description: Automatik
      label: Auto Item
      name: auto_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 14, 2021, 7:11:53 PM
component: f7-card
slots:
  default:
    - component: f7-row
      config:
        class:
          - display-flex
      slots:
        default:
          - component: f7-col
            config:
              style:
                flex: 3
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          item: =props.auto_item
                          title: =props.title
          - component: f7-col
            config:
              style:
                flex: 1
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          item: =props.lm_item
                          action: popup
                          actionModal: widget:light_list_widget
                          actionModalConfig:
                            item: =(props.lm_item)
          - component: f7-col
            config:
              style:
                flex: 1
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-rollershutter-item
                        config:
                          item: =props.rs_item
                          stateInCenter: true
Das schaut dann so aus:
Bild.png
Nun gefällt mir einerseits nicht die Darstellung, der linke Part ist vertikal nicht zentriert, die Einrückung am linken Rand und der Rahmen rund um das List Widget meiner Meinung nach außerdem zu groß. Habe leider nicht verstanden, wie ich das beeinflussen kann.

Weiters hab ich beim action: pop komplett den Faden verloren. Mir wird hier im oh-label-item zwar korrekt der Wert des Items lm_item angezeigt, aber wenn ich draufklicke, dann kommt ein leeres Fenster:
BildPopup.png
das widget light_list_widget ist ein custom widget in meiner Installation. Konnte ein Popup überhaupt nur mit dem Widget erzeugen, bräuche eigtl. ja nur nen Slider mit dem ich das Item lm_item steuern kann...

Würde mich freuen, wenn ihr mir weiterhelfen könnt :)
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

ThomasW
Beiträge: 33
Registriert: 9. Jan 2021 16:12
Answers: 1

Re: MainUI Standard Widgets erweitern

Beitrag von ThomasW »

Hallo narf,

ich habe mich mal versucht eine Lösung für dein Problem zu finden
habe deinen code ein wenig verändert. ja es stimmt das dein widget ist etwas groß das liegt meiner meinung nach an der f7-card welche du benutzt habe diese einmal komplett gestrichen. für die vertikale zentrierung habe ich auch noch nichts gefunden wenn hier jemand eine idee hat gerne weiterhelfen

Code: Alles auswählen

uid: rollershutter_list_widget1
tags:
  - list
  - rollershutter
props:
  parameters:
    - description: The label for the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Raffstore
      label: RS Item
      name: rs_item
      required: false
      type: TEXT
    - context: item
      description: Lamellen
      label: LM Item
      name: lm_item
      required: false
      type: TEXT
    - context: item
      description: Automatik
      label: Auto Item
      name: auto_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 18, 2021, 4:57:23 PM
component: f7-row
config:
  class:
    - display-flex
slots:
  default:
    - component: f7-col
      config:
        style:
          flex: 3
          text-align: left
          margin-top: 0px
          margin-left: 0px
      slots:
        default:
          - component: Label
            config:
              text: "=props.title"
          
    - component: f7-col
      config:
        style:
          flex: 3
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.auto_item
         
    - component: f7-col
      config:
        style:
          flex: 3
          text-align: center
      slots:
        default:
          - component: oh-label-item
            config:  
              item: =(props.lm_item)
              action: popup
              actionModal: widget:light_list_widget
              actionModalConfig:
                item: =(props.lm_item)
          
    - component: f7-col
      config:
        style:
          flex: 2
      slots:
        default:
          - component: oh-rollershutter
            config:
              item: =props.rs_item
              stateInCenter: true
OH3 auf RPI4,
Heizungssteuerung: Fritz DECT,
Zigbee: Conbee2 über Phoscon-GW: Aqara Opple Schalter, Aqara Temperatursensoren, Aqara Fenstersensoren, Aqara Aktoren, IKEA Lichter
Astro Binding
DWDUnwetter Binding
OpenWeatherMap Binding
FritzBox TR 064 Binding
iRobot Binding
Telegramm Binding für Benachrichtigungen und Steuerung von unterwegs
Rolladensteuerung: Rademacher DuoFern über HTTP Binding

ThomasW
Beiträge: 33
Registriert: 9. Jan 2021 16:12
Answers: 1

Re: MainUI Standard Widgets erweitern

Beitrag von ThomasW »

Manchmal ist man einfach blind

Code: Alles auswählen

component: f7-row
config:
  style:
    align-items: center
    margine-top: 1px
    margine-buttom: 1px
und schon ist es auch zentriert und die abstände sehen in der Liste dann besser aus.

gruß
Thomas
OH3 auf RPI4,
Heizungssteuerung: Fritz DECT,
Zigbee: Conbee2 über Phoscon-GW: Aqara Opple Schalter, Aqara Temperatursensoren, Aqara Fenstersensoren, Aqara Aktoren, IKEA Lichter
Astro Binding
DWDUnwetter Binding
OpenWeatherMap Binding
FritzBox TR 064 Binding
iRobot Binding
Telegramm Binding für Benachrichtigungen und Steuerung von unterwegs
Rolladensteuerung: Rademacher DuoFern über HTTP Binding

narf
Beiträge: 6
Registriert: 14. Sep 2021 15:16

Re: MainUI Standard Widgets erweitern

Beitrag von narf »

Hallo Thomas, vielen Dank für die tolle Hilfe!
Sieht jetzt nach ein paar sehr geringfügigen Änderungen so aus:
2021-09-28 22_55_29-openHAB - Brave.png
Leider bekomm ich den Margin links und rechts von der List Card nicht weg...
Das "rollershutter_list_widget_new" macht ja keinen Abstand, oder?
Soweit ich das sehe, bekommt die Card das von Haus aus mit...

Habs versucht im YAML Code zu ändern, aber das hat keinen Effekt:

Code: Alles auswählen

              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        style:
                          - margin-left: 0px
                      slots:
                        default:
                          - component: widget:rollershutter_list_widget_new
                            config:
                              rs_item: rs_buero
                              lm_item: rs_buero_lm
                              auto_item: rs_buero_auto
                              title: Büro
Hast du vielleicht auch hierzu eine Idee?

Grüße
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Antworten