Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Gelöst] Toggle Knopf mit wechselnder Rahmenfarbe erstellen

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Gelöst] Toggle Knopf mit wechselnder Rahmenfarbe erstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      DeepCore last edited by

      Hallo zusammen,

      [Update 25.07.2016 13:25] https://github.com/DeepCoreSystem/iobroker.vis-deepcore

      ich nutze die sommerliche Hitze um ich im Keller zu verstecken und versuche nebenbei ein vis-Widget zu erstellen.

      Und zwar ein Toggle-Knopf wo der Rahmen seine Farbe ändert, je nach Zustand. Einen Teilerfolg habe ich schon, wenn ich die Rahmenfarben fest im JavaScript definiere.

      Im Vis-Editor habe ich zwar schon zwei Farbpicker hinbekommen, aber ich blicke nicht durch, wie im JS auf diese 2 Attribute zugreifen kann ?

      So sieht es aktuell aus:
      1336_2016-07-23_15_52_31-vis.png

      Dies ist der Inhalt in HTML

      ! ```
      ! Und hier ist meine Javascript-Datei:
      ! >! [spoiler]~~[code]~~/* ioBroker.vis deepcore Widget-Set ! version: "0.0.1" ! Copyright 10.2015-2016 DeepCore <devap@deepcore.eu>*/ ! // add translations for edit mode if (vis.editMode) { $.extend(true, systemDictionary, { "borderOn": { "en": "Border On", "de": "Rahmenfarbe Ein", "ru": "Border On" }, "borderOn_tooltip": { "en": "Color of Border when On", "de": "Rahmenfarbe wenn Ein", "ru": "htmlText" }, "borderOff": { "en": "Border Off", "de": "Rahmenfarbe Aus", "ru": "Border Off" }, "borderOff_tooltip": { "en": "Color of Border when Off", "de": "Rahmenfarbe wenn Aus", "ru": "htmlText" }, "icon": { "en": "Icon", "de": "Icon", "ru": "Icon" } }); }; ! // add translations for non-edit mode $.extend(true, systemDictionary, { "Instance": { "en": "Instance", "de": "Instanz", "ru": "Инстанция" } }); ! vis.binds.deepcore = { version: "0.0.2", showVersion: function() { if (vis.binds.deepcore.version) { console.log('Deepcore widget version: ' + vis.binds.deepcore.version); vis.binds.deepcore.version = null; } }, togglerHelper: function($this, val, min, max, value, reverse) { ! if (val === true || val === 'true') val = max; if (val === false || val === 'false') val = min; ! if (max === undefined || max === '' || max === null) { max = 1; min = 0; val = (val === 'false' || val === false || val === 0 || val === '0' || val === '' || val === null || val === undefined) ? min : max; } ! if (reverse) { if (val == max) { val = min; } else { val = max; } } ! if (value === undefined && val > min && val !== true) { val = parseFloat(val) || 0; } ! if ((value === undefined && val > min) || (value !== undefined && val == value)) { $this.css("border-color", "#0aff11"); } else { $this.css("border-color", "gray"); } }, toggler: function(el, reverse, _value) { var $this = $(el); var oid = $this.data('oid'); var max = $this.data('max') || 1; var min = $this.data('min') || 0; if (oid) { vis.states.bind(oid + '.val', function(e, newVal, oldVal) { vis.binds.deepcore.togglerHelper($this, newVal, min, max, _value, reverse); }); ! vis.binds.deepcore.togglerHelper($this, vis.states.attr(oid + '.val'), min, max, _value, reverse); } }, toggle: function(el, oid) { var $this = $(el); var oid = oid || $this.data('oid'); var min = $this.data('min'); var max = $this.data('max'); var urlTrue = $this.data('url-true'); var urlFalse = $this.data('url-false'); var oidTrue = $this.data('oid-true'); var oidFalse = $this.data('oid-false'); var oidTrueVal = $this.data('oid-true-value'); var oidFalseVal = $this.data('oid-false-value'); var readOnly = $this.data('read-only'); ! if (min === '') min = undefined; if (max === '') max = undefined; ! if ((oid || oidTrue || urlTrue) && !vis.editMode && !readOnly) { $this.on('click touchstart', function() { // Protect against two events if (vis.detectBounce(this)) return; var val; ! if (oidTrue || urlTrue) { if (!oidFalse && oidTrue) oidFalse = oidTrue; if (!urlFalse && urlTrue) urlFalse = urlTrue; ! if (!oid || oid == 'nothing_selected') { val = !$(this).data('state'); // remember state $(this).data('state', val); } else { val = vis.states[oid + '.val']; if (max !== undefined) { val = (val == max); } else { val = (val === 1 || val === '1' || val === true || val === 'true'); } val = !val; // invert } if (min === undefined || min === 'false' || min === null) min = false; if (max === undefined || max === 'true' || max === null) max = true; ! if (oidTrue) { if (val) { if (oidTrueVal === undefined || oidTrueVal === null) oidTrueVal = max; if (oidTrueVal === 'false') oidTrueVal = false; if (oidTrueVal === 'true') oidTrueVal = true; var f = parseFloat(oidTrueVal); if (f.toString() == oidTrueVal) oidTrueVal = f; vis.setValue(oidTrue, oidTrueVal); } else { if (oidFalseVal === undefined || oidFalseVal === null) oidFalseVal = min; if (oidFalseVal === 'false') oidFalseVal = false; if (oidFalseVal === 'true') oidFalseVal = true; var f = parseFloat(oidFalseVal); if (f.toString() == oidFalseVal) oidFalseVal = f; vis.setValue(oidFalse, oidFalseVal); } } ! if (urlTrue) { if (val) { vis.conn.httpGet(urlTrue) } else { vis.conn.httpGet(urlFalse); } } ! // show new state if (!oid || oid == 'nothing_selected') { var img = $(this).data('img-class'); if (val) { if ($(this).data('as-button')) $(this).addClass('ui-state-active'); val = $(this).data('img-true'); } else { val = $(this).data('img-false') if ($(this).data('as-button')) $(this).removeClass('ui-state-active'); } $(this).find('.' + img).attr('src', val); } } else { var val = vis.states[oid + '.val']; if ((min === undefined && (val === null || val === '' || val === undefined || val === false ||  val === 'false')) || (min !== undefined && min == val)) { vis.setValue(oid, max !== undefined ? max : true); } else if ((max === undefined && (val === true ||  val === 'true')) || (max !== undefined && val == max)) { vis.setValue(oid, min !== undefined ? min : false); } else { val = parseFloat(val); if (min !== undefined && max !== undefined) { if (val >= (max - min) / 2) { val = min; } else { val = max; } } else { if (val >= 0.5) { val = 0; } else { val = 1; } } vis.setValue(oid, val); } } }); } } }; ! vis.binds.deepcore.showVersion(); ! [/code]</devap@deepcore.eu>[/spoiler]
      ! Danke für Vorschläge!
      ! DeepCore
      ! <size size="85">[size][Update 25.07.2016 08:00] Spoiler-Tags eingefügt[/size]</size>[/gray]

      1 Reply Last reply Reply Quote 0
      • htrecksler
        htrecksler Forum Testing last edited by

        Ich kann Dir zwar leider nicht helfen, aber die Widgets finde ich sehr schön - auch die Idee über die Rahmenfarbe Zustände zu visualisieren.

        Ich hoffe du erhälst Hilfe

        Schönen Sonntag - Hermann

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

          Stell mal bitte den Export vom Widget ein.

          1 Reply Last reply Reply Quote 0
          • D
            DeepCore last edited by

            Hier ist der Export vom Widget:

            [
              {
                "tpl": "tplDeepcoreToggleButton",
                "data": {
                  "visibility-cond": "==",
                  "visibility-val": 1,
                  "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,
                  "oid": "hm-rega.0.5195",
                  "icon": "\/icons-mfd-svg\/status_economy.svg",
                  "borderOn": "#0aff11",
                  "borderOff": "#b0b0b0"
                },
                "style": {
                  "left": "136px",
                  "top": "71px"
                },
                "widgetSet": "deepcore"
              }
            ]
            
            
            1 Reply Last reply Reply Quote 0
            • D
              DeepCore last edited by

              Wahrscheinlich hab ich's etwas kompliziert gemacht, aber ich kann die Rahmenfarben jetzt im Editor vorgeben 😄

              Zwei Änderungen sowohl im HTML- als auch im JS-Teil … Sprich ich übernehme im HTML die gewählten Farben als Zusatz-Attribute im ersten DIV-Tag. So kann ich sie dann im JS-Teil aufgreifen. :oops:

              HTML:

              `" data-brdoff="<%= this.data.attr('borderOff')%>" data-oid="<%= this.data.attr('oid')%>" .... >` 
              
              JS:
              
                  if ((value === undefined && val > min) || (value !== undefined && val == value)) {
                      myColor = $this.attr("data-brdon");   // Aenderung hier
                      $this.css("border-color", myColor);
                  } else {
                      myColor = $this.attr("data-brdoff");   // Aenderung hier
                      $this.css("border-color", myColor);
                  }
              
              
              Jetzt lasst uns mal über Verbesserungen diskutieren  ;) 
              
              Gruß
              
              DeepCore
              ```
              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Support us

              ioBroker
              Community Adapters
              Donate

              948
              Online

              31.6k
              Users

              79.6k
              Topics

              1.3m
              Posts

              3
              5
              1997
              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