The code you are using is for fully kiosk. Kiosk pro lite is a different app.
First of all thank you so much for your awesome work @resoai! This is amazing!
I have (maybe) a stupid question :).
My current board looks like this (only light panel)…
{
position: [0, 0],
title: 'Arbeitszimmer',
id: 'light.office_light',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb-outline",
},
sliders: [
{
title: 'Helligkeit',
field: 'valuer',
id: 'input_number.office_dimmer',
max: 100,
min: 10,
step: 10,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
},
]
},
As you can see I have a light entity and the dim function is made with a RFXtrx input_number…
It calls a shell script (using some python code) to trigger the RFXtrx with something like this:
"echo -ne '\x0a\x14\x03\x03\x00\x86\x13\x01\x02\x00\x00' > /dev/ttyUSB0"
How to implement the input_number into the light component (for the long press function)?
Thanks and best regards
Sunny
Let’s see if anyone can help me on this.
I have tried to configure the sensor type SENSOR_ICON but the ICON does not shows up. What I’m doing wrong?
{
position: [0, 2],
width: 0.80,
type: TYPES.SENSOR_ICON,
id: "sensor.movement",
title: 'Living',
subtitle: 'Movimiento 1',
states: {
on: "Movement Detected",
off: "Normal"
},
icons: {'off': 'mdi-human-male', 'on': 'mdi-walk'},
}
Thank you very much for your help!!!
Forget it. I was adding the wrong sensor!!! Apologies!
Anyone have an idea on how to make an iFrame pop out fullscreen as the camera tiles do?
There is POPUP_IFRAME tile for it.
Glorious, thank you for the help and fantastic project!
What I mean initially was a small iFrame window that when clicked went to fullscreen, similar to how the camera displays a thumbnail but a streaming image when enlarged. I can’t seem to get Home Assistant to give me a good stream from my camera but a locally hosted url with the stream from my NVR works fine. When embedded as an iFrame it works flawlessly I was looking to have multiple iFrames on a camera page that would enlarge when clicked from a smaller streaming video.
Nope. Either IFRAME or POPUP_IFRAME.
It is possible to change a TYPE.SWITCH tile icon based on other TYPE.INPUT_SELECT option selected?
i.e: I have two tiles, one is a SWITCH to turn ON/OFF the TV and the other tile is an INPUT_SELECT to select a source like: Netflix, TV, PS3, etc. I want to select for instance Netflix and change the SWITCH TV Icon with a Netflix image.
Thanks!
I am not sure if I said it yet, but thank you so much for developing this @resoai. It is an amazing front end and I think the best dashboard out for Homeassistant.
I was wondering if anyone has this issue. I am running on an iPad 3rd gen. My goal is to have this always running on the iPad. It is running from a “save on home screen” bookmark that essentially runs full screen on the iPad (except for the menu bar…I wish that would go away). There are still 2 apps that my kids use (for the bus and school lunch) every morning, but then we put it back on Tileboard. It will only stay on TileBoard for 1 to 2 hours, and then it will go back to the home screen. After some troubleshooting I realized it was the TYPES.CAMERA_THUMBNAIL tile. If I commented that tile out it would stay on for 24 hours+. I changed where the HA proxy was getting the image (direct from camera and now it gets it direct from MotionEye). Is there something I can do to change my tile so it doesn’t close every 2 hours?
here is my config for the camera tile if it helps:
// GARAGE CAM \\
{
position: [2, 2],
id: 'camera.garagaecam',
title: '',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 4,
height: 2,
state: false,
fullscreen: {
type: TYPES.CAMERA,
bgSize: 'contain',
refresh: 1500,
},
refresh: function () { // can also be a function
return 3000 + Math.random() * 1000;
}
},
and here is my yaml for camera.
camera:
- platform: generic
name: garagaecam
still_image_url: https://10.191.30.52:8765/picture/1/current/
stream_source: http://10.191.30.52:8081
verify_ssl: falseHello all,
very nice project here, is there any dynamic positionning implemented yet,i’ve seen a lot of use case in that forum that could benefit for it, for example :
- showing every device detected (device_tracker)
- displaying item if only in a specific state (input_boolean == 0 for trash day / recycling day etc)
- showing light that are on before light that are off
- etc
EDIT : ok actually it’s doable with a bit of scripting to calcul positioning , gonna try that !
Thanks
1 Like
Thanks for this, I know it is a lot of effort;
really enjoying Tileboard, here is what my current version looks like, more to do.
I’m trying guided access to see if Tileboard can remain active for more than 2 hours. I will update this post with my findings.
May want to check out long lived tokens on HA Profile page, at bottom.
For the TYPES.LIGHT it is possible to call their attributes when clicking the tile like: brightness: 255 or color: white?
Thanks!
Hello!! Congratulations for your amazing solution. It’s possible to you post your DOOR_ENTRY code?! It will be very helpful!! Thanks
can you share your code?
1 Like
David1, here is the code from my config .js, please note I did make a change to the themes.css file. as noted in the line below CUSTOM.THEMES, near top. This can probably be done with Custom .css file, but I haven’t looked into that yet. Hope it helps.
/*
*/
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT, // null, CCUSTOM_THEMES.TRANSPARENT, //CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
/* note: line 144 in styles/themes.css .-theme-transparent .item background: rgba(132, 122, 116, 0.7) !important; The .7 is changed (from .1)
*/
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
serverUrl: "http://XXX.XXX.XXX.XXX:8123",
wsUrl: "ws://XXX.XXX.XXX.XXX:8123/api/websocket",
//password: prompt('enter password'), // googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
//passwordType: PASSWORD_TYPES.PROMPT_AND_SAVE,
debug: false, // Prints entities and state change info to the console.
// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.BOTTOM, // or LEFT
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: '18px'
},
left: [],
right: [
{
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 <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},*/
pages: [
{
title: 'Main page',
bg: 'images/Pool.jpg',
icon: 'mdi-home-outline', // home icon
groups: [
{
title: 'Lights',
width: 2,
height: 4,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SWITCH,
id: 'switch.outdoor_lights',
title: 'Post and Trim Lights',
subtitle: 'Outdoor',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
id: 'switch.outside_recepticles',
title: 'Outdoor Recepticles',
subtitle: 'Holiday Lighting',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
]
},
{
title: 'Pool',
width: 3,
height: 4,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SLIDER,
id: "input_number.slider1",
state: false,
title: 'Pool Pump Run Hours',
subtitle: 'Set Daily Off-peak',
slider: {
min: 0,
max: 24,
step: 1,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
}
},
{
position: [0, 1],
type: TYPES.SCRIPT,
id: 'script.add_pump_run_time',
icon: "mdi-timer",
state: false
},
{
position: [1, 1],
type: TYPES.SCRIPT,
id: 'script.reset_pump_shutdown_time',
icon: "mdi-power-off",
state: false
},
{
position: [1, 0],
type: TYPES.SENSOR,
id: 'sensor.pump_shutdown_time',
state: false, // hidding state
title: 'Pump Shutdown Time:'
},
{
position: [2, 1],
type: TYPES.SENSOR,
title: 'Pool Heat',
id: 'binary_sensor.pool_heat',
state: false, // hiding state
},
{
position: [2, 0],
type: TYPES.SENSOR,
id: 'binary_sensor.pool_pump_running',
state: false,
title: 'Pool Pump Status:'
},
{
position: [1, 2],
id: 'scene.pool_party',
type: TYPES.SCENE,
state: false,
icon: 'mdi-pool',
bg: 'images/poolparty.png',
},
]
},
{
title: 'Weather',
width: 2,
height: 4,
items: [
{
position: [0, 0],
height: 2,
//classes: ['-compact'], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: 'weather.dark_sky',
state: '&sensor.dark_sky_summary.state', // label with weather summary (e.g. Sunny)
icon: '&sensor.dark_sky_icon.state',
//iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: { // most of that fields are optional
summary: '&sensor.dark_sky_summary.state',
temperature: '&sensor.dark_sky_temperature.state',
temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
windSpeed: '&sensor.dark_sky_wind_speed.state',
windSpeedUnit: '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
humidity: '&sensor.dark_sky_humidity.state',
humidityUnit: '&sensor.dark_sky_humidity.attributes.unit_of_measurement',
list: [
// custom line
'Feels like '
+ '&sensor.dark_sky_apparent_temperature.state'
+ '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
// another custom line
'Pressure '
+ '&sensor.dark_sky_pressure.state'
+ '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
// yet another custom line
'&sensor.dark_sky_precip_probability.state'
+ '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
+ ' chance of rain'
]
}
}
//```
]
}
]
},
{
title: 'Music',
bg: 'images/music2.jpg',
icon: 'mdi-music', // home icon
groups: [
{
title: 'Music',
width: 2,
height: 4,
items: [
{
position: [0, 0],
height: 2, // 1 for compact
width: 2,//classes: ['-compact'],
type: TYPES.MEDIA_PLAYER,
id: 'media_player.squeezebox',
hideSource: false,
hideMuteButton: false,
state: false,
//state: '@attributes.media_title',
subtitle: '@attributes.media_title',
bgSuffix: '@attributes.entity_picture',
},
]
},
{
title: 'On-Q Music System',
width:4,
height:4,
items: [
{
position: [0, 0],
height: 1,
width: 1,
type: TYPES.SCRIPT,
title: 'On-Q Source',
subtitle: 'Squeezebox',
id: 'script.onq_irsend_source_1',
icon: "mdi-numeric-1-circle-outline",
state: false
},
{
position: [1, 0],
height: 1,
width: 1,
type: TYPES.SCRIPT,
title: 'On-Q Source',
subtitle: 'Radio #1',
id: 'script.onq_irsend_source_2',
icon: "mdi-numeric-2-circle-outline",
state: false
},
{
position: [2, 0],
height: 1,
width: 1,
type: TYPES.SCRIPT,
title: 'On-Q Source',
subtitle: 'Radio #2',
id: 'script.onq_irsend_source_3',
icon: "mdi-numeric-3-circle-outline",
state: false
},
{
position: [3, 0],
type: TYPES.SCRIPT,
height: 1,
width: 1,
title: 'On-Q Source',
subtitle: 'A/V - HDMI',
id: 'script.onq_irsend_source_4',
icon: "mdi-numeric-4-circle-outline",
state: false
},
{
position: [1, 1],
type: TYPES.SCRIPT,
height: 1,
width: 1,
title: 'On/Q',
id: 'script.onq_irsend_vol_up',
icon: "mdi-volume-plus",
state: false
},
{
position: [0,1],
type: TYPES.SCRIPT,
height: 1,
width: 1,
title: 'On/Q',
id: 'script.onq_irsend_vol_down',
icon: "mdi-volume-minus",
state: false
},
{
position: [2, 1],
type: TYPES.SCRIPT,
height: 1,
width: 1,
title: 'On/Q',
id: 'script.onq_irsend_mute',
icon: "mdi-volume-mute",
state: false
}
]
}
]
},
{
title: 'Security',
bg: 'images/bg2.png',
icon: 'mdi-shield-home',
groups: [
{
title: 'Alarm System',
width: 3,
height: 4,
items: [
{
position: [0, 2],
height: .5,
width: .5,
type: TYPES.SCRIPT,
title: 'On-Q Source',
//subtitle: 'On/Q - Squeezebox',
id: 'script.add_pump_run_time',
icon: "mdi-numeric-1-circle-outline",
state: false
},
{
position: [1.5, 2],
type: TYPES.SCRIPT,
height: .5,
width: .5,
title: 'On-Q Source',
id: 'script.add_pump_run_time',
icon: "mdi-numeric-4-circle-outline",
state: false
},
{
position: [2, 0],
type: TYPES.SCRIPT,
// height: .5,
//width: .5,
title: 'On/Q',
id: 'script.add_pump_run_time',
icon: "mdi-volume-plus",
state: false
},
{
position: [2,1],
type: TYPES.SCRIPT,
//height: .5,
//width: .5,
title: 'On/Q',
id: 'script.add_pump_run_time',
icon: "mdi-volume-minus",
state: false
}
]
}
]
},
{
title: 'Test',
bg: 'bg5.jpg',
groups: [
{
title: '1234',
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'
}
]
}
]
},
]
}
],
}