Installing TileBoard on hassio

Hey,
I am new on HA and I want to build to UI with TileBoard, unfortunately I can’t understand how to install it on hassio.
could you help me please?
Thanks :slight_smile:

1 Like

Clone the repository inside your config/www folder

Thank you :slight_smile:
Now i get 404 error when I enter to “http://10.0.0.7:8123/local/tileboard/index.html

Just to make sure, you created a new folder called “www” in your config folder, and saved the tileboard folder in there? Something like config/www/tileboard.

Is 10.0.0.7 the IP of your Pi running Hassio? Doesn’t hurt to restart home assistant either once you’ve created the folders.

i did everything and my hassio ip is 10.0.0.7

/*

This is an example configuration file.

COPY OR RENAME THIS FILE TO config.js.

Make sure you use real IDs from your HA entities.
*/

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://10.0.0.7:8123”,
wsUrl: “ws://10.0.0.7:8123/api/websocket”,
password: “******”,
authToken: null, // optional: make an long live token and put it here
//googleApiKey: “XXXXXXXXXX”, // Required if you are using Google Maps for device tracker
debug: false, // 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: ‘30px 130px 0’,
fontSize: ‘28px’
},
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: [
{
title: ‘Main page’,
bg: ‘images/bg1.jpeg’,
icon: ‘mdi-home-outline’, // home icon
groups: [
{
title: ‘First group’,
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 2,
type: TYPES.TEXT_LIST,
id: {}, // using empty object for an unknown id
state: false, // disable state element
list: [
{
title: ‘Sun.sun state’,
icon: ‘mdi-weather-sunny’,
value: ‘&sun.sun.state’
},
{
title: ‘Custom’,
icon: ‘mdi-clock-outline’,
value: ‘value’
}
]
},
{
position: [0, 1], // [x, y]
width: 1,
type: TYPES.SENSOR,
id: ‘updater.updater’,
state: ‘@attributes.release_notes’ // https://github.com/resoai/TileBoard/wiki/Templates
}
]
},

        {
           title: 'Second group',
           width: 2,
           height: 3,
           items: [
              {
                 position: [0, 0],
                 width: 1,
                 type: TYPES.SLIDER,
                 //id: "input_number.volume",
                 id: {state: 50}, // replace it with real string id
                 state: false,
                 title: 'Custom slider',
                 subtitle: 'Example of subtitle',
                 slider: {
                    min: 0,
                    max: 100,
                    step: 2,
                    request: {
                       type: "call_service",
                       domain: "input_number",
                       service: "set_value",
                       field: "value"
                    }
                 }
              },
              {
                 position: [1, 0],
                 width: 1,
                 type: TYPES.SWITCH,
                 //id: "switch.lights",
                 id: {state: 'off'}, // replace it with real string id (e.g. "switch.lights")
                 state: false,
                 title: 'Custom switch',
                 icons: {'off': 'mdi-volume-off', 'on': 'mdi-volume-high'}
              },
              {
                 position: [0, 1],
                 type: TYPES.ALARM,
                 //id: "alarm_control_panel.home_alarm",
                 id: { state: 'disarmed' }, // replace it with real string id
                 title: 'Home Alarm',
                 icons: {
                    disarmed: 'mdi-bell-off',
                    pending: 'mdi-bell',
                    armed_home: 'mdi-bell-plus',
                    armed_away: 'mdi-bell',
                    triggered: 'mdi-bell-ring'
                 },
                 states: {
                    disarmed: 'Disarmed',
                    pending: 'Pending',
                    armed_home: 'Armed home',
                    armed_away: 'Armed away',
                    triggered: 'Triggered'
                 }
              }

           ]
        },

        {
           title: '',
           width: 1,
           height: 3,
           items: [
              {
                 // please read README.md for more information
                 // this is just an example
                 position: [0, 0],
                 height: 2, // 1 for compact
                 //classes: ['-compact'],
                 type: TYPES.WEATHER,
                 id: {},
                 state: function () {return 'Sunny'}, // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
                 icon: 'clear-day',
                 icons: { 'clear-day': 'clear'},
                 fields: {
                    summary: 'Sunny',
                    temperature: '18',
                    temperatureUnit: 'C',
                    windSpeed: '5',
                    windSpeedUnit: 'kmh',
                    humidity: '50',
                    humidityUnit: '%',
                    list: [
                       'Feels like 16 C'
                       /*
                       'Feels like '
                          + '&sensor.dark_sky_apparent_temperature.state'
                          + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',

                       'Pressure '
                          + '&sensor.dark_sky_pressure.state'
                          + '&sensor.dark_sky_pressure.attributes.unit_of_measurement',

                       '&sensor.dark_sky_precip_probability.state'
                          + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
                          + ' chance of rain'
                       */
                    ]
                 }
              }

           ]
        }
     ]
  },
  {
     title: 'Second page',
     bg: 'images/bg2.png',
     icon: 'mdi-numeric-2-box-outline',
     groups: [
        {
           title: '',
           width: 2,
           height: 3,
           items: [
              {
                 position: [0, 0],
                 width: 2,
                 title: 'Short instruction',
                 type: TYPES.TEXT_LIST,
                 id: {}, // using empty object for an unknown id
                 state: false, // disable state element
                 list: [
                    {
                       title: 'Read',
                       icon: 'mdi-numeric-1-box-outline',
                       value: 'README.md'
                    },
                    {
                       title: 'Ask on forum',
                       icon: 'mdi-numeric-2-box-outline',
                       value: 'home-assistant.io'
                    },
                    {
                       title: 'Open an issue',
                       icon: 'mdi-numeric-3-box-outline',
                       value: 'github.com'
                    }
                 ]
              }
           ]
        },
     ]
  }

],
}

solved :slight_smile:
uppercase problem …

Hey,

saw the tutorial yesterday and wanted to implement this to my HomeAssistant installation on my RaspberryPi.
Sorry if i am too stupid but where exactly do i find the “www” folder to paste the config files???