TileBoard - New dashboard for Homeassistant

Hi @mathewtaylor2007! Did you ever figure out how to pull up the panel automatically?

Here is my Trash and Recycling day configuration. Hopefully, it will help you out. I’m sure there are cleaner ways to accomplish this, but this works for me.

CONFIG.JS:

  {
  position: [0, 2],
  type: TYPES.SENSOR_ICON,
  id: 'binary_sensor.trashday',
  title: 'Garbage Tomorrow',
  state: false,
  icon: 'mdi-dump-truck',
  customStyles: function (item, entity) {
    if (entity.state == 'on') {
      return {
        'backgroundColor': '#10938D',
		'color': '#fff',
        };
    } else {
        return {
          'opacity': '0',
		};
	  }
    },
  },
  {
  position: [1, 2],
  type: TYPES.SENSOR_ICON,
  id: 'sensor.even_or_odd_week',
  title: 'Recycling Tomorrow',
  state: false,
  icon: 'mdi-recycle',
  customStyles:  function (item, entity) {
    if (this.states['binary_sensor.trashday'].state == 'on') {
      if (entity.state == 'True') {
        return {
          'backgroundColor': '#13AC20',
		  'color': '#fff',
          };
      } else {
         return {
            'opacity': '0',
		  };
	    }
	  } else {
         return {
            'opacity': '0',
		  };
      }
    },
  }

CONFIGURATION.YAML:

 binary_sensor:
  - platform: workday
    country: US
    name: trashday
    workdays: [wed]

SENSORS.YAML:

#Even Odd Week
  - platform: template
    sensors:
      even_or_odd_week:
        value_template: '{{ ((now().strftime("%W") | int) % 2) == 0 }}'
        entity_id: binary_sensor.trashday

Trash Day:

Trash and Recycling Day:

Normal Day:

5 Likes

Thank you @knemo!
A different approach than what I had in mind but like it even better!
Much appreciated

Yes I did. I added an automation that is triggered when I open the front door and the alarm is set, and included this in the automation:

- event: tileboard
  event_data_template:
    command: open_alarmpanel
    id: 0

and then put this is the tileboard config

{
command: ‘open_alarmpanel’,
action: function(e) {
this.$scope.openAlarm(ALARMPANEL_TILE, [e]);
}
}

@resoai, great work on this project. Thanks very much.

I’m struggling with the brightness control on a LIGHT tile, when the entity it a group of lights. I can turn on and off the group, but the + and - buttons on the tile return an error saying “No brightness field in object”.

I thought that maybe I just can’t control the brightness of a group, but it works absolutely fine in the slider. So I’m confused!

Here is my code

{
                     title: 'Living Room',
                     position: [0, 0], // [x, y]
                     width: 1,
                     id: 'group.lights_livingroom',
                       type: TYPES.LIGHT,
                       states: switchPercents('brightness', 255, true),
                       // field: 'brightness_pct',
                       icons: {
                          on: "mdi-lightbulb-on",
                          off: "mdi-lightbulb",
                       },
                       brightness: {
                             title: 'Brightness',
                             field: 'brightness',
                             max: 255,
                             min: 0,
                             step: 15,
                             request: {
                                type: "call_service",
                                domain: "light",
                                service: "turn_on",
                                field: "brightness"
                             }
                       
                       },
                       
                       sliders: [
                          {
                             title: 'Brightness',
                             field: 'brightness_pct',
                             max: 100,
                             min: 0,
                             step: 5,
                             request: {
                                type: "call_service",
                                domain: "light",
                                service: "turn_on",
                                field: "brightness_pct"
                             }
                          },
                          {
                             title: 'Temperature',
                             field: 'kelvin',
                             max: 4000,
                             min: 2700,
                             step: 100,
                             request: {
                                type: "call_service",
                                domain: "light",
                                service: "turn_on",
                                field: "kelvin"
                             },
                             
                             
                             
                             
                          }
                       ]
                       
                  },

Any clues would be much appreciated!
Thanks

I have an old tablet witch i use for TileBoard. First page contains some tiles from Home Assistant and the second page an iFrame. I don’t want the animated transition because it is faltering when switching the pages. But when I choose simple transition the iFrame will not be preloaded. So when I go to the second page I have to wait for loading the iFrame. Is there an option to use simple mode but with preloading the second page?

You still have domain “light” even though you are sending the request for the “group”.

Thanks very much for getting back to me.
I can see the domain set to light in the slider controls. They actually work ok already. That reflects how HA works. You can use the light.turn_on service with a group entity.
Anyway, I went ahead and tried changing it just to be sure.
Unfortunately it did not fix the functionality of the + and - buttons on the tile, and when I tried to use the sliders, they did not work any more. I got a “service not found” error.

Is there anything else I can try that springs to mind?
Many thanks again

Still fighting with this default config issue where the header is overlaid on top of the pages and the left menu is not centred on the screen. Looks the same in any browser or screen size I try. The only thing I’ve changed from the default config.example.js is the serverUrl and wsUrl. I’m using the default config and haven’t modified any other files. I would think other people would be bringing this issue up here if it was a problem in the code but I haven’t seen any other posts. What can I be doing wrong?

Original post: TileBoard - New dashboard for Homeassistant

Hi everybody,
I have just started playing with TileBoard and it’s amazing! I did manage to set-up tiles for lights and it was quite easy.
I am having however a hard time setting up slider tiles for covers. I have shelly2 in roller shutter mode, and they work fine with the slider in hassio.
I am not sure how to set the paramenters on TileBoard, I get a “Service not found” error (but i do get correctly the state of the roller shutter).
I would really appreciate some help, it might also turn useful for the rest of us.

This is my configuration.yaml for the shelly2 roller shutter:

cover:

  • platform: mqtt
    name: “Tapparella camera”
    state_topic: “shellies/shellyswitch-xxx/roller/0”
    command_topic: “shellies/shellyswitch-xxx/roller/0/command”
    position_topic: “shellies/shellyswitch-xxx/roller/0/pos”
    set_position_topic: “shellies/shellyswitch-xxx/roller/0/command/pos”
    payload_open: “open”
    payload_close: “close”
    payload_stop: “stop”
    retain: false
    optimistic: false
    qos: 1
    position_open: 100
    position_closed: 0

While this is my code for the TileBoard config.js:

{
position: [0, 1],
width: 2,
type: TYPES.SLIDER,
id: "cover.tapparella_salotto_sinistra",
// state: false,
title: 'Tapparella salotto',
subtitle: 'Sinistra',
slider: {
min: 0,
max: 100,
step: 1,
request: {
    type: "call_service",
    domain: "cover",
    service: "cover.set_cover_position",
    field: "position"
}
}

},

Thanks!

Perhaps you might want to use a light group?

Yes, that worked :grinning::grinning::+1:
Many thanks!

I have another very small issue that you are welcome to leave but here it is. The states statement for an input_select tile doesn’t seem to work as expected. My code is:

          {
             title: 'My Blinds',
             position: [0, 0], // [x, y]
             width: 1,
             id: 'input_select.blinds_myroom',
             type: TYPES.INPUT_SELECT,
             state: '&sensor.blinds_on_my_blinds.state',
             states: { off: 'Off',  on: 'In Motion' },
          },

The tile works fine but displays the state as on or off even though I have mapped those states to In Motion and Off
Does anything look wrong in my code here?

Many thanks again

Also just to add that the light switchplatform also works here, so I can add in some Sonoff switches into the group of lights and everything still works perfectly. The On-Off control turns everything (inc switches) on and off. The + and - controls the level of the actual light bulbs. Perfect. Thanks again.

What is the difference of installing this to just copy and pasting the files from the original GitHub?

Apologies if I’ve misunderstood your question, but this is a helper script that works with AppDaemon. You would still need to copy the TileBoard files from GitHub. If you have AppDaemon set up, you can use the helper tileboard.py script in my repository to set up a randomized auto-updating photo screensaver and an optional overnight refresh of TileBoard. The readme should lay out all the details.

Again, let me know if I didn’t answer your question or if you need me to clarify.

Gotcha - that makes sense

@resoai thanks for this awesome project.
I use tileboard for my 3d printer enclosure.

Link to video https://youtu.be/VdK1M1OUdmI

8 Likes

Looks awesome

Those using Amazon fire with fully kiosk. I followed this guide to turn off the screen and wake again bypassing the lock screen.

You would need to double-check naming in dev-tools, I really don’t know.