Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.3.x

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Test Adapter Material Design Widgets v0.3.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • Bostil
      Bostil @Scrounger last edited by

      @Scrounger Um Himmels Willen .. alles gut. Freue mich schon auf den Bugfix! 🙂

      1 Reply Last reply Reply Quote 0
      • C
        Coffeelover last edited by

        @jobe451 Sehe ich das richtig - für die dynamische Höhe muss ich immer wissen, welches Widget in der View das "höchste" ist? Oder Notfalls ein leeres HTML mit definierter Höhe einfügen.

        1 Reply Last reply Reply Quote 0
        • J
          jobe451 last edited by

          @Coffeelover

          Sehe ich das richtig - für die dynamische Höhe muss ich immer wissen, welches Widget in der View das "höchste" ist? Oder Notfalls ein leeres HTML mit definierter Höhe einfügen.

          Nein, überhaut nicht. Das Ziel ist ja, dass die Höhe des Contens die Höhe der Karte bestimmt. Egal ob das auf Handy oder Widescreen angeschaut wird. Auf Mobile ist ja dann gerne eine grössere Höhe Notwendig, weil Zeugs mehr in die vertikale umbricht.

          Was ich da als screenshot gezeigt habe funktioniert aktuell nur mit einem ioBroker.vis-materialdesign Fork. Ich hoffe ich kann den schon bald wieder auflösen und der Change dort fliesst ins Projekt ein. Das Problem aktuell ist, dass wenn ich keine Höhe in einer Masonry-view oder Grid-view setze, das Widget automatisch fix 100px Höhe dem Element gibt. Das ist im wesentlichen der Change den ich gemacht hatte.

          Mein einfachstes Beispiel ist meine Übersicht:
          806d6825-9e01-4538-b319-73d225bcab09-image.png

          Das hier ist einfach ein HTML-widget mit einem div als Titel und einer Tabelle mit HTML Bindings.

          Und sieht dann so aus:
          3508360d-38f5-412c-a7a8-1aa9d93ea9db-image.png

          Leben tut das ganze dann in einem einem Masonry-Widget als view.

          Möglich sind aber auch komplexere Dinge. Man kann Elemente links / rechts floaten und mit clearfix die nächste Reihe beginnen:
          c3054163-b914-445a-8327-f2ae008f847b-image.png (irgendwie bricht da der Automatisierungs-Button um, man sieht es kaum, ist aber noch zu verbessern.)

          Die Elemente hier passen sich der Breite an und sind mittels float positioniert mittels clearfix fängt jeweils die nächste Kolonne an.

          Grundsätlich versuch ich absolut-positionierte Elemente zu vermeiden. Braucht aber etwas Geduld und ausprobieren.

          Was eine Fumellei ist, ist wenn man die Positionierung von Elemente verändern will. Dann gibt es cut and copy. VIS scheint das nicht vorzusehen. Als VIS konzipiert wurde, schien progressive-design noch nicht so weit gewesen zu sein und Zeugs absolut zu positionieren ist so für den Einstieg sicher einfacher.

          1 Reply Last reply Reply Quote 0
          • J
            jobe451 last edited by

            @Coffeelover

            Wo muss ich das denn eintragen. Im CSS hatte bei mir keinen Effekt.

            Doch, hier:
            c4fdad99-d8b5-48a0-a381-af5f95af311f-image.png

            Hier mein ganzes aktuelles CSS. Unkommentiert, unaufgeräumt mit allen möglichen Unschönheiten die noch drin stecken, hoffe es hilft:

            div.mdc-typography--headline6 {
   margin: 0 0 1.5rem 0; 
}

.JB_float_right {
    float: right;
    box-sizing:border-box;
}

.JB_float_left {
    float: left;
    box-sizing:border-box;
}

div.JB_block {
   display: block;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

table.overview td {
    padding: 0 2rem 0.5rem 0;
    width: 100%;
}

table.overview {
    width: 100%;
    max-width: 500px;
}

@media screen and (max-width: 420px) {

    div.materialdesign-masonry-container {
        column-gap: 3px;
        padding: 5px;
    }
    
    div.mdc-materialdesign-masonry-item {
        padding-bottom: 3px;
    }
}
.materialdesign-masonry-item > div > div.vis-view  {
    padding:  1rem 0.5rem;
    border-radius: 4px;
    background-color: var(--materialdesign-color-card-background);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
}

html > body, #vis_container {
    color: white;
    background-color: var(--JB_background_primary);
}

.JB_weatherIcons img {
    height: 48px !important;
    filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(306deg) brightness(0.9) saturate(140%);
}

.JB_clearfix::after {
  content: "";
  clear: both;
  display: table;
}


div.JB_light {
    float: left;
}

div.JB_lights::after {
  content: "";
  clear: both;
  display: table;
}

div.JB_lights_group {
    float: left;
    padding: 0 0.5rem 0.5rem 0;
}

div.JB_btn_light {
    padding-bottom: 2em;
    padding: 2.5em 2em 3em 2em;
}

div.JB_btn_settings {
    
}

div.JB_btn_settings, div.JB_btn_light {
    width: 72px;
    margin: 0.2em;
}

div.materialdesign-icon-list-item-layout-vertical-image-container {
    padding: 0.3em 0;
}

div.materialdesign-icon-list-item-card--outlined {
    border-color: var(--JB_background_tertiary);
}

div.materialdesign-icon-list-item-card {
    background: var(--JB_background_primary);
}

div.theme--light.v-list {
    background: #2f353a;
    color: rgba(255,255,255,.87)
}
div.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: rgba(255,255,255,.87)!important
}

@media screen and (max-width: 420px) {
    .JB_weatherIcons .materialdesign-icon-list-item {
        padding: 0px;
        margin: 2px;
        border-width: 1px;
        min-width: unset !important;
    }

    .JB_weatherIcons .materialdesign-masonry-container {
        padding: 1px;
    }
    
    .JB_weatherIcons .materialdesign-icon-list-item-text, .JB_weatherIcons .materialdesign-icon-list-item-subText {
        font-size: 12px;
    }

    .JB_weatherIcons img {
        height: 40px !important;
    }
}

.JB_rightClock {
    right: 10px;
    top: 29px;
    font-size: large;
}

.JB_rightAlignedDate {
    right: 10px;
    top: 12px;
    font-size: smaller;
}


.JB_rightClock, .JB_rightAlignedDate {
    position: absolute;
    z-index: 2001;
}

div.theme--light.v-card {
    background-color: #00838f;
}

div.mdc-drawer__header {
    background-color: var(--mdc-theme-primary);
}

.vis-tpl-basic-HTML {
    color: white;
}


/*
    --JB_background_primary: #2d323a;
    --JB_background_secondary: #33363d;
    --JB_background_tertiary: #2a2e35;
*/
:root {
    --mdc-theme-primary:#009688 !important;
    --mdc-theme-secondary:#0097a7 !important;
    --material-progress-circular-color:#009688 !important;
    --materialdesign-color-drawer-background:#33363d !important;
    --materialdesign-color-drawer-sub-background: rgba(255,255,255,0) !important;
    --materialdesign-color-list-item-background:#00838f !important;
    --materialdesign-color-sub-list-item-background: #00695C !important;
    --materialdesign-color-list-item-hover:#000 !important;
    --materialdesign-color-sub-list-item-hover:#000 !important;
    --materialdesign-color-list-item-selected:#000 !important;
    --materialdesign-color-sub-list-item-selected:#000 !important;
    --materialdesign-color-list-item-text:white !important;
    --materialdesign-color-sub-list-item-text: white !important;
    --materialdesign-color-list-item-text-activated: white !important;
    --materialdesign-color-sub-list-item-text-activated: white !important;
    --materialdesign-color-list-item-text-secondary:rgba(0, 0, 0, 0.54) !important;
    --materialdesign-color-list-item-text-right:#000 !important;
    --materialdesign-color-list-item-text-secondary-right:rgba(0, 0, 0, 0.54) !important;
    --materialdesign-color-list-item-header:#000 !important;
    --materialdesign-color-list-item-divider:rgba(0, 0, 0, 0.12) !important;
    --materialdesign-color-list-item-backdrop:rgba(0,0,0,0.5) !important;
    --materialdesign-color-sub-list-item-backdrop:rgba(0,0,0,0.5) !important;
    --materialdesign-color-list-item-backdrop-activated:#1e88e566 !important;
    --materialdesign-color-sub-list-item-backdrop-activated:#1e88e566 !important;
    --materialdesign-color-card-background:#33363d !important;
    --materialdesign-color-card-title-section-background:transparent !important;
    --materialdesign-color-card-text-section-background:transparent !important;
    --materialdesign-color-card-title:#ffffff !important;
    --materialdesign-color-card-sub-title:#a1a1a1 !important;
    --materialdesign-color-select-background:transparent !important;
    --materialdesign-color-select-background-hover:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-select-hint:#009688 !important;
    --materialdesign-color-select-hint_selected:#009688 !important;
    --materialdesign-color-select-border:rgba(0,0,0,.38) !important;
    --materialdesign-color-select-border-selected:#009688 !important;
    --materialdesign-color-select-text:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-dialog-background:#fff !important;
    --materialdesign-color-dialog-button-background:transparent !important;
    --materialdesign-color-dialog-button-text:#009688 !important;
    --materialdesign-color-dialog-button-hover:#009688 !important;
    --materialdesign-color-dialog-title-background:transparent !important;
    --materialdesign-color-dialog-title:#009688 !important;
    --materialdesign-color-table-background:#fff !important;
    --materialdesign-color-table-border:rgba(0,0,0,.12) !important;
    --materialdesign-color-table-header-row-background:inherit !important;
    --materialdesign-color-table-header-row-text-color:#009688 !important;
    --materialdesign-color-table-row-background:inherit !important;
    --materialdesign-color-table-row-text-color:rgba(0, 0, 0, 0.87) !important;
    --materialdesign-color-table-row-divider:rgba(0, 0, 0, 0.12) !important;
    --materialdesign-color-switch-on:#009688 !important;
    --materialdesign-color-switch-off:#fff !important;
    --materialdesign-color-switch-track:#000 !important;
    --materialdesign-color-switch-off-hover:#009688 !important;
    --materialdesign-color-slider-before-thumb:#009688 !important;
    --materialdesign-color-slider-thumb:#009688 !important;
    --materialdesign-color-slider-after-thumb:rgba(161, 161, 161, 0.26) !important;
    --materialdesign-color-slider-track-marker:#009688 !important;
    --materialdesign-masonry-gaps:20px !important;
    --materialdesign-grid-gaps:0px !important;
    --materialdesign-icon-list-items-per-row:3 !important;
    --materialdesign-icon-list-items-min-width:50px !important;
    --materialdesign-icon-list-items-gaps:4px !important;
    --materialdesign-icon-list-items-text-font-size:14px !important;
    --materialdesign-icon-list-items-text-font-family:inherit !important;
    --materialdesign-icon-list-items-text-font-color:rgba(255,255,255, 0.7) !important;
    --materialdesign-icon-list-items-subText-font-size:12px !important;
    --materialdesign-icon-list-items-subText-font-family:inherit !important;
    --materialdesign-icon-list-items-subText-font-color:rgba(255,255,255, 0.7) !important;
    --materialdesign-icon-list-items-value-font-size:12px !important;
    --materialdesign-icon-list-items-value-font-family:inherit !important;
    --materialdesign-icon-list-items-value-font-color:#009688 !important;
    --materialdesign-icon-list-item-layout-horizontal-image-container-width:auto !important;
    --materialdesign-icon-list-item-layout-vertical-image-container-height:auto !important;
    --vue-slider-thumb-label-font-color:#fff !important;
    --vue-slider-thumb-label-font-size:12px !important;
    --vue-slider-tick-before-color:#009688 !important;
    --vue-slider-tick-after-color:#009688 !important;
    --vue-text-field-before-color:rgba(0, 0, 0, 0.2) !important;
    --vue-text-field-hover-color:#009688 !important;
    --vue-text-field-after-color:#009688 !important;
    --vue-text-field-label-before-color:rgba(0, 0, 0, 0.6) !important;
    --vue-text-field-label-after-color:#009688 !important;
    --vue-text-field-label-font-family:inherit !important;
    --vue-text-field-label-font-size:16px !important;
    --vue-text-field-label-width:inherit !important;
    --vue-text-field-background-color:rgba(0, 0, 0, 0.06) !important;
    --vue-text-field-background-hover-color:rgba(0, 0, 0, 0.12) !important;
    --vue-text-field-background-after-color:rgba(0, 0, 0, 0.06) !important;
    --vue-text-field-input-text-color:rgba(255, 255, 255, 0.87) !important;
    --vue-text-field-input-text-font-size:inherit !important;
    --vue-text-field-input-text-font-family:inherit !important;
    --vue-text-field-message-color:rgba(0, 0, 0, 0.6) !important;
    --vue-text-field-message-font-size:12px !important;
    --vue-text-field-message-font-family:inherit !important;
    --vue-text-field-counter-color:rgba(0,0,0,.6) !important;
    --vue-text-field-counter-font-size:12px !important;
    --vue-text-field-counter-font-family:inherit !important;
    --vue-text-field-appendix-color:rgba(0,0,0,.6) !important;
    --vue-text-field-appendix-font-size:inherit !important;
    --vue-text-field-appendix-font-family:inherit !important;
    --vue-text-field-translate-x:0px !important;
    --vue-text-field-translate-y:-18px !important;
    --vue-text-icon-clear-color:#009688 !important;
    --vue-text-icon-clear-size:inherit !important;
    --vue-text-icon-append-color:#009688 !important;
    --vue-text-icon-append-size:inherit !important;
    --vue-text-icon-append-cursor:inherit !important;
    --vue-text-icon-append-outer-color:#009688 !important;
    --vue-text-icon-append-outer-size:inherit !important;
    --vue-text-icon-prepand-color:#009688 !important;
    --vue-text-icon-prepand-size:inherit !important;
    --vue-text-icon-prepand-inner-color:#009688 !important;
    --vue-text-icon-prepand-inner-size:inherit !important;
    --vue-list-item-height:auto !important;
    --vue-list-item-background-color:inherit !important;
    --vue-list-item-background-hover-color:black !important;
    --vue-list-item-background-selected-color:black !important;
    --vue-ripple-effect-color:#009688 !important;
    --vue-list-item-font-size:inherit !important;
    --vue-list-item-font-family:inherit !important;
    --vue-list-item-font-color:inherit !important;
    --vue-list-item-font-color-hover:inherit !important;
    --vue-list-item-font-color-selected:inherit !important;
    --vue-list-item-subtitle-font-size:inherit !important;
    --vue-list-item-subtitle-font-family:inherit !important;
    --vue-list-item-subtitle-font-color:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-subtitle-font-color-hover:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-subtitle-font-color-selected:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-size:inherit !important;
    --vue-list-item-value-font-family:inherit !important;
    --vue-list-item-value-font-color:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-color-hover:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-value-font-color-selected:rgba(0, 0, 0, 0.6) !important;
    --vue-list-item-icon-size:20px !important;
    --vue-list-item-icon-color:#009688 !important;
    --vue-list-item-icon-color-hover:#009688 !important;
    --vue-list-item-icon-color-selected:#009688 !important;
    --vue-alerts-background-color:#fff !important;
    --vue-alerts-border-color:#009688 !important;
    --vue-alerts-border-outlined-color:#009688 !important;
    --vue-alerts-button-close-color:#009688 !important;
    --vue-alerts-text-size:16px !important;
    --vue-alerts-text-font-family:inherit !important;
    --vue-alerts-text-font-color:inherit !important;
    --vue-alerts-icon-color:black !important;
    --vue-alerts-icon-size:24px !important;
    --vue-alerts-bottom-margin:16px !important;
    --vue-btn-background-color-before:transparent !important;
    --vue-calendar-day-button-today-color:#009688 !important;
    --vue-calendar-border-color:#e0e0e0 !important;
    --vue-calendar-background-color:transparent !important;
    --vue-calender-background-outside-color:#f7f7f7 !important;
    --vue-calender-header-background-color:transparent !important;
    --vue-calendar-time-axis-background-color:transparent !important;
    --vue-calendar-time-axis-header-background-color:transparent !important;
    --vue-calendar-time-axis-text-size:12px !important;
    --vue-calendar-time-axis-text-font:inherit !important;
    --vue-calendar-time-axis-text-color:black !important;
    --vue-calendar-day-button-font-size:inherit !important;
    --vue-calendar-day-button-font-family:inherit !important;
    --vue-calendar-day-button-font-color:black !important;
    --vue-calendar-day-button-today-font-size:inherit !important;
    --vue-calendar-day-button-today-font-family:inherit !important;
    --vue-calendar-day-button-today-font-color:#fff !important;
    --vue-calendar-day-label-font-size:12px !important;
    --vue-calendar-day-label-font-family:inherit !important;
    --vue-calendar-day-label-font-color:#000000 !important;
    --vue-calendar-day-label-previous-font-color:rgba(0, 0, 0, 0.38) !important;
    --vue-calendar-day-label-today-font-size:12px !important;
    --vue-calendar-day-label-today-font-family:inherit !important;
    --vue-calendar-day-label-today-font-color:#009688 !important;
    --vue-calendar-control-container-height:10px --vue-calendar-control-button-icon-size: 24px !important;
    --vue-calendar-control-button-icon-color:#009688 !important;
    --vue-calendar-control-button-text-size:12px !important;
    --vue-calendar-control-button-text-color:black !important;
    --vue-calendar-control-button-text-font:inherit !important;
    --vue-aclendar-event-font-size:inherit !important;
    --vue-aclendar-event-font:inherit !important;
    --vue-calendar-control-button-container-flex:1 !important;
    --vue-calendar-control-button-container-min-width:initial !important;
    --vue-dialog-title-font-size:20px !important;
    --vue-dialog-title-font-family:inherit !important;
    --vue-dialog-footer-background-color:initial !important;
    --vue-dialog-view-container-distance-to-border:24px !important;
    --vue-toolbar-background-color:#009688 !important;
    --vue-overlay-scrim-opacity:0.46 !important;
    --vue-overlay-scrim-background-color:rgb(33, 33, 33);
    
    --JB_background_primary: #2d323a;
    --JB_background_secondary: #33363d;
    --JB_background_tertiary: #2a2e35;
}
            1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer last edited by

              Da ich in der zwischenzeit doch drüber gestolpert bin, dass ich controls im Table Widget benötige, hab ich angefangen das zu implementieren.

              table_control_example.gif

              Und da @Bluefox den vis editor einfach klasse programmiert hat, konnte ich Funktionen nutzen um eine recht einfach Möglichkeit zu schaffen, wie ihr die Controls (andere Widgets) in die Table bekommt:

              table_controls.gif.

              Wer es testen möchte, kann sich die aktuelle github version ziehen.
              Das ist aber alles noch Alpha!

              Und ja ich werde auch noch weitere Widgets integrieren 🙂

              1 Reply Last reply Reply Quote 2
              • C
                Coffeelover last edited by Coffeelover

                @jobe451 Vielen Dank für deine ausführliche und verständliche Antwort.
                Edit: Das CSS funktioniert bei mir auch, nachdem ich " > div > div.vis-view " das aus deinem Code entfernt habe.

                @all Sorry für halbwegs OT. 🙂

                1 Reply Last reply Reply Quote 0
                • Iccube
                  Iccube last edited by

                  @Scrounger seit dem update 3.11 gehen die icon button toggle nicht mehr auf dem Handy und beim Fully K Browser auch nicht. In Chrome auf dem Pc funktioniert es.
                  Könnte eventuell auch schon seit version 3.09 so sein

                  C 1 Reply Last reply Reply Quote 0
                  • C
                    Coffeelover @Iccube last edited by

                    @Iccube Das kann ich nicht bestätigen. Gerade ein einfaches Toogle erstellt. Funktioniert sowohl auf dem Rechner wie auch am Handy (firefox) wie auch am Tablet (Fully)

                    Iccube 1 Reply Last reply Reply Quote 0
                    • Iccube
                      Iccube @Coffeelover last edited by

                      @Coffeelover bei mir ist es leider so wenn ich auf die Version 3.6 zurück gehe funktioniert es auf dem Handy und bei Fully wieder

                      Scrounger 1 Reply Last reply Reply Quote 0
                      • Scrounger
                        Scrounger Developer @Iccube last edited by

                        @Iccube @Coffeelover

                        Ich kanns aber bestätigen, Handy Chrome geht nicht. Und das nur weil ich was für den apfel fixen wollte...
                        Hab grad ne Version bei github hocgeladen, bitte teste ob es funktioniert.

                        Iccube 1 Reply Last reply Reply Quote 0
                        • Iccube
                          Iccube @Scrounger last edited by

                          @Scrounger gerade getestet funktioniert leider noch nicht

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • B
                            bommel_030 last edited by

                            @Scrounger
                            Hab fürs HTML-Card Widget keinen eigenen Thread gefunden, deshalb hier....
                            Ist es möglich das Bild (hier horizontales Layout) zu formatieren? Aktuell zeigt er das Bild stur in Originalauflösung an. Passt nicht so ganz... Könnte das natürlich auf die richtige Auflösung konvertieren, hilft mir dann aber beim Border auch nicht weiter. Egal was ich bei der Bildquelle angebe, er nimmt nur das Bild und keine Bindings, Formatangaben etc.
                            Ein Bild sagt mehr als tausend Worte:
                            c61d426b-904d-4d83-9e52-02808535cc7d-image.png
                            Oben passt die Auflösung der Tonne nicht so recht, und wie den Rahmen mit nem Binding wie bei der Tonne unten versehen geht nicht oder ich verstehe die Syntax nicht.

                            Scrounger 2 Replies Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer @Iccube last edited by

                              @Iccube
                              Hast du neugestartet bzw. nen iobroker Upload vis danach durchgeführt? Bei mir funktioniert der Bug fix

                              Iccube 1 Reply Last reply Reply Quote 0
                              • Iccube
                                Iccube @Scrounger last edited by

                                @Scrounger wie mache ich den einen iobroker uploade vis ?
                                Habe iobroker mal komplett neu gestartet ohne erfolg

                                sigi234 1 Reply Last reply Reply Quote 0
                                • sigi234
                                  sigi234 Forum Testing Most Active @Iccube last edited by sigi234

                                  @Iccube sagte in Test Adapter Material Design Widgets v0.3.x:

                                  @Scrounger wie mache ich den einen iobroker uploade vis ?
                                  Habe iobroker mal komplett neu gestartet ohne erfolg

                                  iobroker stop vis
iobroker upload vis
iobroker start vis

                                  Browser Cache leeren, Vis starten

                                  Iccube 1 Reply Last reply Reply Quote 0
                                  • Iccube
                                    Iccube @sigi234 last edited by

                                    @sigi234 danke
                                    @Scrounger funktioniert wieder alles

                                    1 Reply Last reply Reply Quote 0
                                    • P
                                      ple @AxelF1977 last edited by ple

                                      @AxelF1977 sagte in Test Adapter Material Design Widgets v0.3.x:

                                      @Glasfaser sagte in Test Adapter Material Design Widgets v0.3.x:

                                      @AxelF1977

                                      Alles gut ... hast bis jetzt alles richtig gemacht !

                                      Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
                                      Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

                                      Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

                                      hier der Thread dazu : top-app-bar-widget

                                      hier auch zum schauen wie es geht : Link Text

                                      Großartig, vielen Dank! Das hat geholfen.

                                      Allerdings habe ich mit dem View in Widget 8. Stellt der views anders dar?

                                      So sieht es mit View in Widget 8 aus

                                      bda9f1d7-f80c-4e2e-8c9d-5ea474587446-image.png

                                      so soll es aussehen

                                      1c9ab5e3-71bf-4ecd-aaa5-6c0046d0c146-image.png

                                      Richtig angezeigt wird es mit widget in view, es ist die selbe View die jeweils angezeigt wird, sehr merkwürdig

                                      Sag mal, kannst du mir vielleicht kurz einen Export von den Farbverlauf schicken?
                                      Ich bekomme es irgendwie nicht hin. Ich wollte gerne wohl was haben, was mittig grün ist und nach rechts (+) und links (-) ins rote läuft.

                                      Gruß und Danke

                                      Update:
                                      Ok, mit

                                      linear-gradient(to right, #4CAF50 0px, #fae300 50px, #ff1f1a 100px)

                                      im Fortschritt klappt das soweit. Nun muss der Balken nur noch rechts anfangen, statt links, aber Wert umkehren klappt leider nicht.
                                      Oder hat noch einer einen Tipp?

                                      AxelF1977 1 Reply Last reply Reply Quote 0
                                      • AxelF1977
                                        AxelF1977 @ple last edited by

                                        @ple sagte in Test Adapter Material Design Widgets v0.3.x:

                                        @AxelF1977 sagte in Test Adapter Material Design Widgets v0.3.x:

                                        @Glasfaser sagte in Test Adapter Material Design Widgets v0.3.x:

                                        @AxelF1977

                                        Alles gut ... hast bis jetzt alles richtig gemacht !

                                        Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
                                        Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

                                        Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

                                        hier der Thread dazu : top-app-bar-widget

                                        hier auch zum schauen wie es geht : Link Text

                                        Großartig, vielen Dank! Das hat geholfen.

                                        Allerdings habe ich mit dem View in Widget 8. Stellt der views anders dar?

                                        So sieht es mit View in Widget 8 aus

                                        bda9f1d7-f80c-4e2e-8c9d-5ea474587446-image.png

                                        so soll es aussehen

                                        1c9ab5e3-71bf-4ecd-aaa5-6c0046d0c146-image.png

                                        Richtig angezeigt wird es mit widget in view, es ist die selbe View die jeweils angezeigt wird, sehr merkwürdig

                                        Sag mal, kannst du mir vielleicht kurz einen Export von den Farbverlauf schicken?
                                        Ich bekomme es irgendwie nicht hin. Ich wollte gerne wohl was haben, was mittig grün ist und nach rechts (+) und links (-) ins rote läuft.

                                        Gruß und Danke

                                        Update:
                                        Ok, mit

                                        linear-gradient(to right, #4CAF50 0px, #fae300 50px, #ff1f1a 100px)

                                        im Fortschritt klappt das soweit. Nun muss der Balken nur noch rechts anfangen, statt links, aber Wert umkehren klappt leider nicht.
                                        Oder hat noch einer einen Tipp?

                                        Hi,

                                        verstehe ich das richtig so?

                                        Der Verlauf soll mittig grün sein. Bei Änderungen entweder nach links gehen, oder nach rechts?

                                        Das wird so nicht gehen, da müsstet Du tiefgreifend in der CCS was ändern. Aktuell geht wohl nur von links nach rechts, wie sie bei mir sind. Den Export kann ich Dir aber gerne geben,

                                        @Uhula weiß da sicherlich mehr

                                        1 Reply Last reply Reply Quote 0
                                        • P
                                          ple last edited by

                                          Ja war angedacht, es würde auch schon reichen wenn der Balken von rechts nach links gehen würde. Das geht mit dem Standard Widget mit Wert umkehren.
                                          Dann könnte ich einfach 2 Widgets nehmen und die nebeneinander legen.

                                          AxelF1977 1 Reply Last reply Reply Quote 0
                                          • AxelF1977
                                            AxelF1977 @ple last edited by

                                            @ple sagte in Test Adapter Material Design Widgets v0.3.x:

                                            Ja war angedacht, es würde auch schon reichen wenn der Balken von rechts nach links gehen würde. Das geht mit dem Standard Widget mit Wert umkehren.
                                            Dann könnte ich einfach 2 Widgets nehmen und die nebeneinander legen.

                                            Kennst Du Dich mit CCS aus? Du müsstest den CSS Code kopieren und mit neuem Namen einfügen. Und dann halt die Änderungen vornehmen, die Du benötigst. Bin aber gerade nicht an meinem Rechner, daher kann ich es mir nicht angucken.

                                            Genre heute Nachmittag

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            782
                                            Online

                                            31.7k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material material design widgets vis visualization widget
                                            33
                                            169
                                            17397
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo