TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
1952

document.documentElement.requestFullscreen();
var CONFIG = {
customTheme: CUSTOM_THEMES.HOMEKIT, // 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.SMALL, //SMALL, BIG are available
tileSize: 110,
tileMargin: 3,
serverUrl: “http://192.168.1.113:8123”,
wsUrl: “ws://192.168.1.113:8123/api/websocket”,
authToken: LONGLIVEDHERE, // optional: make an long live token and put it here
//googleApiKey: “XXXXXXXXXX”, // Required if you are using Google Maps for device tracker
debug: true, // Prints entities and state change info to the console.

// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY

header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
padding: ‘25px 100px 0’,
fontSize: ‘22px’
},
right: [],
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 TileBoard’,
styles: { fontSize: ‘40px’ }
}
]
},
{ bg: ‘images/bg3.jpg’ }
]
},/

pages: [
{

1953

You definitely need to enclose it in speech marks or " " since its a string

1954

Just seen after you mentioned above VAR CONFIG

Me being an idiot, a while ago i’d added this to the script as i thought it was necessary to add full screen ‘document.documentElement.requestFullscreen();’

:confounded:

1955

Removing that should fix your issue, I don’t see any other config issues…

1956

Does anyone have sample code I can play around with to achieve this?

Looking to hopefully to add the state (on / off) and change the colour based on either on / off - just like the light icon.

In addition, looking for advice on this. I am looking to create a home / away mode so that I can quickly tap as I am running out the door and it will either turn off apartment or wake it up (lights, sockets etc). Does anyone know the best way to achieve it and is it possible to get it to look like the below?

11
11820×452 38 KB

1957

For the Home / Away mode you can just setup a scene inside your HASS instance that controls exactly what you want on/off when you press it. Just setup a tile with the type: TYPES.SCENE in your config.js. It would be two separate tiles though, but you can click either one to activate it.

The color changing is easily done with your custom.css file by overriding the default css classes.

1958

Thanks, @ryanb33 , but how do I get it to bring the state through… this is my current code:

{
  position: [0, 0],
  type: TYPES.CUSTOM,
  title: "Colour Loop",
  id: {},
  icon: "mdi-led-outline",
  action: function(item, entity) {
    Api.send({
         type: 'call_service',
         domain: 'light',
         service: 'turn_on',
         service_data: {
           entity_id: "light.bedside_lamps",
           effect: "colorloop"
         }
       });
  }
1959

First create the Scene in your Home Assistant instance. This is where you set all the parameters for what you want it to do. I would start with a very simple scene that turns on a single light. Once you get that working in Home Assistant then create a tile with the type: TYPES.SCENE (example linked here) and reference the scene entity ID that you created inside Home Assistant. Below is an example of my scene code in config.js that opens my blinds:

{ // open blinds start
    position: [0, 3],
    width: 1,
    type: TYPES.SCENE,
    subtitle: 'Downstairs',
    title: 'Open Blinds',
    id: "scene.55363",
    state: false, 
    icon: 'mdi-blinds'
}, // open blinds end

Once this is working, add on to your scene to get it to do all the things you want it to do.

Link to Home Assistant docs on setting up scenes: https://www.home-assistant.io/components/scene/

1960

So it’s not possible to keep this in tileboard and just extending the code above? Maybe through the API send?

1961

Unless you are going to create a new HTML template in the index.html file (that you aren’t supposed to touch unless you know what you are doing) I would stick to the default tile views for now. What you are trying to do already exists. Do you currently have a scene created in your Home Assistant server?

1962

Hi,

I want to insert my Sonos Speaker. I Used the media player tile and it works so far.

            {
                position: [0, 0],
                id: 'media_player.kuche',
                type: TYPES.MEDIA_PLAYER,
                hideSource: false,
                hideMuteButton: false,
                width: 2,
                height: 2,
                state: false,
                bgOpacity: 0.5,
                //state: '@attributes.media_title',
                subtitle: '@attributes.media_title',
                bgSuffix: '@attributes.entity_picture',
              },
           ]
        },

but how can I change the “playlist”. In HA there is a source_list in the entity.
HA entity:

media_title: radio ffn 
source: radio ffn 101.9 (Hot AC) 
shuffle: false 
source_list: A State of Trance,Amerikanisches Weihnachten (35 authentische und bekannte Weihnachtslieder aus der USA),Chillax,Die 30 besten Weihnachts- Und Winterlieder,Disney Magic Moments 2: Die größten Disney Love Songs,Dreams Of Harmony : Meditationsmusik für Kinder,hr 4,RADIO BOB!,radio ffn 101.9 (Hot AC),Weihnachtslieder für Kinder,Wunderschöne Weihnachtslieder - Piano Solo Traditionell & Klassisch 
sonos_group: media_player.kuche,media_player.wohnzimmer_2`
1963

obraz
obraz703×77 15.5 KB

how to show all text?

        {
           position: [0, 1],
           width: 5,
           height: 0.5,
           id: {}, 
           type: TYPES.TEXT_LIST,
           state: false,
           list: [                 {
                 value: '&sensor.dark_sky_daily_summary.state'
              },

full text is:
Brak opadów w ciągu tygodnia, w sobotę temperatura wzrośnie do 11°C.

1964

You’ve got a few options on how you want to handle this. Here’s the CSS causing the current behavior:

.item-list--value {
  display: inline-block;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 50%;
}

Specifically, the width of 50% is causing the text item to occupy half of the tile. The reason for this is that each element in a text_list can have a name and a value, as in this example tile:
image

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 */
}

I’d recommend the second option just because it gives you more flexibility down the line. Defining your tile as a custom class using the second option also gives you the ability to do other things, such as dynamically sizing the height if needed.

2 Likes
1965

I have an older Samsung TV which unfortunately only has a network connection when the TV is ON. Meaning that it cannot be woken from an OFF state (probably like your TV). So I had to automate this via HDMI-CEC.
I have an Apple TV hooked up to my TV, and via HA I’d send a command to the ATV to turn on.

So whenever I do a service call to toggle the mediaplayer on/off it will send the same command to the atv remote entity. I have to mention though that this doesn’t seem to work here (I use lovelace as my main interface and Tileboard only for my older tablets). For some reason Tileboard doesn’t see it the same way. So within tileboard at the moment I can only switch it off like your setup.

I am still looking for a workaround to this. But it has a low priority for me as I mostly use lovelace in which it works perfectly fine.

Whenever I find a solution to that I will post it here.

1966

Yes and I have used the scenes template and created a tile. for example… although I am not sure how to show if this is active not?

53

1967

You would just need to create 2 separate tiles; one as your HOME and one as your AWAY scene. You could also setup a device_tracker element to track when you are home and away to make this all automatic so when you enter your HOME zone the scene automatically is activated.

1968

Ah, sorry - I think we are talking about different things here.

I set a scene in HA and added the ‘tileboard scene tile’ on my dashboard. I am looking for a way for it to show that scene is currently active / not activate on TileBoard.

1969

Scenes are stateless. They can only be activated. So, when you initially tap the tile it would activate the scene at that moment and that’s it. The scene does not retain an “on” state.

1970

You would know by the devices in your home turning on & off when clicking the scene.

1971

That’s true.

What about - could I set up two tiles - one for increasing the brightness and the other for lowering for a set of lights?