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
We’ve just pushed a few updates, so you can now use a function for icons:
icons: function (item, entity) {return entity.state},
I’m using it to show a map.
Works very good.
Thank you
1 Like
Do you mind sharing a screenshot of your dashboard? I’d love to see what people are coming up with.
Not working after the last commit
What exactly isn’t working? Could you provide me with an error you are getting?
{
position: [0, 1],
width: 1,
type: TYPES.LIGHT,
id: 'light.media_center',
title: 'Media center',
subtitle: 'Lamps',
states: {on: "On", off: "Off"},
icons: {on: 'mdi-lamp', off: 'mdi-lamp'},
sub: switchPercents('brightness', 255, true),
sliders: [brightnesSlider()],
}
The ‘sub’ part stopped working. I’m not getting a specific error
I have two Mobotix T25 door entry systems which have their own SIP client and SIP server (crazy, right?) and I also have a Hikvision NVR with a bunch of POE cameras.
CAMERA_FULLSCREEN_CONFIG = {
type: TYPES.CAMERA_THUMBNAIL,
refresh: 1500,
bgSize: 'contain'
};awesome post, gonna be playing around with this on my vacation