layout page mit transparenten item

[BaluderBaer]

hallo team

und hier die naechste frage in die runde.
ich habe ein label item ( funktionen sind kompl gegeben )
hintergrundbild ist nun auch aktive und wird richtig angezeigt.

wie bekomme ich es jetzt hin, das der bereich des items transparent angezeigt wird und nicht mit einem weissen hintergrund.:
das keyword "background: transparent" kann ich hier eintragen wo ich moechte ( natuerlich wurde vorher "background-color: white" entfernt)
es ist auch egal ob ich "background: transparent" oder "background-color: transparent" einsetze
ergebniss ist immer weisser hintergrund
wenn ich diesen parameter zum beispiel auf yellow aendere, wechselt die farbe nach gelb. also stelle scheint richtig zu sein.
warum kann ich nicht nach transparent wechseln?

Code: Alles auswählen

  - component: oh-label-item
    config:
      action: analyzer
      actionAnalyzerChartType: day
      actionAnalyzerItems:
        - CarstenTabletBatteryLevel
      icon: oh:batterylevel
      iconUseState: true
      item: SamsungTablet_CarstenTabletBatteryLevel
      style:
        background-color: white
        font-size: 100%
        font-weight: bold;
      textColor: black
      title: Battery Level Tablet

danke fuer eure geduld und hilfe
balu

[lenschith]

also bei meinen selbst erstellten Widget funktioniert das so wie du das willst

Code: Alles auswählen

  style:
    background: transparent
    

Screenshot 2024-11-09 170617.png

Aber ob das direkt in der Layout Page mit einen Standard Widget funktioniert glaub ich nicht.
Zumindest hab ich es bei meinen Test nicht geschafft.

Aber wenn du dir selbst ein Widget erstellst klappt das.

Gruß Lenschi

[BaluderBaer]

hallo und guten morgen lenschith
danke fuer den tipp. habe den halben abend versucht dies hinzubekommen. ( habe noch nie etwas mit widgets gemacht )
leider nicht geklappt.
hast du evtl ein beispiel wie ich dies widget erstellen muss, und wie ich es dann fuer die einzelnen zeilen einbauen muss ??
die page besteht nicht nur aus der einzelnen weissen item zeile, sind div ( komplette bereiche ), manche sollen transparent sein, manche nicht.
vielen dank
balu

[Harka]

Moin,
ich habe es nur hinbekommen, in dem ich dem nächst höherem Element transparent zuordne. Dann müssen die Abweichler nachcoloriert werden.

Code: Alles auswählen

component: oh-list-card
config:
  style:
    background: transparent
    opacity: 0.8 !important
slots:
  default:
    - component: oh-list-item
      config:
        title: Hallo 1
        style:
          background-color: white
    - component: oh-list-item
      config:
        title: Hallo 2
    - component: oh-list-item
      config:
        title: Hallo 2
        style:
          background-color: blue
    - component: oh-list-item
      config:
        title: Hallo 4
        style:
          background-color: rgb(0 0 0 / 0.3)

E: ich habe mit opacity noch eine Komponente ins Spiel gebracht. Diese sorgt für einen leichten Transparenteffekt bei den colorierten Spalten.

[lenschith]

Hallo,

ich habe im letzten Jahr begonnen mich mit den Widgets zu beschäftigen und habe mittlerweile fast alles was ich in der UI verwende selbst erstellt.
Ich möchte immer das selbe aussehen usw.

Ich habe dir mal drei Beispiele erstellt die das Widget mit der Transparents unterschiedlich lösen.

Screenshot 2024-11-10 075552.png

1. Hier habe ich die Karte komplett transparent, wäre für mich und meine UI nicht sinnvoll da ich die Werte nicht schön sehen kann.

Code: Alles auswählen

uid: Test_List3
tags:
  - test
props:
  parameters:
    - description: Titel
      label: Titel
      name: titel
      required: false
      type: TEXT
  parameterGroups:
    - name: action
      context: action
      label: Kachelaction
      description: Action die ausgeführt wird wenn die Kachel gedrückt wird.
timestamp: Nov 10, 2024, 7:54:14 AM
component: f7-card
config:
  style:
    background: transparent
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
  title: "=props.titel ? props.titel : 'Grünbeck'"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-label-item
                  config:
                    icon: oh:softener1
                    iconUseState: true
                    item: GruenbecksoftliQSC18_SalzrestProzent
                    title: Aktueller Salzstand
                - component: oh-label-item
                  config:
                    icon: oh:scale
                    item: GruenbecksoftliQSC18_Salzvorrat
                    title: Salzvorrat in kg
                - component: oh-label-item
                  config:
                    icon: oh:line
                    item: GruenbecksoftliQSC18_SalzverbrauchGesamt
                    title: Salzverbrauch gesamt

2. hier ebenfalls die Card transparent aber die unterschiedlichen Listeneinträge farblich. Hier ist die Transparenz dann nicht mehr gegeben, es sei denn man arbeitet mit opacity. Das macht die Zeile dann wieder etwas transparent.

Code: Alles auswählen

uid: Test_List
tags:
  - test
props:
  parameters:
    - description: Titel
      label: Titel
      name: titel
      required: false
      type: TEXT
  parameterGroups:
    - name: action
      context: action
      label: Kachelaction
      description: Action die ausgeführt wird wenn die Kachel gedrückt wird.
timestamp: Nov 10, 2024, 7:50:18 AM
component: f7-card
config:
  style:
    background: transparent
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
  title: "=props.titel ? props.titel : 'Grünbeck'"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-label-item
                  config:
                    icon: oh:softener1
                    iconUseState: true
                    item: GruenbecksoftliQSC18_SalzrestProzent
                    title: Aktueller Salzstand
                    style:
                      background: red
                - component: oh-label-item
                  config:
                    icon: oh:scale
                    item: GruenbecksoftliQSC18_Salzvorrat
                    title: Salzvorrat in kg
                    style:
                      background: green
                      opacity: 0.6
                - component: oh-label-item
                  config:
                    icon: oh:line
                    item: GruenbecksoftliQSC18_SalzverbrauchGesamt
                    title: Salzverbrauch gesamt

3. hier die Möglichkeit die Card mit opacity transparent darzustellen. Hier ist der Vorteil das man den Umriss des Widget erkennt und man mit dem Kontrast spielen kann damit die Werte sauber zu lesen sind

Code: Alles auswählen

uid: Test_List2
tags:
  - test
props:
  parameters:
    - description: Titel
      label: Titel
      name: titel
      required: false
      type: TEXT
  parameterGroups:
    - name: action
      context: action
      label: Kachelaction
      description: Action die ausgeführt wird wenn die Kachel gedrückt wird.
timestamp: Nov 10, 2024, 7:52:51 AM
component: f7-card
config:
  style:
    background: gray
    opacity: 0.5
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
  title: "=props.titel ? props.titel : 'Grünbeck'"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-label-item
                  config:
                    icon: oh:softener1
                    iconUseState: true
                    item: GruenbecksoftliQSC18_SalzrestProzent
                    title: Aktueller Salzstand
                    style:
                      background: red
                - component: oh-label-item
                  config:
                    icon: oh:scale
                    item: GruenbecksoftliQSC18_Salzvorrat
                    title: Salzvorrat in kg
                    style:
                      background: green
                      opacity: 0.6
                - component: oh-label-item
                  config:
                    icon: oh:line
                    item: GruenbecksoftliQSC18_SalzverbrauchGesamt
                    title: Salzverbrauch gesamt

Da musst du jetzt einfach etwas testen und spielen.

Gruß Lenschi

[lenschith]

Hallo Harka,
das habe ich auch versucht, aber hat bei mir nicht geklappt. Also direkt in der Layoutpage, so wie das Balu ursprünglich wollte. Was machst du anders als ich?

Moin,
ich habe es nur hinbekommen, in dem ich dem nächst höherem Element transparent zuordne. Dann müssen die Abweichler nachcoloriert werden.

Code: Alles auswählen

component: oh-list-card
config:
  style:
    background: transparent
slots:
  default:
    - component: oh-list-item
      config:
        title: Hallo 1
        style:
          background-color: white
    - component: oh-list-item
      config:
        title: Hallo 2
    - component: oh-list-item
      config:
        title: Hallo 2
        style:
          background-color: blue

Code: Alles auswählen

config:
  label: Test
blocks:
  - component: oh-block
    config:
      style:
        background-image: url("/static/dashboard/cards/heizkoerper.jpg")
        background-size: cover
        background-position: center
        background-repeat: no-repeat
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        style:
                           background: transparent
                      slots:
                        default:
                          - component: oh-label-item
                            config:
                              icon: oh:cistern
                              iconUseState: true
                              item: TestDimmer

[Harka]

Was machst du anders als ich?

Nichts.

Code: Alles auswählen

config:
  label: TestSeite
blocks:
  - component: oh-block
    config:
      style:
        background-image: url("/static/119_2560x1600.jpg")
        background-size: cover
        background-position: center
        background-repeat: no-repeat
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        style:
                          background: transparent
                      slots:
                        default:
                          - component: oh-label-item
                            config:
                              icon: oh:cistern
                              iconUseState: true
                              item: TestDimmer
                              title: TestDimmer
                          - component: oh-list-item
                            config:
                              title: Hallo 2
                              style:
                                background-color: white
masonry: []
grid: []
canvas: []

Forum_Hintergrund2411.png

[lenschith]

Hallo Harka,
ich habe das bei mir jetzt noch einige Male versucht transparent in der Page hin zubekommen, aber bei mir wird das nicht durchsichtig.
Würde mich interessieren wie das bei dir funktioniert. Bin da gerade etwas ratlos. Habe deinen Code jetzt bei mir implementiert aber auch da ist es bei mir nicht durchsichtig.

Screenshot 2024-11-10 204728.png

[BaluderBaer]

hallo ihr beide
erst einmal SUPER vielen dank an euch fuer eure unterstuetzung.
ich habe dies ( glaube ich auch so implementiert ( harka code )) , bekomme jedoch keine transparente anzeige hin. der weisse hintergrund bleibt immer.
mit den widget habe ich mich schon beschaeftigt ( aber auch erst mal vielen vielen dank ), sieht super aus.
glaude aber , dazue habe ich noch die ein oder andere frage ( wenn ich diesen dann auch stellen darf )
muss jetzt erst aml ein paar item von mir einbauen und dann siehen wie es aussieht
anbei mein code und mein screenshot.

Code: Alles auswählen

config:
  label: TF - Test Hintergrund
  order: "40"
  sidebar: true
  style:
    background-image: url("/static/Stargate.png")
    background-size: cover
    background-position: center
    background-repeat: no-repeat
  stylesheet: |
    .item-after {
      color: blue;
      font-weight: bold;
      font-size: 120%
      color: blue;
      background-color: yellow;
    }
    .card-header {
      color: blue;
      font-weight: bold;
      font-size: 100%;
      color: blue;
      background-color: orange;
    }
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: null
                style: null
                background: transparent
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        style:
                          background: transparent
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              listButton: false
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold;
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: AKKU - Carsten Samsung Tablet
                          - component: oh-label-item
                            config:
                              action: analyzer
                              actionAnalyzerChartType: day
                              actionAnalyzerItems:
                                - CarstenTabletBatteryLevel
                              icon: oh:batterylevel
                              iconUseState: true
                              item: SamsungTablet_CarstenTabletBatteryLevel
                              style:
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Battery Level Tablet
                          - component: oh-list-item
                            config:
                              listButton: false
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold;
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: AKKU - Carsten iPhone XS
                          - component: oh-label-item
                            config:
                              icon: oh:batterylevel
                              iconUseState: true
                              item: Handy_Carsten__iPhone_XS__ICloud__Batterieladung
                              style:
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Battery Level iPhone XS
                          - component: oh-list-item
                            config:
                              listButton: false
                              style:
                                background-color: wheat
                                border-radius: 15px
                                font-size: 120%
                                font-weight: bold;
                                noShadow: true
                              stylesheet: |
                                .item-inner {
                                  justify-content: center;
                                }
                              textColor: red
                              title: AKKU - Carsten iPhone S8
                          - component: oh-label-item
                            config:
                              icon: oh:batterylevel
                              iconUseState: true
                              item: Handy_Carsten__iPhone_S8__ICloud__Batterieladung
                              style:
                                font-size: 100%
                                font-weight: bold;
                              textColor: black
                              title: Battery Level iPhone S8

[Harka]

Großes SORRY an Euch Beide
meine Spielwiese ist ein Container mit openHAB 4.3.0.M2. Beim Hauptsystem mit 4.2.2 wird die Testseite auch ohne Transparenz angezeigt.
Beim Überfliegen der Änderungen konnte ich zwar nichts finden aber anscheinend ... So können wir uns wenigstens auf das nächste Update freuen