Hi

First of all many thanks for this great UI for Fhem.
I searched and tried a lot. But this one really is easy to use, with straight forward, clear display.
Currently I'm using building a site for mobile phone using the menu.html example with toolbar and separate views.
With use of ftui I am able to structure the site very well by extensive use of ftui-content component and lots of icons.
This all works very well.

Although, with growing site I noticed some side effects:
Loading speed decreases with every menu item I add.
Of course I noticed that whole huge content of the site is being loaded at once.
During handling with the site this of course is good because no site loading occurs when e.g. clicking a button.

But with my Firefox and Android browser I also noticed that it seems files are not cached. A http GET for same icon (or http file) is being repeated for every occurence of this icon (or http file) on the site. I can easily test this by setting up a simple site with only 5 icons. It will send 5 http GET with attribute "no-cache".
In Firefox I can see them with its debugging feature.

Does this no-cache happen by purpose ?
Or do you know a reason ? Or maybe I'm missing something?
Would it be possible to activate caching for icons and html ?
I tried to search the js but couldn't find a starting point...

Of course this doesn't matter at all if you have a display just for the purpose of smart home.
I am using the site just with my mobile phone. There the browser often will reload the site.

How I have it structured:

• A lamp is just a ftui-content line in a lamp view - using one common file="lamp.html" plus name="myRoomXX".
• lamp.html creates the view-item with [text]={{name}} plus button and icon
• So, 20 lamps will "call" same lamp.html making look all equal and easy to change.
• In this case ftui loads 20x lamp.html plus 20x lamp.svg (instead of 1x html + 1x svg)
• Each access lasts ~20..30ms which is >1sec just for those lamps.
• Then there is windows, weather, thermostates, ... ;-)

Any ideas are very appretiated.
Best regards, Torsten

Usaing a header tag with a knob component breaks the layout, the header will overlap the component above.

  <ftui-tab-view id="View1">

      <ftui-grid-tile row="1" col="10" height="2" width="2" shape="round" color="primary">
        <ftui-clock format="ee" class="size-5"></ftui-clock>
        <ftui-clock format="DD" class="size-8"></ftui-clock>
      </ftui-grid-tile>

      <ftui-grid-tile row="1" col="8" height="2" width="2" shape="round" color="primary">
        <ftui-clock format="ee" class="size-5"></ftui-clock>
        <ftui-clock format="DD" class="size-8"></ftui-clock>
      </ftui-grid-tile>

      <ftui-grid-tile row="3" col="8" height="2" width="2" shape="round">
        <header>Bad</header>
        <ftui-knob [value]="TempBad:temperature | round(1)" width="120" offset-y="10" type="handle" min="16" max="25"
          unit="°C" readonly has-value-text></ftui-knob>
      </ftui-grid-tile>

      <ftui-grid-tile row="3" col="10" height="2" width="2" shape="round">
        <!--header>Luftfeuchte</header>-->
        <ftui-knob [value]="HumiBad:humidity | round(1)" width="120" offset-y="10" type="handle" min="40" max="100"
          unit="%" readonly has-value-text></ftui-knob>
      </ftui-grid-tile>

    </ftui-tab-view>

Browser: Chrome 86.0.4240.198 and 87.0.4280.88 and Firefox 81.0.2 and 83.0

in weather.map.js same icon for rain and light rain:

Regenschauer: 'LIGHT_SHOWERS',
Regen: 'SHOWERS',
[...]
LIGHT_SHOWERS:'./icons/weather/bas/bas_partly-cloudy-day-rain.svg',
SHOWERS:'./icons/weather/bas/bas_partly-cloudy-day-rain.svg',

should be updated to:

LIGHT_SHOWERS:'./icons/weather/bas/bas_partly-cloudy-day-rain.svg',
SHOWERS:'./icons/weather/bas/bas_rain.svg',

Selection in Medialist widget is not working correctly, the clicked line is never selsected correctly.

When an entry in a playlist has underscores in its file- or foldernames, the whole playlist will not be shown.

Hi, there is a text alignement issue for ftui-knob with Firefox.
As you can see first knob is in Firefox second is in Chrome:

Thanks :)

Commit 14739fd macht Zeilenumbrüche kaputt.
Bekomme es nicht mehr, dass ein langer Text automatisch umgebrochen wird.
Auch der fix 486734a behebt meiner Meinung nach das Problem nicht

Using the chart control I get some strange chart in Firefox (@MacOS Ventura):

When I open it in Chrome it shows like normal:

Do you have any idea how to fix that or what could be the reason?

If you have opened popup1 and within this popup1 you open another popup2.
In this popup2 you have an button with popup-close functionality.

You would expect by clicking on this button on popup2, that only popup2 closes, but instead popup2 and popup1 are closing simultaneously.
An Improvment would be to ab an id to the popupclose button e.g.

Close

Hi,

first of all thanks for the library! Its a great way to create UIs for fhem.

I am having issues with refreshing images based on state changes though, it only seems to work with intervals.

The below code doesn't work, Zeltraum.Kamera is an IPCAM device and I'd expect it to refresh when a new snapshot is made..

<ftui-image src="http://homebridge.local/fhem/images/Zeltraum.Kamera_snapshot.jpg" [refresh]="Zeltraum.Kamera:state:time" nocache>

What am I missing? The image does update when I use an interval. I also noticed that I get errors when I don't supply a full URL for the image, even though the image is available relative to the HTML page.

Trying this on Safari, iOS and MacOS with the latest git version of ftui.

Thanks for any pointers!

Can you extend/replace dateFormat function in ftui.helper.js with DateTimeFormat or toLocaleDateString?
This might be a smart way to get more international names (for months and weekday), abbreviations and time formats.

The docker container does not load, in Portainer I see this error message in the log file:
standard_init_linux.go:219: exec user process caused: exec format error

The docker-compose.yml is:

fhem.tablet: container_name: FHEM.Tablet image: knowthelist/ftui:latest ports: - 8079:80 volumes: - ./fhem.tablet/index.html:/usr/share/nginx/html/index.html networks: - internal

Docker is running on an Intel 64bit based Host with Debian running.

Hi Mario,

I already have a first question. ;)

Currently the tab widgets uses visibility: hidden to hide a view.
This works fine when used in the grid system, as elements which use the same columns/rows are layered above each other.

But if you try to use this without the grid system, the elements still reserve the space on the screen, as hidden: invisible only hides them, but doesn't set the size to zero.
So I would like to ask it this can be changed to display: none.

I already tested your sample files with this fix and they still render the same way.

Regards,
Tobias

https://forum.fhem.de/index.php?msg=1224070

Change Line 293 to this:

/^(?:(set|setreading|attr|trigger)\s)?((?:[^-:\s])*)(?:[-:\s]((?:(?!\$value)[^\s])*))?(?:\s(.*)?)?$/

Hi all,
is there a similar function included like "data-template" in FTUI2?
(see https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Templates)

Best regards,
Andreas

Using the label with the following code <ftui-chart-data label="(Min: $min °C / Max: $max °C)" color="gray"> works fine as label

but the same code is also used while hovering the chart data but the $functions are not resolved.

It would be great to have an option to set a custom "not available" image in image component.

when I start the docker, I become an error:

standard_init_linux.go:219: exec user process caused: exec format error

today, on the 01.02.2023 i try to see the chart-data of the last days.

So i click the navigator to move date to 27.01.2023, but i dont get any data.
With fhem global.verbose = 5 i get the log entries:

2023.02.01 21:39:16 4: WEB_192.168.64.2_55640 GET /fhem/?cmd=get+FileLog_Bewegung_MDIR_O_4F96CF+-+-+**2023-01-27**_00%3A00%3A00+**2023-01-28**_00%3A00%3A00+4%3Atrigger_cnt&asyncCmd=0&fwcsrf=csrf_355115176078942&XHR=1; BUFLEN:0
2023.02.01 21:39:16 5: Cmd: >get FileLog_Bewegung_MDIR_O_4F96CF - - 2023-01-27_00:00:00 2023-01-28_00:00:00 4:trigger_cnt<
2023.02.01 21:39:16 4: FileLog_Bewegung_MDIR_O_4F96CF get: **Input file** ./log/Bewegung_MDIR_O_4F96CF-**2023-02**.log, from:**2023-01-27**_00:00:00  to:**2023-01-28**_00:00:00
2023.02.01 21:39:16 4: FileLog_Bewegung_MDIR_O_4F96CF get: line 1, regexp:trigger_cnt, col:3, output lines:0

The problem seems to be
get: Input file ./log/Bewegung_MDIR_O_4F96CF-2023-02.log, from:2023-01-27_00:00:00 to:2023-01-28_00:00:00

ftui tries to read the chart-data from 2023-01-27 to 2023-01-28 from the file *2023-02.log.
That means ftui chooses the wrong logfile.

In your example https://knowthelist.github.io/ftui/www/ftui/examples/button.html section round.
how to keep the orientation of the switches with different lengths of the label texts?

If i use the attribute webname (Module FHEMWEB) with other names than 'fhem', the JSON parser makes errors.

Hi,

when using charts, especially with "stepped" for on/off switches theres an issue where the "now" point somehow isn't in the diagram and the graph gets rendered wrong. See the below screenshot for an idea about what I mean. The yellow should be a big block all the way to the right, as the light is still "on" when the screenshot is taken.

The only special settings of the graphs are stepped and point-radius=0

Tested in Safari on iOS and MacOS as well as Firefox on MacOS

Thanks for ftui, it's great!

It would be nice to use the color gradient cold-hot also for labels, in general I would like to have the option to use hexcolorcodes in the color attribut, then i could build with map or step my own color gradient.

if the grid is using the "response" tag, the grid-tile attributes "width" and "height" are interchanged.

See grid.component.js -> configResponseGrid

currently there is:

tile.style['grid-row'] = 'span ' + tile.getAttribute('width');
tile.style['grid-column'] = 'span ' + tile.getAttribute('height');

but it should be:

tile.style['grid-row'] = 'span ' + tile.getAttribute('height');
tile.style['grid-column'] = 'span ' + tile.getAttribute('width');

Is it possible to use a hex RGB value for input binding?
My experiments show that this binding only reacts to the name of the color.

For the popup module it would be nice if there is an option to decide between ‚click‘ or ‚long press‘. For example a button opens a popup only by long press and set a stage for short press.
A similar solution is made here:
https://github.com/john-doherty/long-press-event