TileBoard - New dashboard for Homeassistant

I have uploaded my custom.css and background image to github:

Instead of reloading the page you could try:

angular.element(window).triggerHandler('view:updated');

Can we add transitions to the click events? for the popup menu for the lights and climate.

i was searching in the code but didn’t find anything that could help with this

Hi,
I’m having a strange problem with the screensaver on an ipad. When I touch the screen to de-activate the screensaver its being picked up by the underlying tile and turning lights on/off.
How can I ignore this first touch and have it only turn the screensaver off?

It seems to be working fine from the PC when clicking, just not from the ipad when touching.
Thanks

Hi all. I’m in the final stages of having Tileboard replace my alarm panel, but running into an issue in regards to sounds. I need the tablet to beep at me when the alarm is set but an entry door is opened, telling me that the alarm was set and now needs to be disabled…

I’m able to add the following to config.js based on an earlier thread:

events: [
        {
      command: 'play_sound',
      action: function(e) {
        playSound(e.sound_url);
      }
    },
         ],

And with that I can then fire off an event to tileboard and it will play the URL that I provide. But how can I then STOP the sound from playing when I actually successfully disarm the alarm? Can I somehow run an event that will stop all sounds from playing? From what I have seen, once you start the sound, you have to let it simply run out and stop playing on its own and there is no stopping control.

Any advice?

I was thinking about the same situation. I am yet to test it, but my plan is to have a short sound file “beep beep” then with an automation send a play sound command with this file every second or two. Once the alarm is in disabled state then stop the automation from sending the play sound command.
Or if the alarm isn’t disabled then play an alarm sound.

How would this automation look? I’ve thought about this as well but loops like this get kinda messy in HA since there’s not an easy way to define that.

What kind of tablet are you using? If it can use tasker I have an alarm working and it plays a song at the alarm time, and stops when I push the big botton. With tasker and MQTT.

Old photo…

Thanks. I am using a Kindle Fire 10. Also when I say alarm I am referring to a security alarm, but what you are saying you are doing may have potential. Any code for this that you can share?

solved

There was a missing “d” in the icon line for my setup apparently. Not sure why, i just took the example tile.

icon: “&sensor.dark_sky_icon_” + id + “d.state”,


I got the weather working without the group.weather ID.

Now onto the next issue regarding weather.
It does not show the icons on the forecast. But i do have the icon sensor thingy. Any pointers?

image

{
   position: [3, 1],
   type: TYPES.WEATHER_LIST,
   width: 2,
   height: 2,
   title: '',
   id: {},
   icons: {
      'clear-day': 'clear',
      'clear-night': 'nt-clear',
      'cloudy': 'cloudy',
      'rain': 'rain',
      'sleet': 'sleet',
      'snow': 'snow',
      'wind': 'hazy',
      'fog': 'fog',
      'partly-cloudy-day': 'partlycloudy',
      'partly-cloudy-night': 'nt-partlycloudy'
   },
   hideHeader: false,
   secondaryTitle: 'Regen',
   list: [1,2,3,4,5].map(function (id) {
      var forecast = "&sensor.dark_sky_overnight_low_temperature_" + id + "d.state - ";
      forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d.state";
      forecast += "&sensor.dark_sky_daytime_high_temperature_" + id + "d.attributes.unit_of_measurement";

      var wind = "&sensor.dark_sky_precip_probability_" + id + "d.state";
      wind += " &sensor.dark_sky_precip_probability_" + id + "d.attributes.unit_of_measurement";

      return {
         date: function () {
            var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
            return d.toString().split(' ').slice(1, 3).join(' ');
         },
         icon: "&sensor.dark_sky_icon_" + id + ".state",
         primary: forecast,
         secondary: wind
      }
   })
},

well if you cant get tasker my way will not work for you, but basically I have mqtt set up, so…

  • a message is sent by HA to start paying the music/alarm
  • tasker receives that message
  • a mp3 starts playing by tasker on the tablet

Thanks. I think ideally would be if there is some way to make an event in TileBoard that would halt all sounds or mute them for a short period, that would be ideal. This allows you to play the file you want on an event and then stop it on demand. Anyone know of a way to do this with events?

This seems fairly hacky and there is probably a better way, but it seems to be working.

I’ve setup a variable above the main config:

var audio2 = '';

And 2 event commands/functions:

{
      command: 'play_sound2',
      action: function(e) {
        audio2 = new Audio(e.sound_url);
        audio2.loop = false;
        audio2.loop = e.loop;
        audio2.play();
      }
    },
    {
      command: 'stop_sound2',
      action: function(e) {
        audio2.pause();
      }
    },

To play the sound send an event with:

{"command":"play_sound2","sound_url":"URL OF SOUND","loop":"true"}

To stop:

{"command":"stop_sound2"}

Hi everybody,
Since the climate entity has been changed in home-assistant, I cannot get to show the appropriate information on my Daikin HVAC on tileboard.
This is the code I have been always using to control the devices:

                    {
                       position: [0, 2],
                       width: 1,
                       id: "climate.daikinap39610",
                       type: TYPES.CLIMATE,
                       unit: 'C',
                       title: 'AC',
                       subtitle: 'Cucina'
                    },

but this is what I see now in tileboard and I cannot control the HVAC:
image
What am I doing wrong in the configuration?

Many thanks!

Now that 0.99 is out and has NWS integration, how would I adapt the list tile to show the forecast, similar to how this was done using darksky? Here is the code I am using for darksky (not my own).

list: [1,2,3,4,5].map(function (id) {
                        
                     hightemp = Math.round("&sensor.dark_sky_daily_high_temperature_" + id + "d.state");
                     var forecast = "&sensor.dark_sky_daily_high_temperature_" + id + "d.state / ";
                     forecast += "&sensor.dark_sky_daily_low_temperature_" + id + "d.state";
                     return {
                        date: function () {
                           var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                           var weekday = new Array(7);
                           weekday[0] =  "Sun";
                           weekday[1] = "Mon";
                           weekday[2] = "Tue";
                           weekday[3] = "Wed";
                           weekday[4] = "Thu";
                           weekday[5] = "Fri";
                           weekday[6] = "Sat";
                           return weekday[d.getDay()];
                        },
                        icon: "&sensor.dark_sky_icon_" + id + "d.state",
                        primary: forecast,
                        }
                  })
               },

@ribbonofblack, thank you! This worked fine for me. I didn’t need to do your first line of code:

var audio2 = ''; 

But the rest of the command you did worked well and solved the use case. If there is a cleaner way to do this that anyone could recommend, please let me know. But otherwise this definitely works and recommend using this method!

See my earlier post with modifications to the Tilebord index.html and main.js files which fixes the issue with the Climate Tile:

Hi, I have three different light switch for the living room. What I wish, is to run all those light in one switch. Is this right what I am doing? Seems it is not working at my end though.

                     position: [0, 2],
                     type: TYPES.CUSTOM,
                     id: {},
                     subtitle: 'Lights',
                     title: 'Living Room',
                     action: function(e) {
                       window.openPage(CONFIG.pages[1]);
                     },
                     icon: function() {
                       //replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
                       var lights = ["&switch.led_light_one.state", "&switch.led_light_two.state", "&switch.led_light_three.state"];
                       //designate a counter variable
                       var count = 0;
                   
                       //loop through the array of lights
                       for (i = 0; i < lights.length; i++) {
                         if (this.parseFieldValue(lights[i]) === "on") {
                           //increment the counter by 1 if the given light is on
                           count++;
                         }
                       }
                       //return the number of lights that are on
                       switch (count) {
                         case 1:
                           return "mdi-numeric-one-circle-outline";
                         case 2:
                           return "mdi-numeric-two-circle-outline";
                         case 3:
                           return "mdi-numeric-three-circle-outline";
                         case 4:
                           return "mdi-numeric-four-circle-outline";
                         default:
                           return "default icon here";
                       }
                     }
                   },

Appreciate your kind help. Thanks

EDIT:

I have this mostly handled now using the NWS plugin. Here is the code:

                     position: [0,2],
                     type: TYPES.WEATHER_LIST,
                     width: 2,
                     height: 1.8,
                     title: '',
                     id: {},
                     icons: { 
                        'clear-day': 'clear',
                        'clear-night': 'nt-clear',
                        'cloudy': 'cloudy',
                        'rain': 'rain',
                        'sleet': 'sleet',
                        'snow': 'snow',
                        'wind': 'hazy',
                        'fog': 'fog',
                        'partly-cloudy-day': 'partlycloudy',
                        'partlycloudy': 'partlycloudy',
                        'partly-cloudy-night': 'nt-partlycloudy',
                        'lightning-rainy': 'rain'
                     },
                     hideHeader: true,
                     // The initial id list is for daytime only
                     list: [0,2,4,6,8].map(function (id) {
                     // id + 1 returns the night attributes since NWS splits returns into day and night separately
                     var night = id + 1;
                     var forecast = "&weather.nws.attributes.forecast." + id + ".temperature / ";
                     forecast += "&weather.nws.attributes.forecast." + night + ".temperature - ";
                     forecast += "&weather.nws.attributes.forecast." + id + ".precipitation_probability%";

                     // This returns the value successfully if displayed directly but fails in the Date function
                     thedates =  "&weather.nws.attributes.forecast." + id + ".datetime";

                     returned_date = new Date(thedates);
                     var dayName = returned_date.toString().split(' ')[0];
                     return {
                        date: dayName,
                        icon: "&weather.nws.attributes.forecast." + id + ".condition",
                        primary: forecast,
                     }

The problem I am having is that I cannot get the datetime value to work in my code. It returns the value and displays it if I return just that attribute value. It also works if I hard code the date exactly from one of the attributes on the states page. However, if I try to pull in the value directly to the date function, it returns an invalid date. Since I am able to see the date being displayed directly from that attribute, how come pushing it to the date function renders it an invalid date?