TileBoard - New dashboard for Homeassistant

small help needed :slight_smile:
One of my sensors in HA has attributes like this:

status: ok
gw_system-stats:
  cpu: '4'
  mem: '44'
  uptime: '694219'

when I’m trying to use CPU data in TYPES.GAUGE by setting value in the following way:

value: function(item, entity) { return entity.attributes.gw_system-stats.cpu },

I’m getting this error:
image

Seems that there is an issue with char “-” in the “gw_system-stats”
Does anyone have an idea how to solve it ?

as I’m not a css master :frowning: can I kindly ask someone to write for me custom.css which will change columns width in tile TYPES.TEXT_LIST
in general, now it looks like this:

image

and I would like to have 70/30 split -> middle and right side column.
The first one with icons is ok :slight_smile:
Thank you very much in advance.

Replace the - with an _ in your return line

HA does this for any instance of ‘-‘

You can confirm this by checking the states tab in developer tools and look for your sensor

not in this case :slight_smile:
See screen below …

image
this is copied directly from state page in HA

Has anyone’s tweaked the Climate tile much?

I am trying to get the value of a sensor’s state into a variable for display there.

Anyone have an example? Seems like it should be so easy…

So I have created the directory
/usr/share/hassio/homeassistant/www/ and all of the files are in there including index.html but I get a 404 when going to
https://IP.AD.DR.ES:8123/local/index.html
I have restarted HA. What am I missing?

Does your case match? Do you see your configuration.yaml in /usr/share/hassio/homeassistant?

Hi all,

DarkSky has stopped working for me. I get this:

DarkSky works on HA but for some reason not with Tileboard. I also had it working on my tablet for days after it stopped working on my laptop but as soon as I edited the code it stopped working on my tablet too.

This is my code for that section:

{
                     position: [2.27, 2.11],
                     width: 2,
                     height: 1.8,
                     //classes: ['-compact'], // enable this if you want a little square tile (1x1)
                     type: TYPES.WEATHER,
                     id: 'weather.dark_sky',
                     title: '',
                     state: '&sensor.dark_sky_summary.state', // TOP RIGHT label with weather summary (e.g. Sunny)
                     icon: '&sensor.dark_sky_icon.state',
                     //iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image
                     icons: { //Big Icon
                        '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: { // most of that fields are optional
                        temperature: '&sensor.dark_sky_temperature.state', // BIG TEMP
                        temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement', //CELCIUS
                        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: [
                           // custom line
                           'Feels like: '
                              + '&sensor.dark_sky_apparent_temperature.state'
                              + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
                  
                           // another custom line
                           'Pressure: '
                              + '&sensor.dark_sky_pressure.state'
                              + '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
                  
                           // yet another custom line
                           '&sensor.dark_sky_precip_probability.state'
                              + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
                              + ' chance of rain'
                        ]
                  }
                  },

config.yaml:

# DarkSky
sensor:
  - platform: darksky
    api_key: hidden
    forecast:
      - 7
    hourly_forecast:
      - 0
      - 1
    monitored_conditions:
      - summary
      - icon
      - temperature
      - apparent_temperature
      - pressure
      - precip_probability
      - humidity
      - wind_speed

weather:
  - platform: darksky
    api_key: hidden

Yes I believe so.

root@bionic-hassio:~# cd /usr/share/hassio/homeassistant/
root@bionic-hassio:/usr/share/hassio/homeassistant# ls -al configuration.yaml 
-rw-r--r-- 1 root root 1719 Feb 24 01:59 configuration.yaml
root@bionic-hassio:/usr/share/hassio/homeassistant# tree -L 1 www
www
├── config.example.js
├── favicon.png
├── images
├── index.html
├── LICENSE.md
├── manifest.webmanifest
├── README.md
├── scripts
├── styles
└── TILE_EXAMPLES.md

3 directories, 7 files

Looks okay to me. I’m not sure why it’s giving a 404 for index.html. how do rights looks?

I added your code to my tileboard and it’s working properly.

Check under Developer Tools / STATES and verify your missing states are showing up there and the spelling is the same as what you have in tileboard.

Permissions look right but I also made the whole directory 777 for grins. Plus I would think I’d get a 403 or something instead of 404 if it was a permissions issue.
Reading some other posts it sounds as if maybe something along these lines is necessary?
https://developers.home-assistant.io/docs/frontend_creating_custom_ui/

You should only need to create the www folder and restart HA. Are you using docker?

www folder created… HA restarted (even restarted thew whole Linux VM).
Yes using Docker … HASSIO

Which version of ha are you running?

Try sudo docker exec -it homeassistant bash
You should be in /config. If not, cd /config then see if you have a www directory and if it contains your files.

Here’s the contents of my www folder along with permissions and ownership when shown within the docker instance.

image

Been trying since 0.106 Currently on 0.107 now.

# sudo docker exec -it homeassistant bash
bash-5.0# cd www
bash-5.0# pwd
/config/www
bash-5.0# whoami
root
bash-5.0# ls -la
total 144
drwxr-xr-x    5 root     root          4096 Mar 19 21:37 .
drwxr-xr-x   11 root     root          4096 Mar 20 09:33 ..
-rw-r--r-x    1 root     root          1080 Mar 19 21:37 LICENSE.md
-rw-r--r-x    1 root     root         23100 Mar 19 21:37 README.md
-rw-r--r-x    1 root     root         16766 Mar 19 21:37 TILE_EXAMPLES.md
-rw-r--r-x    1 root     root         11155 Mar 19 21:37 config.example.js
-rw-r--r-x    1 root     root          7288 Mar 19 21:37 favicon.png
drwxr-xr-x    5 root     root          4096 Mar 19 21:37 images
-rw-r--r-x    1 root     root         53078 Mar 19 21:37 index.html
-rw-r--r-x    1 root     root           142 Mar 19 21:37 manifest.webmanifest
drwxr-xr-x    5 root     root          4096 Mar 19 21:37 scripts
drwxr-xr-x    2 root     root          4096 Mar 19 21:37 styles
bash-5.0# 

Only thing I can recommend doing next is to create test.html file and add something simple like the following and see if it opens or also gives you a 404 message.

<html>
<body>
Hello TileBoard!
</body>
</html>

When I change font-size to 100px it cuts out the top and bottom of the icon:

.item-entity--icon {
font-size: 80px;
line-height: 80px;

Any idea of how I can make the icons bigger without the cut offs?

Also is there a way to make make the media player buttons bigger and have the volume buttons even bigger than the other buttons on the tile?

thanks in advance

This should be done using custom.css.

Search this topic for custom.css and classes: for more information and examples. Any entries in custom.css will override what’s in main.css. You can also use classes: to apply a custom style to a particular element of a tile.

You’ll need to play around with various settings until you get things the way you want them.

After update from 0.106 to 0.107.1 tileboard was blocked by HA.
The tablet ip was banned and i found an websocket api_password error and an authetication error in HA registry.
All accesses from tileboard end up with a 403 error.

Can anyone help me?