Scrollen - Wipen - Touchen

[Andreas1986]

Hab das genau so gemacht. Der slider und der Knob funktionieren. Der switch grundsätzlich auch. Die Funktion ist das. Leider auch wie du beschrieben hast ist er beim schalten nicht mehr sichtbar.

Hast du in der zwischenzeit eine Lösung gefunden? Bin in Sachen Js und css nicht so fit.

Mfg Andy

[windy75]

Hi Andy, hier nochmal der Code - funktioniert bei mir mit Firefox und Safari wie er soll - bei Chrome "zerstückelt" wie gesagt die Grafik - der Switch funktioniert aber trotzdem, er verschwindet nicht.

hs.functions.element_loader([
    "own/toggles.min.js",
    "own/toggles.css",
    "own/toggles-styles.css"
    ]
    );

"use strict";
/*
    * XXMYMSWITCH - simontabor.com/toggles/
*/

xxAPI.functions.XXMYSWITCH = function ( oarg ) {
    debug(2,"XXMYSWITCH",oarg);
    if (oarg.item.action_id != 9) {
        debug(1,"XXMYSWITCH needs Action 'Werteingabe'",oarg);
        return;
    }
    oarg.item.text = "";    
    oarg.item.value = parseInt(oarg.args[1] || 0);
    if (oarg.item.xxapi.hasOwnProperty("myswitch")) {
        debug(3, "myswitch has own Property", oarg);
        oarg.item.xxapi.myswitch.toggles({
            "text":   { on: "I", off: "O" },
            "on":     oarg.item.value
        });
    } else {
        oarg.item.click = false;
        oarg.item.customcss = {
            "background-color"  : "transparent",
            "pointer-events"    : "auto",
            "overflow"          : "initial"
        }
    }

    if($.isEmptyObject(oarg.item.info)) {
        debug(4,"XXMYSWITCH no item info " + oarg.item.uid,oarg);
        oarg.item.item_callback = function() {
            oarg.iscallback = true;
            xxAPI.functions.XXMYSWITCH( oarg );
        }
        return;
    }

    if (!oarg.item.xxapi.hasOwnProperty("myswitch")) {
        debug(3, "myswitch has not own Property", oarg);
        oarg.item.xxapi.myswitch_options = {
            "width" : oarg.item.width,
            "height": oarg.item.height,
            "text"  : { on: "I", off: "O" },
            "on"    : oarg.item.value
        };

        var _text2 = oarg.item.info._txt2 || "";
        var _color;
        if (_text2.match(/^XXOPTIONS\*/)) {
            _color = _text2.substring(10);
        };

        switch (_color) {
            case "green": oarg.item.xxapi.myswitch = $("<div />", {
                "class": "toggle toggle-green"
            }); break;
            default: oarg.item.xxapi.myswitch = $("<div />", {
                     "class" : "toggle toggle-orange"
            });
        }

        oarg.item.xxapi.myswitch.toggles(oarg.item.xxapi.myswitch_options);

        oarg.item.xxapi.myswitch.on('toggle',function(e, active) {
            oarg.item.value = oarg.item.info._val = active;
            hs.functions.do_valset( oarg );
        });
    }

    if(oarg.iscallback) {
        oarg.item.object.html(oarg.item.xxapi.myswitch);
    } else {
        oarg.item.html = oarg.item.xxapi.myswitch;
    }
}

Die toggles.css sieht so aus:

.toggle-slide {
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  direction: ltr;
  text-align: center;
}
div.disabled > .toggle-slide {
  opacity: 0.7;
  pointer-events: none;
}
.toggle-slide .toggle-on,
.toggle-slide .toggle-off,
.toggle-slide .toggle-blob {
  float: left;
}
.toggle-slide .toggle-blob {
  position: relative;
  z-index: 99;
  cursor: hand;
  cursor: grab;
}

und die toggles-styles.css so:

.toggle-orange .toggle-slide,
.toggle-green .toggle-slide {
  border-radius: 9999px;
  box-shadow: 0 0 0 1px #999;
}
.toggle-orange .toggle-on,
.toggle-orange .toggle-off,
.toggle-green .toggle-on,
.toggle-green .toggle-off {
  font-size: 24px;
  font-weight: bold;
  font-family: Calibri;
}
.toggle-orange .toggle-on,
.toggle-orange .toggle-select .toggle-inner .active {
  background: #f69300;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
.toggle-green .toggle-on,
.toggle-green .toggle-select .toggle-inner .active {
  background: #a5ca00;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
.toggle-orange .toggle-off,
.toggle-orange .toggle-select .toggle-on,
.toggle-green .toggle-off,
.toggle-green .toggle-select .toggle-on {
  color: #a0a0a0;
  text-shadow: 0 1px rgba(255, 255, 255, 0.2);
  background: #d2d2d2;
}
.toggle-orange .toggle-blob,
.toggle-green .toggle-blob {
  border-radius: 50px;
  background: #f5f5f5;
  box-shadow: 1px 1px 2px #888;
}

Die ist wichtig, weil ich im Code ja auf meine beiden Toggles-Farben grün und orange zurückgreife, die hier definiert werden. Du müsstest ggf. in der toggles-styles deine Farben festlegen.
Ich nutze also "nur" die folgenden beiden Switche: SwitchOK.JPGSwitch grün.JPG
Nur (!) beim Chrome sieht es nach dem Schalten so aus: SwitchNOK2.JPG
Der Schalter funktioniert aber korrekt - sieht nur nicht ganz so prickelnd aus ...

Dann fehlt nur noch die toggles.min.js - müsstest du aber haben.

Dann wünsch' ich mal gutes Gelingen und hoffe, dass das klappt.

Viele Grüße
Tom

[Andreas1986]

Super danke mal,ich Check das morgen mal und gebe wieder bescheid. Danke dir. LG Andy

[Andreas1986]

Hy Tom

Hab alles nochmal getestet. Hab den Code von dir 1 zu 1 Kopiert. alle css und js dateien im Ordner own.
Browser Cache geleert und gestartet. Paar mal Probiert. Das Ergebnis ist besser siehe Bild.
Unbenannt2.png


nach dem schalten:
Unbenannt.png

vor dem schalten
Unbenannt1.png

Ist aber immer noch nicht das gelbe vom EI. Hast du noch eine Idee an der es legen könnte? Die funktion ist tadellos.

Hab für die dynamische Textsteuerung den [Status Schalten vom Aktor]/
und für die Werteingabe den [Schalten vom Aktor]

Hab es jetzt mit chrome und firefox getestet. muss sagen des es bei beiden Browsern keinen Unterschied macht, meine Damit das es im Chrome auch nicht (verhunzt) wird. Kommt mir vor als wird er von einer Einstellung im CSS nach links gezogen....


Hast du da noch ne Idee oder muss ich aufgeben.


LG Andy

[windy75]

Hallo Andy,
schade, dass das so Probleme macht - einen konkreten Ansatz, voran's liegen kann, hab' ich leider auch nicht.
Ich hatte mir seinerzeit (auch schon wieder ein Jahr her) diesen Switch zunächst zum Anschauen, ob er überhaupt passt, in ein kleines HTML-Skript eingebunden und einfach mal rumprobiert. Als der dann funktioniert hat, habe ich mir aus Nils xxAPI² Ansatz die Einbindung von xxSlider und xxKnob angeschaut und dort eigentlich "nur" per Cut & Paste die Funktion (weiß gar nicht mehr, ob Slider oder Knob) gegen diesen Toggle-Switch ausgetauscht - sprich: mir die von Nils entwickelte Schnittstelle zum HS/Experten zu Nutze gemacht ...
Vielleicht gehst Du also nochmal einen Schritt zurück und versuchst, diesen Toggle-Switch in ein kleines Stück HTML-Code einzubinden und zu schauen, wie Deine Browser das dann darstellen bzw. damit umgehen. So würde ich das versuchen - völlig unabhängig von Homeserver und xxAPI² ...
Bleibe gespannt, was du berichten wirst :-)
LG Tom

[Andreas1986]

@windy75

So es gibt jetzt seit eben gerade neue Erkenntnisse warum das mit dem Switch die ganze Zeit nicht funktionieren konnte. Natürlich wieder MEIN Fehler.
Ich hatte bei den ersten Tests mit deinem Switch in der Custom.Css die Komplette Palette eingefügt und anscheinend paar Anderungen bzgl. der Größen gemacht.

Wie ich gerade eben festgestellt habe wird der Switch Perfekt dargestellt, sprich nicht mehr verhunzt. Bin gerade noch am Ausprobieren.


Fotos folgen noch. Versuch mich gerade noch an den CSS Einstellungen :-)


Danke nochmals für deine Hilfe

[windy75]

Hallo Andy, freut mich, dass das jetzt doch noch klappt - gerade rechtzeitig, um die Christbaum-Beleuchtung per Switch zu schalten :-)
Schätze, das geht den meisten hier so - mir zumindest -, daß es ab und an eben doch seine Zeit braucht, Fehler aufzuspüren und zu korrigieren ...
Am Ende wird dann doch alles gut - bin gespannt auf die Fotos!
Grüße
Tom

[Andreas1986]

Ä Nö. Die Christbaum Beleuchtung wird bei uns über eine Steckdosenleiste klassisch über den Orangen Wippschalter geschalten.
Ja ist schon sehr Zeit Aufwändig.
Ja wie gesagt bin noch bisschen am Ausprobieren. Mit CSS hat man ja fast unendliche Möglichkeiten.


Anbei mal die Ersten Entwürfe.

Switch1.pngSwitch2.png

[Ascareth]

Hallo,

krame das Thema noch einmal hervor, da ich meine bisher über dynamische Symbole abgebildeten Toggles nun durch die hier beschriebenen (Slider) Variante ablösen wollte. Das Ergebnis ist bei mir leider ernüchternd...

Toogle.jpg

Ich habe den abgebildeten Code von Tom in die xxApi2.js kopiert, mit dem weiterem Code jeweils eine toggles.css und eine toggles-styles.css erstellt und toogles.min.js von Github heruntergeladen und diese 3 Dateien dann in meinen "js" Unterordner platziert (Verzeichnisse in xxapi2.js wurden entsprechend angepasst).
Dann wurde wie ebenfalls von Tom auf Seite 1 des Threads abgebildet ein entsprechendes dynamisches Textelement angelegt.
Das Ergebnis ist, das mir hier lediglich die beiden Zustände (nicht einmal auf einer Ebene) angezeigt werden, ich mit einem Klick darauf auch mein Testobjekt schalten kann aber der eigentliche Toggle nicht dargestellt wird. Wo ist mein Fehler?

Danke & Grüße
Mario

P.S. Nach einer halben Nachtschicht hatte ich meinen Heureka Moment. Ein simpler Schreibfehler beim Anlegen der toggle.css/toggle-styles.css hat dafür gesorgt, das diese nicht geladen wurden. Nun funktioniert es wie gewünscht...

toggles.jpg