New FHEM Tablet UI

[amunra]

mit den momentanen Icons klappt es. Sobald ich aber auf "oa-measure_battery_0" usw. wechsel, wird mir nur ein 4-eckiges Icon mit 4 Ziffern in der Mitte angezeigt. Siehe Anhang

Wo ist das Problem?

sieht nach fehlenden openautomation.ttf Datei aus.
Stelle bitte sicher, dass alle notwendigen Dateien (openautomation.eot,openautomation.svg,openautomation.ttf,openautomation.woff) im Verzeichnis /fhem/tablet/fonts/ existieren.

[setstate]

Hierzu die Frage:
Kann ich per JavaScript dem button oder dem symbol einen "on" Status verpassen ohne dass ein reales Device dahinter hängt?
Ich hoffe, es ist verständlich, was ich meine.

Alle Widget, die auf famultibutton basieren, können mit

Code Auswählen Erweitern

$(this).data('famultibutton').setOn();></div>

an und mit setOff ausgeschaltet werden.

Beispiel

Code Auswählen Erweitern

<div data-type="symbol"
onClick="$(this).data('famultibutton').setOn();"></div>


Statusabfrage geht mit getState()

Die circleborder Class wird beim nächsten Update offiziell mit dabei sein. Danke

[outhouse]

Hallo
Ich benutze unter anderem einen FS20 Dimmer. Um die Lampe zu dimmen, müsste der Befehl (z.B.) "set WZ_Stehlampe dim43%" lauten.
data-set="dim" ergibt dann den Befehle "set WZ_Stehlampe dim 43"

Frage: Gibt es eine Möglichkeit, das "dim 43" ohne Leerzeichen und nachfolgendem % zu "kreieren"?

Chris

[setstate]

Das sieht eher nach einem Befehl für STATE aus. Gibt es nicht ein Reading, wo man den Dim Wert direkt numerisch setzen kann?
Gib mal den Output von

Code Auswählen Erweitern

list WZ_Stehlampe

[outhouse]

Gib mal den Output von

Code Auswählen Erweitern

list WZ_Stehlampe

Output gibt:

Internals:
   BTN        60
   CFGFN      ./FHEM/Wohnzimmer.cfg
   DEF        7777 60
   IODev      CUL_0
   LASTInputDev MyRFR
   MSGCNT     2
   MyRFR_MSGCNT 2
   MyRFR_RAWMSG 810b04xx0101a0017777600011
   MyRFR_RSSI -61
   MyRFR_TIME 2015-10-04 09:53:59
   NAME       WZ_Stehlampe
   NR         1033
   STATE      dim50%
   TYPE       FS20
   XMIT       7777
   Code:
     1          7777 60
   Readings:
     2015-10-04 09:54:08   state           dim50%
Attributes:
   IODev      CUL_0
   alias      Stehlampe
   fm_fav     1
   fm_name    Stehlampe
   fm_order   2
   fm_type    dimbutton,lamp
   fm_view    0,1
   fp_Wohnbereich 325,360,5,
   group      Einzellichter
   icon       light_pendant_light
   model      fs20di
   room       Wohnzimmer,Favourites
   sortby     1
   webCmd     dim:on:off

[setstate]

Ach du meine Güte!!! Da ist ja garnix!? Das wäre eher ein Request an den Owner des FS20-Moduls, entspreche Standard-Readings zu implementieren, anstatt unverständliche Workarounds anzubieten.
Jede zusätzlich if Bedingung geht zu Lasten der Performance

Möglich wäre es aber ...zumal Senden eher unkritisch ist in Sachen Zeit
Nachtrag:
Es ginge bestimmt auch mit einem Userreading im FHEM plus Event-Handling für dieses Device

[eddtima]

@outhouse, ich habe das Problem mit dem Circlemenue geloest. Dann dimmst Du zwar nur in 8 Stufen, aber es geht immerhin. Schöner wäre es natürlich, wenn zB. der slider noch einen zusätzlichen parameter bekäme

P.S. Danke an setstate und alle Beitragenden wie nesges für dieses hammergeile Modul. Ganz große Klasse, ich finde, damit wird FHEM erst familientauglich ...

[Morrino]

Hallo,

ich bin noch sehr neu bei FHEM und dementsprechend auch bei Tablet UI, was mir übrigens sehr gefällt.

Ich bin momentan daran meinen AV-Receiver (VSX-921) darüber anzusteuern was soweit auch ganz gut funktioniert. Nur würde ich gerne die verschiedenen Radio Sender in einer "select" Auswahl auswählen können. Das Problem, für mich zumindest, ist das ich die einzelnen Favoriten jeweils über einen FS20 Schalter (die nur rein fiktiv entstehen) ansteuer. Hinter diesem liegt jeweils eine kleine Funktion:

Code Auswählen Erweitern

Fav_3 {fhem("set VSX921 on;sleep 2;set VSX921 stop;sleep 2;set VSX921 input hMG; sleep 8;set VSX921 volume 40; sleep 1;set VSX921 up; sleep 1; set VSX921 up; sleep 1; set VSX921 enter;sleep 1; set VSX921 down;sleep 1; set VSX921 down; sleep 1;set VSX921 enter")}

Da ja alle unterschiedliche Namen habe (bzw. ja kein Device ist) weiß ich nicht genau wie ich diese in einer select angeben muss, wenn dies überhaupt so geht.

Eventuell kann mir ja jemand dabei helfen.

Grüße

[setstate]

Die Daten sind alle in /opt/fhem/www/tablet/fonts enthalten

Welche Daten, wofür?
Was haben die Fonts mit dem Einschalten der Widgets zu tun?

[ChrisK]

Die circleborder Class wird beim nächsten Update offiziell mit dabei sein. Danke

Cool, freut mich! Danke.

Alle Widget, die auf famultibutton basieren, können mit

Code Auswählen Erweitern

$(this).data('famultibutton').setOn();

an und mit setOff ausgeschaltet werden.

Klasse, danke! Genau, das was ich gesucht habe.

Mein Ziel was er eine mehrseitige UI zu erstellen, die nicht wie bei pagetab die einzelnen Seiten nachlädt, sondern alles direkt da hat.
Evtl. geht das auch mit pagetab und ich habe es nicht gefunden. In diesem Fall ignoriert den Rest hier

Im Anhang hier mal eine Beispiel-index-Datei.
Im ersten gridster ist die Navigation zu finden:

Code Auswählen Erweitern

        <div style="font-size:30px; color:rgb(96, 0, 0);" data-type="symbol" data-color="#aa6900" data-icon="fa-lightbulb-o" class="cell small switch" id="switch_section_licht"></div>
        <div data-type="label" class="cell darker">Licht</div>
        <div style="font-size:30px; color:rgb(96, 0, 0);" data-type="symbol" data-color="#aa6900" data-icon="fa-fire" class="cell small switch" id="switch_section_heizung"></div>
        <div data-type="label" class="cell darker">Heizung</div>
        <div style="font-size:30px; color:rgb(96, 0, 0);" data-type="symbol" data-color="#aa6900" data-icon="fa-windows" class="cell small switch" id="switch_section_rollos"></div>
        <div data-type="label" class="cell darker">Rollos</div>
        <div style="font-size:30px; color:rgb(96, 0, 0);" data-type="symbol" data-color="#aa6900" data-icon="fa-cloud" class="cell small switch" id="switch_section_wetter"></div>
        <div data-type="label" class="cell darker">Wetter</div>


Die einzelnen "Seiten" sind jeweils in einem .section-div:

Code Auswählen Erweitern

<div id="section_licht" class="section">
  <div class="gridster">
    <ul>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
        <header>KÜCHE / ESSZIMMER</header>
        <div class="container">
          <div class="container top-space">
            <div data-type="switch" data-device="ku_licht" class="cell"></div>
          </div>
          <div class="container top-space-3x">
            <div data-type="switch" data-device="ez_licht" class="cell"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Das ganze braucht eine .hidden-css:

Code Auswählen Erweitern


.hidden {
  display: none;
}


Und folgendes JavaScript:

Code Auswählen Erweitern

$(document).on('ready', function() {
  //erste section aktivieren
  //$(".switch").first().data('famultibutton').setOn();

  $(".switch").click(function(){
    var myNewSectionId = $(this).attr("id");
    myNewSectionId = myNewSectionId.replace("switch_","");
   
    //alle Section-Buttons deaktivieren
    $(".switch").each(function(){
      $(this).data('famultibutton').setOff();
    });
    //alle Sections ausblenden
    $(".section").hide();
   
    //angeklickten Button aktivieren
    $(this).data('famultibutton').setOn();
    //angeklickten Bereich einblenden
    $("#"+myNewSectionId).fadeIn();
  });
});

Wichtig ist also nur, dass die Navigations-Elemente eine id in der Form "switch_blabla" und die "Seiten" eine id in der Form "blabla" haben.

Klappt prima hier
Vielleicht kann das ja jemand gebrauchen.

[ChrisK]

Welche Daten, wofür?
Was haben die Fonts mit dem Einschalten der Widgets zu tun?

Ich glaube, er wollte amunra zitieren

sieht nach fehlenden openautomation.ttf Datei aus.
Stelle bitte sicher, dass alle notwendigen Dateien (openautomation.eot,openautomation.svg,openautomation.ttf,openautomation.woff) im Verzeichnis /fhem/tablet/fonts/ existieren.

[danieljo]

sieht nach fehlenden openautomation.ttf Datei aus.
Stelle bitte sicher, dass alle notwendigen Dateien (openautomation.eot,openautomation.svg,openautomation.ttf,openautomation.woff) im Verzeichnis /fhem/tablet/fonts/ existieren.

Die Daten sind alle in /opt/fhem/www/tablet/fonts enthalten

[danieljo]

Welche Daten, wofür?
Was haben die Fonts mit dem Einschalten der Widgets zu tun?

Entschuldigung ich hatte den falschen Beitrag zitiert

[amunra]

Die Daten sind alle in /opt/fhem/www/tablet/fonts enthalten

Dein beschriebenes Verhalten konnte ich bei mir beobachten als ich eigene Fonts eigebunden habe.

Die Ursachen waren bei mir:
- Fonts Dateien nicht vorhanden (kann man nun bei Dir ausschließen)
- Pfade in der css Datei (in deinem Falls openautomation.css) nicht korrekt - es muss das hier stehen

Code Auswählen Erweitern

@font-face {
font-family: 'openautomation';
src:url('../fonts/openautomation.eot');
src:url('../fonts/openautomation.eot') format('embedded-opentype'),
url('../fonts/openautomation.woff') format('woff'),
url('../fonts/openautomation.ttf') format('truetype'),
url('../fonts/openautomation.svg') format('svg');
font-weight: normal;
font-style: normal;
}
- Berechtigungsproblem

Wenn du die Punkte bei Dir ausschließen kannst und Du an den Dateien keine Änderungen vorgenommen hast, dann gehen mir die Ideen aus.
So funktioniert das bei mir (FTUI Standard-Installalation):

Code Auswählen Erweitern


    <header>Akku</header>
<div data-type="symbol" data-device="Tablet" data-get="powerLevel"
data-icons='["oa-measure_battery_0","oa-measure_battery_25","oa-measure_battery_50","oa-measure_battery_75","oa-measure_battery_100"]'
data-get-on='["0","25","50","75","100"]'
data-on-colors='["#AB0404","#F64E01","#FDAF00","#ADB203","#38B003"]'>
</div>

Vielleicht installierst Du FTUI bei dir mal neu (deine html Dateien vorher sichern nicht vergessen) -> ist ja schnell erledigt.
Viel Erfolg...

[setstate]

Servus Freunde,

war meine Frage zu simple ? Oder einfach übersehen ?

Gruß
Jens

Da niemand darauf antwortet oder eine Lösung anbieten will  , habe ich das Simplechart-Widget etwas angepasst.
$min und $max kann man jetzt mit in data-caption als Platzhalter einbauen:

Code Auswählen Erweitern

data-caption="min:$min°C max:$max°C"