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

eilovliz

New member
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:
YAML:
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
 
Zuletzt bearbeitet:

alexamend

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


YAML:
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:
 

eilovliz

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


YAML:
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

Active member
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.
YAML:
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
 
Zuletzt bearbeitet:

eilovliz

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

YAML:
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;}
                }

                }
 

alexamend

Active member
- 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

Active member
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

New member
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
 

Zurzeit aktive Besucher

Letzte Anleitungen

Statistik des Forums

Themen
1.725
Beiträge
21.439
Mitglieder
1.234
Neuestes Mitglied
Doneinei
Oben