[Gelöst] Toggle Knopf mit wechselnder Rahmenfarbe erstellen

[DeepCore]

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:

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]

[htrecksler]

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

[ruhr70]

Stell mal bitte den Export vom Widget ein.

[DeepCore]

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"
  }
]

[DeepCore]

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
```