TileBoard - New dashboard for Homeassistant


You can make .item-clickable { display: none; } in custom.css in order not to edit main css file.


Set border-radius: Xpx; where X is number of pixels.


So Im not sure what the catalyst was, but after updating to 0.86.3 I had to push a few changes which were breaking to resolve my Home Assistant service. Since then, whenever i access tileboard the screensaver does not work. I get an uncaught typeError:
$window.trigger is not a function on script

file tileboard/scripts/controllers/screensaver.js line 67 which is here (lines 66, 67, 68).

  $window.trigger('screensaver:state', newState);
     if(!$scope.$$phase) $scope.$digest();

any thoughts? this was using wallpanel on android, but happens for chrome on mac as well, and i assume all other browsers. I also updated tileboard via ‘git pull’ and restored my config file. hoping someone is familiar with what i broke because google searches have been futile.


@resoai I am freaking loving TileBoard and 95% there was editing and getting this all setup. Other than my question about widening the menu icons - the only other thing I am struggling with is getting the system to refresh when it senses a change on the background (when the weather changes or sun falls to below_horizon - I also have a day and night theme). Do you know how I can add a refresher?

This is my code:

const above_horizon = "linear-gradient(to top right, #003366 1%, #33ccff 90%)",
      below_horizon = "linear-gradient(181.91313517868116deg, rgba(55, 66, 77,1) 4.781553398058252%,rgba(49, 60, 70,1) 28.31079519186315%,rgba(43, 53, 63,1) 57.23792186777624%,rgba(40, 50, 60,1) 71.21705963938973%)";
const backgroundMap = (
  new Map()
  .set(["sun"], "images/backgrounds/clear.png")
  .set(["partly"], "images/backgrounds/partly-cloudy.png")
  .set(["cloud"], "images/backgrounds/partly-cloudy.png")
  .set(["clear", "fine"], "images/backgrounds/clear.png")
  .set(["thunder", "storm", "lightning"], "images/backgrounds/thunder.png")
  .set(["precipitation", "rain"], "images/backgrounds/heavy-rain.png")
  .set(["cloud"], "images/backgrounds/rain.png")


bg () {
          const type = this.parseFieldValue('&sensor.dark_sky_summary.state').toLowerCase();
          for (const [keys, path] of backgroundMap)
          for (const key of keys) {
            if (type.includes(key)) {
              document.body.style.backgroundImage = `url('${path}'), ${this.parseFieldValue('&sun.sun.state').toLowerCase() === "above_horizon"
              ? above_horizon
              : below_horizon


I like tileboard because it’s far more light than lovelace, but the lack of light widget with color picker (effects, etc…) is making me move to lovelace. And I hate it, lovelace is a huge mess of js/css compared to tileboard.
(gonna have to to upgrade rpi3+touchscreen to something faster as well :frowning:)


Surely this is a personal preference but I could never understand the need for different colours for lights. I can understand adjusting colour temperature and brightness but reading a book in a room filled with pink light is something beyond me :slight_smile:


FWIW, my family uses the Hue colors in our house all the time. Sets a mood, augments an event/party, celebrates the season, or just adds some random color rotations. It’s fun. Though, I can see why it’s not for everyone too.


I wouldn’t use it for primary lighting, but do use it for accent lighting and for holidays.


@resoai I think it would be something like:

start a function that checks the state if nothing changed { restart function } else { //(if something changed) do changes and restart function }

But can’t work it out.


You can simply do whatever you want to do with the background in an anonymous function within any tile that changes state frequently.


But this is for the whole page - the background.

Do you have an example of the code, I can try and I will try and work it out :blush:


Sorry, I am travelling so I can’t post the code. It should not matter what you think or it is, you can use anonymous function to do anything you want.


No problem, thanks @resoai - appreciate you replying even though you are travelling. I am not fully sure I understand - the logistics of adding the reloader.

I’ll continue to research and read up on it - although if anyone else can assist - i’d be forever grateful :rocket: :smiley:


You could also run a function on a timer that runs every couple minutes and updates the background. Add something like this to the very bottom of config.js:

setInterval(bgUpdate, 90000);
function bgUpdate() {
  //your background setting code here


I also mainly use brightness & color temp, but we (especially the kids) like to change the color depending on our mood, and we use the effects when partying :slight_smile:


Our above cabinet lights are usually a violet color once the sun goes down, and when we watch our sports teams we may change them to the team colors just for fun… But you’re right no great need for color, however it can be pleasing to some.


For me personally, I have a few color lights but no huge need to update the colors manually. I generally have some default color settings I like (your sports team example, for instance) and I just set those up using scenes or automations. I’d suggest trying that and maybe using tiles to activate your scenes vs having a color picker. Not that it wouldn’t be nice to have the option of a color picker, I just don’t personally find myself missing one too badly. And I say that as someone who initially shared that concern when setting up TileBoard, but as time went along and used it I realized it wasn’t a big deal for me.


Oh, 100% agree. I don’t find myself adjusting the color much. I’m good with Tileboard as-is. But, just presenting the opposing argument as to why some would want the control.


after two days of playing with lovelace, I’m giving up, I’ll be continuing on with tileboard, it’s simpler and lighter. :slight_smile:
sorry for the noise :wink:


Changed from HAdashboard, to this, and it is great!
I’m having some troubles trying to add a hyperlink to a tile.
It is mainly going to use it as a music controller, so i would like to have a clickable tile, that would open spotify, to search for specific songs easily. Something like the ‘navigate’ widget for HAdashboard.
I’ve tried with weblinks, but don’t know which tiletype to use…