mirror of
https://github.com/xiaoshi930/xiaoshi-pad-card.git
synced 2026-02-12 06:33:49 +00:00
Compare commits
152 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
16e8cb8493 | ||
|
|
d0c11c3f08 | ||
|
|
1908ec0fae | ||
|
|
98ec3bfd5e | ||
|
|
57d4627fa0 | ||
|
|
e12f60b284 | ||
|
|
b12c5c633a | ||
|
|
49e3ce2b0d | ||
|
|
366d9625bb | ||
|
|
db7c3c7b34 | ||
|
|
2f8c0c2beb | ||
|
|
4cd1f4c320 | ||
|
|
c42339343d | ||
|
|
5c95ac49a5 | ||
|
|
844b44c46a | ||
|
|
c2d18c7643 | ||
|
|
972909bb44 | ||
|
|
3a30464a45 | ||
|
|
d409ce2ea2 | ||
|
|
292ed95f04 | ||
|
|
870780c612 | ||
|
|
6af60fa9de | ||
|
|
6e1c745a47 | ||
|
|
e4e2a218c1 | ||
|
|
2aeca95db9 | ||
|
|
bf6c7d9a1a | ||
|
|
b5dfe6ac0a | ||
|
|
e4c9bcfe32 | ||
|
|
c30a918614 | ||
|
|
e15cdfccaa | ||
|
|
c0f45717d4 | ||
|
|
d57f69d4b9 | ||
|
|
1ba54782c0 | ||
|
|
240ce4e4ef | ||
|
|
9d0fbaead4 | ||
|
|
b357b69fa5 | ||
|
|
0d61619f8d | ||
|
|
953e414a61 | ||
|
|
8974f122b6 | ||
|
|
6060663a24 | ||
|
|
22e7325a06 | ||
|
|
67f13a23ca | ||
|
|
56e85c834f | ||
|
|
367a47d33b | ||
|
|
6501aeead7 | ||
|
|
c93735be82 | ||
|
|
740bac1c63 | ||
|
|
85d413baa1 | ||
|
|
128d24328b | ||
|
|
de64a44599 | ||
|
|
cf3e37da9e | ||
|
|
cfc9618e87 | ||
|
|
fe22c85d3b | ||
|
|
13bcd1a702 | ||
|
|
1fb2f8dcb7 | ||
|
|
6abbc0e917 | ||
|
|
a0d123a998 | ||
|
|
8014a664b4 | ||
|
|
ed3c9b5896 | ||
|
|
b2eccc66cf | ||
|
|
08242a4758 | ||
|
|
513a906231 | ||
|
|
bcc4585278 | ||
|
|
b5598387a1 | ||
|
|
fbdece70f9 | ||
|
|
85c7123854 | ||
|
|
daae901d1b | ||
|
|
b221bacb78 | ||
|
|
7b7f0c632d | ||
|
|
1523dc76d3 | ||
|
|
20eae200c1 | ||
|
|
763b1cc977 | ||
|
|
3c54c6315e | ||
|
|
74c53128c8 | ||
|
|
9973d7b614 | ||
|
|
a4d4fba8a1 | ||
|
|
27d567803b | ||
|
|
b2bd56026c | ||
|
|
00b7fe4842 | ||
|
|
8f96c49931 | ||
|
|
2087327b69 | ||
|
|
7f415eba9a | ||
|
|
4b7da24066 | ||
|
|
721b6a4ba2 | ||
|
|
b615d3dd7a | ||
|
|
6f58598f54 | ||
|
|
f71e51029c | ||
|
|
48f0c23456 | ||
|
|
910365f8b8 | ||
|
|
81b40138f5 | ||
|
|
4783085a99 | ||
|
|
737b174953 | ||
|
|
d49426da73 | ||
|
|
3bf33ef0cb | ||
|
|
2c3c3fd42d | ||
|
|
4fe21a2c74 | ||
|
|
3900897f15 | ||
|
|
2170f5423c | ||
|
|
82e71cf38d | ||
|
|
c79052b1e1 | ||
|
|
5ef261877c | ||
|
|
da16f27cf2 | ||
|
|
df6a678043 | ||
|
|
82930f4e41 | ||
|
|
4a2ffb628d | ||
|
|
3d5f6028c2 | ||
|
|
765b0a1367 | ||
|
|
df66608d7f | ||
|
|
6ed3bca2cc | ||
|
|
f1d0b52bd7 | ||
|
|
528eaf1cd1 | ||
|
|
59268a91f8 | ||
|
|
f768186379 | ||
|
|
2371475eca | ||
|
|
befca5ece5 | ||
|
|
24848db29b | ||
|
|
be232dc056 | ||
|
|
96fb548262 | ||
|
|
16831e5102 | ||
|
|
b05f7de548 | ||
|
|
d8d4389549 | ||
|
|
bca500c945 | ||
|
|
5f36835adb | ||
|
|
05d083c259 | ||
|
|
3738b0b092 | ||
|
|
87e9e68b79 | ||
|
|
7ddd378b9a | ||
|
|
23b6e5b8a3 | ||
|
|
4067518d0d | ||
|
|
53e06aacf7 | ||
|
|
9a59c2bb90 | ||
|
|
0ae5851361 | ||
|
|
a17033c0f0 | ||
|
|
44a1d81265 | ||
|
|
2de0668d37 | ||
|
|
a03a54663b | ||
|
|
6efa2864cc | ||
|
|
f4a37ff29c | ||
|
|
1c5717f5d5 | ||
|
|
15fcbf0250 | ||
|
|
de31cf6464 | ||
|
|
9f6a31f1df | ||
|
|
f1535f81e4 | ||
|
|
c30552dfca | ||
|
|
deb3c38e87 | ||
|
|
c3c7d4a165 | ||
|
|
35a1a2e6a8 | ||
|
|
fe55af23e4 | ||
|
|
e1c926be4b | ||
|
|
3a39798dfc | ||
|
|
68129eeca8 | ||
|
|
64e56a81ba |
18
README.md
18
README.md
@@ -1,7 +1,7 @@
|
||||
# 消逝卡(平板端)
|
||||
## 配置资源文件
|
||||
~~~
|
||||
- url: /hacsfiles/xiaoshi-pad-card/xiaoshi-card.js
|
||||
- url: /hacsfiles/xiaoshi-pad-card/xiaoshi-pad-card.js
|
||||
type: module
|
||||
~~~
|
||||
|
||||
@@ -24,18 +24,4 @@ max: 80 # 当前地区最大值
|
||||
mode: 湿度 # 【温度】或者【湿度】
|
||||
~~~
|
||||
|
||||
## 功能2:进度条
|
||||
**引用示例**
|
||||
~~~
|
||||
type: custom:xiaoshi-pad-slider-card
|
||||
entity: number.xxxxxxx
|
||||
style:
|
||||
slider-width: 110px # 总宽度,默认100px
|
||||
slider-height: 10px # 总高度,默认30px
|
||||
track-color: rgba(200,200,200,0.5) # 背景色,默认rgba(255,255,255,0.3)
|
||||
thumb-size: 15px # 进度点大小,默认15px
|
||||
thumb-color: rgb(255,255,255) # 进度点颜色,默认,白色
|
||||
slider-color: rgb(25,155,125) # 进度条背景色,默认,浅蓝色
|
||||
track-height: 20px # 进度条高度,默认5px
|
||||
track-radius: 4px # 圆角大小,默认2px
|
||||
~~~
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.0.0 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
|
||||
console.info("%c 消逝卡-平板端 \n%c v 1.0.4 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
|
||||
|
||||
const loadCards = async () => {
|
||||
await import('./xiaoshi-pad-grid-card.js');
|
||||
await import('./xiaoshi-pad-slider-card.js');
|
||||
const loadCards = () => {
|
||||
import('./xiaoshi-pad-climate-card.js');
|
||||
import('./xiaoshi-pad-grid-card.js');
|
||||
|
||||
window.customCards = window.customCards || [];
|
||||
window.customCards.push(...cardConfigs);
|
||||
@@ -15,10 +15,11 @@ const cardConfigs = [
|
||||
description: '温度分布、湿度分布'
|
||||
},
|
||||
{
|
||||
type: 'xiaoshi-pad-slider-card',
|
||||
name: '消逝卡(平板端)-进度条',
|
||||
description: '进度条'
|
||||
type: 'xiaoshi-pad-climate-card',
|
||||
name: '消逝卡(平板端)-空调/水暖毯/热水器卡',
|
||||
description: '平板端空调/水暖毯/热水器卡',
|
||||
preview: true
|
||||
}
|
||||
];
|
||||
|
||||
loadCards();
|
||||
loadCards();
|
||||
|
||||
2420
xiaoshi-pad-climate-card.js
Normal file
2420
xiaoshi-pad-climate-card.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
|
||||
|
||||
export class XiaoshiPadGridCard extends LitElement {
|
||||
class XiaoshiPadGridCard extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
|
||||
|
||||
export class XiaoshiPadSliderCard extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
config: Object,
|
||||
_value: Number,
|
||||
_min: Number,
|
||||
_max: Number,
|
||||
_dragging: Boolean
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.slider-root {
|
||||
position: relative;
|
||||
width: var(--slider-width, 100%);
|
||||
height: var(--slider-height, 30px);
|
||||
touch-action: none;
|
||||
}
|
||||
.slider-track {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
height: var(--track-height, 5px);
|
||||
background: var(--track-color, rgba(255,255,255,0.3));
|
||||
border-radius: var(--track-radius, 2px);
|
||||
}
|
||||
.slider-fill {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--slider-color, #f00);
|
||||
border-radius: inherit;
|
||||
}
|
||||
.slider-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: var(--thumb-size, 15px);
|
||||
height: var(--thumb-size, 15px);
|
||||
background: var(--thumb-color, #fff);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._value = 0;
|
||||
this._min = 0;
|
||||
this._max = 100;
|
||||
this._dragging = false;
|
||||
this._startX = 0;
|
||||
this._startValue = 0;
|
||||
this._moveHandler = (e) => this._handleDrag(e);
|
||||
this._endHandler = () => this._endDrag();
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!config.entity) throw new Error('必须指定实体');
|
||||
this.config = config;
|
||||
if (config.style) {
|
||||
Object.keys(config.style).forEach(key => {
|
||||
this.style.setProperty(`--${key}`, config.style[key]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (changedProperties.has('hass')) {
|
||||
const state = this.hass.states[this.config.entity];
|
||||
if (state) {
|
||||
this._value = Number(state.state);
|
||||
this._min = Number(state.attributes.min || 0);
|
||||
this._max = Number(state.attributes.max || 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const percent = Math.max(0, Math.min(100, (this._value - this._min) / (this._max - this._min) * 100));
|
||||
return html`
|
||||
<div class="slider-root"\n
|
||||
@mousedown=${this._startDrag}\n
|
||||
@touchstart=${this._startDrag}>
|
||||
<div class="slider-track">
|
||||
<div class="slider-fill"\nstyle="width: ${percent}%"></div>
|
||||
<div class="slider-thumb"\nstyle="left: ${percent}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
_startDrag(e) {
|
||||
e.preventDefault();
|
||||
this._dragging = true;
|
||||
const slider = this.shadowRoot.querySelector('.slider-track');
|
||||
const rect = slider.getBoundingClientRect();
|
||||
this._sliderLeft = rect.left;
|
||||
this._sliderWidth = rect.width;
|
||||
window.addEventListener('mousemove', this._moveHandler);
|
||||
window.addEventListener('touchmove', this._moveHandler, { passive: false });
|
||||
window.addEventListener('mouseup', this._endHandler);
|
||||
window.addEventListener('touchend', this._endHandler);
|
||||
const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
|
||||
this._updateValue((clientX - this._sliderLeft) / this._sliderWidth);
|
||||
}
|
||||
|
||||
_endDrag() {
|
||||
if (!this._dragging) return;
|
||||
this._dragging = false;
|
||||
this._removeEventListeners();
|
||||
}
|
||||
|
||||
_handleDrag(e) {
|
||||
if (!this._dragging) return;
|
||||
e.preventDefault();
|
||||
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
|
||||
this._updateValue((clientX - this._sliderLeft) / this._sliderWidth);
|
||||
}
|
||||
|
||||
_removeEventListeners() {
|
||||
window.removeEventListener('mousemove', this._moveHandler);
|
||||
window.removeEventListener('touchmove', this._moveHandler);
|
||||
window.removeEventListener('mouseup', this._endHandler);
|
||||
window.removeEventListener('touchend', this._endHandler);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this._removeEventListeners();
|
||||
}
|
||||
|
||||
_updateValue(ratio) {
|
||||
const safeRatio = Math.max(0, Math.min(1, ratio));
|
||||
const newValue = this._min + safeRatio * (this._max - this._min);
|
||||
const roundedValue = Math.round(newValue);
|
||||
if (roundedValue !== this._value) {
|
||||
this._value = roundedValue;
|
||||
this._debouncedSetValue(roundedValue);
|
||||
}
|
||||
}
|
||||
|
||||
_debouncedSetValue(value) {
|
||||
clearTimeout(this._debounceTimer);
|
||||
this._debounceTimer = setTimeout(() => {
|
||||
this._callService(value);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
_callService(value) {
|
||||
const service = this.config.entity.split('.')[0];
|
||||
this.hass.callService(service, 'set_value', {
|
||||
entity_id: this.config.entity,
|
||||
value: value
|
||||
});
|
||||
}
|
||||
}
|
||||
customElements.define('xiaoshi-pad-slider-card', XiaoshiPadSliderCard);
|
||||
Reference in New Issue
Block a user