TileBoard - New dashboard for Homeassistant

dont remember if customStyles are work, but you can use

   /* classes: A list of classes to be appended to the tile element
    * Useful for custom CSS styles.
    * This can be a string of space-separated classes, an object like {myclass: true/false}, or an array of such strings and objects.
    * Can also be generated by an anonymous function or a template.
    * Use CLASS_BIG, CLASS_SMALL or CLASS_MICRO to change the size of a tile.
    * The TYPES.WEATHER tile supports '-compact' class for a compact (1x1) tile
    * (optional)
    */
   classes: ['-compact'],
   classes: {'-compact': true},

how is it related? even if I add the classes, how to change the color??

Hi!
Just arrived at HA but everything is working quite well.
I want to try Tileboard as I like its minimalist looks and have an old iPad around. I’ve been reading and trying tutorials but cant figure how to configure it and would appreciate any help!

Running HA with duckdns.
Installed Tileboard as an add-on.
Created tileboard folder (all lowercase)

config.js:

serverUrl: ‘https://xxx.duckdns.org’,
wsUrl: ‘wss://xxx.duckdns.org/api/websocket’,

Everything else is just a copy from config.sample.js. Runs fine using web ui but can’t acess it:

Any help? :slight_smile:

1 Like

I’ve been using Tileboard an Home Assistant trough the docker image for a while now. However, because of USB support (Synology) I had to move to the VM setup. So did the alternative install. I’ve now installed Tileboard trough the Add-Ons in HA itself. It works with the default setup, I see the example dashboard. I try to put my config.js somewhere, but I can’t find anywhere to put it. There is a /config folder in my root and I added a tileboard folder under it, under /config/www. Under other locations, but it keeps complaining it can’t find it.

Please make sure that you have “config.js” file and it is a valid javascript!
If you are running TileBoard for the first time, please rename “config.example.js” to “config.js”

I restarted the HA server and Tileboard a lot, but no luck. The config folder is the one where HA also has the custom-components and the yaml config files.
I got the feeling I overlook something. I can’t even find the images folder with the bg1.jpeg in it on the filesystem, but magically Tileboard does work, just not with my own config.

Edit: I’ve now stopped using the installation trough the add ons of HA but reverted TileBoard back to the docker image I was using and modified the config to point to my new HA host. That works, except the camera images. They are not shown for any of the camera’s (Buienradar, Unify Protect Camera’s etc). Everything else is working fine. The docker image has a different IP/hostname then the VM installation. Does anyone recognise these issues? I’ve tried all the suggestions above with the config file for integration in HA, and searched for the camera issues but it seems I’m overlooking something obvious that goes wrong here.

Hi, just new with homeassistant (ex domoticz) and tileboard, but love it allready.
First thing, @resoai i wish you and your family all the best in this terrible times.

I’ve some questions about the tileboard.

  • Is it possible to hide the homeassistant menu bar, i use tileboard on a samsung tablet running fully kiosk browser. Problem solved, adding kiosk mode in hacs

  • I’m using the light tiles for my dimmers, but i can use the long press function only once, after that i’ll have to refresh first to make it work again, what can i do about this? Problem solved don’t use ingress

  • Is there a place where i can find more examples of custom tiles.
    for example i like to start/stop the sonos app on my tablet( i have the command for this) when i start/end a harmony hub activity. It also has to start/stop when the state of the activity changes.

thanxs for your replies

I suppose you are using ingress mode via “open in web ui”?
grafik

You can https://github.com/resoai/TileBoard#run-within-the-public-home-assistant-www-directory
Then you can open up the site internally:

Any way to dim screen by X% and turn it back on via MQTT (prefered) or RESTful (alternatively)?
I am looking up the docs but I could not find anything.
It also does say nothing about RESTful payloads. The App itself says: “look up the help documentation”.

EDIT:
Found a way deep down in the hidden documentations:

Thanxs that did the trick, i was in ingress mode indeed.
:ok_hand:

I’m facing some other issues with the state of my cover tiles, not all the icon’s are active.
I saw it was an earlier topic and should be fixed a while ago, can i add a line in config to make this work without the actual state? (somfy rts, working with rfxcom)
Or is there another solution.

I created a script to call the cover open/close service and then created a button image

Looking for a same solution. Did you find a way?

I just want to Access Page 2 directly via URL

Is there a way to define a global function once and then reference that function across multiple tiles? I have quite a few sensor tiles linked to batteries. I would like to use a color gradient for the background based on the battery percentage remaining (100% = green down to <10% = red). Rather than copying and pasting this color gradient function for each tile in the customStyles section, was hoping there was a method I can define it once and just call it from the sensor tile. I’m also looking to do something similar for my sensor tiles linked to temperatures (32F = blue / 100F = red, etc…).

THANK YOU! you made my day!

1 Like

Hello,
How can I have differents dashboards when Tileboard is install as add on?

This does not work:

  • config.js will initialize a global CONFIG object. If you want to have several config files, you can create another one next to config.js and name it for example bedroom.js . The specific config will be available at http://HASS_IP:8123/local/tileboard/index.html?config=bedroom .*
1 Like

I cant get this to work anymore, did something change? The tile state updates but when you press it, it does nothing

                  {
                position: [3, 3],
                type: TYPES.CUSTOM,
                title: 'Garage Door',
                id: 'cover.main_garage_door',
                icons: {
                    'open': 'mdi-garage-variant-open',
                    'closed': 'mdi-garage-variant',
                },
                action: function(item, entity) {
		        var action = 'open_cover';
		        if(entity.state === 'open') {
		            action = 'close_cover';
                        }
		        Api.send({
			    type: 'call_service',
			    domain: 'cover',
			    service: action,
			    service_data: {
			    entity_id: 'cover.main_garage_door'
			        }
		        });
                }
                },

angular.js:15697 ReferenceError: Api is not defined
at Object.action (config.js?r=1659129341178:235:33)
at I (main.js:2220:19)
at t.entityClick (main.js:119:17)
at fn (eval at compile (angular.js:16548:14), :4:360)
at i (angular.js:29123:13)
at c.$eval (angular.js:19523:16)
at c.$apply (angular.js:19622:25)
at HTMLDivElement. (angular.js:29127:19)
at Pe (angular.js:3891:11)
at HTMLDivElement.n (angular.js:3879:9)

figured it out Api.send does not work anymore you have to replace it with *this.apiRequest

Hi have you ever managed to make this opacity change?
regards

it would be your addon port /index.html?config=bedroom
in the add on in config in network set a port (mine is 80 for simplicity)
then my url would be http://1.2.3.4/index.html?config=bedroom
1.2.3.4 being your hass ip address

Hello

I need you help.
I have a new ring video door bell and I am using Tleboad since 3 years.
It’s make 3 day that I am trying to add a windows pop up with the video of my doorbell when the visitor push on bell buton!

I have try with TYPES.DOOR_ENTRY (according doc):

       {     
      title: 'Door Ring Camera',
     bg: 'images/bg1.jpg',
     icon: 'mdi-bell-ring-outline', // home icon
  groups: [
            {
               title: '',
               width: 1,
               height: 1,
     items: [
{
   position: [0, 0],
   type: TYPES.DOOR_ENTRY,
   id: 'camera.hikentree_mainstream',
    icon: 'mdi-phone',
    title: 'Door entry',
    width: 0.5,
    height: 0.5,
    state: false,
     layout: {
        camera:  {
            type: TYPES.CAMERA_THUMBNAIL,
            objFit: 'contain',  // https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
            id: 'camera.hikentree_mainstream',
            refresh: 1500,
            bgSize: 'auto',
            width: 0.5,
            height: 0.5,
        },`

But with this I have a button on screan with open a popup ! Fine but the video show me just a small part of my picture!

After I see this information :

var doorentry = {
    position: [0, 3],
    type: TYPES.DOOR_ENTRY,
    id: {},
    icon: 'mdi-phone',
    title: 'Door entry',
    state: false
    ...
};

It’s not clear for me :frowning:

Can you help me?
If some body push on ring bell buton (ID xx in Ha) I want to see a popup windows on my tablet with the video of my camera (Onvif video). The popup have to disapear (close) automatically after 45s.

Thank you in advance for your help
have a nice day
sebatione

updated results…

Lots of MQTT for most values, REST interface from PurpleAir for AQI, Zwave for door/window sensors - all running in FullyKioskBrowser on a kindle-8 from a HA instance in docker on a gen-8 NUC in ubuntu server.

Hi, Thank you.

I just tried but it doesn’t work. I use DuckDNS for HA access.
I tried with local IP with HTTP or HTTPS, and with duckdns but nothing works.

http://x.x.x.x/index.html?config=bedroom
https://x.x.x.x/index.html?config=bedroom
https://DomainDuckDns/index.html?config=bedroom

I tried too with nginx proxy manager (running on Docker in a NAS) get error 400 in HTTP and error 502 if i set HTTPS.