From 5a95601bd39e827eac834fe77b1ee146b6598382 Mon Sep 17 00:00:00 2001 From: Torte Date: Thu, 7 Jan 2021 07:47:59 +0100 Subject: [PATCH] first publish something to do --- .../flipclock/flipclock.component.css | 422 ++++++++++++++++++ .../flipclock/flipclock.component.js | 234 ++++++++++ www/ftui/index_torte.html | 170 +++++++ 3 files changed, 826 insertions(+) create mode 100644 www/ftui/components/flipclock/flipclock.component.css create mode 100644 www/ftui/components/flipclock/flipclock.component.js create mode 100644 www/ftui/index_torte.html diff --git a/www/ftui/components/flipclock/flipclock.component.css b/www/ftui/components/flipclock/flipclock.component.css new file mode 100644 index 0000000..600b873 --- /dev/null +++ b/www/ftui/components/flipclock/flipclock.component.css @@ -0,0 +1,422 @@ +/* Get the bourbon mixin from http://bourbon.io */ +/* Reset */ +:root { + --clock-flip-bg: #121212; + --clock-flip-font-color: #000; +} +.tiny { + zoom: 0.5; + -moz-transform: scale(0.5); +} +.small { + zoom: 0.8; + -moz-transform: scale(0.8); +} + +.clock-container ul { + list-style: none; + padding: 0em 0;} + +.clock-container.clearfix:after { + clear: both; } + +.clock-container.clearfix { + *zoom: 1; } + +/* Main */ +.clock-container { + font: normal 11px "Helvetica Neue", Helvetica, sans-serif; + -webkit-user-select: none; } + +.clock-container { + text-align: center; + position: relative; + width: 100%; + margin: 1em; +} + +.clock-container:before, +.clock-container:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clock-container ul { + position: relative; + float: left; + margin: 5px; + width: 60px; + height: 90px; + font-size: 80px; + font-weight: bold; + line-height: 87px; + border-radius: 6px; + background: #000; +} + +.clock-container ul li { + z-index: 1; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + line-height: 87px; + text-decoration: none !important; + padding: 0em 0; +} + +.clock-container ul li:first-child { + z-index: 2; } + +.clock-container ul li a { + display: block; + height: 100%; + -webkit-perspective: 200px; + -moz-perspective: 200px; + perspective: 200px; + margin: 0 !important; + overflow: visible !important; + cursor: default !important; } + +.clock-container ul li a div { + z-index: 1; + position: absolute; + left: 0; + width: 100%; +/* height: 50%;*/ + font-size: 80px; + overflow: hidden; + outline: 1px solid transparent; } + +.clock-container ul li a div .shadow { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; } + +.clock-container ul li a div.up { + -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; + -ms-transform-origin: 50% 100%; + -o-transform-origin: 50% 100%; + transform-origin: 50% 100%; + background-color: var(--clock-flip-bg); + color: var(--clock-flip-font-color); + top: 0; + height: 50%; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +.clock-container ul li a div.up:after { + content: attr(data-num); + position: absolute; + top: 1px !important ;/*44px;*/ + left: 0; + z-index: 5; + width: 100%; + height: 3px; + background-color: var(--clock-flip-bg); + font-size: 70px; + text-shadow: 0 1px 2px #000 +/* background-color: rgba(0, 0, 0, 0.4);*/ +} + +.clock-container ul li a div.down { + -webkit-transform-origin: 50% 0; + -moz-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + -o-transform-origin: 50% 0; + transform-origin: 50% 0; + bottom: 0; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + height: calc(50% - 1px); +} + +.clock-container ul li a div.down:after { + position: absolute; + content: attr(data-num); + left: 0; + z-index: 1; + width: 100%; + height: 200%; + color: var(--clock-flip-font-color); + text-shadow: 0 1px 2px #000; + text-align: center; + background-color: var(--clock-flip-bg) ; + border-radius: 6px; + font-size: 70px; } + +.clock-container ul li a div.up:after { + top: 0; } + +.clock-container ul li a div.down:after { + bottom: 0; } + +/* PLAY */ +.clock-container ul.go li.clock-before { + z-index: 3; } + +.clock-container .clockfl { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); } + +.clock-container ul.go li.clock-active { + -webkit-animation: asd 0.5s 0.5s linear both; + -moz-animation: asd 0.5s 0.5s linear both; + animation: asd 0.5s 0.5s linear both; + z-index: 5; } + +.clock-divider { + float: left; + display: inline-block; + position: relative; + width: 20px; + height: 100px; } + +.-clock-divider:first-child { + width: 0; } + +.clock-dot { + display: block; + background: var(--clock-flip-bg); + width: 10px; + height: 10px; + position: absolute; + border-radius: 50%; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + left: 5px; } + +.clock-divider .flip-clock-label { + position: absolute; + top: -1.5em; + right: -86px; + color: black; + text-shadow: none; } + +.clock-divider.minutes .clock-label { + right: -88px; } + +.clock-divider.seconds .clock-label { + right: -91px; } + +.clock-dot.top { + top: 30px; } + +.clock-dot.bottom { + bottom: 30px; } + +@-webkit-keyframes asd { + 0% { + z-index: 2; } + + 20% { + z-index: 4; } + + 100% { + z-index: 4; } } + +@-moz-keyframes asd { + 0% { + z-index: 2; } + + 20% { + z-index: 4; } + + 100% { + z-index: 4; } } + +@-o-keyframes asd { + 0% { + z-index: 2; } + + 20% { + z-index: 4; } + + 100% { + z-index: 4; } } + +@keyframes asd { + 0% { + z-index: 2; } + + 20% { + z-index: 4; } + + 100% { + z-index: 4; } } + +.clock-container ul.go li.clock-active .down { + z-index: 2; + -webkit-animation: turn 0.5s 0.5s linear both; + -moz-animation: turn 0.5s 0.5s linear both; + animation: turn 0.5s 0.5s linear both; + } + +@-webkit-keyframes turn { + 0% { + -webkit-transform: rotateX(90deg); } + + 100% { + -webkit-transform: rotateX(0deg); } } + +@-moz-keyframes turn { + 0% { + -moz-transform: rotateX(90deg); } + + 100% { + -moz-transform: rotateX(0deg); } } + +@-o-keyframes turn { + 0% { + -o-transform: rotateX(90deg); } + + 100% { + -o-transform: rotateX(0deg); } } + +@keyframes turn { + 0% { + transform: rotateX(90deg); } + + 100% { + transform: rotateX(0deg); } } + +.clock-container ul.go li.clock-before .up { + z-index: 2; + -webkit-animation: turn2 0.5s linear both; + -moz-animation: turn2 0.5s linear both; + animation: turn2 0.5s linear both; + } + +@-webkit-keyframes turn2 { + 0% { + -webkit-transform: rotateX(0deg); } + + 100% { + -webkit-transform: rotateX(-90deg); } } + +@-moz-keyframes turn2 { + 0% { + -moz-transform: rotateX(0deg); } + + 100% { + -moz-transform: rotateX(-90deg); } } + +@-o-keyframes turn2 { + 0% { + -o-transform: rotateX(0deg); } + + 100% { + -o-transform: rotateX(-90deg); } } + +@keyframes turn2 { + 0% { + transform: rotateX(0deg); } + + 100% { + transform: rotateX(-90deg); } } + +.clock-container ul li.clock-active { + z-index: 3; } + +/* SHADOW */ +.clock-container ul.go li.clock-before .up .shadow { + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); + background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; + -webkit-animation: show 0.5s linear both; + -moz-animation: show 0.5s linear both; + animation: show 0.5s linear both; } + +.clock-container ul.go li.clock-active .up .shadow { + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); + background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); + background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; + -webkit-animation: hide 0.5s 0.3s linear both; + -moz-animation: hide 0.5s 0.3s linear both; + animation: hide 0.5s 0.3s linear both; } + +DOWN +.clock-container ul.go li.clock-before .down .shadow { + background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); + background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; + background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; + -webkit-animation: show 0.5s linear both; + -moz-animation: show 0.5s linear both; + animation: show 0.5s linear both; } + +.clock-container ul.go li.clock-active .down .shadow { + background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); + background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; + background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); + background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; + -webkit-animation: hide 0.5s 0.3s linear both; + -moz-animation: hide 0.5s 0.3s linear both; + animation: hide 0.5s 0.2s linear both; } + +@-webkit-keyframes show { + 0% { + opacity: 0; } + + 100% { + opacity: 1; } } + +@-moz-keyframes show { + 0% { + opacity: 0; } + + 100% { + opacity: 1; } } + +@-o-keyframes show { + 0% { + opacity: 0; } + + 100% { + opacity: 1; } } + +@keyframes show { + 0% { + opacity: 0; } + + 100% { + opacity: 1; } } + +@-webkit-keyframes hide { + 0% { + opacity: 1; } + + 100% { + opacity: 0; } } + +@-moz-keyframes hide { + 0% { + opacity: 1; } + + 100% { + opacity: 0; } } + +@-o-keyframes hide { + 0% { + opacity: 1; } + + 100% { + opacity: 0; } } + +@keyframes hide { + 0% { + opacity: 1; } + + 100% { + opacity: 0; } } diff --git a/www/ftui/components/flipclock/flipclock.component.js b/www/ftui/components/flipclock/flipclock.component.js new file mode 100644 index 0000000..c43e961 --- /dev/null +++ b/www/ftui/components/flipclock/flipclock.component.js @@ -0,0 +1,234 @@ +/* +* Clock component for FTUI version 3 +* +* Copyright (c) 2020 Mario Stephan +* Under MIT License (http://www.opensource.org/licenses/mit-license.php) +* +* https://github.com/knowthelist/ftui +*/ + +import { FtuiElement } from '../element.component.js'; +import { fhemService } from '../../modules/ftui/fhem.service.js'; +import { dateFormat } from '../../modules/ftui/ftui.helper.js'; + +export class FtuiFlipClock extends FtuiElement { + + constructor(properties) { + + super(Object.assign(FtuiFlipClock.properties, properties)); + + this.smten=0; + this.smone=0; + this.shten=0; + this.shone=0; + this.update(); + this.startInterval(); + this.setcolor(this.clockbg, this.clockfontcolor); + this.getFhemTime(); + } + + template() { + return ` +
+ + + + + + + + + + + + +
`; + } + + static get properties() { + return { + format: 'hh:mm:ss', + serverDiff: 0, + offset: 0, + isFhemTime: false, + clockbg: '#333', + clockfontcolor: '#cccccc', + clocksize: 'normal' + } + } + + getFhemTime() { + if (this.isFhemTime) { + fhemService.sendCommand('{localtime}', '1') + .then(res => res.text()) + .then((result) => { + const fhemTime = new Date(result); + this.serverDiff = Date.now() - fhemTime.getTime(); + }); + } + } + + + update() { + var mone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[3]) + 20; + var mten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[2]) + 20; + var hone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[1]) + 20; + var hten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[0]) + 20; + // this.beforeup = this.shadowRoot.querySelector('.up'); + // this.beforedown = this.shadowRoot.querySelector('.down'); + // this.activeup = this.shadowRoot.querySelector('li.clock-active a div.up'); + // this.activedown = this.shadowRoot.querySelector('li.clock-active .down'); + console.log(this.clocksize + hten + " " + hone + ":" + mten + " " + mone + " smten: " + this.smten ); + if (this.smone != mone){ + this.flip_card(".min", mone); + } + if (this.smten != mten) { + this.flip_card(".ten", mten); + } + if (this.shone != hone) { + this.flip_card(".hourone", hone); + } + if (this.shten != hten) { + this.flip_card(".hourten", hten); + } + this.smone = mone; + this.smten = mten; + this.shone = hone; + this.shten = hten; + } + setcolor (bg, fc){ + this.el = this.shadowRoot.querySelector('.clock-container'); + this.el.setAttribute("style", "--clock-flip-bg:" + bg + "; --clock-flip-font-color:" + fc + ";"); + this.el.className += " " + this.clocksize; + } + + flip_card(cl, digit){ + this.replace (cl + " .down",null, digit); + this.replace (cl + " .up",null, digit); + this.replace (cl + " li.clock-active a div.up", digit); + this.replace (cl + " li.clock-active .down", digit); + this.replace(cl + " .clock-active"); + } + // flip_minten(digit){ + // this.replace ('.ten .down',null, digit); + // this.replace ('.ten .up',null, digit); + // this.replace ('.ten li.clock-active a div.up', digit); + // this.replace ('.ten li.clock-active .down', digit); + // this.replace('.ten .clock-active'); + // } + + replace (cl, aattr, battr){ + this.el = this.shadowRoot.querySelector(cl); + this.newel = this.el.cloneNode(true); + if (aattr) { + this.newel.setAttribute("data-num", (parseInt(aattr).toString()[1])); + } + if (battr) { + this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]); + } + this.el.parentNode.replaceChild(this.newel, this.el); + } + + + getDateTime() { + return new Date(Date.now() - Number(this.serverDiff) + 3600000 * Number(this.offset)); + } + + startInterval() { + const now = this.getDateTime(); + const s = now.getSeconds(); + const ms = now.getMilliseconds(); + const waitMs = this.format.includes('s') ? 1000 - ms * 1 : 60000 - s * 1000 - ms * 1; + setTimeout(() => { + this.update(); + this.startInterval(); + }, waitMs); + } + +} + +window.customElements.define('ftui-flipclock', FtuiFlipClock); diff --git a/www/ftui/index_torte.html b/www/ftui/index_torte.html new file mode 100644 index 0000000..dc51971 --- /dev/null +++ b/www/ftui/index_torte.html @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + FTUI Demo + + + + + + + + + + + + Home + + + + Music + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Humidity + + % + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tab2
+ + + + + +
Tab3
+ + + + + +
Tab4
+ + + + + +
Tab5
+ + + + + + +