Hintergrundfoto in TabletUI

smile7779 · 11 Oktober 2019, 16:36:57

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

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_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>

Stütti · 11 Oktober 2019, 20:46:53

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

smile7779 · 12 Oktober 2019, 19:15:56

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

Code Auswählen

{
    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;
}

amenomade · 12 Oktober 2019, 21:36:41

https://forum.fhem.de/index.php/topic,77197.msg692225.html#msg692225

Und die Berechtigungen auf Verzeichnisse und Dateien prüfen.

FHEM Forum

Hintergrundfoto in TabletUI

smile7779

Stütti

smile7779

amenomade