knowthelist / fhem-tablet-ui

UI builder framework for FHEM

knowthelist

Knowthelist - the awesome party music player

• Easy to use for all party guests
• Quick search for tracks in collection
• Two players with separate playlists
• Mixer with fader, 3 channel EQ and gain
• Auto fader and auto gain
• Trackanalyser search for song start/end and gain setting
• Auto DJ function with multiple filters for random play
• Monitor player for pre listen tracks (via 2nd sound card e.g. USB)
• ... more details can be found on the Wiki

Runs under Linux, MacOS and Windows

Needed packages for building:

• Qt5 or Qt4 core,gui,xml,sql,widgets (Qt5 only) http://qt-project.org
• taglib http://taglib.github.io
• gstreamer-1.0 http://gstreamer.freedesktop.org
• gstreamer-1.0-plugins-* http://docs.gstreamer.com/display/GstSDK/Home
• alsa-devel (Linux only)

Build:

• cd ~/src
• git clone https://github.com/knowthelist/knowthelist.git
• cd knowthelist
• qmake (for MacOS: qmake -spec macx-g++)
• make
• ./knowthelist

MacOS X:

Knowthelist works well on MacOS X.

• OSX 10.6.8 is tested and known to work

It can be compiled to a .app bundle, suitable for placing in /Applications. Compiling is incredibly easy using Homebrew. Just run this command:

$ cp ./dist/knowthelist.rb /usr/local/Library/Formula
$ brew install knowthelist

And you're done. An icon for "knowthelist" should now be in your main OSX Applications list, ready to launch.

Windows:

A prebuilt package for windows is available in the release section on this page. The only prerequisite is a installed GStreamer runtime. But if you what to build Knowthelist on Windows for your self, you can do this like this:

Build dynamic version to debug project:

• Install gstreamer-x86 runtime & devel
• Install Qt5 MinGW incl. QtCreator Due to different exception handling versions (SJLJ, DWARF) of used MinGW comiler for GStreamer and Qt5, it is neccessary to use an own version of taglib. To get this, do this:
• Get CMake and install
• Get taglib and unzip
• Open CMake GUI, select taglib folder, press Configure and build taglib
• Add the taglib bin path (e.g. C:\Program Files (x86)\taglib-1.9.1\bin) to PATH variable into the QtCreator project build enviroment settings
• Add the GStreamer bin path (e.g. C:\gstreamer\1.0\x86\bin) to PATH variable into the QtCreator project build enviroment settings
• Rename libtag.dll and libstdc++-6.dll in GStreamer bin path to _libtag.dll and _libstdc++-6.dll
• Build and run knowthelist project within QtCreator (Ctrl-R)

Build static version for release:

• Install gstreamer-x86 runtime & devel
• Build a Qt static environment
• Build knowthelist via QtCreator (qmake, build release)
• Copy all dll files of the gstreamer's bin folder (e.g. C:\gstreamer\1.0\x86\bin) into the target folder together with knowthelist.exe
• Copy all dll files of the gstreamer's plugin folder (e.g. C:\gstreamer\1.0\x86\lib\gstreamer-1.0) into an new folder named 'plugin' in parallel to knowthelist.exe.
• Run knowthelist.exe

Install packages:

Prebuilt packages for Linux can be found here: http://opendesktop.org/content/show.php/Knowthelist?content=165335

Debian:

Knowthelist is available in Jessie and sid archive

Ubuntu:

$ sudo add-apt-repository "deb http://ppa.launchpad.net/mstephan-r/ppa/ubuntu trusty main "
$ sudo apt update
$ sudo apt install knowthelist

Versions:

• 2.3 (2014-09): Qt5 compatibility and usage of GStreamer 1.x
• 2.2 (2014-08): Support for stored lists
• 2.1 (2014-05): First public version; removed qt3support
• 2.0 (2011) : Qt-only + gstreamer version for multiple OS support
• 1.x (2005) : Only for KDE Linux with arts sound framework

fhem-tablet-ui's Issues

Charts with swiper - cursor gets lost

I've used chart to produce a plot of a max rad valve, desired temperature, actual temperature and valve percentage. I've made this a template and wrapped a swiper around it. Swiping the charts seems to confuse the cursor. It is ok on the first chart but subsequent charts it gets lost.

If I make all the cursor groups the same then you can see the cursor moving on the first chart if you swipe an hold halfway in between so you can see both charts. Making groups all different means I can't see any cursor

widget_highchart: local vs. utc time

It seems that dblog timestamps are returned in local time (in my case GMT+1) but highchart API (per default) expects timestamps in UTC (http://api.highcharts.com/highcharts#global.useUTC) resulting in an offset of the chart.

possible solutions: set global useUtc option to false:
Highcharts.setOptions({ global : {useUTC : false} });
or convert timestamps programmatically. dateFromString(...) honors offset only in case of m matching the date string?

Enhancement: Homestatus widget

ToDo: make it compatible to RESIDENTS and ROOMMATE
Status: unassigned

value icon size by readingsgroup

Readings group show very big icons in tabletui if value icon is defined.

See fhem forum for picture.

http://forum.fhem.de/index.php/topic,34233.msg358957.html#msg358957

fix some proplanta weather translations

@@ -530,9 +530,9 @@ var Modul_weather = function () {
't13': ':haze',
't14': ':rain',
'n1': ':sunny night',
-- 'n2': ':partly cloudy night',
-- 'n3': ':partly cloudy night',
-- 'n4': ':mostly cloudy night',
++ 'n2': ':mostly clear night',
++ 'n3': ':mostly clear night',
++ 'n4': ':partly cloudy night',
'n5': ':overcast',
'n6': ':chance of rain night',
'n7': ':showers night',

Chart widget doesn't update automatic

After the update in FHEM with version 2.2 the chart widget updated no longer automatically.

data-set in select

Da scheint sich ein kleiner Fehler im Select Widget eingeschlichen zu haben. An FHEM wird immer das Reading geschickt, welches im data-get steht.

Change widget_spinner.js for easier formatting

Hi,

need to change the formatting of a spinner-widget. Which would in my case be easier, if "lefticon" would be the first item in the structure and "righticon" the last.
Is there a chance to move the block "prepare text element" before "prepare right icon"?

Thanks and regards
Stefan

Synchronous XMLHttpRequest on the main thread is deprecated

Die JS-Warning:

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

wird verursacht durch fhem-tablet-ui.js, Zeile 31:

$.ajax({
    url: dir+'/'+name+'.js',
    dataType: "script",
    cache: true,
    async: false,
    context:{name: name},
            [...]

bzw. genauer durch "async:false". Gibt es einen Grund, dass dieser ajax-Request synchron sein muss? Ich habe testweise auf "async:true" gestellt und keinen Unterschied bemerkt.

Dimmer widget is using the wrong reading when "data-dim" is set

Hello,

first of all: Thanks for this great work!

Background:
I have got fibaro light dimmers. In my szenario I would like to be able
to turn it ON and OFF BUT also be able to set a specific dim value.
For this hardware the reading for the dim value can be found in "reportedState". But to set this dim value the command "set X dim Y" must be used!
This hardware also supports "set X on|off", but I am using the "dim 0|99" command instead, because it is easier to use.

My current definition is:

I have found no way to have my scenario working.
Looking in the source code I can see:
js/widget_dimmer.js: ~Line 55:
valueChanged: function(elem,v) {
var device = elem.data('device');
localStorage.setItem(this.widgetname+"_"+device, v);
if ( elem.data('famultibutton').getState() === true || elem.data('dim') !== '' ){
if (elem.hasClass('FS20')){
v = this.FS20.dimmerValue(v);
}
var valStr = elem.data('set-value').replace('$v',v.toString());
var reading = (elem.data('dim') !== '') ? elem.data('dim') : elem.data('set');
//next lines is a fix it for me:
//var reading = (elem.data('set') !== '') ? elem.data('set') : (elem.data('dim') !== '') ? elem.data('dim') : '' ;
var cmd = [elem.data('cmd-value'), device, reading, valStr].join(' ');
setFhemStatus(cmd);
TOAST && $.toast(cmd);
}
},

In my opinion and according to your README the command should always be using the "data-set" value (if set) and not the "data-dim" value. Therefore data-set (if set) should always override data-dim.

If perhaps there are reasons for this code (use cases?), I propose to create an additional attribute, which should be used for "dimmer" functionalities:
data-get-dim: previous "data-dim" attribute
data-set-dim: new attribute the be used to set dimmer (if not set use data-get-dim attribute)

Best Regards
Tobias

tablet ui bug?

I'm developing the ui for a new house. I have a side pagebutton menu. On the house screen I have 16 max thermostat (4x4), home status, 2 dummys. The thermostats have labels on them read from the MAX HeatingThermostat mode, i.e. auto or manual. The is a substitution since mode returns 0-4 rather than auto etc.. I have a similar label that gets the battery state. I only have 2 max valves at the moment so these 2 are used for 16 on screen thermostats with just the header names changed.

Empty cache load and all label display correctly. As this is 2 MAX valves then rows 1, 3 all show manual, rows 2, 4 show auto. Click browser refresh and not all labels show. End 2 on row 3 and end 3 on row 4 are blank. This is same for both mode and battery and it is consistently these cells.

This occurs on Chrome and Opera but not Firefox. In Opera and Chrome clicking browser refresh icon gives the error whereas shift or ctrl click refresh does not give the error, I've examined the html with chrome developer tools and the broken labels do not have the "manual" inserted in the div. The correct data must have been fetched because all the other label which use the same data work.

I'd guess this is some sort of timing issue maybe with firefox running slower than chrome? I get the same error on chrome on android tablet as I do with chrome and opera on Win7 pc.

I've tried defining data-hide-on="hide" which as hide is never sent should force it not hide if that was the problem. That didn't help. I've also tried adding a post text. The label still is not shown, not even the post text.

Problem mit Touscreen und Chrome

Unter Windows 10 kann ich, wenn ich die Tablet-UI mit Chrome (aktuelle Version 52) aufrufe, die UI nicht mit der Maus benutzen, wenn ich meinen Computer mit Touchscreen benutze.
Über das Touchscreen selbst geht es, und auch wenn ich einen anderen Browser benutze. Die normale FHEM-Oberfläche funktioniert auch. So wie die beiden Widgets circlemenu und select. An meinem Computer ohne Touchscreen funktioniert die Bedienung per Maus problemlos.

Getestet habe ich alle Widget aus der mitgelieferte index-example.html, davon funktionieren nur circlemenu und select.

departure: listText-DIV not resized correctly

When setting data-height in departure, the listText-DIV is not resized accordingly.

<div data-type="departure" data-device="HM_BVG" data-get="Bot.-Garten" data-width="275" data-height="100" class="DB alternate"></div>

fhem update mechanism broken due to incorrect size in controls_fhemtabletui.txt

Commit: 8bc7039#diff-0d4947d75566cda636dde54ce99ac934

size expected: 33342
currently 33187

Wanted: Create a bash script to support FHEM's update mechanism

ToDo: Understand FHEM's update mechanism and create a bash script for build packages. The index.html should only be updated for new ones, not for own ones
Status: unassigned

New Widget: Complex Chart

ToDo: Create a widget that shows feature rich charts for logFiles or logDB. Example: from nesges
http://fhem.de/TabletUI_1.png
Status: unassigned

Wanted: Wiki maintainer

Todo: Create and maintain wiki page. FHEM wiki (dt.) or github (engl.) for FHEM Tablet UI
Status: unassigned

New Feature: Tab bar widget

ToDo: Implement a tab bar to switch between different pages
Status: unassigned

widget_thermostat: getClimaValues unterdrückt alphanumerische Werte

desired: getPart(val_desired,'(\\d+[.,]?\\d+).*'),

Das ist neu, oder? Thermostat-Devices können auch Werte wie "off" oder "boost" liefern, die damit unterdrückt werden. Ausserdem etwas höher:

var val_desired = getDeviceValue( device, 'get');
var val_desired = ( state && state.indexOf('set_') < 0 ) ? val_desired : getPart(state,2);

Eins von beiden muss sicher weg :-) Ich auch grade, von daher halt ich's mal so fest ohne dem weiter nachzu gehen.

Wiget switch: cmd=setreading muss Reading in data-set-on/off explizit nennen

Um cmd=setreading zu nutzen, muss man das zu setzende Reading in data-set-on/off explizit benennen:

<div data-type="switch" 
    data-device="TIMER5"
    data-get="signaldevice"
    data-cmd="setreading"
    data-set-on="signaldevice monitroid" 
></div>

Einfacher für den User wäre das Reading an der Stelle zu implizieren, wenn es in data-set-on nicht genannt wird. Folgender Vorschlag für widget_switch.js:

toggleOn: function( ) {
     var _reading='';
     var cmd = $(this).data('cmd');
     if(cmd=="setreading" && !$(this).data('set-on').match(RegExp('^'+$(this).data('get')+' ')) ) {
        // possible sideeffect: this would prohibit using a configuration like this:
        //  data-get="somereading"
        //  data-cmd="setreading"
        //  data-set-on="otherreading value"
        //  data-set-off="differentreading value"
        _reading = $(this).data('get')+' ';
     }
     setFhemStatus(cmd +' '+device+' '+ _reading + $(this).data('set-on'));
},

Nebeneffekt wie in den Codekommentaren beschrieben. Wird diese Flexibilität im switch gebraucht oder soll sie der Usability geopfert werden? Bin mir da selbst grade unschlüssig. Ich hab auf jeden Fall einen Moment gebraucht um auf die Idee zu kommen das Reading in data-set-on zu benennen.

Device names with numbers only

I had the problem that when i wanted to use a switch with a device which name consists of only numbers, the current state of the button was not displayed correctly after reloading the page.

My steps to get this bug.
I pushed the button: button turns orange, fhem set's device reading onoff to on.
The i reload the page and the button was gray again.

The switch widget i used.

<div 
  data-type="switch" 
  data-device="631343"
  data-set="onoff" 
  data-get="onoff" 
  class="bigger"
>

And the FHEM device definition:

I found a simple fix:

In js/fhem-tablet-ui.js
Change the lines1418 and 1819 from

$.fn.getReading = function (key, idx) {
    var devname = $(this).data('device'),
        paraname = $(this).data(key);

Javascript parses it directly to an integer and to call the length option on that does not work really well :').

So i made this change to it:

$.fn.getReading = function (key, idx) {
var devname = $(this).data('device').toString(),
        paraname = $(this).data(key).toString();

I am using the latest tablet-ui. Installed today via the 2 commands on the wiki page.

Hopes this helps.

Best Regards
Marcel

support of english wind-direction

Hi,
proposal for english wind-direction in widget:
data-lang="en" (default is german)

changed wind_direction.js as attached.

Is it possible for you to check it in? feel free to change it
Regards!
widget_wind_direction.js.gz

Allow user defined title for departure widget

Adding optional user defined title for departure widget.
This allows for example to use spaces such that title shows Bahnhof Essen instead of Bahnhof-Essen

--- a/www/tablet/js/widget_departure.js
+++ b/www/tablet/js/widget_departure.js
@@ -34,6 +34,7 @@ var Modul_departure = function () {
     function init_attr(elem) {
         elem.initData('get', 'STATE');
         elem.initData('cmd', 'get');
+        elem.initData('title', elem.data('get'));
         elem.initData('color', ftui.getClassColor(elem) || ftui.getStyle('.' + me.widgetname, 'color') || '#222');
         elem.initData('background-color', ftui.getStyle('.' + me.widgetname, 'background-color') || '#C0C0C0');
         elem.initData('icon-color', ftui.getStyle('.' + me.widgetname, 'icon-color') || '#aa6900');
@@ -78,7 +79,7 @@ var Modul_departure = function () {
         $('<div/>', {
                 class: 'station',
             })
-            .text(elem.data('get'))
+            .text(elem.data('title'))
             .appendTo(elem);
 
         // prepare refresh element

to use the feature just add data-title="Bahnhof Essen" in your html file when setting up the departure widget.

Alternatives Widget-Verzeichnis

Die Widgets aus meinem Repository symlinke ich derzeit nach fhem-tablet-ui/www/tablet/js. Schöner wäre die Möglichkeit ein zweites Widgetverzeichnis angeben zu können. Grundsätzlich habe ich dafür funktionierenden Code (s.u.), allerdings wirft er 404er beim Versuch aus dem Standardverzeichnis zu lesen. mW sind die 404er aus Securitygründen nicht unterdrückbar - gibt es evtl. einen eleganteren Weg die Widgets zu laden?

var dir2 = $("meta[name='widget_dir']").attr("content");
[...]
load: function (name) {
  $.ajax({
      url: dir+'/'+name+'.js',
      dataType: "script",
      cache: true,
      async: false,
      context:{name: name},
      success: function () { 
              DEBUG && console.log('Loaded plugin: '+this.name);
              var module = eval(this.name);
              plugins.addModule(module);
              module.init();
      },
      error: function() {
          if(typeof dir2 != 'undefined') {
              $.ajax({
                  url: dir2+'/'+name+'.js',
                  dataType: "script",
                  cache: true,
                  async: false,
                  context:{name: name},
                  success: function () { 
                          DEBUG && console.log('Loaded plugin: '+this.name);
                          var module = eval(this.name);
                          plugins.addModule(module);
                          module.init();
                  },
                  error: function() {
                      console.log("Couldn't load plugin "+this.name);
                  },
              });
          }
      },
  });
},

"startReturnTimer" not called in "widget_pagebutton.js"

since last update the return function within the pagebutton isn't triggered anymore.
last known working version 23b63a9 (pre "Improved pointer events handler")

Bug: Thermostat sizes not as readme

The readme says that thermostat class sizes are: mini, small, big, bigger, readonly (knob has mini, small, large, readonly). The ones that work are large (150px) and big (210px). Default is 100px.

The tablet css defines large, big, bigger, bigplus, grande and small. It would be useful to be able to have larger sizes than 210px (i.e. bigger, bigplus, grande).

Javascript Encapsulation

Current Javascript (from fhem-tablet-ui.js) has several weak spots:

• global variables
• initialize directly after document ready without any options to prevent

additional references:
http://debuggable.com/posts/how-to-write-jquery-plugins:4f72ab2e-7310-4a74-817a-0a04cbdd56cb
http://www.codeproject.com/Articles/757949/JavaScript-Encapsulation-using-Anonymous-Functions
http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Fehler bei Breite im responsive menu

Grundlage ist das Beispiel "index_flex_demo_menu.html". Die Menübreite passt sich nicht richtig an wenn sich die Seite auf unter 900px und 480px reduziert. Problem sind die width: 180px aus ".not([data-type="circlemenu"]) > . menu". Diese werden nicht durch die Media-Query bei verminderter Breite überschrieben. Die Breite bleibt also auch bei unter 900px auf 180px und bei unter 480px wird das Hamburger-Icon nicht angezeigt.

departure: Setting departure time also forces time calculation.

When adding the class deptime in departure, the header changes from in Min to Zeit but also forces the calculation of the departure time. In my setup, however, the field already contains the time. Hence, there should be an option to change the header to Zeit but leaving the field values unchanged.

With deptime: Header correct, value broken:

Without deptime: Header wrong, value correct:

Hardcoded 'WEB' in new check for longpoll

I just updated ftui in fhem and ran into a new error message popping up:
Uncaught TypeError: Cannot read property 'val' of undefined

It turns out that the new check for longpoll is causing this issue.

In fhem-tablet-ui.js, the following check was just added:
if ('WebSocket' in window && ftui.config.longPollType === 'websocket' && ftui.deviceStates['WEB'] && ftui.deviceStates['WEB'].longpoll.val === 'websocket') {

This leads to some problems:

• If not 'WEB' is used as device, this checks for the wrong device

• Once I add "longpoll websocket" to my device, this does not show up in ftui.deviceStates[<myDevice>]. A console.log(ftui.deviceState[<myDevice>] is showing all attribues but not the "longpoll" one so ftui.deviceState[\<myDevice\>].longpoll.val is producing this error

switch status doesnt update when I press the real button hardware. I have to refresh browser to get new status

Volume Widget: unable to preset fgcolor

Warum kann man beim Volume Widget kein default für fgcolor setzten?

Jetzt: 'fgColor': $(this).data('fgcolor'),

Ich möchte: 'fgColor': $(this).data('fgcolor') || '#007733',

Aber in $(this).data('fgcolor') ist schon ein Wert drin, wo ich nicht weiß, wo der herkommt. Oder ich übersehe was bei mir? Im HTML habe ich nix gesetzt. Beim Thermostat geht es bei mir.

Ich habe eine Funktion geschrieben, die die Defaults zusätzlich im CSS File sucht (für unterschiedliche Themes -> mobil: heller und blaue Buttons), dafür brauche ich das.

New Widget: Simple Chart

ToDo: Create a widget to show abstractly a chart to show from logFile. Very simple, just a orange line
Status: assigned to setstate

classchanger-widget not correctly working for pagetab

In my menu bar I would like to hide/show certain buttons based on the overall status of fhem. E.g. if a battery is low, I would like to see a red icon whereas for all batteries ok, a green check-icon would be desired.

I have setup my menu.html as follows:

<body>
   <header>MENU</header>
      <div class='row'>
      :
      <div class="cell" data-type='classchanger' data-device='status' data-get='overallStatus' data-get-on='notOk' data-get-off='ok' data-on-class='hide'>
         <div data-type="pagetab" data-url="status.html" data-icon="fa-check" data-on-color="green" data-off-color="green"></div>
      </div>
      <div class="cell" data-type='classchanger' data-device='status' data-get='overallStatus' data-get-on='ok' data-get-off='notOk' data-on-class='hide'>
         <div data-type="pagetab" data-url="status.html" data-icon="fa-times" data-on-color="red" data-off-color="red"></div>
      </div>
   </div>
</body>

However, this approach did not work, as only the classchanger-div gets the "hide" added as class attribute. I tried modifiying the children-attribues as well in widget-classchanger.js in function update() and this seems to work ok but I have not yet tested other cases.

if (value == elem.data('get-on')) {
	elem.removeClass(elem.data('off-class'));
	elem.addClass(elem.data('on-class'));
	// modify children as well
	elem.children().removeClass(elem.data('off-class'));
	elem.children().addClass(elem.data('on-class'));
} else {
	elem.removeClass(elem.data('on-class'));
	elem.addClass(elem.data('off-class'));
	// modify children as well
	elem.children().removeClass(elem.data('on-class'));
	elem.children().addClass(elem.data('off-class'));
}

Widget Symbol - Warning Badge, Warning Reading

Hallo setstate!

Ich wollte einem Symbol ein Warning Badge verpassen das nicht im state steht. Nachdem das bisher nicht geht hab ich Symbol Widget soweit erweitert. Meiner erster Gedanke an die Namensgebung war get-warn. Das gibt es aber leider schon für Regex. Also hab ich mich für get-warn-reading entschieden.

Ich hänge das diff (gegen die aktuelle im eval branch) mal unten dran, aber wäre es nicht sinnvoller das ganze im widget_famultibutton zu erledigen und auch gleich pagebutton mit zuziehen?
Ich würde ich mich da kommende Woche oder so mal dahinter klemmen. Die if kommt dann weg und eine neue Funktion rein die sich zwischen state und stateWarn entscheidet. Hab mir aber die anderen Buttons noch nicht genau angesehen.

Was meinst du grundsätzlich dazu?

Grüße

diff --git a/js/widget_symbol.js b/js/widget_symbol.js
old mode 100755
new mode 100644
index 6aff0ef..5790bc3
--- a/js/widget_symbol.js
+++ b/js/widget_symbol.js
@@ -20,6 +20,9 @@
             elem.initData('get-on'                  ,'open');
             elem.initData('get-off'                 ,'closed');
             elem.initData('get-warn'                ,-1);
+            elem.initData('get-warn-reading'        ,'');
+            
+            me.addReading(elem,'get-warn-reading'); 
             elem.data('mode', 'signal');
             me.init_attr(elem);
             me.init_ui(elem);
@@ -28,8 +31,12 @@

     function update_cb(elem,state) {
         $('.fa-stack:has(.zero)').removeClass('fa-stack');
-        if (elem.hasClass('warn') || elem.children().filter('#fg').hasClass('warn'))
+        if (elem.hasClass('warn') || elem.children().filter('#fg').hasClass('warn')) {
+           var stateWarn = elem.getReading('get-warn-reading').val;
+           if( stateWarn && stateWarn != "" )
+               state = stateWarn;
             this.showOverlay(elem,getPart(state,elem.data('get-warn')));
+        }
         else
             this.showOverlay(elem,"");
     };

Define standard colors for CSS

ToDo: design and add 3-4 standard colors for CSS files and create a docu for how to use this. The colors must fit to the FHEM Tabelt UI design: no flashy spucky colors like #FF0000 or #00FF00
Status: unassigned

Option for widgets to force refresh

After playing with popup as a big thermostat triggered by clicking a small readonly thermostat I found it better if on close popup triggers a shortpoll to refresh. I could image that to be useful at other times with popup and maybe others when you have done something that affects other elements so need them to reflect that. Hence I'd like to suggest that is an option on all widgets.

widget_circlemenu: item_diameter und circle_radius als "data-"-Wert verfügbar

Es wäre toll, wenn die beiden Parameter in der Definition des Widgets verfügbar wären, sodass man das Widget daumenfreundlicher anlegen kann.

Suggestion: Knob with +/- buttons

The knob can be a bit tricky for fine adjustment, especially on small tablets. It would be nice to be able to link this with some up/down buttons for when you just want to make a fine change. This would be best done in the js so the change appears instantly on screen rather than the buttons changing the setting in fhem and then having the wait for the change to propagate back to the tablet. I guess it would also need a time out value, such as 2s, so that no button press for 2s would trigger the knob to update fhem with the new value. You wouldn't want fhem updated each button press in case you were doing a few.

Not working with Midori

Tablet UI is not working with midori (a greate small browser eg. for pi with touchscreen)...

knob-Widgets: Ticks unsichtbar im Desktop-Browser

Im Desktop-Browser (Chrome, Windows) werden die Ticks sämtlicher knob-Widgets (wahrscheinlich schon länger) nicht mehr angezeigt, auf dem Tablet sind sie sichtbar (Chrome, iPad).

Use Toast messages for alarms

$.toast( {
            text : "Let's test some HTML stuff... <a href='#'>Link</a>",
            bgColor : '#ff3333',              // Background color for toast
            textColor : '#eee',            // text color
            hideAfter : false,              // `false` to make it sticky or time in miliseconds to hide after
          })

Maybe in a alarm widget

setFhemStatus() might not work because of browser caching

I experienced an issue where setFhemStatus() did not work "after some time" because the browser cached the response of the initiated ajax request.
..have been able to avoid this by setting $.ajax() option "cache:false"

Enhancement: Thermostat widget

ToDo: Implement OFF Status
Status: unassigned

Symbol-Ergänzung widget-weather Proplanta

Ich habe bei Proplanta einen bisher nicht definierten Wetterzustand festgestellt, wobei also kein entsprechendes Symbol zugeordnet ist.

Ich schlage als Ergänzung Zeile 146 vor:
'Spruehregen': 'mist.png',

different loading behaviour in landscape and portrait mode

FHEM tablet ui version: 1.4.4
Device: iPhone 6S, iOS 9.2
Browser: Chrome 47.0.2526.107

When loading the tablet UI interface in landscape, all boxes appear as expected. Switching the device to portrait then, all boxes appear, as expected.

However, loading the page in portrait directly, only (in my case) the first box appears.

weather-Widget falsches Symbol proplanta

Im weather-Widget wird für Proplanta ein falsches Wetter-Symbol angezeigt.

Richtig wäre:
Zeile 137: "bedeckt": 'overcast.png',

Bitte korrigieren
Danke.

Fehlender Parameter in Readme/Doku zu Pagebutton Widget

Der Parameter get-warn ist in der Readme/Doku des Widgets pagebutton nicht erwähnt

size missmatch of fhem-tablet-ui.css

2016.12.09 16:13:38 1 : Got 35599 bytes for www/tablet/css/fhem-tablet-ui.css, expected 35687
2016.12.09 16:13:38 1 : aborting.

tnx
Dirk

use a better colorwheel?

The current (farbtastic/jquery) colorwheel is unintuitive since it does not present the hsv colorspace intuitively.
The value for 100% saturation and 100% brightness is not assigned to one of the corners of the square but sits at x=0, y=50% with everything going up from that reducing saturation again until at y=100% it reaches 0 and value remains at 100%.
The html5 colorpicker presented here seems more natural and intuitive.