menuaufbau mit ftui 2.2.

pcjogi · 05 August 2016, 19:27:01

Hallo zusammen,

ich brauche Hilfe!

ich versuche schon seit einiger Zeit eine sinnvolle Menüstruktur aufzubauen, finde aber anscheinend nicht den richtigen Weg. Mir schwebt folgendes vor:

- Ein Menu auf der linken Seite, bestehend aus drei Teilen (Home, die eigentlichen Menüs und ein Circlemenü für Systemaufgaben. -> Das bekomme ich mit folgendem Code hin:

Index.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.0
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
	<title>CARL-SPITZWEG (Pilot)</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="40">
	<meta name="widget_base_height" content="38">
	<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="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
    <meta name="gridster_disable" content="1">
	<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="lib/powerange.min.css" />
    <link rel="stylesheet" href="lib/openautomation.css" />
    <link rel="stylesheet" href="customfont/style.css" /> 	
 <!--	<link rel="stylesheet" href="css/fhem-tablet-ui-jogi.css" /> 	-->
	<script type="text/javascript" src="../pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="lib/powerange.min.js"></script>
	<script type="text/javascript" src="lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="js/fhem-tablet-ui.js"></script>

	
	<!-- Enable this lines for usage with WebViewControl 
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'523931': 'webtablet_test'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->
</head>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<body>
	<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="2" data-sizey="2" data-template="menu_home.html" class="verticalLine "></li>
		<li data-row="5" data-col="1" data-sizex="2" data-sizey="11" data-template="menu_index.html" class="verticalLine"></li>
	</ul>
	</div>
</body>
</html>

Der Homebutton lädt wieder die index.html. -> das funktioniert

Beim Klick auf einem der Menübuttons soll dann die rechte Seite entsprechend geladen werden.

Muss ich hierfür auch in den Untermenüs vergleichbar der index.html immer den ganzen css Teil laden oder geht das auch ressourcenschonender.
Do funktioniert es jedenfalls nicht

menu_index.html

Code Auswählen

<html>
<body>
	<header></header>
		<div class="">
			<div data-type="pagebutton" data-url="content_verkehr.html" 	data-icon="fa-car" 			class=""></div>
			<div data-type="pagebutton" data-url="content_heizung.html" 	data-icon="oa-sani_heating"	class=""></div>
			<div data-type="pagebutton" data-url="content_wetter.html" 		data-icon="fa-sun-o"		class=""></div>
			<div data-type="pagebutton" data-url="content_tv.html" 			data-icon="fa-television"	class=""></div>
			<div data-type="pagebutton" data-url="content_kalender.html" 	data-icon="fa-calendar"		class=""></div>
			<div data-type="pagebutton" data-url="content_multimedia.html"	data-icon="fa-music"		class=""></div>
			<div data-type="pagebutton" data-url="content_leer.html"		data-icon="ftuitest"		class=""></div>
			<div data-type="pagebutton" data-url="content_leer.html"		data-icon="fa-wrench"		class=""></div>
		</div>
</body>
</html>

Bin zwar IT-Profi, aber HTML Laie

Vielen Dank

Muss ich dafür in den dann in

chris1284 · 05 August 2016, 19:54:06

pagebutton ist doch in der eval2.2 sehr gut durch die index_page_demo.html gut erklärt!
wenn du da einfach der definiton folgst kannst du dir auch anschauen wie die sites aufgebaut sind (page_content1.html, page_content2.html, page_content3.html)

FHEM Forum

menuaufbau mit ftui 2.2.

pcjogi

chris1284