Tablet UI in versch.Browser

mrfloppy · 27 März 2017, 08:10:57

Ich taste mich nun mal an eine Tablet Ui für meine Haussteuerung ran.
Mein Problem ist das es auf jedem Browser anders dargestellt wird.
Am Tablet in Fully habe ich es angepasst.

Mache ich etwas falsch? Oder ist das so?
Wie macht ihr das so mit der Erstellung. Immer direkt aufs Tab schieben oder am Tab editieren?

Empfehlung für einen HTML-Editor?

Code Auswählen


<!DOCTYPE html>
<html>
<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/
     */
    -->

		<title>FHEM-Tablet-UI</title>
	
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="widget_base_width" content="58,1">
		<meta name="widget_base_height" content="58,1">
		<meta name="widget_margin" content="1">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="gridster_disable" content="1">
		<meta name="longpoll_type" content="websocket"> <!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
		<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->	
		<meta name="toast" content="0"> <!-- 1=Toast messages deaktivieren ;0=not output -->	
		<meta name="lang" content="de">
		
		<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />				
		<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" /> <!-- eigene CSS -->
		<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
		<link rel="stylesheet" href="lib/openautomation.css" />
		<link rel="stylesheet" href="lib/fhemSVG.css" />
		<link rel="stylesheet" href="lib/font-awesome.min.css" />
		<link rel="stylesheet" href="lib/material-icons.min.css" />
		<link rel="stylesheet" href="lib/jquery.toast.min.css" />
	

		<script type="text/javascript" src="js/fhem-tablet-ui.js"></script>
		<script src="lib/jquery.toast.min.js"></script>
		<script src="lib/jquery.gridster.min.js"></script>
</head>
<body>
	<div class="gridster">
		<ul>
			<!-- ============= Uhrzeit ================ -->
			<!-- ====================================== -->
			<li class="" data-row="1" data-col="3" data-sizex="5" data-sizey="2">
				<div class="cell">
				<div data-type="clock" class="center hugeest yellow" style="margin-top:-10px !important"></div>
				<div data-type="clock" data-format="l d.m.Y" class="biggest" style="margin-top:-4px !important"></div></div>
			</li>				
			
			<!-- ========== Aussentemperatur ========== -->
			<!-- ====================================== -->
			
			<li class="" data-row="1" data-col="8" data-sizex="4" data-sizey="2">
		

						<div class="sheet">
							<div class="row">
								<div class="cell-1-2">
									<div class="row">								
										<div class="hbox">
											
											<div data-type="label" 
												data-device="Oregon_TempHum"
												data-get="temperature"
												data-limits='[-73,0,30]' 
												data-colors='["#6699FF","#AA6900","#FF0000"]' 
												data-unit="%B0C%0A" 
												class="tall centered">
											</div>
										</div>								
										
										<div class="hbox">
											<div class="compressed  normal shadow inline" data-type="symbol" data-icon="wi wi-thermometer" data-off-color="#999"></div>	
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statTemperatureTendency" data-refperiod="1" class="inline bigger"></div>
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statTemperatureTendency" data-refperiod="2" class="inline bigger"></div>
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statTemperatureTendency" data-refperiod="3" class="inline bigger"></div>
										
										</div>	
									</div>
								</div>	
								<div class="cell-1-2">
									<div class="row">								
										<div class="hbox">
											
											<div data-type="label" 
												data-device="Oregon_TempHum"
												data-get="humidity"
												data-limits='[-73,0,100]' 
												data-colors='["#6699FF","#AA6900","#FF0000"]' 
												data-unit="%" 
												class="tall centered">
											</div>
											</div>								
										
										<div class="hbox">
											<div class="compressed  normal shadow inline" data-type="symbol" data-icon="wi wi-humidity" data-off-color="#999"></div> 							
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statHumidityTendency" data-refperiod="1" class="inline bigger"></div>
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statHumidityTendency" data-refperiod="2" class="inline bigger"></div>
											<div data-type="klimatrend" data-device="Oregon_TempHum" data-get="statHumidityTendency" data-refperiod="3" class="inline bigger"></div>
										
										</div>	
									</div>
								</div>								
							</div>
						</div>	
			</li>
	
			<!-- ========= Sonnenauf-Untergang =========== -->
			<!-- ====================================== -->
			
			<li class="" data-row="1" data-col="12" data-sizex="3" data-sizey="2">
			
				<div class="vbox">	
					<div class="hbox">		
						<div class="compressed normal centered" data-type="symbol" data-icon="wi wi-sunrise" data-off-color="#999"></div>					
						<div class="bigger centered" data-type="label" data-device="Sonnenaufgang"	data-color="#FAA460"></div>
					</div>
					<div class="hbox">							
						<div class="compressed normal centered shadow" data-type="symbol" data-icon="wi wi-sunset" data-off-color="#999"></div>					
					<div class="bigger centered" data-type="label" data-device="Sonnenuntergang" data-color="#FAA460"></div>
					</div>
				</div>
			</li>
			<!-- ========= KeyMatic Anzeige =========== -->
			<!-- ====================================== -->
			
			<li data-row="1" data-col="15" data-sizex="2" data-sizey="2">
			
				<div data-type="switch" data-device="KeyMatic" data-get-on="locked.*" data-get-off="unlocked.*" data-set-on="lock" data-set-off="unlock" data-icon="fa-lock" class="bigger centered center-align"></div>
			
			</li>
	
</li>
			
		</ul>
	</div>
</body>
</html>

LG Thomas

FHEM Forum

Tablet UI in versch.Browser

mrfloppy