TileBoard - New dashboard for Homeassistant

thank you! makes sense.

I like this background!

So @resoai,
couple of thoughts. For images, i wrote a shell script which loops through a directory i have, pulls all jpg image filenames and adds them to the config.js file. It also does an exif on each image and places the contents of description field in the entry as well. This is working as expected. Is there a better way to do this via js that you know of? (im not a js guru, yet) I have set the page to auto refresh every 60 minutes so that it can pull any new pictures in. the idea here was i have a screensaver directory synced with nextcloud and anyone in the family can add pictures to it and use it for anything they want - computers, phones, wall-panels - just fyi. and happy to share that script if anyone is interested, since from what i can tell wildcards dont work for filenames in the screensaver module

On this same line of thinking, it would be cool to change the background based on different scenarios, such as weather. Is this something that could be done usuing javascript, or should i just consider another shell script to modify the config.js according to the current weather and let the page refresh take it from there?

Totally agree.
Still, I have in mind several approaches that can be implemented to keep the maximum of existing flexibility.

I’ll keep you updated…

You could use something like this function to load external JS file async:

function loadScript(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url + '?cache=' + Math.random(), false);
  req.onreadystatechange = function(){
     if (req.readyState === 4) {
        var s = document.createElement('script');
        s.appendChild(document.createTextNode(req.responseText));
        document.head.appendChild(s);
     }
  };
  req.send(null);
}

Although this approach is deprecated, it will still work for another 20 years or so. This is the way I currently split my config into multiple files.

1 Like

How can i set tileboard to get the header date in my local format (locale parameter in angular.js fr-FR) ?
I added the angular-local_fr-fr.js but without any success…

This should do the trick:

<script src="includes/angular-locale_fr-fr.js"></script>

@resoai the work you’ve put in on this, and your prompt responses to this thread are amazing!

I was wondering if it’s possible to have the TEXT_LIST type handle a comma-separated list from a sensor attribute. In my specific instance, I’m using the Todoist component and the to-do list items are exposed as a single attribute called all_tasks.

I’ve been trying to get the items property on the type to read from this sensor attribute value, ideally using a .map() function, but I’m not getting very far. It seems that the items property won’t accept a function, otherwise it would be a simple case of calling parseFieldValue, splitting the value out and building the array from that. Something like this:

items: function (item, entity) {
   var tasks = this.parseFieldValue('@attributes.all_tasks');
   //build the output from here...
}

Could you recommend a workaround please? Or am I missing something really obvious?

It works, my locale_fr-Fr.js file was corrupted.

Thanks,
Olivier

How I can use the following, but instead of DOOR_ENTRY i want to actually use the camera and when I click on camera it open the fullscreen camera with additional tiles overlayed?..

{
    position: [0, 3],
    type: TYPES.DOOR_ENTRY,
    id: {},
    icon: 'mdi-phone',
    title: 'Door entry',
    state: false,
    layout: {
        camera: {
            type: TYPES.CAMERA,
            id: 'camera.front_gate',
            refresh: 1500,
            bgSize: 'cover'
        },
        page: {},
        tiles: [{
                position: [0, 0],
                theme: ITEM_TRANSPARENT,
                type: TYPES.SWITCH,
                id: 'switch.intercom',
                icons: {
                    on: 'mdi-phone-in-talk',
                    off: 'mdi-phone'
                },
                states: {
                    on: "Active",
                    off: "Idle"
                }
            },
            {
                position: [0, 1],
                theme: ITEM_TRANSPARENT,
                type: TYPES.SCRIPT,
                id: 'script.front_gate_open',
                icons: {
                    on: "mdi-gate",
                    off: "mdi-gate"
                },
                state: false
            },
            {
                position: [0, 2],
                theme: ITEM_TRANSPARENT,
                id: 'switch.outdoor_lights',
                type: TYPES.SWITCH,
                title: 'Lights',
                states: {
                    on: "On",
                    off: "Off"
                },
                icons: {
                    on: "mdi-lightbulb-on",
                    off: "mdi-lightbulb",
                }
            }
        ]
    }
}

UPDATE:

Found a WA by adding the
bg: '&camera.dafang.attributes.entity_picture',

Is it possible to alter the height and the length of the tiles to make them more horizontal/more rectangular? And would it be possible to round the corners of the tiles on one side, maybe even make it circular? Is it possible to color the tiles independantly? Is it possible to change the fonts of the numbers and text?

If possible I would like to recreate the look of LCARS UI, thats why i’m asking these questions. :slight_smile:

Any ideas why the media element (background) would be so small?

image

{
   position: [0, 4],
   id: 'media_player.all_speakers',
   type: TYPES.MEDIA_PLAYER,
   hideSource: false,    
   hideMuteButton: false,   
   state: false,
   //state: '@attributes.media_title',
   subtitle: '@attributes.media_title',
   bgSuffix: '@attributes.entity_picture',
},

Has anyone been able to update Home Assistant to 0.84.2 from 0.77.x and Tileboards is still working or does it need any changes?

I updated my HA and now just get unknown errors from
scripts/models/api.js:156
scripts/controllers/main.js:1524

Edit:
What is the easiest way to update Tileboards from Github without losing my own changes?

I did switch from API key to a long-lived access token sometime between those releases, probably in conjunction with this change in Tileboard: Long-live tokens in config · resoai/TileBoard@0d55fce · GitHub

The approach I’ve taken is that I forked the Tileboard git repository into a private one (so that I don’t have to worry about access token and other sensitive information), and I configured resoai’s repository as upstream. In my own repository I created a branch where I add all my own custom files and customisations.
To update Tileboard I fetch changes from the upstream repository and override them in my repository’s master, and then I rebase my branch, and use PyCharm’s merge and diff tools to check each change.

2 Likes

Hi all! New user of HA here, trying to learn a lot of stuff all at once so forgive my ignorance!

I love this project, it looks great and some really good support so thanks resoai for all the hard work.

I’m running HA in a Docker container on my Synology NAS, so best practice would be not to change anything within the container because it will be wiped out when I upgrade HA.

Is it possible to run TileBoard in another container on the same box and still have it access HA? I’m kind of new to Docker so not sure what the best method is here. Happy to learn but just looking for anyone who has done this to confirm I’m thinking on the right lines.

Thanks!

your configuration files from HA should also be outside the docker (you dont want to restart every time you upgrade)
so thats the best place to have tileboard files.
they dont need to be in a container.

Hi, thanks for the reply. Yes, I do have the config files outside the container already.

If I put the TileBoard files in this folder though, I will still need to run some kind of webserver pointing at it, surely? Or are you saying that because the config files are already served by the webserver in the Docker container, it will work? Sorry for my noob questions!

Thanks! :slight_smile:

home assistant is a webserver.
in the configdir you can create a www dir and that can be reached with the same url as HA.

dont be sorry to be new to something. none of us did know everything from day 1 :wink:
(or actually none of us do know everything :wink: )

It might be worth noting if you expose your instance of Home Assistant this will not be secure. I have this situation and have another container running locally just for TileBoard.

keep your HA behind a proxy and dont give the pages from tileboard free in the proxy.
it is better not to expose HA directly anyway.

1 Like

Thanks guys! I think the part I was missing was that the www folder lives within the config folder, so it’s already covered by the HA webserver. I was thinking that because it was outside the container, it was outside the web root. From the sound of things, J_IO_B is also confirming that I can run TileBoard in a separate container anyway if needed, I’m thinking any simple webserver would work with it pretty much if I want to split it out. I don’t currently expose HA anyway so for testing/internal use these methods will be fine. Thanks again! :slight_smile: