New FHEM Tablet UI

[setstate]

Ich habe eine grundsätzliche Frage zur Anrodnung der Widgets (per

Code Auswählen Erweitern

data-col="..." und

Code Auswählen Erweitern

data-row="...")
Ich möchte ein Widget rechts unten in die Ecke legen. Ohne dass zwischendrin welche liegen. Das scheint nicht zu funktionieren. Ein Hinschieben über das Frontend geht auch nicht. Rechts oben geht alelrdings. Ist das grundsätzlich nicht möglich, oder muss ich das irgendwo einstellen?

Das kann diese Version von gridster nicht. Es gab mal Forks von gridster, die das konnten

Du musst aber nicht mit gridster arbeiten. Man kann auch mit div Elementen arbeiten und deren Position auf fix oder absolute. Andere Grid Plugins können das vllt. auch. Aber wie nesges schon schrieb: zur Zeit sind andere Dinge interessanter. 

[mw_fhem]

Danke! Es liegt also nicht an meiner Dummheit 

[chris1284]

toll wäre die fhem-svg's inkl. farbangabe mit einzubinden. zb www/images/openautomation/scene_livingroom.svg in rot. simpel per scene_livingroom@red zum beispiel

kann dazu evtl jemand einen tip geben? da die icons in jeder fheminstallaion verfügbar sind und die svg's farblich anpassbar wäre die integration schon toll (und Font Awesome bietet ehr wenig für die hausautomatsierung find ich)
ein tipp wie man die svg's einfärbt würde auch schon reichen

[nesges]

ein tipp wie man die svg's einfärbt würde auch schon reichen

So macht Fhem das: 01_FHEMWEB.pm, Zeile 1964ff:

Code Auswählen Erweitern

      $name =~ m/(@.*)$/;
      my $col = $1 if($1);
      if($col) {
        $col =~ s/@//;
        $col = "#$col" if($col =~ m/^([A-F0-9]{6})$/);
        $data =~ s/fill="#000000"/fill="$col"/g;
        $data =~ s/fill:#000000/fill:$col/g;
      } else {
        $data =~ s/fill="#000000"//g;
        $data =~ s/fill:#000000//g;
      }

Da wird einfach der Text "#000000" im SVG File durch den Wert, der hinter "@" notiert ist ersetzt. Kann man in Perl, PHP etc. machen - aber in JS wird das schwierig, denk ich.

[Hermann]

Hallo,
Ich probiers nochmal. Hat schon jemand eine Lichtansteuerung mit Philips hue realisiert ?

Hermann

[setstate]

Hallo,
Ich probiers nochmal. Hat schon jemand eine Lichtansteuerung mit Philips hue realisiert ?

Hermann

sollte mit dem volume widet gehen. In der Projekt readme steht da einiges. Da muss man die Min und Max Werte, einstellen und das Reading, was gelesen/geschrieben werden soll. Es gibt auch CSS Klassen, damit es auch bei Verwendung für den Hue-Wert in Farbe den Wert anzeigt. Aber man muss mindestens zwei Controls einbauen, eins für den Hue-Wert und eins für die Helligkeit. Ein Kombi-Selector gibt es (noch) nicht. Ich weiß auch nicht, ob das sinnvoll ist. Wie oft stellt man wirklich dran rum, oder sind drei Button mit drei oft genutzen Werten sinnvoller. Mein Philips Hue ist gestern erst eingetroffen. Ich habe sie noch nicht in FHEM eingebunden, um Erfahrungen damit sammeln zu können.

Code Auswählen Erweitern

<div data-type="volume" data-device='dummy1'
    data-min='0'
    data-max='65535'
    data-tickstep='4'
    data-get='hue'
    data-set='hue'
    class="cell small hue-tick" ></div>
<div data-type="label" class="cell">Light2</div>


[bjoernbo]

Ich habe OSRAM Ligthify in Betrieb und das setzt ebenfalls auf HUE auf. Dazu gibt es ja das entsprechende FHEM-Modul.

[hotwebnet]

ich habe auch noch ein Problem , alle meine ä/ü/ werden so angezeigt..... Bild.....

was kann ich da machen........
ist auf meinem PC und auf meinem Android Gerät....

wird auch so in Fhem in den Internals angezeigt und unter State steht immer ??

[Hermann]

sollte mit dem volume widet gehen. In der Projekt readme steht da einiges. Da muss man die Min und Max Werte, einstellen und das Reading, was gelesen/geschrieben werden soll. Es gibt auch CSS Klassen, damit es auch bei Verwendung für den Hue-Wert in Farbe den Wert anzeigt. Aber man muss mindestens zwei Controls einbauen, eins für den Hue-Wert und eins für die Helligkeit. Ein Kombi-Selector gibt es (noch) nicht. Ich weiß auch nicht, ob das sinnvoll ist. Wie oft stellt man wirklich dran rum, oder sind drei Button mit drei oft genutzen Werten sinnvoller. Mein Philips Hue ist gestern erst eingetroffen. Ich habe sie noch nicht in FHEM eingebunden, um Erfahrungen damit sammeln zu können.

Code Auswählen Erweitern

<div data-type="volume" data-device='dummy1'
    data-min='0'
    data-max='65535'
    data-tickstep='4'
    data-get='hue'
    data-set='hue'
    class="cell small hue-tick" ></div>
<div data-type="label" class="cell">Light2</div>


Danke, hat mir schon etwas weitergeholfen. Meine Philips hue sind auch noch ganz frisch. Hatte aber bis jetzt nur 2 weisse und da hat es mit volume ganz gut geklappt. Aber bei meiner neuen RGB wusste ich nicht weiter. Wenns irgendwann mehr Infos gibt bin ich auf jeden Fall für jeden Input dankbar.

[setstate]

kann dazu evtl jemand einen tip geben? da die icons in jeder fheminstallaion verfügbar sind und die svg's farblich anpassbar wäre die integration schon toll (und Font Awesome bietet ehr wenig für die hausautomatsierung find ich)
ein tipp wie man die svg's einfärbt würde auch schon reichen

Ins HTML müsste man sie so einbinden:

Code Auswählen Erweitern

<img src="../images/openautomation/scene_livingroom.svg" height="30" width="30" class="svg" />

Per jQuery müsste man sie dann in inline SVG umwandeln und könnte dann die festgelegte #000000 Farbe überschreiben.

Code Auswählen Erweitern

    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');
            $svg.attr('width',$img.attr('width'));
            $svg.attr('height',$img.attr('height'));

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');

    });


die Farbe kann man dann im CSS File vorgeben:

Code Auswählen Erweitern

.replaced-svg  {
  background-color: #d33;
}

.replaced-svg g{
  fill: #fff;
}

Oder in der o.g. Replace Schleife per

Code Auswählen Erweitern

$svg.find('g').attr('fill','#dd3232');

Aber ich habe nicht vor, Aufwand zu spendieren, um diese SVGs hier um inkludieren. Der Rechenaufwand und Ladezeit für die Anzeige ist mir viel zu groß. Ausserdem erinnern mich viele der Grafiken an Kindergartenzeichnungen.
Ich bleibe aber auf de Suche nach zusätzlichen Symbol-Fonts, die mehr nach HomeAutomation aussehen, aber auch gut zum beabsichtigten Aussehen des UI passen.

[Hermann]

Hallo,

Noch einmal kurz ein Bild wie es bis jetzt mit den Philips hue aussieht.

Hermann

[jual]

Bezüglich der Thematik mit weiteren Icons habe ich die Seite genericons.com gefunden. Ich bin mir nicht sicher, ob diese Art Icons in die TabUI einbindbar sind, aber so wie ich es verstanden habe, kann man mit einem Tool Font Custom (fontcustom.com) aus SVGs eigene Icon Fonts erstellen. Ich habe mir bisher nur die Beschreibung kurz angesehen. Da ich aktuell leider nicht so viel Zeit dafür habe, kann ich es leider nicht austesten. Vielleicht findet sich ja jemand, der das mal verfolgen will.

[setstate]

Bezüglich der Thematik mit weiteren Icons habe ich die Seite genericons.com gefunden. Ich bin mir nicht sicher, ob diese Art Icons in die TabUI einbindbar sind, aber so wie ich es verstanden habe, kann man mit einem Tool Font Custom (fontcustom.com) aus SVGs eigene Icon Fonts erstellen. Ich habe mir bisher nur die Beschreibung kurz angesehen. Da ich aktuell leider nicht so viel Zeit dafür habe, kann ich es leider nicht austesten. Vielleicht findet sich ja jemand, der das mal verfolgen will.

Super, genau dieser Typ ist passend. Mehr davon ...
Besteht Interesse, diese als Switch oder Symbol Icon zu benutzen?

[johannes1984]

@hotwebnet: wie hast du das denn mit den kleinen Symbolen für die Anwesenheit gemacht?


Gesendet von meinem iPhone mit Tapatalk

[hotwebnet]

fhem.cfg


define HandyGuido PRESENCE lan-ping 192.168.178.20
define HandyAnja PRESENCE lan-ping 192.168.178.21


Tablet UI

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
   <header>Anwesenheit</header>
     <div class="container">
     <div class="left"><br/>
     <div data-type="symbol" data-device="HandyAnja"
          data-icon="fa-user"
          data-on-color="orange"
          data-get-on="present"
          data-get-off="absent"
          class="narrow"></div>
          <div data-type="label" class="narrow darker small">Anwesenheit Anja</div>
            
     </div>
     <div class="right"><br/>
          <div data-type="symbol" data-device="HandyGuido"
           data-icon="fa-user"
           data-on-color="orange"
           data-get-on="present"
           data-get-off="absent"
           class="narrow"></div>
           <div data-type="label" class="narrow darker small">Anwesenheit Guido</div>