Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Suche][Beispiel] Widget Material Design

NEWS

  • Neues YouTube-Video: Visualisierung im Devices-Adapter
    BluefoxB
    Bluefox
    8
    1
    184

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    8
    1
    1.8k

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    11
    1
    766

[Suche][Beispiel] Widget Material Design

Geplant Angeheftet Gesperrt Verschoben Visualisierung
1 Beiträge 1 Kommentatoren 735 Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • S Offline
    S Offline
    Sven2013
    schrieb am zuletzt editiert von
    #1

    Hallo,

    kann mir jemand mal ein Beispiel einstellen, wie ich so etwas im Material Design von Uhula realisiere? Es geht nur um einzelne Widgets:

    576_widget_beispiel.png

    Hier mal das Beispiel wie ich es vorher im metro Design gebaut habe.

    Hier der wigdget export dazu :

    ! [{"tpl":"tplMetroTileList8","data":{"oid":"hm-rpc.0.LEQ0630255.1.STATE","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":true,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","label0":"geschlossen","label1":"gekippt","label2":"offen","label3":"Value list","label4":"Value list","label5":"Value list","label6":"Value list","label7":"Value list","bg_class0":"bg-dark","bg_class1":"bg-dark","bg_class2":"bg-dark","bg_class3":"bg-indigo","bg_class4":"bg-indigo","bg_class5":"bg-indigo","bg_class6":"bg-indigo","bg_class7":"bg-indigo","icon_class0":"","icon_class1":"","icon_class2":"","icon_class3":"icon-pencil","icon_class4":"icon-pencil","icon_class5":"icon-pencil","icon_class6":"icon-pencil","icon_class7":"icon-pencil","icon_badge0":"","icon_badge1":"","icon_badge2":"","icon_badge3":"icon-pencil","icon_badge4":"icon-pencil","icon_badge5":"icon-pencil","icon_badge6":"icon-pencil","icon_badge7":"icon-pencil","badge_bg_class0":"","badge_bg_class1":"","badge_bg_class2":"","badge_bg_class3":"bg-cyan","badge_bg_class4":"bg-cyan","badge_bg_class5":"bg-cyan","badge_bg_class6":"bg-cyan","badge_bg_class7":"bg-cyan","brand_bg_class0":"ribbed-emerald","brand_bg_class1":"ribbed-orange","brand_bg_class2":"ribbed-red","brand_bg_class3":"ribbed-steel","brand_bg_class4":"ribbed-steel","brand_bg_class5":"ribbed-steel","brand_bg_class6":"ribbed-steel","brand_bg_class7":"ribbed-steel","badge_top":"0","badge_left":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":"5","signals-vert-0":"8","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":"0","signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"label_prepend":"Seitentür ","icon0":"/icons-mfd-png/fts_window_1w.png","icon1":"/icons-mfd-png/fts_window_1w_tilt.png","icon2":"/icons-mfd-png/fts_window_1w_open.png","icon_width":"80","icon_height":"80","icon_top":"22","icon_left":"42","signals-oid-0":"hm-rpc.0.LEQ0630255.1.LOWBAT","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"360px","top":"210px","width":"106px","height":"96px"},"widgetSet":"metro"}]

    Tanken Widget:

    ! [{"tpl":"tplMetroTileString","data":{"hm_id":65535,"digits":"","factor":1,"min":0,"max":1,"step":0.01,"icon_class_true":"","icon_class_false":"","icon_badge_true":"","icon_badge_false":"","bg_class_true":"ribbed-emerald","bg_class_false":"ribbed-emerald","badge_bg_class_true":"","badge_bg_class_false":"","brand_bg_class_true":"","brand_bg_class_false":"","icon":"","icon_false":"/icons-mfd-png/scene_gas_station.png","label_id":"","label_append":" ","label_prepend":"Esso","content_prepend":"","content_append":" €","icon_width":"58","icon_height":"59","select_on_true":false,"badge_top":"0","badge_left":"0","content_oid":"tankerkoenig.0.stations.0.e5.feed","state_oid":"","g_visibility":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","g_fixed":false,"icon_top":"48","icon_left":"45","g_signals":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":"","signals-blink-0":true,"signals-horz-0":"5","signals-vert-0":"8","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"g_css_background":false,"g_gestures":false,"icon_true":"/icons-mfd-png/weather_cloudy.png","signals-oid-0":"","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"360px","top":"580px","text-align":"center","line-height":"","font-family":"Comfortaa-Bold","font-style":"","font-variant":"","color":"","width":"106px","height":"96px","z-index":"15"},"widgetSet":"metro"}]

    Vielen Dank für Tips :-)

    Gruß Sven

    1 Antwort Letzte Antwort
    0

    Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

    Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

    Mit deinem Input könnte dieser Beitrag noch besser werden 💗

    Registrieren Anmelden
    Antworten
    • In einem neuen Thema antworten
    Anmelden zum Antworten
    • Älteste zuerst
    • Neuste zuerst
    • Meiste Stimmen


    Support us

    ioBroker
    Community Adapters
    Donate

    496

    Online

    32.9k

    Benutzer

    83.0k

    Themen

    1.3m

    Beiträge
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
    ioBroker Community 2014-2025
    logo
    • Anmelden

    • Du hast noch kein Konto? Registrieren

    • Anmelden oder registrieren, um zu suchen
    • Erster Beitrag
      Letzter Beitrag
    0
    • Home
    • Aktuell
    • Tags
    • Ungelesen 0
    • Kategorien
    • Unreplied
    • Beliebt
    • GitHub
    • Docu
    • Hilfe