[FHEM-Tablet-UI] User-Demos

eki · 20 November 2015, 20:22:39

Das mit den unterschiedlichen Logdevices sollte so gehen, da habe ich set der letzten freigegebenen Version nichts mehr geändert. Ich schau's mir mal an.

Die Versionen, die ich zwischenzeitlich verteilt habe, waren ja eher Tests fuer einzelne Verbesserungen. Ich bin gerade dabei, das alles zusammen zu packen und noch mal ein bisschen zu testen. Anfang der Woche sollte ich dann was haben.

MichaelT · 23 November 2015, 18:44:53

Hallo eki,

hatte mich noch gar nicht gemeldet. Bei mir ist der gleiche Effekt wie bei Daniel_k: Ich muss die restliche Graphen aktivieren, dann gehts.

Gruß und Danke
Michael

Depechem · 23 November 2015, 21:36:11

Hallo an alle.

Ich bin relativ neu beim fhem und bastel gerade am "Tablet-UI"
Könntet ihr mir evtl. helfen, indem ihr mir genau erklären könnt wie ich Wetterdaten z.b.: Proplanta ins UI angezeigt bekomme!?
Also von allen befehlen im fhem bis hin zu dem Quellcode in der UI index.htm (Commandref habe ich bereits gelesen aber komme nicht so richtig weiter)
Die Wetterausgabe bei chris1284 finde ich prima. http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=35125;image

ich hoffe ihr könnt mir weiterhelfen.

Vielen Dank im voraus
Gruß Thomas

setstate · 23 November 2015, 22:48:03

Hallo Thomas,

in der fhem.cfg definiert man es so:

Code Auswählen


define AgroWeather PROPLANTA Dresden
attr AgroWeather alias Proplanta Wetter Dresden
attr AgroWeather room Garten

Wenn man dann im FHEMWEB die unzähligen Reading sieht, kann man beginnen, im FTUI sich die Werte zu holen.

Code Auswählen


<li data-row="3" data-col="11" data-sizex="2" data-sizey="7">
        <header>WETTER</header>
        <div data-type="label" data-device="OutTemp" data-part="2" data-limits='[-73,10,23]' data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="%B0C%0A" class="bigger thin"></div>
        <div data-type="label" class="cell">Außentemperatur</div>
        <div data-type="label" class="cell darker top-space">Heute</div>
        <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="cell big"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="cell top-narrow"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-unit="%B0C%0A" class="inline large darker top-narrow-10"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
        <div data-type="label" class="cell darker top-space">Morgen</div>
        <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="cell big"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class="cell top-narrow"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMin" data-unit="%B0C%0A" class="inline large darker ‎top-narrow-10"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
        <div data-type="label" class="cell darker top-space">Übermorgen</div>
        <div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="cell big"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc2_weatherDay" class="cell top-narrow"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc2_tempMin" data-unit="%B0C%0A" class="inline large darker top-narrow-10"></div>
        <div data-type="label" data-device="AgroWeather" data-get="fc2_tempMax" data-unit="%B0C%0A" class="inline large top-narrow-10"></div>
</li>

Depechem · 24 November 2015, 12:16:35

super vielen Dank jetzt komme ich ein Stück weiter

SirUli · 24 November 2015, 21:05:40

Zitat von: eki am 19 November 2015, 12:53:37
@SirUli: Ich habe jetzt mal eine Version hier angehängt, die hoffentlich das Problem nicht mehr hat. Kannst Du damit bitte mal bei Dir testen, damit ich das dann demnächst freigeben kann.

Viiiiel Besser. Jetzt springt es nur noch, wenn das Chart keine weiteren Werte anzeigt (also z.B. für morgen). Dann wird das Chart schmaler, Höhe bleibt die gleiche - aber das stört mich nicht so

Sehr cool, vielen Dank!!!

Icinger · 25 November 2015, 20:50:36

Hi,

bin auch grad dabei, meine TabletUI zusammenzubasteln.

Habe mir dabei ein wenig von Harry66's Layout abgesehen, scheitere jetzt aber an einem Problem mit dem Rotor-Widget:

Wenn ich nur EIN Weather-Icon (zB fc0_weatherDay) anzeigen lasse, ist das mit dem Text zusammen schön mittig zentriert.
Binde ich das aber in ein Rotor-Widget ein, um morgens, tagsüber, abends und nacht anzeigen zu lassen, ist das Icon und der Text nach unten verschoben.

Ich komm leider nicht drauf, warum. Hat jemand ne Idee dazu?

Hier erstmal der Code des ganzen Gridster-Objekts (Rotor aktiv, einzelnes weatherDay auskommentiert)

Code Auswählen

<li data-row="1" data-col="2" data-sizex="6" data-sizey="4" class="semitransparent">
            <header>                Wetter in Göllersdorf            </header>
<table border="0px" width="100%">       
  <tr>
    <td class="A2"><div data-type="label"
             data-device="ProPlanta"
             data-get="fc0_date"></div></td>

    <td class="B2"><center><div data-type="label" class="inline small"><big>↑</big><small> Sonne:</small><br></div>
     <div data-type="label"
             data-device="myTwilight"
             data-get="sr_civil"></div></center></td>
    <td class="C2"><center><div data-type="label" class="inline small"><big>↓</big><small> Sonne:</small><br></div>
    <div data-type="label"
             data-device="myTwilight"
             data-get="ss_civil"></div></center></td>
    <td class="D2"><center><div data-type="label" class="inline small"><small>Sichtweite:</small><br></div>
                    <div data-type="label"
                            data-device="ProPlanta"
                            data-get="visibility"
                            data-unit=" km"></center></td>
   
  </tr>
  <tr>
    <td class="tg-031e"><div data-type="label"><small>Temp<br></small></div>
        <center><div data-type="label"
                            data-device="Temp_Aussen"
                            data-get="temperature"
                            data-limits="[-50,0,10,25,30,40]"
                            data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
                            data-unit="%B0C%0A"
                            class="inline cell big"></div></center></td>
    <td class="tg-031e" colspan="2" rowspan="2">
<!--     		       <div data-type="weather"
		             data-device="ProPlanta"
		             data-get="fc0_weatherDay"
		             data-imageset="kleinklima"
		             style="font-size:250%">
		        </div>
		        Tagsüber:&nbsp
		        <div data-type="label"
		             data-device="ProPlanta"
		             data-get="fc0_weatherDay"
		             class="inline">
		         </div>
     -->
       <div data-type="rotor" class="fade semitransparent">
       <ul>
 		<li>
		       <div data-type="weather"
		             data-device="ProPlanta"
		             data-get="fc0_weatherMorning"
		             data-imageset="kleinklima"
		             style="font-size:250%">
		        </div>
		        Morgens:&nbsp
		        <div data-type="label"
		             data-device="ProPlanta"
		             data-get="fc0_weatherMorning"
		             class="inline">
		         </div>
			</li>
 			<li>
		       <div data-type="weather"
		             data-device="ProPlanta"
		             data-get="fc0_weatherDay"
		             data-imageset="kleinklima"
		             style="font-size:250%">
		        </div>
		        Tagsüber:&nbsp
		        <div data-type="label"
		             data-device="ProPlanta"
		             data-get="fc0_weatherDay"
		             class="inline">
		         </div>
	    </li></ul>
		 </div>
</td>
    <td><center>
    <div data-type="wind_direction" 
		    data-device="Anemometer"
		    data-direction="wind_dir"
		    data-speed="wind_speed"
		    data-calm="-"
		    data-size="80"
		    data-tickstep="10"
		    data-angleoffset="0">
	    </div>
    </center></td>
</tr>
 <tr>
    <td class="tg-031e"><div data-type="label"><small>Feuchte<br></small></div>
        <center><div data-type="label"
             data-device="Temp_Aussen"
             data-get="humidity"
             data-limits="[0,40,60]"
             data-colors='["#9999ff","#aa6900","#ff6900"]'
             data-unit=" %"
             class="inline cell big">
         </div></center></td>
    <td class="tg-031e">
        <center><div data-type="label"><small>Wind</small><br></div>
    <div data-type="label"
             data-device="Anemometer"
             data-get="kmh"
             data-limits="[0,        19,       28,       38,       49,       74,       102,      117]"
             data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
             style="display:inline"
             class="inline">
         </div>
   
</center>
    </td>
 
</tr>


 <tr>
    <td class="A5"><center><div data-type="label" class="inline"><small>UV-Index</small></div><br>
<div data-type="label"
             data-device="ProPlanta"
             data-get="fc0_uv"
             data-limits="[0,2,10]"
             data-colors='["grey","orange","red"]'
              style="display:inline">
         </div>


</center>
    </td>
    <td class="B5"><center><div data-type="label" class="inline"><small>Regenrisiko</small></div><br>
        <div data-type="label"
             data-device="ProPlanta"
             data-get="fc0_chOfRainDay"
              data-unit=" %"
              data-limits="[0,          10,         20,    30,      40,     50,     60,     70,     80,     90,       100]"
              data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'
              style="display:inline">
         </div></center></td>
    <td class="C5"><center><div data-type="label" class="inline"><small>Taupunkt</small></div><br>
        <div data-type="label"
             data-device="Temp_Aussen"
             data-get="dewpoint"
             data-unit="%B0C%0A"></div>
         </center></td>
    <td class="D5"><center><div data-type="label" class="inline"><small>Luftdruck</small></div><br>



<div data-type="label"
                            data-device="Temp_Badezimmer"
                            data-get="pressure"
                            data-unit=" hPa"
                            data-limits="[0,950,1000]"
                            data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
					<div data-type="klimatrend" data-device="Temp_Badezimmer" data-get="statPressureTendency"></div>
				</center>
                    </td>
</tr>

</table>
</li>

Bin für jeden Tip dankbar,

schönen Abend noch,

Stefan

eki · 27 November 2015, 18:50:38

Zitat von: setstate am 20 November 2015, 18:39:15
welche Version vom widget_chart.js kann ich mal wieder bei Github einchecken?

Leider hatte ich diese Woche nicht genug Zeit, die neue chart widget Version dauert also noch ein paar Tage.

@setstate: wenn Du möchtest, kannst Du die Version unter http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40547 freigeben, die enthält fast alle Korrekturen, aber noch nicht die neuen Features.

outhouse · 29 November 2015, 15:49:57

Hallo

Ich habe die Temperatur-Plots mittels dem widget-chart in das PopUp eingebaut. Grundsätzlich scheint das zu funktionieren.

Im Moment zeigt das PopUp die Plots nur sehr langsam an (ist klar, die Daten müssen ja ausgewertet werden), aber in den meisten Fällen werden die Plots, nachdem das PopUp geöffnet wird, gar nicht gezeigt. Wo könnte das Problem liegen?

Code Auswählen

<li data-row="4" data-col="8" data-sizex="1" data-sizey="2">
        <div data-type="popup" data-height="650px" data-width="950px">
				<header>Temperaturen</header>
				<div class="dialog">
        <header>Temperaturen und Luftfeuchtigkeit</header>
		<div class="normal"
			data-type="chart"
			data-logdevice='["FileLog_Elektronik"]'
			data-columnspec='["4:Elektronik.T:T:","6:Elektronik.*:H:"]'
			data-style='["ftui l2","ftui l1"]'
			data-ptype='["lines","lines"]'
			data-uaxis='["primary","secondary"]'
			data-legend='["Temperatur","Feuchtigkeit"]'
			data-yunit="&deg; C"
			data-ytext="Temperatur"
			data-minvalue="auto"
			data-maxvalue="auto"
			data-yunit_sec="%"
			data-ytext_sec="Luftfeuchtigkeit"
			data-height="200"
			data-yticks="auto"
			data-minvalue_sec="auto"
			data-maxvalue_sec="auto"
			data-nofulldays="true"
			data-daysago_start="0"
			data-daysago_end="-1"
			data-cursorgroup="1"
			data-scrollgroup="1"
			data-showlegend="true"
			data-crosshair="true"
			data-xticks="auto">	
			</div>
      </div>
      </div>
        <div class="container narrow small inline">
        <div data-type="label" data-device="OG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
        <div data-type="label" class="narrow">Galerie</div>
        <div data-type="label" data-device="WZ_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
        <div data-type="label" class="narrow">Wohnzimmer</div>
        <div data-type="label" data-device="UG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
        <div data-type="label" class="narrow">Untergeschoss</div>
        <div data-type="label" data-device="Elektronik" data-get="temperature" data-limits='[-73,5,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
        <div data-type="label" class="narrow">Elektronik</div>
        <div data-type="label" data-device="TK_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div>
        <div data-type="label" class="narrow">Tiefklühler</div>
        </div>
</li>

skuggy · 02 Dezember 2015, 07:35:47

Hallo zusammen,

ich würde mich freuen, wenn ein paar neue Demos eingestellt würden.

Ich bin noch auf der Suche nach neuen Ideen im Bezug auf das UI. Da ich nicht wirklich fit in Sachen CSS und HTML bin, bin ich eure Mithilfe angewiesen.

Eine Idee von mir wäre auch, ein Theard pro Widget incl. Beispielen (Bilder) und der dazugehörige Code. Das würde den Hauptthread entlasten für spezielle Anfragen.

Auf geht´s.

setstate · 02 Dezember 2015, 07:48:30

Hallo skuggy,

ich bereite auch gerade ein paar Demo-Seiten für Github vor, die ich nach und nach ausbauen und erweitern will.
Dort kann man dann schön die vielen Möglichkeiten sehen und live testen und sich den Code ansehen.

Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html

kvo1 · 02 Dezember 2015, 07:51:26

Hallo Zusammen,

das fände ich auch gut, bin in der gleichen Situation wie Du... Ideensuche, wenig Plan von HTML und CSS (leider)

@setstate , cool Danke !

kvo1

skuggy · 02 Dezember 2015, 08:06:28

Zitat von: setstate am 02 Dezember 2015, 07:48:30
Hallo skuggy,

ich bereite auch gerade ein paar Demo-Seiten für Github vor, die ich nach und nach ausbauen und erweitern will.
Dort kann man dann schön die vielen Möglichkeiten sehen und live testen und sich den Code ansehen.

Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html

Vielen Dank. Ich freu mich auf die Demoseiten

Nobby1805 · 02 Dezember 2015, 11:26:36

Zitat von: setstate am 02 Dezember 2015, 07:48:30
Bis jetzt ist nur die Seite zum Widget Range online: http://knowthelist.github.io/fhem/tablet/demo_range.html

Im ersten Beispiel verwendest du dort data-substitution ... das scheint bei mir aber gar nicht definiert zu sein

eki · 02 Dezember 2015, 22:54:41

Zitat von: outhouse am 29 November 2015, 15:49:57
Hallo

Ich habe die Temperatur-Plots mittels dem widget-chart in das PopUp eingebaut. Grundsätzlich scheint das zu funktionieren.

Im Moment zeigt das PopUp die Plots nur sehr langsam an (ist klar, die Daten müssen ja ausgewertet werden), aber in den meisten Fällen werden die Plots, nachdem das PopUp geöffnet wird, gar nicht gezeigt. Wo könnte das Problem liegen?

Code Auswählen Erweitern
<li data-row="4" data-col="8" data-sizex="1" data-sizey="2"> <div data-type="popup" data-height="650px" data-width="950px"> <header>Temperaturen</header> <div class="dialog"> <header>Temperaturen und Luftfeuchtigkeit</header> <div class="normal" data-type="chart" data-logdevice='["FileLog_Elektronik"]' data-columnspec='["4:Elektronik.T:T:","6:Elektronik.*:H:"]' data-style='["ftui l2","ftui l1"]' data-ptype='["lines","lines"]' data-uaxis='["primary","secondary"]' data-legend='["Temperatur","Feuchtigkeit"]' data-yunit="° C" data-ytext="Temperatur" data-minvalue="auto" data-maxvalue="auto" data-yunit_sec="%" data-ytext_sec="Luftfeuchtigkeit" data-height="200" data-yticks="auto" data-minvalue_sec="auto" data-maxvalue_sec="auto" data-nofulldays="true" data-daysago_start="0" data-daysago_end="-1" data-cursorgroup="1" data-scrollgroup="1" data-showlegend="true" data-crosshair="true" data-xticks="auto"> </div> </div> </div> <div class="container narrow small inline"> <div data-type="label" data-device="OG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div> <div data-type="label" class="narrow">Galerie</div> <div data-type="label" data-device="WZ_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div> <div data-type="label" class="narrow">Wohnzimmer</div> <div data-type="label" data-device="UG_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div> <div data-type="label" class="narrow">Untergeschoss</div> <div data-type="label" data-device="Elektronik" data-get="temperature" data-limits='[-73,5,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div> <div data-type="label" class="narrow">Elektronik</div> <div data-type="label" data-device="TK_Temperatur" data-get="temperature" data-limits='[-73,10,18,25,30]' data-colors='["Aqua","Aquamarine","SeaGreen","IndianRed","Red"]' data-unit="%B0C%0A" class="cell big thin"></div> <div data-type="label" class="narrow">Tiefklühler</div> </div> </li>

auf Anhieb sehe ich nichts was das genannte Verhalten erklärt. Sind denn die Achsen zu sehen und nur die Graphen fehlen oder fehlen auch die Achsen. Welchen Browser verwendest Du? Bekommst Du irgendwelche Nachrichten auf der Browser Konsole. Eventuell könntest Du noch ein paar Zeilen aus dem Logfile posten, dann kann ich versuchen das nachzuvollziehen.