diff --git a/dwains-theme/configs/rooms.yaml b/dwains-theme/configs/rooms.yaml index 7da6fcf..ba31f91 100644 --- a/dwains-theme/configs/rooms.yaml +++ b/dwains-theme/configs/rooms.yaml @@ -4,6 +4,7 @@ rooms: light: group.woonkamer_lights temperature: sensor.temp_woonkamer humidity: sensor.temp_woonkamer_humidity + pressure: sensor.temp_woonkamer_pressure motion: binary_sensor.motion_woonkamer media_player: media_player.tv_woonkamer addons: @@ -62,6 +63,7 @@ rooms: light: group.slaapkamer_lights temperature: sensor.temp_slaapkamer humidity: sensor.temp_slaapkamer_humidity + pressure: sensor.temp_slaapkamer_pressure motion: binary_sensor.motion_slaapkamer window: binary_sensor.contact_slaapkamerraam cover: cover.slaapkamer @@ -72,6 +74,7 @@ rooms: light: light.kleine_kamer temperature: sensor.temp_kleine_kamer humidity: sensor.temp_kleine_kamer_humidity + pressure: sensor.temp_kleine_kamer_pressure addons: - name: Printer icon: fal:print @@ -91,11 +94,13 @@ rooms: light: light.logeerkamer temperature: sensor.temp_logeerkamer humidity: sensor.temp_logeerkamer_humidity + pressure: sensor.temp_logeerkamer_pressure - name: Badkamer icon: fal:bath temperature: sensor.temp_badkamer humidity: sensor.temp_badkamer_humidity + pressure: sensor.temp_badkamer_pressure - name: Garage icon: fal:warehouse @@ -104,6 +109,7 @@ rooms: humidity: sensor.temp_garage_humidity motion: binary_sensor.motion_garage door: binary_sensor.contact_garagedeur + #media_player: media_player.eetkamer - name: Hal icon: fal:key-skeleton diff --git a/dwains-theme/plugins/button-cards-templates/homepage/header/weather.yaml b/dwains-theme/plugins/button-cards-templates/homepage/header/weather.yaml index d2ba12f..ec2d093 100644 --- a/dwains-theme/plugins/button-cards-templates/homepage/header/weather.yaml +++ b/dwains-theme/plugins/button-cards-templates/homepage/header/weather.yaml @@ -27,9 +27,7 @@ header_weather: ]]] entity: {{ _d_t_config.global["weather"] }} tap_action: - !include - - ../../../../views/popups/weather.yaml - - entity: {{ _d_t_config.global["weather"] }} + action: more-info state: - value: clear-night icon: mdi:weather-night diff --git a/dwains-theme/plugins/button-cards-templates/rooms/room/climate/info.yaml b/dwains-theme/plugins/button-cards-templates/rooms/room/climate/info.yaml new file mode 100644 index 0000000..90101cb --- /dev/null +++ b/dwains-theme/plugins/button-cards-templates/rooms/room/climate/info.yaml @@ -0,0 +1,42 @@ +room_climate_info: + show_name: true + show_icon: true + show_state: true + show_label: false + show_last_changed: true + color: 'auto' + styles: + grid: + - grid-template-areas: '"i n""i s""i l"' + - grid-template-columns: 30% 70% + - grid-template-rows: min-content + card: + - background-color: var(--dwains-theme-primary) + - border-radius: 5px + - margin-bottom: 0px + - padding-top: 14px + - padding-bottom: 14px + icon: + - width: 55% + img_cell: + - width: 45px + - height: 45px + - border-radius: 100% + name: + - color: var(--dwains-theme-names) + - justify-self: start + - font-size: 15px + - align-self: center + state: + - justify-self: start + - align-self: left + - font-size: 13px + - color: var(--dwains-theme-grey) + label: + - justify-self: start + - align-self: left + - font-size: 12px + - color: var(--dwains-theme-grey) + double_tap_action: + action: toggle + haptic: light \ No newline at end of file diff --git a/dwains-theme/views/main/01.homepage.yaml b/dwains-theme/views/main/01.homepage.yaml index 6352bc2..f42a476 100644 --- a/dwains-theme/views/main/01.homepage.yaml +++ b/dwains-theme/views/main/01.homepage.yaml @@ -126,6 +126,7 @@ } card: type: custom:swipe-card + card_width: '62px' cards: {% if _d_t_config.persons %} {% for person in _d_t_config.persons %} diff --git a/dwains-theme/views/main/more_page/settings.yaml b/dwains-theme/views/main/more_page/settings.yaml index a0e176e..71d674c 100644 --- a/dwains-theme/views/main/more_page/settings.yaml +++ b/dwains-theme/views/main/more_page/settings.yaml @@ -25,10 +25,6 @@ padding: true items_classes: 'col-xs-12 col-sm-6 col-md-3 col-lg-3' cards: - #heading - - !include - - ../../partials/heading.yaml - - title: Dwains Theme - type: custom:button-card template: more_page_list-item entity: sensor.dwains_theme_version @@ -59,6 +55,10 @@ } } ]]] + #heading + - !include + - ../../partials/heading.yaml + - title: "{{ _d_t_trans.more_page.settings.title }}" - type: entities style: | ha-card { @@ -76,6 +76,9 @@ tap_action: action: call-service service: dwains_theme.reload + - !include + - ../../partials/heading.yaml + - title: Dwains Theme - type: custom:button-card template: more_page_list-item name: {{ _d_t_trans.more_page.settings.theme_docs }} diff --git a/dwains-theme/views/main/rooms/room/climate.yaml b/dwains-theme/views/main/rooms/room/climate.yaml index fbff897..5f3feaa 100644 --- a/dwains-theme/views/main/rooms/room/climate.yaml +++ b/dwains-theme/views/main/rooms/room/climate.yaml @@ -134,16 +134,24 @@ - color: var(--dwains-theme-names) {% endfor %} {% elif room["temperature"] %} - - type: markdown - style: | - ha-card { - box-shadow: none; - background: none; - font-size: 50px; - text-align: center; - } - content: > - {% raw %}{{ states('{% endraw %}{{ room["temperature"] }}{% raw %}') }}{% endraw %} °C + - type: custom:dwains-flexbox-card + cards: + - type: custom:button-card + item_classes: 'col-xs-12' + template: room_climate_info + entity: {{ room["temperature"] }} + {% if room["humidity"] %} + - type: custom:button-card + item_classes: 'col-xs-6' + template: room_climate_info + entity: {{ room["humidity"] }} + {% endif %} + {% if room["pressure"] %} + - type: custom:button-card + item_classes: 'col-xs-6' + template: room_climate_info + entity: {{ room["pressure"] }} + {% endif %} {% endif %} #Start of graphs @@ -174,6 +182,11 @@ show_indicator: true name: {{ _d_t_trans.climate.humidity }} {% endif %} + {% if room["pressure"] %} + - entity: {{ room["pressure"] }} + show_state: true + show_indicator: true + {% endif %} graph: line show: icon: false diff --git a/www/dwains-theme/plugins/dwains-swipe-card/dwains-swipe-card.js b/www/dwains-theme/plugins/dwains-swipe-card/dwains-swipe-card.js new file mode 100644 index 0000000..b038fa4 --- /dev/null +++ b/www/dwains-theme/plugins/dwains-swipe-card/dwains-swipe-card.js @@ -0,0 +1,204 @@ +import { + LitElement, + html, + css + } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module"; + +const VERSION = '0.0.1'; + +class DwainsSwipeCard extends LitElement { + static get properties() { + return { + _config: {}, + _cards: {}, + _hass: {} + }; + } + + async setConfig(config) { + if (!config + && ((!config.cards && !Array.isArray(config.cards)) + || (!config.entities || !Array.isArray(config.entities)) ) + ) { + throw new Error('Card config incorrect'); + } + this._config = config; + this._refCards = []; + + if (window.loadCardHelpers) { + this.helpers = await window.loadCardHelpers(); + } + + this.renderCard(); + + this._transform = null; + } + + renderCard() { + const config = this._config; + if(config.entities){ + const promises = config.entities.map(config => this.createCardElement(config)); + Promise.all(promises).then((cards) => { + this._refCards = cards; + //Removed some code here + }) + } else { + const promises = config.cards.map(config => this.createCardElement(config)); + Promise.all(promises).then((cards) => { + this._refCards = cards; + //Removed some code here + }) + } + } + + async createCardElement(cardConfig) { + const createError = (error, config) => { + return createThing('hui-error-card', { + type: 'error', + error, + config, + }); + }; + + const createThing = (tag, config) => { + if (this.helpers) { + return this.helpers.createCardElement(config); + } + + const element = document.createElement(tag); + + try { + element.setConfig(config); + } catch (err) { + console.error(tag, err); + return createError(err.message, config); + } + return element; + }; + + let tag = cardConfig.type; + if (tag.startsWith('divider')) { + tag = `hui-divider-row`; + } else if (tag.startsWith('custom:')) { + tag = tag.substr('custom:'.length); + } else { + tag = `hui-${tag}-card`; + } + + const element = createThing(tag, cardConfig); + + if(cardConfig.item_classes){ + //console.log(cardConfig.grid); + element.className = "item " + cardConfig.item_classes; + } else { + if(this._config.items_classes){ + element.className = "item " + this._config.items_classes; + } else { + element.className = "item"; + } + } + + element.hass = this._hass; + element.addEventListener( + 'll-rebuild', + ev => { + ev.stopPropagation(); + this.createCardElement(cardConfig).then(() => { + this.renderCard(); + }); + }, + { once: true }, + ); + return element; + } + + set hass(hass) { + this._hass = hass + if (this._refCards) { + this._refCards.forEach((card) => { + card.hass = hass; + }); + } + } + + firstUpdated(){ + this.addEventListener('mousedown', this.mouseDown, false); + this.addEventListener('touchestart', this.mouseDown, false); + + this.addEventListener('mouseup', this.mouseUp, false); + this.addEventListener('toucheend', this.mouseUp, false); + } + + updateDivPosition (event) { + //var divRect = div.getBoundingClientRect() + //var startX = seekbar.getBoundingClientRect().left + var mouseX = event.clientX + //div.style.transform = 'translateX(' + (mouseX - startX) + 'px)' + this._transform = mouseX; + console.log(mouseX); + //div.style.left = mouseX - startX + 'px'; + } + + mouseUp() { + console.log('mouseup') + window.removeEventListener('mousemove', this.updateDivPosition, true); + } + + mouseDown() { + console.log('mousedown'); + window.addEventListener('mousemove', this.updateDivPosition, true); + } + + render() { + if (!this._config || !this._hass || !this._refCards) { + return html``; + } + + return html` +
+
+ ${this._refCards} +
+
+ `; + } + + static get styles() { + return [ + css` + .glider { + background: red; + } + .glider { + margin: 0 auto; + position: relative; + overflow-x: hidden; + overflow-y: hidden; + } + .glider-track { + width: 100%; + margin: 0; + padding: 0; + display: flex; + z-index: 1; + } + .item { + pointer-events: none; + } + ` + ]; + } + + getCardSize() { + return 3; + } +} + +if(!customElements.get("dwains-swipe-card")) { + customElements.define("dwains-swipe-card", DwainsSwipeCard); + console.info( + `%c DWAINS-SWIPE-CARD \n%c Version ${VERSION} `, + 'color: #2fbae5; font-weight: bold; background: black', + 'color: white; font-weight: bold; background: dimgray', + ); +}