TileBoard - New dashboard for Homeassistant

Updated to latest version after reading above but climate is still not showing hvac_modes , only shows set_preset_mode in TYPES.CLIMATE tile.

also life360 tile is behaving differently, hideEntityPicture: is set to false but with latest version the picture is gone, reverting back to previous all is fine.

anything I’m overseeing here.?

(using Daikin AC’s)

I updated to the latest TileBoard files and I am still having the climate.house tile not showing hvac_modes. Anything I’m missing?

I’ve been playing around with this for a couple of days and ended up being able to get pretty close to the “Clear Theme” from another thread. Pretty pleased with how it looks at the moment.

I have uploaded my custom.css and background image to github if anyone wants to use it.
https://github.com/bremor/tileboard-clear-theme

3 Likes

like this look ! please share the code :pray:

1 Like

Same here, haven’t found a solution either

yeah same

i’m using the daikin skyzone custom component

But I FIXED IT !!!
and its working for me
this is what i did

had to change in /scripts/controllers/main.js
under
setClimateOption

from set_preset_mode to set_hvac_mode
and preset_mode to hvac_mode

and in the index.html file
under the TYPE.CLIMATE
change the first two entity.attributes.preset_mode to just entity.state as mine doesnt have that attr or does it have any preset_modes
changed the operation_list to hvac_modes as per the changes
and the preset_modes to again hvac_modes cause thats what were listing

now i just have to work out how to put the fan mode on the same tile
and will be sweet

3 Likes

i fixed mine see above

@Harry13
Thanks, those instructions worked great for fixing my climate tile.

I can understand wanting to add the fan, however I use that function so seldom that it doesn’t bother me too much not having it.

Same here but it’s the Virgo in me that want a everything perfect !

Using Tileboard for the phone, it allows 7 icon pages to fit the width of the screen. When I add another page, ir creates another row. Is it possible to keep only one row, sliding left and right instead? Thanks.

Hi, can anyone help me please? I have a simple configuration of a Custom Tyle for power-on and power-off my Climate:

  • if I try to delete all “var” and “action” declaration, it doesn’t work;
  • I try to call service “climate.turn_on and climate.turn_off” from HA interface, and it works without any problem.

The tile doesn’t work, when I press it nothing happens.

Below the configuration:

{
position: [0, 0],
type: TYPES.CUSTOM,
title: ‘AC Camera’,
id: ‘climate.ac_camera’,
icons: {
‘cool’: ‘mdi-snowflake’,
‘off’: ‘mdi-power-standby’,
},
action: function(item, entity) {
var action = ‘climate.turn_on’;
if(entity.state === ‘cool’) {
action = ‘climate.turn_off’;
}
Api.send({
type: ‘call_service’,
domain: ‘climate’,
service: action,
service_data: {
entity_id: climate.ac_camera
}
});
}
},

Can anyone help me please?
Thanks

Is it possible to use TIleboard to switch on and off an Automation?

I’ve tried the type: TYPES.AUTOMATION, but it only triggers it, can the type: TYPES.SWITCH, switch be used here?

Yes, switch can be used for automations. I do.

1 Like

Thanks just added it in and it works great. :slight_smile:

The only other thing I’m missing now is some way of change in input_text using a Tileboard tile, but that’s probably beyond the scope of what Tileboard is intended to do.

Can you tell how it can be implemented for getting image from camera entity?
Now I have it like this (and it is not updating):
bg: '&camera.flowers.attributes.entity_picture'

How I can force it to update every x seconds?

Thanks!

Is it possible to set a custom (css) class to add css animation to spin the icon?
I’ve tried something like this:

.-spinning {

  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

and providing configuration of the tile with:
classes: ["-spinning"],

got no success.
any thoughts?

How do I fix the words in big box here? its the state of a sensor so it changes based on what alarm i pick.
This is my alarm clock now and i would like the words big and in the middle.

            {

               title: '',
               width: 2.65,
               height: 3,
               items: [
                  {
                     position: [0, 0],
                     width: 3,
					 height: 2,
                     type: TYPES.SCRIPT,
                     id: "script.alarmstop",
                     state: false, // disable state element
					 customStyles: {'fontSize': '25px'},
                     title: '&sensor.alarmset.state',
                     
                  },

               ]
            },

ok, this actually work, for icon only you should use this:


.-spinning div div{

  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Is it possible to have dynamic classes? one class for each state (on/off).
Tried something like that but got no success:

                   classes: function(item, entity){
                     if (entity.state == 'on') {
                        return '-spinning';
                     }
                   }

classes is array and you are returning a string.