Bilder in Habpanel auf Template-Größe reduzieren

Einrichtung der openHAB Umgebung und allgemeine Konfigurationsthemen.

Moderatoren: seppy, udo1toni

Antworten
Minfred
Beiträge: 5
Registriert: 7. Aug 2018 20:13
Answers: 0

Bilder in Habpanel auf Template-Größe reduzieren

Beitrag von Minfred »

Hallo an Alle,

ich bin neu hier. Habe mir vor einigen Wochen openhab2 auf einem RaspberryPi 3B installiert.
An diesem ist zusätzlich ein 7"-PiDisplay befestigt, über welches u.a. das Habpanel angezeigt wird.

Neben Wetter, Temperaturen, Luftfeuchten und Steckdosen-Statii möchte ich mir einen digitalen BIlderrahmen bauen.
Jede Stunde greift der Raspi per ssh auf mein NAS zu, holt sich drei Zufallsbilder und steckt sie in den html-Ordner. Das klappt soweit.
Ich habe mir das "Carousel" in den Beispieltemplates umgebastelt und lasse die Bilder anzeigen, auch das klappt.

Allerdings habe ich ein Problem:
Die Bilder haben verschiedene Formate und Auflösungen.
Ich würde gern alle Bilder gleich groß darstellen. Zum Teil ragen sie jetzt sogar über das Template herrüber.

Ich hatte überlegt, es über die css-Funktion "object-fit" zu realisieren (s.u.). Leider funktioniert es nicht, als ob es gar nicht beachtet wird.

Gibt es sonst eine Möglichkeit css-Code in einem Template unterzubringen?
Oder kennt jemand eine Möglichkeit die Bider entsprechend einzupassen?

Code: Alles auswählen

<div style="height: 610px">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
    <div uib-slide index="0">
      <img src="http://192.168.178.100:8080/static/Pictures/bild1.jpg" style="margin:auto;object-fit:cover"/>
    </div>
    <div uib-slide index="1">
      <img src="http://192.168.178.100:8080/static/Pictures/bild2.jpg"/>
    </div>
    <div uib-slide index="2">
      <img src="http://192.168.178.100:8080/static/Pictures/bild3.jpg"/>
    </div>
  </div>
</div>
Danke schon mal,

viele Grüße,
Minfred

hr3
Beiträge: 210
Registriert: 23. Mai 2017 21:41
Answers: 0

Re: Bilder in Habpanel auf Template-Größe reduzieren

Beitrag von hr3 »

Hast du es an einem anderen Gerät probiert und mit welchem Ergebnis.
Hilfreich wären Screenshots/Fotos.

Minfred
Beiträge: 5
Registriert: 7. Aug 2018 20:13
Answers: 0

Re: Bilder in Habpanel auf Template-Größe reduzieren

Beitrag von Minfred »

Hey,

jau, an verschiedenen Geräten, Browsern, Browsergrößen kommt es zum gleichen Fehlerfall.
Anbei zwei Fotos, die hoffentlich verdeutlichen, was ich meine. ;)

Mir ist klar, dass verschiedene Fotoformate zu unterschiedlichen Größen führen.
Es wäre mir auch egal, wenn die Bilder beschnitten werden (was object-fit:cover machen sollte?!). :)


Mfg
Minfred
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

KlausGünther
Beiträge: 143
Registriert: 16. Jul 2018 08:57
Answers: 0
Wohnort: Werl
Kontaktdaten:

Re: Bilder in Habpanel auf Template-Größe reduzieren

Beitrag von KlausGünther »

Hilft Dir das vielleicht weiter ? Insbesondere der nur schlecht zu sehende Knopf "Don´t fit to container" ?
https://community.openhab.org/t/widget- ... usel/40267

Minfred
Beiträge: 5
Registriert: 7. Aug 2018 20:13
Answers: 0

Re: Bilder in Habpanel auf Template-Größe reduzieren

Beitrag von Minfred »

KlausGünther hat geschrieben: 9. Aug 2018 12:50 Hilft Dir das vielleicht weiter ? Insbesondere der nur schlecht zu sehende Knopf "Don´t fit to container" ?
https://community.openhab.org/t/widget- ... usel/40267
Hallo KlausGünther,

danke für den Link. Ich hatte es mit einem Template und eigenem html-Code probiert.
Dein verlinktes "Image Carousel" ist eigentlich genau, was ich suche.
Allerdings werden die Fotos etwas verzerrt, mal sehen, ob ich das noch irgendwie abstellen kann.

Aber dankeschön schon mal,

Gruß
Minfred

Antworten