Hello guys,
I hope that someone can point me to the right direction.
In home assistant you have the wallbox charging station integration which works well, I would like to have this integration to show up in tileboard, but I don’t have any clue where to begin.
Thanks in advance…
What do you want to show? That integration has multiple sensors, so you can add various tiles for it.
Hi,
Has anyone succeeded in switching css theme on reception of an event ? I could not figure out how to do this.
I’d like to switch to a dark theme at night or in certain cases.
Alternatively, is there an easy way in javascript to set a certain style for all item types ?
Thanks,
Jean-Michel
Yes, thank you … that did the trick…
just importing the sensors into the tiles,
here is it in case someone else need it
title: 'Wallbox Portal',
bg: 'images/bg2.png',
icon: 'mdi-ev-station',
groups: [
{
title: '',
width: 3,
height: 4,
items: [
{
position: [0, 0],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Added Energy',
id: 'sensor.wallbox_portal_added_energy',
state: false, // hidding state
},
{
position: [1.2, 0],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Added Range',
id: 'sensor.wallbox_portal_added_range',
state: false, // hidding state
},
{
position: [0, 0.5],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Charging Power',
id: 'sensor.wallbox_portal_charging_power',
state: false, // hidding state
},
{
position: [1.2, 0.5],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Charging Speed',
id: 'sensor.wallbox_portal_charging_speed',
state: false, // hidding state
},
{
position: [1.2, 1],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Charging Time',
id: 'sensor.wallbox_portal_charging_time',
state: false, // hidding state
},
{
position: [1.2, 1.5],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Cost',
id: 'sensor.wallbox_portal_cost',
state: false, // hidding state
},
{
position: [1.2, 2],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Current Mode',
id: 'sensor.wallbox_portal_current_mode',
state: false, // hidding state
},
{
position: [0, 1],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Depot Price',
id: 'sensor.wallbox_portal_depot_price',
state: false, // hidding state
},
{
position: [0, 1.5],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Max Available Power',
id: 'sensor.wallbox_portal_max_available_power',
state: false, // hidding state
},
{
position: [0, 2],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'State of Charge',
id: 'sensor.wallbox_portal_state_of_charge',
state: false, // hidding state
},
{
position: [0.6, 3],
width: 1.2,
height: 0.5,
type: TYPES.SENSOR,
title: 'Status Description',
id: 'sensor.wallbox_portal_status_description',
state: false, // hidding state
}
]
},
]
},hi!
two questions on the tileBoard AddOn:
a) how can I configure the URL to have it displayed on my tablet?
b) is it possible to get multiple instances for different tailboards on different tablets?
thanks in advance, Michael
a) add a port in the host field on the network section. You can then used your HA ip:port
b) Not with the default addon. If you have a separate server you can map various ports with each it’s own http root. You can however create your own addons (as a copy) and give each it’s own config folder.
Tileboard itself provides a way to use different config based on the query parameter (https://github.com/resoai/TileBoard#configure) but the addon probably doesn’t currently support it. Should be pretty easy to add. PRs welcome.
I have tried that and that works as well. Nice one.
You have to restart to Addon when a new config file is added but then you can use the querystring just fine.
thanks, that worked quite well.
But with two sensors, I do get the following error:
[Error] XMLHttpRequest cannot load https://xxxxxxx.ui.nabu.casa/api/history/period/2021-09-08T18:58:55.391Z?end_time=2021-09-09T18:58:55.391Z&filter_entity_id=sensor.humidity_35 due to access control checks.
I you are using Tileboard, I suggest to use your local network IP adress.
Do NOT expose the tileboard port(s) to the internet.
I didn’t do that. I just installed the Add-on and used the well functioning config-file as before (in the www folder).
I’m not sure, why it is trying to load the sensors from nabucasa!?
Are you opening TileBoard using the icon in the side bar?
Also, what is the URL in the browser when getting that error (censor it if needed but I want to know if it’s local or not).
no, I’m using the defined port from configuration:
edit: when using ingress (icon in the sidebar) everything works fine…
When using ingress all communication is done internally so yes, that will work.
When using exposed port the URL of the API is “guessed” from HA configuration to simplify the setup for the users.
Since you’ve created https://github.com/resoai/TileBoard-addon/issues/24, we can continue discussion there.
I have searched the tileboard forum but I couldn’t find an answer to this.
I customized the default theme and now I have 4 pages exactly the way I want them.
When I move from page to page there is a nice scrolling animation that moves the pages up or down.
Is there a way to have a background image “pinned” so that it doesn’t move when I go from one page to another?
I want the animation to be applied only to the contents of the page. Not the background.
Looks nice! Care to share? I wanted something similar but did not have the time to get it to work.
I will see if I can get the sticky background going.
Sure. This is my fav page (quick 'n dirty) :
/*
This is an example configuration file.
COPY OR RENAME THIS FILE TO config.js.
Make sure you use real IDs from your HA entities.
*/
var CONFIG = {
customTheme: null, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
serverUrl: 'http://' + location.hostname + ':8123',
wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
//googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
//mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
debug: false, // Prints entities and state change info to the console.
pingConnection: true, //ping connection to prevent silent disconnections
locale: 'el-gr', // locale for date and number formats - available locales: it, de, es, fr, pt, ru, nl, pl, en-gb, en-us (default). See readme on adding custom locales.
// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // HORIZONTALLY, VERTICALLY, GRID
onReady: function () {},
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
margin: '30px 130px 0',
fontSize: '22px',
color: 'rgba(68, 115, 158,.99)'
},
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'Weather'
},
{
type: HEADER_ITEMS.WEATHER,
styles: {
margin: '0'
},
icon: '&weather.openweathermap.state',
state: '&weather.openweathermap.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'unknown',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'rain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'wind': 'unknown',
'windy': 'unknown',
'windy-variant': 'unknown'
},
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
fields: {
temperature: '&sensor.openweathermap_temperature.state',
temperatureUnit: '°C',
}
}
],
left: [
{
type: HEADER_ITEMS.DATETIME,
},
]
},
pages: [
{
title: 'Main page',
bg: 'images/bg111.jpg',
icon: 'mdi-heart', // home icon
groups: [
{
title: 'Sensors',
width: 2,
height: 3,
items: [
{
position: [0, 0],
//type: TYPES.SENSOR,
title: 'Home Average',
type: TYPES.GAUGE,
customStyles: {'background-color':'rgba(240, 240, 240, 0.3)', 'color':'rgba(68, 115, 158, 1)'},
id: 'sensor.average_home_temp',
unit: '°C', // override default entity unit
state: false, // hidding state
value: function(item, entity){
return entity.state;
},
settings: {
size: 120, // Defaults to 50% of either height or width, whichever is smaller
type: 'arch', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 60, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1000, // Defaults to 1500ms
thresholds: { 0: { color: 'blue'}, 17: { color: 'green' }, 24.0: { color: 'orange' }, 28.5: { color: '#df4c1e' } }, // Defaults to undefined
labelOnly: false, // Defaults to false
},
},
{
position: [1, 0],
title: 'Living Room',
type: TYPES.GAUGE,
customStyles: {'background-color':'rgba(240, 240, 240, 0.3)', 'color':'rgba(68, 115, 158, 1)'},
id: 'sensor.living_room_temp',
unit: '°C', // override default entity unit
state: false, // hidding state
value: function(item, entity){
return entity.state;
},
settings: {
size: 120, // Defaults to 50% of either height or width, whichever is smaller
type: 'arch', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 60, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1000, // Defaults to 1500ms
thresholds: { 0: { color: 'blue'}, 17: { color: 'green' }, 24.0: { color: 'orange' }, 28.5: { color: '#df4c1e' } }, // Defaults to undefined
labelOnly: false, // Defaults to false
},
},
{
position: [0, 1],
width: 1,
height: 1,
title: 'Fuel Tank',
//subtitle: 'Roof',
type: TYPES.GAUGE,
state: false, // hidding state
customStyles: {'background-color':'rgba(240, 240, 240, 0.3)', 'color':'rgba(68, 115, 158, 1)'},
id: 'sensor.fuel_tank', // Assign the sensor you want to display on the gauge
value: function(item, entity){
return entity.state;
},
settings: {
size: 120, // Defaults to 50% of either height or width, whichever is smaller
type: 'arch', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 1000, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
labelOnly: false, // Defaults to false
},
},
{
position: [1, 1],
width: 1,
height: 1,
title: 'Humidity',
//subtitle: 'Average',
type: TYPES.GAUGE,
customStyles: {'background-color':'rgba(240, 240, 240, 0.3)', 'color':'rgba(68, 115, 158, 1)'},
id: 'sensor.lywsd03mmc_hum', // Assign the sensor you want to display on the gauge
state: false, // hidding state
value: function(item, entity){
return entity.state;
},
settings: {
size: 120, // Defaults to 50% of either height or width, whichever is smaller
type: 'arch', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 100, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
labelOnly: false, // Defaults to false
},
},
{
position: [0, 2],
width: 2,
height: 1,
title: 'Solar Boiler',
subtitle: 'Roof',
type: TYPES.GAUGE,
customStyles: {'background-color':'rgba(240, 240, 240, 0.3)', 'color':'rgba(68, 115, 158, 1)'},
id: 'sensor.solar_boiler_temp', // Assign the sensor you want to display on the gauge
state: false, // hidding state
value: function(item, entity){
return entity.state;
},
settings: {
size: 170, // Defaults to 50% of either height or width, whichever is smaller
type: 'semi', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 100, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
thresholds: { 0: { color: 'blue'}, 40: { color: 'orange' }, 65: { color: '#df4c1e' } }, // Defaults to undefined
labelOnly: false, // Defaults to false
fractionSize: 1, // Number of decimal places to round the number to. Defaults to current locale formatting
},
},
]
},
{
title: 'Lights',
width: 2,
height: 3,
// row: 0, // optional; index of the row used for the GRID layout. If not specified, the default is 0
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SWITCH,
id: 'switch.livingroom_light1',
title: 'Lights 1',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-ceiling-light', 'on': 'mdi-ceiling-light'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
id: 'switch.entrance_light',
title: 'Entrance light',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-coach-lamp', 'on': 'mdi-coach-lamp'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [0, 1],
width: 1,
type: TYPES.SWITCH,
id: 'switch.livingroom_light2',
title: 'Lights 2',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-ceiling-light', 'on': 'mdi-ceiling-light'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [1, 1],
width: 1,
type: TYPES.SWITCH,
id: 'switch.wall_lamp',
title: 'Corridor',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-wall-sconce', 'on': 'mdi-wall-sconce'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [0, 2],
width: 1,
type: TYPES.SWITCH,
id: 'switch.livingroom_light3',
title: 'Lights 3',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-ceiling-light', 'on': 'mdi-ceiling-light'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [1, 2],
width: 1,
type: TYPES.SWITCH,
id: 'switch.tasmota_2',
title: 'Garden Lights',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-nature', 'on': 'mdi-nature'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
],
},
{
title: 'Control',
width: 3,
items: [
{
title: 'Thermostat',
position: [0, 0],
id: 'climate.lv_room',
type: TYPES.CLIMATE,
unit: '°C',
useHvacMode: true, // Optional: enables HVAC mode (by default uses PRESET mode)
state: function (item, entity) {
return 'Actual: ' + this.$scope.filterNumber(entity.attributes.current_temperature, 1) + ' °C';
},
states: {
//'auto': 'Automatic',
'heat': 'Heating',
'off': 'Off',
'idle': 'Idle'
},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'idle') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
if (entity.state == 'heat') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(223, 76, 30, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [1, 0],
type: TYPES.ALARM,
id: "alarm_control_panel.mqtt_alarm",
title: 'Home Alarm',
icons: {
arming: 'mdi-bell-outline',
disarmed: 'mdi-bell-off',
pending: 'mdi-bell',
armed_custom_bypass: 'mdi-bell-check',
armed_home: 'mdi-bell-plus',
armed_night: 'mdi-bell-sleep',
armed_away: 'mdi-bell',
triggered: 'mdi-bell-ring',
},
states: {
arming: 'Arming',
disarmed: 'Disarmed',
pending: 'Pending',
armed_custom_bypass: 'Armed custom bypass',
armed_home: 'Armed home',
armed_night: 'Armed night',
armed_away: 'Armed away',
triggered: 'Triggered',
},
customStyles: function(item, entity){
if (entity.state == 'disarmed') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 158, 115, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
// GARAGE DOOR AS PRESSED_BUTTON AND BINARY_SENSOR ENTITIES
{
position: [0, 1],
width: 2/3,
type: TYPES.CUSTOM,
title: 'Door',
subtitle: "Garage",
id: 'binary_sensor.garage_door_sensor',
states: {
on: 'OPEN',
off: 'CLOSED'
},
icons: {
'on': 'mdi-garage-open-variant',
'off': 'mdi-garage-variant'
},
action: function(item, entity) {
this.apiRequest({ type: 'call_service',
domain: 'switch',
service: 'toggle',
service_data: {
entity_id: 'switch.pressed_btn_garage_door'
}
});
},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 0.7)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
// GARAGE DOOR AS A COVER ENTITY
//{
//position: [0, 1],
//type: TYPES.CUSTOM,
//title: 'Garage Door',
//id: 'cover.garage_door',
//states: {
// open: 'OPEN',
// closed: 'CLOSED'
//},
//icons: {
// 'open': 'mdi-garage-open-variant',
// 'closed': 'mdi-garage-variant'
//},
//action: function(item, entity) {
// this.apiRequest({ type: 'call_service',
// domain: 'cover',
// service: 'toggle',
// service_data: {
// entity_id: 'cover.garage_door'
// }
// });
//},
//customStyles: function(item, entity){
// if (entity.state == 'closed') {
// a = 'rgba(240, 240, 240, 0.3)';
// b = 'rgba(68, 115, 158, 0.7)';
// }
// if (entity.state == 'open') {
// a = 'rgba(255, 255, 255, 0.4)';
// b = 'rgba(240, 190, 45, 1)';
// }
// return {
// //'backgroundColor':a, 'box-shadow': '1px 1px 0 rgba(54,47,36,.35),-1px -1px 0 hsla(0,0%,78.4%,.1)', 'color': b
// 'backgroundColor':a, 'color': b
// }
//},
//},
{
position: [2/3, 1],
width: 2/3,
type: TYPES.SWITCH,
id: 'switch.garage_ventilation',
title: 'Ventilation',
subtitle: 'Garage',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-fan', 'on': 'mdi-spin mdi-fan'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [4/3, 1],
width: 2/3,
type: TYPES.SWITCH,
id: 'switch.garage_external_electical_socket',
title: 'External Mains',
subtitle: 'Garage',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-power-socket-eu', 'on': 'mdi-power-socket-eu'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [0, 2],
width: 2/3,
type: TYPES.CUSTOM,
title: 'Hot Water',
id: 'switch.hotwater',
states: {
on: 'ON',
off: 'OFF'
},
icons: {
'on': 'mdi-hot-tub',
'off': 'mdi-hot-tub'
},
action: function(item, entity) {
this.apiRequest({ type: 'call_service',
domain: 'switch',
service: 'toggle',
service_data: {
entity_id: 'switch.hotwater'
}
});
},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 0.7)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [2/3, 2],
width: 2/3,
type: TYPES.SWITCH,
state: false,
id: 'switch.media_server',
title: 'Media Server',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-play-network-outline', 'on': 'mdi-play-network-outline'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
'backgroundColor':a, 'color': b
}
}
},
{
position: [4/3, 2],
width: 2/3,
type: TYPES.SWITCH,
id: 'switch.wifi',
title: 'WiFi',
states: { on: 'ON', off: 'OFF' },
icons: {'off': 'mdi-wifi', 'on': 'mdi-wifi'},
customStyles: function(item, entity){
if (entity.state == 'off') {
a = 'rgba(240, 240, 240, 0.3)';
b = 'rgba(68, 115, 158, 1)';
}
if (entity.state == 'on') {
a = 'rgba(255, 255, 255, 0.4)';
b = 'rgba(240, 190, 45, 1)';
}
return {
//'backgroundColor':a, 'box-shadow': '1px 1px 0 rgba(54,47,36,.35),-1px -1px 0 hsla(0,0%,78.4%,.1)', 'color': b
'backgroundColor':a, 'color': b
}
}
},
]
}
]
},
],
}
and this is my custom.css file:
.body {
background-color: #ffffff !important;
}
.pages-menu--scroll-indicator {
background-color: rgba(255,255,255,.6) !important;
}
.group-title {
font-size: 19px;
height: 35px;
position: relative;
top: -35px;
color: #44739e !important;
font-weight: 400;
opacity: .8
}
.pages-menu--item.ng-scope {
color: rgb(68, 115, 158) !important;
opacity: .9 !important;
}
.pages-menu--item.ng-scope.-active {
background-color: rgba(0,0,0,.1);
color: rgba(255, 255, 255, 1) !important;
/*opacity: .7 !important; */
}
/*
.item-climate--target {
font-size: 45px;
text-align: center;
}
.item-climate--mode.ng-scope {
font-size: 30px;
text-align: center;
padding: 5px 3px;
}
*/
.item-select.ng-scope {
color: #ffffff !important;
}
.-sensor-bigger-text .item-entity--value {
font-size: 300%;
color: rgb(150, 150, 150);
}
.-sensor-bigger-text .item-entity--unit {
font-size: 150%;
color: rgb(150, 150, 150);
}
.-sensor-smaller-text .item-entity--value {
font-size: 200%;
font-weight: 400;
/*color: rgb(150, 150, 150);*/
}
.-sensor-smaller-text .item-entity--unit {
font-size: 80%;
/*color: rgb(150, 150, 150);*/
}
thanks! I’l have a go at it 
Remove this on every page: bg: 'images/bg111.jpg',
Add this in your custom.css
body {
background-image: url('../images/bg111.jpg') !important;
}
let me know if it works, it does on my pages.
I do not have bg111, but used another image
Would someone be able to help me with configuring tileboard so I can have custom images as icons on the tiles. I have a number of spotlights in my kitchen. I’ve created multiple light groups and wanted to have an icon for each group, representing which lights will turn on.
Thanks in advance…