From 31786e66583c2936c4f0a28ed621cd051d00a3bc Mon Sep 17 00:00:00 2001 From: Florian Brinker Date: Sun, 20 Oct 2019 01:42:09 +0200 Subject: [PATCH] split tileboard pages, add custom css --- tileboard/config.js | 296 +++--------------------------------- tileboard/custom.css | 4 + tileboard/pages/cctv.js | 27 ++++ tileboard/pages/humidity.js | 237 +++++++++++++++++++++++++++++ tileboard/pages/misc.js | 24 +++ tileboard/pages/overview.js | 233 ++++++++++++++++++++++++++++ 6 files changed, 545 insertions(+), 276 deletions(-) create mode 100644 tileboard/custom.css create mode 100644 tileboard/pages/cctv.js create mode 100644 tileboard/pages/humidity.js create mode 100644 tileboard/pages/misc.js create mode 100644 tileboard/pages/overview.js diff --git a/tileboard/config.js b/tileboard/config.js index c258c03..9703622 100644 --- a/tileboard/config.js +++ b/tileboard/config.js @@ -1,4 +1,4 @@ -(function(url) { +function loadConfig(url) { var req = new XMLHttpRequest(); req.open('GET', url + '?cache=' + Math.random(), false); req.onreadystatechange = function(){ @@ -9,8 +9,18 @@ } }; 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 = { customTheme: [CUSTOM_THEMES.TRANSPARENT], transition: TRANSITIONS.ANIMATED_GPU, @@ -23,7 +33,7 @@ var CONFIG = { pingConnection: true, tileSize: 150, - tileMargin: 10, + tileMargin: 8, groupMarginCss: '20px 40px', events: [], @@ -47,8 +57,8 @@ var CONFIG = { // https://github.com/resoai/TileBoard/wiki/Screensaver-configuration /*screensaver: { - timeout: 300, // after 5 mins of inactive - slidesTimeout: 10, // 10s for one slide + timeout: 5, // after 5 mins of inactive + slidesTimeout: 3, // 10s for one slide styles: { fontSize: '40px' }, leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver 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: [ - -// 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: 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 - + PAGE_OVERVIEW, + //PAGE_HUMIDITY, + PAGE_CCTV, + PAGE_MISC, ], } diff --git a/tileboard/custom.css b/tileboard/custom.css new file mode 100644 index 0000000..bbf2f36 --- /dev/null +++ b/tileboard/custom.css @@ -0,0 +1,4 @@ +/* Hide alarm_home */ +.alarm-popup-button.-home { + display: none; +} \ No newline at end of file diff --git a/tileboard/pages/cctv.js b/tileboard/pages/cctv.js new file mode 100644 index 0000000..9b8c53c --- /dev/null +++ b/tileboard/pages/cctv.js @@ -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' + }, + } + ] + } + ] + } \ No newline at end of file diff --git a/tileboard/pages/humidity.js b/tileboard/pages/humidity.js new file mode 100644 index 0000000..1de4645 --- /dev/null +++ b/tileboard/pages/humidity.js @@ -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; + } + }, + ] + } + ] + } \ No newline at end of file diff --git a/tileboard/pages/misc.js b/tileboard/pages/misc.js new file mode 100644 index 0000000..c202a6c --- /dev/null +++ b/tileboard/pages/misc.js @@ -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() + } + }, + ] + } + ] + } \ No newline at end of file diff --git a/tileboard/pages/overview.js b/tileboard/pages/overview.js new file mode 100644 index 0000000..19373ee --- /dev/null +++ b/tileboard/pages/overview.js @@ -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' + } + } + ] + } + ] + } \ No newline at end of file