Hallo zusammen,
vielleicht kann mir jemand verraten wie ich mein TabletUI ein bisschen aufpeppen kann. Ich habe da an ein schönes Hintergrundfoto gedacht. In Moment ist es schwarz gehalten (siehe Foto Hintergrund) Ich sende mal meine index.html und ein screenshot. Das index_explained habe ich in einem Beitrag gefunden, leider ist dort nicht beschrieben wie es gemacht wurde aber das wäre so meine Vorstellung.
Vielen Dank für Eure Hilfe :-)
<!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_wetter.html" data-load="#1_wetter" data-return-time="15" data-off-background-color="transparent" data-off-color="#FF00C3" data-on-background-color="#FF00C3" data-on-color="#222222" data-active-pattern="(.*#1_wetter.html||)" data-icon="oa-weather_cloudy" 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="#FF00C3" data-on-background-color="#FF00C3" 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_light.html" data-load="#1_light" data-off-background-color="transparent" data-off-color="#FF00C3" data-on-background-color="#FF00C3" 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_steckdosen.html" data-load="#1_steckdosen" data-off-background-color="transparent" data-off-color="#FF00C3" data-on-background-color="#FF00C3" data-on-color="#222222" data-active-pattern="(.*#1_steckdosen.html||)" data-icon="fas fa-tv" 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_steckdosen"></div>
</li>
</ul>
</div>
</body>
</html>
Einfach in der entsprechenden user.css- zum Beispiel dem body-Elemet - eine Eigenschaft "background-image" mitgeben :
https://www.w3schools.com/cssref/pr_background-image.asp (https://www.w3schools.com/cssref/pr_background-image.asp)
Vielen Dank für die schnelle Antwort. Leider habe ich nun einen weißen Hintergrund. Stimmt dann mit dem Format irgendwas nicht, oder ist die URL ungültig. Ich habe das Foto in den IMG Ordner verschoben.
Danke und Grüße
{
background-image: src="/fhem/www/tablet/img/Tankstelle/meer.jpg"
background-color: #000000;
background-size: 100%;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: small;
color: #eeeeee;
width: auto;
/* never remove this, it is important for internal checks */
text-align: center;
/* never remove this */
margin: 0px;
}
https://forum.fhem.de/index.php/topic,77197.msg692225.html#msg692225
Und die Berechtigungen auf Verzeichnisse und Dateien prüfen.