TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
3401

Thank you so much. I will give it a try…

    CAMERAS: {
        position: [0, 2],
        width: 2,
        height: 1,
        title: 'Kameras',
        id: {},
        type: TYPES.CUSTOM,
        state: false,
        action: function() {
            this.$scope.openCamera(GROUP1.POPUP_CAMERA, GROUP1.POPUP_CAMERA.id);
        }
    },
    POPUP_CAMERA: {
        position: [0, 2],
        width: 2,
        height: 1,
        title: 'Kameras',
        id: {},
        type: TYPES.CAMERA,
        state: false,
        bgSize: 'cover',
        refresh: function () { // can also be a function
            return 3000 + Math.random() * 1000
        },
        filter: function (item, entity) {
            return 'http://homeassistant.fritz.box:8801';
        },
        fullscreen: {
            type: TYPES.CAMERA,
            objFit: 'contain',
            id: 'camera.wohnzimmer',
            refresh: 1500
        }
    },

The popup shows up but is empty.

3402

can this function be used to show the attributes value? like for weather, right now history show last states… cloudy, sunny… i will be nice to show the latest temps recorder by attribute temperature.

3403

@resoai how can we hide a row from TEXT_LIST? i whant to show a row whit some values only if the state is on for a sensor.

hidden:true is not working on only one element from this list.
regards

3404

I’m presently traveling and can’t respond to every message, you can form the list dynamically, a bit like I’ve shown a few days in this post:

1 Like
3406

Hi all, I love Tileboard so far and have been able to scrap together the start of a dashboard used to control lights. I’m confident I can also get scenes to work which is next. I’d also like full ecobee thermostat control (currently, it only displays current status, no ability to change the temp or mode). I’d also love to bring in a few vid feeds. I have wyze cams setup in motionEYE. Anyways, I’m not good at JS, and was curious if someone had a full dashboard with these types of devices, that I could just copy and paste and change the entities to my own??? Any help would be great!

3407

There is probably a better way to do this but I couldn’t figure it out. So for now what I did was update index.html for the TEXT_LIST to only show items that do not have the ‘off’ state.

The html for the TEXT_LIST has a line for ng-repeat. Currently is set to this:

ng-repeat="line in item.list track by $index">

If you update this line you can have it check the ‘value’ of the list item using ng-if. In my case, I don’t want to show if the value is off. So I changed it to this:

ng-repeat="line in item.list track by $index" ng-if="listField('value', item, line) !== 'off'">

What this should do if I understand correctly is loop through the list, but only render the html for list items that don’t have a value of off. This will break lists where you want to show items with the state of off, so to work around that, you can have your value function return something like ‘!hideme’ and instead of checking for ‘off’ check for ‘!hideme’.

Example:

list: (function() {
  l = [];
  for (i = 1; i < 4; i++) {
    l.push({
      title: 'Title ' + i,
      icon: 'mdi-school',
      value: function () {
        let currentState = this.states['sensor.bedroom_light'].state;
        if (currentState === 'off') {
          return '!hideme';
        }
        return currentState;
      }
    });
  }
  return l;
})(),

index.html (original)

      <div ng-if="item.type === TYPES.TEXT_LIST"
           class="item-entity-container">
         <div class="item-list">
            <div class="item-list--item"
                 ng-repeat="line in item.list track by $index">
               <div class="item-list--name">
                  <i class="mdi" ng-class="listField('icon', item, line)" ng-if="line.icon"></i>
                  <span ng-bind="listField('title', item, line)"></span>
               </div>
               <div class="item-list--value">
                  <span ng-bind="listField('value', item, line)"></span><!--
               --><span ng-bind="listField('unit', item, line)"></span>
               </div>
            </div>
         </div>
      </div>

index.html (modified)

 <div ng-if="item.type === TYPES.TEXT_LIST"
           class="item-entity-container">
         <div class="item-list">
            <div class="item-list--item"
                 ng-repeat="line in item.list track by $index" ng-if="listField('value', item, line) !== 'off'">
               <div class="item-list--name">
                  <i class="mdi" ng-class="listField('icon', item, line)" ng-if="line.icon"></i>
                  <span ng-bind="listField('title', item, line)"></span>
               </div>
               <div class="item-list--value">
                  <span ng-bind="listField('value', item, line)"></span><!--
               --><span ng-bind="listField('unit', item, line)"></span>
               </div>
            </div>
         </div>
      </div>
3409

On device tracker tile is there a way to display large map when clicked? Interactively if possible?

Edit: Nevermind, i used action function to dynamically insert your popup_iframe html code with google maps direction iframe, used from location lat/long as users current location and to location from zone.home lat/long. Now when you click device tracker tile it opens google maps directions iframe in a popup which shows users current location, directions to home and travel time… Just what i wanted…

3410

thanks for replay man but is not what i need.
my simple need is to show only if the status is on. i don’t want to make changes to html.

the request i think is not that difficult. if one light is on, in that box it will show the number of lights are on, if one or two temp i above a limit, the warning will be in that text box… and so on…

the code i try is this:

list: (function() { 
                          l = [];
                          // this.parseFieldValue throw errors
                        entities = this.parseFieldValue('&group.light.attributes.entity_id', item, entity).split(',');
                        var count = 0;
                        for (var i in entities){
       //// again this line cant be used
                          if (this.parseFieldValue('&' + entities[i] + '.state', item, entity) == 'on') count++;  
                        }
                            if(count){
                              l.push({ 
                                  title: 'Lights: ', 
                                  icon: 'mdi-school', 
                                  value: count+' lights are on ' 
                                  
                              }); 
                              
                            }
                          
                      })(),

but i cant get the sensor status in order to push in to the list the values i need to show.
i dont know the right javascript code to get the status of entity in that loop. right now it give errors.

please advice @resoai

3411

tileboard not pharse attributes from json type.
my code:

   title: 'Recently added on PLEX',
   id: 'sensor.plex_recently_added', 
   type: TYPES.TEXT_LIST,
   state: false,
   list: [
      
         {
          type: TYPES.SENSOR,
          id: 'sensor.plex_recently_added',
          title: function(item, entity) { return entity.attributes.data[1].title; },
          icon:  function(item, entity) {  return entity.attributes.data[1].icon; },
          value:  function(item, entity) {return  entity.attributes.data[1].airdate;},
             
         },

attributes:

data:
  - title_default: $title
    line1_default: $episode
    line2_default: $release
    line3_default: $number - $rating - $runtime
    line4_default: $genres
    icon: 'mdi:eye-off'
  - airdate: '2020-08-10T19:51:17Z'
    aired: '2019-02-15'
    release: '$day, $date $time'
    flag: false
    title: The Umbrella Academy
......

just empty rows.

in a simple tile it works, but not in TYPE.TEXT_LIST

problem reported here TileBoard - New dashboard for Homeassistant but with no solution.

3412

Your entities variable should be an array of entities, this.parseFieldValue accepts only one parameter.

3413

You can not put SENSOR tile into TEXT_LIST tile.

3414

can i use a workaroud?

3415

Dear @resoai , please be kindly and point me in the right direction… how to get the state of an entity in this function:

                     height: 0.6,
                     title: false,
                     type: TYPES.TEXT_LIST,
                     id: {},
                     state: false, // disable state element
                     list: (function() { 
                          l = [];
.....

i have try this twho lines and i get errors…

if (this.parseFieldValue('&light.light_2.state') == "on")  alert('da');
//or
 if(this.states["light.light_2"].state == 'on') alert('da');

i just dont know how to get the state inside of list: function…

3416

No, parsing a group does not give you list of entities. this.parseFieldValue accepts one parameter only.

3417

You are n to providing the full code and not saying which error your getting.

3418

here is the full code:

                     type: TYPES.TEXT_LIST,
                     id: {},
                     state: false, // disable state element
                     list: (function() { 
                          l = [];
                        var count = 0;
                        if(this.states["light.light_2"].state == 'on') count++;
                            if(!count){
                              l.push({ 
                                  title: 'Lights: ', 
                                  icon: 'mdi-school', 
                                  value: count+' lights are on ' 
                                  
                              }); 
                              
                            }
                          
                      })(),

the error is the generic one wrote by you: “Please meke sure you have…”

3419

You need to open browser console to see what actual JS error says. However this will now work inside (function(){ … }); Make a function outside config that will return the list you need and assign it to list like this:

list: myFunction()

I’m traveling and only have access via my iPhone so I can’t really help with any code at the moment.

3420

@resoai, thanks so much for all your help. I hope you had a good vacation.

So this seems to have fixed a few bugs. Tileboard now doesn’t crash that often on my iPad gen3 using kiosk pro. So thank you!

However, and this is weird, it seems like my image only refreshes every hour. So let’s say I start at at 12:15. It will continue showing my every second of my cam until about 12:20 (5 minutes). Then it will stay on that image until 1:15, and show me another 5 minutes, and stay on the last image from 1:20 until 2:15, and so on. Any ideas?

Thanks

3421

I am still on vacation :slight_smile: To be honest I don’t know how iPad could be behaving. MJPEG should just keep the stream open. It could well be that old iPad can not handle multiple streams. Try hiding all of the but one and see if it makes a difference.

3423

Hey Guys, been experimenting with the new popup tile to get my light workflow going on the wallpanel. One press on the tile toggles the light group (i.e whole room), longpress opens a popup and displays individual light sources in the room for precise control.

Got it working so far with action (apiRequest.call) and secondaryaction ($scope.openPopup).

But the nice finishing touch would be to close the popup by clicking on the dimmed background outside the popup border. Is this possible with some javascript sourcery or a build-in feature not documented? As of right now you have to click the X on the popup header.

Any ideas?