Well that was too easy. I guess I should of tried that first.
Example for anyone who wants it which applies to the TEXT_LIST example in post 275.
filter: function (value, field) {
if(field === “value” && value === “unknown”) {
return “0”;
}
if(value === “off”){return “Closed”}; if(value === “on”){return “Open”}
return value;
},
Would be nice to be able to show the full state
Why not use an object instead of if?
I will have to admit my JS skills are not what they used to be. So I am at a loss as to how I could accomplish that.
Since people asked for my config its now up on git @ https://github.com/nayaj/Tileboard
Screenshots (not including screenshots of cameras due to family being everywhere)
Is there anyway to have an event in home assistant trigger a reload of a particular page in the dashboard? Example motion on a camera will change the dashboard page from the home view to the camera view and then back again?
Thanks a lot !
Events is something that will be done next. Basically you will be able to define any function and bind it to an event.
I’ve almost gotten everything for my main tablet converted from HADashboard to TileBoard. Loving the ability to easily customize everything and the overall simplicity of the project and codebase. Custom event support is about the only thing I’m waiting for and I’ll be moving the tablet over full-time. Thanks for sharing your pet project, and being so quick and willing to add new features!
Just have to say this dashboard is amazing @resoai . Setup my first page today in a very short time considering I don’t know JS and am very pleased with it so far. I’m running it on my Raspberry Pi with the 7” touchscreen so the speed factor of this dashboard is amazing.
I did have a question though, I’m trying to get it to run in fullscreen mode on my iPad which I have mounted in another room but it doesn’t seem to work. Do I just need to add support for safari in the HTML file?
Edit: It’s also not working on my android tablet at all. It comes up with a red error message in the top left corner.
@akkaria Looks good! Would you be able to share your config file?
Edit: Does anyone know why my brightness and colour temperature sliders aren’t working? When I press and hold it goes to a blank box.
{
position: [1, 0],
width: 1,
title: 'Bedroom',
subtitle: 'Lighstrip',
id: 'light.lightstrip',
type: TYPES.LIGHT,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb"
},
sliders: [
{
title: 'Brightness',
field: 'brightness',
max: 255,
min: 0,
step: 5,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
},
{
title: 'Color temp',
field: 'color_temp',
max: 588,
min: 153,
step: 15,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "color_temp"
}
}
]
},Thanks @Marauder2 I’ve attached a snippet of my code for the first page. As to why your sliders aren’t working, im not too sure. As mentioned I don’t really know JS and how it works but maybe your indentation isn’t correct… not sure if that makes a difference in JS. I added a brightness slider to my lamp light.lisa and it worked straight away.
{
title: 'Living Room',
width: 2,
height: 4,
items: [
{
position: [0, 0],
type: TYPES.SCRIPT,
id: "script.open_living_blinds",
title: 'Open Blinds',
icons: {
on: "mdi-chevron-up",
off: "mdi-chevron-up"
},
state: false
},
{
position: [1, 0],
type: TYPES.SCRIPT,
id: "script.close_living_blinds",
title: 'Close Blinds',
icons: {
on: "mdi-chevron-down",
off: "mdi-chevron-down"
},
state: false
},
{
position: [0, 1],
type: TYPES.SCRIPT,
id: "script.favorite_living_blinds",
title: 'Favorite Blinds',
icons: {
on: "mdi-star",
off: "mdi-star"
},
state: false
},
{
position: [1, 1],
type: TYPES.SCRIPT,
id: "script.stop_living_blinds",
title: 'Stop Blinds',
icons: {
on: "mdi-stop",
off: "mdi-stop"
},
state: false
},
{
position: [0, 2],
width: 1,
type: TYPES.SWITCH,
id: "switch.front_yard_light_61", // replace it with real string id (e.g. "switch.lights")
states: {on: 'Enabled', off: 'Disabled'}, // Object example
states: function (item, entity) {return entity.state}, // Function example
title: 'Front Yard Light',
icons: {'off': 'mdi-lightbulb', 'on': 'mdi-lightbulb-on'}
},
{
position: [1, 2],
width: 1,
type: TYPES.SWITCH,
id: "switch.garage_door_opener_131", // replace it with real string id (e.g. "switch.lights")
states: {on: 'Enabled', off: 'Disabled'}, // Object example
states: function (item, entity) {return entity.state}, // Function example
title: 'Garage Door',
icons: {'off': 'mdi-garage', 'on': 'mdi-garage-open'}
},
]
},
{
title: 'Main Bed',
width: 2,
height: 4,
items: [
{
position: [0, 0],
type: TYPES.SCRIPT,
id: "script.open_blinds",
title: 'Open Blinds',
icons: {
on: "mdi-chevron-up",
off: "mdi-chevron-up"
},
state: false
},
{
position: [1, 0],
type: TYPES.SCRIPT,
id: "script.close_blinds",
title: 'Close Blinds',
icons: {
on: "mdi-chevron-down",
off: "mdi-chevron-down"
},
state: false
},
{
position: [0, 1],
type: TYPES.SCRIPT,
id: "script.favorite_blinds",
title: 'Favorite Blinds',
icons: {
on: "mdi-star",
off: "mdi-star"
},
state: false
},
{
position: [1, 1],
type: TYPES.SCRIPT,
id: "script.stop_blinds",
title: 'Stop Blinds',
icons: {
on: "mdi-stop",
off: "mdi-stop"
},
state: false
},
{
position: [0, 2],
type: TYPES.SCRIPT,
id: "script.open_blockout_blind",
title: 'Open Blockout',
icons: {
on: "mdi-chevron-up",
off: "mdi-chevron-up"
},
state: false
},
{
position: [1, 2],
type: TYPES.SCRIPT,
id: "script.close_blockout_blind",
title: 'Close Blockout',
icons: {
on: "mdi-chevron-down",
off: "mdi-chevron-down"
},
state: false
},
{
position: [0, 3],
width: 1,
type: TYPES.LIGHT,
id: "light.lisa", // replace it with real string id (e.g. "switch.lights")
states: {on: 'Enabled', off: 'Disabled'}, // Object example
states: function (item, entity) {return entity.state}, // Function example
title: 'Lisas Lamp',
icons: {'off': 'mdi-lightbulb', 'on': 'mdi-lightbulb-on'},
sliders: [
{
title: 'Brightness',
field: 'brightness',
max: 100,
min: 0,
step: 5,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
}
]
},
{
position: [1, 3],
width: 1,
type: TYPES.SWITCH,
id: "light.adam", // replace it with real string id (e.g. "switch.lights")
states: {on: 'Enabled', off: 'Disabled'}, // Object example
states: function (item, entity) {return entity.state}, // Function example
title: 'Adams Lamp',
icons: {'off': 'mdi-lightbulb', 'on': 'mdi-lightbulb-on'}
},
]
}
]
},It should all work just fine. Perhaps you have an error in the config. Are you using the same config?
I’ve noticed that you have states: twice in some tiles, one as a map and one as a function. This was just an example to show that you can use it in various ways
Please post the state dump for your light
There doesn’t seem to be any errors. Yeah I’m using the same config… works fine in safari and chrome on my MacBook, just can’t seem to get it working on my android tablet.
Ah thanks for the heads up. Thought there was something weird there. Will clean it up, cheers.
How do you run it? Do you store it in www directory of HA?
Never mind, I figured it out, I’m just an idiot haha
I do have another question though, is it possible to disable the map portion of the device tracker?
You can force it to only display fixed background by adding by or bgSuffix