fbrinker/home-automation-home-assistant
fbrinker/home-automation-home-assistant
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

split tileboard pages, add custom css

Browse Source
This commit is contained in:
Florian Brinker 2019-10-20 01:42:09 +02:00
parent 109f5fae77
commit 31786e6658
6 changed files with 545 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
tileboard/config.js
View File

@ -1,4 +1,4 @@
(function(url) { function loadConfig(url) {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.open('GET', url + '?cache=' + Math.random(), false); req.open('GET', url + '?cache=' + Math.random(), false);
req.onreadystatechange = function(){ req.onreadystatechange = function(){
@ -9,8 +9,18 @@
} }
}; };
req.send(null); req.send(null);
})("includes/config/secrets.js" ); }
// Load secrets
loadConfig("includes/config/secrets.js");
// Load pages
loadConfig("includes/pages/overview.js");
loadConfig("includes/pages/humidity.js");
loadConfig("includes/pages/cctv.js");
loadConfig("includes/pages/misc.js");
// Global config
var CONFIG = { var CONFIG = {
customTheme: [CUSTOM_THEMES.TRANSPARENT], customTheme: [CUSTOM_THEMES.TRANSPARENT],
transition: TRANSITIONS.ANIMATED_GPU, transition: TRANSITIONS.ANIMATED_GPU,
@ -23,7 +33,7 @@ var CONFIG = {
pingConnection: true, pingConnection: true,
tileSize: 150, tileSize: 150,
tileMargin: 10, tileMargin: 8,
groupMarginCss: '20px 40px', groupMarginCss: '20px 40px',
events: [], events: [],
@ -47,8 +57,8 @@ var CONFIG = {
// https://github.com/resoai/TileBoard/wiki/Screensaver-configuration // https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
/*screensaver: { /*screensaver: {
timeout: 300, // after 5 mins of inactive timeout: 5, // after 5 mins of inactive
slidesTimeout: 10, // 10s for one slide slidesTimeout: 3, // 10s for one slide
styles: { fontSize: '40px' }, styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [ slides: [
@ -63,280 +73,14 @@ var CONFIG = {
} }
] ]
}, },
{ bg: 'images/bg3.jpg' } { bg: 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80' }
] ]
},*/ },*/
pages: [ pages: [
PAGE_OVERVIEW,
// Page: Overview //PAGE_HUMIDITY,
PAGE_CCTV,
{ PAGE_MISC,
title: 'Übersicht',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline',
groups: [
{
title: 'Licht',
width: 2,
height: 2,
items: [
{
position: [0, 0],
title: 'Theke',
subtitle: 'Küche',
id: 'light.kuchen_theke',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Helligkeit',
field: 'brightness',
max: 255,
min: 0,
step: 50,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
},
],
},
{
position: [1, 0],
title: 'Esstisch',
subtitle: 'Wohnzimmer',
id: 'light.esstisch',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Helligkeit',
field: 'brightness',
max: 255,
min: 0,
step: 50,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
},
],
},
{
position: [0, 1],
title: 'Stimmungslicht',
subtitle: 'Wohnzimmer',
id: 'light.stimmungslicht',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 1],
title: 'Ambilight',
subtitle: 'Wohnzimmer',
id: 'light.ambilight',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Farbe',
field: 'color_temp',
max: 588,
min: 153,
step: 15,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "color_temp"
}
}
],
colorpicker: true
}
]
},
{
title: 'Wohnzimmer',
width: 2,
height: 2,
items: [
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Temperatur',
id: 'sensor.temperature_3',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 0],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
id: 'sensor.humidity_4',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 1],
id: 'media_player.spotify',
type: TYPES.MEDIA_PLAYER,
width: 2,
hideSource: false,
hideMuteButton: false,
state: false,
subtitle: '@attributes.media_title',
bgSuffix: '@attributes.entity_picture',
},
]
},
{
title: 'Sonstige',
width: 1,
height: 2,
items: [
{
position: [0, 0],
height: 1,
classes: ['-compact'],
type: TYPES.WEATHER,
title: 'Wetter',
id: 'weather.openweathermap',
state: '&weather.openweathermap.state',
icon: '&weather.openweathermap.state',
icons: {
'sunny': 'sunny',
'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: {
summary: '&weather.openweathermap.state',
temperature: '&weather.openweathermap.attributes.temperature',
temperatureUnit: '°C',
humidity: '&weather.openweathermap.attributes.humidity',
humidityUnit: '%',
windSpeed: '&weather.openweathermap.attributes.wind_speed',
windSpeedUnit: 'km/h',
}
},
{
position: [0, 1],
type: TYPES.ALARM,
id: "alarm_control_panel.home_alarm",
title: 'Alarm',
icons: {
disarmed: 'mdi-bell-off',
pending: 'mdi-bell',
armed_away: 'mdi-bell',
armed_night: 'mdi-bell',
triggered: 'mdi-bell-ring'
},
states: {
disarmed: 'Ausgeschaltet',
pending: 'Wartet...',
armed_away: 'Aktiviert',
armed_night: 'Nachtmodus',
triggered: 'Ausgelöst'
}
}
]
}
]
},
// Page: Humidity
{
title: 'Luftfeuchtigkeit',
bg: 'images/bg2.png',
icon: 'mdi-water-percent',
groups: [
]
},
// Page: CCTV
{
title: 'CCTV',
bg: 'images/bg2.png',
icon: 'mdi-cctv',
groups: [
{
title: 'Kameras',
width: 2,
height: 2,
items: [
{
position: [0, 0],
id: 'camera.office',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 2,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 1500,
bgSize: 'contain'
},
}
]
}
]
},
// End
], ],
} }

4
tileboard/custom.css Normal file
View File

@ -0,0 +1,4 @@
/* Hide alarm_home */
.alarm-popup-button.-home {
display: none;
}

27
tileboard/pages/cctv.js Normal file
View File

@ -0,0 +1,27 @@
var PAGE_CCTV = {
title: 'CCTV',
bg: 'images/bg2.png',
icon: 'mdi-cctv',
groups: [
{
title: 'Kameras',
width: 2,
height: 2,
items: [
{
position: [0, 0],
id: 'camera.office',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 2,
state: false,
fullscreen: {
type: TYPES.CAMERA,
refresh: 1500,
bgSize: 'contain'
},
}
]
}
]
}

237
tileboard/pages/humidity.js Normal file
View File

@ -0,0 +1,237 @@
var PAGE_HUMIDITY = {
title: 'Luftfeuchtigkeit',
bg: 'images/bg1.jpeg',
icon: 'mdi-water-percent',
groupMarginCss: '20px 16px',
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Schlafzimmer',
id: 'sensor.temperature_11',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 0],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Schlafzimmer',
id: 'sensor.humidity_12',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 1],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Elternbad',
id: 'sensor.parents_bathroom_hygrometer_temperature',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 1],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Elternbad',
id: 'sensor.parents_bathroom_hygrometer_humidity',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 2],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Kinderbad',
id: 'sensor.kids_bathroom_hygrometer_temperature',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 2],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Kinderbad',
id: 'sensor.kids_bathroom_hygrometer_humidity',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
]
},
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Wohnzimmer',
id: 'sensor.temperature_3',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 0],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Wohnzimmer',
id: 'sensor.humidity_4',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 1],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Büro',
id: 'sensor.temperature_14',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 1],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Büro',
id: 'sensor.humidity_15',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 2],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Gästezimmer',
id: 'sensor.temperature_17',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 2],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Gästezimmer',
id: 'sensor.humidity_18',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
]
},
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Hauswirtschaftsraum',
id: 'sensor.hwr_hygrometer_temperature',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 0],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Hauswirtschaftsraum',
id: 'sensor.hwr_hygrometer_humidity',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [0, 1],
type: TYPES.SENSOR,
title: 'Temperatur',
subtitle: 'Dachboden',
id: 'sensor.attic_temperature_2',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 1],
type: TYPES.SENSOR,
title: 'Luftfeuchtigkeit',
subtitle: 'Dachboden',
id: 'sensor.attic_humidity_2',
unit: '%',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
]
}
]
}

24
tileboard/pages/misc.js Normal file
View File

@ -0,0 +1,24 @@
var PAGE_MISC = {
title: 'Misc',
bg: 'images/bg2.png',
icon: 'mdi-settings',
groups: [
{
title: 'Wallboard',
width: 2,
height: 2,
items: [
{
position: [0, 0],
type: TYPES.CUSTOM,
title: 'Aktualisieren',
id: { },
icon: 'mdi-reload',
action: function(item, entity) {
window.location.reload()
}
},
]
}
]
}

233
tileboard/pages/overview.js Normal file
View File

@ -0,0 +1,233 @@
var PAGE_OVERVIEW = {
title: 'Übersicht',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline',
groups: [
{
title: 'Licht',
width: 2,
height: 2,
items: [
{
position: [0, 0],
title: 'Theke',
subtitle: 'Küche',
id: 'light.kuchen_theke',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Helligkeit',
field: 'brightness',
max: 255,
min: 0,
step: 25,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
},
],
},
{
position: [1, 0],
title: 'Esstisch',
subtitle: 'Wohnzimmer',
id: 'light.esstisch',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Helligkeit',
field: 'brightness',
max: 255,
min: 0,
step: 25,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "brightness"
}
},
],
},
{
position: [0, 1],
title: 'Stimmungslicht',
subtitle: 'Wohnzimmer',
id: 'light.stimmungslicht',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 1],
title: 'Ambilight',
subtitle: 'Wohnzimmer',
id: 'light.ambilight',
type: TYPES.LIGHT,
states: {
on: "An",
off: "Aus"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
sliders: [
{
title: 'Farbe',
field: 'color_temp',
max: 588,
min: 153,
step: 15,
request: {
type: "call_service",
domain: "light",
service: "turn_on",
field: "color_temp"
}
}
],
colorpicker: true
}
]
},
{
title: 'Wohnzimmer',
width: 2,
height: 2,
items: [
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Temperatur',
id: 'sensor.temperature_3',
unit: 'C',
state: false,
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
{
position: [1, 0],
type: TYPES.GAUGE,
title: 'Luftfeuchtigkeit',
id: 'sensor.humidity_4',
value: function(item, entity) {
num = parseFloat(entity.state);
return num && !isNaN(num) ? num.toFixed(1) : num;
},
settings: {
size: 120,
type: 'arch',
min: 0,
max: 100,
cap: 'round',
thick: 10,
append: '@attributes.unit_of_measurement',
duration: 500,
thresholds: { 0: { color: 'green'}, 66: { color: 'yellow' }, 70: { color: 'red' } },
fractionSize: 1,
},
},
{
position: [0, 1],
id: 'media_player.spotify',
type: TYPES.MEDIA_PLAYER,
width: 2,
hideSource: false,
hideMuteButton: false,
state: false,
subtitle: '@attributes.media_title',
bgSuffix: '@attributes.entity_picture',
},
]
},
{
title: 'Sonstige',
width: 1,
height: 2,
items: [
{
position: [0, 0],
height: 1,
classes: ['-compact'],
type: TYPES.WEATHER,
title: 'Wetter',
id: 'weather.openweathermap',
state: '&weather.openweathermap.state',
icon: '&weather.openweathermap.state',
icons: {
'sunny': 'sunny',
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rainy': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partlycloudy': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: {
summary: '&weather.openweathermap.state',
temperature: '&weather.openweathermap.attributes.temperature',
temperatureUnit: '°C',
humidity: '&weather.openweathermap.attributes.humidity',
humidityUnit: '%',
windSpeed: '&weather.openweathermap.attributes.wind_speed',
windSpeedUnit: 'km/h',
}
},
{
position: [0, 1],
type: TYPES.ALARM,
id: "alarm_control_panel.home_alarm",
title: 'Alarm',
icons: {
disarmed: 'mdi-bell-off',
pending: 'mdi-bell',
armed_away: 'mdi-bell',
armed_night: 'mdi-bell',
triggered: 'mdi-bell-ring'
},
states: {
disarmed: 'Ausgeschaltet',
pending: 'Wartet...',
armed_away: 'Aktiviert',
armed_night: 'Nachtmodus',
triggered: 'Ausgelöst'
}
}
]
}
]
}