Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Farbiger Verlaufsbalken

    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

    Farbiger Verlaufsbalken

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mguenther @ManfredHi last edited by

      @manfredh-1
      naja - ich glaube eher, das musst du anders lösen. Ich würde 2 widgets übereinander legen. Im ersten widget kannst du ja einen gradientn erstellen, aber unabhängig vom Prozentwert, den du nachher darstellen willst. Wenn nun die Prozentzahl abnimmt, würde ich immer mehr ein zweites image widget drüberlegen, so dass der Hintergrund immer mehr transparent verdeckt wird.
      Ich habe sowas noch nicht umgesetzt, aber das wäre mein Ansatz

      Vielleicht hilft dir ja mein Gedankengang dazu...

      Gruß,
      Marcus

      1 Reply Last reply Reply Quote 1
      • Glasfaser
        Glasfaser @ManfredHi last edited by

        @manfredh-1

        Kannst du das Widget hier zur Verfügung stellen , damit man auch testen kann !

        M 1 Reply Last reply Reply Quote 0
        • M
          ManfredHi @Glasfaser last edited by

          @glasfaser said in Farbiger Verlaufsbalken:

          hier zur Verfügung stellen , damit man auch

          hier:

          [{"tpl":"tplValueFloatBar","data":{"oid":"nut.0.battery.charge","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"0","max":"100","orientation":"horizontal","color":"","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":0,"signals-vert-0":0,"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,"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,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Batterie-Stand","reverse":false},"style":{"left":"97px","top":"470px","z-index":"30","background":"linear-gradient(to left, #008000 0px, #FFA500 100px, #FF0000 280px)","width":"280px","border-radius":"5px","background-color":"","background-repeat":""},"widgetSet":"basic"}]
          
          1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @ManfredHi last edited by

            @manfredh-1

            AApossis (183).gif

            sind 2 widgets übereinander (siehe @mguenther )

            [{"tpl":"tplValueFloatBar","data":{"oid":"0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"0","max":"100","orientation":"horizontal","color":"","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":0,"signals-vert-0":0,"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,"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,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Batterie-Stand","reverse":false},"style":{"left":"93px","top":"547px","z-index":"30","background":"linear-gradient(to left, #008000 0%, #FFA500 20%, #FF0000 100%)","width":"509px","border-radius":"5px","background-color":"","background-repeat":"","height":"25px","transform":""},"widgetSet":"basic"},{"tpl":"tplValueFloatBar","data":{"oid":"0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"100","max":"0","orientation":"horizontal","color":"#d8d4d4","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":0,"signals-vert-0":0,"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,"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,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Batterie-Stand","reverse":true},"style":{"left":"92px","top":"547px","z-index":"30","background":"","width":"509px","border-radius":"5px","background-color":"","background-repeat":"","height":"25px","transform":"","opacity":".7"},"widgetSet":"basic"}]
            

            M 1 Reply Last reply Reply Quote 5
            • M
              ManfredHi @liv-in-sky last edited by

              @liv-in-sky
              Jetzt ist es so wie es sein sollte. Vielen Dank für Deine Hilfe.

              1 Reply Last reply Reply Quote 0
              • B
                biker1602 last edited by

                @liv-in-sky said in Farbiger Verlaufsbalken:

                @manfredh-1

                AApossis (183).gif

                sind 2 widgets übereinander (siehe @mguenther )

                [{"tpl":"tplValueFloatBar","data":{"oid":"0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"0","max":"100","orientation":"horizontal","color":"","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":0,"signals-vert-0":0,"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,"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,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Batterie-Stand","reverse":false},"style":{"left":"93px","top":"547px","z-index":"30","background":"linear-gradient(to left, #008000 0%, #FFA500 20%, #FF0000 100%)","width":"509px","border-radius":"5px","background-color":"","background-repeat":"","height":"25px","transform":""},"widgetSet":"basic"},{"tpl":"tplValueFloatBar","data":{"oid":"0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"100","max":"0","orientation":"horizontal","color":"#d8d4d4","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":0,"signals-vert-0":0,"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,"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,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Batterie-Stand","reverse":true},"style":{"left":"92px","top":"547px","z-index":"30","background":"","width":"509px","border-radius":"5px","background-color":"","background-repeat":"","height":"25px","transform":"","opacity":".7"},"widgetSet":"basic"}]
                

                Ich bekomme das irgendwie nicht hin, ich habe kopiert und auf Widget importieren eingefügt. Muss ich das Inputwidget auch dazu legen? Bei mir werden keine Werte angezeigt oder besser gesagt der Balken verändert sich nicht. Kannst du mir da helfen?

                liv-in-sky 1 Reply Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @biker1602 last edited by liv-in-sky

                  @biker1602

                  hast du den datenpunkt im widgetsettting angepaßt ?

                  B 1 Reply Last reply Reply Quote 0
                  • B
                    biker1602 @liv-in-sky last edited by

                    @liv-in-sky Ich habe bei ID den eigenen erstellten Datenpunkt z.B. 63% ausgewählt, aber es passiert nichts. Der Balken bleibt durchgängig bunt, ohne das er abschwächt.

                    DJMarc75 1 Reply Last reply Reply Quote 0
                    • DJMarc75
                      DJMarc75 @biker1602 last edited by

                      @biker1602 stell mal im z-index den schwarzen Balken auf eins höher als das andere widget

                      B 1 Reply Last reply Reply Quote 1
                      • B
                        biker1602 @DJMarc75 last edited by biker1602

                        @djmarc75 Ja dann kann man es etwas sehen. Ich hätte es allerdings schöner gefunden, wenn man bei diesem Widget
                        b49f5aa9-33d8-4eb0-a4cb-6fa63f282469-grafik.png

                        die Farbe ändern könnte. Den habe ich aktuell. In der Mitte wird die Prozentzahl vom Akku angezeigt und perfekt wäre, wenn man im Innenkreis einen zweiten Datenpunkt hätte, der farblich von Grün auf Rot springen würde, wo man sehen kann, ob geladen wird oder nicht, denn ich habe das Tablet an einer schaltbaren Steckdose und über ein Blockly gesteuert ab wie viel Prozent zum Laden an bzw. ausgeschaltet wird. Das wäre richtig MEGA

                        DJMarc75 1 Reply Last reply Reply Quote 0
                        • DJMarc75
                          DJMarc75 @biker1602 last edited by DJMarc75

                          @biker1602 sagte in Farbiger Verlaufsbalken:

                          ein Blockly

                          zeig das mal bitte, das kriegen wir ohne weiteres hin 😉

                          edit: es sei denn Du hast vor den Circle mit Verlaufsfarben zu versehen, das geht in dem Widget nicht

                          Homoran B 2 Replies Last reply Reply Quote 0
                          • Homoran
                            Homoran Global Moderator Administrators @DJMarc75 last edited by

                            @djmarc75 sagte in Farbiger Verlaufsbalken:

                            das geht in dem Widget nicht

                            Screenshot_20231116-132518_Firefox.jpg
                            Hier gibt es einen Farbverlauf je nach Wert, allerdings hat der Donut in sich keinen Farbverlsuf

                            1 Reply Last reply Reply Quote 0
                            • B
                              biker1602 @DJMarc75 last edited by biker1602

                              @djmarc75 said in Farbiger Verlaufsbalken:

                              zeig das mal bitte, das kriegen wir ohne weiteres hin

                              <block xmlns="https://developers.google.com/blockly/xml" type="on" id=")5a4G~K%{CTtKNS;y5_O" x="63" y="38">
                                <field name="OID">0_userdata.0.Akkustatus.Tablet_Küche</field>
                                <field name="CONDITION">any</field>
                                <field name="ACK_CONDITION"></field>
                                <statement name="STATEMENT">
                                  <block type="controls_if" id="A$,=Bnl}P{g8!dVie47d">
                                    <mutation elseif="1"></mutation>
                                    <value name="IF0">
                                      <block type="logic_compare" id="HHDi2aMp@w6N{OTLq:bs">
                                        <field name="OP">LT</field>
                                        <value name="A">
                                          <block type="get_value" id="l[#BZmBb4*XsY!x#8qQQ">
                                            <field name="ATTR">val</field>
                                            <field name="OID">0_userdata.0.Akkustatus.Tablet_Küche</field>
                                          </block>
                                        </value>
                                        <value name="B">
                                          <block type="math_number" id="DTY.[Fvg/v~9FSywwNQ{">
                                            <field name="NUM">30</field>
                                          </block>
                                        </value>
                                      </block>
                                    </value>
                                    <statement name="DO0">
                                      <block type="control" id="{28_[~j=T,t]yqkH?Yr~">
                                        <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                                        <field name="OID">sonoff.0.Gosund USB Steckdose Büro.POWER2</field>
                                        <field name="WITH_DELAY">FALSE</field>
                                        <value name="VALUE">
                                          <block type="logic_boolean" id="3p4T1LA;~TOWs!XNGm}1">
                                            <field name="BOOL">TRUE</field>
                                          </block>
                                        </value>
                                      </block>
                                    </statement>
                                    <value name="IF1">
                                      <block type="logic_compare" id="rE.HU.r5~]eHw-#8Jo!^">
                                        <field name="OP">EQ</field>
                                        <value name="A">
                                          <block type="get_value" id="UI%CM.JQJ)l^7(BN8PUZ">
                                            <field name="ATTR">val</field>
                                            <field name="OID">0_userdata.0.Akkustatus.Tablet_Küche</field>
                                          </block>
                                        </value>
                                        <value name="B">
                                          <block type="math_number" id="pj{7n4Y-O-[-8}|~6k_;">
                                            <field name="NUM">90</field>
                                          </block>
                                        </value>
                                      </block>
                                    </value>
                                    <statement name="DO1">
                                      <block type="control" id="dH8WY1rTjj(s8aeZ^)[.">
                                        <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                                        <field name="OID">sonoff.0.Gosund USB Steckdose Büro.POWER2</field>
                                        <field name="WITH_DELAY">FALSE</field>
                                        <value name="VALUE">
                                          <block type="logic_boolean" id="?fO:_y#_6=ph?(u^AlO6">
                                            <field name="BOOL">FALSE</field>
                                          </block>
                                        </value>
                                      </block>
                                    </statement>
                                  </block>
                                </statement>
                              </block>
                              

                              Der Farbverlauf ist nicht so wichtig.

                              DJMarc75 1 Reply Last reply Reply Quote 0
                              • DJMarc75
                                DJMarc75 @biker1602 last edited by

                                @biker1602 ich seh da nur Code.
                                Bitte einen Screenshot zeigen

                                B 1 Reply Last reply Reply Quote 0
                                • B
                                  biker1602 @DJMarc75 last edited by

                                  @djmarc75
                                  f23190e9-6432-430e-bfde-fa6a58158a3b-grafik.png

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

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  854
                                  Online

                                  31.9k
                                  Users

                                  80.1k
                                  Topics

                                  1.3m
                                  Posts

                                  7
                                  16
                                  1034
                                  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