Here are some real life examples of Tiles.
{
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'
}
}Manually trigger an automation
{
position: [0,2],
type: TYPES.AUTOMATION,
title: 'Sunrise Actions',
subtitle: 'Trigger Automation',
id: 'automation.sunrise_actions',
icon: 'mdi-weather-sunny'
}{
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
}
}
{
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;
}
}The custom tile type allows you to fire javascript commands on click/tap.
{
position: [0, 0],
type: TYPES.CUSTOM,
title: 'Screen Off',
id: { },
icon: 'mdi-monitor',
action: function(item, entity) {
fully.startScreensaver();
}
},
{
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
}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",
}
}
]
}
}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',
}{
position: [0, 3],
type: TYPES.IFRAME,
id: {},
width: 3,
height: 2,
refresh: 10000, // 10 seconds
url: 'https://www.youtube.com/embed/_qNhxxo9rVU?autoplay=1'
}{
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"
}
}
{
position: [0, 1],
type: TYPES.INPUT_SELECT,
id: 'input_select.climate_mode',
state: false
}
{
position: [0, 3],
type: TYPES.INPUT_DATETIME,
state: false,
id: "input_datetime.both_date_and_time",
}Light switch. You can optionally define sliders to control 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. Color 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
}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",
}
}
{
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',
},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',
},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
}
{
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;
}
}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'
},
}
{
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"
}
}
}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",
}
}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'
}
]
}
{
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'
]
}
}
{
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 + ".state - ";
forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".state";
forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + ".attributes.unit_of_measurement";
var wind = "&sensor.dark_sky_wind_speed_" + id + ".state";
wind += " &sensor.dark_sky_wind_speed_" + id + ".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
}
})
}