[Tablet UI] Ausgewählte Menüpunkte einfärben ohne Menüdopplung

Gunther · 18 November 2015, 13:09:38

Gibt es eine Möglichkeit Menüs mit mehreren Einträgen dazu zu bringen den jeweils ausgewählten Menüpunkt einzufärben, ohne dass ich x html-files erstellen muss?

Im Anhang habe ich das Menü einmal dargestellt.
Funktionsweise:
Klick links auf "Räume"
Dann wählt man rechts die Etage aus. Diese möchte ich gerne nach Klick z. B. Gelb oder blinkend dargestellt haben.
Dann erscheinen oben die Räume der jeweiligen Etage. Wenn ich dort nun auf einen Raum klicke erscheint im Hauptfenster der Raum.
Nun soll Etage und der jeweilige Raum-Button hervorgehoben sein.

Mit meinem Aufbau ginge das nur, wenn ich die html-Dateien mehrfach ablege und verlinke. Das ist natürlich deutlich pflegeintensiver bei Änderungen.
Gibt es da eine geschicktere Möglichkeit?

Hier eine genauere Beschreibung:

Der Code zum Ergeschoss-Screenshot sieht so aus:

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/
	 */
	-->
	<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="144">
	<meta name="widget_base_height" content="112">
	<meta name="widget_margin" content="2">
	<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="0"> <!-- 1=output to console;0=not output -->
	<meta name='gridster_disable' content='1'>
	
	<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/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/tablet/eigenefonts/gk/style.css">
	<link rel="stylesheet" href="./css/wopr.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/own.css">
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
	<script type="text/javascript" src="/fhem/tablet/js/widget_calview.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 = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->

</head>
<body>

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

<div class="gridster">
<ul>
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_homebutton.html"></li>

<!-- ========= Linkes-Hauptmenü =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_left_main.html"></li>

<!-- ========= Rechtes-Hauptmenü ========== -->
<!-- ========= Räume Keller, Aussen, Dach ========== -->
<li data-row="2" data-col="7" data-sizex="1" data-sizey="4" data-template="menu_right_etagen.html"></li>


<!-- ====================================== -->
<!-- ====================================== -->
<!-- =========== Hauptbereich ============ -->
<!-- ====================================== -->
<!-- ====================================== -->

<!-- ====================================== -->
<!-- ========= Zeile 1 beginnend ========== -->
<!-- ====================================== -->

<!-- ============= Uhrzeit ================ -->
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1" data-template="inc_uhr.html"></li>

<!-- ====================================== -->
<!-- ========= oberes Hauptmenü  ========== -->
<!-- ====================================== -->

<!-- ============= Räume EG ================ -->
<li data-row="1" data-col="3" data-sizex="4" data-sizey="1" data-template="menu_upper_rooms_eg.html"></li>

<!-- ====================================== -->
<!-- ========= Zeile 2 beginnend ========== -->
<!-- ====================================== -->

<!-- ============= Haus generell  ================== -->
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">

</div>

</li>
</li>
</ul>
</div>
</body>
</html>

nun müsste ich das File menu_right_etagen.html 4 Mal ablegen.

Das sieht übrigens so aus:

Code Auswählen

        <header>Etagen</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="rooms_dg.html" data-icon="oa-control_building_s_dg" class="cell small"></div>
        <div data-type="label" class="narrow darker">Dach</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="rooms_og.html" data-icon="oa-control_building_s_og" class="cell small"></div>
        <div data-type="label" class="narrow darker">OG</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="rooms_eg.html" data-icon="oa-control_building_s_eg" class="cell small"></div>
        <div data-type="label" class="narrow darker">EG</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="rooms_kg.html" data-icon="oa-control_building_s_kg" class="cell small"></div>
        <div data-type="label" class="narrow darker">Keller</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="rooms_aussen.html" data-icon="oa-control_building_outside" class="cell small"></div>
        <div data-type="label" class="narrow darker">Aussen</div>

Das Menü oben mit den Räumen (menu_upper_rooms_eg.html) schaut so aus:

Code Auswählen

        <header>Räume Erdgeschoss</header>            
    <div class="inline">
      <div data-type="button" data-color="#aa6900" data-url="raum_eg_kino.html" data-icon="oa-scene_scene" ></div>
      <div data-type="label" class="darker" >Kino</div>
    </div>
     <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_wintergarten.html" data-icon="oa-scene_day" ></div>
      <div data-type="label" class="darker">Wintergarten</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_essen.html" data-icon="oa-scene_dinner" ></div>
      <div data-type="label" class="darker" >Essen</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_gaeste_wc.html" data-icon="oa-scene_toilet_alternat" ></div>
      <div data-type="label" class="darker" >Gäste WC</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_bad.html" data-icon="oa-scene_bath" ></div>
      <div data-type="label" class="darker" >Bad EG</div>
    </div>
    <div class="inline">     
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_flur.html" data-icon="oa-scene_keyboard" ></div>
      <div data-type="label" class="darker" >Flur EG</div> 
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_kueche.html" data-icon="oa-scene_cooking" ></div>
      <div data-type="label" class="darker" >Küche</div>   
    </div>
    <div class="inline">     
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_buero.html" data-icon="gk-oculusconcept" ></div>
      <div data-type="label" class="darker" >Büro</div> 
    </div>

Nun habe ich vor, wenn ich z. B. den Raum Kino auswähle (raum_eg_kino.html), dass ich in diesem html eine Verlinkung zum speziellen Menü machen muss, in dem der Raum Kino hervorgehoben ist. Also nicht generisch menu_upper_rooms_eg.html sondern menu_upper_rooms_eg_kino.html.
Und das natürlich für alle Räume.

Gunther · 20 November 2015, 01:59:05

Hat noch wer von Euch eine Idee dazu?

Gunther · 29 November 2015, 13:46:50

Ich hole das nochmal hoch...

setstate · 30 November 2015, 07:26:49

Das kann man doch mit 3-4 Menüs bauen:
- haus.html

Code Auswählen

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagebutton" data-url="etage1.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagebutton" data-url="etage2.html" data-icon="fa-music" class="top-space"></div>
        <div data-type="pagebutton" data-url="etage3.html" data-icon="fa-sliders" class="top-space"></div>
        <div data-type="pagebutton" data-url="etage4.html" data-icon="fa-lightbulb-o" class="top-space"></div>
    </div>
</body>
</html>

- und x etage*.html

Code Auswählen

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagebutton" data-url="raum1.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagebutton" data-url="raum2.html" data-icon="fa-music" class="top-space"></div>
        <div data-type="pagebutton" data-url="raum3.html" data-icon="fa-sliders" class="top-space"></div>
        <div data-type="pagebutton" data-url="raum4.html" data-icon="fa-lightbulb-o" class="top-space"></div>
    </div>
</body>
</html>

- das setzt man links (haus.html) und oben (etage*.html) per Template auf jeder Seite

Code Auswählen


            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="haus.html"></li>

Farbig ist dann aber immer nur der Pagebutton der aktuellen Seite. Nicht der der Etage. Diese Matrix Funktion ist nicht möglich. Wäre aber mit den richtigen Filenamen etage1_raum2.html und einer kleinen Anpassung im Pagebutton bezüglich des Namenvergleiches möglich.

FHEM Forum

[Tablet UI] Ausgewählte Menüpunkte einfärben ohne Menüdopplung

Gunther

Gunther

Gunther

setstate