TileBoard - New dashboard for Homeassistant

sir
ive got issue on the screensaver. ive followed your instruction and still cant get it to work.

attached is the error received.

Thank youissue tileboard

Could someone please help I am still looking for a way to change the history line colour? I managed to do this with the old structure (see below) but I just can’t seem to figure this out with the new structure.

I am pulling my hair out.

Many thanks.

You can set window.Chart.defaults.global.colors from your config file.

By default it has a value: ["#97BBCD", "#DCDCDC", "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"] and chartJS will pick one of those colors “randomly”.

If you want to override the first color you can do:

window.Chart.defaults.global.colors = ["#FF0000", "#DCDCDC", "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"]

You can also use RGB colors (rgb(255, 0, 0)).

Hi guys, i have made some changes to tileboard, on history pop-up but stuck on this…

On history pop-up i have added a selector to get custom history of sensor.


but i dont know how to recall function that shoe history in my function update_history… or reload history template with the new values.
print2
My angular knowledge is not so good… can you please advice @rchl?
Kindly regards

PS. i’m using the old tileboard, unversioned one.

Hi, does anyone can provide a mobile view?

Hey all - I am struggling installing this.
I have the Home-Assistant-Core on docker with Unraid.
I downloaded the latest release, created the www folder in my “appdata\Home-Assistant-Core\www”, then I placed the tileboard release into that www directory. I changed the permissions to rw in WinSCP for the www folder and the tileboard folder (as well as all the files). I then renamed the config.example.js to config.js. Once that was complete, I updated the following lines in the config.js file

serverUrl: 'http://192.168.1.2:8123',

   wsUrl: 'ws://192.168.1.2:8123/api/websocket',

   passwordType: PASSWORD_TYPES.Manual,

   password: 'xxxxxxxxx',

At that point, I restarted the container for Home assistant and go to the following url

192.168.1.2:8123/local/tileboard/index.html

Which gives me this error

If you see this page then you you have most likely picked a wrong way to install TileBoard.

If you are not a TileBoard developer and just want to use it then go to Releases page and download the TileBoard.zip file attached to the latest release.

You can also check out How To Use instructions for more detailed instructions.

Can anyone tell me what I am doing wrong?

Thanks all!

Make sure that you have actually downloaded the TileBoard.zip file and not one of the other zip files.

I’ll check it out now.

I assume this is the right one

https://github.com/resoai/TileBoard/releases/download/v2.2.0/TileBoard.zip

Can you share your code?
I have been trying (now using sensor Buienradar) but cannot get it to work.

I was hoping to get the Weather tile type to do a popup, like the popup type.

Am I missing something, or is it not possible?

Hi all, I’m using Tileboard for a while now and really like it!
Currently I’m using a graph image from Grafana as background for a Sensor tile (bg: '<url>'). This is working great, but I’m looking for a way to refresh the background of the Tile once in a while. Is this possible somehow?

Hi @resoai , just firstly like to say thankyou for this, nothing better than a completely custom JS kiosk.

Just have a question on the screensaver. Is it turning / dimming the screen? I’m noticing if I pull out the charging cable my battery completely drains in 6hrs or so making me think that the screen is actually remaining on permanently.

Also wondering how to add custom JS to the header. Idea I had was to alert the main dashboard when it was bin day e.g when the bin sensor state ===‘True’

I want to use the IFRAME to show a website.
This does not work, error:
Refused to display ‘https://mawaqit.net/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.

Where can I set/change this option?
Or is there another tile I can use?

Website to show: https://mawaqit.net/en/ar-abou-bakr-rotterdam

You can’t change these, it’s a security feature, that a website owner can set. It’s to prohibit “users” to show their content on a “user” page… :wink:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

EDIT: why don’t you use the already offered integration for HA? Seems to be easier than scrapping a changing website. Just saying.

you can not use it like that. You have to define action or secondaryAction and call function

    secondaryAction: function (item, entity) {
       this.$scope.openPopup({

Full example below:

{
    type: TYPES.SWITCH,
    subtitle: 'Kitchen',
    position: [1, 3],
    id: 'light.f1_r1_light_base_fan',
    title: 'Test',
    icons: {
       on: 'mdi-spin mdi-fan',
       off: 'mdi-fan',
    },
    states: {
       on: "On",
       off: "Off"
    },
    secondaryAction: function (item, entity) {
       this.$scope.openPopup({
          type: TYPES.POPUP,
          position: [0, 3],
          id: {},
          icon: 'mdi-android',
          title: 'History popup',
          state: false,
          popup: {
             tileSize: 100,
             items: [
                {
                   type: TYPES.SWITCH,
                   subtitle: 'Kitchen1',
                   position: [1, 3],
                   id: 'light.f1_r1_light_base_fan',
                   title: 'Test',
                   icons: {
                      on: 'mdi-spin mdi-fan',
                      off: 'mdi-fan',
                   },
                   states: {
                      on: "On",
                      off: "Off"
                   },
                },
             ]
          }
       }, '');
    },
 }

Hope it helps.

What should I get out of this? Yes, I’m a user, in so many ways… :joy: :joy: :joy: :joy: :joy: :joy:

you can get something like this.

  1. You will have weather tile
  2. On press you will get POPUP_IFRAME where you can put whatever you want
  3. On long press - you will get POPUP with one button and IFRAME.

From this example you can compose more complex config to achieve your goal

            {
               title: '',
               width: 1,
               height: 3,
               items: [
                  {
                     // please read README.md for more information
                     // this is just an example
                     position: [2, 0],
                     height: 2, // 1 for compact
                     //classes: ['-compact'],
                     type: TYPES.WEATHER,
                     id: {},
                     state: function () {return 'Sunny'}, 
                     icon: 'clear-day',
                     icons: { 'clear-day': 'clear'},
                     action: function(item, entity) {
                        this.$scope.openPopupIframe({
                           type: TYPES.POPUP_IFRAME,
                           title: 'PopUp IFrame',
                           id: {},
                           width: 3,
                           height: 2,
                           customHtml: '<b>Hi</b>',  // Can also be a function that will be passed item and entity.
                           url: 'https://www.youtube.com/embed/_qNhxxo9rVU?autoplay=1'
                        })
                     },
                     secondaryAction: function (item, entity) {
                        this.$scope.openPopup({
                           type: TYPES.POPUP,
                           position: [0, 3],
                           id: {},
                           icon: 'mdi-android',
                           title: 'History popup',
                           state: false,
                           popup: {
                              tileSize: 100,
                              width: 5,
                              height: 3,
                              groupMarginCss: '5px 5px',
                              items: [
                                 {
                                    type: TYPES.SWITCH,
                                    subtitle: 'Kitchen1',
                                    position: [0, 0],
                                    id: 'light.f1_r1_light_base_fan',
                                    title: 'Test',
                                    icons: {
                                       on: 'mdi-spin mdi-fan',
                                       off: 'mdi-fan',
                                    },
                                    states: {
                                       on: "On",
                                       off: "Off"
                                    },
                                 },
                                 {
                                    position: [0, 1],
                                    type: TYPES.IFRAME,
                                    id: {},
                                    width: 3,
                                    height: 2,
                                    refresh: 10000, // 10 seconds
                                    url: 'https://www.youtube.com/embed/_qNhxxo9rVU?autoplay=1'
                                 }
                              ]
                           }
                        }, '');
                     },
                     fields: {
                        summary: 'Sunny',
                        temperature: '18',
                        temperatureUnit: 'C',
                        windSpeed: '5',
                        windSpeedUnit: 'kmh',
                        humidity: '50',
                        humidityUnit: '%',
                        list: [
                           'Feels like 16 C'
                        ]
                     }
                  }

               ]
            }
         ]
      },

BTW: good examples you can find here

Is it possible to have fullscreen camera with audio? The camera in questions (unifi protect, rtsp=on) plays audio in lovelace.

I’m not sure, if you are refering to my post. :wink:

I spoke about the “X-Frame_options” that are set by a website owner, not a website user. You, as a user of that website, can’t change these settings. :slight_smile:

TileBoard is simply a web page, it has absolutely no control over the hardware. Any sleep/wake settings for the screen should be set in the OS. All TileBoard’s screensaver does is show slideshow of photos if no user activity (clicks/taps) have been detected for some time.