FHEM/ftui_components_flipclock
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

0.1

Browse Source
This commit is contained in:
Torte
2021-01-13 07:51:45 +01:00
parent e6eab868d0
commit c6e210f76a
2 changed files with 221 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
www/flipclock.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/ftui
*/
-->
<script src="ftui.js"></script>
<link href="ftui.css" rel="stylesheet">
<link href="themes/indigo-theme.css" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- avoid 300ms delay on click-->
<meta name="viewport" content="width=device-width">
<!-- when serving the page with other web servers, e.g. lighttpd -->
<!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="2">
<title>FTUI Demo</title>
</head>
<body>
<!-- <ftui-grid cols="30" rows="20" resize> -->
<ftui-grid base-width="70" base-height="70" margin="5">
<ftui-grid-tile row="1" col="1" height="10" width="1" shape="normal">
<ftui-column>
<ftui-tab view="View1" direction="vertical" active>
<ftui-icon name="home1"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="View2" direction="vertical">
<ftui-icon name="music"></ftui-icon>
<ftui-label>Music</ftui-label>
</ftui-tab>
<ftui-tab view="View3">
<ftui-icon name="feed"></ftui-icon>
</ftui-tab>
<ftui-tab view="View4">
<ftui-icon name="lightbulb"></ftui-icon>
</ftui-tab>
<ftui-tab view="View5">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
<ftui-tab view="View6">
<ftui-icon name="bath"></ftui-icon>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>
<ftui-tab-view id="View1">
<ftui-grid-tile row="2" col="4" height="2" width="4" shape="normal">
<ftui-clock format="eeee D.MM.YYYY" class="size-1"></ftui-clock>
<ftui-flipclock format="hhmmss" clocksize="tiny" [hidden]="Schalter | map('on:false, off:true')"></ftui-flipclock>
</ftui-grid-tile>
<ftui-grid-tile row="5" col="4" height="3" width="4" shape="round">
<ftui-flipclock format="hhmm" clocksize="small" clockbg="#123456" clockfontcolor="#abcdef"></ftui-flipclock>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View2">
<ftui-grid-tile row="1" col="2" height="5" width="19">
<div class="size-10">Tab2</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View3">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab3</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View4">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab4</div>
</ftui-grid-tile>
</ftui-tab-view>
<ftui-tab-view id="View5">
<ftui-grid-tile row="1" col="2" height="5" width="9">
<div class="size-10">Tab5</div>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>
</body>
</html>

161
www/ftui/components/flipclock/flipclock.component.js
View File

@@ -19,10 +19,8 @@ export class FtuiFlipClock extends FtuiElement {
super(Object.assign(FtuiFlipClock.properties, properties));
this.smten=0;
this.smone=0;
this.shten=0;
this.shone=0;
this.stime = [];
this.dots();
this.update();
this.startInterval();
this.setcolor(this.clockbg, this.clockfontcolor);
@@ -32,7 +30,7 @@ export class FtuiFlipClock extends FtuiElement {
template() {
return `<style> @import "components/flipclock/flipclock.component.css"; </style>
<div class="clock-container">
<ul class="clockfl go hourten">
<ul class="clockfl go one" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -54,7 +52,7 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<ul class="clockfl go hourone">
<ul class="clockfl go two" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -76,15 +74,12 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<span class="clock-divider ">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go ten">
<span class="clock-divider doth">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go three" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -106,7 +101,7 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<ul class="clockfl go min">
<ul class="clockfl go four" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -128,6 +123,56 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<span class="clock-divider dots">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go five" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
<li class="clock-active ten">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
</ul>
<ul class="clockfl go six" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
<li class="clock-active min">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
</ul>
</div>`;
}
@@ -153,57 +198,83 @@ export class FtuiFlipClock extends FtuiElement {
});
}
}
dots() {
var i = this.format.length;
if (i >= 3 && i <= 5 ) {
this.el = this.shadowRoot.querySelector('.dots');
this.el.setAttribute("style", "display: none;");
}
if (i <= 2){
this.el = this.shadowRoot.querySelector('.dots');
this.el.setAttribute("style", "display: none;");
this.el = this.shadowRoot.querySelector('.doth');
this.el.setAttribute("style", "display: none;");
}
}
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;
console.log( hten + " " + hone + ":" + mten + " " + mone + " smten: " );
if (this.smone != mone){
this.flip_card(".min", mone);
let time = [];
let i = [];
for( i = 0; i < dateFormat(this.getDateTime(), this.format).length; ++i) {
time[i] = dateFormat(this.getDateTime(), this.format)[i];
if (this.stime[i] != time[i]) {
this.flip_card (i, parseInt(time[i]) + 20);
}
}
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;
this.stime = time.slice();
}
// Setting Color
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.setAttribute("style", "--clock-flip-bg:" + bg + "; --clock-flip-font-color:" + fc + ";" );
this.el.className += " " + this.clocksize;
}
// Flip the card
flip_card(cl, digit){
switch (cl){
case 0:
cl = '.one';
break;
case 1:
cl = '.two';
break;
case 2:
cl = '.three';
break;
case 3:
cl = '.four';
break;
case 4:
cl = '.five';
break;
case 5:
cl = '.six';
break;
}
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");
}
// Replace the element to start the animation
replace (cl, aattr, battr){
this.el = this.shadowRoot.querySelector(cl);
this.newel = this.el.cloneNode(true);
//before
if (battr) {
if (cl.includes('.five') || cl.includes('.three')){if (battr === 20 ) {battr = 26; }} //workarround count 59
this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]);
}
//active
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.setAttribute("style", "display: '';");
this.el.parentNode.replaceChild(this.newel, this.el);
}
this.el.parentNode.replaceChild(this.newel, this.el);
}
getDateTime() {