TileBoard - New dashboard for Homeassistant

It is a warning, not an error. It was there all the time.

Thanks, it seems it’s working again for me now in Firefox, I with it was a mixture of HA Auth acting odd and caching that was stopping Tileboard from loading the page.

Hello!
Is there an ability to change background color depending on some conditions (sensor value, for example)? I saw pictures of tileboards here and there were pictures where there was a rain in the background and the weather was rainy too. I want to do this. I want to to this using anonymous function but I don’t know how to access sensor from this function.

Hi, sorry if this would have been obvious, I was not able to find that info:
Is it possible to show the “age” of each entity? Means when the last value update has happened?

Btw. really cool Dashboard! I use it in an iFrame in my MagicMirror. Works like a charm!

Something like this maybe:

              state: function(tile, entity) {
                const lastChanged = moment(entity.last_changed).fromNow();
                return 'Updated: ' + lastChanged;
              },

Note1: The date might be off if your server and browser are not in sync. They are off by few minutes for me (I have to fix that).

Note2: The last_changed might change more often than just toggling the tile state. You have to see if it works for you. There is also last_updated which might be more appropriate (don’t have time right now to check).

Thanks for the hint!
I think I will go with

state: function(tile, entity) {
   return moment(entity.last_updated).format('HH:mm');
},

Hi all, Has anyone got an ONVIF camera to appear on tileboard?
Mine worked for a bit but then began flooding tileboard with “unable to fetch image” errors.

did this ever go anywhere?
looks great

HA is most probably throttling the requests, try bringing refresh down to about 2-3 secs.

1 Like

thanks @resoai I shall try tghis

HLS Camera Streams

Anyone wishing to get proper camera streams in TileBoard can update to the latest code and set tile type to CAMERA_STREAM (only for fullscreen):

{
   position: [0, 0],
   id: 'camera.front_gate',
   type: TYPES.CAMERA_THUMBNAIL,
   bgSize: 'cover',
   width: 2,
   state: false,
   fullscreen: {
      type: TYPES.CAMERA_STREAM,
   },
   refresh: function () { 
      return 3000 + Math.random() * 1000
   }
}
3 Likes

Has anyone made a tile that flashes or pulses when a sensor value reaches a certain number (e.g temperature falls < 0). If so, could they share their config please?

@Roel11 I did modify both files… wonder what am I doing wrong :frowning:

Is the “refresh” option available for other tile types?
I have a lot of sensors data at the screen, and seems it slowing down my old Tab2

The customHtml option doesn’t work for me in my custom tile. When i type a function for the customHtml, it only shows the raw function in chrome.

{
    position: [0, 3],
	type: TYPES.CUSTOM,
	title: 'Screen Off',
	id: { },
	icon: 'mdi-monitor',
	customHtml: function(item, entity){
							
		var lastUpdated = this.states["sensor.washer_state"].state.last_updated;
		return lastUpdated;
							
	},
},.

In the UI it shows

function(item, entity){var lastUpdated = this.states["sensor.washer_state"].state.last_updated;return lastUpdated;}

as the tile content.

Did i do something wrong?

EDIT:
Nevermind, just found this https://github.com/rchl/TileBoard/commit/603bd9c3c30d499cea68df0421a6b08a90744ddf

now it works.

Hi,
I hope someone can help me to fix my tileboard configuration.
I would run it on a 8" tablet in vertical mode so my resolution is 800x1280.

In a resoai post I read that tileboard try middle align every page but mines seems to top align. Is it normal?

First, I would reduce the gap between the left menu and content pages to see three columns without the need to reduce the tile size (I tryed this way but weather tiles trncate the wind speed). I tried to modify main.cc or create a custom.css file to alter the page-align but no luck. Nothing change.

Then I have an issue on all page except the first one: every page add a small bottom area to the following page. In the second screenshot you can see the bottom side of the previous page. Its size change on every page: small on the second page, little bigger on the third page and so on.

I’m not able to change the background color of door/window contacts. I added following code to these switches:

customStyles: function(item, entity) {
	return { 'backgroundColor': entity.state == 'on' ? 'rgba(255,0,0,1) !important' : 'transparent' }
}

My goal is to see the red tile if contact is on (open) and the normal transparent background when it is closed.

Last thing is the last page where is a list tile where I putted the battery status of my sensors.
The icon doesn’t work. These sensors expose a sensor ending with ‘_battery’ suffix with the value of the battery. I searched and found a post of resoai but it isn’t working with my configuration.

Sorry for my english but it isn’t my main language.

My configuration:

/*
 This is an example configuration file.

 COPY OR RENAME THIS FILE TO config.js.

 Make sure you use real IDs from your HA entities.
*/


var CONFIG = {
   customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
   transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
   entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
   tileSize: 150,
   tileMargin: 6,
   serverUrl: 'http://xxx.xxx.xxx.xxx:8123',
   wsUrl: 'ws://xxx.xxx.xxx.xxx:8123/api/websocket',
   authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
   //googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
   //mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
   debug: false, // Prints entities and state change info to the console.
   pingConnection: true, //ping connection to prevent silent disconnections

   // next fields are optional
   events: [
        // Example: End the screensaver and make sure Fully Kiosk Browser is in the foreground.
        {
            command: 'screen_on',
            action: function(e) {
                if (typeof fully !== undefined) {
                    fully.stopScreensaver();
                    fully.bringToForeground();
                }
            }
        },
        // Example: Play a sound file
        // Include sound_url in the event_data from Home Assistant
        {
            command: 'play_sound',
            action: function(e) {
                playSound(e.sound_url);
            }
        },
        /* Example: Open a specific TileBoard page
         * Include a page field in the event_data from Home Assistant
         * that matches the id: of a page in the TileBoard CONFIG
        */
        {
            command: 'open_page',
            action: function(e) {
                window.openPage(CONFIG.pages[e.page]);
            }
        }
     ],
   timeFormat: 24,
   menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
   hideScrollbar: true, // horizontal scrollbar
   groupsAlign: GROUP_ALIGNS.VERTICALLY, // HORIZONTALLY or VERTICALLY

   header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
      styles: {
         padding: '30px 130px 0',
         fontSize: '22px'
      },
      right: [],
      left: [
         {
            type: HEADER_ITEMS.TIME,
            styles: {
               margin: '0px 0px 0px -110px'
            }
            //dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
         }
      ]
   },

   /*screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
      timeout: 300, // after 5 mins of inactive
      slidesTimeout: 10, // 10s for one slide
      styles: { fontSize: '40px' },
      leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
      slides: [
         { bg: 'images/bg1.jpeg' },
         {
            bg: 'images/bg2.png',
            rightTop: [ // put text to the 2nd slide
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: 'Welcome to the <b>TileBoard</b>',
                  styles: { fontSize: '40px' }
               }
            ]
         },
         { bg: 'images/bg3.jpg' }
      ]
   },*/

   pages: [
      {
         title: 'Principale',
         bg: 'images/bg3.jpg',
         icon: 'mdi-home-outline', // home icon
         groups: [
            {
               title: '',
               width: 3,
               height: 1,
               items: [
                  {
                     position: [0, 0],
                     height: 1,
                     classes: ['-compact'], // enable this if you want a little square tile (1x1)
                     type: TYPES.WEATHER,
                     id: 'weather.xxx',
                     state: false, //'&sensor.dark_sky_summary.state' (label with weather summary --e.g. Sunny--)
                     title: 'Oggi',
                     icon: '&sensor.dark_sky_icon.state',
                     icons: {
                            'clear-day': 'clear',
                            'clear-night': 'nt-clear',
                            'partly-cloudy-day': 'partlycloudy',
                            'partly-cloudy-night': 'nt-partlycloudy',
                            'cloudy': 'cloudy',
                            'rain': 'rain',
                            'sleet': 'sleet',
                            'snow': 'snow',
                            'wind': 'wind',
                            'fog': 'fog',
                            'hail': 'sleet',
                            'lightning': 'chancetstorms',
                            'thunderstorm': 'tstorms'
                     },
                     fields: { // most of that fields are optional
                            //summary: '&sensor.dark_sky_summary.state',
                            temperature: '&sensor.dark_sky_temperature.state',
                            temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
                            windSpeed: '&sensor.dark_sky_wind_speed.state',
                            windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
                            humidity: '&sensor.dark_sky_humidity.state',
                            humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement'
                     }
                  },
                  {
                     position: [1, 0],
                     height: 1,
                     classes: ['-compact'], // enable this if you want a little square tile (1x1)
                     type: TYPES.WEATHER,
                     id: 'weather.xxx',
                     state: false,
                     title: 'Domani',
                     icon: '&sensor.dark_sky_icon_1d.state',
                     icons: {
                            'clear-day': 'clear',
                            'clear-night': 'nt-clear',
                            'partly-cloudy-day': 'partlycloudy',
                            'partly-cloudy-night': 'nt-partlycloudy',
                            'cloudy': 'cloudy',
                            'rain': 'rain',
                            'sleet': 'sleet',
                            'snow': 'snow',
                            'wind': 'wind',
                            'fog': 'fog',
                            'hail': 'sleet',
                            'lightning': 'chancetstorms',
                            'thunderstorm': 'tstorms'
                     },
                     fields: { // most of that fields are optional
                           //  lowTemperature: '&sensor.dark_sky_overnight_low_temperature_1d.state',
                           //  lowTemperatureUnit: '&sensor.dark_sky_overnight_low_temperature_1d.attributes.unit_of_measurement',
                           //  highTemperature: '&sensor.dark_sky_daytime_high_temperature_1d.state',
                           //  highTemperatureUnit: '&sensor.dark_sky_daytime_high_temperature_1d.attributes.unit_of_measurement',
                            temperature: '&sensor.dark_sky_daytime_high_temperature_1d.state',
                            temperatureUnit: '&sensor.dark_sky_daytime_high_temperature_1d.attributes.unit_of_measurement',
                            windSpeed: '&sensor.dark_sky_wind_speed_1d.state',
                            windSpeedUnit: '&sensor.dark_sky_wind_speed_1d.attributes.unit_of_measurement',
                            humidity: '&sensor.dark_sky_humidity_1d.state',
                            humidityUnit: '&sensor.dark_sky_humidity_1d.attributes.unit_of_measurement'
                     }
                  },
                  {
                     position: [2, 0],
                     height: 1,
                     classes: ['-compact'], // enable this if you want a little square tile (1x1)
                     type: TYPES.WEATHER,
                     id: 'weather.xxx',
                     state: false,
                     title: 'Dopodomani',
                     icon: '&sensor.dark_sky_icon_2d.state',
                     icons: {
                            'clear-day': 'clear',
                            'clear-night': 'nt-clear',
                            'partly-cloudy-day': 'partlycloudy',
                            'partly-cloudy-night': 'nt-partlycloudy',
                            'cloudy': 'cloudy',
                            'rain': 'rain',
                            'sleet': 'sleet',
                            'snow': 'snow',
                            'wind': 'wind',
                            'fog': 'fog',
                            'hail': 'sleet',
                            'lightning': 'chancetstorms',
                            'thunderstorm': 'tstorms'
                     },
                     fields: { // most of that fields are optional
                           //  lowTemperature: '&sensor.dark_sky_overnight_low_temperature_2d.state',
                           //  lowTemperatureUnit: '&sensor.dark_sky_overnight_low_temperature_2d.attributes.unit_of_measurement',
                           //  highTemperature: '&sensor.dark_sky_daytime_high_temperature_2d.state',
                           //  highTemperatureUnit: '&sensor.dark_sky_daytime_high_temperature_2d.attributes.unit_of_measurement',
                            temperature: '&sensor.dark_sky_daytime_high_temperature_2d.state',
                            temperatureUnit: '&sensor.dark_sky_daytime_high_temperature_2d.attributes.unit_of_measurement',
                            windSpeed: '&sensor.dark_sky_wind_speed_2d.state',
                            windSpeedUnit: '&sensor.dark_sky_wind_speed_2d.attributes.unit_of_measurement',
                            humidity: '&sensor.dark_sky_humidity_2d.state',
                            humidityUnit: '&sensor.dark_sky_humidity_2d.attributes.unit_of_measurement'
                     }
                  }
               ]
            },

            {
               title: '',
               width: 3,
               height: 2,
               items: [
                  {
                     position: [0, 0],
                     width: 2,
                     height: 1,
                     title: 'Consumo istantaneo',
                     subtitle: '',
                     type: TYPES.GAUGE,
                     id: 'sensor.power_now', // Assign the sensor you want to display on the gauge
                     value: function(item, entity) {
                        return entity.state / 1000;
                     },
                     state: false,
                     settings: {
                        size: 170, // Defaults to 50% of either height or width, whichever is smaller
                        type: 'semi',
                        min: 0, // Defaults to 0
                        max: 6, // Defaults to 100
                        cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
                        thick: 10, // Defaults to 6
                        append: ' kW', // Defaults to undefined
                        thresholds: { 0: { color: 'green'}, 4: { color: 'orange' }, 4.5: { color: 'red' } }, // Defaults to undefined
                        fractionSize: 2 // Number of decimal places to round the number to. Defaults to current locale formatting
                     }
                  },
                  {
                     position: [0, 1],
                     title: 'Appartamento',
                     subtitle: 'Umidità: &sensor.0x00eeeee_humidity.state%',
                     type: TYPES.SENSOR,
                     id: 'sensor.0x00eeeee_temperature',
                     unit: '°C',
                     state: false,
                     filter: function(value) {
                         var num = parseFloat(value);
                         return num && !isNaN(num) ? num.toFixed(1) : value;
                     }
                  },
                  {
                     position: [1, 1],
                     title: 'Scantinato',
                     subtitle: 'Umidità: &sensor.0x00ddddd_humidity.state%',
                     type: TYPES.SENSOR,
                     id: 'sensor.0x00ddddd_temperature',
                     unit: '°C',
                     state: false,
                     filter: function(value) {
                         var num = parseFloat(value);
                         return num && !isNaN(num) ? num.toFixed(1) : value;
                     }
                  }
               ]
            }
         ]
      },
      {
         title: 'Alarm',
         bg: 'images/bg3.jpg',
         icon: 'mdi-bell-outline',
         groups: [
            {
               title: 'Sensori di movimento',
               width: 2.1,
               height: 1.4,
               items: [
                  {
                     position: [1.4, 0.7],
                     title: 'Laboratorio',
                     width: 0.7,
                     height: 0.7,
                     type: TYPES.SENSOR_ICON,
                     id: 'binary_sensor.0x00ccccc_occupancy',
                     states: false,
                     icons: {
                        on: 'mdi-motion-sensor',
                        off: 'mdi-motion-sensor'
                     },
                     customStyles: function(item, entity) {
                        return { 'backgroundColor': entity.state == 'on' ? 'red' : 'transparent' }
                     }
                  }
               ]
            },
            {
               title: 'Sensori porte',
               width: 2.1,
               height: 0.7,
               items: [
                  {
                     position: [0.7, 0],
                     title: 'Principale',
                     type: TYPES.SENSOR_ICON,
                     width: 0.7,
                     height: 0.7,
                     id: 'binary_sensor.0x00bbbbb_contact',
                     states: {
                        on: 'Aperta',
                        off: 'Chiusa'
                     },
                     icons: {
                        on: 'mdi-door-open',
                        off: 'mdi-door-closed'
                     },
                     customStyles: function(item, entity) {
                        return { 'backgroundColor': entity.state == 'on' ? 'rgba(255,0,0,1) !important' : 'transparent' }
                     }
                  },
                  {
                     position: [1.4, 0],
                     title: 'Posteriore',
                     width: 0.7,
                     height: 0.7,
                     type: TYPES.SENSOR_ICON,
                     id: 'binary_sensor.0x00aaaaa_contact',
                     states: {
                        on: 'Aperta',
                        off: 'Chiusa'
                     },
                     icons: {
                        on: 'mdi-door-open',
                        off: 'mdi-door-closed'
                     },
                     customStyles: function(item, entity) {
                        return { 'backgroundColor': entity.state == 'on' ? 'rgba(255,0,0,1) !important' : 'transparent' }
                     }
                  }
               ]
            },
         ]
      },
      {
         title: 'Luci',
         bg: 'images/bg3.jpg',
         icon: 'mdi-lightbulb-outline',
         groups: [
            {
               title: 'Esterno',
               width: 3,
               height: 1,
               items: [
                  {
                     position: [0, 0],
                     height: 1,
                     type: TYPES.SWITCH,
                     id: 'light.a_light',
                     title: 'Patio',
                     states: {
                         on: 'Accesa',
                         off: 'Spenta'
                     },
                     icons: {
                         on: 'mdi-lightbulb-on',
                         off: 'mdi-lightbulb-off'
                     }
                  },
                  {
                     position: [1, 0],
                     height: 1,
                     type: TYPES.SWITCH,
                     id: 'light.b_light',
                     title: 'Giardino',
                     states: {
                         on: 'Accesa',
                         off: 'Spenta'
                     },
                     icons: {
                         on: 'mdi-lightbulb-on',
                         off: 'mdi-lightbulb-off'
                     }
                  },
                  {
                     position: [2, 0],
                     height: 1,
                     type: TYPES.SWITCH,
                     id: 'light.c_light',
                     title: 'Garage',
                     states: {
                         on: 'Accesa',
                         off: 'Spenta'
                     },
                     icons: {
                         on: 'mdi-lightbulb-on',
                         off: 'mdi-lightbulb-off'
                     }
                  }
               ]
            },

            {
               title: 'Scantinato',
               width: 3,
               height: 1,
               items: [
                  {
                     position: [0, 0],
                     height: 1,
                     type: TYPES.SWITCH,
                     id: 'light.d_light',
                     title: 'Cantina',
                     states: {
                         on: 'Accesa',
                         off: 'Spenta'
                     },
                     icons: {
                         on: 'mdi-lightbulb-on',
                         off: 'mdi-lightbulb-off'
                     }
                  },
                  {
                     position: [1, 0],
                     height: 1,
                     type: TYPES.SWITCH,
                     id: 'light.e_light',
                     title: 'Laboratorio',
                     states: {
                         on: 'Accesa',
                         off: 'Spenta'
                     },
                     icons: {
                         on: 'mdi-lightbulb-on',
                         off: 'mdi-lightbulb-off'
                     }
                  }
               ]
            }
         ]
      },
      {
         title: 'Camera',
         bg: 'images/bg3.jpg',
         icon: 'mdi-cctv',
         tileSize: 140,
         groups: [
            {
               title: '',
               width: 2.6,
               height: 3,
               items: [
                  {
                     position: [0, 0],
                     width: 1.3,
                     state: false, // disable state element
                     type: TYPES.CAMERA_THUMBNAIL,
                     id: 'camera.cam1',
                     title: '',
                     bgSize: 'cover',
                     fulscreen: {
                         type: TYPES.CAMERA,
                         refresh: 1500,
                         bgSize: 'contain'
                     },
                     refresh: function() {
                         return 3000 + Math.random() * 1000;
                     }
                  },
                  {
                     position: [1.3, 0],
                     width: 1.3,
                     state: false, // disable state element
                     type: TYPES.CAMERA_THUMBNAIL,
                     id: 'camera.cam2',
                     title: '',
                     bgSize: 'cover',
                     fulscreen: {
                         type: TYPES.CAMERA,
                         refresh: 1500,
                         bgSize: 'contain'
                     },
                     refresh: function() {
                         return 3000 + Math.random() * 1000;
                     }
                  },
                  {
                     position: [0, 1],
                     width: 1.3,
                     state: false, // disable state element
                     type: TYPES.CAMERA_THUMBNAIL,
                     id: 'camera.cam3',
                     title: '',
                     bgSize: 'cover',
                     fulscreen: {
                         type: TYPES.CAMERA,
                         refresh: 1500,
                         bgSize: 'contain'
                     },
                     refresh: function() {
                         return 3000 + Math.random() * 1000;
                     }
                  },
                  {
                     position: [1.3, 1],
                     width: 1.3,
                     state: false, // disable state element
                     type: TYPES.CAMERA_THUMBNAIL,
                     id: 'camera.cam4',
                     title: '',
                     bgSize: 'cover',
                     fulscreen: {
                         type: TYPES.CAMERA,
                         refresh: 1500,
                         bgSize: 'contain'
                     },
                     refresh: function() {
                         return 3000 + Math.random() * 1000;
                     }
                  },
                  {
                     position: [0, 2],
                     width: 1.3,
                     state: false, // disable state element
                     type: TYPES.CAMERA_THUMBNAIL,
                     id: 'camera.cam5',
                     title: '',
                     bgSize: 'cover',
                     fulscreen: {
                         type: TYPES.CAMERA,
                         refresh: 1500,
                         bgSize: 'contain'
                     },
                     refresh: function() {
                         return 3000 + Math.random() * 1000;
                     }
                  }
               ]
            }
         ]
      },
      {
         title: 'Batterie',
         bg: 'images/bg3.jpg',
         icon: 'mdi-battery-70',
         groups: [
            {
               title: '',
               width: 3,
               height: 4,
               items: [
                  {
                     position: [0, 1],
                     width: 3,
                     height: 4,
                     title: 'Batterie dei sensori',
                     id: {},
                     type: TYPES.TEXT_LIST,
                     state: false,
                     list: [
                        {
                            title: 'Termometro (sala da pranzo)',
                            value: '&sensor.0x00aaaaa_battery.state',
                            unit: '%',
                            icon: function(value) {
                              var battery_round = parseInt(parseInt(value) / 10) * 10;

                              if (battery_round >= 100) return 'mdi-battery';
                              else if (battery_round >= 20) return 'mdi-battery-' + battery_round;
                              else return 'mdi-battery-alert';
                            }
                        },
                        {
                            title: 'Termometro (cantina)',
                            value: '&sensor.0x00bbbbb_battery.state',
                            unit: '%',
                            icon: function() {
                              var battery_level = this.states[item].state || 0;
                              var battery_round = parseInt(battery_level / 10) * 10;

                              if (battery_round >= 100) return 'mdi-battery';
                              else if (battery_round >= 20) return 'mdi-battery-' + battery_round;
                              else return 'mdi-battery-alert';
                            }
                        }
                     ]
                  }
               ]
            }
         ]
      }

      // {
      //    title: 'OctoPrint',
      //    bg: 'images/bg3.jpg',
      //    icon: 'mdi-printer-3d',
      //    groupMarginCss: '150px 40px',
      //    groups: [
      //       {
      //          title: '',
      //          width: 3,
      //          height: 3,
      //          items: [
      //             {
      //                position: [0, 0],
      //                width: 3,
      //                height: 2
      //                state: false, // disable state element
      //                type: TYPES.CAMERA,
      //                id: 'camera.elan_1_camera',
      //                title: 'Camera',
      //                bgSize: 'contain',
      //                refresh: 1500
      //             },
      //             {
      //                position: [0, 0],
      //                type: TYPES.SWITCH,
      //                id: 'switch.sonoff_lab01',
      //                title: 'Alimentazione',
      //                state: {
      //                    on: 'Accesa',
      //                    off: 'Spenta'
      //                },
      //                icons: {
      //                    on: 'mdi-power-plug',
      //                    off: 'mdi-power-plug-off'
      //                }
      //             },
      //             {
      //                position: [1, 0],
      //                type: TYPES.SWITCH,
      //                id: 'switch.3dprinter_lights',
      //                title: 'Luci',
      //                state: {
      //                    on: 'Accesa',
      //                    off: 'Spenta'
      //                },
      //                icons: {
      //                    on: 'mdi-lightbulb-on',
      //                    off: 'mdi-lightbulb-off'
      //                }
      //             },
      //             {
      //                position: [2, 1],
      //                type: TYPES.SWITCH,
      //                id: 'switch.octoprint_cancel',
      //                title: 'Interrompi',
      //                state: false,
      //                icon: 'mdi-close-circle'
      //             }
      //          ]
      //       },
      //       {
      //          title: '',
      //          width: 3,
      //          height: 2,
      //          items: [
      //             {
      //                position: [0, 0],
      //                width: 2,
      //                height: 1,
      //                title: '',
      //                subtitle: '',
      //                type: TYPES.GAUGE,
      //                id: 'sensor.octoprint_job_percentage', // Assign the sensor you want to display on the gauge
      //                value: function(item, entity) {
      //                   return entity.state / 100;
      //                },
      //                settings: {
      //                   size: 200, // Defaults to 50% of either height or width, whichever is smaller
      //                   cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
      //                   append: '%', // Defaults to undefined
      //                   fractionSize: 0 // Number of decimal places to round the number to. Defaults to current locale formatting
      //                }
      //             },
      //             {
      //                position: [0, 1],
      //                width: 3,
      //                height: 1,
      //                title: '',
      //                id: {},
      //                type: TYPES.TEXT_LIST,
      //                state: false,
      //                list: [
      //                   {
      //                       title: 'Stato',
      //                       icon: 'mdi-printer-3d',
      //                       value: '&sensor.octoprint_current_state'
      //                   },
      //                   {
      //                       title: 'Errori',
      //                       icon: 'mdi-alert-circle-outline',
      //                       value: function() {
      //                         if ('&binary_sensor.octoprint_printing_error' === 'on'){
      //                           return 'S�';
      //                         } else {
      //                           return 'No';
      //                         }
      //                       }
      //                   },
      //                   {
      //                       title: 'Tempo trascorso',
      //                       icon: 'mdi-clock-start',
      //                       value: '&sensor.octoprint_time_elapsed_format'
      //                   },
      //                   {
      //                       title: 'Tempo rimanente',
      //                       icon: 'mdi-clock-end',
      //                       value: '&sensor.octoprint_time_remaining_format'
      //                   }
      //                ]
      //             }
      //          ]
      //       }
      //    ]
      // }
   ]
}

1 Like

Try this (default is 70px):

.-groups-align-vertically .page .group {
  margin-left: 15px;
}

This code is invalid:

var battery_level = this.states[item].state || 0;

There is no item variable defined (and you get error in browser console about that).
Hardcode the entity id there instead, for example:

var battery_level = this.states['sensor.device_battery_level'].state || 0;

It seems like a bug caused by hideScrollbar option. Someone should fix it but for now, do you really need it? Most browsers hide the scrollbar anyway.

It depends on this setting:

groupsAlign: GROUP_ALIGNS.VERTICALLY

If you change it to HORIZONTALLY then they will align to middle but then the layout will work differently.

Is it possible to use tileboard to set LED light effects?

I’m my light has 4 different effects and I’m trying to use a slider to choose between them, here’s what I have so far:

ALL_TILES.LED_LIGHT_EFFECT = {
  id: 'light.led_light',
  type: TYPES.SLIDER,
  title: '@attributes.friendly_name Effect',
  state: '@attributes.effect',
  classes: ["-input-number-slider"],
  sliders: {
    max: 4,
    min: 0,
    step: 1,
    request: {
      type: "call_service",
      domain: "light",
      service: "turn_on",
      field: "effect"
    }
  }
};

Unfortunately it does not seem to call the service correctly, when I drag the slider it does nothing.

Has anyone managed to do this?

Thank you very much. Almost all things work fine now!
Only the change of tile background color doesn’t work with the transparent theme.