TileBoard - New dashboard for Homeassistant

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.

Here is a theme for those who feel nostalgic about 90s.

lol i would love to know what program had such dashboard in the 90s

s2c_95rtm_7

There you go :slight_smile:

4 Likes

except the color (which was configurable and i also had different) i dont see any resemblance at all :wink:

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.

Cover

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?

It is best if you setup separate ones for each device. To be frank it was never intended for going public as it was my pet project for 19 inch touchscreen hence I never thought about smaller devices and certain sizes and offsets are hardcoded.

1 Like

Well thank you for sharing it so.
Working great for my needs.
Might inspire my own pet project soon, am due to start learning some angular.

1 Like

Would you mind sharing screenshot? I’d love to see what other people are coming up with.

i will once i’ve finished configuring everything! :grin:

Im done with my dash now and its customized to perfectly be utilized on an IPad mini 7.9inch.

Sadly it doesnt look as awesome on the computer anymore and on my cell its not really usable.

Would love some Scaling options since i think this UI beats the native home-assistant one.

@resoai i will post screens later

Edit: looks great on my LG Oled, just tried.

I’ve added some code to disable open/close buttons depending on the state. Could you please kindly check if it is working ok?

Just tested and it looks and works great!
My only niggle is that the stop button is still active when the door is closed, but that is the same behavour as the standard cover so not a problem.
Cover

Yeah, I tried to mimic what HA is doing.