TileBoard - New dashboard for Homeassistant

Vintage89 · August 13, 2021, 3:54pm

Here the config i tried for the page:

{
         title: 'Main page',
         bg: 'images/bg2.jpg',
         icon: 'mdi-home-outline', // home icon
         groups: [
            {
               title: 'Gang',
               width: 1,
               height: 1,
			   groupMarginCss: '10px 20px',
               row: 0,  // optional; index of the row used for the GRID layout. If not specified, the default is 0
               items: [
                  {
				  position: [0, 0],
				  type: TYPES.INPUT_BOOLEAN,
				  id: 'input_boolean.lock',
				  title: 'Inngangsdør',
				  states: {
				    off: "Låst",
					on: "Ulåst"
				  },
				  icons: {
					off: "mdi-door-closed",
					on: "mdi-door-open",
				  }
				  },
                  
               ]
            },

            {
               title: 'Soverom',
               width: 6,
               height: 1,
			   groupMarginCss: '10px 20px',
               row: 1,  // optional; index of the row used for the GRID layout. If not specified, the default is 0
               items: [
                  {
                     position: [0, 0],
                     width: 1,
                     type: TYPES.LIGHT,
                     id: 'switch.nattbord_andre',
                     title: 'Nattbord André',
                     subtitle: 'Soverom',
					 states: {
					   on: "På",
                       off: "Av"
                     },
                     icons: {
                       on: "mdi-lamp",
                       off: "mdi-lamp",
                     }
                  },
                  {
                     position: [1, 0],
                     width: 1,
                     type: TYPES.LIGHT,
                     id: 'switch.nattbord_martine',
                     title: 'Nattbord Martine',
                     subtitle: 'Soverom',
					 states: {
					   on: "På",
                       off: "Av"
                     },
                     icons: {
                       on: "mdi-lamp",
                       off: "mdi-lamp",
                     }
                  },
                  {
				  position: [2, 0],
				  type: TYPES.INPUT_BOOLEAN,
				  id: 'input_boolean.tak_soverom',
				  title: 'Taklampe',
                  subtitle: 'Soverom',
				  states: {
				    off: "Av",
					on: "På"
				  },
				  icons: {
					off: "mdi-ceiling-light",
					on: "mdi-ceiling-light",
				  }
				  },
                  {
                     position: [3, 0],
                     width: 1,
                     type: TYPES.LIGHT,
                     id: 'light.kleskap',
                     title: 'Kleskap',
                     subtitle: 'Soverom',
					 states: {
					   on: "På",
                       off: "Av"
                     },
                     icons: {
                       on: "mdi-wall-sconce-flat",
                       off: "mdi-wall-sconce-flat",
                     }
                  },
                  {
                     position: [4, 0],
                     width: 1,
                     type: TYPES.SWITCH,
                     id: 'switch.rullegardin',
                     title: 'Rullegardin',
                     subtitle: 'Soverom',
					 states: {
					   on: "Åpen",
                       off: "Lukket"
                     },
                     icons: {
                       on: "mdi-blinds-open",
                       off: "mdi-blinds",
                     }
                  },
                  

               ],
            },

            

            
         ]
      },

Romkabouter · August 13, 2021, 6:43pm

Have you set groupsAlign: GROUP_ALIGNS.GRID and what is your theme?

Vintage89 · August 13, 2021, 7:10pm

Ahh,
Did not see that config. Set it to grid and it worked

Thank you!

radinsky · August 14, 2021, 9:37am

Revisited it now and probably easiest/better solution for dim/bright the dashboard:

        {
            command: 'dim',
            action: function(e) {
                document.getElementsByTagName("BODY")[0].style.filter = "brightness(0.5)";
            }
        },
        {
            command: 'bright',
            action: function(e) {
                document.getElementsByTagName("BODY")[0].style.filter = "brightness(1)";
            }
        },

pw44 · August 15, 2021, 12:06am

Hya,

installed it on my bare metal, and when i access FQDN/local/tileboard/index.html i receive the following screen:

ACCESS TOKEN
Error while receiving access token

by config.js, i have:

   tileMargin: 6,
   serverUrl: 'http://' + location.hostname + ':8123',
   wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
   authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
   //googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
   //mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
   debug: false, // Prints entities and state change info to the console.

how to use the authentication scheme used by HA?

thx in advance!

Romkabouter · August 15, 2021, 8:39am

Create Longlived token in HA and copy it to the authToken setting.

pw44 · August 15, 2021, 10:46am

@Romkabouter, yes, but as it’t exposed on the internet, i would prefer the traditional authentication.

Romkabouter · August 15, 2021, 11:48am

There is no login system available for tileboard.

If you use HA on the same machine, I suggest using the HA Addon, fill in a port (8090 for instance).
If you do not open that port for the internet, you do not have to worry.

pw44 · August 15, 2021, 1:34pm

@Romkabouter not the same machine and Addon seams not being available for my HA version - bare metal.

Romkabouter · August 15, 2021, 2:38pm

Ok, so don’t expose that machine to the internet

In general: Tileboard has no login system so do not expose it to the net

pw44 · August 15, 2021, 3:10pm

i have HA and tileboard on the same machine now. And tileboard home directory no longer under www (FQDN/local/tileboard). Any suggestion?

I tried via apache:



        Alias /tileboard/ /var/homeassistant/.homeassistant/tileboard/
        <location /tileboard/>
             AuthType Basic
             AuthName "Tileboard access"
             AuthUserFile /etc/apache2/.htpasswd
             DirectoryIndex index.html
             Require valid-user
             Order deny,allow
             Allow from all
       </location>

but it’s not working…

pw44 · August 15, 2021, 7:10pm

@resoai regarding not deploying under the www directory (fqdn/local/tileboard), could you explain how to have it under other directory being accessed under a different port, like 8133?

I’m really not finding out hw to deploy it.

and how:

TileBoard will be available at http://HASS_IP:8123/local/tileboard/index.html and will prompt you for your login credentials after restarting Home Assistant.

does it works?

Thx in advance.

scxs001 · August 15, 2021, 8:28pm

maybe someone has some idea how it works and can help me?
Thanks

resoai · August 17, 2021, 10:56am

You can install TileBoared as an add-on.

pw44 · August 17, 2021, 11:51am

i’m on bare metal. no supervisor, so, no addons store.

resoai · August 17, 2021, 12:45pm

Install Nginx and serve it as any other webpage on the port you want.

pw44 · August 17, 2021, 2:22pm

i’m using apache2.

Used:

<VirtualHost *:8124>
        ServerName FQDN
        ServerAdmin webmaster@FDQN
        DocumentRoot /var/homeassistant/homeassistant/tileboard
        LogLevel debug
        ErrorLog ${APACHE_LOG_DIR}/ssl_engine.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        SSLEngine on
        SSLCACertificateFile   myprivateCA
        SSLCertificateKeyFile  myserverprivatekey
        SSLCertificateFile     myserverprivatepem
        SSLProtocol -all +TLSv1.2
        #SSLProtocol all -SSLv3 -TLSv1.3
        #SSLProtocol all -TLSv1.3
        # require certificate
        SSLVerifyClient none
        SSLVerifyDepth 1
        <IfModule maxminddb_module>
                MaxMindDBEnable On
                MaxMindDBFile CITY_DB /usr/share/GeoIP/GeoLite2-City.mmdb
                MaxMindDBFile COUNTRY_DB /usr/share/GeoIP/GeoLite2-Country.mmdb
                MaxMindDBEnv MM_CONTINENT_CODE          COUNTRY_DB/continent/code
                MaxMindDBEnv MM_CONTINENT_NAME          COUNTRY_DB/continent/names/en
                MaxMindDBEnv MM_COUNTRY_CODE            COUNTRY_DB/country/iso_code
                MaxMindDBEnv MM_COUNTRY_NAME            COUNTRY_DB/country/names/en
                SetEnvIf MM_COUNTRY_CODE ^(CN|RU|UA|AL) BlockCountry
                <Location />
                        <RequireAll>
                        Require all granted
                        Require not env BlockCountry
                        Require ip 192.168.80.0/24
                        </RequireAll>
                </Location>
        </IfModule>
        <IfModule mod_headers.c>
                Header always set Strict-Transport-Security "max-age=15552000; includeSubDomains; nosniff; SAMEORIGIN"
        </IfModule>

       <location />
             DirectoryIndex index.html
             AuthUserFile /etc/apache2/.htpasswd
             AuthName "TileBoard"
             AuthType Basic
             Require valid-user
             Order deny,allow
             Allow from all
       </location>

</VirtualHost>

worked.

scxs001 · August 17, 2021, 2:29pm

@resoai
do you have some time? maybe you can help me here:

NiebanalnyJ · August 31, 2021, 7:57pm

Hi, I haven’t found a solution to my problem, so please help me. As MEDIA_PLAYER add the ability to select playlist from disk? I mean lullabies for children Or is it possible to stream from music apple? I miss the source button and don’t know how to do it. And thanks for the great dashboard!

backcountrymountains · September 3, 2021, 3:39pm

I’m trying to use the script tile:

{
         position: [0, 2],
         type: TYPES.SCRIPT,
         title: 'Skip 30',
         id: 'script.skip',
         icons: {
            on: "mdi-gate",
            off: "mdi-gate"
         },
         state: false,
         variables: { entity_id: 'media_player.morning_news', interval: '30' },
      },

I can’t get the tile to pass variables to the script. My script needs ‘entity_id’ and ‘interval’. This is my script:

skip:
    alias: skip
    sequence:
      - service: media_player.media_seek
        data_template:
          entity_id: "{{ entity_id }}"
       #  seek_position: "{{ state_attr(entity, 'media_position') | float + interval }}"
          seek_position: "{{ ( as_timestamp(now()) - as_timestamp(state_attr(entity_id, 'media_position_updated_at')) + state_attr(entity_id, 'media_position') ) | float + interval }}"

The log shows the 'entity_id' is undefined' error when I tap the tile:

2021-09-03 09:35:20 ERROR (MainThread) [homeassistant.helpers.template] Template variable error: 'entity_id' is undefined when rendering '{{ ( as_timestamp(now()) - as_timestamp(state_attr(entity_id, 'media_position_updated_at')) + state_attr(entity_id, 'media_position') ) | float + interval }}'
2021-09-03 09:35:20 ERROR (MainThread) [homeassistant.components.script.skip] skip: Error executing script. Error for call_service at pos 1: Error rendering data template: UndefinedError: 'entity_id' is undefined
2021-09-03 09:35:20 ERROR (MainThread) [homeassistant] Error doing job: Task exception was never retrieved

What am I doing wrong here? How do I pass variables from a tile to a script? I feel like I’m missing something simple.

Thanks.

Edit:
I’m not seeing how the code block in main.js passes variables to the script:

$scope.callScript = function (item, entity) {
      sendItemData(item, {
         type: "call_service",
         domain: "script",
         service: "turn_on",
         service_data: {
            entity_id: item.id
         }
      });
   };