Evaluierungsversion 2.2

Helmi55 · 03 April 2016, 22:25:27

sorry kenn mich da noch zu wenig aus - wo und wann finde ich den fix
Herzlichen Dank und nice eve

setstate · 03 April 2016, 22:52:57

Sorry, ja bis jetzt nur bei Github im Branch "version2.1" alles verfügbar

Helmi55 · 04 April 2016, 09:11:35

Guten Morgen,
hab mir jetzt vom Link im ersten Post die Version nochmals gezogen und kopiert - leider ohne Erfolg.
Thermostat Werte passen noch immer nicht - kann natürlich sein dass ich die falsche Version gezogen habe oder stimmt der Link?

Ich dachte auch mit dieser Version 2.1 sind die Anzeigen Probleme mit iPad und Android auch Geschichte?
Ich bekomme nur eine saubere Darstellung auf iMac mit Safari?

??

Hilft hier wirklich nur der weg über Apache???

Schöne Woche an alle - hoffe ihr helft mir weiter - Danke
LG
Helmut

Helmi55 · 04 April 2016, 12:59:14

So sieht meine index.html nun aus?

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.1.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_dev' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_dev
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_dev Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_dev/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="138">
    <meta name="widget_base_height" content="155">
    <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="shortpoll-interval" content="900">
    <meta name="shortpoll-only-interval" content="30">
    <meta name="longpoll-delay" content="5"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/fhemSVG.css" />


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="/fhem/tablet_dev/css/fhem-tablet-ui-user.css" / -->

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet_dev/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet_dev/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet_dev/js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>

sollte so passen oder habe ich was übersehen?

Danke
Helmut

fhainz · 04 April 2016, 17:14:00

Hallo Helmut,

Link: https://github.com/knowthelist/fhem-tablet-ui

Anschließend klickst du auf das Dropdown "Branch: master" und stellst auf "version2.1" um. Rechts findest du nun den "Download ZIP" Button.

@setstate
Ich vermute im thermostat Widget gibt es noch einen Bug. Sollte die Zeile 115 nicht so aussehen?

Code Auswählen

me.elements=$('div[data-type="'+me.widgetname+'"]',this.area);

Ohne this.area werden bei mir manche Thermostate doppelt (nebeneinander, nach herumklicken) dargestellt.

Grüße

Edit:
Ich hab gestern noch das level Widget umgebaut und dem ganzen noch einen title Tag spendiert (Zeile 128) damit per mouse hover der aktuelle wert angezeigt wird.

setstate · 04 April 2016, 18:07:45

Bei dem Bug hast du Recht. Das fällt auf, wenn man Thermostat auf zwei Unterseiten gleichzeitig nutzt. Das muss ich noch ändern.

Das Level Widget hatte ich gestern auch schon umgestellt.

Aber Danke fürs Engagement.
Es sind noch ein paar "Exoten" offen, die ich selbst nicht nutze und auch nicht testen kann, wie Readinggroups und gds.

Helmi55 · 04 April 2016, 18:12:48

Hallo fheinz (alter Bekannter! und treuer Helfer! - Danke)
Werde es so versuchen - Danke
Was aber trotzdem noch nicht mein Problem mit der Darstellung auf verschiedenen Endgeräten löst.
Gruß
Helmut

setstate · 04 April 2016, 20:33:49

Zitat von: Helmi55 am 04 April 2016, 09:11:35
Ich dachte auch mit dieser Version 2.1 sind die Anzeigen Probleme mit iPad und Android auch Geschichte?
Ich bekomme nur eine saubere Darstellung auf iMac mit Safari???

Hilft hier wirklich nur der weg über Apache???

Nur weil es eine größere Änderung ist, kann es nicht gleich alle Probleme lösen, die es gibt.

Dann müsste ich alle Ursachen kennen und die idealen Lösungen wissen.

Was wird nicht sauber dargestellt? Ich habe es gerade auf unserem iPad getestet, läuft alles soweit (Version 9.0.2).
Der Weg über Apache wäre mir zu viel Aufwand, ich würde immer nach der primären Ursache suchen und diese abstellen. Ist aber leider ist Ferndiagnose immer ganz ganz schwierig...

ulli · 04 April 2016, 21:54:56

Bei mir funktioniert aktuell weder der longpoll noch der shortpoll...es werden die Anzeigedaten nie aktualisiert, außer durch einen browser refresh.
Habt ihr auch das problem?

setstate · 04 April 2016, 22:30:22

Das klingt nach einem Fehler in der Ausführung und das Verhindern der normalen Abarbeitung. Was sagt die Console, da muss es eine Exception geben.

Helmi55 · 05 April 2016, 08:56:11

Servus und guten Morgen
mit Darstellungsproblem meinte ich dass ich andere Werte zwischen meinem iMac (10.11.3) mit Safari. dem Samsung Galaxy Tab (4.4) und meinem iPad 4 (9.3.1) habe.
FHEM selbst funktioniert tadellos. Ich hänge mal Screenshots an plus der index.html meiner _dev Umgebung

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.1.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_dev' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_dev
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_dev Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_dev/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="138">
    <meta name="widget_base_height" content="155">
    <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="shortpoll-interval" content="900">
    <meta name="shortpoll-only-interval" content="30">
    <meta name="longpoll-delay" content="5"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet_dev/lib/fhemSVG.css" />


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="/fhem/tablet_dev/css/fhem-tablet-ui-user.css" / -->

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet_dev/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet_dev/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet_dev/js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>
  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type="" 	        	  	     
        </div>                      
        <div data-type="label" class="bold"></div>
</li>

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type=""
        </div>                      
        <div data-type="label" class="bold"></div>
</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="PoolMaster"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-power-off"
             data-background-colors='["red","green"]'
             class="bigger" >
       </div>  
       <div data-type="label" class="bold">Pool Master</div>
</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="PoolPumpe"     	 
	         data-set-on="off"
             data-set-off="on"
	         data-get-on='["off","on"]'
             data-icon="fa-power-off"
             data-background-colors='["red","green"]'
             class="bigger" >
       </div>  
       <div data-type="label" class="bold">Pool Pumpe</div>
</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
		     data-device="SolarPumpe"   
	         data-set-on="off"
	         data-set-off="on"
	         data-get-on='["off","on"]'
	         data-icon="fa-power-off"
	         data-background-colors='["red","green"]'
             class="bigger" >
        </div>   
        <div data-type="label" class="bold">Solar Pumpe</div>
</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
	    	 data-device="Abend"
       	     data-set-on="off"
       	     data-set-off="on"
             data-get-on='["off","on"]'
	         data-icon="fa-power-off"
	         data-background-colors='["red","green"]'
             class="bigger" >
        </div>
        <div data-type="label" class="bold">Abend</div>
</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
        <header class="cell" > </header>
        <div data-type="switch"
       	 	 data-device="Chlor_Schalter"
       	     data-set-on="off"
       	     data-set-off="on"
       	     data-get-on='["off","on"]'
       	     data-icon="fa-power-off"
       	     data-background-colors='["red","green"]'
             class="bigger" >
        </div>      
        <div data-type="label" class="bold">Chlor Schalter</div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>Roboter</header>
<div class="row top-space">
	<div class="col-1-4">
		<div data-type="switch"
			data-device="Roboter"
			data-set-on="on"
			data-set-off="off"
			data-get-on="on"
			data-get-off="off"
			data-icon="fa-power-off"
			data-on-background-color="green"
			data-off-background-color="red"
			class="small">
		</div>
		<div data-type="label"
			class="">&nbsp;Auto
		</div>
	</div>
	<div class="col-2-4">&nbsp;
	</div>
</div>
<div class="row">
	<div class="col-2-4">&nbsp;
	</div>
	<div class="col-1-4">
		<div data-type="symbol"
			data-device="Roboter_sw4"
			data-get-on="on"
			data-get-off="off"
			data-icon="fa-gear"
			data-on-color="green"
			data-off-color="red"
			class="small">
		</div>
		<div data-type="label"
			class="">Status
		</div>
	</div>
</div>
</li>


<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>Garagentor</header>
        <div data-type="symbol" data-device="GaragenTor" 
             data-get-on='["Offen","Zu"]' 
             data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100"]' 
             data-on-colors='["red","green"]'
             class="bigger" >      
        </div>
        <div data-type="label" data-device="GaragenTor"
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <header class="cell" >Ladezustand %</header> 
        <br/>   
        <div data-type="label"       
             data-device="Tablet"
             data-get="powerLevel"
             class="big cell" data-part="1" data-unit="">
        </div>                   
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
        <header>Pool °C</header>
        <div data-type="thermostat" 
             data-device="PoolSensor"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
        <header>Solar °C</header>
        <div data-type="thermostat"
             data-device="SolarSensor"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
        <header>Luft °C</header>
        <div data-type="thermostat" 
             data-device="LuftTemp_Telefonmast"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
        <header>SolarDiff</header>   
        <div data-type="label"  
             data-device="SolarDiff"
             data-get="STATE" 
             data-fix="1"
             data-unit="%B0C%0A" 
             class="big">
        </div>  
        <br/>
        <header>Hysterese</header>
        <div data-type="label"
             data-device="Hysterese"
             data-get="STATE" 
             data-unit="%B0C%0A" 
             class="big">
        </div> 
</li>

<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
        <header class="cell">pH - Wert</header>
        <br/>
        <div data-type="label"
		     data-device="Hysterese"
		     data-get="STATE"     
    	     data-limits='[5,6.9,7.4]'
  	         data-colors='["orange","green","red"]'  
             class="bigger">
        </div>  
</li>

<li data-row="2" data-col="8" data-sizex="1" data-sizey="1">
        <header>Garage °C</header>
        <div data-type="thermostat" 
             data-device="Garage"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>     
</li>



<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type="switch"
		     data-device="Gartenbeleuchtung"
       	     data-set-on="on"
       	     data-set-off="off"
       	     data-get-on="on.*"
       	     dta-get-off="off"    
       	     data-on-background-color="green"
       	     data-off-background-color="red"
             class="bigger" >
        </div>    
        <div data-type="label" class="bold">Gartenlicht</div>
</li>

<li data-row="3" data-col="4" data-sizex="2" data-sizey="1"> 
	    <header>St. Andrä-Wördern</header>
	    <div class="cell center">
	    <h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/de/city/2761369"></h2><iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=de&timezone=Europe%2FVienna" width="100%" height="130" frameborder="0" seamless></iframe></a>
	    </div>
</li>

<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
        <header class="cell" ></header>
        <div data-type="switch"
		     data-device="SolarPumpe"
       	     data-set-on="on"
       	     data-set-off="off"
       	     data-get-on="on.*"
       	     dta-get-off="off"    
       	     data-on-background-color="green"
       	     data-off-background-color="red"
             class="bigger" >
        </div>   
        <div data-type="label" class="bold">Poollicht</div>
</li>

<li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
        <header>TechnikPool °C</header>
        <div data-type="thermostat"
             data-device="Technik_Pool"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="4" data-col="8" data-sizex="1" data-sizey="1">
        <header>Abstellraum °C</header>
        <div data-type="thermostat" 
             data-device="Abstellraum"
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>

<li data-row="5" data-col="2" data-sizex="6" data-sizey="2">
        <header></header> 
        <div data-type="svgplot"
             data-device="SVG_FileLog_PoolSensor_1"
             data-gplotfile="SVG_FileLog_PoolSensor_1"
             data-logdevice="FileLog_PoolSensor"
             data-logfile="CURRENT"
             data-refresh="300">
        </div>
</li>

<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">
        <header>Brunnen °C</header>
        <div data-type="thermostat"
             data-device="Brunnen" 
             data-get="temperature" data-temp=""
             data-min="-10" data-max="60" data-step=".1" data-unit=""
             class="readonly top-space">
        </div>
</li>          
        </ul>
    </div>

</body>
</html>

Hoffe jemand bring Licht ins Dunkel
Herzlichen Dank
Helmut

HoTi · 05 April 2016, 12:22:10

Leider kann ich nihct bestätigen das alles mit der 2.1 genau so funktioniert wie bei der 1.1.

Ich nutze das CSS von h3llsp4wn der es freundlicher weise in der Demo zu Verfügung gestellt hat. https://forum.fhem.de/index.php/topic,37378.msg415211.html#msg415211

Ich vermute das ich die CSS anpassen muss. Aber was genau muss ich da anpassen zur 2.1??

Die Demoseite funktiniert!

h3llsp4wn · 05 April 2016, 19:11:56

Hi,

Sieht eher nach FHEM aus, was da aufgerufen wird. Das CSS hatmeine ich keine großen Änderungen. Checke ich aber gerne, wenn ich morgen wieder im Lande bin.

Cheers,

h3ll

ulli · 05 April 2016, 21:18:20

Zitat von: setstate am 04 April 2016, 22:30:22
Das klingt nach einem Fehler in der Ausführung und das Verhindern der normalen Abarbeitung. Was sagt die Console, da muss es eine Exception geben.

Ich habe noch einmal genauer hin geschaut...ich musste feststellen das der longpoll doch funktioniert und leider nur der shortpoll auf dem Tablet nicht geht.
Auf der Konsole auf meinem Laptop werden keine Fehler angezeigt und der Shortpoll scheint dort auch zu funktionieren.

Kann es sein das der Shortpoll am Tablet mit Fully einfach nur nicht funktioniert? Hat die Kombination evtl. wer anders auch im Einsatz?

setstate · 05 April 2016, 23:26:19

Damit der Link aus dem FHEMWEB funktioniert, muss noch ein "/" angefügt werden. Also ftui_eval/ anstatt ftui_eval

Code Auswählen

define TABLETUIEVAL HTTPSRV ftui_eval/ ./www/tablet_eval Tablet-EVAL