TileBoard - New dashboard for Homeassistant

oh, derp! my bad.

In this file: config\www\tileboard\scripts\vendors\angular.min.js
Search for Monday, Thuesday… and change it to something you want. Same for Month

hi all! I’ve just started updating all my tablets around the house to TileBoard. I’m loving it so far!
I’m working on the weather tile and to have the background update as the state gets updated. Could someone point me in the right direction with this, as I’ve already written the function for the bg part:

                 bg: function (item, entity) {
                     if (entity.state == 'cloudy' || 'partly-cloudy-day' || 'partly-cloudy-night') {
                       return '/local/tileboard/images/weather/cloud.jpeg';
                     }
                     else if (entity.state == 'clear-day') {
                       return '/local/tileboard/images/weather/clear_day.jpeg';
                     }
                     else if (entity.state == 'nt-clear-night') {
                       return '/local/tileboard/images/weather/clear_night.jpeg';
                     }
                     else if (entity.state == 'rain' || 'sleet' || 'Drizzle') {
                       return '/local/tileboard/images/weather/rain.jpeg';
                     }
                     else if (entity.state == 'snow') {
                       return '/local/tileboard/images/weather/snow.jpeg';
                     }
                     else if (entity.state == 'wind' || 'fog') {
                       return '/local/tileboard/images/weather/fog.jpeg';
                     }
                     else {
                       return '/local/tileboard/images/weather/default.jpeg';
                     }
                   }

Thi sis what I have so far, but doesn’t seem to be working.

here !

:wink:

1 Like

It’s been a while since I use tileboard on my smartphone. I’ve never had big problems. sometimes it gives me the invalid password message, but after a few moments it loads the tileboard interface normally.
I decided to hang a tablet on the wall completely dedicated to tileboard. I took an old asus zenfone 10. I thought it was perfect for the purpose. even if not so fast, it has the double tap to wake up the device. I installed kiosk full browser, but after seeing problems I tried also with chrome and with “fullscreen browser”
tilbord is loaded normally, but if the device goes into sleep mode on wake up the last tilebord page is displayed, but no command works.
I opened a new iusse in the repo. and I was advised to check the connection and to insert the reconnectafterscreensaver command.
now I have come to this result:
if I wake up the device after a few minutes, I get the screensaver and after tap on the screen tileboard is reloaded (operation that takes about 4/5 seconds) after tileboard works quietly.
if I wake up the device after one hour, the screen saver appears, tap and this time no command works.
have you had similar problems?
what tablet are you using that works?
I have no problem with lovelace. I see that lovelace is reloaded, the operation lasts a few moments and everything works normally

I have the same problem, when I unlock my ipad Tileboard is unresponsive (not always but often). I use Kiosk Pro on the iPad which gives me a refresh button on the page which resolves the problem for me. But admitted it isn’t ideal. My preference would actually go out to a lovelace interface but my iPad is too old to display custom cards.

Still Tileboard is the best solution for older devices!

Loving the TileBoard. Got my first page up with no problem. When I added pages 2 and 3 I noticed the menu bar isn’t centred and some items are not viewable/clickable. Thought it must be something i did so I brought up a fresh install only to find the issue was there from the start. Also noticed that the header is displayed on top of the first row of groups.

I realy like this project, but having problems getting it to run.

I use Home Assistant (HASSIO) version 0.88.1 and use SSL.

I use the standard config.js but changed the serverUrl and wsUrl to my needs:
serverUrl: “https://xxxx.duckdns.org”,
wsUrl: “wss:https://xxxx.duckdns.org/api/websocket”,
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)

In chrome and after connecting to
https://xxxx.duckdns.org/local/tileboard/index.htm
<entering username/passsword>


I get this screen:

I’m a bit stuck ;-)…Any ideas.

Well, wss://xxx.duckdns.org

if (entity.state == ‘rain’ || ‘sleet’ || ‘Drizzle’)

Should be:

if (entity.state == ‘rain’ || entity.state == ‘sleet’ || entity.state == ‘Drizzle’)

etc

Thanks that did the trick for me !!!

So, the config for https duckdns users is:
serverUrl: “https://xxxx.duckdns.org”,
wsUrl: “wss://xxxx.duckdns.org/api/websocket”,
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)

Thanks @resoai for the help! Unfortunately, I removed the or statement before you answered and I’m having trouble even with the basic function. I’ve read up the API documentation of Dark Sky too and they suggest using the sensor.dark_sky_icon.state rather than the summary state as that one is changing fast and rapidly. Is it possible to use the icon state like this inside a function:

bg: function(item, entity) {
  if ('&sensor.dark_sky_icon.state' == 'clear-night') {
    return '/local/tileboard/images/weather_bg/clear_night.jpeg';
  } else {
    return '/local/tileboard/images/weather_bg/default.jpeg';
   }
 }

Because unfortunately this only returns the default bg. Or should I set a var with the icon state and then call that in inside of the function? Thanks for the help in advance! :raising_hand_man:

if (this.parseFieldValue('&sensor.dark_sky_icon.state') == '...'

1 Like

Hi Michael, can you share your index.html for the language solution ?
If tried different possibilities and variations in the index.html file, but do not get tileboard in the Dutch language. I must do something wrong.

I’m trying to find out what “reconnectAfterScreensaver: true” actually does in the code and I’m unable to locate it anywhere except the config file. Does anyone know exactly what routine this performs? thx in advance.

Also @resoai is there a way to setup an event to trigger an entire page reload from Home Assistant?
ex:

{ 
"command": "reload_page",
"page": "0"
} 

and a corresponding event in my config.js (dunno the syntax or if its even possible)

{
command: 'reload_page',
action: function(e) {
window.reloadPage(CONFIG.pages[e.page]);
}

Edit: added question about reloading entire page/screen

This is a purposusely undocumented WIP thing which will be remowed.

You can reload page just like any other one:

window.location.reload(true);

2 Likes

Is there any way to better fit and show the camera on mobile? Tried both cover and contain… Thanks!

I didn’t need to use the list of cameras so I simply hid the entire element using display:none:

{display: none;}

All together would be something like this in custom.css

.camera-popup--list {
 display: none;
}

If you need the list of cameras its much more difficult to remove…

Excellent, figured it was a WIP or something. Your command worked great too thanks!

@resoai Is it possible to add a click action for the header?
I am thinking of a way to launch a js command (for fully to turn the screen off), when I click on the time in the header.