Openhab 3 Icon und Zeit

[gexle]

Hallo

Kann mir jemand bitte sagen wie ich diese Zeit etwas übersichtlicher darstellen kann?

Und kann ich auch andere Icons einfügen als nur diese da??

https://www.openhab.org/docs/configurat ... s/classic/

Wie muss der Befehl den ausschauen im Moment habe ich es so gemacht zbs. oh:time dann wird die mir die Uhr angezeigt!

Habe diese Seite gefunden aber wie muss ich diese den einbinden??

https://community.openhab.org/t/dynamic ... ther/97822

Danke euch

[int5749]

Kann mir jemand bitte sagen wie ich diese Zeit etwas übersichtlicher darstellen kann?

Wenn es nur um die Anzeige z.B. in der Sitemap geht dann im Item

Code: Alles auswählen

DateTime DeinItem		"Last Update [%1$td.%1$tm.%1$ty / %1$tH:%1$tM:%1$tS]"	<time>	{channel="xxxxxxxxxxxxxxxxx"}

Und kann ich auch andere Icons einfügen als nur diese da??

https://www.openhab.org/docs/configurat ... s/classic/

Du kannst eigene Icons in Deine Konfig kopieren und dann entsprechend im Item mit angeben, oben z.B. auch time
Wie das geht, steht ja schon auf der Seite die von Dir verlinkt wurde, die dann wiederum weiterführt.
These icons can be used when describing Items. You can also add your own. See the instructions to learn more.

Habe diese Seite gefunden aber wie muss ich diese den einbinden??
https://community.openhab.org/t/dynamic ... ther/97822

Auch dies steht gut auf der Instruction Seite beschrieben. Dynamic Icons müssen entsprechend mehrfach (entsprechend dem Status) abgelegt werden.
Blinds ist z.B. so ein Icon. Je nach Status des Items (hier dann die Höhe wie z.B. 20 oder 50 oder 100) wird dann das entsprechende Icon genutzt.

[peter-pan]

Du kannst auch "f7-Icons" einbinden.

Neben der von @int5749 beschriebenen Möglichkeit der Formatierung im Item per Text-File(und evtl. Rule), kannst du auch ein Änderung der Pattern/Formatter über die Metadaten des Items in der MainUI vornehmen.

zeit1.jpg

Text-File:

Code: Alles auswählen

Item:
DateTime  Current_DateTime  "Heute [%1$tA, %1$td.%1$tm.%1$ty,%1$tH:%1$tM]" <calendar> (gMonitor) ["Status"]  {channel="ntp:ntp:local:dateTime"}
String    CurrentTime2 "Heute ist 2  [%s]" <time>    (gMonitor)      ["Status"] // served/updated by ntp.rules  

rule:
var countNTP = 0

rule "Zeit mit Zeitzone"
  when
    Item Current_DateTime received update
  then
    var vTimeZoneString = "MEZ"
    val vTimeZoneNumber = Current_DateTime.state.format("%1$tZ")
    if (vTimeZoneNumber == "+02:00") vTimeZoneString = "MESZ"
    CurrentTime2.postUpdate(Current_DateTime.state.format("%1$tA, %1$td.%1$tm %1$tH:%1$tM ") + vTimeZoneString)
    if (countNTP < 239) {
       countNTP = countNTP +1 
    }
    else {
        logInfo("ntp","Zeit hat sich geändert {} schon wieder 4 Stunden vorbei", countNTP)
        countNTP = 0
    }

Yaml für Clock-Widget:

Code: Alles auswählen

component: oh-clock-card
config:
  action: url
  actionUrl: https://archive.docs.influxdata.com/influxdb/v0.9/tools/shell/
  background: "linear-gradient(to top right, #6fa8dc 0%, #ffe74c 100%)"
  dateFontSize: 20px
  dateFontWeight: normal
  dateFormat: '="ddd, DD.MMM.YYYY " + "- KW:  " + dayjs().isoWeek()'
  datePos: above
  showDate: true
  timeFontSize: 20px
  timeFontWeight: normal
  timeFormat: '= "HH:mm:ss  " '

Da gibt es viele Möglichkeiten.

[peter-pan]

...hab noch was gefunden.

zeit2.jpg

Yaml 1:

Code: Alles auswählen

component: oh-list-item
config:
  after: =dayjs(items.Current_DateTime.state).format('ddd, DD:MM:YY')
  title: test dayjs format
  icon: f7:alarm_fill
  iconUseState: false
  iconColor: blue
slots: null

Yaml 2:

Code: Alles auswählen

component: oh-list-item
config:
  title: test dayjs format
  icon: f7:alarm_fill
  iconUseState: false
  iconColor: blue
  badge: =dayjs(items.Current_DateTime.state).format('ddd, DD:MM:YY')
  badgeColor: green
slots: null

[gexle]

Hallo

Danke euch ich werd das mal versuchen umzusetzen....

Kann ich den Code direkt in Pattern/Formatter einfügen also kopieren??

Noch was vergessen..

Möchte unter Standorte für meine Karte ein Hintergrundbild einfügen dazu habe ich mir ein zwei Stück hergerichtet.

Nur finde ich den Ordner nicht wo es hinterlegt werden muss...laut diesen Video solls da liegen?

Siehe bild dazu -> wo muss ich meine Bilder genau hinein??



Danke

[peter-pan]

Kann ich den Code direkt in Pattern/Formatter einfügen also kopieren??

Welchen Code meinst du ? Und wo willst du ihn einfügen bzw. kopieren ? Wie vorher beschrieben, gibt es verschiedene Möglichkeiten und eine entsprechende Vorgehensweise dafür.

Wenn du das Beispiel mit den list-item-widgets nimmst, so kannst du den Yaml-Code nehmen und in ein leeres "list-item" hinein kopieren. Du musst halt deine Item-Namen anpassen. Aber am besten wäre natürlich du legst ganz normal ein "list-item" an (configure) und füllst die entsprechenden Zeilen aus. Das ist ja nicht viel Arbeit.

list-item.jpg

Andere Möglichkeiten der Definition von Suffixen/Pattern/Formattern hängen davon ab, wie du dein Item angelegt hast.

Das mit den Bildern ist auch so eine Sache. Hier ist mein Aufbau als Screen-Shot für Bilder bzw. Icons:

icons.jpg

...und dazu noch ein Ausschnitt aus meinem Yaml-Code:

Code: Alles auswählen

config:
  label: Home Page
equipment:
  - component: oh-equipment-tab
    config: {}
    slots:
      Battery:
        - component: oh-equipment-card
          config:
            backgroundImage: /static/picture/batt1.svg
      FrontDoor:
        - component: oh-equipment-card
          config:
            title: Haustür
      NetworkAppliance:
        - component: oh-equipment-card
          config:
            backgroundColor: lime
            backgroundImage: /static/picture/esp32_21.jpg
            invertText: true
            subtitle: Netzwerkgeräte
      PowerOutlet:
        - component: oh-equipment-card
          config:
            backgroundImage: /static/picture/steckdose2.jpg
            invertText: true
      RadiatorControl:
        - component: oh-equipment-card
          config:
            backgroundImage: /static/picture/heating2.jpg
            invertText: true
      Receiver:
        - component: oh-equipment-card
          config:
            backgroundImage: http://192.168.178.78:8080/icon/esp8266_2.svg
      SmokeDetector:
        - component: oh-equipment-card
          config:
            backgroundColor: red
      Speaker:
        - component: oh-equipment-card
          config:
            backgroundColor: lime
            backgroundImage: /static/picture/play3nnn.jpg
            invertText: false
      WallSwitch:
        - component: oh-equipment-card
          config:
            title: Wand-/Lichtschalter
      WeatherService:
        - component: oh-equipment-card
          config:
            backgroundImage: /static/picture/openweather1.jpg
            invertText: true
      Window:
        - component: oh-equipment-card
          config: {}
 ........         
      gGarage:
        - component: oh-location-card
          config:
            backgroundColor: teal
            title: Meine Garage
          slots:
            glance:
              - component: f7-block
                config:
                  style:
                    background-image: url(http://192.168.178.78:8080/static/picture/OpenHAB_logo_2.svg)
                    background-position: center
                    background-repeat: no-repeat
                    background-size: contain
                    height: 100px
                    left: 30px
                    margin-top: 0px
                    opacity: 100%
                    padding-top: 0px
                    position: absolute
                    top: 90px
                    width: 50%
      gGhaus:
        - component: oh-location-card
          config:
            backgroundImage: /static/picture/haus.jpg
      gHome:

mit Deklarationsmöglichkeiten, z.B.: backgroundImage: /static/picture/esp32_21.jpg

Ich würde damit aber eher sparsam umgehen

[gexle]

Hallo

Dankeschön

Den Ordner habe ich unter etc/openhab usw. gefunden....

Das habe ich bis jetzt gemacht geschafft ist aber etwas langweilig nicht?

Das möchte ich was machen also aufpeppen...so zusagen etwas Farbe rein...bei den List Items usw.

[peter-pan]

Den Ordner habe ich unter etc/openhab usw. gefunden...

...entweder der direkte Pfad

Code: Alles auswählen

hab3@oh3sata:~ $ ls -alF /etc/openhab
insgesamt 88
drwxrwxr-x+  16 openhab openhab  4096 21. Dez 00:38 ./
drwxr-xr-x  101 root    root     4096 20. Jan 11:40 ../
drwxrwxr-x+   3 openhab openhab  4096 21. Dez 00:38 automation/
drwxrwxr-x+   4 openhab openhab  4096 21. Dez 00:36 html/
drwxrwxr-x+   3 openhab openhab  4096 29. Okt 21:57 icons/
drwxrwxr-x+   2 openhab openhab  4096 24. Jan 14:18 items/
drwxrwxr-x+   2 openhab openhab  4096 26. Dez 2020  misc/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 persistence/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 rules/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 scripts/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 services/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 sitemaps/
drwxrwxr-x+   2 openhab openhab  4096 21. Dez 00:36 sounds/
-rw-rw-r--    1 openhab openhab 16950 19. Okt 13:41 test_func.txt
drwxrwxr-x+   2 openhab openhab  4096 22. Dez 17:58 things/
drwxrwxr-x+   2 openhab openhab  4096  8. Jan 20:46 transform/
drwxrwxr-x+   2 openhab openhab  4096 18. Jan 2021  .vscode/
hab3@oh3sata:~ $

oder halt über den Samba-Share mit dem (einem) Windows-Datei-Manager(Explorer).

Das habe ich bis jetzt gemacht geschafft ist aber etwas langweilig nicht?

Das finde ich jetzt nicht direkt. Eigentlich ist alles (für dich) Wichtige übersichtlich vorhanden.

screen.jpg

Aber hier noch als Anregung für die Clock-Card und die List-Card (mit etwas Farbe )

Yaml-Code - Clock-Card:

Code: Alles auswählen

component: oh-clock-card
config:
  action: url
  actionUrl: https://archive.docs.influxdata.com/influxdb/v0.9/tools/shell/
  background: "linear-gradient(to top right, #6fa8dc 0%, #ffe74c 100%)"
  dateFontSize: 20px
  dateFontWeight: normal
  dateFormat: dddd, DD.MMMM.YYYY
  datePos: above
  footer: '="Datum - KW:  " + dayjs().isoWeek()'
  showDate: true
  timeFontSize: 20px
  timeFontWeight: normal
  timeFormat: HH:mm:ss
  title: '="Datum - KW:  " + dayjs().isoWeek()'

Yaml-Code - List-Card:

Code: Alles auswählen

component: oh-list-card
config:
  accordionList: false
  bgColor: teal
  footer: "component: oh-list-card"
  mediaList: true
  noBorder: false
slots:
  default:
    - component: oh-player-item
      config:
        artistItem: AZ_Sonos_CurrentArtist
        icon: oh:sonos_play1
        item: AZ_Sonos_Control
        showRewindFFward: false
        title: Sonos Arbeitszimmer
        trackItem: AZ_Sonos_CurrentTitle
    - component: oh-stepper-item
      config:
        fill: false
        icon: oh:soundvolume
        item: AZ_Sonos_Volume
        raised: true
        style:
          background: green
          color: blue
        title: Lautstärke
    - component: oh-toggle-item
      config:
        color: lightblue
        icon: oh:soundvolume_mute
        iconUseState: true
        item: AZ_Sonos_Mute
        title: Mute
    - component: oh-label-item
      config:
        item: AZ_Sonos_CurrentTitle
        title: "Es läuft:"
    - component: oh-label-item
      config:
        item: AZ_Sonos_CurrentArtist
        title: "Interpret:"
    - component: oh-list-item
      config:
        action: options
        actionItem: AZ_Sonos_Favorite
        badgeColor: red
        icon: oh:sonos_play1
        listButton: true
        listButtonColor: green
        title: Favoriten
    - component: oh-list-item
      config:
        action: options
        actionItem: AZ_Sonos_Radio
        icon: oh:sonos_play1
        listButton: true
        style:
          background: lightblue
          color: red
        title: Radio
    - component: oh-list-item
      config:
        action: options
        actionItem: AZ_Sonos_PlayPlaylist
        icon: oh:sonos_play1
        listButton: true
        title: Playlists
    - component: oh-label-item
      config:
        icon: '=(items.HmIP_SWDO_DB1C_1STATECONTACT.state == "CLOSED") ?
          "f7:exclamationmark_circle" : "f7:house_fill"'
        iconColor: red
        iconUseState: false
        item: HmIP_SWDO_DB1C_1STATECONTACT
        title: Alle Fenster
        visible: =items.HmIP_SWDO_DB1C_1STATECONTACT.state == "CLOSED"

[gexle]

Das Wetter Widget schaut auch cool aus....Bitte Danke

Ich werde es versuchen das mal umzusetzen.

Danke

[gexle]

Hallo

So habe mal einiges probiert aber wie ich die Schrift farblich ändern kann weis ich noch nicht...??

Könntest mir bitte auch zeigen wie ich das wetter so bauen muss und kann das schaut seht gut aus!