TileBoard - New dashboard for Homeassistant

rchl · September 29, 2019, 11:12am

@resoai Thanks for giving me Collaborator status on the project.

Since I’m using TileBoard, I’ll help with PRs as much as I can but I probably won’t be making any drastic changes as I don’t feel too comfortable messing with your project too much.

I think our philosophy on how things should be was not always aligned in the past… If it would be for me I would probably make it into an npm package with built-in server and with code being compiled/transpiled (so that new ES features could be used when developing). But I won’t.

BTW. Congratulations on becoming a father. I myself have a 2 year old so I can’t say that I have that much more time but it’s certainly better than at the beginning.

resoai · September 29, 2019, 3:18pm

@rchl thank you! In the very beginning I wanted to keep the project as simple as possible i.e. having only a bunch of JS and a single html file to serve the purpose. I’ve come to realise that you are probably the only person known to me who’s knowledge and expirience I can trust. Changes are inevitable as well as an alternative view on things so please feel free to inject your philosophy should you choose to do it.

Having a child (especially first one) is really challenging and changes the perspective on the whole world.

akloeckner · September 30, 2019, 1:27pm

@HypnoToad, would you mind sharing your complete snippet for automatic reload? I’d like to reuse it…

uzelac · September 30, 2019, 9:44pm

Hi

Just to make sure, from the beginning it was not OK to put TileBoard in www if HA is exposed to outside, like duckdns.org

Looking at config, it looks now it is ok. So, is it ?

bdf0506 · September 30, 2019, 10:33pm

You can have TileBoard in www if HA is exposed to outside world, but you never want to put an authToken in your config if it is exposed to the outside world.

resoai · October 1, 2019, 9:15am

You are still exposing list of your devices which could help bad guys understand what you have at home. You should always add HTTP auth to protect TileBoard directory with password.

HypnoToad · October 1, 2019, 12:34pm

Nice, what are you planning to reuse it for? I may be able to fix/adapt what code I used a little better.

I’ve moved on to mainly using CSS now in order to change the look of portrait and landscape layouts, as it is easier and seems to work OK for what I want. I only needed to tiles to reflow so they filled the screen depending on portrait or landscape.

However I was able to use JS to give different CONFIG.pages for portrait and landscape, and automatic reload did reload the page layout, however it didn’t show the scroll selector on the menu bar all the time, you may need to fix this, or it may just be an issue I had.

Here’s the JS I used:

   if(CONFIG.orientTestThree === true) {

      window.addEventListener("orientationchange", function() {

         orient = getOrientation();

         if (orient === 'landscape') {
            $scope.pages = LANDSCAPE.pages;
         } else {
            $scope.pages = PORTRAIT.pages;
         }

         angular.element(window).triggerHandler('view:updated');

         if(!CONFIG.ignoreErrors) Noty.addObject({
            type: Noty.SUCCESS,
            title: 'Layout',
            message: (orient.charAt(0).toUpperCase() + orient.slice(1)) + " Orientation",
            lifetime: 2,
         });
                  
      });

   }

I added it to controller/main.js

akloeckner · October 1, 2019, 9:05pm

Thanks! I’m trying to automatically generate my pages from groups in HA. But those are not available at config.js time. So, I’ll have to update the view later, by some callback. Your post gets me on track for reloading! Now, I’m only missing the correct event to subscribe to. Angular’s document ready is a bit too early, it seems…

uzelac · October 1, 2019, 11:01pm

Thanks for fast answer.
Is there a guide how to “add HTTP auth” to protect Tileboard folder ?

resoai · October 2, 2019, 12:30am

HypnoToad · October 3, 2019, 2:00pm

Ah so like and auto-config or auto-populate tiles feature, that sounds cool. If the

angular.element(window).triggerHandler('view:updated');

doesn’t work for you then you can try

updateView();

instead.

bdf0506 · October 4, 2019, 4:55pm

I’m not sure there is an easy way to do this if you run tileboard on the same webserver that homeassistant uses - this is how the tileboard docs recommend that you install it. I’d love to be proven wrong though.

resoai · October 4, 2019, 6:15pm

Nginx is also a hass.io add on. TileBoard can be served from any webserver since this is just an html page with a bunch of us files.

akloeckner · October 5, 2019, 10:55am

Thanks for the hint. view:updated works just fine. I just created a PR for the automatic configuration stuff I came up with. Feedback is appreciated!

https://github.com/resoai/TileBoard/pull/264

@slim0287, this also has the snapclient template here:

https://github.com/resoai/TileBoard/blob/00b493820c42c7fc42ba2cad732ee46795d7921a/templates.js#L67

aledebla03 · October 5, 2019, 6:47pm

when I access via computer it works while with ipad it tells me “system error”

Martin_Velic · October 7, 2019, 2:33pm

Is it possible to move text/icons/data inside a tile ? For example I tried making a collumn weather report into a row so that the icon is left and text is right. But I cant seem to get it working …? What am I doing wrong ?
Code:

{
               title: 'Weather',
			   position: [0, 0],
               width: 3,
               height: 3,
               items: [
                  {
					 title: 'Today',
					 position: [0, 0],
                     width: 2,
                     height: 1,
                     type: TYPES.WEATHER,
                     id: {}, // using empty object for an unknown id
                     state: '&sensor.dark_sky_summary.state', // disable state element
					 //iconImage: '&sensor.dark_sky_icon.state',
                     icon: '&sensor.dark_sky_icon.state',
                     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.state',
                        //temperature: '&sensor.dark_sky_temperature.state',
						//temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
						//highTemperature: '&sensor.dark_sky_daytime_high_temperature.state',
						//highTemperatureUnit: '&sensor.dark_sky_daytime_high_temperature.attributes.unit_of_measurement',
						//highTemperatureLabel: 'High',
						//lowTemperature: '&sensor.dark_sky_overnight_low_temperature.state',
						//lowTemperatureUnit: '&sensor.dark_sky_overnight_low_temperature.attributes.unit_of_measurement',
						//lowTemperatureLabel: 'Low',
						//windSpeed: '&sensor.dark_sky_wind_speed.state',
						//windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
						//humidity: '&sensor.dark_sky_humidity.state',
						//humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
                        list: [
						
							'Wind Speed: '
                              + '&sensor.dark_sky_wind_speed.state'
                              + '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
												
							'Humidity: '
                              + '&sensor.dark_sky_humidity.state'
                              + '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
							  
                           'Feels like: '
                              + '&sensor.dark_sky_apparent_temperature.state'
                              + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',

                           'Pressure: '
                              + '&sensor.dark_sky_pressure.state'
                              + '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
							  
						   'Chance of rain: '
						      + '&sensor.dark_sky_precip_probability.state'
                              + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement',
                              
                           
                        ]
                     }
                  },

Screenshot:
Screenshot_3|401x417

JAltberg · October 7, 2019, 8:25pm

Okey, I think I got a easy question for you geeks:

I want a tile for my garage door. The sensor to check if the door is open/closed is one sensor. The thing that’s get the door in motion is a separate switch. How do I get both the sensor status and be able to fire open/close command in one tile?

This is what I want it to look like but as a switch/button (got two garagedoors):
asdasd

Thanks in advance.

akloeckner · October 7, 2019, 10:45pm

I guess, a template cover will be your friend:

Or a custom tile:

github.com

resoai/TileBoard/blob/d48bdddac7399e70d1ffd7069aaf54cee38ae371/TILE_EXAMPLES.md#custom

Here are some real life examples of Tiles.<br>

#### ALARM

![ALARM](images/tile-screenshots/ALARM.png)

```js
{
 position: [0, 3],
 type: TYPES.ALARM,
 title: 'Alarm',
 id: 'alarm_control_panel.home_alarm',
 icons: {
    disarmed: 'mdi-bell-off',
    pending: 'mdi-bell',
    armed_home: 'mdi-bell-plus',
    armed_away: 'mdi-bell',
    triggered: 'mdi-bell-ring'
 },
 states: {

This file has been truncated. show original

JAltberg · October 9, 2019, 6:24pm

Thanks for the reply. Guess the easiest way for me would be to make a template cover… However it would be nice to have them separated in HA. Any idea how it could look like in a custom tile?

mathewtaylor2007 · October 9, 2019, 7:39pm

did you find a way to do this? mine keeps doing this all the time