TileBoard - New dashboard for Homeassistant

any possibility to use entity pictures instead of icons for sensor tile?

Thanks @gsksim - if that was for me, I’ve tried it and it doesn’t work.

subtitle: 'Status' + '&sensor.next_train_status_to.state', // Still not working

Hmmm… A bit stumped. Should be easy but I can’t figure it out. From this screenshot you can see the other value is being pulled in.

Screenshot%20at%20Jan%2003%2020-56-31

I have same configuration and its working.

              {
                 position: [0, 1],
                 width: 1,
                 height: 1,
                 type: TYPES.SENSOR,
                 title: 'Garage',
                 subtitle: 'Humidity: ' + '&sensor.tele_humidity.state' + '&sensor.tele_humidity.attributes.unit_of_measurement',
                 id: 'sensor.tele_temperature',
                 state: false // hidding state
              },

image

I suggest you replace all supporting js and css files if there are no changes other than config.js file.

when I looked at the code closely, entity state value for title and subtitle is being pulled using functions (parseVariable, parseString, etc) from main.js file.

Thanks. That worked. What’s the difference between TYPES.CAMERA and TYPES.CAMERA_THUMBNAIL?

Still new to this but I’ve created a train arrivals/departures board based on sensor.uk_transport by @robmarkcole . It’s specifically for the UK. I’ve customised it to show trains leaving and arriving to/from my local station. This helps me know when to drop DW at the station in the morning and collect her in the evening (I WFH). I don’t know if this is the appropriate place to put it so here is just a screenshot. If anyone is interested in the code, ping me.

The only bit I’m not happy with is that in order to highlight the “Next train…” in orange, I’ve had to do .item-list–item:nth-of-type(1) and .item-list–item:nth-of-type(8) in CSS. I can’t seem to figure out how to give a specific class to a TYPES.TEXT_LIST item. If anyone can tell me if it’s possible and if so, how, I can improve the code.

9 Likes

@dalaigh looks great! Are you happy to contribute to https://github.com/robmarkcole/TrasportAPI-HASS ?

Thanks Robin. I’m definitely happy to do so, but perhaps I can get some support here to make just a few mods before doing so. Ideally I could also colour code the status row in red if cancelled, orange if delayed etc. Anyone have any ideas? Thanks!

1 Like

Hi there,

Not a coder here at all, is it possible to recreate buttons from my Lovelace setup?

This is the code in lovelace for the one play/pause button

!         - type: "custom:button-card"
            color_type: card
            color: rgb(66, 134, 244)
            icon: mdi:play-pause
            action: service
            service:
              domain: media_player
              action: media_play_pause
              data:
                entity_id: media_player.spotify 

Capture

Here it is sortof in Tileboard

Capture1

Really nice and your ambitions for colour coding would really polish it off.

Hi all,
Sorry for the rookie question but could you tell me how to fire an event to show a message/notification on the tileboard UI? (I’d like to fire one when motion is detected outside or when certain automations are triggered and display for x seconds) or should I be using notifications for this like this shown below?

You can use a CUSTOM tile and call any HA service directly:

{
   position: [0, 2],
   type: TYPES.CUSTOM,
   title: '',
   id: {},
   icon: 'mdi-play-pause',
   action: function(item, entity) {
     Api.send({
          type: 'call_service',
          domain: 'media_player',
          service: 'media_play_pause',
          service_data: {
            entity_id: 'media_player.spotify '
          }
        });
   }
},
2 Likes

Here is the link to the README on events:

This is how I’m sending an event to show notification on TileBoard:

    - event: tileboard
      event_data_template:
        command: "notify"
        id: "front_gate"
        icon: "mdi-gate"
        type: "info"
        title: "Attention"
        message: "Front gate is opening"
1 Like

Thankyou @resoai, don’t know how I missed this! And thankyou for making such a cool component!

1 Like

Wondering if there is a way to easily disable the functionality of setClimateOption for the climate tile type so that I don’t have people accidentally change that when trying to set the temperature. TileBoard is fantastic, thanks for the amazing project and support on this thread, it’s helped me get started quite easily.

Does anyone have a sample of a remote control GUI using this? If so, care to share your code and icons?

Hi chaps, is there an easy way to remove the header completely? I want to just have tiles. I’m not sure what files I need to hack to do this though.

UPDATE: I got round it by taking -0.5 off my tile positions

I removed mine purely by removing the whole header component

begins with header:

config.js default state line 29 to line 41

1 Like

@resoai - Hi Alexey - as the creator I figure you’d know.

If you have a TYPES.TEXT_LIST - is there any way to set a CSS class to the individual items? I’m using .item-list–item:nth-of-type(1) but that’s a fairly crude way of doing it. If it’s not possible please tell me. I’d like to tidy and contribute this to TrasportAPI-HASS

Thanks a ton!

I’m running Tileboard on Fully Kiosk, but I have the issue that every few days, the login screen is popped up again. It seems the local storage is cleared somehow. Not sure where the problem is.

I’ve created a workaround that might be useful for others. I’ve created a long lived authToken for my user but don’t want to put it in the config file since my TileBoard is public.

Instead, i’ve added the following to the bottom of my config.js:


const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');

if (token) {
  CONFIG.authToken = token;
}

This will take an token from the url and update the config to use that. The authToken in the CONFIG var is still set to null, and it will be overwritten when the token is set in the url params.

I have set the following url in Fully Kiosk:

https://hass.whatever/local/tileboard/index.html?token=eyJ0eXAiOxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Now, I don’t have to enter my password for the next 10 years, and I still am able to put tileboard in the homeassistant config dir :slight_smile:

2 Likes

Also, when you notice that TileBoard doesn’t handle events when the screen is off, you need to downgrade your Webview to 68.0.3440.91 (search online for an apk). Above that version, it seems that webview stops handling javascript when the screen is off, so it’s not possible to remotely turn on the screen trough the tileboard events.

EDIT: ofcourse, this is probably related to the way Fully Kiosk does things.