TileBoard - New dashboard for Homeassistant

I’m trying to figure out a simple way to replace the entity_picture in the device tracker on status change. Apologies if this has been discussed before - couldn’t find it.
Using Life360 for tracking and added the picture in HA - displays in TileBoard nicely however it would be great if we could swap it out or change the appearance of the tile itself , apart from ‘away’ status. Any ideas ?

can you please point me what I’m doing wrong here
Weather tile:

position: [1, 2],
height: 1,
width: 1,
customStyles: {'backgroundColor': '#6633FF'},
classes: ['-compact'], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: {},
title: 'First floor',
state: false,
icon: 'mdi-home-floor-1',
//iconImage: 'mdi-home-floor-1', 

Icon does not show up on the tile and does not matter whether I’m trying to use icon or iconImage

please help me out to format date (source: sensor attribute) shown in the notify … I’m trying to get only YYYY-MM-DD without HH:MM:SS and timezone
This looks like this on the screen:

image

my code with custom click action to show notify:

{
 height: .6,
 width: 3,
 position: [0, 0],
 type: TYPES.CUSTOM,
 id: {},
 title: '',
 state: false,
 action: function() { 
    Noty.addObject({
    type: Noty.INFO,
    title: 'Odbiór śmieci',
    message: '<b>Najbliższy <i class="mdi mdi-dump-truck mdi-border mdi-fw"></i> za '+ this.states['sensor.kalendarz_smieci'].attributes.days+' dni </b><br>'+
             '<hr>'+
            '<i class="mdi mdi-food-apple-outline mdi-border mdi-fw"></i>    <b>Bio</b>: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+ this.states['sensor.kalendarz_smieci_bio'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-trash-can-outline mdi-border mdi-fw"></i>       <b>Mix</b>: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+ this.states['sensor.kalendarz_smieci_zmieszane'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-paper-roll-outline mdi-border mdi-fw"></i>    <b>Papier</b>: &nbsp&nbsp'+ this.states['sensor.kalendarz_smieci_papier'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-hexagon-multiple-outline mdi-border mdi-fw"></i>           <b>Plastik</b>: &nbsp&nbsp'+ this.states['sensor.kalendarz_smieci_plastik'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-bottle-tonic-outline mdi-border mdi-fw"></i>  <b>Szkło</b>: &nbsp&nbsp&nbsp&nbsp'+ this.states['sensor.kalendarz_smieci_szklo'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-flower-tulip-outline mdi-border mdi-fw"></i>  <b>Zielone</b>: &nbsp'+ this.states['sensor.kalendarz_smieci_zielone'].attributes.next_date+'<br>'+
            '<i class="mdi mdi-bed-king-outline mdi-border mdi-fw"></i>          <b>Gabaryt</b>: '+ this.states['sensor.kalendarz_smieci_gabaryty'].attributes.next_date+'<br>',
   icon: 'mdi-delete-circle-outline',
   id: 'smieci_dates'
    });
 },
 icon: false,
 customStyles: function (item, entity) { return { 'backgroundColor': 'transparent', 'color': '#aeaeae', };},
},


on top … if anyone know how to sort it :slight_smile: based on the date and make bold those items which will happen in the current week, my wife will gonna love me again :slight_smile:

Look for JavaScripts Date().toLocaleDateString()

Tile type is set to WEATHER. Why?!

hello everyone, I have a problem with tileboard and sliders for roller shutters.
when I send them in complete closing the value goes to 0, but the slider remains fixed to the previous position. for other percentages no problem the slider follows the percentage.
some idea… thnx
My configuration:

                  {
                     position: [3.5, 1.5],
                     type: TYPES.COVER,
                     height: 1,
                     width: 2,
                     title: 'Finestra Grande',
                     id: 'cover.tapparella_finestra_grande_sala',
                     state: false,
                  },
                   {
                  position: [5.5, 1.5],
                  id: 'cover.tapparella_finestra_grande_sala',
                  title: false,
                  subtitle: false,
                  height: 1,
                  width: 1.5,
                  type: TYPES.SLIDER,
                  unit: '%',
                  state: false,
                  field: 'position',
                  bottom: true, // puts slider on bottom,
                  value: '&cover.tapparella_finestra_grande_sala.attributes.current_position',
                  slider: {
                     max: 100,
                     min: 0,
                     step: 1,
                     title: "Position",
                     field: "current_position",
                     value: '&cover.tapparella_finestra_grande_sala.attributes.current_position',
                     request: {
                        type: "call_service",
                        domain: "cover",
                        service: "set_cover_position",
                        field: "position"
                         }
                       }
                    },

it is set to weather as I’m trying to show current climate conditions in the room :slight_smile: data are from Netatmo station and are : temperature, CO2 level, humidity

It looks like this:

image

the only thing is that I wanted indicate that this is a specific room as an icon and thought that
icon: ‘mdi-home-floor-1’, or iconImage: ‘mdi-home-floor-1’ will do the job.

That is because weather tile icon CSS class has “wu wu-XXX” prefix.

OMG … soooo simple … sorry I’m still rookie :slight_smile:
That’s how it looks now:

image

thx for the tip …
toLocaleDateString() haven’t work for me but this did the job: .toString().split(‘T’,1) :wink:

now it looks as it should

image

One last thing regarding weather tile …

Is it possible to create action on tile click -> show popup with history of sensorA (e.g. temperature)
and second action -> show popup with history of sensorB (e.g. CO2 sensor)
both on the weather tile or any other custom tile which I can place above (with transparent background) weather tile :slight_smile:
I saw action example but can not figure out how to use it. So one example for my use case would be great :slight_smile:

This popup may look like it looks on longpress on the sensor tile e.g.:

You can call $scope.openPopupHistory(item, entity); from anonymous function passing relevant item and entity data.

sounds easy :slight_smile: but I’m still a beginner, so would you be so kind and correct the following:

action: function(item, entity) {return this.$scope.openPopupHistory(item, entity);},

by adding in a proper way “sensor.netatmo_domkc_sypialnia_temperature” as a source of the data ? I don’t know how to pass relevant item and enity data into this function :frowning:

Most of my layout consists 1x1 or 1x2 tiles.
Does anyone know if it’s possible to have one of those “spots” divided into 4 smaller tiles, amongst the others? Like the black lines i have in the image below :slight_smile:

make height and width .25 and offset on x,y

Hmm you’re right… Really easy…
I think i was overthinking it in my head - i was trying to make new groups etc :smiley:

Thanks Troy!

1 Like

Hello! I am not familiar with JS objects programming. How can I access to Api.send() from inside of anonymous function? Can somebody give an example?
Some more details. I have a tile, actually a TYPES.SWITCH with custom popup:

{
.....
   customPopupHtml: angular.merge(thermostat_scheduler_html,{}),
   secondaryAction: function(item, entity) {
        return this.$scope.openPopupIframe(item, entity);
    },
   functions: angular.merge(thermostat_scheduler_functions,{}),
   thermostatSchedulerId: 'sensor.thermostat1_schedule',
   thermostatId: 'climate.thermostat1',
},

the popup is opened with ‘bind-html-compile’ which allow ng-binds in template. All works perfectly except sending data/events to HA.

Hi,

What would be the best procedure, if i would like an extra icon in the page menu, but this one doesn’t link to a page, but rather a POPUP_IFRAME?

Image

Ok, I’ve failed this quest. So added new function to $scope:

   $scope.sendCustomData = function (item,data) {
      sendItemData(item, data);
   };

Now I can call any service in HA from CustomHTML. but price for that is the patch to main code :frowning:

Check README.md. Search for “Every anonymous function will call with context”.

1 Like