TileBoard - New dashboard for Homeassistant


Finally found the time to move to Tileboard and worked together with a friend on the preliminary layout. Any thoughts are welcome.


Use the Custom tile type with the navigation as the action. Something like one of the following:

window.location = 'https://newurl.com'

The tile config would look something like this:

   position: [0, 5],
   width: 2,
   height: 1,
   type: TYPES.CUSTOM,
   title: 'New',
   id: {},
   action: function(item, entity) {
      window.location = 'https://newurl.com';

I didn’t test this, just found the javascript code strings online.


Amazing! Thank you, it works just like i want it :slight_smile:


Nice shot of your kitchen. May I ask: What lights are you using above? Is it just another pair of strips or do you use something else? (And which strips do you use?)


Same strips below and above. There are a number of strips that use the Magic Home app and compatible controllers. Amazon literally has tons of different brands and sellers. I have a brand called AEGOOL. You can use the FLUX LED component in HA to control them. If you are good at soldering, I think you can even flash these controllers with Tasmota and just control them locally using MQTT.


@gsksim How did you added Humidity value under same Tile as Temperature?



  • subtitle - this will make humidity or any sensor value display under main sensor value

                   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


How did you set up Day and Month in different language?


Does anyone know how I can align my header (the weather on the right side) - align right and match the padding / margin on the left? So the left margin aligned left and the right side aligned right.


You can add to custom.css something like this:

.page-align {
    margin-left: 0px !IMPORTANT;

You should adjust the 0px value as you wish…
I would recommend not to make too much custom changes and try to adjust the size of the tiles in your config.js file.


The left is fine.
I am mainly asking about the right hand side - it looks off compared the left side.


So as I mentioned, adjust the size of tiles…


I don’t think you have fully understood my question. Feel free to read it back and let me know if you have any questions.


Well, since it’s set up to scroll horizontally, the right side is going to flow offscreen. I don’t know that there’s a way to control that other than changing the tile size/arrangement so that it all fits on screen and scrolling is not required. The only thing I can think of would be to put all the tiles inside of an iFrame, which would require extensive customization of the source code.


It’s the header I am concerned about. I want the right side to match the left side, align it right and match the same spacing either side. I am totally fine with the tiles over flowing. In fact, I have another group which can’t be seen until you scroll.



you can translate it manually at the end of /config/www/tileboard/scripts/vendors/angular.min.js file.

For the screensaver date format, change it in /config/www/tileboard/scripts/directives.js.


I’ve added <script src="scripts/angular-locale_nl-be.min.js"></script> at the end of the scripts in the index.html

Then, you can get your language at https://cdnjs.com/libraries/angular.js/ for example.


atm I’m working this around using an input_select holding effects & colours and a python script on home assistant side. not very convenient, but that’s a first step :slight_smile:
(next step is to create a LIGHT_SELECT, and next one is to find an appropriate color-picker :))


I get your question now, I missed that you were referencing the header. I think it’s because your navigation is on the left hand side, so the header is using the same margins on the right and left when taking the whole page into account. Technically, the header is balanced if you count the navigation as part of the page. The navigation appears to be 120px wide in the CSS, so maybe give this a shot in your custom.css file:

.header {
  left: 120px;

That should move the start of the header 120px over and then it should be balanced over the tile content only.


Yeah ! Thanks a lot for this tip !!!