Tablet UI: Probleme mit switch im Internet Explorer

Thorsten Pferdekaemper · 10 Dezember 2015, 23:33:14

Hi,
seit Kurzem haben meine "switch" Widgets im Tablet UI ein Problem. Wenn ich die Seite im IE lade, dann funktioniert jeder Knopf genau zweimal. Danach ändert sich zwar der Zustand auf dem UI, aber nicht mehr außerhalb davon. D.h. weder meine Lampen noch FHEM bekommt davon was mit. Erst wenn ich den Browser komplett schließe und dann wieder auf die Seite gehe funktioniert es wieder. ...aber eben nur zweimal pro switch.
Andere Widgets haben das Problem nicht. Auch scheint es mit Chrome nicht zu passieren. Ich habe auch eine Version des Tablet-UI über einen Apache2 laufen, da geht auch alles. Erstaunlicherweise gibt es auch keine Probleme, wenn die "F12 Entwicklertools" aktiviert sind. Man kann durch Aktivieren der Entwicklertools das Tablet-UI sogar aus dem fehlerhaften Zustand holen.
Hier ist meine index.html:

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=10.0, user-scalable=yes" />
	<meta name="widget_base_width" content="50">
	<meta name="widget_base_height" content="50">
	<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 -->
	
	<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" />
	
	
	<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>
	
	<!-- 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>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel1"
                     data-set="channel1"
                </div>
		</li>
		<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel2"
                     data-set="channel2"
                </div>
		</li>
		<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel3"
                     data-set="channel3"
                </div>
		</li>
		<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel4"
                     data-set="channel4"
                </div>
		</li>
		<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel5"
                     data-set="channel5"
                </div>
</li>
		<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel6"
                     data-set="channel6"
                </div>
		</li>
		<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel7"
                     data-set="channel7"
                </div>
		</li>
		<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="whiteControlAll" 
                     data-get="channel8"
                     data-set="channel8"
                </div>
		</li>

<li data-row="2" data-col="1" data-sizex="3" data-sizey="3">
  <header>HELLIGKEIT</header>
    <div data-type="volume" class="cell dim-back" 
         data-device="whiteControlAll" 
         data-step="1" 
         data-get="value" 
         data-set="value" 
         data-min="0" 
         data-max="255" 
         ></div> 
</li>
              <li data-row="2" data-col="4" data-sizex="6" data-sizey="3">
                 <div class="center big top-space">
                       WEISS
                 </div>
		</li>



<!-- RGB part -->

		<li data-row="5" data-col="1" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="hsvControlAll" 
                     data-get="rgb1"
                     data-set="rgb1"
                </div>
</li>
		<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="hsvControlAll" 
                     data-get="rgb2"
                     data-set="rgb2"
                </div>
    		</li>
		<li data-row="5" data-col="3" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="hsvControlAll" 
                     data-get="rgb3"
                     data-set="rgb3"
                </div>
                </li>
                <li data-row="5" data-col="4" data-sizex="1" data-sizey="1">
                <div data-type="switch" 
                     data-device="hsvControlAll" 
                     data-get="rgb4"
                     data-set="rgb4"
                </div>
		</li>
               <li data-row="5" data-col="5" data-sizex="5" data-sizey="1">
                 <div class="center big top-space">
                       RGB
                 </div>
		</li>



<li data-row="6" data-col="1" data-sizex="3" data-sizey="3">
  <header>HELLIGKEIT</header>
    <div data-type="volume" class="cell dim-back" 
         data-device="hsvControlAll" 
         data-step="1" 
         data-get="value" 
         data-set="value" 
         data-min="0" 
         data-max="100" 
         ></div> 
</li>
<li data-row="6" data-col="4" data-sizex="3" data-sizey="3">
     <header>FARBE</header>
     <div data-type="volume" class="cell hue-back" 
         data-device="hsvControlAll" 
         data-get="hue" 
         data-set="hue" 
         data-min="0" 
         data-max="360" 
         ></div> 
</li>
<li data-row="6" data-col="7" data-sizex="3" data-sizey="3">
     <header>S&Auml;TTIGUNG</header>
     <div data-type="volume" class="cell dim-back" 
         data-device="hsvControlAll" 
         data-get="saturation" 
         data-set="saturation" 
         data-min="0" 
         data-max="100" 
         ></div> 
</li>

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

Im Anhang sieht man, wie das Ding aussieht. Nur die switch Widgets haben das Problem, die volume Widgets sind nicht betroffen.
Gruß,
Thorsten

moelski · 13 Dezember 2015, 10:04:06

Moin !

Ich schließe mich hier mal an ...
Nutze ein thermostat widget um bei einem Dummy einen Wert zu schreiben. Im Firefox geht es super. Im IE11 nur ab und an.
Ist eher Zufall wann es mal geht und wann nicht.

ZitatErstaunlicherweise gibt es auch keine Probleme, wenn die "F12 Entwicklertools" aktiviert sind.

Das kann ich auch bestätigen. Mit Entwicklertools ist alles super. $:-\$

Dominik

FHEM Forum

Tablet UI: Probleme mit switch im Internet Explorer

Thorsten Pferdekaemper

moelski