TileBoard - New dashboard for Homeassistant

Ok thank you,but the popup on the tileboard that show me the camera not working,did i made any mistake?

You know, not seeing the code but knowing that it doesn’t work it is safe to assume that you have indeed made a mistake :slight_smile:

hahahah yeah you’re right sorry here is the code that i have inserted at the TOP of the config (hope it helps):

var DOORENTRY_TILE = {
      position: [4, 2],
      type: TYPES.DOOR_ENTRY,
      id: {},
      icon: 'mdi-phone',
      title: 'Door entry',
      state: false,
      layout: {
            type: TYPES.CAMERA_THUMBNAIL,
            id: 'camera.camera_name',
            refresh: 1500,
            bgSize: 'cover'
         },
         page: {},
         tiles: [
             // Define your tiles (door-entry buttons) here if required
        ]
      };

this is under event:

   // next fields are optional
   events: [
   {
   command: 'notify',
   action: function(e) {
      Noty.addObject(e);
}
},
{
    command: 'open_doorentry',
    action: function(eventData) {
    this.$scope.openDoorEntry(DOORENTRY_TILE, DOORENTRY_TILE.id);
         }
 },
   ],

then i fire up the event on HA wit tileboard command: open_doorentry

Love that.

Please show me how you are firing the event.

in hassio :

hassio

When you send notify command, does it work?

What should we use instead of CAMERA_THUMBNAIL

CAMERA or CAMERA_STREAM

Yes notify command works, after a restart from my Computer now i don’t see tileboard on the Eventlist on Hassio, but notify works well.
i think i made mistake with the variable : var DOORENTRY_TILE =
i have inserted it at the top of the config because i have received errors if i place it after, i’m not sure if the variable are now listening in this mode.

for better understanding here my config:

/*
 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 DOORENTRY_TILE = {
      position: [4, 2],
      type: TYPES.DOOR_ENTRY,
      id: {},
      icon: 'mdi-phone',
      title: 'Door entry',
      state: false,
      layout: {
            type: TYPES.CAMERA_THUMBNAIL,
            id: 'camera.camera_name',
            refresh: 1500,
            bgSize: 'cover'
         },
         page: {},
         tiles: [
             // Define your tiles (door-entry buttons) here if required
        ]
      };

var CONFIG = {
   customTheme: null, // 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: 160,
   tileMargin: 6,
   serverUrl: 'http://192.168.160.80:8123',
   wsUrl: 'ws://192.168.160.80: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: [
   {
   command: 'notify',
   action: function(e) {
      Noty.addObject(e);
}
},
{
    command: 'open_doorentry',
    action: function(eventData) {
    this.$scope.openDoorEntry(DOORENTRY_TILE, DOORENTRY_TILE.id);
         }
 },
   ],
   timeFormat: 24,
   menuPosition: MENU_POSITIONS.BOTTOM, // or BOTTOM
   hideScrollbar: false, // horizontal scrollbar
   groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
   onReady: function () {},

   header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
      styles: {
         padding: '20px 30px 0',
         fontSize: '20px'
      },
      right: [
	  //{
         //type: HEADER_ITEMS.CUSTOM_HTML,
         //html: '<b>LUCHOME CONTROL</b>',
         //styles: {
           // margin: '40px 40px 0px'
         //}
      //},
      {
         type: HEADER_ITEMS.WEATHER,
        // styles: {
           // margin: '0 0 0'
       //  },
         icon: '&sensor.dark_sky_icon.state',
         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'
         },
         fields: {
            summary: '&sensor.dark_sky_summary.state',
            temperature: '&sensor.dark_sky_temperature.state',
            temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
         }
      },
	  ],
      left: [
         {
            type: HEADER_ITEMS.DATETIME,
            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: 'HOME CONTROL',
         bg: 'images/bg6.jpg',
         icon: 'mdi-home-outline', // home icon
         groups: [
            {
               title: 'Aktuelles Wetter',
               width: 3,
               height: 2,
               items: [
                  {
                     position: [0, 0],
                     height: 2,
                     type: TYPES.WEATHER,
                     id: {}, // using empty object for an unknown id
					 icon: '&sensor.dark_sky_icon.state',
					 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'
                            },
							fields: {
                        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',
                     //state: false, // disable state element
                     list: [
                        // custom line
         'Gefühlt wie '
            + '&sensor.dark_sky_apparent_temperature.state'
            + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',

         // another custom line
         'Luftdruck '
            + '&sensor.dark_sky_pressure.state'
            + '&sensor.dark_sky_pressure.attributes.unit_of_measurement',

         // yet another custom line
         '&sensor.dark_sky_precip_probability.state'
            + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
            + ' Regen'
                    ]
                }
            },

{
                      position: [0, 2],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      title: 'Eingangstüre',
                      id: 'sensor.doorsensor_main',
                      states: 
					  {
                      Offen: "Offen",
                      Geschlossen: "Geschlossen"
						},
                      customStyles:
							function(item, entity) {
                         if (entity.state === 'Offen') {
                             return { 'background-image': 'url("images/icon/door-open-modify.png")'
                             };
                              }else if (entity.state === 'Geschlossen') {
                             return { 'background-image': 'url("images/icon/door-closed-modify.png")'
                             };
                              }
                    }
                },
                    {
                      position: [1, 2],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      id: 'sensor.doorsensor_living',
                      title: 'Wohnzimmertüre',
                      states: {
                      Offen: "Offen",
                      Geschlossen: "Geschlossen",
                      },
                      customStyles:
                      
                      function(item, entity) {
                         if (entity.state === 'Offen') {
                             return { 'background-image': 'url("images/icon/door-open-modify.png")',
                             };
                              }else if (entity.state === 'Geschlossen') {
                             return { 'background-image': 'url("images/icon/door-closed-modify.png")'
                             };
                              }
                    }
                },

                {
                     position: [2, 2],
                     theme: ITEM_TRANSPARENT,
                     width: 1,
                     type: TYPES.SWITCH,
                     id: "group.light",
                     title: 'AUS / EIN',
					 subtitle: 'ALLE LICHTER',
					 states: {
					 on: "AN",
					 off: "AUS"
                  },
				  icons: {
					on: "mdi-lightbulb-on",
					off: "mdi-lightbulb",
					}
				},
            { 
                position: [1, 0],
                theme: ITEM_TRANSPARENT,
                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'
                },
                customStyles: {'fontSize': '16px'},
                hideHeader: false,
                primaryTitle: 'Vorhersage',
                secondaryTitle: 'Regen',
                list: [0,1,2,3,4,5,6,7].map(function (id) {
                var weekday = [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ];
                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 precip_probability = "&sensor.dark_sky_precip_probability_" + id + "d" + ".state" + ' %' ;

                return {
                date: function () {
                    if ( id === 0 ) {
                    return "Heute";
                    }
                    else if ( id === 1 ) {
                    return "Morgen";
                    }
                    var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                    return weekday[d.getDay()];
                },
                icon: "&sensor.dark_sky_icon_" + id + "d" + ".state",
                //iconImage: null, replace icon with image
                primary: forecast,
                secondary: precip_probability
                };
            })
        }

        ]
      },

               {
               title: 'Fensterstatus',
               width: 3,
               height: 2,
               items: [
                   {
                      position: [0, 1],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Küche',
                      state: false,
                      id: 'binary_sensor.window_kitchen',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")'
                             
                             };
}
}
},
{
                      position: [0.5, 1],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Küche',
                      state: false,
                      id: 'binary_sensor.window_kitchen_right',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                
                {
                      position: [1, 1],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'WC',
                      state: false,
                      id: 'binary_sensor.window_toilette',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                {
                      position: [1.5, 1],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'WC',
                      state: false,
                      id: 'binary_sensor.window_small_toilette',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                {
                      position: [0, 1.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Eltern',
                      state: false,
                      id: 'binary_sensor.parents',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                                {
                      position: [0.5, 1.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Elia',
                      state: false,
                      id: 'binary_sensor.window_elia',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                 {
                      position: [1, 1.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Ariana',
                      state: false,
                      id: 'binary_sensor.window_ariana',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                {
                      position: [0, 2.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Wohnen',
                      state: false,
                      id: 'binary_sensor.window_livingroom',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
                },
                {
                      position: [0.5, 2.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Wohnen',
                      state: false,
                      id: 'binary_sensor.window_big_livingroom_left',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
},
                {
                      position: [1, 2.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Wohnen',
                      state: false,
                      id: 'binary_sensor.window_big_livingroom_right',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
},
                {
                      position: [1.5, 2.5],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Wohnen',
                      state: false,
                      id: 'binary_sensor.window_small_livingroom',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
},
                {
                      position: [0, 2],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Treppe',
                      state: false,
                      id: 'binary_sensor.window_gang',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
},
                {
                      position: [0.5, 2],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Waschen',
                      state: false,
                      id: 'binary_sensor.window_washroom',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '12px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             
                             };
}
}
},
                {
                      position: [1, 2],
                      theme: ITEM_TRANSPARENT,
                      type: TYPES.SENSOR_ICON,
                      width: 0.5,
                      height: 0.5,
                      title: 'Büro',
                      classes: ['-customcenter'],
                      state: false,
                      id: 'binary_sensor.window_office',
                      customStyles:
                      function(item, entity) {
                         if (entity.state === 'off') {
                             return { 'background-image': 'url("images/icon/window-closed-modify.png")', 'fontSize': '11px',
                             };
                              }else if (entity.state === 'on') {
                             return { 'background-image': 'url("images/icon/window-open-modify.png")', 'fontSize': '12px'
                             };
                              }
                      }
},
{
   position: [2.2, 0],
   theme: ITEM_TRANSPARENT,
   width: 2,
   height: 2,
   type: TYPES.IMAGE,
   state: false,
   title: false,
   id: 'media_player.sonos_kitchen',
   bgSuffix: '@attributes.entity_picture'
},
                     {
   position: [2.2, 1],
   theme: ITEM_TRANSPARENT,
   width: 2,
   height: 1,
   bgOpacity: 2,
   id: 'media_player.sonos_kitchen',
   type: TYPES.MEDIA_PLAYER,
   hideSource: false,
   hideMuteButton: false,
   state: false,
   source_list: true,
   //state: '@attributes.media_title',
   subtitle: '@attributes.media_title',
   //bgSuffix: '@attributes.entity_picture',
},
]
}
]

},

      {
         title: 'Second page',
         bg: 'images/bg2.png',
         icon: 'mdi-numeric-2-box-outline',
         groups: [
            {
               title: '',
               width: 2,
               height: 3,
               items: [
                   {
   position: [3, 0],
   id: 'camera.camera_name',
   type: TYPES.CAMERA_THUMBNAIL,
   bgSize: 'cover',
   width: 2,
   state: false,
   fullscreen: {
      type: TYPES.CAMERA_STREAM,
      objFit: 'contain',
      id: 'camera.camera_name',  // Optional: camera entity to use on fullscreen, defaults to the tile camera entity if omitted
      bufferLength: 5  // Optional: buffer length in seconds for the HLS buffer, default is 5 seconds
   },
},
                  {
                     position: [0, 0],
                     width: 2,
                     title: 'Short instruction',
                     type: TYPES.TEXT_LIST,
                     id: {}, // using empty object for an unknown id
                     state: false, // disable state element
                     list: [
                        {
                           title: 'Read',
                           icon: 'mdi-numeric-1-box-outline',
                           value: 'README.md'
                        },
                        {
                           title: 'Ask on forum',
                           icon: 'mdi-numeric-2-box-outline',
                           value: 'home-assistant.io'
                        },
                        {
                           title: 'Open an issue',
                           icon: 'mdi-numeric-3-box-outline',
                           value: 'github.com'
                        }
                     ]
                  },


                  {
                     position: [0, 1.5],
                     width: 1.5,
                     height: 1,
                     title: 'My Gauge Title',
                     subtitle: '',
                     type: TYPES.GAUGE,
                     id: 'sensor.my_sample_sensor', // Assign the sensor you want to display on the gauge
                     value: function(item, entity) {
                        return entity.state;
                     },
                     settings: {
                        size: 200, // Defaults to 50% of either height or width, whichever is smaller
                        type: 'full', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
                        min: 0, // Defaults to 0
                        max: 25000, // Defaults to 100
                        cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
                        thick: 8, // Defaults to 6
                        label: 'My Gauge', // Defaults to undefined
                        append: '@attributes.unit_of_measurement', // Defaults to undefined
                        prepend: '$', // Defaults to undefined
                        duration: 1500, // Defaults to 1500ms
                        thresholds: { 0: { color: 'green'}, 80: { color: 'red' } }, // Defaults to undefined
                        labelOnly: false, // Defaults to false
                        foregroundColor: 'rgba(0, 150, 136, 1)', // Defaults to rgba(0, 150, 136, 1)
                        backgroundColor: 'rgba(0, 0, 0, 0.1)', // Defaults to rgba(0, 0, 0, 0.1)
                        fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
                     },
                  },
               ]
            },
         ]
      }
   ],
};


1 Like

id: ‘camera.camera_name’, ? Supposed this is not the actual id of your camera? Try including the tile on one of the pages:

items: [
  DOORENTRY_TILE,
  {
    position: [0, 0],
    height: 2,
   type: TYPES.WEATHER,   
  }
]

See if you are able to click it and in opens fine.

hi.

Yes id camera.camera_name is correct because it’s only test at the moment, i don’t have received my cameras yet. i have inserted the tile on one of the page and i see now the tile with the Phone icon, on click it make nothing?? did i can see a log what it’s try and dosen’t work?

Thanks @resoai

So TYPE.CAMERA worked, but TYPE.CAMERA_STREAM did not. And now I might as well fix my click on the camera, which calls TYPE.CAMERA_STREAM and indeed does not work. Any ideas? It is an LTS (hikvision) camera.

// GARAGE CAM \\
                {
                    position: [2, 2],
                    id: 'camera.garagecam',
                    title: '',
                    type: TYPES.CAMERA,
                    bgSize: 'cover',
                    width: 4,
                    height: 2,
                    state: false,
                    filter: function(url) {return "https://10.191.30.52:8765/picture/1/current/"},
                    fullscreen: {
                        type: TYPES.CAMERA_STREAM,
                        // bgSize: 'contain',
                    // refresh: 1500,
                    // filter: function(url) {return "http://10.191.30.52:8081"},
                    },
                    refresh: function () { // can also be a function
                    return 3000 + Math.random() * 1000;
                  }
                 },
               ]
            }]
      },

Hi All,

does anyone know of a tile that can loop through an array on a timer?
Or how easy it is to create one?
The reason i ask is that i am using a feed parser that gives me the following:

Entity:
sensor.bbc_news
State:
72 (but changes on qty of news items)
attributes:
entries:

that’s the top three.

i was just interested to see if anyone had down this - i thought of a ticker style scroller or marques tile - or a tile that changes at a set interval…

Thanks for any pointers.

Jason

The CAMERA_STREAM works with Real Time Streaming Protocol (rtsp). I had to change my Wyze cam to a rstp firmware in order to get it working. I saw somewhere, someone is using VLC to create an rstp stream with a local file. ffmpeg may also be an option.

My HA for rstp stream:

- platform: ffmpeg
  name: Cam1
  input: -rtsp_transport tcp -i rtsp://IP_ADDRESS/live
1 Like

Create a input_number in HA and a automation to increase the number on delay triggered based on time.
Using input_number entity in TB as an index to get the element in your array/object.

I have similar automation for my sprinkler system except each of my delays are using input_number.

Thanks @Van, i’ll start to have a look at it.

Cheers
Jason

Hi all - first awesome project, and i completely get why people are so active on this.

Been going through setup for this last couple of days, and thought i was starting to get to grips with it all - but spent the last few hours bashing my head against the wall trying to get the header_items.weather object to appear on the right hand side of the header . . . but nothing.

Turns out, DarkSky was purchased by Apple, and no new public api access - is there a new method for this, apologies if this has been covered previously, i did search and didnt find anything ?

Hello

I’m accessing my HA via duckdns, but tested it having problems accessing Tilebord, what appears to me is only the background screen and the screensaver also appears. I can access the files from the tileboard directories as well. But I don’t know what the screens are not showing. Can someone help me with this please?