Adding Tiles - resoai/TileBoard GitHub Wiki
What is a tile?
A tile is the main interaction between the user and Tileboard. it is a basic square that can be modified to do different actions or show specific information. Like switching your light switch or seeing the weather for today. It is flexible and you can mould it suit your needs.
Basic Light Tile Example
We will cover the basics here but you can find more options Readme.md
{
type: TYPES.LIGHT,
position: [0, 0],
title: 'Front Lights',
subtitle: 'Lounge',
id: 'light.front_lights',
state: false,
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
Now its time to explain what all of this means and what we get
Type
First, we define the type. This tells TileBoard what type of entity this tile so it can do the proper actions when you press it. In this example, we want a little light tile to turn on or off our beautiful light in our lounge so we defined it as
type: TYPES.LIGHT
Position
Now we have to define where the tile should be in our group.
If you remember we defined how many tiles our group is when we were making our group.
title: 'Group title',
width: 2, <<< We defined it
height: 3, <<< right here
items: [],
In this group the width is 2 and a height is 3.
The position is defined in X and Ycoordinates
So our groups' grid will look like this
In our light tile, we defined that the position should be in 0,0 which is the top left corner.
position: [0, 0],
Metadata
Next, in our code, we defined some metadata to put in our tile. We gave it a title of Front lights and a subtitle of Lounge
Connecting the tile to our device in Home Assistant
A tile that controls things will be practically useless so we added that next.
To connect the device to the tile we define an id and list the entity id of the device which is given by Home Assistant
id: 'light.front_lights'
This tile will now control the device that has entity id of light.front_lights
we also said that when the state of the device is On in Home Assistant then consider the device to be on in Tileboard. This tells Tileboard when it is on or off so it can play its animations and change the icons. We also said the same thing for Off
states: {
on: "On",
off: "Off"
}
Then we defined what icons should it show when the device is on or off
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
With all of that, we get a little tile to control our lights
Different types of tiles
Here are all the different TYPES. of tiles tiles
- Switch
- Fan
- Light switch/bulb
- Sensor
- Sensor with custom icon
- Gauge
- Media player
- Input Boolean
- Input Select
- Slider
- Input Date Time
- Automation
- Scene
- Script
- Device Tracker
- Alarm
- Door Entry
- Camera thumbnail & Camera
- Lock
- Climate
- Weather List
- Weather
- Text List
- Custom
SWITCH
Toggle switch on tap. Also shows icon depending on the state
{
position: [0, 1],
type: TYPES.SWITCH,
id: 'switch.kitchen_spotlights',
title: 'Spotlights',
subtitle: 'Kitchen',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
}
}
FAN
It allows you to toggle a fan on and off, as well as set the speed.
{
position: [0, 2],
type: TYPES.FAN,
title: 'Ceiling fan',
id: 'fan.living_room_fan',
}
LIGHT
Light switch. You can optionally define sliders to control the colour, temperature or in fact anything else. Sliders will show up after long press on the tile. Color Picker is also optionally displayed after long press on the tile. Colour picker should only be used for lights with rgb_color attribute.
{
position: [0, 2],
title: 'Floor lamp',
subtitle: 'Lounge',
id: 'light.lounge_floor_lamp',
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"
}
}
],
colorpicker: true
}
SENSOR
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Outdoor',
id: 'sensor.outdoor_temperature',
unit: 'C', // override default entity unit
state: false, // hidding state
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
}
SENSOR_ICON
Similar to sensor, but with an icon.
{
position: [1, 1],
type: TYPES.SENSOR_ICON,
title: 'Hot water',
id: 'sensor.hot_water',
states: {
on: "On",
off: "Off"
},
icons: {
on: 'mdi-hot-tub',
off: 'mdi-hot-tub'
},
}
GAUGE
{
position: [0, 1.5],
width: 1.5,
height: 1,
title: 'Energy Production',
subtitle: '',
type: TYPES.GAUGE,
id: 'sensor.my_enery_sensor', // 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: 100, // 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'}, 80: { 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
},
}
MEDIA_PLAYER
{
position: [0, 3],
id: 'media_player.volumio',
type: TYPES.MEDIA_PLAYER,
hideSource: false,
hideMuteButton: false,
state: false,
//state: '@attributes.media_title',
subtitle: '@attributes.media_title',
bgSuffix: '@attributes.entity_picture',
},
INPUT_BOOLEAN
{
position: [1, 2],
width: 1,
title: 'Radio',
classes: [CLASS_BIG],
type: TYPES.INPUT_BOOLEAN,
id: 'input_boolean.play_radio',
icons: {
on: 'mdi-stop',
off: 'mdi-play'
},
states: {
on: "Playing",
off: "Stopped"
}
}
INPUT_SELECT
{
position: [0, 1],
type: TYPES.INPUT_SELECT,
id: 'input_select.climate_mode',
state: false
}
SLIDER
{
position: [6, 1],
id: 'input_number.casatunes_volume_6',
type: TYPES.SLIDER,
unit: '%',
state: false,
//bottom: true, // puts slider on bottom
slider: {
//max: 100,
//min: 0,
//step: 2,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
}
}
INPUT_DATETIME
{
position: [0, 3],
type: TYPES.INPUT_DATETIME,
state: false,
id: "input_datetime.both_date_and_time",
}
AUTOMATION
Manually trigger an automation
{
position: [0,2],
type: TYPES.AUTOMATION,
title: 'Sunrise Actions',
subtitle: 'Trigger Automation',
id: 'automation.sunrise_actions',
icon: 'mdi-weather-sunny'
}
SCENE
Works almost identical to the SCRIPT. Activates scene in a tap.
{
position: [1, 2],
id: 'scene.movie_time',
type: TYPES.SCENE,
state: false,
icon: 'mdi-movie-roll',
},
SCRIPT
Call script on click/tap
{
position: [0, 0],
type: TYPES.SCRIPT,
id: 'script.front_gate_open',
icons: {
on: "mdi-gate",
off: "mdi-gate"
},
state: false
}
DEVICE_TRACKER
{
position: [0, 0],
type: TYPES.DEVICE_TRACKER,
id: 'device_tracker.google_maps_9000',
map: 'yandex',
states: {
home: "Home",
not_home: "Away",
office: "Office",
},
zoomLevels: [9, 13], // or [9] for only one map slide
hideEntityPicture: false, //hide entity pic, if you need only map
slidesDelay: 2 // delay before first slide animation
}
ALARM
{
position: [0, 3],
type: TYPES.ALARM,
title: 'Alarm',
id: 'alarm_control_panel.home_alarm',
icons: {
disarmed: 'mdi-bell-off',
pending: 'mdi-bell',
armed_home: 'mdi-bell-plus',
armed_away: 'mdi-bell',
triggered: 'mdi-bell-ring'
},
states: {
disarmed: 'Disarmed',
pending: 'Pending',
armed_home: 'Armed home',
armed_away: 'Armed away',
triggered: 'Triggered'
}
}
DOOR_ENTRY
Essentially a door entry tile is a pop-up with a fullscreen camera and a set of tiles on the left.
{
position: [0, 3],
type: TYPES.DOOR_ENTRY,
id: {},
icon: 'mdi-phone',
title: 'Door entry',
state: false,
layout: {
camera: {
type: TYPES.CAMERA,
id: 'camera.front_gate',
refresh: 1500,
bgSize: 'cover'
},
page: {},
tiles: [{
position: [0, 0],
theme: ITEM_TRANSPARENT,
type: TYPES.SWITCH,
id: 'switch.intercom',
icons: {
on: 'mdi-phone-in-talk',
off: 'mdi-phone'
},
states: {
on: "Active",
off: "Idle"
}
},
{
position: [0, 1],
theme: ITEM_TRANSPARENT,
type: TYPES.SCRIPT,
id: 'script.front_gate_open',
icons: {
on: "mdi-gate",
off: "mdi-gate"
},
state: false
},
{
position: [0, 2],
theme: ITEM_TRANSPARENT,
id: 'switch.outdoor_lights',
type: TYPES.SWITCH,
title: 'Lights',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
}
}
]
}
}
CAMERA_THUMBNAIL and CAMERA
{
position: [0, 0],
id: 'camera.front_gate',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 2,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 1500, // can be number in milliseconds
bgSize: 'contain'
},
refresh: function () { // can also be a function
return 3000 + Math.random() * 1000
}
}
LOCK
Locks and unlocks the lock on tap. Also shows icon depending on the state
{
position: [0, 1],
type: TYPES.LOCK,
id: 'lock.front_door',
title: 'Front door',
states: {
locked: "Locked",
unlocked: "Unlocked"
},
icons: {
locked: "mdi-lock",
unlocked: "mdi-lock-open",
}
}
CLIMATE
{
position: [0, 2],
id: "climate.kitchen",
type: TYPES.CLIMATE,
unit: 'C',
state: function (item, entity) {
return 'Current '
+ entity.attributes.current_temperature
+ entity.attributes.unit_of_measurement;
}
}
WEATHER_LIST
{
position: [0, 1],
type: TYPES.WEATHER_LIST,
width: 2,
height: 2,
title: 'Forecast',
id: {},
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
hideHeader: false,
secondaryTitle: 'Wind',
list: [1,2,3,4,5].map(function (id) {
var forecast = "&sensor.dark_sky_overnight_low_temperature_" + id + "d.state - ";
forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d.state";
forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d.attributes.unit_of_measurement";
var wind = "&sensor.dark_sky_wind_speed_" + id + "d.state";
wind += " &sensor.dark_sky_wind_speed_" + id + "d.attributes.unit_of_measurement";
return {
date: function () {
var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
return d.toString().split(' ').slice(1, 3).join(' ');
},
icon: "&sensor.dark_sky_icon_" + id + ".state",
//iconImage: null, replace icon with image
primary: forecast,
secondary: wind
}
})
}
WEATHER
{
position: [2, 1],
height: 2,
//classes: ['-compact'], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: 'group.weather',
state: '&sensor.dark_sky_summary.state', // label with weather summary (e.g. Sunny)
icon: '&sensor.dark_sky_icon.state',
//iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: { // most of that fields are optional
summary: '&sensor.dark_sky_summary.state',
temperature: '&sensor.dark_sky_temperature.state',
temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
windSpeed: '&sensor.dark_sky_wind_speed.state',
windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
humidity: '&sensor.dark_sky_humidity.state',
humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
list: [
// custom line
'Feels like '
+ '&sensor.dark_sky_apparent_temperature.state'
+ '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
// another custom line
'Pressure '
+ '&sensor.dark_sky_pressure.state'
+ '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
// yet another custom line
'&sensor.dark_sky_precip_probability.state'
+ '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
+ ' chance of rain'
]
}
}
TEXT_LIST
This is a custom tile which can be used for displaying values from different sensors in a list.
{
position: [0, 1],
width: 2,
height: 1,
title: 'Travel',
id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
type: TYPES.TEXT_LIST,
state: false,
list: [
{
title: 'Time to office',
icon: 'mdi-office-building',
value: '&sensor.home_to_office.attributes.duration'
},
{
title: 'Time to home',
icon: 'mdi-home',
value: '&sensor.office_to_home.attributes.duration'
},
{
title: 'Northern',
icon: 'mdi-subway',
value: '&sensor.northern.state'
}
]
}
IFRAME
{
position: [0, 3],
type: TYPES.IFRAME,
id: {},
width: 3,
height: 2,
refresh: 10000, // 10 seconds
url: 'https://www.youtube.com/embed/_qNhxxo9rVU?autoplay=1'
}
CUSTOM
The custom tile type does not have handling for any specific entity types. It can be used to, for example, trigger custom actions on pressing.
{
position: [0, 0],
type: TYPES.CUSTOM,
title: 'Screen Off',
id: { },
icon: 'mdi-monitor',
action: function(item, entity) {
fully.startScreensaver();
},
secondaryAction: function(item, entity) {
return this.$scope.openPopupIframe(item, entity);
}
},