TileBoard - New dashboard for Homeassistant

I just started with Tilwboard, it looks amazing, but I have to small issues about the header :
1. How to get date and time and custom text on one line
2. How to get the weather to correspind to my place ?

Just started working with Tileboard, as you can see from my image with example buttons.

I have CUSTOM_THEMES.TRANSPARENT as the theme and have also just taken some work from a contributor here to create a totally transparent tile across the building facade. The css for this is:

.-theme-transparent .item.transparent-tile {
    background: rgba(255, 0, 0, 0) !important;
    box-shadow: none;
    border-radius: 0px;
    }

The code for that tile is:

			width: 3,
			height: 3,
			state: false,
			type: TYPES.CUSTOM,
			id: {},
			//position: [0, 1],
			classes: ['transparent-tile']
			},

SO I am getting some idea how this works. However, the transparency on my buttons is much more than examples I have seen from contributors and I need a little more opacity on the other standard tiles, without losing the total transparency on my special tile above.

An example of possible tile transparency/opacity that I am after is below:

Screenshot 2021-12-28 22.26.15

How do I code this in the css and config?

Hello all,

I am trying to get tileboard running as a docker container but find I’m having trouble and was hoping someone might point me in the right direction. I currently have home assistant core running in docker using swag nginx with duck dns for secure remote access. My tileboard docker container starts and seems to be running but the server is not reachable on my local network as expected. Tileboard will not be exposed to the internet though nginx.

This is my tileboard docker compose…

version: '3.5'

services:
  tileboard:
    container_name: tileboard
    image: tileboard/tileboard:latest
    restart: unless-stopped
    ports:
      - 8234:8234
    volumes:
      - /share/Container/home-assistant/tileboard/config.js:/usr/share/nginx/html/config.js

I currently have the example config file modified to include my home assistant server local address/websocket.

The container log looks like this…

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/00-check-config.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: IPv6 listen already enabled
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2021/12/29 14:08:43 [notice] 1#1: using the "epoll" event method
2021/12/29 14:08:43 [notice] 1#1: nginx/1.21.4
2021/12/29 14:08:43 [notice] 1#1: built by gcc 10.3.1 20210424 (Alpine 10.3.1_git20210424) 
2021/12/29 14:08:43 [notice] 1#1: OS: Linux 4.2.8
2021/12/29 14:08:43 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 65535:65535
2021/12/29 14:08:43 [notice] 1#1: start worker processes
2021/12/29 14:08:43 [notice] 1#1: start worker process 26
2021/12/29 14:08:43 [notice] 1#1: start worker process 27
2021/12/29 14:08:43 [notice] 1#1: start worker process 28
2021/12/29 14:08:43 [notice] 1#1: start worker process 29

Any insight would be greatly appreciated.

Thanks!

I’m a bit confused about unclear instructions. I want to run TileBoard outside of ingress, but how do I set it up? What will the url be? there is only one field, “host” in the config and it dose not accept any input att all.

Hi guys, how can I have different configs for mobile and tablet, for example?
My working configuration path is “\config\tileboard” (config.js).
I recently installed Tileboard as an Addon.
Thanks for any tip.

It sounds like it should be easy enough to accomplish according to the documentation on GitHub.

config.js will initialize a global CONFIG object. If you want to have several config files, you can create another one next to config.js and name it for example bedroom.js. The specific config will be available at http://HASS_IP:8123/local/tileboard/index.html?config=bedroom.

These instructions may be outdated. It should work for when config files were in “config/www/tileboard”.
The ADDON reads from “config/tileboard”.
Are you using the addon? Here it doesn’t work.

I can’t speak to the addon method. I’m running home assistant core in docker and trying to get tileboard up and running in it’s own container. No luck so far. Hopefully someone sees my post above and can offer some ideas…

Do you have access to the config directory using something like configurator? Maybe you can manually add/edit extra configs just like if it were in the www directory.

I access the folder using another addon (ssh & web terminal) and connect to it using Visual Studio.
Addon is also a container but to my knowledge, much easier to deal with. At least to make it run, because I still don’t know how to edit css stuff if is in a container…
I hope we have the lessons that we need…

Hi all
I use the thermostat/climate tile. Now I have another thermostat in use, the Tado wireless.

With my old thermostat the temp steps where 1*, with the new one it is 0.1*.

How and where can I change this?
And is there a tile for climate/temp which have a gauge/slider? So I can swipe to change te temp.

hi, I have 2 different configs in my config.js
Starting with the part for my mobile dashboard:

if(/[?&]mobile/.test(location.search)) {
   
   var CONFIG = {
   customTheme: CUSTOM_THEMES.MOBILE, // CUSTOM_THEMES.TRANSPARENT,

Second part for tablet dasboard starts with:

else {
   
var CONFIG = {
   customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT

Url for mobile:
http://ip-my-ha/local/tileboard/index.html?mobile
Url for normal/tablet:
http://ip-my-ha/local/tileboard/index.html

Thanks, but I believe you don’t use tileboard as a Addon, right? I believe this changes the approach needed. Also, my tiles are completely different for each device.

As an addon? I use TileBoard as dashboard on mobiles and tablets.

Yes, installed as a HA Addon.

Using these is working (defining a port):
http://HA_IP:8223/?config=tablet
http://HA_IP:8223/?config=mobile

image

I’ve just installed it via the HA Addon option and I can’t find any of the config that I can edit. The Tileboard folder that should be in \config\ isn’t there.

Add-on version: 1.3.3
You are running the latest version of this add-on.
System: Home Assistant OS 7.0 (aarch64 / raspberrypi4-64)
Home Assistant Core: 2021.12.7
Home Assistant Supervisor: 2021.12.2

If I go to the link: http://homeassistant.local:8123/abc67f79_tileboard/dashboard, it’s running and loading fine but I can’t find the config to modify anything.

Any ideas?

I also installed from the Addon. You have to create the folder /config/tileboard by yourself and put inside the config.js

Created LIGHT tile which uses input_boolean.kitchen_light to show if light is on. In the background, this is set based on a light sensor reading, high illuminance on and low off (with specific values for time of day).

I want a click of this to toggle a switchbot switch (switch.kitchen_light) to on or off, depending on the boolean state. I would not want the boolean to be changed directly by this action but by the light sensor, as it currently does now. I do not mind if temporarily it shows as on and then the light sensor value updates it afterwards.

This allows for some issues when the switchbot gets slightly out of line and is successful or not. Can be a bit temperamental.

Tileboard Examples seem to show changing the state of the entity in the tile but none showing carrying out actions on another entity instead.

So:
input_boolean.kitchen_light on on tile:
click sets state of switch.kitchen_light to off
input_boolean.kitchen_light off on tile:
click sets state of switch.kitchen_light to on

input_boolean.kitchen_light state set by light sensor automations (already happy with automation coding)

How should this tile be coded?

What If I want to modify the Background and other source files? How do I link back to this area?

I don’t think I am the best person to answer, but I have learned that you can change the color of a tile bases in a state:

customStyles: function(item, entity){
return { backgroundColor: (entity.state === 'closed' ? 'rgba(0,128,0,1)' : 'rgba(255,0,0,1)') };
},
},