Hauptmenü

Darstellung Slider

Begonnen von ahstax, 16 Dezember 2018, 20:51:24

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

ahstax

16 Dezember 2018, 20:51:24
Hallo,

ich habe verschiedene Ansätze ausprobiert, um Slider für meine Rolladensteuerung zu verwenden.

Gerne hätte ich das wie hier https://forum.fhem.de/index.php/topic,34233.msg301873.html#msg301873 beschrieben gelöst.

Eingefügt habe ich das in diese Vorlage https://forum.fhem.de/index.php/topic,67141.msg585327.html#msg585327

Problem:
Der vertikale Slider wird nicht wie normal angezeigt (https://wiki.fhem.de/wiki/FTUI_Widget_Slider#Vertikaler_Schieberegler). Vielmehr ist es nur ein grauer etwa zwei Zentimeter langer horizontaler Balken ohne erkennbare Ähnlichkeit mit den Slidern.

Kennt das jemand? Weiß man, wie das gelöst werden kann?

drhirn

#1
18 Dezember 2018, 12:19:52
Könntest du bitte deinen Code und ev. einen Screenshot posten?

ahstax

#2
23 Dezember 2018, 15:41:43
Hallo,

Ein Bildschirmfoto der "Situation" ist beigefügt.

Der Code ist:

Code Auswählen
<body>
  <div class="page" id="rollaeden_etage_eg">
    <div class="gridster">
    <ul>
   
    <li data-row="1" data-col="1" data-sizex="13" data-sizey="9">
<header><div data-type="label" class="medium orange">Wohnzimmer</div></header>

<div data-type="slider"
data-device='1_2_1_FB_Rolladen_WZ_Fenster'
data-min="0"
data-max="100"
data-get=""
data-set=""
class="cell"></div>
<!--
class="horizontal tap"></div>
-->
<div data-type="label"
class="cell">Rolladen Fenster groß</div>
<div data-type="label"
data-device="1_2_1_FB_Rolladen_WZ_Fenster_WE_auf_ganz"
data-get="NTM"
class="cell"> geht der Rolladen naechstes mal auf.</div>

    </li>

   
    <li data-row="1" data-col="13" data-sizex="13" data-sizey="9">
<header><div data-type="label" class="medium orange">Schlafzimmer</div></header>
<!--<div class="left cell">-->
<div class="cell">
<div data-type="label" class="">&nbsp;</div>
<div data-type="slider" data-device='2_2_1_FB_Rolladen_SZ_Fenster' data-get="STATE" data-min="0"  data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true  class="mini negated" >  </div>
<div class="triplebox-v small top-space-2x">
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="off" class=""> </div>
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="stop" class=""> </div>
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="on" class=""> </div>
</div>
</div>
    </li>

    <li data-row="10" data-col="1" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Kinderzimmer</div></header>   
    </li>
   
    </ul>
    </div>
  </div>
</body>

Hilft das zur Beantwortung meiner Frage?

drhirn

#3
23 Dezember 2018, 16:01:50
Ähm, nein. Weil Code und Screenshot nicht zusammen passen.
Aber:

  • Mit data-get="" holst du dir keinen Wert zur Anzeige. Lass das weg, wenn du eh den STATE willst
  • Wenn du nur reinen Text da stehen haben willst, brauchst du kein data-type="label"
  • Ich hab aus deinem gesamten Code eine FTUI-Seite gemacht und bei mir eingebunden. Sieht alles richtig aus. Also eventuell hast du in den anderen Seiten irgendwo einen Fehler, oder nicht den ganzen Code gepostet.

ahstax

#4
23 Dezember 2018, 16:36:20
Ah, Du meintest den gesamten Code, mit dem gesamte Darstellung erzeugt wird. Das wäre dann:

index.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/
* -
* - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* -   Breite: 9 Felder / Höhe: 5 Felder
* -    <meta name="widget_base_width" content="138">
* -    <meta name="widget_base_height" content="155">
* - Denver TAD-70112 WiFi: 7 Zoll 800x480 512 MB Dualcore 1,3 GHz 8GB
* -   Breite: 7 Felder / Höhe: 5 Felder
* -    <meta name="widget_base_width" content="144">
* -    <meta name="widget_base_height" content="112">
* - IPhone 5s: 4 Zoll 1136 × 640 Dualcore 1 GB 1,3 GHz 64GB
* -   Breite: 7 Felder / Höhe: 5 Felder
* -    <meta name="widget_base_width" content="144">
* -    <meta name="widget_base_height" content="112">
*/

1024x768
     <meta name="shortpoll_filter" content=".*">
-->
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="41">
    <meta name="widget_base_height" content="42">
    <meta name="gridster_cols" content="30">
    <meta name="gridster_rows" content="18">
   
    <meta name="web_device" content="WEB">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="0">
    <meta name="widget_margin" content="1">
    <meta name="longpoll" content="1">
    <meta name="longpoll_type" content="websocket">
<meta name="longpoll_filter" content=".*"> 
    <meta name="debug" content="2">
    <meta name="toast" content="2">
   

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

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/lib/powerange.min.css" />
<!--<link rel="stylesheet" href="/lib/openautomation.css" />-->
<!--<link rel="stylesheet" href="/fhem/tablet10test/eigenefonts/gk/style.css">-->
<link rel="stylesheet" href="/lib/material-icons.css" />
<link rel="stylesheet" href="/lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/wopr.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/own.css">
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />


    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>Haussteuerung</title>
</head>
<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="18">
<header><div data-type="label" class="medium orange">Menu</div></header>
            <div class="cell">
                <div data-type="pagebutton" data-url="#1_index.html"      data-load="#1_index" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*index.html||.*#1_index.html)" data-icon="fa-home" class="default top-space"></div>
<div data-type="pagebutton" data-url="#1_etagen.html"    data-load="#1_etagen" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_etagen.html||.*#2_etage_.*.html||.*#3_rooms_.*.html)" data-icon="oa-control_building_s_all" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_light.html"      data-load="#1_light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_light.html||.*#2_light_etage_.*.html)" data-icon="fa-lightbulb-o" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_heating.html"    data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_rollaeden.html" data-load="#1_rollaeden" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_rollaeden.html||.*#2_rollaeden_etage_.*.html)" data-icon="oa-fts_shutter_50" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_multimedia.html"    data-load="#1_multimedia" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_multimedia.html||.*#2_multimedia_.*.html)" data-icon="fa-music" class="prefetch prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_phone.html"    data-load="#1_phone" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#1_phone.html" data-icon="fa-phone" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_wetter.html"    data-load="#1_wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_wetter.html||.*#2_wetter_.*.html)" data-icon="oa-weather_cloudy" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_sonstiges.html"    data-load="#1_sonstiges" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_sonstiges.html||.*#2_sonstiges_.*.html)" data-icon="oa-edit_settings" class="prefetch top-space"></div>
                <div class="absolute bottom bottom-space-2x">
                   <div data-type="clock" data-format="H:i" class="large"></div>
                   <div data-type="clock" data-format="d.n.Y" class="small"></div>
            </div>
   
        </li>
        <li data-row="1" data-col="3" data-sizex="28" data-sizey="18">
            <div class="page" id="1_index"></div>
        <div class="page" id="1_etagen"></div>
            <div class="page" id="1_light"></div>
            <div class="page" id="1_heating"></div>
            <div class="page" id="1_rollaeden"></div>
            <div class="page" id="1_multimedia"></div>
            <div class="page" id="1_phone"></div>
            <div class="page" id="1_wetter"></div>
            <div class="page" id="1_sonstiges"></div>
         </li>
        </ul>
            </div>
</body>
</html>


1_rollaeden.html

Code Auswählen
<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * second page
     
     <li data-row="1" data-col="1" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Cam Garten</div></header>
       
     *
     load this page via widget pagebutton

     <div data-type="pagebutton"   data-url="#content_rooms.html"
          data-load="#content6"    data-off-background-color="transparent"
          data-off-color="#606060" data-on-background-color="#606060"
          data-on-color="#222222"  data-active-pattern=".*#content_cam.html"
          data-icon="fa-music"     class="prefetch top-space"></div>
    -->
</head>
<body>
<div class="page" id="1_rollaeden">
    <div class="gridster">
      <ul>
       
<li data-row="1" data-col="1" data-sizex="2" data-sizey="18">
<header><div data-type="label" class="medium orange">Etagen</div></header>
            <div class="cell">
                <!--
                <div data-type="pagebutton" data-url="#2_rollaeden_etage_og.html"    data-load="#rollaeden_etage_og" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#2_rollaeden_etage_og.html)" data-icon="oa-control_building_s_og" class="prefetch top-space"></div>
                <div data-type="label" class="darker">OG</div>
                -->
                <div data-type="pagebutton" data-url="#2_rollaeden_etage_eg.html" data-load="#rollaeden_etage_eg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_rollaeden_etage_eg.html" data-icon="oa-control_building_s_eg" class="prefetch top-space"></div>
                <div data-type="label" class="darker">EG</div>
               
                <div data-type="pagebutton" data-url="#2_rollaeden_etage_kg.html"       data-load="#rollaeden_etage_kg" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_rollaeden_etage_kg.html" data-icon="oa-control_building_s_kg" class="prefetch top-space"></div>
                <div data-type="label" class="darker">KG</div>
                <!--
                <div data-type="pagebutton" data-url="#2_rollaeden_etage_xx.html" data-load="#rollaeden_etage_xx" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*1_rollaeden.html||.*#2_rollaeden_etage_xx.html)" data-icon="oa-control_building_s_all" class="default top-space"></div>               
                <div data-type="label" class="darker">Wichtigste</div>
                -->
                <div data-type="pagebutton" data-url="#2_rollaeden_etage_set.html"    data-load="#rollaeden_etage_set" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#2_rollaeden_etage_set.html" data-icon="fa-wrench" class="prefetch top-space-3x"></div>
                <div data-type="label" class="darker">Setup</div>
            </div>

        </li>
        <li data-row="1" data-col="3" data-sizex="26" data-sizey="18">
<!--
            <div class="page" id="rollaeden_etage_xx"></div>
-->
            <div class="page" id="rollaeden_etage_eg"></div>
<!--
            <div class="page" id="rollaeden_etage_og"></div>
-->
            <div class="page" id="rollaeden_etage_kg"></div>
            <div class="page" id="rollaeden_etage_set"></div>
         </li>       
       
      </ul>
    </div>
    </div>
</body>
</html>


2_rollaeden_etage_eg.html

Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* -   Breite: 30 Felder / Höhe: 18 Felder
* -    <meta name="widget_base_width" content="41">
* -    <meta name="widget_base_height" content="41">

* -   Schalter mit Label: Breite: 3 Felder / Höhe: 3 Felder

Ebene 3

wegen Pagebutton-Untermenü:
Ebene 1: Breite: 30 Felder / Höhe: 18 Felder
Ebene 2:    Breite: 28 Felder / Höhe: 18 Felder
Ebene 3:    Breite: 26 Felder / Höhe: 18 Felder
Ebene 4:    Breite: 24 Felder / Höhe: 18 Felder
    -->

</head>
<body>
  <div class="page" id="rollaeden_etage_eg">
    <div class="gridster">
    <ul>
   
    <li data-row="1" data-col="1" data-sizex="13" data-sizey="9">
<header><div data-type="label" class="medium orange">Wohnzimmer</div></header>

<div data-type="slider"
data-device='1_2_1_FB_Rolladen_WZ_Fenster'
data-min="0"
data-max="100"
data-get="state"
data-set="state"
class="cell"></div>
<!--
class="horizontal tap"></div>
-->
<div data-type="label"
class="cell">Rolladen Fenster groß</div>
<div data-type="label"
data-device="1_2_1_FB_Rolladen_WZ_Fenster_WE_auf_ganz"
data-get="NTM"
class="cell"></div> geht der Rolladen naechstes mal auf.

    </li>

   
    <li data-row="1" data-col="13" data-sizex="13" data-sizey="9">
<header><div data-type="label" class="medium orange">Schlafzimmer</div></header>
<!--<div class="left cell">-->
<div class="cell">
<div data-type="label" class="">&nbsp;</div>
<div data-type="slider" data-device='2_2_1_FB_Rolladen_SZ_Fenster' data-get="state" data-set="state" data-min="0"  data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true  class="mini negated" >  </div>
<div class="triplebox-v small top-space-2x">
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="off" class=""> </div>
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="stop" class=""> </div>
<div data-type="push" data-device="2_2_1_FB_Rolladen_SZ_Fenster" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="on" class=""> </div>
</div>
</div>
    </li>

   
    <li data-row="10" data-col="1" data-sizex="13" data-sizey="9">
        <header><div data-type="label" class="medium orange">Kinderzimmer</div></header>   
    </li>

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


Deinen Hinweis zu data-set und data-get habe ich jetzt berücksichtigt.

drhirn

#5
23 Dezember 2018, 16:43:37
Uiuiuiui, auf der index.html wird so viel Zeug eingebunden (link, script), kann gut sein, dass da irgendwo der Hund begraben liegt. Bist du sicher, dass du das alles brauchst? Schau mal hier was setstate da alles drinnen hat. Da ist es nur eine JavaScript-Datei. Bei mir übrigens auch. FTUI lädt ja eh JavaScript/CSS nach, wenn benötigt.

ahstax

#6
24 Dezember 2018, 07:14:41
Schönen guten Morgen,

ich habe jetzt den ganzen link- und script-Block auskommentiert, sieht jetzt so aus:

Code Auswählen
<!--
    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />

<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="/lib/powerange.min.css" /> -->
<!--<link rel="stylesheet" href="/lib/openautomation.css" /> -->
<!--<link rel="stylesheet" href="/fhem/tablet10test/eigenefonts/gk/style.css"> -->
<!--
<link rel="stylesheet" href="/lib/material-icons.css" />
<link rel="stylesheet" href="/lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/wopr.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/own.css">
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
-->
<!--
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
-->
<script src="js/fhem-tablet-ui.js" defer></script>

und die Slider funktionieren jetzt auch. Ich werde noch testen, an welcher Verlinkung bzw welcher Script-Refferenz es hing.
Diese waren m übrigen in der Vorlage drin. Ich weiß noch nicht genau, warum und wozu...

Schöne Weihnachten!!!
Drucken
Nach oben Seiten1
Benutzer-Aktionen