TileBoard - New dashboard for Homeassistant

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.

@Fonio did you manage to get it working?
I had the same problem, camera popup didn’t show up. It appeared that tile definition was missing one line camera: {.

Following configuration works with the latest HA and TileBoard:

var FRONT_CAMERA_TILE = {
   position: [0, 0],
   type: TYPES.DOOR_ENTRY,
   id: {},
   icon: 'mdi-phone',
   title: 'Door entry',
   state: false,
   layout: {
      camera: {
         type: TYPES.CAMERA_STREAM,
         id: 'camera.front',
         bgSize: 'cover'
      },
      page: {},
      tiles: []
   }
}
{
   command: 'open_front_camera',
   action: function(eventData) {
      this.$scope.openDoorEntry(FRONT_CAMERA_TILE, FRONT_CAMERA_TILE.id);
   }
},
1 Like

Hi dr.up

Sorry but at the moment i have other things that i setup (garagedoor distance measurement) so i haven’t look anymore, but i have read that it’s also possible that the video format must are right to work,try first if with HA it works if you click on the camera,if yes it’s possible to try a fire event to tileboard?

1 Like

@Fonio configuration from my previous message works fine - camera window pops up on the screen.

@Van

My camera stream has always been rstp. But now tileboard keeps giving me an error on the still image because it’s https: and the stream doesn’t work either. Ugh. I’m going backwards! LOL

Ok, I went and looked at new example tile. Now my still image works fine, but streaming image still doesn’t work. here is my tile board config

// GARAGE CAM \\
                {
                    position: [2, 2],
                    id: 'camera.garagecam',
                    title: '',
                    type: TYPES.CAMERA_THUMBNAIL,
                    bgSize: 'cover',
                    width: 4,
                    height: 2,
                    state: false,
                    fullscreen: {
                        type: TYPES.CAMERA_STREAM,
                        objFit: 'contain',
                        id: 'camera.garagecam',  // Optional: camera entity to use on fullscreen, defaults to the tile camera entity if omitted
                        bufferLength: 5  // Optional: buffer length in seconds for the HLS buffer, default is 5 seconds
                    },
                    refresh: function () { // can also be a function
                    return 3000 + Math.random() * 1000;
                  }

and here is my related camera config in ha

camera: 
  - platform: generic
    name: garagecam
    still_image_url: http://IP_address/ISAPI/Streaming/channels/101/picture
    stream_source: rtsp://admin:password@IP_address/HighResolutionVideo
    username: admin
    password: !secret cam_password
    verify_ssl: false
    authentication: basic

streaming works fine in love lace. Thanks for helping.

sure, it’s pretty straight forward as I explained in the first post:

        {
            title: 'Lights',
            bg: 'images/bg3.jpg',
            icon: 'mdi-lightbulb', //  icon

            groups: [{
                    // title: 'Lights',
                    width: 8,
                    height: 5,
                    items: [


                        {
                            position: [0, 0],
                            width: 0.01,
                            height: 0.01,
                            title: false,
                            state: false,
                            id: {},
                            type: TYPES.ROOM,
                            url: '../floorplan/floorplan_transparent.png'
                        },


                        {
                            position: [0, 0],
                            width: 0.01,
                            height: 0.01,
                            title: false,
                            state: false,
                            id: "light.kitchen",
                            type: TYPES.ROOM,
                            url: function(item, entity) {
                                if (entity.state == 'on') {
                                    return '../floorplan/kitchen.png';
                                } else {
                                    return '';
                                }
                            }
                        },

                        {
                            position: [0, 0],
                            width: 0.01,
                            height: 0.01,
                            title: false,
                            state: false,
                            id: "switch.entry_lights",
                            type: TYPES.ROOM,
                            url: function(item, entity) {
                                if (entity.state == 'on') {
                                    return '../floorplan/entry.png';
                                } else {
                                    return '';
                                }
                            }
                        },



                        ////////////////////////////////////////////////////////////////////////////////////////////////
                        ////////////////////////////////////////////////////////////////////////////////////////////////

                        {
                            position: [5, 1.1],
                            height: 1.5,
                            width: 1.4,
                            type: TYPES.TRANSPARENT_LIGHT,
                            id: "light.kitchen",
                            title: false, //'Kitchen',
                            subtitle: false, //'Lights',
                            icons: false, //{
                            state: false, //{
                            customStyles: { backgroundColor: 'rgba(255,0,0,0)' }
                        },

                        {
                            position: [4.7, 2.6],
                            height: 1,
                            width: 1.7,
                            theme: ITEM_TRANSPARENT,
                            type: TYPES.TRANSPARENT_LIGHT,
                            id: 'switch.entry_lights',
                            title: false, //'ENTRY',
                            subtitle: false, //'Lights',
                            icons: false, //{
                            state: false, //{
                            customStyles: { backgroundColor: 'rgba(255,0,0,0)' }
                        },

....
....
....

1 Like

Hey @tman75,

I am on HTTPS as well it is works fine for me for both still and stream.
Try removing the id in the fullscreen:.

Also try TYPES.CAMERA instead of TYPES.CAMERA_STREAM just because.

cheers,
Van

            {
              position: [0, 0],
              id: 'camera.v_cam',
              type: TYPES.CAMERA,
              bgSize: 'cover',
              width: 2,
              state: false,
              fullscreen: {
                type: TYPES.CAMERA_STREAM,
                objFit: 'contain',
                bufferLength: 5
              },
              refresh: function () {
                return 3000 + Math.random() * 1000
              }
            }

Hi. I have a slider tile in my dashboard that represents the speed of my pool pump in increments of 25. What I’d like to do is have the tile change background color upon any value over zero. I’ve tried using a function, variables, custom styles, all with no luck. I also tried using a state from another binary sensor I have that represents on/off if it is running at all, but still can’t get it to show different colors.

In my custom.css I have included an on style configuration for the background color based on state which works for other tile types, but not on slider. Can this even be simplified in a js function within the tile definition? Thanks for any help, I’m sort of struggling on how to attack this.

custom.css

.item.-th-slider {
  background-color: #003366;
}
.item.-th-slider.-on {
  background-color: #0080ff;
}

tile in config.js which currently shows all other attempts removed:

                    {
                        type: TYPES.SLIDER,
                        position: [0,2],
                        id: 'input_number.pump_speed',
                        width: 2,
                        title: "Pool Pump",
                        filter: numberFilter(0),
                        unit: '%',
                        state: false,
                        bottom: false,
                        slider: {
                            max: 100,
                            min: 0,
                            step: 25,
                        request: {
                            type: "call_service",
                            domain: "input_number",
                            service: "set_value",
                            field: "value"
                            }
                        }
                    },

Good afternoon everyone. I am attempting to get tileboard up and running. Everything was great. I was making some changes (adding my resources and so on). I restarted HA and when it came back up none of the icons are working. I completely deleted the tileboard directory to start over and still no icons. Anyone have any ideas on what could be causing this? As you can see i just end up with little squares. Any suggestions would be greatly appreciated.

I will add that the icons are working fine in HA, this is isolated to the tileboard environment.

HA Supervised
Home Assistant 0.111.4
Debian
NUC i7

Does TileBoard have access to the internet? Icons are loaded from MDI website. You can also open browser console and see if there are any errors in Network tab.

I cant think of any reason why Tileboard couldnt access the internet. I will look at the logs and see if i can find anything.

You don’t need to look into logs, you need developer console in your browser.

That is what i was talking about. I did discover that it is being blocked for some reason. That is very strange considering it was working for a while. Now to track down what is blocking the fonts. Thank you so much for the help! I really appreciate it.

what i find odd is that they are not being blocked in HA, only in tileboard.

HA keeps those icons locally. Try disabling browser extensions, perhaps one of them is blocking it.

I have discovered there is something with the version of Chrome i am trying it in. I loaded an older version and they work just fine. Very strange.