[FTUI] Popup Overlay Rand

Begonnen von schnibberle, 01 Juni 2019, 18:07:56

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

schnibberle

01 Juni 2019, 18:07:56
Hallo FHEM-Gemeinde,

ich bin derzeit im Setup des FTUI. Ein wirklich mächtiges Tool. Vielen Dank hierfür.
Leider habe ich bei den Popups auf dem PC und Tablet einen unschönen Rand, in welchem man das Popup auch nicht "wegklicken" kann.
Kann man den Hintergrund des Popups aus komplette Display skalieren, damit man auch am unteren rechten Rand das Popup geschlossen bekommt ?

Siehe Code und Bild anbei :

Code Auswählen

<!DOCTYPE html>
<html>
<meta name="gridster_base_width" content="100">
<meta name="gridster_base_height" content="100">
<meta name="widget_margin" content="2">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="websocket">
<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-sizex="1" data-sizey="6"><header>NAVIGATION</header>
       <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-home"
         data-on-color="blue"
         data-on-background-color="white"
        class="default prefetch"
         data-device="Seite"
         data-get="STATE"
         data-get-on="1">
        </div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-music_video"
         class="default prefetch"
         data-device="Seite"
         data-get="STATE"
         data-get-on="2">
        </div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="3"></div>
    <div data-type="pagebutton"
         data-url="#page4.html"
         data-load="#page4"
         data-active-pattern=".*#page4.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="4"></div>
    <div data-type="pagebutton"
         data-url="#page5.html"
         data-load="#page5"
         data-active-pattern=".*#page5.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="5"></div>
    <div data-type="pagebutton"
         data-url="#page6.html"
         data-load="#page6"
         data-active-pattern=".*#page6.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="6"></div>
    <div data-type="pagebutton"
         data-url="#page7.html"
         data-load="#page7"
         data-active-pattern=".*#page7.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="7"></div>
    <div data-type="pagebutton"
         data-url="#page8.html"
         data-load="#page8"
         data-active-pattern=".*#page8.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="8"></div>
    <div data-type="pagebutton"
         data-url="#page9.html"
         data-load="#page9"
         data-active-pattern=".*#page9.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="9"></div>
    <div data-type="pagebutton"
         data-url="#page10.html"
         data-load="#page10"
         data-active-pattern=".*#page10.html"
         data-on-color="blue"
         data-on-background-color="white"
         data-icon="mi-home"
         data-device="Seite"
         data-get="STATE"
         data-get-on="10"></div>
    </li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="6">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
</li>
</ul>
</div>
</body>

</html>



Code Auswählen
<div class="page" id="page1">

<div class="gridster">
<ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><header>WETTER</header>
<div class="hbox">
<div data-type="datetimepicker"
     data-device='dummyDatepicker'
     data-datepicker="false"
     data-step="5"
     class="inline"></div></div>
</li>
    <li data-row="1" data-col="5" data-sizex="5" data-sizey="3"><header>CAMS</header>
    <div data-type="swiper"
         data-autoplay="5000"
         data-device="Cam_Swiper" data-get="input"
         data-states='["Airplay","Webradio","BD/DVD","PHONO"]'
         class="">
         <ul>
            <li>
                <div data-type="chart"
         data-logdevice="logdb"
         data-logfile="History"
        data-ddd='["40","60","0"]'
        data-style='["ftui l2","ftui l4"]'
         data-columnspec='["WetterProplanta:humidity"]'>
                </div>
                </li>
        <li>
        <div data-type="image"
data-url="http://217.7.233.140/record/current.jpg?time=1557517352663&dummy=image.jpg" data-size="150%"
    data-nocache="true"
data-refresh="5" >  </div>
        </li>
        <li>
        <div data-type="image"
data-url="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" data-size="150%" data-refresh="5"
                        data-nocache="true"
                                                data-refresh="2">
        </div>
       </li>
        <li><div>
        </div>
        </li>
          </ul>
   </li>

    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><header>2</header></li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><header>3</header>ROW 1 | COL 3 | X 1 | Y 1</li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><header>Wohnzimmer</header>
<div class="vbox items-space-around">

<div data-type="popup" data-width="450px" class="">
        <div data-type="simplechart"
                data-device="WetterProplanta"
                data-logdevice="logdb"
                data-logfile="History"
                data-columnspec="WetterProplanta:humidity"
                data-width="50"
                data-height="50"
                data-minvalue="0"
                data-maxvalue="100"
                data-yticks="2"
                class="">
        </div>
        <div type="label" class="tiny">Temp.</div>
        <div class="dialog">
                <header>TEMPERATURE</header>
  <div data-type="chart"
         data-logdevice="logdb"
         data-logfile="History"
        data-ddd='["40","60","0"]'
        data-style='["ftui l2","ftui l4"]'
         data-columnspec='["WetterProplanta:humidity"]'>
</div>

        </div>
</div>
</div>
</li>
    <li data-row="2" data-col="1" data-sizex="2" data-sizey="1"><header>2</header>ROW 2 | COL 1 | X 2 | Y 1</li>
    <li data-row="2" data-col="3" data-sizex="2" data-sizey="1"><header>2</header>ROW 2 | COL 3 | X 2 | Y 1</li>
    <li data-row="3" data-col="1" data-sizex="3" data-sizey="1"><header>2</header>ROW 3 | COL 1 | X 3 | Y 1</li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><header>2</header>ROW 3 | COL 4 | X 1 | Y 1</li>
    <li data-row="4" data-col="1" data-sizex="8" data-sizey="1"><header>2</header>
<div class="hbox items-space-around">
        <div data-type="popup" data-width="800px" class="">
                <div data-type="simplechart"
                data-device="WetterProplanta"
                data-logdevice="logdb"
                data-logfile="History"
                data-columnspec="WetterProplanta:temperature"
                data-width="50"
                data-height="50"
                data-minvalue="-5"
                data-maxvalue="40"
                data-yticks="2"
                class="">
                </div>
                        <div class="dialog">
                        <header>TEMPERATURE</header>
                                <div data-type="chart"
                                data-device="WetterProplanta"
                                data-logdevice="logdb"
                                data-logfile="History"
                                data-style='["ftui l6fill"]'
                                data-crosshair="true"
                                data-showlegend="false"
                                class="nobuttons fullsize"
                                data-columnspec='["WetterProplanta:temperature"]'>
                                </div>
                        </div>
        </div>
        <div data-type="popup" data-width="450px" class="">
                <div data-type="simplechart"
                data-device="WetterProplanta"
                data-logdevice="logdb"
                data-logfile="History"
                data-columnspec="WetterProplanta:humidity"
                data-width="50"
                data-height="50"
                data-minvalue="0"
                data-maxvalue="100"
                data-yticks="2"
                class="">
                </div>
                        <div class="dialog">
                        <header>TEMPERATURE</header>
                                <div data-type="chart"
                                data-logdevice="logdb"
                                data-logfile="History"
                                data-ddd='["40","60","0"]'
                                data-style='["ftui l2","ftui l4"]'
                                data-columnspec='["WetterProplanta:humidity"]'>
                                </div>
                        </div>
        </div>

</div>
</li>
    <li data-row="5" data-col="1" data-sizex="4" data-sizey="1"><header>ABFALL</header>
<div class="hbox items-space-around">
<div data-type="popup"
     data-height="50%"
     data-mode="fade"
     data-width="50%">
<div data-type="symbol" class="big"
                                                data-background-icon="none"
                                                data-device="myABFALL"
                                                data-get="Restmuell2-woechentlich_days"
                                                data-get-warn=".*(^\d+).*"
                                                data-off-color="#808080"
                                                data-colors='["#ff0000","#ae5e53","#cd3333"]'
                                                data-get-on='["(0|1)","(2|3)","(4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
                                                data-icons='["fa-trash warn fa-spin","fa-trash warn","fa-trash"]'
                                                class="normal"></div>

    <div class="dialog">
        <header>Restmüll</header>
        <div>Inhalt des Popups</div>
    </div>
</div>
<div data-type="symbol" class="big"
                                                data-background-icon="none"
                                                data-device="myABFALL"
                                                data-get="GelberSackTonne_days"
                                                data-get-warn=".*(^\d+).*"
                                                data-off-color="#808080"
                                                data-colors='["#ff0000","#ae5e53","#00ff00"]'
                                                data-get-on='["(0|1)","(2|3)","(4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
                                                data-icons='["fa-recycle warn fa-spin","fa-recycle warn","fa-recycle"]'
                                                class="normal"></div>
<div data-type="symbol" class="big"
                                                data-background-icon="none"
                                                data-device="myABFALL"
                                                data-get="Biotonne_days"
                                                data-get-warn=".*(^\d+).*"
                                                data-off-color="#808080"
                                                data-colors='["#ff0000","#ae5e53","#00bb2d"]'
                                                data-get-on='["(0|1)","(2|3)","(4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
                                                data-icons='["fa-seedling warn fa-spin","fa-seedling warn","fa-seedling"]'
                                                class="normal"></div>
<div data-type="symbol" class="big"
                                                data-background-icon="none"
                                                data-device="myABFALL"
                                                data-get="Papiertonne_days"
                                                data-get-warn=".*(^\d+).*"
                                                data-off-color="#808080"
                                                data-colors='["#ff0000","#ae5e53","#0000ff"]'
                                                data-get-on='["(0|1)","(2|3)","(4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
                                                data-icons='["fa-paper-plane warn fa-spin","fa-paper-plane warn","fa-paper-plane"]'
                                                class="normal"></div>
</div>

    </li>
   <li data-row="5" data-col="5" data-sizex="1" data-sizey="1"><header>ABFALL</header></li>

    <li data-row="6" data-col="1" data-sizex="9" data-sizey="1"><header>Abfall</header>
        </li>
</ul>
</div>
</div>
root@vm48:/opt/fhem/www/tablet#


Viele Grüße

Schneewa

#1
13 November 2019, 18:47:11
Hi all,

Ich habe leider dasselbe Problem  :-[

Gibt es da eine Lösung...

schnibberle

#2
11 Dezember 2019, 21:38:38
Hab auch noch nichts gefunden. sieht wirklich blöd aus :(

setstate

#3
12 Dezember 2019, 06:46:17
Schaue ich mir an. Da muss das graue Overlay auf 100% Screen Weite/Höhe und nicht mit Festwerten definiert werden.

Thorsten Pferdekaemper

#4
12 Dezember 2019, 22:03:46
Zitat von: setstate am 12 Dezember 2019, 06:46:17
Schaue ich mir an. Da muss das graue Overlay auf 100% Screen Weite/Höhe und nicht mit Festwerten definiert werden.
Das ist schon so, denke ich, aber position:absolute. Meiner Meinung nach sollte es position:fixed sein. ...zumindest mache ich es so in FUIP und das Problem tritt dort nicht (mehr) auf.
Gruß,
  Thorsten
FUIP

setstate

#5
13 Dezember 2019, 23:50:07
genau so ist es. Ist jetzt geändert.

cotecmania

#6
17 November 2022, 18:24:33
Hallo,

ich möchte meine Popups mit runden Ecken und dickeren Rändern ausstatten.
Kann dazu jemand ein Beispiel einstellen, wie und wo man das in den css-Dateien macht ?

Gruss
Joe
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI
Drucken
Nach oben Seiten1
Benutzer-Aktionen