:-(. The side buttons should work very well on a tablet, but doesn’t work so well on the phone which is my primary use. Is there a way to hide it and use a “tile.page” like the navigate widget on hadashboard?
In all fairness, dashboard are only meant for tablets and larger touchscreens, I can’t think of a better mobile UI than the stock HA one. Since dashboard is simply an HTML page, one could tear it apart and Frankenstein anything they want but I never liked the way Hadashboard handles navigation and had a clear view of how I want my dashboard to look and behave.
This looks great! I’ll have to check it out once I have finished setting up my devices.
I have just implemented a lock tile. Would someone be so kind to test it as I don’t have one in my HA?
I’ve also implemented cover tile which needs testing since I just did it blindly 
{
position: [2, 3],
type: TYPES.COVER,
title: 'Garage door',
id: 'cover.garage_door'
states: {
open: 'Open',
closed: 'Closed'
}
}Anything in particular you are interested in?
I’ve also just added support for Google API key which is now mandatory if you wish to use Google maps along with the device tracker.
1 Like
Is there a way where we could add a swipe solution to switch between different pages?
Really love your work, finally a dashboard that doesn’t look like it’s designed in the 90’s.
1 Like
I had a swipe gesture initially but it interfered with other gestures.
lol i would love to know what program had such dashboard in the 90s
There you go
4 Likes
except the color (which was configurable and i also had different) i dont see any resemblance at all 
If you know a thing or two about JavaScript and like me have a bunch of identical tiles to add, you don’t need to define every tile individually. Instead do something like this:
{
title: 'First floor',
width: 3,
height: 3,
items: [].concat(
[
"climate.hallway_ff",
"climate.master_bedroom",
"climate.master_bathroom",
"climate.kids_room",
"climate.study",
"climate.guest_room",
"climate.bathroom",
].map(function (id, i) {
var y = Math.floor(i / 3);
var x = i - y * 3;
return mergeObjects({
position: [x, y],
id: id,
}, CLIMATE_CONFIG)
})
)
}
Os say you need to make long TEXT_LIST tile, simply use an array of entities:
{
title: 'Heating status',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1.7,
height: 2,
title: ' ',
id: 'sensor.kitchen_heat_demand',
type: TYPES.TEXT_LIST,
state: false,
filter: function (value, field) {
if(field === "value" && value === "unknown") {
return "0";
}
return value;
},
list: [
["Hallway GF", "sensor.hallway_gf_heat_demand"],
["AV Room", "sensor.av_room_heat_demand"],
["Lounge", "sensor.lounge_heat_demand"],
["Kitchen", "sensor.kitchen_heat_demand"],
["Dining Room", "sensor.dining_room_heat_demand"],
["Utility Room", "sensor.utility_room_heat_demand"],
["Hallway FF", "sensor.hallway_ff_heat_demand"],
["Master Bedroom", "sensor.master_bedroom_heat_demand"],
["Master Bathroom", "sensor.master_bathroom_heat_demand"],
["Kids Room", "sensor.kids_room_heat_demand"],
["Study", "sensor.study_heat_demand"],
["Guest Room", "sensor.guest_room_heat_demand"],
["Bathroom", "sensor.bathroom_heat_demand"],
].map(function (item) {
var id = item[1];
return {
title: item[0],
value: '&' + id + '.state',
unit: '&' + id + '.attributes.unit_of_measurement',
}
})
}
]
}hi @resoai,
the cover tile works fine. Just needs a comma after the id: field:
Blockquote
{
position: [2, 3],
type: TYPES.COVER,
title: ‘Garage door’,
id: ‘cover.garage_door’,
states: {
open: ‘Open’,
closed: ‘Closed’
}
}
It was probably a typo. Some people asked me to add a slider so they could control the position of the cover. Would it be possible to show me state details of cover entity with cover being half-way open?
Hi @resoai, unfortunately I have a ‘dumb’ door that registers either open or closed. One thing I did notice is that the down arrow is still highlighted when closed - that isn’t the case for a standard cover on HA.
Would you please be so kind to mention it in the issue on github?
Great work, beautiful looking UI and runs great on my low powered tablet.
I’m wondering would it be possible to make this responsive or scalable? In trying to resize various elements to get it looking right on my tablet, ruins the look for desktop or other screens.
I’m not too familiar with angular, but would using % or rem values instead of px in the CSS be the way to go?
Or am I better off setting up a seperate instance for each screen?