TileBoard - New dashboard for Homeassistant

Fencek · July 1, 2021, 8:49pm

Hi there. I have a problem with adding additional “types” to config.js.

I am trying to move some cards from my default HA OS lovelace - I’ve started with the weather - just to find out how should I write code in Java… yes I know that Java lang is required there and I’m going to learn it a bit.

Meanwhile, I try to set some cards - probably I’m missing something in the code. I receive the message:

" The “config.js” configuration file has loaded but window.CONFIG is not defined! Please make sure that it defines a CONFIG variable with proper configuration"

Any help greatly appreciated.

Romkabouter · July 2, 2021, 7:17am

type: weather-forecast is not valid.

Fencek · July 2, 2021, 8:36am

This is the whole entity types I can use with this TileBoard right?

Romkabouter · July 2, 2021, 1:25pm

Yes, you have
type: weather-forecast
AND
type: TYPES.WEATHER

Remove the first one, it is not valid

radinsky · July 11, 2021, 9:49am

I recently see a lot of “trying to reconnect” (probably some wifi issue) and I wonder where I can change the timeout before it trying to reconnect?

skank · July 12, 2021, 8:26am

Hi, is there some sort of “show your tileboard topic”?
To see the latest tiles made?
The opening post is from 2018 …
It would be nice, to see what people make of it nowadays…
3966 posts reading is al lot

yolani · July 12, 2021, 11:40am

Hi everyone,

for me the history tile is not working, maybe someone here can help me. The API call fails with 401 unauthorized, for example

curl -X GET \
  https://homeassistant.<MYDOMAIN>/api/history/period/2021-07-08T07:49:34.386Z?end_time=2021-07-08T07:50:04.386Z&filter_entity_id=<SENSOR> \
  -H 'Authorization: Bearer <MYTOKEN>‘

My HASS instance is hosted as a subdomain behind an Nginx reverse proxy.

The weird thing is, if I remove the last variable (&filter_entity_id) everything works at least in the terminal.

Any ideas why this is failing?

resoai · July 15, 2021, 2:55pm

Ruminations87 · July 19, 2021, 9:57am

Hey everyone, got a bit of a weird one.

I’ve been setting this up to work with a Samsung Galaxy Tab A7. Looks great on the tablet.

I have 6 cameras, 1 is 1080p and 5 are 4MP. All the cameras are connected to HA via Frigate and work fine in lovelace.

The screenshots load in just fine and refresh as expected but on the tablet using Chrome or Fully Kiosk I can’t see the stream, i just get a black box. The 1080p camera with identical settings works perfectly. When I load it in Firefox it works fine. Also if I use Chrome on my PC they all load fine.

Any idea where to head with that?

Ruminations87 · July 20, 2021, 9:22pm

Worked out this was a Samsung issue so can be disregarded

reynos · July 23, 2021, 6:18am

Is there any way to control the width of the text column in the TEXT_LIST tile to allow more text to be displayed, rather than … once it reaches the “margin”? It seems both columns are a fixed width with lots of wasted space in the centre.

                 {
                    position: [0, 3],
                    width: 2,
                    type: TYPES.TEXT_LIST,
                    id: {}, // using empty object for an unknown id
                    state: false, // disable state element
                    list: [
                       {
                          title: 'Calendar:',
                          icon: 'mdi-weather-sunny',
                          value: '&sensor.template_calendar_family.state'
                       },
                       {
                          value: '&sensor.template_calendar_family.state'
                       },

resoai · July 23, 2021, 1:57pm

You can override the width of the value in custom.css for any given test list tile:

.item-list--value { width: 50% }

reynos · July 23, 2021, 10:57pm

Thanks @resoai I really appreciate the help, loving Tileboard.

Obviously CSS noob here. I found the below in the styles-xxx.css file.
Is there somewhere I can read up on how to use these text alignment options to figure out how get my title and values to align nicely in custom.css and have the value wrap in too long?

.item-list{text-align:left;margin:8px 0;position:relative;z-index:2}
.item-list--item{margin:3px 8px;line-height:18px}
.item-list--name{width:70%}
.item-list--name,
.item-list--value{display:inline-block;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.item-list--value{width:50%}
.item-list--name{float:left}
.item-list--name .mdi{margin-right:4px;opacity:.8}
.item-list--value{text-align:right}

resoai · July 27, 2021, 2:23pm

I’m afraid you’d have to learn basics of CSS, most of it is just common sense and you can always google it.

radinsky · July 31, 2021, 1:29pm

How do I remove scroll/swipe page (vertically) from the buttons area (showed red) and keep only the menu (green) to change pages? It often accidentally change the page when clicking on a button with a little move…

Romkabouter · July 31, 2021, 1:51pm

This should help:

In your var CONFIG:

var CONFIG = {
   // other settings
   onReady: function () {
      this.$scope.isPanEnabled = false;
   },
}

radinsky · July 31, 2021, 2:40pm

perfectly worked, thanks!

majB · August 1, 2021, 4:39pm

Hello,
I am trying now for several days to make this camera (mjpeg) work, with no success, any help will be appreciated, this is my config.

              {
                 position: [0, 0],
                 width: 2,
                 type: TYPES.CAMERA,
                 id: {},
                 refresh: 0,
                 bgSize: 'cover',
                 state: false,
                 fullscreen: {
                    type: TYPES.CAMERA,
                    id: {},
                    refresh: 0,
                    bgSize: 'contain',
                    filter: function (item, entity) {
                       return 'https://192.168.178.56:9090/stream/video.mjpeg';
                    },
                 }
              },

In the developer console I get this error:
angular.js:15697 TypeError: Cannot read property ‘entity_picture’ of undefined
at camera.js:56
at u (angular.js:18947)
at c.$digest (angular.js:19241)
at c.$apply (angular.js:19630)
at G (main.js:2432)
at Object. (main.js:2150)
at api.js:313
(anonymous) @ angular.js:15697
(anonymous) @ angular.js:11956
$digest @ angular.js:19244
$apply @ angular.js:19630
G @ main.js:2432
(anonymous) @ main.js:2150
(anonymous) @ api.js:313
setTimeout (async)
o._handleMessage @ api.js:312
(anonymous) @ api.js:262
index.html:1 GET https://192.168.178.56:9090/stream/video.mjpeg?_i=0 404 (Not Found)

But if I put this url https://192.168.178.56:9090/stream/video.mjpeg in the browser I get stream instantly.

Romkabouter · August 1, 2021, 5:49pm

This should be the camera entityid (for example camera.front_door)

majB · August 1, 2021, 7:10pm

I think using entity id is only for cam using stream from HA. I am trying to pull it outside HA, thats why the empty id. I used the suggestion of resoai (Alexey) in his message nr 3284.