TileBoard - New dashboard for Homeassistant

@jimz011 documented his configuration here: https://github.com/jimz011/Tileboard-unedited, screenshots here: Lovelace by Jimzz011 (HA 0.91.x compatible) *DEPRECATED

@sro1705 try something like:

var d = new Date( this.states[ "sensor.rova_bio" ].state );
return d.toLocaleTimeString() + " " + d.toLocaleDateString();

you may not have to do the this.states[…] thing. Most of the function calls include (item,entity) arguments so you could just use entity.state, ex:

       customStyles: function (item, entity) {
          if (entity.state !== 'Home') {
              return {
                  'opacity': 0.8,
                  'filter': 'grayscale()',
              };
          } else {
              return {
                  'opacity': 1,
                  'filter': '',
              };
          }
       }  

The config.example.js file is also a working example. You can rename that config.js and then add a new tile of your own, a light tile for example, and then you are on your way.

@diggerdanh : ive tried the following but returns invalid date

title: 'Afval',
icon: 'mdi-recycle',    
value: function () {
 	var d = new Date([ "&sensor.rova_bio" ].state );
  	return d.toLocaleTimeString() + " " + d.toLocaleDateString();  
}

try var d = new Date( this.states[ "sensor.rova_bio" ].state );

Hey all, I have learned a bunch here, am very much loving my wall mounted tablet running TileBoard, and very much appreciate the time and effort @resoai has put into TileBoard. I decided I wanted to give back a little so I took on perhaps the most requested feature - adding an RGB color picker for lights. Alexey accepted the PR and the functionality is now in place along with updated info in the readme docs and updated pics in the tiles example doc.

If you have a color changing light that has an rgb_color attribute and add the option colorpicker: true to its light tile definition you will see a new option on the longpress screen, along with any sliders you have defined like this:

If you click the color box you will then see this:

Currently this only updates the rgb_color attribute for the light so the light must support that value. I only have one color changing light to test with and what I have implemented works fine with it. Pull down the latest code and give it a try. Let me know if you run into any issues or have any suggestions here: https://github.com/resoai/TileBoard/issues

4 Likes

@diggerdanh

that did the trick… thank you :slight_smile:

1 Like

Firstly this is such a great front end and I am loving the how good it looks.

Having followed all of the documentation and great advice I have managed to create an event triggered movement on the camera. Using the scripts provided I have managed to get it to move Tileboard to the camera page.

The only problem I have is I can not get it to switch the screen saver off. I am using old iPad mini(s) with an app called kiosk pro lite.

I have this defined in my events in config.js

{
command: ‘screen_on’,
action: function(e) {
if (typeof fully !== undefined) {
fully.stopScreensaver();
fully.bringToForeground();
}
},

The call from HA is defined as below

  • alias: ‘Motion Detection Outside’
    trigger:
    • entity_id: binary_sensor.frontsensor_line_crossing
      from: ‘off’
      platform: state
      to: ‘on’
      action:

    • event: tileboard
      event_data:
      command: ‘screen_on’

    • event: tileboard
      event_data:
      page: 2
      command: ‘open_page’

Any help appreciated.

The code you are using is for fully kiosk. Kiosk pro lite is a different app.

First of all thank you so much for your awesome work @resoai! This is amazing!

I have (maybe) a stupid question :).

My current board looks like this (only light panel)…

               {
                 position: [0, 0],
                 title: 'Arbeitszimmer',
                 id: 'light.office_light',
                 type: TYPES.LIGHT,
                 states: {
                    on: "An",
                    off: "Aus"
                 },
                 icons: {
                    on: "mdi-lightbulb-on",
                    off: "mdi-lightbulb-outline",
                 },
                 sliders: [
                    {
                       title: 'Helligkeit',
                       field: 'valuer',
                       id: 'input_number.office_dimmer',
                       max: 100,
                       min: 10,
                       step: 10,
                       request: {
                          type: "call_service",
                          domain: "input_number",
                          service: "set_value",
                          field: "value"
                       }
                    },
                 ]
              },

As you can see I have a light entity and the dim function is made with a RFXtrx input_number…
It calls a shell script (using some python code) to trigger the RFXtrx with something like this:

"echo -ne '\x0a\x14\x03\x03\x00\x86\x13\x01\x02\x00\x00' > /dev/ttyUSB0"

How to implement the input_number into the light component (for the long press function)?

Thanks and best regards
Sunny

Let’s see if anyone can help me on this.

I have tried to configure the sensor type SENSOR_ICON but the ICON does not shows up. What I’m doing wrong?

                {
                 position: [0, 2],
                 width: 0.80,
                 type: TYPES.SENSOR_ICON,
                 id: "sensor.movement",
                 title: 'Living',
                 subtitle: 'Movimiento 1',
                 states: {
                    on: "Movement Detected",
                    off: "Normal"
                 },
                 icons: {'off': 'mdi-human-male', 'on': 'mdi-walk'},
              }

Home_Assistant

Thank you very much for your help!!!

Forget it. I was adding the wrong sensor!!! Apologies!

Anyone have an idea on how to make an iFrame pop out fullscreen as the camera tiles do?

There is POPUP_IFRAME tile for it.

Glorious, thank you for the help and fantastic project!

What I mean initially was a small iFrame window that when clicked went to fullscreen, similar to how the camera displays a thumbnail but a streaming image when enlarged. I can’t seem to get Home Assistant to give me a good stream from my camera but a locally hosted url with the stream from my NVR works fine. When embedded as an iFrame it works flawlessly I was looking to have multiple iFrames on a camera page that would enlarge when clicked from a smaller streaming video.

Nope. Either IFRAME or POPUP_IFRAME.

It is possible to change a TYPE.SWITCH tile icon based on other TYPE.INPUT_SELECT option selected?
i.e: I have two tiles, one is a SWITCH to turn ON/OFF the TV and the other tile is an INPUT_SELECT to select a source like: Netflix, TV, PS3, etc. I want to select for instance Netflix and change the SWITCH TV Icon with a Netflix image.

Thanks!

Ok this is my dashboard so far.

2 Likes

I am not sure if I said it yet, but thank you so much for developing this @resoai. It is an amazing front end and I think the best dashboard out for Homeassistant.

I was wondering if anyone has this issue. I am running on an iPad 3rd gen. My goal is to have this always running on the iPad. It is running from a “save on home screen” bookmark that essentially runs full screen on the iPad (except for the menu bar…I wish that would go away). There are still 2 apps that my kids use (for the bus and school lunch) every morning, but then we put it back on Tileboard. It will only stay on TileBoard for 1 to 2 hours, and then it will go back to the home screen. After some troubleshooting I realized it was the TYPES.CAMERA_THUMBNAIL tile. If I commented that tile out it would stay on for 24 hours+. I changed where the HA proxy was getting the image (direct from camera and now it gets it direct from MotionEye). Is there something I can do to change my tile so it doesn’t close every 2 hours?

here is my config for the camera tile if it helps:

// GARAGE CAM \\
            {
                position: [2, 2],
                id: 'camera.garagaecam',
                title: '',
                type: TYPES.CAMERA_THUMBNAIL,
                bgSize: 'cover',
                width: 4,
                height: 2,
                state: false,
                fullscreen: {
                    type: TYPES.CAMERA,
                    bgSize: 'contain',
                refresh: 1500,
                },
                refresh: function () { // can also be a function
                return 3000 + Math.random() * 1000;
              }
             }, 

and here is my yaml for camera.

camera: 
  - platform: generic
    name: garagaecam
    still_image_url: https://10.191.30.52:8765/picture/1/current/
    stream_source: http://10.191.30.52:8081
    verify_ssl: false