resoai / tileboard Goto Github PK

I have the following config:

{
                     position: [1, 1],
                     width: 1,
                     title: 'Guests',
                     classes: [CLASS_BIG],
                     type: TYPES.INPUT_BOOLEAN,
                     id: 'input_boolean.guests',
                     icons: {
                        on: 'mdi-toggle-switch',
                        off: 'mdi-toggle-switch-off-outline'
                     },
                     states: {
                        on: "On",
                        off: "Off"
                     }
                  }

This is how the tile renders for on, which isn't quite right:

And off it doesn't show anything:

The correct markup is in the html, but it just doesn't show the icon:

The HTTP 403 Forbidden client error status response code indicates that the server understood the request but refuses to authorize it.

any clue what is causing this?

Icons aren't centered in tile when the tileSize is smaller or bigger than 150

My wife and i use cameras as baby monitors when our daughter is asleep upstairs. In september we are having another child and wife wants to see side-by-side cameras.

Our previous cameras had this feature in an app but our current Dlink cameras does not.

Can this be done?

Here is the issue you asked me to create.

and part of my config that contains the cameras.

pages: [
      {
         title: 'Main page',
         bg: 'images/bg1.jpeg',
         icon: 'mdi-home-outline', // home icon
         head: 'head.html', // clock
         groups: [
            {
               title: '',
               width: 2,
               height: 3,
               items: [
                  {
					 position: [4, 0],
					 id: 'camera.koket',
					 type: TYPES.CAMERA_THUMBNAIL,
					 bgSize: 'cover',
					 width: 2,
					 state: false,
					 fullscreen: {
					 type: TYPES.CAMERA,
					 refresh: 1500, // can be number in milliseconds
					 bgSize: 'contain'
					 },
					 refresh: function () { // can also be a function
					 return 3000 + Math.random() * 1000
					 }
				  },
				  {
					 position: [2, 0],
					 id: 'camera.clara',
					 type: TYPES.CAMERA_THUMBNAIL,
					 bgSize: 'cover',
					 width: 2,
					 state: false,
					 fullscreen: {
					 type: TYPES.CAMERA,
					 refresh: 1500, // can be number in milliseconds
					 bgSize: 'contain'
					 },
					 refresh: function () { // can also be a function
					 return 3000 + Math.random() * 1000
					 }
				 }

               ]
            },

           

Being able to enter date and/or time for input_datetime would be great for creating an alarm clock.

Camera Proxy URLs are relative and therefore 404 when the dashboard is running on a different host.

As the config includes serverUrl - this could be prepended.

When I move the slider in TileBoard, the new setting is reflected in Home Assistant dashboard (value and slider position), but when the silder is moved in Home Assistant, only the value is changed in TileBoard, the slider stays the same.
It can be a configuration problem or is it a bug?

Since the weather type can load entries from a group ID, then maybe this can be done?

I have a radio group in HA today where I can pick channel, which media_player and then I use an imput_boolean that run start/stop scripts.

Wouldnt feel optimal to have 3-4 tiles for one function

Edit: autocorrect changed posibility to password in title.

68e3ee0 added the ability to use a function for icons: for widgets, but this doesn't seem to work for the weather widget since it uses a different method of specifying and showing an icon.

Backstory: https://community.home-assistant.io/t/new-dashboard-for-ha/57173/122?u=cgarwood

Weather widget uses this instead of the icons: directive.

fields: {
  icon: 'clear-day',
  iconMap: { 
    'clear-day': 'clear'
  },
}

Would be nice to be able to assign text/icon color for specific tiles/entities. For example my Sonos media_players use albumpictures as background and when its a light background the controls are hard to see.

Trying to implement my SNMP bandwith montoring sensors but cant figure out how to customize my code to get it to work. Would be nice to be able to define this for sensors

https://www.home-assistant.io/components/sensor.snmp/

{
   position: [7, 2],
   width: 2,
   height: 1,
   title: '',
   id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
   type: TYPES.TEXT_LIST,
   state: false,
   list: [
      {
         title: 'Internet Speed IN',
         icon: 'mdi-speedometer',
         value: '&sensor.internet_speed_in.state'
      },
	  {
         title: 'Internet Speed OUT',
         icon: 'mdi-speedometer',
         value: '&sensor.internet_speed_out.state'
      },
	  {
         title: 'WAN Download Average',
		 icon: 'mdi-download',
         value: '&sensor.wan_traffic_in_mean.attributes.unit_of_measurement',
	  },
	  {
         title: 'WAN Upload Average',
         icon: 'mdi-upload',
         value: '&sensor.wan_traffic_out_mean.state'
      },
      ]
},

I use it for a sensor, but maybe it can be applied to other widgets types.
Is there a similar function?

Another enhancement request from me :)
The zoom levels on maps are not very useful for my family, especially zoom level 9. I would be good if it could be configured. Also the first blank/grey view in the slideshow should be removable.

Feature Request:

Consider allowing each tile background image to have an opacity set within the config.js

Consider allowing a background image to be defined in config.js for each group and for that too to have an optional opacity value.

I'm seeing this error on the console with the demo TileBoard

XML Parsing Error: not well-formed
Location: file:///C:/Users/zzz/Documents/Dev/TileBoard/tile.html
Line Number 45, Column 46:

It appears to be pointing to this line:

      <div ng-if="!hasTrackerCoords(entity) && entity.attributes.entity_picture"
           class="item-background" ng-style="trackerBg(entity)"></div>

I'm trying to run TileBoard locally on my Mac, just by opening up index.html in my browser (as suggested in the Community thread) and have it talk to Hass.io running on a RPi. It is receiving events from HA just fine.

However, it's throwing errors about cross-origin requests and I don't get anything showing on my board:

I'm guessing this is because it's being run from a file:// protocol. If that's going to be a problem, the project should maybe be bundled with a really simple web server?

Would be nice to add the source_list input_selectish variable to mediaplayers on clicked.

I would like to suggest making this into a simple node/npm project. The benefits would be:

• built-in web server that can be started easily (with npm start command for example)
• possibility to not expose a configuration/password to the world
• optional auto-reloading of tileBoard on configuration change
• ...

It would complicate the code some as outgoing requests and incoming events would need to go through the TileBoard backend and then be passed to the client (or vice versa).

Possibly compatibility with just running html file from local drive could be kept but it would probably complicate things. And it's not really proper way to run it (triggers warnings and does not support get connecting to HA instance on the web).

I think it's not so hard to implement. We only need UP, STOP, DOWN buttons calling cover.open_cover, cover.stop_cover, cover.close_cover services.

or

In case you don't own a cover hardware, template cover is a good option.
https://www.home-assistant.io/components/cover.template/

New state attribute is not working if I define the states mapping.
I think the previous behavior was better.

Media_Player volume slider overlaps the subtitle layer

Would be nice if support could be added.

here is a popup example from what is expected when clicked in regular Hassio GUI.

I'm using several lights platforms.
Lifx lights allows you to set the brightness to zero (they don't turned off).
Is it possible for switchPercents to return 0% instead of NaN?

I managed to align right a question, how do I change the position of the table (where my photos and my wife it will be on the right)

https://imgur.com/a/cvtgYxx

It would be great to be able to define background colors for widgets with a function or state map. For example, if a door sensor is on or open have a red background, as opposed to a green background if it is off or closed

Likewise, being able to simply set background colors for different entities would be useful, for example, color coding light widgets based on room or type

I'm seeing one of these errors for each state change that comes by:

TypeError: Cannot read property '_c' of undefined
    at b.MainController.$scope.getSliderConf (main-controller.js:474)
    at fn (eval at compile (angular.min.js:241), <anonymous>:4:393)
    at m.$digest (angular.min.js:147)
    at updateView (main-controller.js:1298)
    at handleEvent (main-controller.js:1282)
    at handleMessage (main-controller.js:1270)
    at main-controller.js:1171
    at api.js:138

On an Amazon Fire HD8 tablet, the clock in the header is much too large for the screen. It also runs into the tiles. Removing the header by commenting out the head parameter in config.js works fine, however I was wondering if there are less drastic options. Could the font size and margin for the clock be configurable in config.js (similar to the groupMarginCss option)?

Would be really nice if it was possible to get some sample configuration for mobile devices.

Its way to zoomed in by default and menu icons lapse over tiles when scrolling.

Im not a CSS genius but to have meta site locked to for example 70% zoom would really help.

Cheers

My media player tile bgSuffix is not refreshing automatically when there's a new attributes.entity_picture but only after a browser refresh.

The down/up arrow are still highlighted when cover is closed/open - that isn’t the case for a standard cover on HA which disables and dims the down/up arrows.

Add support for turning fans on/off and setting speed. Perhaps tapping the tile can toggle it on/off and holding on the tile can bring up a list to select the speed? Most (possibly all?) fan. entities have a defined list of speeds, it can't be set to an arbitrary number or % so I don't think a slider would work.

Here's a state/attribute dump from one of my fans:

state: on
speed_list: auto,lowest,low,medium,high
model_name: Ceiling Fan
supported_features: 5
friendly_name: Living Room Fan
device_manufacturer: home_decorators
manufacturer_device_model: home_decorators_home_decorators_fan
speed: low

Another feature I hacked into my HADasboard setup...

Listen for a custom event on the Home Assistant event bus and play and audio file with an optional toast notification or modal popup.

I've used this feature to play a chime when a door opens or closes, as well as playing an alert tone if certain weather alerts are issued or a smoke/co detector goes off. A door chime could pop up a toast notification with which door was opened or closed, and something like a smoke alarm activation could pop up a larger modal dialog with more information.

I have an ecobee 3 thermostat, and the current Climate tile doesn't work with it because the "temperature" attribute on the ecobee in HA is null if the thermostat is in Auto mode (more info here):

I am working on a solution for displaying the range of temps; I altered the climateTarget function to do this:

   $scope.climateTarget = function (item, entity) {
      var value = entity.attributes.temperature;

      if(value == null) {
        //This is a thermostat that has high/low target temps
        value = entity.attributes.target_temp_low + " - " + entity.attributes.target_temp_high;
      }

      if(item.filter) return item.filter(value);

      return value;
   };

Which works fine. The problem is handling the temperature adjustment. In Home Assistant it looks like this:

I don't think cramming two "+/-" button sets onto a single tile is a good idea. Too many opportunities for accidental taps. Interested in everyone's ideas on how to handle this...perhaps a popup with the adjustment buttons?

Having an issue where my entity_pictures for device_tracker wont show.. maps shows just fine

also when i add a light i only see "title", no device shows, and log shows no errors.

Here is for example one of my device_trackers

{
					 position: [2, 0],
					 type: TYPES.DEVICE_TRACKER,
					 id: 'device_tracker.micaela',
					 map: 'google',
					 states: {
					 home: "Home",
					 not_home: "Away",
					 },
					 slidesDelay: 2
				  },
				  {
					 position: [3, 0],
					 type: TYPES.DEVICE_TRACKER,
					 id: 'device_tracker.cjas_iphone_7',
					 map: 'google',
					 states: {
					 home: "Home",
					 not_home: "Away",
					 },
					 slidesDelay: 2
				  },

and here is the light config.

{
					 position: [2, 1],
					 title: 'Library',
					 subtitle: 'Lounge',
					 id: 'light.library',
					 type: TYPES.LIGHT,
					 states: {
						on: "On",
						off: "Off"
					 },
					 icons: {
						on: "mdi-lightbulb-on",
						off: "mdi-lightbulb"
					 },
					 sliders: [
					 {
					 title: 'Brightness',
					 field: 'brightness',
					 max: 255,
					 min: 0,
					 step: 5,
					 request: {
					 type: "call_service",
					 domain: "light",
					 service: "turn_on",
					 field: "brightness"
					 }
					},
					 {
					 title: 'Color temp',
					 field: 'color_temp',
					 max: 588,
					 min: 153,
					 step: 15,
					 request: {
					 type: "call_service",
					 domain: "light",
					 service: "turn_on",
					 field: "color_temp"
         }
      },

Cheers

What is the size of the iPad?

I need to adjust the information to the iPad, you can direct me how to change the scale

Hi Im not sure if this is possible already or not but having a slider or wheel to set the color of lights is about the only thing I am missing on this dashboard. Thanks for all the work you have put into this!

I have an August lock. Could you add support for entity types of lock?

The two states are locked and unlocked. Let me know if there is any other information that would be useful. Once there is support for locks and covers (garage doors), then my whole house can be represented with this awesome dashboard! Can't wait!

Add a screensaver option. After x seconds of inactivity, switch to essentially a digital picture frame with a clock and possibly weather overlay. Tapping on the screen would take you back to either the main dashboard or the previous dashboard.

I hacked this in to my HADashboard install and it looked like this:

Feed it a JSON list of pictures and it will loop through them every 5s or so. I did end up adding a full-screen weather slide at the beginning of the loop as well (that hides the big clock overlay) that includes the current weather conditions and forecast for the next couple days. I had issues with image retention on the Kindle Fire 8" screens where you'd see a faint outline of the clock. Adding the full-screen weather slide that hid the clock helped quite a bit with that.

I'm willing to share code or help program it in, but I've never worked with Angular before, so that will be a bit of a learning curve.

I want to be able to render other text in the list for sensors that have "on/off" state. For example:

{
                           title: 'Garage (1)',
                           icon: 'mdi-garage',
                           value: function() {
                             var val='&binary_sensor.garage_single_bay.state';
                             if(val=="On") {
                               return "Open";
                             } else {
                               return "Closed";
                             }
                           }
                        }

This doesn't seem to work right now, it just tries to render the function as a string:

Having this would be a very powerful addition to lists.

When setting up a text_list that includes sensors, there's no way to include the unit_of_measurement as part of the value:

edit: #55 could be a solution for this

my media_players are not loading any entity pictures, even though i can see that they are there in the regular UI.

A standard tile like a light, script, switch, etc tile, but when tapped fires a custom defined Javascript function.

I would use this in combination with Fully Kiosk Browser to launch other apps, such as Netflix or Plex, from my dashboard, or to add a button to turn on/off the tablet's motion detection or screen.

using google maps for locator does not work. Every request fails with http 403 (forbidden).

The detailed message (from developer tools) is: "The Google Maps Platform server rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account"

So bottom line, there has to be a place where a user can add an API key in config.js

I have the following on my climate device:

{
  position: [0, 0],
  width: 2,
  type: TYPES.CLIMATE,
  id: "climate.hallway",
  title: 'Thermostat',
  state: function () {
    return this.states['sensor.hallway_thermostat_hvac_state'].state;
  }
},

The actual state of climate.hallway is cool, the state of this.states['sensor.hallway_thermostat_hvac_state'].state is cooling

The generated HTML tag contains the state of climate.hallway, but not the state generated by the state: function() {} statement.

<div ng-style="itemStyles(item, entity)" class="item ng-scope -climate -cool -th-climate" ng-click="entityClick(page, item, entity)" on-long-press="entityLongClick($event, page, item, entity)" ng-if="entity = getItemEntity(item)" ng-class="itemClasses(item)" style="width: 286px; height: 140px; left: 0px; top: 0px;">

Im having trouble setting up a scene tile. I have a scene titled Movie_Night in home assistant and added the following to config.js
{
position:[0,1],
id: 'scene.Movie_Night',
type: TYPES.SCENE,
state: false,
icon: 'mdi-movie-roll',
},
however when I load the dashboard no tile shows up. Any ideas?

For my TV i use a command called Turn_on_action which basicly launches a WOL script i wrote.

Can this field be implemented into a media_player as optional?

turn_on_action:
  service: switch.turn_on
  data:
    entity_id: switch.LGTV

Cheers

Is it possible to add code to rtl?

One of my mediaplayers is configured like this:

        {
          position: [0, 0],
          width: 2,
          id: 'media_player.kodi_bedroom',
          type: TYPES.MEDIA_PLAYER,
          state: '@attributes.media_title',
          bgSuffix: '@attributes.entity_picture', // show picture of current media as a background
          bgOpacity: 0.5,
        },

This works, however, if it is offline it shows a transparant tile and the title is set to @attributes.media_title since there is none.
It would be nicer if we could have configure some kind of placeholder instead (like HA webinterface has)

According to index.html it's used in development, but it's not included in the git repo.