TileBoard - New dashboard for Homeassistant


#1852


#1853

Gotcha - thanks for sharing. Upon reflection, I’d rather have them as individual tiles as I have a scenes group. Realistically I’ll only have about 4/5 scenes to set - like colorloop etc.

BTW, here’s an update as to where I am with my build currently.

I am running an AmazonFire 7 - cheapy tablet which I am going to mount flush to the wall so it looks super neat. Only think I wish I had was the root so it could switch the screen off but FullyKiosk can switch it to blank.

  • I’ve added a changing background that automatically updates based on the state of the weather (dark sky sensor)
  • I’ve added a day and night theme which automatically switches based on the sun sensor (basically a darker and lighter background)
  • General CSS updates to make it super neat and it fits perfectly on my Fire.

I just need to go through and add my devices etc. Each page is probably going to have 4 groups: overview, lights, climate and scenes.


#1854

I don’t like the input select style either, I use it on a rpi3+touchscreen and it’s way too small. I’ll redo it with bigger items.
atm I’m working on my light popup with hue slider :slight_smile:


#1855

Hue slider :heart_eyes:


#1856


wip, trying to find a generic way to handle complex attributes like hs_color (array)
the slider is working but the background gradient is quite not ok.


#1857

Wow this looks awesome! I love how it pops up in a new window rather than using the existing tile. Is this a press and hold type thing?

Idea scenario would be - light tile - press and hold and it pops up a new window (like the alarm panel) with brightness controls and colour controls. Would still live the + and - brightness controls on the existing tiles, I love simplicity.


#1858

Thanks, it’s a long press/click thingy yep. it opens a popup that displays tiles, it’s configured like door_entry tile.
So in this example I’ve configured a switch, an input_select and 3 light sliders.
It’s really hacky atm as I’m not up to date with proper/recent js/css/web dev ! :slight_smile:


#1859

I feel like you’re potentially onto something here… keep us updated with progress and reach out to the community if you need help. I know colour changing has been asked for a few times so think people would love that have that as an optio.

I think the simpler and cleaner you can keep it the better :blush:


#1860

Managed to get it installed but when I run it I get the following error message

JS Error
Security Error
File: https://ha.vintnet.com:8123/local/TileBoard/scripts/models/api.js
Line 153:7

anyone seen this ? and know how to fix it ?


#1861

bit more detail from chrome

Uncaught SecurityError: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

im using hass.io


#1862

Is it possible to use this with floorplan?


#1863

fixed this … I am using Lets Encrypt SSL so had to change ws:// to wss:// in config file


#1864

I am copying your guide for the weather … however its showing the sensor variable text rather than the result …. for example …

&sensor.dark_sky_summary should show Rainy but it shows &sensor.dark_sky_summary

below is the code … what am I missing

                 // 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: '&sensor.dark_sky_summary', // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
                 icon: '&sensor.dark_sky_icon',
				   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: {
                    summary: '&sensor.dark_sky_summary',
                    temperature: '&sensor.dark_sky_temperature',
                    temperatureUnit: 'C',
                    windSpeed: '&sensor.weather_wind_speed',
                    windSpeedUnit: 'mph',
                    humidity: '&sensor.weather_humidity',
                    humidityUnit: '%',
                    list: [
                       '&sensor.dark_sky_summary_0',

#1865

Was able to get this up in roughly 6 hours, however no matter what I do I cannot get the slider component of my lights to show up (docs say long press to see the menu). They are LIFX bulbs and can support color & brightness but I wasn’t able to get either to work. When I long press it attempts to zoom in and copy/view text.

In action on my wall:

Very happy with the results!


#1866

Try adding .state to the elements that the variable is showing instead of the value

ex: &sensor.dark_sky_temperature
should be
&sensor.dark_sky_temperature.state


#1867

anyone know how to make the climate buttons work? I have set it up exactly as in the example, showing temperature and states fine. I can switch it on/off/smart_schedule/tado_mode/manual without a problem. However there is no way to set the temperature. Pressing the + or - buttons will only make the entity turn on, but that is it. No change occurs when pressing either of these buttons, so basically it is just an on/off switch now with extra state information. Anyone that has this working?


#1868

I see you are using an iPad. Could you tell me what software/app you use to display it in fullscreen? If by any chance you use Kiosk Pro (Lite/Basic/Plus/Enterprise) did you check the settings? There are settings in that app that disables a variety of functions (like the home button, or restricted to a single web page).


#1869

Please post a screenshot of your climate tile.


#1870

Did you define sliders for colour temperature and brightness as per TILE_EXAMPLES?


#1871

Add the Safari webpage to the Homescreen via the “Share” menu. Once it’s on the Homescreen click it and it will open full screen without browser bars.