Komplettes FTUI erstellt und nun eine Startseite davor..?

moonsorrox · 02 Januar 2019, 13:27:08

Ich habe meiner kompletten FTUI Installation eine sogenannte Startseite davor gestellt welche ich auch aus Fhem heraus aufrufen kann.

Vorher hatte ich immer die Seite aufgerufen mit

Code Auswählen

http://10.0.0.50:8083/fhem/ftui/index_flur.html

Nun habe ich eine index.html als eben diese Startseite auf der habe ich ein Pagebutton erstellt der mir meine bisherige FTUI Installation aufrufen soll
Der Pagebutton:

Code Auswählen

<li data-row="7" data-col="8" data-sizex="2" data-sizey="10" style="background-color:transparent">
<div class="prefetch bigger" data-type="pagebutton" 
data-url="#index_flur.html" 
data-load="#index_flur" 	
data-active-pattern="(.*/||.*index.html||.*#index_flur.html)" 	
data-icon="fa-home" 
data-off-color="white" 
data-on-color="crimson" 
data-on-background-color="#667299" 
data-off-background-color="#47476b" 
data-fade-duration="fast" 
data-background-icon="none"></div>             
<!--div class="page" id="index_flur"></div--></li>

Das funktioniert gar nicht.. Egal was ich an bei den 3 Attributen einstelle er springt nicht zu meiner FTUI Seite

Code Auswählen

data-url="#index_flur.html" data-load="#index_flur" data-active-pattern="(.*/||.*index.html||.*#index_flur.html)"

Wo ist jetzt mein Denkfehler, diese Startseite soll eigentlich immer der die 1. Seite sein, auf allen weiteren Seiten kommt dann ein Pagebutton der diese Startseite wieder aufruft, aber wenn das dorthin schon nicht klappt. Ich weiß grad nicht weiter..!

"Pagetab" habe ich auch schon ausprobiert aber da funktioniert das ganze nur einmal..!

EDIT:// hier noch die bisherige Datei "index_flur.html" die aufgerufen wurde:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
	<title>FHEM - Smart - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--meta http-equiv="refresh" content="60; URL=/fhem/ftui/index.html"-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!--meta http-equiv="X-UA-Compatible" content="IE=edge" /-->
    <meta name="widget_margin" content="0">
    <!--meta name="mobile-web-app-capable" content="yes"-->
    <!--meta name="apple-mobile-web-app-capable" content="yes"-->
    <meta name="gridster_disable" content="1">
	
    <!--meta name='gridster_min_width' content='100'-->
    <!--meta name='gridster_min_height' content='100'-->

    <meta name="longpoll_type" content="websocket">
    <!--meta name="longpoll_type" content="ajax"-->
    <meta name="longpoll" content="1">
    <!--meta name="longpoll_filter" content=".*"-->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
    <meta name="toast" content="0"> <!-- 0=Toast off 1=Toast on -->
    <meta name="lang" content="de">
	<meta name='fade_time' content='0'>
    <!--meta name="longpoll_maxage" content="240"-->
    <meta name="web_device" content="WEB">
    <!--meta name="web_device" content="WEBTABLET1"-->
    <!--meta http-equiv="Cache-Control" content="no-store" /-->
    <!--link rel="icon" href="favicon.ico" type="image/x-icon" /-->
	
	<!-- Style CSS -->
	<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-custom.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.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" />
	<link rel="stylesheet" href="lib/fhemSVG.css" />
	<link rel="stylesheet" href="lib/openautomation.css" />
	<link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
	<link rel="stylesheet" href="lib/font-awesome.min.css" />
	<link rel="stylesheet" href="lib/fhemSVG.css" />
	<link rel="stylesheet" href="lib/openautomation.css" />

	<!-- Custom Fonts -->
	<link rel="stylesheet" type="text/css" href="customfonts/mf1/style.css" />
	<!--link rel="stylesheet" href="fonts/roman/style.css" /-->
	<link rel="stylesheet" href="fonts/material/style.css" />

	<!-- Custom CSS -->
    <!--link rel="stylesheet" href="css/fhem-mobil-ui.css" /-->
    <link rel="stylesheet" href="css/fhem-tablet-ui-rene.css" />
	<link rel="stylesheet" type="text/css" href="css/fhem-flur-ui.css" />
			
	<!-- Scripts -->
    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>	
    <script src="js/fhem-tablet-ui.js" defer></script>
    <style>
        

    </style>
</head>

<body style="overflow:hidden;">
    <div id="background5" class="gridster">
        <ul>
            <!-- Start Statusleiste oben -->
            <li data-row="1" data-col="1" data-sizex="3" data-sizey="3" style="background-color:#3d445c;">
                <div class="hbox">
					<div class="cell" data-type="analogclock" data-size="125" data-body="none" data-dial="austria"
						 data-dial-color="#ffffff" data-hour-color="#DC143C" data-minute-color="#DC143C" data-second-color="#0000ff" data-mbehave="ebounce" data-sbehave="ebounce">
					</div>
					<div class="card" style="background-color:#3d445c">
						<div class="vbox">
							<div data-type="symbol" data-icon="oa-temp_outside" data-color="white"></div>
							<div class="fullsize" style="font-size:190%" data-type="label" data-device="di_average" data-get="state" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit=" °C" data-fix="1"></div>
						</div>
					</div>									
				</div>					
				<!--div data-type="clock" data-format="H:i" class="left" style="font-family:'Comfortaa'; letter-spacing: 0.05em; font-weight: bold; margin-top:17px; margin-left:30px !important; font-size: 500% !important; font-weight: thin !important;"></div-->
			</li>
            <li id="wohnen" data-row="1" data-col="4" data-sizex="10" data-sizey="3" class="center big">
                <div data-type="pagebutton" data-url="#flur_content1.html" data-load="#flur_content1" data-active-pattern="(.*/||.*index_flur.html||.*#flur_content1.html)" data-icon="fa-home" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-off-background-color="#47476b" data-fade-duration="fast" data-background-icon="none"></div>
                <div data-type="pagebutton" data-url="#flur_content2.html" data-load="#flur_content2" data-active-pattern=".*#flur_content2.html" data-icon="oa-weather_cloudy" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
                <!--div data-type="pagebutton" data-url="#flur_content3.html" data-load="#flur_content3" data-active-pattern=".*#flur_content3.html" data-off-color="white" data-on-color="crimson" data-device="dRolllaeden_Gesamtstatus" data-get="state" data-icons='["mf1-fts_shutter_10_medium","mf1-fts_shutter_50_medium","mf1-fts_shutter_100_medium","mf1-fts_shutter_20_attention_medium warn"]' data-get-on='["opened","partial","closed","attention"]' data-fade-duration="fast" data-on-background-color="#667299" data-background-icon="none"></div-->
                <div data-type="pagebutton" data-url="#flur_content3.html" data-load="#flur_content3" data-active-pattern=".*#flur_content3.html" data-icon="oa-time_manual_mode" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
				<div data-type="pagebutton" data-url="#flur_content4.html" data-load="#flur_content4" data-active-pattern=".*#flur_content4.html" data-icon="oa-fts_shutter_automatic" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
                <div data-type="pagebutton" data-url="#flur_content5.html" data-load="#flur_content5" data-active-pattern=".*#flur_content5.html" data-icon="fa-phone" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
                <div data-type="pagebutton" data-url="#flur_content6.html" data-load="#flur_content6" data-active-pattern=".*#flur_content6.html" data-icon="oa-time_calendar" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
				<div data-type="pagebutton" data-url="#flur_content7.html" data-load="#flur_content7" data-active-pattern=".*#flur_content7.html" data-icon="fa-music" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
				<div data-type="pagebutton" data-url="#flur_content8.html" data-load="#flur_content8" data-active-pattern=".*#flur_content8.html" data-icon="fa-cogs" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
				<div data-type="pagebutton" data-url="#flur_content9.html" data-load="#flur_content9" data-active-pattern=".*#flur_content9.html" data-icon="fa-connectdevelop" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>
				<!--div data-type="pagetab" data-url="index_test.html" data-return-time="15" data-icon="fa-home" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div-->			
			</li>
            <li data-row="1" data-col="14" data-sizex="3" data-sizey="3" style="background-color:#3d445c;">
                <div data-type="clock" data-format="d.m.Y" class="right" style="font-family:'Comfortaa'; letter-spacing: 0.05em; font-weight: bold; margin-top:20px; margin-right:30px !important; font-size: 300% !important; font-weight: thin !important;"></div>
                <div class="right" style="margin-right:30px !important;">
                    <div data-type="clock" data-format="l" class="inline"></div>
                    <div data-type="label" data-device="di_Kalenderwoche" data-pre-text="(KW: " data-post-text=")" class="inline"></div>
                </div>
            </li>
            <!-- Ende Statusleiste oben -->
			
            <!-- Start Content-Seiten -->
            <li class="border-top-blue1" data-row="4" data-col="1" data-sizex="16" data-sizey="16">
                <div class="page" id="flur_content1"></div>
                <div class="page" id="flur_content2"></div>
                <div class="page" id="flur_content3"></div>
                <div class="page" id="flur_content4"></div>
                <div class="page" id="flur_content5"></div>
                <div class="page" id="flur_content6"></div>
				<div class="page" id="flur_content7"></div>
				<div class="page" id="flur_content8"></div>
				<div class="page" id="flur_content9"></div>
            </li>
            <!-- Ende Content-Seiten -->
            <!-- Start Menüleiste unten -->
            <li class="border-top-blue1" data-row="20" data-col="1" data-sizex="15" data-sizey="3" style="background-color:#3d445c;">
				<div class="center">
					<div data-template="flur_status_batterien.html"></div>								
					<div data-template="flur_status_garagentor.html"></div>					
					<div data-template="flur_status_fenster_tueren.html"></div>	
					<div data-template="flur_status_abfall.html"></div>							
					<div data-template="flur_status_anrufbeantworter.html"></div>
					<div data-template="flur_status_wetterwarnung.html"></div>
					<div data-template="flur_status_regen.html"></div>
					<div data-template="flur_status_klingel.html"></div>
					<div data-template="flur_status_verpasste_anrufe.html"></div>					
					<div data-template="flur_status_frost.html"></div>
					<div data-template="flur_status_ipcam_haustuer.html"></div>
					<!--div data-template="flur_status_test.html"></div-->					
					<!--div data-template="flur_status_fenster.html"></div-->
					<!--div data-template="flur_status_gaeste_wlan.html"></div-->
					<!--div data-template="flur_phone.html"></div-->					
				</div>
			</li>
			<!-- FTUI - Version -->
			<li class="border-top-blue1" data-row="20" data-col="16" data-sizex="1" data-sizey="3" style="background-color:#3d445c;">
                <div style="margin-top:45px; margin-right:0px !important; font-size: 160% !important">FTUI</div>
                <div style="margin-right:0px !important;" data-bind="ftui.version"></div>
            </li>			
            <!-- Ende Menüleiste unten -->
        </ul>
    </div>
</body>

</html>

Kuehnhackel · 02 Januar 2019, 18:17:06

Zitat von: moonsorrox am 02 Januar 2019, 13:27:08
Ich habe meiner kompletten FTUI Installation eine sogenannte Startseite davor gestellt welche ich auch aus Fhem heraus aufrufen kann.

Vorher hatte ich immer die Seite aufgerufen mit
Code Auswählen Erweitern
http://10.0.0.50:8083/fhem/ftui/index_flur.html

Nun habe ich eine index.html als eben diese Startseite auf der habe ich ein Pagebutton erstellt der mir meine bisherige FTUI Installation aufrufen soll
Der Pagebutton:
Code Auswählen Erweitern
<li data-row="7" data-col="8" data-sizex="2" data-sizey="10" style="background-color:transparent"> <div class="prefetch bigger" data-type="pagebutton" data-url="#index_flur.html" data-load="#index_flur" data-active-pattern="(.*/||.*index.html||.*#index_flur.html)" data-icon="fa-home" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-off-background-color="#47476b" data-fade-duration="fast" data-background-icon="none"></div> </li>

Das funktioniert gar nicht.. Egal was ich an bei den 3 Attributen einstelle er springt nicht zu meiner FTUI Seite
Code Auswählen Erweitern
data-url="#index_flur.html" data-load="#index_flur" data-active-pattern="(.*/||.*index.html||.*#index_flur.html)"

Wo ist jetzt mein Denkfehler, diese Startseite soll eigentlich immer der die 1. Seite sein, auf allen weiteren Seiten kommt dann ein Pagebutton der diese Startseite wieder aufruft, aber wenn das dorthin schon nicht klappt. Ich weiß grad nicht weiter..!

"Pagetab" habe ich auch schon ausprobiert aber da funktioniert das ganze nur einmal..!

EDIT:// hier noch die bisherige Datei "index_flur.html" die aufgerufen wurde:
Code Auswählen Erweitern
<!DOCTYPE html> <html> <head> <title>FHEM - Smart - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  <meta name="widget_margin" content="0">   <meta name="gridster_disable" content="1">   <meta name="longpoll_type" content="websocket">  <meta name="longpoll" content="1">  <meta name="debug" content="1">  <meta name="toast" content="0">  <meta name="lang" content="de"> <meta name='fade_time' content='0'>  <meta name="web_device" content="WEB">     <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-custom.css" /> <link rel="stylesheet" href="css/fhem-tablet-ui.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" /> <link rel="stylesheet" href="lib/fhemSVG.css" /> <link rel="stylesheet" href="lib/openautomation.css" /> <link rel="shortcut icon" type="image/x-icon" href="images/home.ico" /> <link rel="stylesheet" href="lib/font-awesome.min.css" /> <link rel="stylesheet" href="lib/fhemSVG.css" /> <link rel="stylesheet" href="lib/openautomation.css" />  <link rel="stylesheet" type="text/css" href="customfonts/mf1/style.css" />  <link rel="stylesheet" href="fonts/material/style.css" />   <link rel="stylesheet" href="css/fhem-tablet-ui-rene.css" /> <link rel="stylesheet" type="text/css" href="css/fhem-flur-ui.css" />  <script src="../pgm2/jquery.min.js"></script> <script src="lib/jquery.toast.min.js"></script> <script src="js/fhem-tablet-ui.js" defer></script> <style> </style> </head> <body style="overflow:hidden;"> <div id="background5" class="gridster"> <ul>  <li data-row="1" data-col="1" data-sizex="3" data-sizey="3" style="background-color:#3d445c;"> <div class="hbox"> <div class="cell" data-type="analogclock" data-size="125" data-body="none" data-dial="austria" data-dial-color="#ffffff" data-hour-color="#DC143C" data-minute-color="#DC143C" data-second-color="#0000ff" data-mbehave="ebounce" data-sbehave="ebounce"> </div> <div class="card" style="background-color:#3d445c"> <div class="vbox"> <div data-type="symbol" data-icon="oa-temp_outside" data-color="white"></div> <div class="fullsize" style="font-size:190%" data-type="label" data-device="di_average" data-get="state" data-limits="[-50,0,10,25,30,40]" data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit=" °C" data-fix="1"></div> </div> </div> </div>  </li> <li id="wohnen" data-row="1" data-col="4" data-sizex="10" data-sizey="3" class="center big"> <div data-type="pagebutton" data-url="#flur_content1.html" data-load="#flur_content1" data-active-pattern="(.*/||.*index_flur.html||.*#flur_content1.html)" data-icon="fa-home" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-off-background-color="#47476b" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content2.html" data-load="#flur_content2" data-active-pattern=".*#flur_content2.html" data-icon="oa-weather_cloudy" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>  <div data-type="pagebutton" data-url="#flur_content3.html" data-load="#flur_content3" data-active-pattern=".*#flur_content3.html" data-icon="oa-time_manual_mode" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content4.html" data-load="#flur_content4" data-active-pattern=".*#flur_content4.html" data-icon="oa-fts_shutter_automatic" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content5.html" data-load="#flur_content5" data-active-pattern=".*#flur_content5.html" data-icon="fa-phone" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content6.html" data-load="#flur_content6" data-active-pattern=".*#flur_content6.html" data-icon="oa-time_calendar" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content7.html" data-load="#flur_content7" data-active-pattern=".*#flur_content7.html" data-icon="fa-music" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content8.html" data-load="#flur_content8" data-active-pattern=".*#flur_content8.html" data-icon="fa-cogs" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div> <div data-type="pagebutton" data-url="#flur_content9.html" data-load="#flur_content9" data-active-pattern=".*#flur_content9.html" data-icon="fa-connectdevelop" data-off-color="white" data-on-color="crimson" data-on-background-color="#667299" data-fade-duration="fast" data-background-icon="none"></div>  </li> <li data-row="1" data-col="14" data-sizex="3" data-sizey="3" style="background-color:#3d445c;"> <div data-type="clock" data-format="d.m.Y" class="right" style="font-family:'Comfortaa'; letter-spacing: 0.05em; font-weight: bold; margin-top:20px; margin-right:30px !important; font-size: 300% !important; font-weight: thin !important;"></div> <div class="right" style="margin-right:30px !important;"> <div data-type="clock" data-format="l" class="inline"></div> <div data-type="label" data-device="di_Kalenderwoche" data-pre-text="(KW: " data-post-text=")" class="inline"></div> </div> </li>   <li class="border-top-blue1" data-row="4" data-col="1" data-sizex="16" data-sizey="16"> <div class="page" id="flur_content1"></div> <div class="page" id="flur_content2"></div> <div class="page" id="flur_content3"></div> <div class="page" id="flur_content4"></div> <div class="page" id="flur_content5"></div> <div class="page" id="flur_content6"></div> <div class="page" id="flur_content7"></div> <div class="page" id="flur_content8"></div> <div class="page" id="flur_content9"></div> </li>   <li class="border-top-blue1" data-row="20" data-col="1" data-sizex="15" data-sizey="3" style="background-color:#3d445c;"> <div class="center"> <div data-template="flur_status_batterien.html"></div> <div data-template="flur_status_garagentor.html"></div> <div data-template="flur_status_fenster_tueren.html"></div> <div data-template="flur_status_abfall.html"></div> <div data-template="flur_status_anrufbeantworter.html"></div> <div data-template="flur_status_wetterwarnung.html"></div> <div data-template="flur_status_regen.html"></div> <div data-template="flur_status_klingel.html"></div> <div data-template="flur_status_verpasste_anrufe.html"></div> <div data-template="flur_status_frost.html"></div> <div data-template="flur_status_ipcam_haustuer.html"></div>     </div> </li>  <li class="border-top-blue1" data-row="20" data-col="16" data-sizex="1" data-sizey="3" style="background-color:#3d445c;"> <div style="margin-top:45px; margin-right:0px !important; font-size: 160% !important">FTUI</div> <div style="margin-right:0px !important;" data-bind="ftui.version"></div> </li>  </ul> </div> </body> </html>

Teste einfach mal einen reinen HTML-Befehl, ohne schnick-schnack

Code Auswählen

<a href="deineSeite.html"><div data-type="symbol" data-icon="fa-home" data-background-icon="fa-circle" data-background-color="#ffffff"></div></a>

moonsorrox · 02 Januar 2019, 18:50:41

Super und vielen Dank für diesen Denkanstoß....

Oh, je wie einfach es doch sein kann... $:-\$
Ich bin total festgefahren und wohl auch abgefahren mit "Pagetab" und "Pagebutton"

Mit einer return Zeit geht er dann auch wieder auf die index.html zurück

FHEM Forum

Komplettes FTUI erstellt und nun eine Startseite davor..?

moonsorrox

Kuehnhackel

moonsorrox