Skip to content

Commit

Permalink
v0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@pmongloid
pmongloid committed Jun 11, 2022
1 parent ecb573b commit 44170fa
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 18 deletions.
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{
}
30 changes: 26 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Card for timer entities in the Lovelace user interface of Home Assistant
| Name | Type | Requirement | Description | Default |
| ----------- | ------- | ------------ | -------------------------------------------------------- | ------- |
| type | string | **Required** | `custom:flipdown-timer-card` | |
| entity | string | **Required** | Timer entity | |
| entity | string | **Required** | Timer, Input_datetime(with both date and time) entity | |
| duration | string | **Optional** | Timer duration indicated when idle. Should be 'hh:mm:ss' | |
| theme | string | **Optional** | Colorscheme `hass`, `dark`, `light` | `hass` |
| show_title | boolean | **Optional** | Show card title | `false` |
Expand All @@ -40,6 +40,10 @@ Set `show_hour` to `auto` to enable auto hours.
It toggles between HH:MM and MM:SS mode depend on remaining time.
HH:MM will be displayed when in idle state. To know what is being displayed, it is recommned to enable the headers.

### **Input_datetime(Or non-timer) entity**

If the input_datetime entities have both time and date, the timer will work toward it.

## Styles Object

<table>
Expand All @@ -53,7 +57,7 @@ HH:MM will be displayed when in idle state. To know what is being displayed, it
</thead>
<tbody>
<tr>
<td rowspan=2>rotor</td>
<td rowspan=3>rotor</td>
<td>width</td>
<td>single rotor width</td>
<td>50px</td>
Expand All @@ -64,16 +68,31 @@ HH:MM will be displayed when in idle state. To know what is being displayed, it
<td>80px</td>
</tr>
<tr>
<td rowspan=2>button</td>
<td>fontsize</td>
<td>font size on rotors</td>
<td>4rem</td>
</tr>
<tr>
<td rowspan=4>button</td>
<td>width</td>
<td>button width</td>
<td>50px</td>
</tr>
<tr>
<td>height</td>
<td>button height(only works when button position is below)</td>
<td>20px</td>
</tr>
<tr>
<td>location</td>
<td>button location(right, bottom, hide)</td>
<td>button location : right, bottom, hide</td>
<td>right</td>
</tr>
<tr>
<td>fontsize</td>
<td>font size on buttons</td>
<td>1em</td>
</tr>
</tbody>
</table>

Expand Down Expand Up @@ -103,8 +122,11 @@ styles:
rotor:
width: 60px
height: 80px
fontsize: 4rem
button:
width: 60px
height: 30px
fontsize: 1.5em
location: bottom
```
Expand Down
2 changes: 1 addition & 1 deletion src/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export class FlipdownTimerCardEditor extends LitElement implements LovelaceCardE
this._helpers.importMoreInfoControl('climate');

// You can restrict on domain type
const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'timer');
let entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'timer' || eid.substr(0, eid.indexOf('.')) === 'input_datetime');

return html`
<div class="card-config">
Expand Down
24 changes: 21 additions & 3 deletions src/flipdown-timer-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class FlipdownTimer extends LitElement {
// https://lit-element.polymer-project.org/guide/properties#accessors-custom
public setConfig(config: FlipdownTimerCardConfig): void {
// TODO Check for required fields and that they are of the proper format
if (!config || !config.entity) {
if (!config) {
throw new Error(localize('common.invalid_configuration'));
}

Expand Down Expand Up @@ -170,6 +170,21 @@ export class FlipdownTimer extends LitElement {
const timeRemaining = durationToSeconds(state.attributes.remaining);
this.fd.rt = timeRemaining;
this.fd._tick(true);
} else {
this.fd.button1.textContent = "X";
this.fd.button2.textContent = "X";

let timeRemaining = new Date(state.state).getTime() / 1000;
if (isNaN(timeRemaining) || timeRemaining < 1) {
this.fd.rt = 0;
this.fd.stop();
this.fd._tick(true);
} else {
this.fd._updator(timeRemaining);
this.fd.start();
fdComponent.push(this);
startInterval();
}
}
return true;
}
Expand Down Expand Up @@ -224,7 +239,10 @@ export class FlipdownTimer extends LitElement {
--rotor-width: ${(this.config.styles.rotor && this.config.styles.rotor.width) || '50px'};
--rotor-height: ${(this.config.styles.rotor && this.config.styles.rotor.height) || '80px'};
--rotor-space: ${(this.config.styles.rotor && this.config.styles.rotor.space) || '20px'};
${(this.config.styles.button && this.config.styles.button.width) && '--button-width: ' + this.config.styles.button.width }
--rotor-fontsize: ${(this.config.styles.rotor && this.config.styles.rotor.fontsize) || '4rem'};
--button-fontsize: ${(this.config.styles.button && this.config.styles.button.fontsize) || '1em'};
${(this.config.styles.button && this.config.styles.button.width) && '--button-width: ' + this.config.styles.button.width + ';'}
${(this.config.styles.button && this.config.styles.button.height) && '--button-height: ' + this.config.styles.button.height + ';' }
">
<div id="flipdown" class="flipdown"></div>
</div>
Expand Down Expand Up @@ -273,7 +291,7 @@ export class FlipdownTimer extends LitElement {
private _handleRotorClick(item: any, param: number, inc: boolean): boolean {
const state = this.hass.states[this.config.entity!].state;
if (state !== 'idle') return false;
const max = [5, 9, 5, 9, 5, 9];
const max = [9, 9, 5, 9, 5, 9];

const rotorTarget = item.offsetParent;

Expand Down
66 changes: 59 additions & 7 deletions src/flipdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export class FlipDown {
this.button2 = null;
// FlipDown version
this.version = "0.3.2";
this._sign = true;

// Initialised?
this.initialised = false;
Expand Down Expand Up @@ -416,12 +417,27 @@ export class FlipDown {
this.now = this._getTime();

// Between now and epoch
let diff = Math.floor(this.epoch - this.now <= 0 ? 0 : this.epoch - this.now);
//let diff = Math.floor(this.epoch - this.now <= 0 ? 0 : this.epoch - this.now);
let diff;

if (this.epoch - this.now >= 0) {
diff = Math.floor(this.epoch - this.now);
this._sign = true;
} else {
diff = 0;
this._sign = true;
/*
diff = Math.floor(this.now - this.epoch);
if (diff > 0) this._sign = false;
*/
}

if (this.rt != null) diff = this.rt;

// Days remaining
this.clockValues.d = Math.floor(diff / 86400);
diff -= this.clockValues.d * 86400;
//this.clockValues.d = Math.floor(diff / 86400);
//diff -= this.clockValues.d * 86400;
this.clockValues.d = 0;

// Hours remaining
this.clockValues.h = Math.floor(diff / 3600);
Expand Down Expand Up @@ -509,6 +525,12 @@ export class FlipDown {

function rotorBottomSet() {
this.rotorBottom.forEach((el, i) => {
el.textContent = this.clockValuesAsString[i];
});
}

function rotorTopSet() {
this.rotorTop.forEach((el, i) => {
el.textContent = this.prevClockValuesAsString[i];
});
}
Expand All @@ -525,10 +547,12 @@ export class FlipDown {
this.rotorLeafRear.forEach((el, i) => {
if (el.textContent != this.clockValuesAsString[i]) {
el.textContent = this.clockValuesAsString[i];
el.parentElement.classList.add("flipped");
let animationType = (this._sign)? "flipped":"flippedr"
el.parentElement.classList.add(animationType);
const flip = setInterval(
function () {
el.parentElement.classList.remove("flipped");
el.parentElement.classList.remove(animationType);
rotorRevPost.call(this);
clearInterval(flip);
}.bind(this),
500
Expand All @@ -537,13 +561,41 @@ export class FlipDown {
});
}

rotorTopFlip.call(this);
function rotorRev() {
this.rotorLeafFront.forEach((el, i) => {
el.classList.add("front-bottom");
});
this.rotorLeafRear.forEach((el, i) => {
el.classList.add("rear-bottom");
});
rotorBottomSet.call(this);
}

function rotorRevPost() {
this.rotorLeafFront.forEach((el, i) => {
el.classList.remove("front-bottom");
});
this.rotorLeafRear.forEach((el, i) => {
el.classList.remove("rear-bottom");
});
}

if (this._sign) {
rotorTopFlip.call(this);
} else {
rotorRev.call(this);
}
rotorLeafRearFlip.call(this);


// Init
if (!init) {
setTimeout(rotorLeafFrontSet.bind(this), 500);
setTimeout(rotorBottomSet.bind(this), 500);
if (this._sign) {
setTimeout(rotorBottomSet.bind(this), 500);
} else {
setTimeout(rotorTopSet.bind(this), 500);
}
} else {
rotorTopFlip.call(this);
rotorLeafRearFlip.call(this);
Expand Down
12 changes: 9 additions & 3 deletions src/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ export const styles = css`
height: var(--rotor-height, 80px);
margin: 0px 5px 0px 0px;
border-radius: 4px;
font-size: 4rem;
font-size: var(--rotor-fontsize);
text-align: center;
perspective: 200px;
}
Expand Down Expand Up @@ -238,7 +238,6 @@ export const styles = css`
height: var(--rotor-height, 80px);
margin: 0px 0px 0px 0px;
border-radius: 4px;
font-size: 4rem;
text-align: center;
}
Expand All @@ -254,6 +253,7 @@ export const styles = css`
border-radius: 4px;
border: 0px;
font-family: sans-serif;
font-size: var(--button-fontsize);
}
.flipdown .button-group.button-right .btn-bottom {
Expand All @@ -274,11 +274,12 @@ export const styles = css`
overflow: hidden;
width: var(--button-width, calc(var(--rotor-width, 50px) * 2 + 5px));
margin: 0px;
height: 20px;
height: var(--button-height, 20px);
padding: 0px;
border-radius: 4px;
border: 0px;
font-family: sans-serif;
font-size: var(--button-fontsize);
}
.flipdown .button-group.button-bottom .btn-bottom {
margin-left: var(--rotor-space, 20px);
Expand Down Expand Up @@ -328,6 +329,11 @@ export const styles = css`
transition: all 0.2s ease-in-out;
}
.flipdown .rotor-leaf.flippedr {
transform: rotateX(180deg);
transition: all 0.5s ease-in-out;
}
.flipdown .rotor-leaf.flippedfr {
transform: rotateX(180deg);
transition: all 0.2s ease-in-out;
Expand Down

0 comments on commit 44170fa

Please sign in to comment.