TileBoard - New dashboard for Homeassistant

  1. Maybe some extension hiding/removing the content? Try in a private window.
  2. Try with an addon to see if it works in the latest version and default configuration.

I had some custom css - I removed the custom css cleared my cache and things came back - not sure why it decided to break all of the sudden.

This used to work - now it doesn’t I removed everything except top:60% which is really all I needed
.pages-menu.-left {
width: 15px;
left: 0;
bottom: 0;
top: 60%;
}

Thanks for your replies and help!

Howdy! I just started trying to use Tileboard and I’m a huge fan. I have 4 questions, I do see sometimes they were answered, the best I can tell those answers don’t apply to me because I’m using the addon install or the answer was deprecated.

  1. I’m trying to split off a mobile config from a tablet config, but the instructions seem to be for when you install manually or with docker and not when you use the HACS install method. Could someone point me to addon instructions on separating out the configs?
  2. Using the camera tile, only tileboard seems to have this issue where it zooms in the camera which results in not getting my whole field of view. I’ve tried each of the cover, contain, fill settings but I can’t seem to get a handle on exactly what is doing it. When I make other dashboards, the camera shows the correct field of view as per my camera app. But can’t get tileboard to do this consistently. I am using the Ecobee Smart Cameras via the HomeKit controller integration (add camera to HomeKit, remove camera from HomeKit, add connection via HomeKit Controller), share back to HomeKit via HomeKit integration.
  3. Because of this setup, I don’t get HomeKit secure video. Also, I see no way to expose the pan, tilt, and zoom controls to HomeKit or Home Assistant. Only the ecobee app (and the ecobee integration seems to be thermostat only). Is there any way to either still get hksv and still be able add the cameras in a dashboard for Home Assistant? Best I can tell, it’s either one or the other (well, I can get it to show up in HomeKit with the HomeKit controller, but I lose out on some of the HomeKit features).
  4. Another thought regarding separate config for tablet bs phone is to use the second page for a smaller/ more narrow tile layout, but I can’t seem to find any way to automatically navigate straight to the second page. I don’t see a different url being used to navigate, like you can see with the various views in the traditional Lovelace dashboards. Is there any way to automatically navigate to the second page with a bookmark? By the way, using wallpanel for fire 8 tablet and an iPhone- those are the two different views I’m trying to create.

Hi, Resoai

How to make tileboard the default view on home assistant…?

1 Like

Hi, JoRoCoBo

can you share the config.js for the Mobile capabilities…?
i have tried but no success

Hi all,
Is it possible to use the SENSOR tile and show more then 2 sensors?
I use this tile now for showing the temp in a room.
Want to add the humidity of the same Aqara sensor.

Hi,

So I’ve made great progress on my tileboard adventures. But I have one tile that isn’t looking the way I want it to. It’s to report my iPhone and Watch battery + charge states that I get from the iCloud3 integration.

My goal is to not take 4 lines up in this text list and I have two thoughts on how to do it.

                {
                   position: [2, 4.5],
                   width: 1.5,
                   height: .75,
                   customStyles: {'fontSize': '18px'},
                   subtitle: 'Josh',
                   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: 'iPhone',
                         icon: 'mdi-tablet',
                         value: '&sensor.joshua_iphone_battery.state'
                      },
                      {
                         title: '',
                         icon: 'mdi-tablet',
                         value: '&sensor.joshua_iphone_battery_status.state'
                      },
                      {
                         title: 'Watch',
                         icon: 'mdi-watch',
                         value: '&sensor.joshua_watch_battery.state'
                      },
                      {
                         title: '',
                         icon: '',
                         value: '&sensor.joshua_watch_battery_status.state'
                      },
                   ]
                },   

I figure I can achieve this in one of two ways.
Either

  1. Have both the Battery % and the Charge State in one line, but I couldn’t figure out how to have both sensors show up on the same line. I couldn’t add two values, I could put one sensor then the other, etc.
  2. I could also just have the percentage and then have it show as green if charging and red if not charging (so a green 95% or a red 95% for not charging) but since it uses a different sensor (joshua_iphone_battery.state vs joshua_iphone_battery_status.state) I couldn’t work it out. Is there any way to do either of these two?

Thank you!

Ok, I figured out how to get two sensors on one line with

 value: '&sensor.joshua_iphone_battery.state' + '  ' +  '&sensor.joshua_iphone_battery_status.state'

but I’m stuck on the column width issue so it’s cutting everything off. it says like “50 Not…”

I found apop’s post

So, what you want to do depends on your other usage of the text_list tile. If you’re not going to use it in any other circumstances, you could just set the value with to 100% and the text will stretch to fit. However, you do have a couple other CSS properties to consider as well. If you only change the width, you’ll still get the ellipsis if the summary is wider than the width of the tile. To get around that, you could try changing overflow to visible and white-space to normal so that the text will wrap to the next line if it exceeds the width of the tile, but then you might run into issues with the height of the tile as well. So, you may have to experiment with it to get exactly what you want. Here are the various changes you’d make in custom.css:

.item-list--value {
  overflow: visible; /* will not cut off text */
  white-space: normal; /* will wrap text to the next line */
  width: 100%; /* will set text width to full width of the tile */
}

Your other option would be to create a custom css class for this tile if you want to use the normal text_list tile in other scenarios. In that case, add the following to the tile definition in config.js:

classes: ["-weather-summary"]

I went with weather-summary but you could call it whatever you want. In your custom.css, add the following:

.weather-summary .item-list--value {
  overflow: visible; /* will not cut off text */
  white-space: normal; /* will wrap text to the next line */
  width: 100%; /* will set text width to full width of the tile */
}

But I haven’t gotten it to work (same with the person he responded to).

I have not been able to get custom.css to work for me at all.
My first obstacle was the font, which kept reverting to 14px. Finally got customStyles: {‘fontSize’: ‘18px’},
to work for me, but I can’t kill the column width where the icon is. Pulled it up in inspector, too.

Screen Shot 2022-02-21 at 12.23.54 AM

Using the TEXT_LIST tile I cannot show 2 or more sensor values, like temp + humidity.
How can this be done?

{
				   position: [0, 2],
				   width: 2,
				   height: 1,
				   title: 'Climate slpk',
				   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: 'Temp',
						 icon: 'mdi-temperature-celsius',
						 id: '&sensor.aqara_temp_sensor_yasmine_humidity'
					  },
					  {
						 title: 'Humid',
						 icon: 'mdi-water-percent',
						 value: '&sensor.aqara_temp_sensor_yasmine_humidity'
					  },
					  
				   ]
				}

Hi @benalla ,

I don’t see a problem there. It should work.

Maybe you should swap the “id” at your “Temp” title. It says […]_humidity
I guess this is wrong.

You can show different values in your TEXT_LIST.

Have a look at my config:

image

{
position: [5, 3],
width: 1.5,
height: 1,
title: ‘AWR (in Tagen)’,
id: {},
type: TYPES.TEXT_LIST,
state: false,
list: [
{
title: ‘BIO’,
icon: ‘mdi-apple’,
value: ‘&sensor.bioabfall_countdown.state’,
},
{
title: ‘PAPIER’,
icon: ‘mdi-newspaper’,
value: ‘&sensor.papiertonne_countdown.state’,
},
{
title: ‘REST’,
icon: ‘mdi-sync’,
value: ‘&sensor.restabfall_countdown.state’,
},
]
},

Ove

This is the right sensor name.

Dear @resoai, is that any chance to make a switch to change the tileboard theme? I want to make two themes, one for day one for night… it will be awesome to make an automation where theme is changed by the sun position or overwride it from a switch. Please give me a hint how to achive this…

You might not know this but I’m a Ukrainian. I really must focus on other priorities now.

4 Likes

I am very sorry to hear that. I hope you and you family are in a safe place now. I’m from Braila, Romania, if you need a place to stay, i will try to find one for you. Be safe man.

1 Like

Thank you, I’m safe now but trying to help my family and friends at the moment. It is shocking what is happening.

1 Like

I and all of my friends and family stand with the Ukrainian people. Godspeed.

I’m trying to use the TileBoard AddOn to create UI for multiple devices with various screen size. I’ve learn that you can load a different config file by applying ?config= in the URL. But the problem is the params added to HA URL is not forwarded to the actual URL (iframe URL). Then I tried to expose the UI, following the suggestion in this post to set the port in Configuration - Network, but the UI is still not accessible due to an SSL error: ERR_SSL_VERSION_OR_CIPHER_MISMATCH. I’m not sure if this method actually work with SSL.

I also tried to use the URL from iframe and it everything works, but the URL seems to be a dynamic one and expires after a while.

Any ideas on how I can get this work? Is it possible to pass params (or other type of communications) from HA UI to the AddOn UI?

Found a workaround: get the screen size in config.js and conditionally create the CONFIG object:

if(window.innerHeight > 800) {
  var CONFIG = {...}
}
else {
  var CONFIG = {...}
}

To get the exact screen size of a device + browser, print it on screen using the config:

var CONFIG = {
  // the other fields
  header: {
    // the other fields
    left: [
      {
        type: HEADER_ITEMS.CUSTOM_HTML,
        html: "<b><i>" + window.innerHeight + "</b></i>",
      },
    ]
  }

2 Likes

I just migrated my tileboard setup to the addon and can run the ingress fine but am unable to access directly outside of the ingress. I use ssl and duckdns. I set my port in the tileboard config to 8223. I have been trying to connect by https://xxxxxxxx.duckdns.org:8223

This is what I get

This site can’t provide a secure connection

XXXXXXXX.duckdns.org uses an unsupported protocol.

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

ssl and external link are checked in config. Any thoughts?

Is it possible to set slider color within customStyles ?