TileBoard - New dashboard for Homeassistant

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?

@Resoai

what cameras are you using? and can you provide a dummy config for one

{
    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 :slight_smile:

Please replace sub with state. It was a breaking change but it should be a bit more logical now.

Hello, first thank you for great dashboard.
I’m playing with it, but I have little problem to integrate device_tracker based on mikrotik platform. I have my tracker devices inside known_devices.yaml with states Home or Away and also with photos. But how can I show it there?Can you provide an example?I want to have it inside dashboard with photo and state only ( no map).
Thank you.

You might want to create an issue on github for that.

I don’t want to create issue on github, because there is no known issue :wink: . I want to only see example code of your dashboard, because you already have included device_trackers on your dashboard in left top corner for Elena and Alexey with photo and state only.

Thank you.

There are actually several slides cycling every few seconds i.e. it shows a map and changes to a photo.