TileBoard - New dashboard for Homeassistant


#1788

Finally found the time to move to Tileboard and worked together with a friend on the preliminary layout. Any thoughts are welcome.


#1789

Use the Custom tile type with the navigation as the action. Something like one of the following:

window.location.assign('https://newurl.com')
window.location = 'https://newurl.com'

The tile config would look something like this:

{
   position: [0, 5],
   width: 2,
   height: 1,
   type: TYPES.CUSTOM,
   title: 'New',
   id: {},
   action: function(item, entity) {
      window.location = 'https://newurl.com';
   }
}

I didn’t test this, just found the javascript code strings online.


#1790

Amazing! Thank you, it works just like i want it :slight_smile:


#1791

Nice shot of your kitchen. May I ask: What lights are you using above? Is it just another pair of strips or do you use something else? (And which strips do you use?)


#1792

Same strips below and above. There are a number of strips that use the Magic Home app and compatible controllers. Amazon literally has tons of different brands and sellers. I have a brand called AEGOOL. You can use the FLUX LED component in HA to control them. If you are good at soldering, I think you can even flash these controllers with Tasmota and just control them locally using MQTT.


#1793

@gsksim How did you added Humidity value under same Tile as Temperature?


#1794

hi,

  • subtitle - this will make humidity or any sensor value display under main sensor value

                   type: TYPES.SENSOR,
                   title: 'Garage',
                   subtitle: 'Humidity: ' + '&sensor.tele_humidity.state' + '&sensor.tele_humidity.attributes.unit_of_measurement',
                   id: 'sensor.tele_temperature',
                   state: false // hidding state

#1795

How did you set up Day and Month in different language?


#1796

Does anyone know how I can align my header (the weather on the right side) - align right and match the padding / margin on the left? So the left margin aligned left and the right side aligned right.


#1797

You can add to custom.css something like this:

.page-align {
    margin-left: 0px !IMPORTANT;
}

You should adjust the 0px value as you wish…
I would recommend not to make too much custom changes and try to adjust the size of the tiles in your config.js file.


#1798

The left is fine.
I am mainly asking about the right hand side - it looks off compared the left side.


#1799

So as I mentioned, adjust the size of tiles…


#1800

I don’t think you have fully understood my question. Feel free to read it back and let me know if you have any questions.


#1801

Well, since it’s set up to scroll horizontally, the right side is going to flow offscreen. I don’t know that there’s a way to control that other than changing the tile size/arrangement so that it all fits on screen and scrolling is not required. The only thing I can think of would be to put all the tiles inside of an iFrame, which would require extensive customization of the source code.


#1802

It’s the header I am concerned about. I want the right side to match the left side, align it right and match the same spacing either side. I am totally fine with the tiles over flowing. In fact, I have another group which can’t be seen until you scroll.


#1803

Hello,

you can translate it manually at the end of /config/www/tileboard/scripts/vendors/angular.min.js file.

For the screensaver date format, change it in /config/www/tileboard/scripts/directives.js.


#1804

I’ve added <script src="scripts/angular-locale_nl-be.min.js"></script> at the end of the scripts in the index.html

Then, you can get your language at https://cdnjs.com/libraries/angular.js/ for example.


#1805

atm I’m working this around using an input_select holding effects & colours and a python script on home assistant side. not very convenient, but that’s a first step :slight_smile:
(next step is to create a LIGHT_SELECT, and next one is to find an appropriate color-picker :))


#1806

I get your question now, I missed that you were referencing the header. I think it’s because your navigation is on the left hand side, so the header is using the same margins on the right and left when taking the whole page into account. Technically, the header is balanced if you count the navigation as part of the page. The navigation appears to be 120px wide in the CSS, so maybe give this a shot in your custom.css file:

.header {
  left: 120px;

That should move the start of the header 120px over and then it should be balanced over the tile content only.


#1807

Yeah ! Thanks a lot for this tip !!!