-
Notifications
You must be signed in to change notification settings - Fork 0
/
thermometer-ui.js
96 lines (81 loc) · 2.46 KB
/
thermometer-ui.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// @ts-check
import { Thingy52Driver } from "./thingy52-driver.js";
const template = document.createElement('template');
template.innerHTML = `<style>
/* Thermometer column and text */
#thermometer{
margin:50% 0 0 50%;
left:-15px;
top:-100px;
width:22px;
height:150px;
display:block;
font:bold 14px/152px helvetica, arial, sans-serif;
text-indent: 20px;
background: linear-gradient(#fff 0%, #fff 50%, #d00 50%, #d00 100%);
border-radius:22px 22px 0 0;
border:5px solid #4a1c03;
border-bottom:none;
position:absolute;
box-shadow:inset 0 0 0 4px #fff;
color:#4a1c03;
}
/* Thermometer Bulb */
#thermometer:before{
content:' ';
width:44px;
height:44px;
display:block;
position:absolute;
top:142px;
left:-16px;
z-index:-1; /* Place the bulb under the column */
background:#d00;
border-radius:44px;
border:5px solid #4a1c03;
box-shadow:inset 0 0 0 4px #fff;
}
/* This piece here connects the column with the bulb */
#thermometer:after{
content:' ';
width:14px;
height:7px;
display:block;
position:absolute;
top:146px;
left:4px;
background:#d00;
}
#celsius {
position: absolute;
transform: translateY(0px);
}
</style>
<span id="thermometer"><span id="celsius">20°C</span></span>
`;
export class ThermometerUI extends HTMLElement {
#thermometer
#celsius
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
this._handleTemperature = this._handleTemperature.bind(this);
}
connectedCallback() {
this.#thermometer = this.shadowRoot.querySelector('#thermometer');
this.#celsius = this.shadowRoot.querySelector('#celsius');
Thingy52Driver.addEventListener('temperature-change', this._handleTemperature);
this._handleTemperature({detail:{celsius:0}});
}
disconnectedCallback() {
Thingy52Driver.removeEventListener('temperature-change', this._handleTemperature);
}
_handleTemperature({detail}) {
this.#celsius.innerHTML = `${detail.celsius.toFixed(1)}°C`;
this.#celsius.style.transform = `translateY(${-detail.celsius/2}px)`;
const perc = 50 - (detail.celsius * 0.32);
this.#thermometer.style.background = `linear-gradient(#fff 0%, #fff ${perc}%, #d00 ${perc}%, #d00 100%)`
}
}
customElements.define('thermometer-ui', ThermometerUI);