Entwicklung: xxAPI² HTML5 Client

[hartwigm]

Hi Nils,

vielen Dank

der Thread wird nun unlesbar, wenn Du in dem Ding was suchst.

Wäre es nicht möglich in dem Thread nur die Entwicklung zu diskutieren und die einzelnen Funktionen, wenn Du wieder eine einbaust in einem neuen Thread.
Verweis im Entwicklungsthread auf den Thrad z.B xxknob

Dann wäre das schon mal vorsortiert und das ganze wird wieder lesbar.

[NilsS]

Ich hab ja zwischenzeitlich auch schon mal sortiert, aber es wird ja auch alles hier gefragt oO warum soll ich dann neben dem coden/dokumentieren/fragen beantworten/demo projekt schreiben/Besipiele posten auch noch den Thread anschließend rein halten.
btw. ich hab einen Community Dokuthread angelegt, der genau 0 (in Worten NULL) Posts hat, obwohl es ja sicher auch schon die ein oder andere funktionierende xxAPI(1/2) Visu hier gibt.

[NilsS]

@Hans-Peter
Design ist so wie die Werteingabe etc.

Alles andere wird über die theme.css gesteuert, dort könnt ihr eigentlich alles ändern.

[hartwigm]

Ich hab ja zwischenzeitlich auch schon mal sortiert, aber es wird ja auch alles hier gefragt oO warum soll ich dann neben dem coden/dokumentieren/fragen beantworten/demo projekt schreiben/Besipiele posten auch noch den Thread anschließend rein halten.
btw. ich hab einen Community Dokuthread angelegt, der genau 0 (in Worten NULL) Posts hat, obwohl es ja sicher auch schon die ein oder andere funktionierende xxAPI(1/2) Visu hier gibt.

Das war keine Kritik an Dir, sorry sollte das so rüber gekommen sein.
Es war ein Appell an die Community.

Und ja, du hast recht.
Ich über mal eine Kritik uns selbst ohne dabei jetzt ein Fass aufmachen zu wollen.

In dem Dokuthread steht nichts!

Hier werden von "Subgurus" Themen diskutiert, die ich nur schwerlich verstehen kann.

Es wäre schön, wenn von deren Seite ein Beitrag für den Dokuthread entstehen würde.

Wenn nicht, so hoffe ich doch für Dich, dass das mit Spenden ausgeglichen wird.

Jedenfalls mein von meiner Seite aus an Dich hohen Respekt!

Edit: Sollte es darauf Kommentare geben, bitte in einem neuen Thread, sonst bin ich es noch der die Übersichtlichkeit moniert und diese noch befördert!

[NilsS]

Kein Stress Hartwig, passt schon alles ;-)

lasst uns in diesem Thread doch einfach völlig unbefangen entwickeln und schreiben was wir wollen.

Wenn Fragen aufkommen die für die Zukunft relevant sind mach einfach nen neuen Thread auf und frag und wir löschen dann da einfach doofe anworten mit Verweise auf

Benutze Forensuche MIMIMI ... steht doch im Entwicklungsthread auf Seite 199 im klein gedruckten ....

Und wir antworten stattdessen einfach mit korrektem Quote aus dem Thread oder mit einer direkten Antwort.

Es soll hier in dem Thread keiner Angst haben was zu fragen.

[NilsS]

@Hans-Peter
custom.css

/* Größe des Popups änder */
div.popupbox.temperaturepopup {
    width: 350px !important;
    height: 250px !important;
}

/* Text des Wertes oberhalb */
div.popupbox.temperaturepopup > div > div > input {
    z-index: 999;
    font-size: 30px !important;
}

/* Pseudoelement oberhalb */
div.popupbox.temperaturepopup::after {
    content:    "\A"; /* wenn kein Content dann wird es nicht angezeigt */
    pointer-events: none; /* klicks weiterleiten an darunter liegendes */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(temp_scale.png);
}

mit deinem Bild aus dem Anhang.

Da passt jetzt die Größe nicht ganz, vielleicht kannst du das ja anpassen das es mit dem Radius und der Größe des KNOBs übereinstimmt.

Der Auscchnitt für den Wert ist doch nicht mehr nötig, das geht auch mit dem z-index auf dem input

[NilsS]

noch ein bisschen optimiert

/* Größe des Popups änder */
div.popupbox.temperaturepopup {
    width: 350px !important;
    height: 250px !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Text des Wertes oberhalb */
div.popupbox.temperaturepopup > div > div > input {
    z-index: 999;
    font-size: 30px !important;
    margin-top: 56px !important;
}

div.popupbox.temperaturepopup > div.popuptitle {
    position: relative;
    background-color: transparent;
    border-color:transparent !important;
    z-index: 999;
}

/* Pseudoelement oberhalb */
div.popupbox.temperaturepopup::after {
    content:    "\A"; /* wenn kein Content dann wird es nicht angezeigt */
    pointer-events: none; /* klicks weiterleiten an darunter liegendes */
    position: absolute;
    top: 0;
    left: 0;
    width: 346px;
    height: 230px;
    background-image: url(temp_scale.png);
    background-position: center;
    border-radius: 15px;
    border: 2px solid rgb(233,233,233);
}

sowie
custom.js

xxAPI.xxtemplates.MYTEMP = function ( obj ) {
    obj.options.xxknob = $.extend({
        "width"         : 180,
        "height"        : 180,
        "angleArc"      : 240,
        "angleOffset"   : -120,
    },obj.options.xxknob);
    xxAPI.xxtemplates.TEMP ( obj );
}

und verwendung des Templates (in diesem Fall) xxtemplate=MYTEMP;

[NilsS]

habs nochmal angepasst, es passt schon fast.
Das Bild muss en bisschen breiter

[NilsS]

Ich habs mal in der Demo Visu eingebaut.
Popups: unterste Zeile "Temperatur Werteingabe"

[NilsS]

Oh und die Grafik (Schrift etc) hab ich glaube ich versaut, da ich den Rand mit Schatten abschneiden musste und das innere gefüllt hab.

Vielleicht kann Hans-Peter die ja nochmal in schön bereitstellen.

[NilsS]

So nun nochmal in komplett.

Die XXOPTIONS dafür sind

XXOPTIONS*top:MOUSE+0px;xxtemplate=MYTEMP;temp.low=10;temp.high=30

[NilsS]

oh und wenn du dein Box-Shadow vermisst.

Dann füge in der custom.css bei dem ::after Element

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

hinzu

[HAPE]

Hi Nils,

das Popup kommt versetzt zum Vorschein. Der Knob ist am linken Rand und lässt sich nicht zentrieren (Bild_1).

Folgendes hätte ich gerne ausprobiert:

Zur freien Gestaltung ist ein herkömmliches Popup variabler. Könntest Du den Knob nach den Abmessungen von Bild 2 zur Verfügung stellen?
Außen-Ø 140p, Breite 8p, Winkel wie gehabt und die Ziffernanzeige. Da es sich um eine Temperaturdarstellung handelt, wäre der Farbverlauf von links blau=kalt nach rechts rot=warm. Dass man den Farbverlauf darstellen kann finde ich super. Das kann dann auf der Grafik draufliegen wie beim Slider.

Danke und Gruß
Hans-Peter

[NilsS]

Moin

fast alle Optionen sind über die XXOPTIONS ausgeführt, ihr könnt dort alle Werte direkt ändern. Wenn das nicht ausreichend ist könnt ihr wie im Beispiel oben eigene Funktionen erstellen die die zugrundlegende Funktion dann aufruft.

Das oben ist nur ein POC und kein beginn von diversen von mir erstellten Designstemplates.

[NilsS]

Oh ich seh gerade das verschobene ist im Firefox
langsam mag ich den nicht mehr.

Ich guck mal ob ich das fixen kann.