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 :
<!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>
<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
Hi all,
Ich habe leider dasselbe Problem :-[
Gibt es da eine Lösung...
Hab auch noch nichts gefunden. sieht wirklich blöd aus :(
Schaue ich mir an. Da muss das graue Overlay auf 100% Screen Weite/Höhe und nicht mit Festwerten definiert werden.
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
genau so ist es. Ist jetzt geändert.
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