[gelöst]Slider mit Graphischer Darstelleung

Begonnen von Torsten_MG, 17 Juni 2018, 12:09:21

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Torsten_MG

17 Juni 2018, 12:09:21 Letzte Bearbeitung: 23 Juni 2018, 18:25:02 von Torsten_MG
Hallo Leute,

bin heute wieder  was am spielen und wollte das Beispiel in der FTUI Widget Slider im Wiki mit den Bildchen ausprobieren. Aber anscheinend scheitere ich wieder an meinem halbwissen.

Ich habe folgendes gemacht:

1. ich habe die Datei fhem-tablet-ui kopiert und in fhem-tablet-ui-user umbenannt.

2. Dann habe ich in der neuen Datei unten folgendes angehangen:

Code Auswählen
/* 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(../windowContentSimple.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(../awningContentSimple.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;
}

3. In meiner Index.html habe ich die Zeile <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" /> in <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> geändert.

4. Danach habe ich die 3 Bilder blinds.jpg, windowContentSimple.png und awningContentSimple.png in den Ordner tablet (der übergeordnete Ordner vom css-Ordner) kopiert wo auch meine ganzen *.html-Dateien für den FTUI sind.

Nachdem ich nun die Oberfläche mehrmals neu gestartet habe werden mir die Bilder aber nicht angezeigt, nur der normale Slider

EDIT:

in meiner html-Datei wo der Slider dargestellt werden soll, habe ich natürlich noch folgendes eingetragen
Code Auswählen
<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>

Torsten_MG

#1
17 Juni 2018, 13:35:56
Habe gerade festgestellt, dass meine Einträge in den html-Dateien für den ftui nicht ganz korrekt waren, hat aber bisher bei mir alles wie gewünscht funktioniert.

im header stand bei mir bisher:
Code Auswählen
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

habe gerade festgestellt, dass die Pfadangaben so nicht ganz richtig sind.

sollte eigentlich so heissen:
Code Auswählen
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />

doch auch so passiert nichts.

Nachdem ich noch
Code Auswählen
/opt vorgestellt habe, war der Aufbau komplett verschoben. Anscheinend habe ich da nicht mal halbwissen.

Hier mal eine Beispiel html von mir, vielleicht kann mir jemand erklären, was ich falsch mache:

Setup.html
Code Auswählen
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- <meta name="widget_base_width" content="127">
<meta name="widget_base_height" content="108"> -->
<meta name="widget_base_width" content="160">
<meta name="widget_base_height" content="125">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->

<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />


<script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/www/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl --><!-- -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_homebutton.html"></li>

<!-- ========= Linkes-Hauptmenü =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_left_main.html"></li>

<!-- ====== Fhem Reset ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1" data-template="Fhemreset.html"></li>

<!-- ====== Anwesenheit ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="3" data-sizex="2" data-sizey="1" data-template="Anwesenheit.html"></li>

<!-- ====== Fritzbox ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="5" data-sizex="2" data-sizey="1" data-template="Fritzbox.html"></li>

<!-- ====== Flur ======= -->
<!-- ====================================== -->
<li data-row="2" data-col="2" data-sizex="3" data-sizey="2" data-template="Flur.html"></li>



</ul>
</div>
</body>
</html>


und hier noch vom Flur, wo ich Testweise das mit dem Slider eingebaut habe:

Flur.html
Code Auswählen
<header><div data-type="label" class="large">Flur</div></header>
<table border="0px" width="100%">
<tr>
<td class="A1">
<div data-type="symbol"
data-device="Flur_Lampe"
data-icon="fa-lightbulb-o"
data-get-on='["on","50","off"]'
data-colors='["yellow","orange","gray"]'
class="large">
</div>
<div class="cell narrow small dark">Flur_Licht</div>
</td>
<td class="A2">
<div data-type="label">Zeit Licht<br>an</div>
<div data-type="select"
data-device="Flur_Lampe_Dummy"
data-list=""
data-items='["16:00","17:00","18:00","19:00","20:00","21:00","22:00"]'
data-cmd="setreading"
data-get="Licht_an"
data-set="Licht_an">
</div>
</td>
<td class="A3">
<div data-type="label">Zeit Licht<br>aus</div>
<div data-type="select"
data-device="Flur_Lampe_Dummy"
data-list=""
data-items='["05:00","06:00","07:00","08:00","09:00","10:00"]'
data-cmd="setreading"
data-get="Licht_aus"
data-set="Licht_aus">
</div>
</td>
<td class="A4">
<div data-type="symbol"
data-device="Flur_Taster1"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_Taster1</div>
</td>
<td class="A5">
<div data-type="symbol"
data-device="Flur_Taster2"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_Taster2</div>
</td>
</tr>
<tr>
<td class="B1">
<div data-type="symbol"
data-device="Flur_4_fach_Taster"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_4_fach_Taster</div>
</td>
<td class="B2">
<div data-type="slider"
    data-handle-diameter="15"
    data-color="#969696"
    data-height="125"
    data-device="dg_SZ_Rolladen"
    class="blind blindview">
</div>

</td>
</tr>
</table>
<table border="0px" width="100%">
<tr>

</tr>
</table>

eki

#2
18 Juni 2018, 14:53:47
Welche FTUI Version verwendest Du? Falls es die neuste 2.7 ist, da hat setstate an den Slidern etwas geändert. In diesem Fall muss man die '>' aus der css definition entfernen und Farben setzen.

Code Auswählen

.vertical.range-container {
width: 100%;
}

.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;
background-color: rgb(150,150,150) !important;
}

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

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

.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;
background-color: rgb(64,64,64) !important;
}

.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;
background-color: rgb(64,64,64) !important;
}

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

Torsten_MG

#3
20 Juni 2018, 08:18:46
wo kann ich sehen, welche Version ich habe?

Ich habe die css jetzt so abgeändert
Code Auswählen
/* 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;
background-color: rgb(150,150,150) !important;
}

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

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

.blindview .vertical .range-quantity {
border-radius: 2px;
background-image: url(../windowContentSimple.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-blend-mode: difference;
background-color: rgb(64,64,64) !important;
}

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

.awning .vertical .range-quantity {
border-radius: 3px;
background-color: rgb (64,64,64) !important;
}

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

aber es wird mir noch nicht richtig angezeigt. Siehe Bild

eki

#4
20 Juni 2018, 11:26:55
Komisch, wenn ich Deine HTML files bei mir anlege sieht das Ergebnis OK aus (siehe Anhang).

Was passiert denn, wenn Du im Browser im Adressfeld folgende URL eingibst (<host> musst Du natürlich noch and Deine Server IP anpassen).

http://<host>:8083/fhem/www/tablet_eval/windowContentSimpleGrey.png

Torsten_MG

#5
20 Juni 2018, 12:11:28
Ich habe folgendes eingegeben:
http://<host>:8083/fhem/www/tablet/windowContentSimpleGrey.png

Dann wurde mir das Bild angezeigt

Gesendet von meinem SM-J730F mit Tapatalk

eki

#6
20 Juni 2018, 12:55:11
Wenn das geht, dann kann es nicht am Pfad zu den Bilddateien liegen. Hast Du mal den Browser Cache gelöscht (Strg + Shift + Entfernen)?

Torsten_MG

#7
20 Juni 2018, 13:07:28
Bin jetzt auf der Arbeit. Schaue ich mir morgen früh nochmal an.

Gesendet von meinem SM-J730F mit Tapatalk

Torsten_MG

#8
21 Juni 2018, 10:50:18
Bekomme das irgendwie nicht hin.

Poste mal die html-Daten, vielleicht sieht ja einer was ich falsch mache.

Setup.html
Code Auswählen
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- <meta name="widget_base_width" content="127">
<meta name="widget_base_height" content="108"> -->
<meta name="widget_base_width" content="160">
<meta name="widget_base_height" content="125">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->

<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />


<script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/www/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl --><!-- -->
<script type="text/javascript" src="/fhem/www/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/www/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_homebutton.html"></li>

<!-- ========= Linkes-Hauptmenü =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_left_main.html"></li>

<!-- ====== Fhem Reset ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1" data-template="Fhemreset.html"></li>

<!-- ====== Anwesenheit ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="3" data-sizex="2" data-sizey="1" data-template="Anwesenheit.html"></li>

<!-- ====== Fritzbox ======= -->
<!-- ====================================== -->
<li data-row="1" data-col="5" data-sizex="2" data-sizey="1" data-template="Fritzbox.html"></li>

<!-- ====== Flur ======= -->
<!-- ====================================== -->
<li data-row="2" data-col="2" data-sizex="3" data-sizey="2" data-template="Flur.html"></li>



</ul>
</div>
</body>
</html>


Flur.html
Code Auswählen
<header><div data-type="label" class="large">Flur</div>
<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />

</header>
<table border="0px" width="100%">
<tr>
<td class="A1">
<div data-type="symbol"
data-device="Flur_Lampe"
data-icon="fa-lightbulb-o"
data-get-on='["on","50","off"]'
data-colors='["yellow","orange","gray"]'
class="large">
</div>
<div class="cell narrow small dark">Flur_Licht</div>
</td>
<td class="A2">
<div data-type="label">Zeit Licht<br>an</div>
<div data-type="select"
data-device="Flur_Lampe_Dummy"
data-list=""
data-items='["16:00","17:00","18:00","19:00","20:00","21:00","22:00"]'
data-cmd="setreading"
data-get="Licht_an"
data-set="Licht_an">
</div>
</td>
<td class="A3">
<div data-type="label">Zeit Licht<br>aus</div>
<div data-type="select"
data-device="Flur_Lampe_Dummy"
data-list=""
data-items='["05:00","06:00","07:00","08:00","09:00","10:00"]'
data-cmd="setreading"
data-get="Licht_aus"
data-set="Licht_aus">
</div>
</td>
<td class="A4">
<div data-type="symbol"
data-device="Flur_Taster1"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_Taster1</div>
</td>
<td class="A5">
<div data-type="symbol"
data-device="Flur_Taster2"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_Taster2</div>
</td>
</tr>
<tr>
<td class="B1">
<div data-type="symbol"
data-device="Flur_4_fach_Taster"
data-get="battery"
data-get-on='["ok","critical","low"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
data-icons='["oa-measure_battery_100","fa-exclamation-circle","oa-measure_battery_25 fa-blink"]'
class="readonly">
</div>
<div class="cell narrow small dark">Flur_4_fach_Taster</div>
</td>
<td class="B2">
<div data-type="slider"
    data-handle-diameter="15"
    data-color="#969696"
    data-height="125"
    data-device="dg_SZ_Rolladen"
    class="blind blindview">
</div>

</td>
</tr>
</table>
<table border="0px" width="100%">
<tr>

</tr>
</table>
Die Bilder sind im Verzeichnis /opt/fhem/www/tablet
Die fhem-tablet-ui-user.css ist im Verzeichnis /opt/fhem/www/tablet/css

Torsten_MG

#9
23 Juni 2018, 18:24:06
Fehler gefunden  ::)

Folgende Zeilen haben gefehlt:

Code Auswählen
.vertical.range-container {
width: 100%;
}
Drucken
Nach oben Seiten1
Benutzer-Aktionen