TileBoard - New dashboard for Homeassistant

sorry but my configs are very old and not recommended anymore.

Im not on latest tileboard ive more or less forked it into my own personal setup for my needs.

Cheers,

// Jayan

I’m not impressed by your reading skills :wink:

1 Like

Then please impress me by pointing out what I am missing on this WINDOW.config message? I cannot find anything on your page but maybe I am not skilled enough… :roll_eyes:

That can happen if there is a syntax error in loaded config.js. Or the contents of that file is not really a proper javascript (you can navigate to the URL of that file directly to check what it’s returning).

Thanks! That was the right hint. It was a stupid syntax error my config javascript. Tilesboard is now loading…

Hi there all… I wanted to share my experience with TileBoard.
Currently I’m running my home automations from Domoticz (for years) and since a few days I’m experimenting with Dashticz because I would like to control it all from a tablet. Within a few clicks I was able to setup Dashticz and it runs nicely.

For years I also would like to change to Home Assistant, the amount of configuring was holding me back. A few days ago I emptied a Raspberry Pi and installed HASS-io. Within a couple of hours most of my devices where found and available in HASS-io (try to beat that Domoticz!!), from my Tasmota loaded Sonoff devices up to my printer (who would have thought of doing some automations on ink-levels :slight_smile:). I found TileBoard, the interface looks very slick.

I’ve installed some addons in HASS-io with ease, so I thought this was going to be a walk in the park… it turned out to be trying board up your home during an active hurricane.

In chosen directory rename config.example.js to config.js and adjust it for your needs

I couldn’t have magined that

serverUrl: ‘http://’ + location.hostname + ‘:8123’,

and

wsUrl: ‘ws://’ + location.hostname + ‘:8123/api/websocket’,

needed to be altered; it looks like it’s getting the ‘location.hostname’ from my HomeAssistant-installation (since it’s already inside of the config). Most sites would mention something like “http://example.com:8123”. After having changed that I was confronted with several 403 and 404 notifications because of unknown reasons.

The introduction states: “This is a simple yet highly customizable dashboard for Home Assistant.”, I would like to note that it’s anything but “simple”. I still hope to get it working and make the change from Domoticz to HomeAssistant.

It is simple in terms of the technologies used and its lightweightness yet it was never meant to be a one click installation by any means. We are giving users access to raw javascript which makes it very powerful in terms of how it can be configured and this is exactly how it was designed.

Got it.

I’m not a coder and my only comparison is Dashticz where you can define blocks (tiles in TileBoard) and place them in Columns (Groups in Tileboard) and those Columns can be used in Screens (Pages in Tileboard).

If TileBoard can interpret the Tiles, Groups and Pages then this would probably make the whole config.js more readable.

I have some frustrations here trying to get a custom tile to send a MQTT message to an IR Blaster to control some electric candles in my living room. I defined the tile as shown below. The topic and the
payload are correct as I can call mqtt.publish directly from Home Assistant and get the right result. I am also using MQTT Explorer to watch mqtt messages occur. However, the tile, when pressed, results in no mqtt messages. I tried a few permutations of quotes around the topic or not plus a few other minor edits to no avail. Any pointers for me to sort this out?

{
   position: [0, 6],
   type: TYPES.CUSTOM,
   title: 'Candles',
   subtitle: 'On',
   id: { },
   icon: 'mdi-candle',
   action: function(item, entity) {
                Api.send({
                    type: 'call_service',
                    domain: 'mqtt',
                    service: 'publish',
                    service_data: {
                       topic: 'cmnd/A1-IRbridge/IRsend',
                       payload: '{"Protocol":"NEC","Bits":32,"Data":"0x00FF00FF","DataLSB":"0x00FF00FF","Repeat":0}'
                    }
                });
           }
},

Header configuration: how do I get the date and time to be in a single line rather than stacked? I intend to use Tileboard on wall mounted panels and need to make as much room available for the tiles as possible.

Thank you.

Baobab

not working in last version
when i add

<script src="angular-locale_ru-ru.js"></script>

in index.htm and put file of course → in source of index.html missing
<script src="angular-locale_ru-ru.js"></script>

pls help! need localized time-data

Wow, very nice!

The “raw” javascript still includes the Angular Framework and the same authorisation procedures like the HA Lovelace GUI.
I just realised that this runs into the same issue as with Lovelace where one of my iPads gets stucked in some kind of authorization subroutine (despite having the “trusted network” option enabled) and does not show any content.
Thus when I load
http://my_hass_ip:81234/local/tileboard/index.html
nothing happens
In this sense its not simpler than Lovelace and has be abandoned for now until I find the reason for this bug. Too bad…

heh! now worked!

use this  <script src="https://raw.githubusercontent.com/angular/bower-angular-i18n/master/angular-locale_ru-ru.jsangular-locale_ru-ru.js"></script>
``

You can use a long-lived token instead and it should work with older iPads and Android tablets which are stuck with old WebView (4.4-ish if I remember correctly).

but how about align date clock to bottom?
not worked in custom.css

.header clock { vertical-align: bottom; font-weight: bold; }
.clock div { vertical-align: bottom; font-size: 8pt;}

A few brave guys who are keeping the project alive are now working on the i18n so hopefully localisation will soon be easy with TB.

.header {} has absolute position, so bottom: 0; should do the trick.

tnx Alexey! nice work!

  1. but question about vertical align of date is open
    and other question:
  2. how integrate gismeteo weather sensors? darksky api is closed =( need weather in my tablet
  3. can other members provide example of custom.css for fullscreen camera stream?
    if i use DOOR_ENTRY i have error of rest api when tap to screen for close
.header {position: absolute; bottom: 0;} 

not work, need to remove top:0 how? top: none not work to

heh sorry im coding 20 years ago (table tr td etc…)