TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
615

The comma was definitely missing. Please try to replace thew whole header block with the following:

header: {
            styles: {
               padding: '30px 145px 0',
               fontSize: '28px'
            },
            left: [
               {
                  type: HEADER_ITEMS.DATETIME,
                  dateFormat: 'EEEE, LLLL dd',
                  styles: {
                     margin: '0'
                  }
               }
            ],
            right: [
               {
                  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',
                  }
               }
            ]
         },
1 Like
616

omg I cant thank you enough. that works perfect, thank you for your help and patience! I will go over this and read some more on js to help me understand this better. thank you again sir, very much!

617

You are welcome! I know JavaScript can be very confusing but it is not that difficult once you understand basic syntax. Having access to raw JS is what makes TileBoard very hackable.

618

yea thats awesome, scrolling this thread youve really opened my eyes on this. When building the tiles, once I started making one small change to see how it reacted i moved through it easily. Lots of potential here man, really appreciate you taking so much of your own time to share and help!

1 Like
619

I’m having issues displaying a climate tile using the following:

{
   title: 'Climate',
   position: [0, 0],
   width: 2,
   height: 2,
   id: 'climate.thermostat',
   type: TYPES.CLIMATE,
   unit: 'C',
   state: function (item, entity) {
  return 'Current '
 + entity.attributes.current_temperature
 + entity.attributes.unit_of_measurement;
   }
}

I have the correct ID thats working in HA front end but nothing shows in TileBoard.

Any ideas @resoai?

620

Here is mine that is working if it helps:

              {
                 position: [0, 1],
                 id: "climate.ecobee",
                 type: TYPES.CLIMATE,
                 unit: 'F',
                 state: function (item, entity) {
                    return 'Current '
                       + entity.attributes.current_temperature
                       + entity.attributes.unit_of_measurement;
                 }
              },
621

Thanks for that but its still not pulling though, I’ve changed climate.ecobee to climate.themostat for my Netatmo thermostat and its still not working.

622

Sorry buddy, Im not sure besides the basic questions…

Do your other tiles work?
Does climate.thermostat exist and work in your entity list?

Anyone know if its possible to have the background image change to the media art? Instead of only changing the media player tile, have the image be the bacground of the tileboard

623

Any errors in your browser’s console? (F12)

1 Like
624

Yes all other tiles work so far, it works ok in HA front end and iOS app etc.

I’ll check for any errors in console.

625

As my config.js grows it’s becoming harder to find the correct sections to edit. Is it possible to use includes to split up the file into manageable chunks?

626

Is the position 0,0 within that group empty? Does your thermostat expose both attributes you use to show state i.e. current temperature and units? What does browser console say?

627

You most certainly can since you have access to raw javascript. This is entirely up to the user how they wish to define config. This is why you do need to know at least the basic syntax and how to debug JavaScript.

The easiest for you would be to define each tile as a variable which you can than use when defining group items.

628

A fellow aussie using the BOM Radar. Can i ask, is your radar animated like that on the BOM website or are you using the static image with a refresh rate like i am??

629

Yes its empty, not showing anything. Looking at HA I’m seeing the following attributes which tally up with the tile:

climate.thermostat
current_temperature: 23.8
min_temp: 7
max_temp: 35
temperature: 0
operation_mode: idle
away_mode: off
unit_of_measurement: °C
friendly_name: Thermostat
supported_features: 1153

I’m not seeing any errors specific to climate but I am seeing the following:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (custom.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (angular.min.js.map, line 0)

Connected?

630

Certainly not. By the way, why is your climate tile width and height set to 2?

631

Just to take up the required space. changing these to 1,1 makes no difference.

632

Most tiles are designed specifically for 1x1, you can increase tile size in config to make tiles bigger. As for the invisible tile:

What kind of text editor are you using? markup of the code you’ve posted is messed up although it should not make a difference. Try removing state: { .... } and see if the tile shows up?

633

Using CotEditor on a Mac. No issues previously when eding JS, CSS or HA YAML.

JSlint does give me a number of errors: lines longer that 80 characters and Use double quotes, not single quotes.

Removing state: { .... } doesn’t show anything.

634

Please post your complete config via pastebin.

1 Like