[FHEM-Tablet-UI] User-Demos

drhirn · 16 Februar 2017, 14:41:22

Zitat von: Wasserwerk33 am 13 Februar 2017, 17:41:36
Hi
ne hatte es nicht drin. Habe es nachgepflegt, nun ist es aber noch schlimmer geworden.

Schau dir mal background-position und background-size an.

n4rrOx · 16 Februar 2017, 14:53:00

@all

Wäre es nicht sinnvoller für Probleme einen neuen Threat zu eröffnen?
Dieser verschwindet dann relativ schnell im Forum, wenn das Problem gelöst wurde ...
In diesem Threat sollten doch nur Vorstellungen der eigenen Oberfläche sowie die Informationen / Lösungen dazu verteilt werden?

Gunther · 17 Februar 2017, 15:44:33

Zitat von: Shadow3561 am 04 Februar 2017, 11:49:30
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7

mfg

Mich interessiert die Umsetzung Deiner Rolladen. Magst Du das HTML mal anhängen und etwas zu Deiner "Beschattung" und der Umsetzung in FHEM sagen?

Shadow3561 · 17 Februar 2017, 17:47:12

ZitatZitat von: Shadow3561 am 04 Februar 2017, 11:49:30
Hier mal mein UI.
Bin noch nicht ganz fertig, aber für den einen oder anderen ist sicher etwas dabei.
Die Größe ist optimiert fürs Samsung Galaxy Tablet 9.7

mfg

Mich interessiert die Umsetzung Deiner Rolladen. Magst Du das HTML mal anhängen und etwas zu Deiner "Beschattung" und der Umsetzung in FHEM sagen?

Hallo,
Hier der HTML Code von meiner Rollo Seite

Code Auswählen

    <li data-row="1" data-col="1" data-sizex="6" data-sizey="4">
        <header><div data-type="label" class="medium orange">Wohnzimmer</div></header>

     
    <div class="inline">

        <div data-type="slider" data-device='EIB_Rolladen_Garten' data-get="STATE" data-set="value" data-min="0"  data-max="100" data-on='100' data-off='0' data-value=true  class="mini negated" >  </div>
      <div class="top-space"></div>
      <div data-type="label" >Garten</div>
      <div class="top-space"></div>
                <div data-type="select" data-device="EIB_Rolladen_Garten" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
                
               <div class="top-space-2x"></div>  
               <div data-type="label"> Beschattung</div>
                 <div data-type="select" data-device="Beschattung_Sonne_Rollo_Garten" data-cmd="set" data-set="" data-get="STATE" data-items='["aktiv","passiv"]' class="small wider"></div>
    </div>
    
    
     <div class="inline">
                <div data-type="slider" data-device='EIB_Rolladen_Terrasse' data-get="STATE" data-set="value" data-min="0"  data-max="100" data-on='100' data-off='0' data-value=true  class="mini negated" >  </div>
                <div class="top-space"></div>
                <div data-type="label">Terrasentür</div>
                <div class="top-space"></div>
                                    <div data-type="select" data-device="EIB_Rolladen_Terrasse" data-items='["0","25","50","75","100"]' data-alias='["Auf","25","50","75","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
                                    
                                                 <div class="top-space-2x"></div>  
                                                <div data-type="label"> Beschattung</div> 
                 <div data-type="select" data-device="Beschattung_Sonne_Rollo_Terrasse" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>  
    
    </div>
    
    
    <div class="inline">
                <div data-type="slider" data-device='EIB_Rolladen_Sofa' data-get="STATE" data-set="value" data-min="0"  data-max="100" data-on='100' data-off='0' data-value="true" class="mini negated" >  </div>
                <div class="top-space"></div>
<div data-type="label" >Sofa</div>
<div class="top-space"></div>
                    <div data-type="select" data-device="EIB_Rolladen_Sofa" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
                    
                 <div class="top-space-2x"></div>  
                 <div data-type="label">Beschattung</div>
                 <div data-type="select" data-device="Beschattung_Sonne_Rollo_Sofa" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>  
    </div>

     
    
          
</li>




<li data-row="1" data-col="2" data-sizex="6" data-sizey="4">
        <header><div data-type="label" class="medium orange">Küche</div></header>
        
       <div class="inline">
       
               <div data-type="slider" data-device='EIB_Rolladen_Kueche' data-get="STATE" data-set="value" data-min="0"  data-max="100" data-on='100' data-off='0' data-value=true  class="mini negated" >  </div>
                <div class="top-space"></div>
<div data-type="label" >Küche</div>
<div class="top-space"></div>
                    <div data-type="select" data-device="EIB_Rolladen_Kueche" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
                                 <div class="top-space-2x"></div>  
  
                 <div data-type="label">Beschattung</div>
                 <div data-type="select" data-device="Beschattung_Sonne_Rollo_Kueche" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>   
                 
    </div	>
                    
                       <div class="inline">
                <div data-type="slider" data-device='EIB_Rolladen_Esstisch' data-get="STATE" data-set="value" data-min="0"  data-max="100" data-on='100' data-off='0' data-value=true  class="mini negated" >  </div>
                <div class="top-space></div>
<div data-type="label" >Esszimmer</div>
<div class="top-space"></div>
                    <div data-type="select" data-device="EIB_Rolladen_Esstisch" data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]' data-alias='["Auf","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","Zu"]' data-get="STATE" data-set="value" class="cell w2x" ></div>
                   <div class="top-space-2x"></div> 
                 <div data-type="label">Beschattung</div>
                 <div data-type="select" data-device="Beschattung_Sonne_Rollo_Sofa" data-on-background-color="#aa6900" data-off-background-color="#555" data-set="" data-cmd="set" data-items='["aktiv","passiv"]' class="small wider"></div>  

    </div>

Habe meine zu meinen Rolläden(KNX) noch eine Beschattungsautomatik gebastelt und in die myUtils ausgelagert.
Hier ein Beispiel

Code Auswählen



sub 
Wetterregelung_Sonne_Terrasse($){

    if (Value("Beschattung_Sonne_Rollo_Terrasse") eq "aktiv"){

    my $Temp= ReadingsVal("Weather_Underground","fc0_high_c","999");
        my $Sonne= ReadingsVal("Weather_Underground","fc0_condition","kein Wert");
        my $RolladenTerrasse= ReadingsNum("EIB_Rolladen_Terrasse","state","99");
        my $now = time();
        my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst)=localtime($now);


        if (($Temp >= 20) && (($Sonne eq "sonnig") || ($Sonne eq "teilweise wolkig") || ($Sonne eq "leicht bewölkt") || ($Sonne eq "klar") ||  ($Sonne eq "heiter") || ($Sonne eq "überwiegend wolkig")) && ($RolladenTerrasse <= "35") && ($RolladenTerrasse >= "0") && ($hour >= 13) && ($hour < 20)){
           fhem("set EIB_Rolladen_Terrasse value 40");
           Log 1, "Beschattungsposition Rolladen Terrassentür wird angefahren.";
        }  elsif (($RolladenTerrasse == "40") && ($hour >=20) && ($hour <21)){
           fhem ("set EIB_Rolladen_Terrasse value 1");
           Log 1,"Rolladen Terrassentür wird geöffnet Beschattung nicht mehr nötig.";
        }  elsif (($Temp==999) || ($Sonne eq "kein Wert")) {
           Log 1, "Wetter nicht erreichbar oder kein Wert geliefert, Rolladen Terrasse $Temp, $Sonne,";
        }
    }
}

Für die Beschattungssteuerung gibt es genug Beispiele hier im Forum.
zB.

https://forum.fhem.de/index.php/topic,26216.msg192231.html#msg192231

Einfach mal ein wenig suchen, lese ich hier des Öfteren mal.

MfG

paul79 · 22 Februar 2017, 21:39:39

Hallo,

ich habe meine Tablet UI Seite mit Pagebutton und einem gewissen 3D Effekt auf die FTUI 2.6 angepasst.

Der alte Beitrag war hier https://forum.fhem.de/index.php/topic,37378.msg549640.html#msg549640

Dieser Version ist für 8 Zoll und 10,5 Zoll erstellt, beim Start der Webseite ist ein Script in der index.html was die Breite des Tabletts ausliest und wenn diese 1280px beträgt wird zusätzlich die css Datei fhem-tablet-ui-user-1280.css geladen, damit werden die richtigen Größen für 10.5 Zoll geladen. Wozu das Ganze, damit man beide Tabletts im native Modus laufen und nicht gezoomt werden.

Die css Datein für die Einstellungen:
fhem-grayblue-user-ui.css -> hauptsächlich für Farben
fhem-tablet-ui-user.css -> Schatteneffekte und Größen
fhem-tablet-ui-user-1280.css -> spezielle Größen für Auflösung 1280x800px

4 Widgets habe ich anpassen müssen um den gewünschten Effekt zu erhalten.
widget_calview -> Jahreszahl entfernt
widget_homestatust -> ist die Größen angepasst für Auflösung 1280x800px
widget_pagebutton -> roten Schatten eingefügt
widget_weather.js -> angepasst damit für PROPLANTA auch das heute Icon im kleinklima iconset angezeigt wird

2 Widgets sind von mir widget_uwz_paul79.js und widget_verkehrsinfo.js.

Alles auf eigene Gefahr!
Gruß Paul

Octopus180 · 22 Februar 2017, 21:57:30

Paul ,

Wie immer sehr schöne Arbeit

paul79 · 22 Februar 2017, 22:00:50

hier sind noch die restlichen Screenshots.

Gruß Paul

PS: Die Senderlogos sind von https://www.vuplus-support.org/wbb4/index.php?thread/64098-mirror-glass-3d-huminator-design-by-stefanbenno6/

paul79 · 25 Februar 2017, 22:59:26

Hallo,

ich habe noch eine Seite gebaut wo fast alles von Proplanta drin ist, der Mittelteil rotiert mit dem widget_rotor.js

Gruß Paul

Helmi55 · 26 Februar 2017, 11:51:54

Hallo paul79
gefällt mir sehr, sehr gut - würdest du mir(uns) deine config für server und system zeigen
Danke
Gruß
Helmut

paul79 · 26 Februar 2017, 12:00:42

Zitat von: Helmi55 am 26 Februar 2017, 11:51:54
Hallo paul79
gefällt mir sehr, sehr gut - würdest du mir(uns) deine config für server und system zeigen
Danke
Gruß
Helmut

Hallo, hier bitteschön, es ist aber einiges mit ?????? versehen da müsst ihr eure Daten nehmen.

Gruß Paul

Helmi55 · 26 Februar 2017, 12:29:23

Merci vielmals - herzlichen Dank
Da gibts einiges zu tun in nächster Zeit (kann wieder viel dazu lernen - hoffentlich!)
Schönen Sonntag
Helmut

spider · 26 Februar 2017, 16:43:00

Hallo ...

... ich wollte meine table ui Oberfläche auf-hübschen ...

In der Antwort 307 und 684 habe ich auch schon Ansätze gelesen , komme aber damit nicht klar ...

ich habe schon gelesen das man diese Änderungen in der fhem-table-ui.css Datei machen muss , da sie in meiner table ui eingetragen ist.

es geht um Runde Ecken ( border-radius 7px ) und um Hintergrundfarben , Widges-Farben und Titel-Farben ... an welcher Stelle muss ich was ändern oder einfügen ...

die Farbe einzelner Widges in der table ui ist ja nicht möglich ? Das muss alles über die .css geändert werden ?

Würde mich über Antwort freuen ...
pierre

... ich habe auch schon versucht ein Bild als Hintergrund einzufügen und es hat nicht funktioniert .
deshalb wäre ich erstmal mit der Farbgestaltung zufrieden ...

jnewton957 · 26 Februar 2017, 19:23:29

Zitat von: paul79 am 26 Februar 2017, 12:00:42
Hallo, hier bitteschön, es ist aber einiges mit versehen da müsst ihr eure Daten nehmen.

Gruß Paul

Hallo Paul,

ich suche mir seit gestern ´nen Wolf einen funktionierende /opt/fhem/FHEM/backup.sh zu finden bzw. zu bauen.
Irgendwie laufe ich da immer auf Fehler im coding.

Kannst du die bitte posten bzw. pm.

Danke
Jörg

paul79 · 26 Februar 2017, 20:30:36

Zitat von: jnewton957 am 26 Februar 2017, 19:23:29
Hallo Paul,

ich suche mir seit gestern ´nen Wolf einen funktionierende /opt/fhem/FHEM/backup.sh zu finden bzw. zu bauen.
Irgendwie laufe ich da immer auf Fehler im coding.

Kannst du die bitte posten bzw. pm.

Danke
Jörg

Hallo Jörg,

die backup.sh ist hier aus dem Forum aber ich hänge sie mit dran und die 99_myUtils.pm auch noch.
Alles mit ????????? müsst ihr ersetzten.

Gruß Paul

paul79 · 26 Februar 2017, 20:38:48

Zitat von: spider am 26 Februar 2017, 16:43:00
Hallo ...

... ich wollte meine table ui Oberfläche auf-hübschen ...

In der Antwort 307 und 684 habe ich auch schon Ansätze gelesen , komme aber damit nicht klar ...

ich habe schon gelesen das man diese Änderungen in der fhem-table-ui.css Datei machen muss , da sie in meiner table ui eingetragen ist.

es geht um Runde Ecken ( border-radius 7px ) und um Hintergrundfarben , Widges-Farben und Titel-Farben ... an welcher Stelle muss ich was ändern oder einfügen ...

die Farbe einzelner Widges in der table ui ist ja nicht möglich ? Das muss alles über die .css geändert werden ?

Würde mich über Antwort freuen ...
pierre

... ich habe auch schon versucht ein Bild als Hintergrund einzufügen und es hat nicht funktioniert .
deshalb wäre ich erstmal mit der Farbgestaltung zufrieden ...

Hallo Pierre,

die fhem-table-ui.css solltest du nicht ändern, diese wir meist beim Update wieder überschrieben, lese dir mal den Abschnitt CSS-Styles im Wiki durch
https://wiki.fhem.de/wiki/FHEM_Tablet_UI

Für den Hintergrund z.B. das hier in deine neue fhem-tablet-ui-user.css eintragen.

Code Auswählen

.gridster > ul > li, .card, section {
    background-color:#223343;
}

Gruß Paul