größe Plan in custom:config-template-card / unavailable

[eilovliz]

Hallo liebes Forum.
Ich habe erfolgreich meinen Flurplan am laufen nur passt mir die größe der Darstellung nicht, ich möchte aber nicht beim Bild export die Pixel verringern
da dann die qualität des Bildes sinkt. Hab alles probiert was ich gefunden habe aber keine Lösung gefunden.
Weiters habe ich das Problem, dass ich die variable unavailable nicht zum laufen bekomme. Hat einfach keinen effekt.

Hier mein Code:

views:
  - title: Grundriss
    path: grundriss
    type: panel
    icon: null
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - light.Licht
 
        card:
          type: picture-elements
          image: /local/grundriss/1.png
          style: |
            ha-card:first-child {
              background: rgba(42, 46, 48, 1)
            }
          elements:
            - type: image
              action: none
              entity: sun.sun
              state_image:
                above_horizon: /local/floorplan/2.png
                below_horizon: /local/floorplan/3.png
              tap_action:
                action: none
              hold_action:
                action: none
              style:
                top: 50%
                left: 50%
                width: 100%
                height: 100%
            - type: image
              action: none
              entity: light.2
              hold_action:
                action: none
              tap_action:
                action: none
              image: /local/grundriss/4.png
              style:
                mix-blend-mode: lighten
                top: 50%
                left: 50%
                width: 100%
                height: 100%
                opacity: ${ states['light.2'].attributes.brightness / 255 }
              state_image:
                'on': /local/grundriss/4.png
                'off': /local/grundriss/2.png
                unavailable: /local/grundriss/2.png

Vielen Dank
LG Renate

 

[alexamend]

Mit card-mod kann man auf unterschiedliche Auflösung die Ansicht anpassen.

type: picture-elements
image: /local/img/tablet/home1920x1080.png
style: |

  @media (max-width: 870px) and (orientation: landscape) {
    /* This value is necessary because from 870px the menu changes to floating */
    ha-card {padding: 0 15%;}
  }

  @media (min-width: 1920px) and (orientation: landscape) {
    /* This value is for my PC which is 1920x1080 */
   ha-card {padding: 0 10%;}
  }

  @media (min-width: 2560px) and (orientation: landscape) {
    /* This value is for my PC which is 2560x1600 */
   ha-card {padding: 0;}
  }

  }
elements:

 

[LittleWing]

Hallo @eilovliz,

bitte Code entsprechend auch als Code formatieren, das macht die Fehlersuche leichter.

https://forum.heimnetz.de/threads/hinweis-zum-thema-einfuegen-von-yaml-code-in-beitraegen.1019/

Viele Grüße
LittleWing

 

[eilovliz]

Mit card-mod kann man auf unterschiedliche Auflösung die Ansicht anpassen.

type: picture-elements
image: /local/img/tablet/home1920x1080.png
style: |

  @media (max-width: 870px) and (orientation: landscape) {
    /* This value is necessary because from 870px the menu changes to floating */
    ha-card {padding: 0 15%;}
  }

  @media (min-width: 1920px) and (orientation: landscape) {
    /* This value is for my PC which is 1920x1080 */
   ha-card {padding: 0 10%;}
  }

  @media (min-width: 2560px) and (orientation: landscape) {
    /* This value is for my PC which is 2560x1600 */
   ha-card {padding: 0;}
  }

  }
elements:

und welche variable steuert hier die größe?

 

[alexamend]

und welche variable steuert hier die größe?

max/min-width

Was man auch machen kann, für unterschiedliche dashboard unterschiedliche Anzeigen erstellen, erschwert natürlich die Wartung daran

So kann man Anzeigen skalieren.

type: picture-elements
style: |
  ha-card {
    height: 250px !important;
  }
elements:
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 15%
      transform-origin: left top
      transform: translate(-50%,-50%) scale(3.5,3.5)
      border: 1px solid black
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 15%
      transform-origin: left top
      transform: translate(-50%,-50%) scale(2.5,2.5)
      border: 1px solid black
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 15%
      transform-origin: left top
      transform: translate(-50%,-50%) scale(1.5,1.5)
      border: 1px solid black
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 15%
      border: 1px solid black
image: /local/images/white.jpg

 

[eilovliz]

Dankeschön, werd ich morgen abend mal testen...hoffentlich mit Erfolg

 

[eilovliz]

Also ich checks nicht, egal was ich eintrage, hier ändert sich überhaupt nichts

elements:
            - type: image
              action: none
              entity: sun.sun
              state_image:
                above_horizon: /local/floorplan/tag.png
                below_horizon: /local/floorplan/transparent.png
              tap_action:
                action: none
              hold_action:
                action: none
              style: |

                @media (max-width: 8500px) and (orientation: landscape) {
                  /* This value is necessary because from 870px the menu changes to floating */
                  ha-card {padding: 0 1%;}
                }

                @media (min-width: 1200px) and (orientation: landscape) {
                  /* This value is for my PC which is 1920x1080 */
                 ha-card {padding: 0 50%;}
                }

                @media (min-width: 1600px) and (orientation: landscape) {
                  /* This value is for my PC which is 2560x1600 */
                 ha-card {padding: 70;}
                }

                }

 

[Nival]

Kann es sein, dass Du den oberen Teil vom Code nicht mit kopiert hast?

https://github.com/thomasloven/lovelace-card-mod ist installiert?

die variable unavailable

Was genau ist damit gemeint?

 

[alexamend]

- mir fehlen da irgendwie die custom image für dein floorplan, custum card um die Ansicht zu manipulieren und
max-width: 8500px
scheint mir etwas sehr zu hoch.

Der Ablauf der Manipulation ist wie folgt.
Die Abfrage geht von oben nach unten die erste Übereinstimmung wird genommen, ist bei
max-width: 8500px
natürlich jegliche Auflösung mit abgebildet, somit werden die anderen nicht mehr abgefragt.

 

[alexamend]

Habe mir gerade auch mal deine "custom config template" angeschaut, damit lassen sich innerhalb einer Karte template anwenden diese müssen immer mit ${} umschlossen sein.
Die kann (ist aber nur eine Vermutung) auch Einfluss auf style haben.

 

[eilovliz]

Kann es sein, dass Du den oberen Teil vom Code nicht mit kopiert hast?

https://github.com/thomasloven/lovelace-card-mod ist installiert?


Was genau ist damit gemeint?

Guten Abend, also damit meinte ich folgendes.
Ich habe keinen WIFI fähigen Schalter sondern lediglich Leuchtmittel. Wenn ich jetzt den Schalter betätige während das Licht an ist dann Zeigt er mir in meinem Dashboard trotzdem das Bild mit "Licht an" an. Sollte er hier nicht eigentlich das"unavailable" anzeigen?
Den rest muss ich mir erst anschauen
Vielen Dank
LG Renate