TileBoard - New dashboard for Homeassistant

This is not implemented at the moment.

1 Like

Thanks for the great work on tileboard. Hopefully the media browser capability will come to tileboard in the future.

Please feel free for I open a feature request on GutHub. Hopefully someone will pick it up.

I’m also looking at this, would love to be able to have the functionality for the family to use.

The second i have in an Iframe, works ok, but i’d also!like the forecast like the image, but have no ideas on how, and i’ve tried a few tiles etc, but am now stumped.
Screenshot 2020-11-03 at 16.11.31|444x500
Help anyone please.

TIA
kevin

Hi @vegetate7,

I’m hoping you may be able to help me - i saw your post, and like the way the weather tile looks for you. I’m trying to replicate this, however, I’m not having much luck.

I copied the CSS and added the part of your config.js file to mine - but i am unfamiliar with the diff to make the bind-html-compile work - where does this go?

Hoping you can help,

Cheers,
Jason

This changes original ‘index.html’ and ‘scripts/init.js’ files. It was a long time ago, the project perhaps was changed. I freeze my copy and make a changes in it, so I can not help more.
Somewhere up in thread I wrote where is the original of bind-hml-compile idea.

Looks great, can you share the config?

Thanks

K

Hi Guy’s,

can anyone assist me with the following error?
Knipsel

What ever i do it keeps giving me this error. anyone?

btw, this is my config,. just a copy of the tutorial,

var CONFIG = {
   customTheme: null,
   transition: TRANSITIONS.ANIMATED_GPU
   entitySize: ENTITY_SIZES.NORMAL,
   tileSize: 150,
   tileMargin: 6,
   serverUrl: 'https://xxxxx.duckdns.org',
   wsUrl: 'wss://xxx.duckdns.org/api/websocket',
   authToken: ,
   pages: [
      {
         groups: [
            {
               items: [
                  {
                     // this is a tile
                  },
               ]
            },
         ]
      },
   ]
}

Simple changes if you want a timeout for auto return to first page. This ‘feature’ is based on screensaver function.

just add the commented lines in your code:

config.js

    screensaver:
    { 
        timeout: 8000,
       /// pagetime:30,
        styles:
        {

`
in scripts/controllers/screensaver.js

         setInterval(function () {
      var inactivity = Date.now() - lastActivity;

 var newState = conf.timeout < inactivity / 1000;

    /// var timeonpage = conf.pagetime < inactivity / 1000;

    ///  if(timeonpage) window.openPage(CONFIG.pages[0]);

      if(newState !== $scope.isShown && !$scope.activeCamera) {
  

Hello,

Do you know where is specified the little corner that is in this screenshot ?
I want to apply it to all my tiles (even the non-button tiles).

Thanks

Found in main.css,
ctrll + f .“item.-scene .item-clickable,” and add for example a line below with climate instead of “scene” to add this icon to climate

This looks amazing!! Have you shared the config file?

could not find it but is there a way to change the background color from a tile which is switched off. and when it whiched on if will also change… something like

On: background Green
Off background Red…

Anyone?

Hi @Rivsenn - which type of tile are you planning on using?
TYPES.LIGHT or TYPES.SWITCH?
Jason

it can be achieved like this.
add to custom.css

 .item.-on.-light {
  background: red;
}
.item.-off.-light {
  background: red;
}

this is for tile type - light, it can be changed/adjusted for other tiles as well
so assume you want same colors for switch tiles

.item.-off.-switch,
.item.-off.-light {
     background: red;
  }

if you want change color for all tiles, which does not depends from a state:

.item {
    background: red;  
   }

basically you have to use css selector:
.item - means tile
.-light - tile type
.-on - state (can be not only on or off )

Hi,

Step is not supported in climate type?

{                    
                      position: [1, 1],
                      type: TYPES.CLIMATE,
                      unit: '°C',
                      useHvacMode: false,
                      step: '0.5',
                      id: 'climate.heating',
                      states: function (item, entity) {return entity.state}
                  },

It is possible to hide preset selector? I don’t like the big ‘none’ text at the center of my climate button.

Screenshot 2020-11-12 at 21.17.12

2 Likes

Wanted to say, thanks for the awesome app. I transitioned from smartthings to hass a few weeks ago and researched what platform I wanted to use for my tablet displays I have in the house and went with TileBoard because I like the idea of being able to change anything and everything I wanted, if I wanted. Its flexibility and hackability if fantastic! I didn’t know any js or css before this, so it’s been a learning curve and my hacks are probably as far from best practices as you can imagine, but it works.

A few questions/bugs that I’ve run into and thought maybe the community could help get me unstuck faster than continuing to beat my head against a brick wall.

  1. I’ve noticed that having a input_select popup or any other select pop up on a page other than page one–clicking outside the popup doesn’t close it. I guess the onclick() close event is only on page 1 and not the other pages.
  2. the gauge plug-in bombs when I put it in a pop-up group. I guess it’s trying to draw on a canvas that has a zero size, because it doesn’t exist yet?
  3. I created a seek slider modeled after the volume slider for my SONOS media tile and it mostly works. But I’m stuck on my zero knowledge of angular and bindings (two-way? one-way?). I can’t seem to differentiate between a change in value caused by the user, or caused by an update from HA. So it can get into this loop where HA updates the slider, which causes an update event in the binding, which causes angular to send a seek event back to HA and it can loop there forever. I hack/fixed this by only sending seek events if current position is different than seek position by more than a few seconds, but when changing tracks, that workaround fails. Any advice on where to look? The variables, curValue, oldValue, and newValue don’t seem to be as described in comments, but always the same, regardless of the source of the change.

Anyway, thanks again for the awesome work!

Some screenshots of a couple of the pages I’ve configured:




Anyone can help me with a config like this?

I could achieve only this:

It is possible to center tiles and fill the space a little more, like on the first image?

Just gave Tileboard a try and… I am not impressed: :neutral_face:

  • if you download from the default github page you get a “master” version which does not work
  • you only find a working version under “releases” currently at 2.0.3 but somehow this not the master?
  • After loading the page there is message that WINDOW.config is missing. Well, there is no window.config described anywhere on the github page??