Hallo zusammen,
ich habe mich gestern einmal an die Arbeit gemacht und eine Mobile-Version des FTUI erstellt. Nachdem ich die ersten Aktoren drin hatte, war meine Frau ganz aus dem Häuschen. Endlich bequem vom Sofa aus mittels iPHONE die wichtigsten Geräte steuern.
Allerdings kamen mit der Zeit dann doch einige Probleme! Das die Seite richtig geladen wird ist echt reiner Zufall!! Heute morgen habe ich es erneut ausprobiert und war leider frusttriert.
Anbei mal der Code und die Hardcopys.
Hat jemand von Euch besser Ergebnisse erzielen können? Habe ich einen groben Schnitzer im Code?
ps. meine iphone_index.html liegt im übrigen im selbigen Ordner wie die index.html
<html>
<title>FHEM</title>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.3.0
* 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/
*
* Colorpicker
* http://www.w3schools.com/tags/ref_colorpicker.asp
*/
-->
<meta name='toast' content='0'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/customfonts/font1/style.css">
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer=defer></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Test</header>
</li>
<!-- BLOCK 2 Spritpreise -->
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div class="container" class="center">
<div class="inline normal"></div><br><br>ARAL
<div data-type="label"
data-device="ARAL"
data-get="Diesel"
data-unit="€"
class="inline normal"></div><br>
<div class="inline normal"></div>GO
<div data-type="label"
data-device="GO"
data-get="Diesel"
data-unit="€"
class="inline normal"></div><br>
<div class="inline normal"></div>JET
<div data-type="label"
data-device="JET"
data-get="Diesel"
data-unit="€"
class="inline normal"></div><br>
<div class="inline normal"></div>SB
<div data-type="label"
data-device="SB"
data-get="Diesel"
data-unit="€"
class="inline normal"></div><br>
<div class="inline normal"></div>TOTAL
<div data-type="label"
data-device="TOTAL"
data-get="Diesel"
data-unit="€"
class="inline normal"></div>
</div>
</li>
<!-- Block 3 -->
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header></header><br>
<div data-type="weather"
data-device="MeinWetter"
data-get="condition"
style="font-size:250%">
</div>
<div data-type="label"
data-device="MeinWetter"
data-get="fc1_condition">
</div>
</li>
<!-- Block 3 Räume mit Aktionen -->
<li data-row="2" data-col="1" data-sizex="3" data-sizey="2">
<header></header>
<div data-type="swiper" data-height="200px" data-width="250px" class="top-space">
<ul>
<li><div class="large top-space">Wohnzimmer</div>
<div data-type="label" class="small inline">Stehlampe</div>
<div data-type="label" class="small inline">KODI</div><br>
<div data-type="switch" data-device="Stehlampe" class="cell bigger"></div>
<div data-type="switch" data-device="XBMC_Modus" data-icon="font1-kodi" class="cell bigger"></div>
</li>
<li>
<div class="large top-space">Wohnzimmer Wohlbefinden</div><br>
<div class="center">
<div data-type="spinner"
data-get="desired-temp"
data-set="desired-temp"
data-device="Wohnzimmer.Wandthermostat"
data-min="4"
data-max="30"
data-icon-left-color="blue"
data-icon-right-color="red"
data-unit="°"
class="valueonly"></div>
</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="humidity"
data-unit=" %"
class="cell small">
</div>
<div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow">
</div>
</li>
<li><div class="large top-space">Schlafzimmer</div>
<div class="center">
<div data-type="label" class="small inline">Stehlampe Björn</div>
<div data-type="label" class="small inline">Stehlampe Agnes</div><br>
</div>
<div data-type="switch" data-device="HUEDeviceSZBjoern" class="cell bigger"></div>
<div data-type="switch" data-device="HUEDeviceSZAgnes" class="cell bigger"></div>
</li>
<li>
<div class="large top-space">Schlafzimmer Wohlbefinden</div><br>
<div class="center">
<div data-type="spinner"
data-get="desired-temp"
data-set="desired-temp"
data-device="Schlafzimmer.Wandthermostat"
data-min="4"
data-max="30"
data-icon-left-color="blue"
data-icon-right-color="red"
data-unit="°"
class="valueonly"></div>
</div>
<div data-type="label" data-device="Schlafzimmer.Wandthermostat" data-get="humidity" data-unit=" %"
class="cell small"></div>
<div data-type="label"
data-device="Schlafzimmer.Wandthermostat"
data-get="measured-temp"
data-unit=" °C"
class="darker narrow">
</div>
</li>
<li><div class="large top-space">Bad</div><div data-type="label" data-device="BadHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
<li><div class="large top-space">Wohnzimmer</div><div data-type="label" data-device="WohnzimmerHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
</ul>
</div>
</li>
<!-- BLOCK 5 Wettervorhersage -->
<li data-row="5" data-col="1" data-sizex="3" data-sizey="2">
<div data-type="swiper" data-height="220px" data-width="500px" class="top-space-2x">
<ul>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc2_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc2_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc2_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc3_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc3_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc3_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc3_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc4_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc4_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc4_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc4_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc5_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc5_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc5_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc5_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc5_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc5_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc6_tempMax" data-unit="°C " class="bottom gigantic inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="fc6_weatherDay" class="large cell"></div>
<div data-type="weather" data-device="AgroWeather" data-get="fc6_weatherDay" class="bigplus thin"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="fc6_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="fc6_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc6_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
Wenn du möchtest, dass sich jemand deinen Code ansieht, solltest du ihn in Code-Tags packen. So ist das schwer zu lesen und macht den Beitrag auch zu lang.
:D schon passiert. Hatte das falsche Icon ausgewählt ;)
Moin. Hier mal mein <head>-Tag. Minimalistisch, ausreichend und lauffähig.
<head>
<title>HOME</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="140">
<meta name="widget_base_height" content="157">
<meta name="widget_margin" content="0"> <!-- Space between gridster-elements -->
<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="longpoll" content="1"> <!-- 1= LongPoll; 0= Shortpoll every 30s -->
<meta name="gridster_disable" content="1">
<meta name="debug" content="0"> <!-- 1= Output to console; 0= No output -->
<meta name="toast" content="1"> <!-- 1= Toast Messages; 0 = No Messages -->
<!-- Cache -->
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<!-- Style CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<!-- Custom Fonts -->
<link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.css" />
<link rel="stylesheet" href="/fhem/tablet/fonts/material/style.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user_tablet.css" />
<!-- Scripts -->
<script src="/fhem/pgm2/jquery.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
<!-- <script src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script> -->
<script src="/fhem/tablet/js/fhem-tablet-ui-2.0_beta.js" defer></script>
</head>
Zu iPhone und Co. kann ich nichts sagen, da ich selber keine habe...
Zu deinem Code:
<div class="inline normal"></div><br><br>ARAL
<div data-type="label"
data-device="ARAL"
data-get="Diesel"
data-unit="€"
class="inline normal"></div><br>
<div class="inline normal"></div>GO
<div data-type="label"
data-device="GO"
data-get="Diesel"
data-unit="€"
class="inline normal"></div>
<div class="top-space">
<div class="inline normal">ARAL
</div>
<div data-type="label"
data-device="ARAL"
data-get="Diesel"
data-unit="€"
class="inline normal">
</div>
</div>
<div class="top-space">
<div class="inline normal">GO
</div>
<div data-type="label"
data-device="GO"
data-get="Diesel"
data-unit="€"
class="inline normal">
</div>
</div>
Du musst den Text schon IN das <div>-Element schreiben. sonst wird die Formatierung nicht übernommen.
Du brauchst keine Zeilenumbrüche... FTUI bringt alles mit. Ein DIV mehr oder weniger ist nicht schlimm. Erleichtert aber die Formatierung und man behält den überblick.
Wenn "top-space" zu groß ist, dann leg eine neue Klasse in der *-user.css an:
.mein-top-space {
margin-top: 10px !important;
}
Sonst habe ich keine "groben Schnitzer" wie falsch gesetzte Zeichen oder so entdeckt. Was bekannt ist, dass Safari und Co. bzw iOs Probleme hat. Warum? Kein Plan!
Mal testweise die FTUI durch Apache ausliefern lassen... Was wiederum nichts an Files selbst ändert...
Grüße^^
Interessant. Ich bin gerade ebenfalls über
<!-- Cache -->
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv="Cache-Control" content="no-store" />
gestolpert. Das ist in deinem o.g. Code auch enthalten. Ich denke, dass wird mein Problem lösen. Jetzt muss ich erstmal warten bis ich wieder zu Hause bin ;D