Wie visualisiert Ihr Eure Jalousien?

[bmwfan]

Hallo,
ich tüftele schon einige Zeit an der Visualisierung der Jalousien herum, habe aber keine richtig schöne Lösung gefunden.
In FHEM habe ich eine kleine Funktion geschrieben, der ich die Parameter Level und Winkel übergebe und dann über ein DOIF die Jalousie auf Position und danach auf den Öffnungswinkel stellen lasse. Das Stellen des Öffnungswinkels ist letztendlich nichts anderes, als nach Erreichen des gewünschten Levels ein neues Level vorzugeben, bei dessen Anfahren sich die Lamellen ausrichten. Sehr einfach gestrickt, aber funktioniert soweit.

Aber in TabletUI tue ich mich mit der Visualisierung und auch Ansteuerung schwer. Aktuell habe ich einen Slider definiert, der mir zwar den Level ansteuert, aber ich habe keine gute Idee, wie ich den Winkel einstellen kann. Zusätzlich finde ich die Darstellung nicht sehr elegant.

Code Auswählen Erweitern

<li class="halbTransparent" data-row="2" data-col="8" data-sizex="1" data-sizey="2">
<header class="headerTransparent">WZ Eck West</header>
<div class="top-space">
<div data-type="slider"
data-device="Jal_WZ_Fest_West_03"
data-get="level"
data-set="level"
data-min="0"
data-max="100"
data-step="10"
data-color="#404040"
data-background-color="#aa6900"
class="cell value">
</div>
</div>
</li>

Wie habt Ihr das realisiert?

Gruß Jürgen

[eki]

Zur Darstellung habe ich ein bisschen mit css und dem Slider Widget rumgespielt. Vielleicht kann das ja der ein oder andere gebrauchen. Die Bildchen zeigen, wie es bei mir aussieht.

Folgende Anpasssungen sind zu machen:

im file fhem-tablet-ui-user.css (falls das noch nicht verwendet wird, muss es natürlich noch in das html file, das aufgerufen wird eingetragen werden) folgende Zeilen einfügen:

Code Auswählen Erweitern


/* Definition for styles to be used for extension of slider widget for display of blinds, awnings etc. */
/* normal lines */

.blind> .vertical .range-bar {
    width: 70%;
border-radius: 2px;
background-image: url(../blinds.jpg);
background-position: center bottom;
background-blend-mode: multiply;
background-size: cover;
}

.blind> .vertical .range-quantity {
border-radius: 3px;
}

.blind> .vertical .range-handle {
margin-left: 52% !important;
}

.blindview> .vertical .range-quantity {
border-radius: 2px;
background-image: url(../windowContentSimpleGrey.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-blend-mode: difference;
}

.awning> .vertical .range-bar {
    width: 70%;
border-radius: 2px;
background-image: url(../awningContentSimpleGrey.png);
background-position: center bottom;
background-blend-mode: difference;
background-size: 100% 100%;
}

.awning> .vertical .range-quantity {
border-radius: 3px;
}

.awning> .vertical .range-handle {
margin-left: 52% !important;
}



Die im angehängten zip file enthaltenen Grafiken müssen in das Verzeichnis oberhalb des css directories kopiert werden (zumindest die, die im css File auch referenziert werden. Es gibt eine Graustufenvariante und eine farbige, entsprechend müssen die Filenamen im css file ausgetauscht werden also jeweils das "Grey" im Filenamen weglassen wenn man bunte Fenster will. Wer will, kann sich natürlich auch eigene Fenster und Rolladenbildchen basteln, ein Beispiel für den "Fensterausblick" ist auch noch enthalten).

im "class" parameter des Sliders müssen folgende Klassen hinzugefügt werden:
blind (dadurch wird die Darstellung eines verschiebbaren Rollladens bewirkt)
awning (dadurch wird die Darstellung einer Markise bewirkt)
blindview (dadurch wird im Hintergrund ein Fenster symbolisiert)

Ein Beispiel für die Definition eines Sliders mit Rolladendarstellung und Fenster als Hintergrundbild wäre:

Code Auswählen Erweitern


<div data-type="slider"
    data-handle-diameter="15"
    data-device=""
    data-color="#969696"
    data-height="125"
    data-device="dg_SZ_Rolladen"
    class="blind blindview"></div>


Wird in der Klasse "awning" statt "blind" gesetzt, so wird eine Markisendarstellung erzeugt.

[NewMatic]

Hi Eki,

finde deine Lösung echt gelungen!
Habe nun  als FHEM-Neuling versucht, deine Lösung bei mir zu implementieren, jedoch scheitere ich daran. Vielleicht kannst du mir ja helfen?
Was habe ich gemacht:
-Ein neues fhem-tablet-ui-user.css im Ordner /fhem/tablet/css angelegt mit deinem Code angelegt.

Die im angehängten zip file enthaltenen Grafiken müssen in das Verzeichnis oberhalb des css directories kopiert werden (zumindest die, die im css File auch referenziert werden.

Das ist dann /opt/fhem/www/tablet ? Dort habe ich es zumindest abgelegt.

-In meinem index html habe ich das hier einkommentiert (also kommentare gelöscht):

Code Auswählen Erweitern

   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

-und hier mal den slider eingefügt:

Code Auswählen Erweitern


            <li data-row="4" data-col="2" data-sizey="2" data-sizex="2">
                <header>HOMESTATUS</header>
                <div class="sheet">
                    <div class="row">
                   <!--     <div data-type="homestatus" data-device='HomeStatus' data-version='' class="cell"></div>-->
    <div data-type="slider"
    data-handle-diameter="15"
    data-device=""
    data-color="#969696"
    data-height="125"
    data-device="dg_SZ_Rolladen"
    "class="blind blindview"></div>
                    </div>
                </div>
            </li>

Angezeigt wird es wie im Screenshot im Anhang.
Hab ich mit den bildern etwas falsch gemacht? bzw. mit dem Ordner?

Danke für jegliche Hilfe,
LG Tobi

[eki]

Das müsste prinzipiell so passen. Hast Du, bevor Du nach der Änderung die Seite neu geladen hast, den Browser Cache gelöscht (STRG+SHIF+ENTF gleichzeitig drücken oder aus dem Browser Optionen Menu auwählen)? So wie das aussieht nimmt er Deine Änderungen gar nicht (z.B. wird ja auch die Breite des Slider Handles nicht verändert).

[NewMatic]

Hi Eki,

ja Browser Cache habe ich auch schon gelöscht, hat aber leider nichts geholfen....
Ich denke dass er die custom css gar nicht anspricht...
Muss ich im kopf der index.html irgendetwas anderes auskommentieren oder hinzufügen?

das ist derzeit aktiv:

Code Auswählen Erweitern

    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>


Danke,
Tobi

[eki]

Kannst Du mal deine ganze HTML Datei posten? Bei den Ausschnitten ist es schwer den Fehler einzugrenzen (sieht bisher OK für ich aus). Welche Version von FTUI verwendest Du?

[NewMatic]

Klar...
hier meine index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
   <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>

<body>

    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
                <header>TREND</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
                            <div data-type="label" class="small narrow darker">Status</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="1" data-sizex="1" data-sizey="4">
                <header>GARTEN</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="switch" data-device="sz_Rollo1" class=""></div>
                            <div data-type="label" class="">SZ-Rollo1</div>
                            <div data-type="symbol" data-device="Eingangstuer" class="big"></div>
                            <div data-type="label" class="">Tür</div>
                            <div data-type="label" data-device="OutTemp" data-part="2" data-fix="1" data-limits='[-73,10,23]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="bigger thin top-space-2x"></div>
                            <div data-type="label" class="">Temperatur</div>
                            <div data-type="label" class=" darker top-space">Heute</div>
                            <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class=" big"></div>
                            <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="narrow"></div>
                            <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
                            <div data-type="label" class="darker top-space">Morgen</div>
                            <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
                            <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class="narrow"></div>
                            <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizey="1" data-sizex="2">
                <header>BAD</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="BadHeizung_Clima" data-valve="ValvePosition"></div>
                        <div class="cell">
                            <div class="big" data-type="symbol" data-device="BadFenster"></div>
                            <div data-type="label" class="top-narrow  darker small">Fenster</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="3" data-sizey="1" data-sizex="2">
                <header>SCHLAFZIMMER</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="SchlafzimmerHeizung_Clima" data-valve="ValvePosition"></div>
                        <div class="cell">
                            <div class="big" data-type="symbol" data-device="SchlafzimmerFenster"></div>
                            <div data-type="label" class="top-narrow darker small">Fenster</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="4" data-sizey="1" data-sizex="2">
                <header>KINDERZIMMER</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="KinderzimmerHeizung_Clima" data-valve="ValvePosition"></div>
                        <div class="cell">
                            <div class="big" data-type="symbol" data-device="KinderzimmerFenster"></div>
                            <div class="top-narrow  darker small">Fenster</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="8" data-sizey="1" data-sizex="1">
                <header>GALERIE</header>
                <div data-type="switch" data-device="GalerieLicht" class="cell"></div>
                <div data-type="label" class="cell">Licht</div>
            </li>
            <li data-row="2" data-col="2" data-sizey="3" data-sizex="2">
<header>Schlafzimmer</header>
<div class="left cell">
  <div data-type="label" class="">&nbsp;</div>
<div data-type="slider" data-device='sz_Rollo1' data-get="STATE" data-min="0"  data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true  class="negated" >  </div>
<div class="triplebox-v small top-space-2x">
  <div data-type="push" data-device="sz_Rollo1" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
  <div data-type="push" data-device="sz_Rollo1" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
  <div data-type="push" data-device="sz_Rollo1" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
</div>

</div>
</li>
            <li data-row="4" data-col="2" data-sizey="2" data-sizex="2">
                <header>HOMESTATUS</header>
                <div class="sheet">
                    <div class="row">
                   <!--     <div data-type="homestatus" data-device='HomeStatus' data-version='' class="cell"></div>-->
<div data-type="slider"
data-handle-diameter="15"
data-device=""
data-color="#969696"
data-height="250"
data-width="250"
data-device="dg_SZ_Rolladen"
"class="blind blindview">
</div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="4" data-sizey="2" data-sizex="4">
                <header>WOHNZIMMER</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="WohnzimmerHeizung_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp"></div>
                        <div class="cell">
                            <div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
                            <div>Temperatur</div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
                            <div>Luftfeuchte</div>
                        </div>
                        <div class="cell">
                            <div data-type="switch" data-device="PowerAV_Sw" class=""></div>
                            <div>SchrankLicht</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell" data-type="thermostat" data-device="WohnzimmerHeizung2_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp"></div>
                        <div class="cell" data-type="popup" data-width="450px">
                            <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:temperature" data-minvalue="15" data-maxvalue="25" data-height="60" data-width="90" class="noticks">
                            </div>
                            <div class="dialog">
                                <header>TEMPERATURE</header>
                                <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:temperature" data-minvalue="15" data-maxvalue="25" data-yticks="2" data-height="250">
                                </div>
                            </div>
                        </div>
                        <div class="cell" data-type="popup" data-width="450px">
                            <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:humidity" data-minvalue="0" data-maxvalue="100" data-height="60" data-width="90" class="noticks">
                            </div>
                            <div class="dialog">
                                <header>HUMIDITY</header>
                                <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:humidity" data-minvalue="0" data-maxvalue="100" data-yticks="20" data-height="250">
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="dimmer" data-device="HUEDevice1" data-get-on="!off" data-get-off="off" data-set="pct"></div>
                            <div>Philips</div>
                        </div>

                    </div>
                </div>
            </li>
            <li data-row="4" data-col="4" data-sizey="2" data-sizex="4">
                <header>MULTIMEDIA</header>
                <div class="sheet">
                    <div class="row-60">
                        <div class="cell">
                            <!--left up -->
                            <div class="sheet">
                                <div class="row">

                                    <div class="cell-25">Badradio</div>
                                    <div class="cell-25x" data-type="switch" data-device="BadRadio" data-icon="fa-music"></div>
                                    <div class="cell-50" data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input"></div>
                                </div>
                                <div class="row">
                                    <div class="cell-25">Radio</div>
                                    <div class="cell-25" data-type="switch" data-device="RadioAtTablet" data-icon="fa-music"></div>
                                    <div class="cell-50" data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input"></div>
                                </div>
                            </div>
                            <!-- end left cell -->
                        </div>
                        <div class="cell">
                            <div class="large top-space" data-type="volume" data-device='AvReceiver' data-get='volume' data-set='volume'></div>
                        </div>
                    </div>
                    <div class="row-40">
                        <div class="cell">
                            <!--left down -->
                            <div class="sheet">
                                <div class="row">
                                    <div class="cell" data-type="push" data-device="WebRadio" data-icon="fa-step-backward" data-set-on="Prev"></div>
                                    <div class="cell" data-type="label" data-device="WebRadio">radio</div>
                                    <div class="cell" data-type="push" data-device="WebRadio" data-icon="fa-step-forward" data-set-on="Next"></div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <!--right down -->
                            <div class="sheet">
                                <div class="row">
                                    <div class="cell">
                                        <div data-type="switch" data-device="Fernsehen" data-icon="fa-film"></div>
                                        <div>TV</div>
                                    </div>
                                    <div class="cell">
                                        <div data-type="circlemenu">
                                            <ul>
                                                <li>
                                                    <div data-type="push" data-icon="fa-wrench"></div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">-6</div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">-2</div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level 0" data-icon="">0</div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +3" data-icon="">2</div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +9" data-icon="">9</div>
                                                </li>
                                                <li>
                                                    <div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +C" data-icon="">12</div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>Woofer</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="8" data-sizey="4" data-sizex="1">
                <header>LIGHTS</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="slider" data-device='Testschalter' data-min="10" data-max="90"></div>
                            <div>Light1</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">
                            <div data-type="volume" data-device="HUEDevice1" data-min="0" data-max="65353" data-get="hue" data-set="hue" class="hue-tick mini"></div>
                            <div>Color</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">
                            <div data-type="dimmer" data-device="HUEDevice1" data-get-on="!off" data-get-off="off" data-set="pct" class=""></div>
                            <div>Hell</div>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
    </div>
</body>

</html>


der großteil ist noch standard von der demo index.html.
Im Header "HOMESTATUS" habe ich deinen slider mit blind blindview für Jalousien eingebaut.

Danke für deine Bemühungen!

LG Tobi

[eki]

vor dem 'class' ist ein '"' zu viel, außerdem solltest Du die data-width nicht im Slider setzen, sondern im parent Element. Also z.B. so:

Code Auswählen Erweitern


                <div class="sheet">
                    <div class="row">
<div class="col-25">
                   <!--     <div data-type="homestatus" data-device='HomeStatus' data-version='' class="cell"></div>-->
<div data-type="slider"
data-handle-diameter="15"
data-device=""
data-color="#969696"
data-device="dg_SZ_Rolladen"
class="blind blindview">
</div>
</div>
                    </div>
                </div>


[NewMatic]

hab das apostroph vor dem class weg gemacht (danke für den tip, vielleicht korrigierst du es auch in deiner ersten Anwort selber, für zukünftige? )
Leider funktioniert es trotzdem nicht (auch wenn ich data-with +height wegmache).

Hier noch mal der derzeitige Auszug:

Code Auswählen Erweitern

            <li data-row="4" data-col="2" data-sizey="2" data-sizex="2">
                <header>HOMESTATUS</header>
                 <div class="sheet">
                    <div class="row">
<div class="col-25">
                   <!--     <div data-type="homestatus" data-device='HomeStatus' data-version='' class="cell"></div>-->
<div data-type="slider"
data-handle-diameter="15"
data-device=""
data-color="#969696"
data-device="dg_SZ_Rolladen"
class="blind blindview">
</div>
</div>
                    </div>
</div>
            </li>

Es ist nur der Punkt (Schieber) aus der Mitte verschoben, der Rest schaut nach dem normalen slider aus.
Wie kann ich überprüfen ob er das fhem-tablet-ui-user.css überhaupt aufrufen kann, bzw. die Bilder nicht laden kann?
wie darf ich das hier verstehen?

Code Auswählen Erweitern

class="blind blindview"

Im  fhem-tablet-ui-user.css  gibt es ja jeweils  ein .blind> und .>blindview etc. Was ruft er dann mit

Code Auswählen Erweitern

class="blind blindview" genau auf?

Sorry für die Anfängerfragen :/

Danke,
Tobi

[eki]

Guter Hinweis, habe das '"' entfernt

Normalerweise kann man so etwas am besten mit der Browser Konsole feststellen (alles Folgende betrifft Firefox, sieht aber so ähnlich auch bei Chrome etc. aus). Wenn Du mit der Maus über den Slider gehst und die rechte Maustaste drückst, dann erscheint ein Kontextmenu. In diesem Menu sollte es den Punkt "Inspect Element" oder "Element untersuchen" oder so etwas ähnliches geben (ist von Browser zu Browser etwas unterschiedlich benannt). Wenn Du diesen Eintrag auswählst öffnet sich ein Fenster im Browser, mit dem Du debuggen kannst. Normalerweise ist da rechts dann ein Teilfenster, welches anzeigt welche Einstellungen für das ausgewählte Objekt gerade aktiviert sind. Dort solltest Du die Einträge aus der fhem-tablet-ui-user.css sehen. Wenn Du links oben auf den Reiter "Inspector" gehst, siehst Du den HTML Code so wie er aktuell geladen und zusammen gebaut ist. Im Header sollte hier die css Datei zu sehen sein. Ob die richtig geladen wurde kannst Du im Reiter "Network" sehen, dort wird jeder HTTP Transfer im Detail angezeigt.

Das mit den Klassen ist ein Grundkonzept in HTML. Das Aussehen wird unabhängig vom Inhalt per sogenannten Cascaded Style Sheets (css) definiert. Das Ganze geht hierarchisch mit Klassen (Details würden aber glaube ich zu weit führen, das ist alles prima im Internet nachlesbar). In unserem Beispiel hat das <div> Objekt die Klassen bind und blindview (und deren Aussehen ist im css File festgelegt). Diese Klassen vererbt es an seine "Kinder" also alles was innerhalb des <div> liegt. Durch diesen Trick kann man von außen auf das Aussehen des Sliders einwirken, wenn man weiß, wie der Slider aufgebaut ist. Die Syntax .blind> .vertical .range-quantity ist ein sogenanter Selektor, mit dem die Objekte ausgewählt werden. In diesem Fall bedeutet das, dass alle direkten Kinder (wegen dem '>') von einem Objekt mit der Klasse .blind, welche die Klasse vertical und range-quantity haben, die entsprechenden Eigenschaften (also z.B. das Hintergrundbild) bekommen. Die Klasse range-quantity setzt das slider widget bei Objekten, die es per javascript innerhalb des <div> baut, in diesem Fall bei dem Balken des ursprünglichen Schiebers, den ich dadurch entsprechend "pimpe".

[NewMatic]

Wow danke für die Erklärung.
habe es nun versucht zu debuggen, bin mir aber nicht sicher ob das so stimmt.
hab mal zwei screenshots angehängt.

Fhem1.png zeigt die geladene custom css im Network Bereich... diese sieht denke ich gut aus?

Fhem2 png zeigt den Slider... kann hier aber nicht wirklich Bereiche aus der custom css sehen?


Danke,
Tobi

[eki]

...
Fhem1.png zeigt die geladene custom css im Network Bereich... diese sieht denke ich gut aus?
...

Das ist ja schon mal ein erster Schritt.

...
Fhem2 png zeigt den Slider... kann hier aber nicht wirklich Bereiche aus der custom css sehen?
...

Das ist logisch, weil der Selektor erst im ersten Kind welches zusätzlich die Klassen vertical und range-bar hat zuschlägt (also 3 Ebenen drunter, und da soll er das auch erst, weil erst da die Eigenschaften Sinn machen).

[NewMatic]

hier bei background-color, sollte auch background-image aus der custom css stehen? Stimmt das so?

[eki]

Nein, das geht über die Klassen (das mit der Farbe hat der Entwickler vom widget_slider so gemacht, ist aber nicht Standard).

Wenn Du das Objekt <span...class="range-bar"... auswählst, dann sollte rechts im Browser Debug Fenster zu sehen sein, dass die über den Selektor aus der fhem-table-ui-user.css ausgewählten Eigenschaften gesetzt sind. In etwa so wie im angehängten ersten Bild.
Wenn Du das Objekt <span...class="range-quantity"... auswählst sollten ebenfalls die entsprechenden Eigenschaften gesetzt sein. In etwa so wie im zweiten angehängten Bild.

Wenn Du rechts mit der Maus über den url... Eintrag mit dem Bild gehst sollte das Bild erscheinen (ansonsten ist es nicht an der richtigen Stelle abgelegt).

[NewMatic]

Hi eki,

danke nochmal für deine unermüdliche Hilfe!
ich kann bei mir weder bei range-bar noch bei range-quantity irgendwas von der fhem-tablet-ui-user.css erkennen (siehe screenshots).
Das heißt er kann die custom css laden (sehe ich ja unter networks) aber verwendet sie nicht in der index.html?
Der head stimmt so oder (head.jpg), oder fehlt da noch was?

Danke,
Tobi