TileBoard - New dashboard for Homeassistant

Is it possible to filter values from History Graph?
For example I would like to ignore “Unavailable” states here:

image

Hello everyone.
Do You know how(if possible) can i put the here bellow(yaml custom card) code into a tileboard button?

type: custom:button-card
name: '[[[ return `${states[''input_text.test''].state}` ]]]'
entity: switch.test
size: 100%
triggers_update: all
icon: |
  [[[
          
          var x = states['input_text.test'].state;
          if (x == 'Poarta este deschisa') return 'mdi:account-lock-open'; 
          if (x == 'Poarta este inchisa') return 'mdi:account-lock'; 
          if (x == 'Poarta se inchide') return 'mdi:gate-arrow-left'; 
          if (x == 'Poarta se deschide') return 'mdi:gate-arrow-right'; 
          else return 'lightgrey';
        ]]]
styles:
  card:
    - height: 93px
  icon:
    - color: |
        [[[
          
          var x = states['input_text.test'].state;
          if (x == 'Poarta este deschisa') return 'red'; 
          if (x == 'Poarta este inchisa') return 'green'; 
          if (x == 'Poarta se inchide') return 'yellow'; 
          if (x == 'Poarta se deschide') return 'yellow'; 
          else return 'lightgrey';
        ]]]

Hi All,

Open question out there … obviosuly there is a list of prexisting example tiles

TileBoard Example Tiles

However,

As anyone created any new tiles that could be shared with the wider community ?

Hello guys,

It is possible add a tile card with this costum card ?

I try search how do it but o dont found any information

Thanks

Hi everyone,
I have a temperature sensor that reports every 5 seconds (I need this high frequency for automations). However, the chart is quite horrible and impossible to read since I set such a high frequency as you can see from the picture below. How can I show only one datapoint per hour? Maybe by creating a new sensor, but how?
Thanks!

Problem solved, I just discovered the filter platform.

Hello. How i can to change climate tiles step to 0.5 degrees?

I am use Moes BRT-100-TRV in z2m and button minus not working. I think that problem is step. Z2m rounded setings.

Hey @resoai, hope you’re doing ok in this current terrible situation. Just wanted to say that your project is still very much alive and being actively used by more than you might think, me being one of them. All my mobile dashboards are based on a modified version of TB, I still think this is one of the best and most flexible UIs for home assistant. Thanks for laying the ground work for this project back in 2018 ! It’s Tileboard that made me switch from Domoticz to HA back then.

1 Like

I need to change the temp in steps of 0.5 degrees to. Now using the tile with my Tado but can only use 0.1 steps.

Have asked this before but no reactionairs received.

Thanks so much for your kind words.

I am trying to convert from running Tileboard from within the public Home Assistant www directory which I’ve used for several years to running it as a Home Assistant addon. Unfortunately I have a problem, namely that it cannot be found.

So, in step 1 I copied /config/www/TileBoard to my desktop and deleted TileBoard from my Pi. In Step 2, I followed the instructions “Run as a Home Assistant addon” and used the default settings which tell me to populate /config/tileboard with config.js, styles/custom.css, images/*, and locales/*. I found it interesting that this was in /config, not in /config/www per my previous installation. The addon installed with no problem.

After restarting the addon, I use a browser on my iPhone and direct it to http://[local IP of HA]:8123/local/tileboard/index.html. My iPhone returns a 404: Not Found error. I tried putting the tileboard directory in /config/www and turning the ssl and useExternalUrl options off but have the same result. I pasted the TileBoard log below and the only suspicious thing I see is [12:12:13] INFO: Using base URL 'null'.

I don’t know what Ingress is as I have never used it before, but when I read about Ingress I saw no guidance for resolving my issue.

Any thoughts on what I am doing wrong? I’d really prefer to use the addon installation.

Thanks

[s6-init] making user provided files available at /var/run/s6/etc...exited 0.
[s6-init] ensuring user provided files have correct perms...exited 0.
[fix-attrs.d] applying ownership & permissions fixes...
[fix-attrs.d] done.
[cont-init.d] executing container initialization scripts...
[cont-init.d] 00-banner.sh: executing... 
-----------------------------------------------------------
 Add-on: TileBoard
 Simple yet highly-customizable dashboard
-----------------------------------------------------------
 Add-on version: 1.3.7
 You are running the latest version of this add-on.
 System: Home Assistant OS 9.5  (armv7 / raspberrypi4)
 Home Assistant Core: 2023.2.5
 Home Assistant Supervisor: 2023.01.1
-----------------------------------------------------------
 Please, share the above information when looking for help
 or support in, e.g., GitHub, forums or the Discord chat.
-----------------------------------------------------------
[cont-init.d] 00-banner.sh: exited 0.
[cont-init.d] 01-log-level.sh: executing... 
[cont-init.d] 01-log-level.sh: exited 0.
[cont-init.d] nginx.sh: executing... 
[12:12:13] INFO: Using base URL 'null'
[cont-init.d] nginx.sh: exited 0.
[cont-init.d] tile-board.sh: executing... 
[12:12:13] INFO: Symlink user configuration files to the server folder
[cont-init.d] tile-board.sh: exited 0.
[cont-init.d] done.
[services.d] starting services
[services.d] done.
[12:12:13] INFO: Starting NGinx server...
2023/02/22 12:12:13 [notice] 365#365: using the "epoll" event method
2023/02/22 12:12:13 [notice] 365#365: nginx/1.18.0
2023/02/22 12:12:13 [notice] 365#365: OS: Linux 5.15.84-v7l
2023/02/22 12:12:13 [notice] 365#365: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2023/02/22 12:12:13 [notice] 365#365: start worker processes
2023/02/22 12:12:13 [notice] 365#365: start worker process 387

Hey at all,

is there an opinion, to show the complete value in a TEXT_LIST, if it is longer? I have some values, that are cutted.

Thanks for your Tips!!

Hello!
I am looking for a light web dashboard to be used with an old Android 4.4.2…
YES I know it is oooold, and NO it can not be updated :frowning:
But I am totally into giving a 2nd life to old products…

So I got my eyes on TileBoard, and I’ve seen that in the GIT this question has been asked before… But I am going to ask here again :slight_smile:

Would it be possible to modify my TileBoard to make it as Feature-less / Light as possible, for it to be handled by Android 4.4.2 = Webview (30)

Thanks!

Once I’ve installed the add-on, do I need to manually add the tileboard folder or should it already be in my config directory?

Asking because I can see the example dashboard and that must be held somewhere but I can’t find a folder named tileboard in config.

This is just what I’m looking for.

I’ve spotted your HA code below, but can you give me a pointer as to how the rate card of the upcoming rates is configured in TileBoard please?

Hi, I have a custom tile that should display the state of my garage (open/closed) and also be able to toggle the state of the garage. I want to call a script from the function of the action attribute to do this. I have tried using this.$scope.callScript, but I can’t get it to work. How do I use that function call correctly?

Is there an alternative solution for the problem?

Thanks!

Hey guys. Thanks a lot for this amazing piece of software.
Using it now on my smartmirror and already configured all i want.
Except for one thing: 5x next upcomming calendar events
I have setup google calendar in HA and it’s calendar is working.

How can i get this to work/show in tileboard?

thx

Hi, I have installed the TileBoard from the addons.
I have created the folder and placed the config file in it (in the home assistant config directory).
And that is working really good. But when I create folder for “styles” and place the CSS file, then I just get “Bad Gateway” when accessing the tileboard.

Anyone know what this is? Is it bad formating in the CSS?
The TileBoard addon also have issues starting up, after a restart when I have the “styles” folder and CSS file.

Hello, would someone please help me with changing the colors of the icons and states of the ‘TEXT_LIST’ statements? I would need to change the color of the icons (for example, distinguish the window/door with green and red colors as open and closed status) and also the value itself according to the on/off status or based on the numerical value less than/more than (for example to display the temperature).

I tried various things via custom.css, but unfortunately to no avail.

Thanks in advance for any pointers in the right direction.

I change colors in my gauges and door/window sensor icons based on value. Sensors are green normally and red when opened. Gauges change colors based on values. For example for temperature, 80 = red (hot), 40 and below are blue (cold) and similarly for windspeed.

Example for a door/window sensor - green typically and goes red when open


                  {
                     position: [0.15, 1.10],
                     type: TYPES.SENSOR_ICON,
                     width: 0.4,
                     height: 0.4,
                     title: 'Front Door',
                     id: 'binary_sensor.ecolink_door_window_sensor_sensor_2',
                     states: {
                        on: "OPEN",
                        off: "closed",
                     },
                     icons: {
                        on: 'mdi-door-open',
                        off: 'mdi-door-closed',
                     },
                     customStyles: function(item, entity){
                        if (entity.state === 'off') {return {'backgroundColor': '#2E8B57',};}
                        else if (entity.state === 'on') {return {'backgroundColor': '#B80D0D',};}
                        else {return { 'backgroundColor': '#FFA100',};}
                    }
                  },

And for a temperature gauge - changes color based on how hot/cold it is.

        {
           position: [0.15, 0.3],
           width: 0.90,
           height: 0.80,
           title: 'Outside Temp',
           subtitle: '',
           type: TYPES.GAUGE,
           id: 'sensor.outtemp',
           value: function(item, entity){
              return entity.state;
           },
           settings: {
              size: 200,
              type: 'semi',
              min: 0,
              max: 120,
              cap: 'round',
              thick: 20,
              label: 'Outside Temp',
              append: '@attributes.unit_of_measurement',
              duration: 1500, // Defaults to 1500ms
              thresholds: { 0: { color: 'blue'},  40: { color: 'cyan' }, 60: { color: 'lightgreen' }, 80: { color: 'red' } },  // Defaults to undefined
              labelOnly: false, // Defaults to false
              foregroundColor: 'rgba(0, 150, 136, 1)', // Defaults to rgba(0, 150, 136, 1)
              backgroundColor: 'black',                // Defaults to rgba(0, 0, 0, 0.1)
              //customStyles: function(item, entity){
                              //if (entity.state > 85)      {return {'backgroundColor': '#B80D0D',  };}
                              //else if (entity.state > 60) {return {'backgroundColor': '#2E8B57',  };}
                              //else if (entity.state > 32) {return {'backgroundColor': 'darkblue', };}
                              //else if (entity.state < 32) {return {'backgroundColor': 'blue',     };}
                              //else {return { 'backgroundColor': '#708090',};}
                           //},
              fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
           },
        },

Coloring things is pretty nice. We can see a 8" Kindle Fire from the other end of the house and know we have doors or windows open…

Here’s an old version of the dashboard…