[FHEM-Tablet-UI] User-Demos

[HoTi]

Ich räume noch ein bisschen auf und hänge die Tage ein Zip hier rein.

Ruf ich das doch nochmal ins Gedächtnis!
 

[MichaelT]

Kuckst du.: http://forum.fhem.de/index.php/topic,48562.0.html

Duck: sorry. Is ja nur das widget

Grüße
Michael

[moes]

So, hier nun meine User-Demo, noch im Anfangsstadium und Ausbaufähig.

Grüße, kannst Du mir mal bitte den Code Teil für den Batteriestatus zeigen? Ich bastel hier schon einige Zeit und bin am verzweifeln. Danke Dir

[moes]

So, hier nun meine User-Demo, noch im Anfangsstadium und Ausbaufähig.

Grüße, kannst Du mir mal bitte den Code Teil für den Batteriestatus zeigen? Ich bastel hier schon einige Zeit und bin am verzweifeln. Danke Dir

[h3llsp4wn]

Hallo zusammen,

anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?

@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.

Ansonsten gibt es glaube ich wesentlich spektakulärere Lösungen 

Auf der ToDo-Liste stehen noch:
- Kodi
- Heizungssteuerung (s.o.)
- Stauvorhersage für den Weg zur Arbeit und die Entscheidung, ob fahren überhaupt lohnt ...
- WeekDayTimer Steuerung

Die Lösung nutzt das hier scheinbar nicht so gemochte pagetab. Das funktionierte bei mir aber nach Umbau des Webservers schon sehr gut.
Bin gerade auf den Raspberry 2 umgestiegen und jetzt fliegt es sogar 

Bilder und Sourcen sind im Anhang.

... und bevor jemand meckert - auch ich habe natürlich hier und da Anregungen mitgenommen - also danke an alle, die
Ihre Tipps, Tricks und Lösungen präsentieren und teilen!


Cheers,

h3ll

[Init]

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 Erweitern

<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

Hallo Stefan,

wahrscheinlich hast du es inzwischen gelöst. Falls nicht, dann musst du folgendes ändern:

vorher

Code Auswählen Erweitern

<td class="tg-031e" colspan="2" rowspan="2">

nachher

Code Auswählen Erweitern

<td class="tg-031e" colspan="2" rowspan="2" valign="top">

VG
Marc

[HoTi]

@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.

Kann man jemals fertig werden?? Für mich ist das ein Hobby, dem ich nachgehe wenn meine Kinder es zulassen. Einen Beruf und eine Berufung habe ich auch noch  Somit bin ich gaaaaanz Langsam...

Vielen dank für deine Beispiele werde Sie mir anschauen und Teile davon bei mir übernehmen!!

*edit*
Was ist das eigenlich als Hintergrund? Heidelberg?

[h3llsp4wn]

Nee ... fertig wird man wohl nie - wäre dann auch irgendwie schade. Es gibt ja noch so viele Ideen ... da bastelt man so vor sich hin und stellt fest, dass schon wieder ein Monat rum ist. Zu wenig Zeit hat man ja immer.

Im Hintergrund ist der Vesuv ... aber ich baue jetzt nicht noch Erdbebensensoren ein 

[Jens_B]

Hallo zusammen,

anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?

sieht echt super aus. Blöde Frage, wo werden die Farben eingestellt? Und wie hast Du das mit den Rändern um die Buttons gemacht?

Das mit dem Kalender, das finde ich richtig gut. Ich würde so gern den iCloud Kalender, den ich als Familienkalender habe so anzeigen lassen.... Bloss hab ich da mal wieder nicht den richtigen Ansatz. Als erstes muß ich denke ich mal den Kalender Freigeben, dann den Link im Calendar Modul verfügbar machen. Und dann? Wie bekommt man das dann so schön hin?

Gruß
Jens

[h3llsp4wn]

Hi,

einen Großteil der Umgebungsfarben kannst Du in der fhem-tablet-ui.css setzen. Ich würde da dann aber ein eigenes .css draus machen und dies dazu laden oder
nur die laden. Sonst musst Du bei Updates immer die Änderungen/Anpassunge zusammenführen. Ich hatte auch überlegt Pseudoklassen für die Farbgebung in
meinen Templates einzusetzen, so dass ich dies dann nur noch im CSS an einer Stelle ändern muss. Dies habe ich aber noch nicht umgesetzt - sind halt viele Baustellen
und ggf. macht es aktuell keinen so großen Sinn mehr - ggf. wenn ich noch mal an die Farben ran gehe. Ich fürchte ich werde noch benutzerabhängige Styles einbauen müssen ...

Für die Ränder um die Buttons, habe ich das background-icon gesetzt. Ich denke wenn Du mit den Farben spielst, wird schnell klar wie es funktioniert.

Code Auswählen Erweitern

<div data-type="pagetab"
data-url="PT_index_licht.html"
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#E6FF57"
data-off-background-color="#A6BF17"
data-icon="fa-lightbulb-o"
data-background-icon="fa-circle-thin"
class="cell small top-space" >
</div>


Den iCloud Kalender solltest Du in FHEM bekommen (http://forum.fhem.de/index.php/topic,14694.15.html). Dann müsstest Du mit "meiner" Lösung die Anzeige Deines FHEM Kalenders
in FTUI hinbekommen. Beispiel habe ich mit hochgeladen.

Cheers,

h3ll

[Thyraz]

Ich muss sagen TabletUI fasziniert mich echt.

Wollte eigentlich für iOS eine private App für mein Setup erstellen, aber TabletUI ist so flexibel vom Design mit CSS, dass ich mir das glaub erspare.
Evtl. eine kleine Wrapper-App mit eigenem Icon, Fullscreen-Ansicht und Landscape-Only auf dem iPad, Portrait-Only auf dem iPhone, aber das wars dann auch.

Mein Smart-Home ist noch im entstehen, da wir erst Ende des Jahres ins neue Zuhause ziehen, daher sind erstmal ein testweise ein paar Geräte in der Wohnung verteilt.
Aber es ist faszinierend wie schnell man eine kleine UI mit TabletUI zusammenklicken kann.
An Feinheiten kann an sich dann später sicher immer noch aufhängen.

Ist noch nichts Tolles was ich bisher vorzuweisen habe, daher auch noch keine HTML/CSS Dateien im Anhang.
Will im Lauf der Zeit aber Fortschritte und dann auch sicher Quelldateien vorzeigen.

Nachdem ich ja jetzt nichts groß programmieren muss, werde ich mich wohl hauptsächlich aufs designen eigener Icons konzentrieren,
da mir Font-Awesome nicht schlank genug ist.
Dank der Anleitung im Wiki hat auch das Erstellen einer eigenen Schriftart mit meinen Icons problemlos funktioniert.
Wenn die Sammlung etwas größer ist, kann ich den Font auch gern in einem eigenen Thread zur Verfügung stellen...

(https://www.dropbox.com/s/m5k9dvcwmzis408/TabletUI3.PNG?dl=1)

[setstate]

Hallo Thyraz, Vielen Dank ...

Dein Icon Font finde ich auch sehr ansprechend. Mit dem Slim-Design ist eine sehr gute Idee.
Kommst du aus der Branche?

Wenn dein Font soweit ist, können wir ihn auch gerne mit ins Projekt einhängen, damit die Einbindung ins eigene UI einfacher wird. Mit einer Auswahlseite mit den Namen (z.B. auf der FTUI Demo Seite), könnte man sich dann alle vorher ansehen.

Eine schöne Woche ...

[Thyraz]

Bin ursprünglich mehr aus der Softwareentwicklung in der Industrieautomatisierung.
Aber habe ein Nebengewerbe mit iOS Entwicklung und UI Design.

Gerade gemerkt, dass die Icons noch nicht ganz Perfekt vom Pixelraster sind.
Ein paar Linien sind dadurch teilweise unterbrochen oder nicht sichtbar.
Hab im CSS jetzt gesehen, dass die Font-Size 26px ist. Mal sehen ob ich das noch etwas optimieren kann, wenn ich das Raster im Vektor-Template entsprechend so lege.

[rhrawr]

Möchte auch mal meine ersten Gehversuche mit dem FTUI zeigen und natürlich gleichzeitig einen riesen Dank an Setstate (aber auch den Rest der Community) loswerden.

Nach unzähligen Versuchen und Spielereien mit Formen, Farben und was weiß ich nicht, habe ich mich nun glaub ich auf ein "Design" eingeschossen. Ich habe mir natürlich viele der Demos hier im Forum angeschaut und neigte beim Experimentieren immer wieder dazu, möglichst viele Widgets auf den Seiten unterzubringen. Ich war auch schon kurz davor zu sagen: "Das ist es!" Habe dann aber doch alles wieder über den Haufen geworfen. Denn ich glaube ein Problem eint uns alle: Frau muss das Ding auch toll finden! 

Daher habe ich nun folgenden Plan. Zwei UI's für jeweils 7" Tablets (Galaxy Tabs) in Wohnzimmer und Flur, relativ simpel und nur mit den wichtigsten Funktionen und Ausgaben versehen. Dazu ein UI für mein 10" Tablet, welches dann etwas umfangreicher ist. Das UI für das Smartphone soll ebenfalls relativ simpel aufgebaut, aber über entsprechende Menü's mehr Funktionen bieten, als die einfachen 7" UI's.

So sieht aktuell der "Homescreen" für die 7-Zoller aus (siehe Anhang), natürlich in Szene gesetzt. Bei den Temps sind mehrere Räume via Swiper hinterlegt. Das jeweilige Statusicon lässt sich anklicken, dahinter verbergen sich Popups mit der Statusauswahl. Dazu noch ein Switch um zwischen meinem Auto- und Eco-Modus schnell zu wechseln. Ganz unten findet sich dann noch ein kleines Menü, wohinter sich noch weitere Räume befinden. Die sind aber noch nicht ganz fertig (gibt es dann bald per Edit nachgeliefert).

Ist sicherlich jetzt nix "dolles", aber aller Anfang ist schwer und bis vor ein paar Tagen habe ich mich mit html noch überhaupt nicht beschäftigt. Raubt mir teilweise echt den letzten Nerv, wenn mal wieder was nicht klappt. 

Gruß
Dennis

[bjoernbo]

Wow sieht super aus! Poste bei Gelegenheit mal mehr Bilder!