Just what i needed, thanks! 
1 Like
nice to see what you have done.
in theory that could also been done with HAdashboard, but you dashboard is more designed for PC use and HADashboard is more designed for tablet use.
but it is always good to have options, so keep up the good work.
Thanks! I’ve played with HaDashboard for a few weeks and almost got it to behave the way I wanted but there have been way to many obstacles on the way. This Dashboard is actually designed for touchscreens and works fine on my old Nexus 7 
hmm, then you have smaller fingers then me or use a pen.
the dashboard you show in the video would be hard to read for me on a 7 inch tablet, not talking about using it 
most people that use HAdashboard complain about that the + and - signs that are in some "older"widgets are already to small.
what where the biggest obstacles for you to get the dashboard to work the way you wanted?
My main “tablet” is a 19.4 inch touchscreen in the hallway though HaDashboard was the project that got me into trying dashboard in the first place and I’m really happy it exists! As a coder myself I could not figure out why there are so many JavaScript libraries used when they could have been avoided, for instance the library used for a grid layout fires fadein() event for every single widget forcing it to redraw which slowed down my tablet a lot. I also wanted all dashboards to be on one page so I could easily navigate between them without page being reloaded. Most of the things I mentioned above are easy to fix (which I managed to do at the end) yet I felt that I need a dashboard that is much more hackable i.e. I want custom functions to format state values or listen to the HA events and and have my custom handlers for it like I do for door entry. I know you can do this with AppDaemon but it feels like an overkill for such basic things.
Here is a quick video of how it looks like on my wall panel.
1 Like
Could you share more information about the screen, hw, mounting etc?
I will make some photos and get the info tomorrow but to be honest this is not something I could recommend doing as it took me almost 6 months to figure out how to finish building it.
yeah hadashboard was created before there were options to listen to events in js.
there is a fadein() in HADashboard? hmm, i must talk to Andrew about that (i have never seen it). can be that he took over some old things that can be lost. and for sure if it speeds up things.
loading several dashboards is an option if you use the skin options, but it needs to be hard programmed (but i guess that you do that now also )
i know there is a lot possible there that is hardly explored.
i see the advabtage from the things you do.
1 warning though, keep telling people that they need to have js programming skills to use your project, or you will end up with a daily job here to explain all kind of simple programming parts.
people see how great the things you create look, but there are a lot of people who just cant do it (or dont want to take the time to learn)
and in the end that kind of supporting breaks most people and i want to see what more you come up with
ill take a look at what you created in a short time, when my time is less limited.
gives you the time to let this grow
and about your wall panel: duh, i see how it works on that size that would be workable for me too. but i dont think ill get my wife that far in a short time, to spend a lot of money for such kind of wall panels
1 Like
Could you please post a door_entry example?
Also, what are your plans about cover and alarm tiles?
And finally is it possible to have a turn on-off button in a media tile?
Yeah, the fadein() is actually part of the that grid library. There is also a lot of translate rulles in css which you might consider disabling to make Hadashboard work fast on older tablets. I understand that my dashboard is certainly not for everyone and oh boy one does need to know JS to configure it which ironically was the whole point I decided to share the code hoping that perhaps someone would find it useful. As for the wall panel - it is a second-hand Asus touchscreen monitor which I bought on eBay for about 65 euros, took apart and Frankenstein-ed into the wall using a few aluminium angles. I have than glued together a frame and painted it white. I don’t think I spent more than 80 euroes in total.
I will post a door-entry example tomorrow as it is already 1AM and I’m far away from the PC. In general, this is simply a full screen camera with some tiles on the side.
As for the cover tile, I’m afraid I don’t have any hardware to test it on so we might need some help from other people. Alarm tile should not be a problem but we need to think about the design and the popup.
wow very nice!!
ill PM you in the next days, to ask you some more info about thing like that fade in, and other stuff you noticed.
the grid part is taken over from an old project, so if you have noticed some things to make it better i am very interested.
i am sure it is usefull for a group of people, so you sharing it is a good thing.
2 Likes
Would it be possible for you to create relevant issues on GitHub?
Is there a way to get the state of an entity inside a function?
I use Weather Underground for weather. It has a sensor.pws_weather that has an attribute entity_picture which has values like https://icons.wxug.com/i/c/k/partlycloudy.gif and https://icons.wxug.com/i/c/k/tstorms.gif.
I noticed the filename matches up almost perfectly with the svg weather-icons bundled with TileBoard, so I wanted to write a function for the icon: field that would take the entity_picture, parse it, and return the correct .svg file, but I don’t see a way to get the actual value of that attribute within a function.
1 Like
this is awesome. thank you! and great work!!
Any chance you could take a look and help me get going? I think im just pacing the files in the wrong dir?
I get a 404 error.
Im using a local path with ip. HA isnt exposed, i use vpn.
I was just trying to get it working first before customizing anything…as far as the tiles go.
I do use HA API in other places so I know that works. Example, when I leave my phone sends an update, that all works good.
Here is the the location of the files. Ive tried other places too, but im not concered about having it in www really since its not exposed. I appreciate any help you may be able to provide. thanks again.
da@home:/usr/share/hassio/homeassistant/www/TileBoard$ ls
config.js head.html images index.html LICENSE.md README.md scripts styles TILE_EXAMPLES.md tile.html
// This is just an example of config
// most of ids here are replaced with empty objects {}
// please make sure you use real string ids from your HA entities
// you may also rename this file to "override_config.js"
// doing so will not overwrite your config with the new one after updates
var CONFIG = {
customTheme: "transparent", //CUSTOM_THEMES.TRANSPARENT
transition: "animated_gpu",
tileSize: 150,
tileMargin: 6,
serverUrl: "http://10.1.1.60:8123",
wsUrl: "ws://10.1.1.60:8123/api/websocket",
password: "REDACTED",
events: [],
pages: [],
{
title: 'Home',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline', // home icon
head: 'head.html', // clock
groups: [
{
title: 'First group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Sun.sun state',
icon: 'mdi-weather-sunny',
value: '&sun.sun.state'
},
{
title: 'persistent_notification',
icon: 'mdi-clock-outline',
value: '&persistent_notification.notification.state'
}
]
},
{
position: [0, 1], // [x, y]
width: 1,
type: TYPES.SENSOR,
id: 'updater.updater',
sub: '@attributes.release_notes' // custom state
}
]
},
{
title: 'Second group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SLIDER,
//id: "input_number.volume",
id: {state: 50}, // replace it with real string id
state: false,
title: 'Custom slider',
subtitle: 'Example of subtitle',
slider: {
min: 0,
max: 100,
step: 2,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
}
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
//id: "switch.lights",
id: {state: 'off'}, // replace it with real string id (e.g. "switch.lights")
state: false,
title: 'Custom switch',
icons: {'off': 'mdi-volume-off', 'on': 'mdi-volume-high'}
},
]
},
{
title: '',
width: 1,
height: 3,
items: [
{
// please read README.md for more information
// this is just an example
position: [0, 0],
height: 2, // 1 for compact
//classes: ['-compact'],
type: TYPES.WEATHER,
id: {},
state: false,
sub: function () {return 'Sunny'},
fields: {
icon: 'clear-day',
iconMap: { 'clear-day': 'clear'},
summary: 'Sunny',
apparentTemperature: '15',
apparentTemperatureUnit: 'C',
temperature: '18',
temperatureUnit: 'C',
//precip: '&sensor.dark_sky_precip_1.state',
//precipIntensity: '&sensor.dark_sky_precip_intensity_1.state',
//precipIntensityUnit: '&sensor.dark_sky_precip_intensity_1.attributes.unit_of_measurement',
precipProbability: '5',
precipProbabilityUnit: '%',
windSpeed: '5',
windSpeedUnit: 'kmh',
humidity: '50',
humidityUnit: '%',
//pollen: '&sensor.pollen_count_1.state',
pressure: '1024',
pressureUnit: '', //'&sensor.dark_sky_pressure_1.attributes.unit_of_measurement',
}
}
]
}
]
},
{
title: 'Second page',
bg: 'images/bg2.png',
icon: 'mdi-numeric-2-box-outline',
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
title: 'Short instruction',
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: 'Read',
icon: 'mdi-numeric-1-box-outline',
value: 'README.md'
},
{
title: 'Ask on forum',
icon: 'mdi-numeric-2-box-outline',
value: 'home-assistant.io'
},
{
title: 'Open an issue',
icon: 'mdi-numeric-3-box-outline',
value: 'github.com'
}
]
}
]
},
]
}
],
}There are some syntax errors in your JSON file. One error I found: pages:[], => pages:[ on approx line 9.
I always use this online editor: https://jsoneditoronline.org/. For checking, you need to change some types to a string by adding “” around eg the types and functions, but it gives a line number where an error occurred. I found this error in this editor.
For the location:
In the folder where you have your configuration.yaml file, you add a www/tileboard folder. Then you should be able to go to that link. (WACH OUT: The link is Case sensitive!)
Guys, it is becoming increasingly difficult to follow this thread. May I suggest that you open an issue on GitHub for every problem or suggestion that you have and it would be much easier to keep the track of it and other people could contribute in a more orderly fashion.
1 Like
Thank you. Please remember that in Linux file and directory names are case sensitive, so TileBoard is not same as tileboard.
1 Like
I’ve added a door entry example:
If you are wondering how audio is working in my setup, the “Intercom” tile is a command_line switch which sends requests to the PC where dashboard is running essentially initiating a SIP call to the door station and tapping this tile again hangs up the call. At the moment I’m running dashboard on an old i3 NUC with Windows 10 and I’m using MicroSIP. I’m planning to replace it with RPI3 running Arch at some point in time.
3 Likes