TileBoard - New dashboard for Homeassistant

var date = this.parseFieldValue("&weather.nws.attributes.forecast." + id + ".datetime");

Perfect! Here is the completed code for anyone that wants to use the NWS plugin. One caveat with this method is that the low/high will flip late evening/night since the forecast gets updated and the first object returned [0] becomes the overnight low. This can probably be handled since the NWS object returns a day/night boolean value but I’m out of time on this for now.

{
                    {
                     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,
                     list: [0,2,4,6,8].map(function (id) {
                     var id2 = id + 1;
                     var forecast = "&weather.nws.attributes.forecast." + id + ".temperature / ";
                     forecast += "&weather.nws.attributes.forecast." + id2 + ".temperature - ";
                     forecast += "&weather.nws.attributes.forecast." + id + ".precipitation_probability%";
                        return {
                           date: function() {
                              var wxdate = this.parseFieldValue("&weather.nws.attributes.forecast." + id2 + ".datetime");
                              var d = new Date(wxdate);
                              return d.toString().split(' ')[0];
                           },
                           icon: "&weather.nws.attributes.forecast." + id + ".condition",
                           primary: forecast,
                        }
                     })
                  },

You could simply compare two to determine which one is high :slight_smile:

True. Which is easier? The “daytime” boolean or the high/low comparison? I don’t know the answer.

"forecast": [
    {
      "detailed_description": "Partly cloudy, with a low around 71. South southeast wind 5 to 10 mph.",
      "temperature": 71,
      "datetime": "2019-09-26T20:00:00-05:00",
      "daytime": false,
      "condition": "partlycloudy",
      "precipitation_probability": 0,
      "wind_bearing": 157.5,
      "wind_speed": 8
...
    },

Hey, I’m trying to have a sort of light card to control the volume of my snapcast players. So, single-click would toggle mute, +/- would step volume, long-click would bring up a slider.

I have the slider working, but light won’t accept the action function.
Dimmer_switch does accept the action function, but has no slider.

Is there an obvious way to make that work, which I am simply not seeing right now?

You can create a template light in HA to control each of your zones.

I did something similar back in the day, when I didn’t yet have a cusotm compoment for CasaTunes:

 casatunes_0:
      friendly_name: "Lounge"
      value_template: "{{ states('switch.casatunes_0') }}"
      level_template: "{{ (states('sensor.casatunes_volume_0') | int * 255 / 100) | int }}"
      turn_on:
        service: switch.turn_on
        data:
          entity_id: switch.casatunes_0
      turn_off:
        service: switch.turn_off
        data:
          entity_id: switch.casatunes_0
      set_level:
        service: rest_command.casatunes_set_volume
        data_template:
          zone: "0"
          volume: "{{ (brightness / 255 * 100) | int }}"

Thanks for the hint! I had forgotten about this one, will probably try this as a workaround…

However, wouldn’t it be a good generalization, if dimmers and lights were more alike? If I interpret the code correctly (and forgive me, if I’m wrong, because this is my first days with TileBoard), it is almost provided for already. If the click-callback was dimmerAction, it would fall back to toggleSwitch anyways. The plus/minus actions are probably similar, I guess?

If this was thought until the end, I believe, most of the click actions at least could be fit in this scheme. I’m thinking very few “super-tiles“, which are specialized by options only. Maybe, this will even lead to custom tiles being provided by the community more easily?

That’s something, that HAdashboard seems to be good at. Besides its simple configuration (for the first steps), but that’s a totally different story for now…

What do you think?

Sounds a bit messy but could be done. Unfortunately having a newborn child, I have absolutely no time for TileBoard thus any new features are now being developed by users and submitted via PRs on github.

@rchl is our hero who has recently been reviewing PRs vigorously and has deep understanding of how TileBoard works. A great thanks to him!

1 Like

:slight_smile: Congratulations and welcome to the club!

I’ll see, if I can find some time and provide a first attempt to discuss with @rchl

Thanks very much, after a little tinkering this seems to work.

I also needed to do a

         $scope.pages = CONFIG.pages;

In order to change the contents of the pages but so far so good. :slight_smile:

@athua Many thanks!!

Hi all. Is there a way to make the Alarm panel automatically pop up with an automation from HA? For instance, when someone enters my house and the alarm is set and on an entry delay, I want the alarm keypad to automatically popup - I can easily use a trigger with HA, and fire an event as an automation, but not sure if the tileboard code supports this.

I see in github that you can set an event for javascript to open up a page but can you do anything where it will open up the alarm panel with an event?

Thanks!

  1. Define alarm tile as variable and use it in UI definition.
  2. Use it in the event as follows
command: 'open_alarm',
      action: function(eventData) {
         var tile = TILES.ALARM;
         this.$scope.openAlarm(tile, tile.id);
      }
}
  1. Don’t blame me if it doesn’t work.

Hi all,
I would like to use the + and - buttons of TYPES.LIGHT to trigger my shell scripts (433mhz triggers) to control brightnes.


Is that possible?

Currently I’ve created to separate TYPES.SCRIPT buttons to trigger my shell scripts.
Thanks and best regards,
Sunny

You don’t need to try calling scripts from TileBoard, simply create a template light in HA which would call respective scripts for brightness and also toggle the light.

Thank you for your answers. I really don’t know how to create a template out of my shell script calls and how to combine them to a slider (or something similar). Do you have any examples?

HA’s website has great examples for every component:

I’ve found something interesting:

   /** type: DIMMER_SWITCH **/
   /* optional (main toggle function)*/
   action: Function,
   /* optional (function will be called with context)*/
   actionPlus: Function,
   actionMinus: Function,

This would be great if I can trigger my shell commands using the plus and minus buttons.

The benefit of a template light is that you will end up with a proper light control both in HA and TileBoard rather than trying to awkwardly call services via TileBoard.

This works - awesome! Thanks @resoai!