TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
2013

I think you still need to define it as icons and not icon if you want to use a function. Give that a shot.

2014

Ah ha! Works perfectly - thanks so much! I think there was an issue with the naming of the MDI icons.

OqXiFoq6LY

2015

Phew! Feels like I’m getting there with the home dashboard, finally! For this, I’ve managed to squeeze one full-sized tile (to act as a status for each group) and 3 smaller (height wise) tiles underneath for each room.

Anyone know… is possible to inject CSS into each to adjust the position of the icons (not through the custom.css file) maybe using customStyles: { ?

I am wanting to adjust everything in the RED box slightly so it appears more middle (between the top of the tile and the start of the subtitle). And, maybe centre text.

08
081526×890 320 KB

2016

Is a click action for the header area (time/date) possible?
For example to execute a fully js command to turn off the screen.

If this isn’t possible it would be a nice addition!

2017

I have the menu buttons on the left but they are hard to see with the background I have.

How can I add the dark shaded area behind the whole menu bar, or which items should I change in the css files? On the active screen, the menu button is fine because it has the grey circle, but the inactive menu buttons are just white and hard to see.

Thanks.

2018

I think this should work, insert this into custom.css:

.pages-menu {
  background-color: insert color here;
}
1 Like
2019

You’ll probably have to play around with this a bit, but here’s a starting point to put into custom.css. The first part will handle the vertical position, the second will handle the horizontal centering. You will need to define a custom class for these specific tiles to reference. So, for each tile, include:
classes: ["-custom-class-name-here"]

You can replace custom-class-name-here with whatever works for you in both the tile definition and custom.css

.custom-class-name-here .item-entity {
  top: calc(50% - 45px); /* this is the current setting which starts everything from the tile image
                                     down at the vertical midpoint of the tile. Try reducing that 50% value
                                     until it looks the way you want. */
}
.custom-class-name-here .item-title, 
.custom-class-name-here .item-subtitle {
  text-align: center;
}
2021

You’re super awesome @apop - thanks so much!! Works great!

Here is what it looks like so far. For the big tiles - i hope to add an energy monitor and use grafana to add a background on the energy levels over the last three days. I am loving tileboard!!

SS
SS1532×884 293 KB

2 Likes
2022

Looks great!

2023

Hey! Random… I don’t have an ‘alarm system’ as such but wondering with the alarm panel tile… Could i setup my own system using Xiaomi sensors and a pin code etc?

2024

Yes. You can use Manual Alarm and program your own logic using it. https://www.home-assistant.io/components/alarm_control_panel.manual/

2025

is there a way to have only one tile completely transparent?

2026

Yes, add this to the tile definition:

customStyles: {'background-color':'transparent'}

2027

After the last update my older ipad is no longer able to display css changes. It used to work fine, now it just shows the default settings (so no rounded corners etc, not even if I select the Homekit theme).

Not a big deal, but just wanted to mention it.

2028

trasparente
I’m using CUSTOM_THEMES.TRANSPARENT and customStyles: {‘background-color’: ‘transparent’}, has no effect

2029

is there a way to change the language on the date?

2030

The reply is in this thread.

2031

You could try also adding 'box-shadow': 'none' to your customStyles. I’m not 100% sure that’s going to solve it for you, but I think that will “flatten” the tile at least.

2032

Ive Just started setting up TileBoard to switch over from hadashboard and I really like it so far. However Im still learning js. I defined a sensor icon tile and it works except for the fact I have some states that have spaces. How can I have it work with the ones with spaces?

Heres what I have:

{
position: [5, 0], // [x, y]
width: 1,
height: 1,
title: ‘CLIMATE’,
type: TYPES.SENSOR_ICON,
id: ‘sensor.climate_status’,
//unit: ‘°F’,
state: false, // https://github.com/resoai/TileBoard/wiki/Templates
icons: {
Off: ‘mdi-power’,
Cooling: ‘mdi-snowflake’,
Heating: ‘mdi-fire’,
Aux Heating: ‘fa-fire’,
Sleeping: ‘mdi-power-sleep’,
Audo Fan: ‘mdi-rotate-3d’
}
Forgive me if this has already been answered.

2033

hi, another css question, how to move down point 0,0 (start of camera view)?

image