create a new config.js called for example mobile.js and then copy index.html and name it mobile.html. Look inside mobile.html and rename to mobile.js
1 Like
This project is simple AMAZING!!!
This covers 98% of my needs!
I own you a beer!!!
1 Like
Hi @resoai, did you change the tileSize parameter for this? On my iPhone at 150 it’s not fitting in like your screen does.
Rod
I am calculating the size based on the screen size:
var GROUP_WIDTH = 3;
var GROUP_MARGIN = 5;
var TILE_MARGIN = 4;
var TILE_SIZE = getTileSize(GROUP_WIDTH, TILE_MARGIN, GROUP_MARGIN);
var TRANSITION = TRANSITIONS.SIMPLE;
var CUSTOM_THEME = CUSTOM_THEMES.WINPHONE;
function getTileSize (tileCount, tileMargin, groupMargin) {
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
width -= groupMargin * 2 + tileMargin * (tileCount - 1);
return +(width / tileCount).toFixed(1);
}
…
customTheme: CUSTOM_THEME,
transition: TRANSITION,
tileSize: TILE_SIZE,
tileMargin: TILE_MARGIN,
groupMarginCss: GROUP_MARGIN + 'px',
menuPosition: MENU_POSITIONS.BOTTOM
2 Likes
What are the other 2%? 
First, BIG THANKS for this project. Very nice!!
For my weather forecast tile I would like temperature to show something like “15 - 26 C”, that would be low and high temp tomorrow. How can I code that in here?
Thinking like:
temperature: ‘&sensor.dark_sky_overnight_low_temperature_1.state’ + ’ - ’ + ’ &sensor.dark_sky_daytime_high_temperature_1.state’,
(No I can’t code, just making it up so it might be understandable…)
We have added a simple template parser so if you grab the latest code you do this as follows:
'&sensor dark_sky_overnight_low_temperature_1.state - &sensor.dark_sky_daytime_high_temperature_1.state',
Just wanted to share my first attempt with this dashboard after a day of working with it. There are still some customizations to go regarding icons, bg colors and other detail-type stuff. Especially figuring out icon positioning for the half-size tiles - can I somehow place icons within the subtitle or title fields?
5 Likes
Are you talking about those little green ones at the bottom?
Please add classes: [CLASS_MICRO] to each of those little ones. You can also try setting theme to CUSTOM_THEMES.MOBILE
I dont understand this. My hassio files are not in a www folder. I did put these files including index.html in the same folder that containes my home assistant files, but I cannot access it from a browser. Must be frustrating for you to have to deal with end user dummies like me.
Within the directory where configuration.yaml resides create a directory called www (if it does not exist) and in that directory create a directory called tileboard where all the files should reside.
Dashboard will be accessible via following URL: http://YOUR_IP:8132/local/tileboard/index.html
2 Likes
Thanks, works perfect! (But I had to twist the tile to horizontal 2 by 1 to make it fit)
Let’s just say, your usage of tiles is a bit unconventional
1 Like
after I stay on the tileboard page for a period of time, if i refresh I start to see these errors:
api.js:122 WebSocket connection to ‘ws://localhost:8123/api/websocket’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
$Api._connect @ api.js:122
main-controller.js:1252 Object
(anonymous) @ main-controller.js:1252
That is not how my config.js is setup, as I have it as wss, restarting Homeassistant does not help along with clearing browser cache. I have to reboot my pi running hassbian.
cool. got that. now switches. seeing the id: twice confuses me. does this seem right?
type: TYPES.SLIDER,
id: “light.office”,
id: {state: 50}, // replace it with real string id
state: false,
title: ‘Office Light’,
This is only an example! You need to leave only one field with correct entity_id.
1 Like
Nevermind. It is acting that way because I have an error in my config and defaulting to the temp config 
Yes, if there is an error in JavaScript, CONFIG variable would not exist and browser will use example config which has localhost as URL.
1 Like
Darn missing commas