Nope. We have discussed internally that it would the best option to rewrite light tile in this way but nobody has actually done anything.
Hi,
I’m really enjoying the look of this dashboard and the quick performance on my low-end tablets. Thanks for developing this.
I don’t know javascript or css.
I’m trying to make my motion sensors have different on/off colors than my door sensors. So I’m trying to add a custom class to the specific motion sensor tiles using:
{
position: [0, 0],
type: TYPES.SENSOR_ICON,
classes: ["-motion"],
title: 'Spare motion',
id: 'binary_sensor.spare_motion',
states: {
on: "On",
off: "Off"
},
icons: {
on: 'mdi-motion-sensor',
off: 'mdi-motion-sensor'
},
I’m trying to specify colors for .item.-off.-sensor_icon .item-entity--icon by adding my custom class info in custom.css:
.-motion .item.-off.-sensor_icon .item-entity--icon {
color: #3664d8;
}
But it doesn’t work.
I can change all sensor on/off colors by just using: (and the corresponding .item.-on.-sensor_icon)
.item.-off.-sensor_icon .item-entity--icon {
color: #3664d8;
}
But I can’t modify using my custom class, .-motion I’m sure it’s a result of my ignorance of css. Any help would be appreciated. Thanks.
I just messed around with my custom.css again, and it seems that I have to change the line:
.-motion .item.-off.-sensor_icon .item-entity--icon {
color: #3664d8;
}
to:
.-motion.item.-off.-sensor_icon .item-entity--icon {
color: #3664d8;
}
Removed the space between .-motion and .item.-off.-sensor_icon
I have no idea what’s going on.
Dear @resoai 
I would like to consult with you one of my ideas before I will waste too much time on something what have no chance to work
In general I’m trying to achieve something similar to this: https://www.youtube.com/watch?v=ebMQwVjVewU which is a very nice and shiny 3D floorplan with all those fancy shadows, lights etc. really cool …
Mr Boralyl explained how he did it here: https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/
… in short he created a set of png files with transparent background and simply placing one above another to achieve current (proper) view of the floorplan corresponding to the state of switches.
in general I could repeat the same and simply embed original HA floorplan into tileboard as an iframe but this is really not usable (at least for me :)) if I have 3 floorplans (difficult to get rid of all those HA menus and don’t even know how to iframe precise FP), further HA is asking for credentials every time when I reload tileboard which is running on my kitchen tablet in “fully” app (kiosk mode) -> I see no option to use longterm authtoken for iframed HA and need to log in manually.
so … back to the point … as the whole idea is based on png files generated/placed one above another I figured out that I can do exactly the same directly in tileboard
for a test purposes I created 3 png files, all in the same size with transparency wherever should be transparent and added them as a TILE_IMAGE in a proper order.
Now in url value I’ve put function which selects proper pnd depanding on the state of the light …
result is the following:
- each square represents let’s say a “room” …
- each room’s png changes (whole png not just color) whenever I switch on or off the light switch
later in the same way I can put interactive buttons (lamps, switches etc) directly above my floorplan so it can be even “clickable” floorplan
will be a little work with proper placing of tiles but I think it is doable
I think by doing this as in the example I could achieve the same as Mr Boralyl did … more or less
now key question … what do you think ? … will it work if there will be dozen layers per each floorplan ? or maybe you think that it will be way too much for tileboard ? will be too slow on tablet or whatsoever … any thoughts appreciated
Do you have any advice or suggestion before I will start “painting” beautiful layers and waste few weeks on it ?
2 Likes
thanks @resoiai
Hi,
this morning I started working with TileBoard and I think it is an absolutely excellent interface integration - thank you @resoai! It also gives me the opportunity to learn and /or refresh CSS and JS.
I have included for one thermostat a Gauge Tile for which I am trying to include a slider - however, that does not work 
This is what I am trying todo - any idea what I am doing wrong?
{
title: 'Heizung',
width: 2,
height: 4,
items: [
{
position: [0, 0],
width: 1.5,
height: 1.5,
title: 'Heizung Arbeitszimmer',
subtitle: '',
type: TYPES.GAUGE,
id: 'sensor.arbeitszimmer_temperature_2', // Assign the sensor you want to display on the gauge
value: function(item, entity){
return entity.state;
},
settings: {
size: 200, // Defaults to 50% of either height or width, whichever is smaller
type: 'full', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 30, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
// label: 'My Gauge', // Defaults to undefined
// append: '@attributes.unit_of_measurement', // Defaults to undefined
// prepend: '$', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
thresholds: { 0: { color: 'green'}, 26: { color: 'red' } }, // Defaults to undefined
labelOnly: false, // Defaults to false
foregroundColor: 'rgba(0, 150, 136, 1)', // Defaults to rgba(0, 150, 136, 1)
backgroundColor: 'rgba(0, 0, 0, 0.1)', // Defaults to rgba(0, 0, 0, 0.1)
fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
},
sliders: [
{
title: 'Temperatur',
field: 'temperature',
max: 26,
min: 18,
step: 0.5,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "temperature"
}
},
],
}
]
}
Any help highly appreciated!
Gauge does not have sliders. You would need to use a separate tile for that.
Thank you for the immediate response - great tool!
Hi everyone. First off all, recently discovered TileBoard and I really enjoy it. Not very knowledgeable with js and css, but with a bit of work and research I usually find a solution.
I’m hoping someone can help me with this.
I have a binary sensor where the value is on or off. I’m pulling this value in the title in an existing tile, is it possible to change the value from on/off to let’s say connected/disconnected. I know this is possible if when I use this sensor as it’s own tile.
Please see attached code below.
{
position: [1, 0],
type: TYPES.SWITCH,
id: 'switch.harley_quinn_charger_switch',
subtitle: 'Cable is',
title: '&binary_sensor.harley_quinn_charger_sensor.state',
states: {
on: "Charging",
off: "Not charging"
},
icons: {
on: "mdi-ev-station",
off: "mdi-ev-station",
}
}
I want to display temperature and humidity values of all rooms in our house on a single page on a tablet. For this the font size for the sensors values should be as large as possible to that you also read it from a distance (the default ~27px are way too small). While it may be possible to change the font size in general by manipulating the CSS files this is a) not maintainable because it overrides the shipped files and b) affects all pages and not just this one. Is there a way to achieve this otherwise?
customStyles sounds like what I’m looking for. I didn’t find it on https://github.com/resoai/TileBoard/wiki/All-Configuration-Fields, is it simply missing there?
Hi,
I love using TileBoard but I have just started with very little knowledge around JS and CSS … but learning 
While I am populating my dashboard for my tablet, there is a couple of things for which I some advice and hope that some other rookies like will find that advice also helpful once it is given
I have two problems, I am currently addressing and hope for your kind help on soling my challenge - however, in order to keep it tidy, I will post one message per question.
Here is my first problem:
- I am using a climate tile and I am wondering why a user would like to see in the middle fo the tile the target temperature and not the current temperature
So I was trying to switch between the current temperature (status) and the targeted temperature (middle of tile) - but I don’t get that working. Please have a look at below …
{
position: [0, 0],
width: 2,
height: 1,
title: '',
subtitle: function() {
return this.states['sensor.arbeitszimmer_humidity_2'].state + '% humidity';
},
type: TYPES.CLIMATE,
id: 'climate.arbeitszimmer',
value: function(item, entity) {
return entity.current_temperature;
},
unit: '°C',
state: function(item, entity) {
return 'target temperature '
+ entity.attributes.temperature
+ '°C';
},
},
- I am putting in the subtitle the humidity of a sensor (sensor.arbeitszimmer_humidity_2)
- I am putting in the state the targeted temperature (entity: climate.arbeitszimmer)
- I am (trying) to put the current temperature in the middle of the tile (entity: climate.arbeitszimmer)
But whatever I do, the targeted temperature shows up in the middle as well as the preset_mode, which I do not need …
Following you also find attached a picture of the entity and it’s attributes in question.
Any help is highly appreciated!
… and here is my second problem I am fumbling with …
For my blinds I am using an input_select with three different choices which are suppose to kick off a node red automation once selected, however, for some odd reason the selection madeis not kicking anything off. If I use this via standard Lovelace though it works. So I presume that I am missing somehow to pass the input_select(ion) made into the event bus … but I do not know what I am missing
{
position: [0, 2],
width: 2,
height: 1,
title: 'Rollos',
subtitle: '',
icon: "mdi-blind",
type: TYPES.INPUT_SELECT,
id: 'input_select.rollos_arbeitszimmer',
state: false
}
The input_select itself is pretty straight forward:
rollos_arbeitszimmer:
name: Rollos Arbeitszimmer
options:
- Rollos unten
- Rollos offen
- Rollos ganz oben
initial: Rollos offen
icon: mdi:blind
Also in this case: any help, comment and/or idea is highly appreciated!
THANKS!
Hi.
I’d like for tileboard to display the last page I was viewing when it reloads/reconnects. Is this possible? Does this involve cookies or something?
I have old repurposed phones that drop wifi and on reconnect they go to the first page and then I have to navigate to the desired page. I realize that I could put effort into fixing the phone and stuff, but I’m first looking for a tileboard solution. I’d prefer to not have specific configs for each phone.
Thanks!
So, in perusing the code, I found
if (!CONFIG.rememberLastPage || !$scope.pages[pageNum]) {
pageNum = 0;
}
in main.js
I added:
var CONFIG = {
rememberLastPage: true,
to my config.js and it seems to be working.
Didn’t find it documented on the wiki. Not sure how to fix the wiki.
1 Like
Hi,
I have made my custom CSS and have:
.item-entity--icon {
font-size: 100px;
line-height: 50px;
}
but I want the icons much bigger but it looks like its getting cut off at the top:
Is there a way to make the icons 3x larger but without the cutoffs?
Hi
How to get that kind of cards(transparency and icons)
Thanks, I’m newbie
Hi, guys such an awesome project thanks @resoai for the good work!!! I’ve started using it not long ago and I’ve added some of my curtains as TYPES.COVER the problem that I have is that after 10 seconds the state of the device goes to unknown is there any way that I could change state unknown for let’s say last known state or button pressed (open/close)? Here is my code:
{
position: [0, 1],
type: TYPES.COVER,
id: 'cover.01266527bcddc2a60a26',
title: 'Master Curtain',
states: {
on: "Open",
off: "Closed",
},
Thanks in advance!
A little unclear about what goes in HA config yaml vs. TileBoard javascript…
Assume that I have 10 sensors that would be defined the same in TileBoard other than their human-friendly name (title), their position in a group, and their sensor id. Rather than having 10 almost identical blocks of code that looks like:
{
position: [1, 2],
type: TYPES.SENSOR_ICON,
title: 'FR Mid',
id: 'binary_sensor.ecolink_door_window_sensor_sensor_6',
states: {
on: "OPEN",
off: "closed",
},
icons: {
on: 'mdi-bell',
off: 'mdi-bell-off',
},
customStyles: function(item, entity){
if (entity.state === 'off') {return {'backgroundColor': '#2E8B57',};}
else if (entity.state === 'on') {return {'backgroundColor': '#B80D0D',};}
else {return { 'backgroundColor': '#FFA100',};}
}
},
What I’d like to do is have basically something like:
sensors: [
{ 'some title here' : { 'binary_sensor.its_id_here', 'x_pos_here', 'y_pos_here' } },
{ 'another title here' : { 'binary_sensor.some_other_id_here', 'x_pos_here', 'y_pos_here' } },
{ 'one more title here' : { 'binary_sensor.one_more_id_here', 'x_pos_here', 'y_pos_here' } },
],
And loop over that list, picking the two values (title and id) and building the tiles programmatically…
(ignore obvious javascript errors above, I’m a python/bash person and don’t type in js by reflex. Consider the above pseudo-code to try to get the idea across…)
I saw some examples way above in this thread, but none of them drop into my config.js and work as-is, so I’m guessing I’m missing something in where to do what.
Any pointers/suggestions ???