TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
3214

@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
3215

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
3216

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

3217

@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

3218

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.

3219

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
3220

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
              }
            }
3221
3222

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"
                            }
                        }
                    },
3223

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

CleanShot 2020-06-28 at 12.25.23
CleanShot 2020-06-28 at 12.25.23927×400 61.5 KB

3224

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.

3225

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.

3226

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

3227

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.

CleanShot 2020-06-28 at 13.20.21
CleanShot 2020-06-28 at 13.20.211162×30 3.59 KB

3228

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

3229

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

3230

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.

3231

Just an fyi for anyone else trying to do the same. I was able to fix my function call to change the background color of the tile based on value. My first attempts I was not sending the entire line required in the return statement. Background: My goal was to set a bright color background if the slider had a value greater than 1 and dim the color if 0. This is the working code:

                        customStyles:  function (item, entity) {
                            if (entity.state >= 1) {
                                return {
									'backgroundColor' : '#0080ff',
									};
                            } else {
                                return {
									'backgroundColor' : '#003366',
									};
                            }
							},
2 Likes
3232

Hey guys I’ve been using TileBoard for sometime now and its awesome. I fixed the climate tile to show the hvac_modes and I made an on/off tile (switch) right by the climate tile.Now my question is is it possible to have attributes on that on/off tile so I can set the speed of the fan? Tried the fan tile its not working
here is my Tile Board

dash
dash1341×837 238 KB

3233

I think I’ve fixed hvac_mode in yesterday’s update. You would need to add useHvacMode: true to your climate tiles. I’m afraid I don’t fully understand your question about attributes. What exactly are you trying to do? Also, what exactly isn’t working in a fan tile?