TileBoard - New dashboard for Homeassistant

Hi,

Thanks for making this theme, I’m trying to customise it but need some help.

I want to use different configs for mobile and non-mobile via the url but dont know where to put the variables for each, is it in the same config file or different files in separate folders?

Hi and thank you for making this great project. I tried searching the thread but could not find an answer to my question. So I appoligize in advance if this has already been answered.

I am using an IPad. When I click a tile I want another app to open. This can be achieved by using an url scheme specific to the app. I think I should use the action and create a function that opens the url. But I am not successful in achieving this. Any tips would be greatly appreciated, thanks!

1 Like

I’d like to make multiple sets of screens, one sized for the phone and one sized for a 1024x600 display. Is the easiest thing to do to just duplicate the whole www/tileboard tree and call the appropriate URL to get to the big (or small) variant ala /tileboard.big/index.html or the like ?

I’m going to assume the CSS tweaks will be different for the two resolutions, but that’s just a guess.

Suggestions ?

Hi,
I am trying to install Tileboard wit HTTPS and duckdns.
Here my config:

serverUrl: "https://SECRET.duckdns.org:8123",
wsUrl: "wss://SECRET.duckdns.org:8123/api/websocket",
password: "password",

If i go to https://SECRET.duckdns.org:8123/local/tileboard/index.html, I have “404: not found”

If i try wss://SECRET.duckdns.org:8123/api/websocket on a websocket test client it says me:
{“type”: “auth_required”, “ha_version”: “0.107.7”}

How can I resolve.
Thx Leo

Telepathy mode: ON

Is directory in www called tileboard or TileBoard?

  1. Put this into config.js
function loadScript(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url + '?cache=' + Math.random(), false);
  req.onreadystatechange = function(){
     if (req.readyState === 4) {
        var s = document.createElement('script');
        s.appendChild(document.createTextNode(req.responseText));
        document.head.appendChild(s);
     }
  };
  req.send(null);
}

var conf = location.search.match(/config=([\w\d_-]+)/);
conf = conf ? conf[1] : 'default'
loadScript('includes/' + conf + '.js');

  1. Create includes directory in the root of your TileBoard directory and store configs for each of your dashboard in there. By default it would load default.js and you can specify any other ones in the query string like so:
http://hassio/local/tileboard/index.html?config=tablet

The above example will load tablet.js from includes directory.

1 Like

\192.168.1.5\home assistant\www\TileBoard

You might want to look into CUSTOM tile but as far I know you can only launch apps that expose URL schema like that.

Obviously name of the directory should be tileboard or URL should be:

https://SECRET.duckdns.org:8123/local/TileBoard/index.html

Hello all, just installed this fantastic front end for HA and slowly getting my head around it.

One thing I’m stuck on though - I have a climate tile configured. It displays the correct data from the climate entity in HA, and I can bump the target temperature up and down.

I can’t for the life of me figure out how to change the mode. I have fan, heat, cool, auto and off. The mode is displayed, but I can’t seem to change it. Any pointers?

Thanks!

{
                     title: 'Daikin AC',
                     position: [0, 1], // [x, y]
                     type: TYPES.CLIMATE,
                     unit: 'C',
                     id: 'climate.daikin_ac',
                     state: function (item, entity) {
                         return 'Current '
                         + entity.attributes.current_temperature
                     }
                  }

I tried several different methods but this is the one that worked best. In custom.css, I added the following keyframes animation. I’m just changing the text color but you can add other things like background-color.

@keyframes pulsate {
    0% { 
        color: red;
    }
    50% { 
        color: white;
    }
    100% { 
        color: red;
    }
}

In my config.js, I have wireless tags. I check if the signal strength is -120 which means it’s offline. If offline, ‘animation’: ‘pulsate 3s infinite’. This runs the pulsate animation for a duration of 3 seconds, infinitely. I also check battery level. If less than 25%, pulsate the same as if offline. If both are false, turn of animation with ‘animation’: ‘none !important’.

                        position: [0, 0],
                        width: 2,
                        height: 1,
                        title: "Office Tag",
                        classes: ['-item-list'],
                        customStyles: function(value, entity){
                            var num = parseFloat(this.states['sensor.wt_home_office'].attributes.signal_strength);
                            if (num === -120) {
                                return {
                                    'animation': 'pulsate 3s infinite',
                                };
                            } else {
                                var num = parseFloat(this.states['sensor.wt_home_office'].attributes.battery_level);
                                if (num <= 25) {
                                    return {
                                        'animation': 'pulsate 3s infinite',
                                    };
                                } else {
                                    return {
                                        'animation': 'none !important',
                                    };
                                }
                            }
                        },

works great - thanks !!!

(colors here are a bad photo, they all match)

Hello @resoai,
again thanks for this piece of software: I am still using it everyday!

I notice that the climate title gives me the option to change to [away|none] and nothing else.

This is my configuration:

{
                position: [0, 0],
                width: 2,
                id: "climate.clima_studio",
                title: 'Temp. Studio',
                type: TYPES.CLIMATE,
                unit: '°C',
                state: function (item, entity) 
                {
                  return 'Attuale ' + entity.attributes.current_temperature + ' °C';
                }
 }, // end item

Is this normal ?
The climate is a Daikin

EDIT:
if I turn it on from HA, I see, inside the title, ‘+’ and ‘-’ controls and they work but I would need to turn it on/off directly from TB.

And these are attributes:

hvac_modes: fan_only, dry, cool, heat, heat_cool, off
min_temp: 7
max_temp: 35
target_temp_step: 1
fan_modes: Auto, Silence, 1, 2, 3, 4, 5
preset_modes: away, none
swing_modes: Off, Vertical, Horizontal, 3D
current_temperature: 22
temperature: 21
fan_mode: 5
preset_mode: none
swing_mode: Vertical
friendly_name: StudioAP69238
supported_features: 57

Thanks!

EDIT2: FIXED it thanks to @Harry13
(TileBoard - New dashboard for Homeassistant - #2517 by Harry13)

Yeah, we might make it configurable in future, say an option useHvacMode: true to use HVAC instead of preset.

Thx it is upper-lower case.
Sorry.

Hi guys,
With this code:

{
                     position: [0, 0],
                     id: 'cover.tapparella_cameretta',
                     title: 'Tapparella Cameretta',
                     subtitle: false,
                     type: TYPES.SLIDER,
                     //unit '%',
                     state: false,
                     field: 'position',
                     bottom: false, // puts slider on bottom,
                     value: '&cover.tapparella_cameretta.attributes.current_position',
                     slider: {
                        max: 100,
                        min: 0,
                        step: 1,
                        title: "Position",
                        field: "current_position",
                        value: '&cover.tapparella_cameretta.attributes.current_position',
                        request: {
                           type: "call_service",
                           domain: "cover",
                           service: "set_cover_position",
                           field: "position"
                        }
                     }
                  },

I have this on Tileboard:
tileboard
It is OK.
Now I would like to have the square with UP/STOP/DOWN.
What kind of code have to write?
Please help me.
Thx Leo

Hello all!

First of all thank you to the developer for this fantastic project. I have a question,

I wrote a new controller to dim the screen of fully after a period of timeout. I have a new javascript file - dimmer.js with 3 local variables - timeout, maxBrightness, and minBrightness.

This works just fine - but I would like to fetch the value of those from home assistant so that I can make changes to an input_number.

How can I get tileboard to fetch this value inside my controller? I assume I can use the entity_id to fetch it but I cannot find the actual code that sends the request to HA.

I hope I have been clear but if not please ask.

Thanks!

1 Like

Hi Jayan,
I’ve tried as your serverUrl and wsUrl but i still recieved not found.
/local/index.html not found

please assist.

thanks

This is awesome work! Would you mind sharing your config?

Loving TileBoard - finally figured out how to get different size tiles so my ZWave sensor-based home security system is looking good on a 10" display attached to a Raspberry Pi. Running HA in a Docker container on a i3 Intel NUC. Colors of the gauges change based on values, doors/windows go red and icon changes when open. Perfect for glancing across the house from 30 feet away.