TileBoard - New dashboard for Homeassistant

resoai · January 9, 2020, 2:15pm

As I mentioned previosly in this thread I have small child now and can’t afford spending free time on this project. I do what I can ocassionally.

CiechomPL · January 9, 2020, 7:02pm

Does anyone have an idea why some of the mdi icons are not showing up on the tiles ?
e.g. mdi-door-closed-lock or mdi-gate-open etc.
Many others showing up as should. I also can see those in vscode.
I’m using haasio fully updated to the latest version.

CiechomPL · January 9, 2020, 7:07pm

One other question
Is there a possibility to add floorplan created in separate View/Tab in lovelace interface.
Currently I added it as IFRAME via URL like this: https://MyHassioIP:8123/lovelace/floorplan
but this shows entire lovelace interface with all tabs, menus etc + does not scale iframe correctly.
I would like to show in TileBoard only floorplan without all unnecessary menus etc.

valepe · January 9, 2020, 9:19pm

FIrst, congratulation for your child.
I found the solution to the black column. After your css change to camera-popup–list I add a width: 100% to camera-popup–camera and the black column is gone.

Codec303 · January 10, 2020, 9:39am

Thanks I tried this and it works for me also, here it is formatted:

.camera-popup--camera {
  width: 100%;
}

Also you can use the .camera-popup-container class to change the border if you want.

akloeckner · January 10, 2020, 11:30pm

You’re not doing anything wrong. I was… I just opened a PR with a fix for this bug…

fra · January 11, 2020, 12:58pm

thanks a lot man! it works!!!

EddyBin · January 11, 2020, 6:35pm

I think that I have exactly the same issue.
Can you be a little more specific how a long live token is created.

I have access to the tileboard on my windows computer where I could use login screen from HA, however on my old iPad which I want to use as display on the wall, I do get login screen without possibility to fill in the username and password. After clicking the next button I get an error “something went wrong”

So what I need is a work around. Can you please show wat need to be change in the config.js

HeyImAlex · January 12, 2020, 8:36pm

First of all, thanks so much for TileBoard. Coming from Domoticz, your UI was what eventually made me change to HA. So I’ve been designing my little dashboard and I’m pretty happy with it so far. I do have a few issues with cameras though. So if anyone can help me with these, that would be awesome.

I have a HikVision 2CD2085FWD. I’m using the generic IP camera platform with still_image_url. The camera offers two streams, one 4k hires and a 480p lowres. The camera is not able to serve both streams simultaneously. Trying to access one stream while the other is still being served will result in an error. So I’d like to use the lowres preview on a tile and then the hires 4k images on the fullscreen camera popup. I created two cameras, one with the hires and one with the lowres image url and modified the js code to use the hires camera entity in the popup. Unfortunately this is very unstable due to the ‘one stream at a time’ limitation of the camera.

So I thought about using a still_image_url template in the configuration yaml and switch the url (hires or lowres) based on the state of some entity. What would be the best way to do this with TileBoard ? Just create a template ‘virtual’ switch and use api.send to flick the state of that switch when the camera popup opens ? Or is there a better way ?

Thanks !

resoai · January 13, 2020, 1:17am

Thanks for the PR!

resoai · January 13, 2020, 1:18am

github.com

resoai/TileBoard/blob/8f70e846a89efde46a13272f47adbebb4d61dec9/config.example.js#L18




var CONFIG = {
   customTheme: null, // 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.NORMAL, //SMALL, BIG are available
   tileSize: 150,
   tileMargin: 6,
   serverUrl: 'http://' + location.hostname + ':8123',
   wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
   authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
   //googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
   //mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
   debug: false, // Prints entities and state change info to the console.
   pingConnection: true, //ping connection to prevent silent disconnections

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

Long-lived tokens are created from within your profile in HA.

resoai · January 13, 2020, 1:21am

Perhaps this would help.

resoai · January 13, 2020, 1:24am

MDI are being updated constantly and TileBoard could be using outdated set.

HeyImAlex · January 13, 2020, 2:03am

Thanks, interesting. That could work. I somehow missed this. Still trying to find my way around HA, the myriads of different camera integrations are very confusing.

coalsi · January 13, 2020, 7:32am

Loving this tileboard! This is what I got so far!

Still working on a few design elements.

CiechomPL · January 13, 2020, 9:16am

ok thx
2 more questions then:

how to update set manually ?
is there a way to use my own icon , not from mdi ? I’ve tried to put even a direct url to my png but without success

CiechomPL · January 13, 2020, 10:45am

OMG again I need to ask extremely noobie (I think) question ;-(
Forgive me please but can’t figure it out by myself …

Is there any way/add-on/script to hassio which will/can keep my TileBoard files up-to-date with your git repo ? of course not overwriting my config.js or any other important files created by me in the tileboard folder.

resoai · January 13, 2020, 10:48am

github.com

resoai/TileBoard/blob/8f70e846a89efde46a13272f47adbebb4d61dec9/index.html#L1267


                      duration="getGaugeField('duration', item, entity)" 
                      fraction-size="getGaugeField('fractionSize', item, entity)"></ng-gauge>
         </div>
      </div>
   </div>
</script>



<link rel="stylesheet" async
      href="https://cdn.materialdesignicons.com/3.8.95/css/materialdesignicons.min.css">

</body>
</html>

Just change version number to the latest one from MDI. As for custom icons, you would need to mimic what mdi-XXX classes are doing with your own font.

EddyBin · January 13, 2020, 3:54pm

Thanks for your reply.
I tried to explain the issue also on : Authorisation on Safari (iOS, old iPad) and Explorer for TileBoard

Not sure how I have to overcome the issue. Should I replace the “null” with the long lived token generated by HA. Should I also add a username in the config.js ?

Tileboard would be a very good solution for using my old iPad as an interface, but I do not get access until now

resoai · January 13, 2020, 4:11pm

You don’t need a usernamne, just a long-lived token from HA.