Compare commits

...

25 Commits

Author SHA1 Message Date
xiaoshi
740bac1c63 Update xiaoshi-device-todo-button.js 2025-12-20 01:48:48 +08:00
xiaoshi
85d413baa1 Update data refresh interval to 3 seconds
Changed the data refresh interval from 300 seconds to 3 seconds.
2025-12-20 01:48:21 +08:00
xiaoshi
128d24328b Update xiaoshi-device-consumables-button.js 2025-12-20 01:47:57 +08:00
xiaoshi
de64a44599 Update xiaoshi-device-balance-button.js 2025-12-20 01:47:29 +08:00
xiaoshi
cf3e37da9e Update xiaoshi-pad-card.js 2025-12-13 22:49:01 +08:00
xiaoshi
cfc9618e87 Update xiaoshi-device-todo-button.js 2025-12-13 22:48:34 +08:00
xiaoshi
fe22c85d3b Update xiaoshi-device-ha-info-button.js 2025-12-13 22:48:20 +08:00
xiaoshi
13bcd1a702 Update xiaoshi-device-consumables-button.js 2025-12-13 22:48:03 +08:00
xiaoshi
1fb2f8dcb7 Update xiaoshi-device-balance-button.js 2025-12-13 22:47:43 +08:00
xiaoshi
6abbc0e917 Update xiaoshi-pad-card.js 2025-12-06 21:55:16 +08:00
xiaoshi
a0d123a998 Add files via upload 2025-12-06 21:54:51 +08:00
xiaoshi
8014a664b4 Delete xiaoshi-device-todo-button.js 2025-12-06 21:54:35 +08:00
xiaoshi
ed3c9b5896 Delete xiaoshi-device-ha-info-button.js 2025-12-06 21:54:27 +08:00
xiaoshi
b2eccc66cf Delete xiaoshi-device-consumables-button.js 2025-12-06 21:54:19 +08:00
xiaoshi
08242a4758 Delete xiaoshi-device-balance-button.js 2025-12-06 21:54:11 +08:00
xiaoshi
513a906231 Update xiaoshi-pad-card.js 2025-12-06 20:31:27 +08:00
xiaoshi
bcc4585278 Add files via upload 2025-12-06 20:31:12 +08:00
xiaoshi
b5598387a1 Delete xiaoshi-device-todo-button.js 2025-12-06 20:30:55 +08:00
xiaoshi
fbdece70f9 Delete xiaoshi-device-ha-info-button.js 2025-12-06 20:30:47 +08:00
xiaoshi
85c7123854 Delete xiaoshi-device-consumables-button.js 2025-12-06 20:30:39 +08:00
xiaoshi
daae901d1b Delete xiaoshi-device-balance-button.js 2025-12-06 20:30:31 +08:00
xiaoshi
b221bacb78 Update xiaoshi-pad-card.js 2025-12-06 20:16:56 +08:00
xiaoshi
7b7f0c632d Update xiaoshi-device-todo-button.js 2025-12-06 20:16:06 +08:00
xiaoshi
1523dc76d3 Update xiaoshi-device-ha-info-button.js 2025-12-06 20:15:52 +08:00
xiaoshi
20eae200c1 Update xiaoshi-device-consumables-button.js 2025-12-06 20:15:39 +08:00
5 changed files with 390 additions and 273 deletions

View File

@@ -207,7 +207,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
}
.remove-btn:hover {
color: #f44336;
color: rgb(255, 0, 0);
}
`;
}
@@ -216,175 +216,219 @@ class XiaoshiBalanceButtonEditor extends LitElement {
if (!this.hass) return html``;
return html`
<div class="form">
<!-- button新元素 开始-->
<div class="form-group">
<label>按钮显示图标
<div class="form-group">
<label>显示模式</label>
<select
@change=${this._entityChanged}
.value=${this.config.display_mode || 'min_value'}
name="display_mode"
>
<option value="min_value">显示最小值</option>
<option value="specific_entity">显示指定实体</option>
</select>
</div>
<div class="form-group">
<label>小数点精度控制显示的小数位数默认1位</label>
<input
type="number"
@change=${this._entityChanged}
.value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
name="decimal_precision"
placeholder="默认1"
min="0"
max="10"
step="1"
/>
</div>
<div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
<label>指定显示的实体</label>
<div class="entity-selector">
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
name="button_icon"
placeholder="mdi:cellphone"
/></label>
</div>
<div class="form-group">
<label>显示模式</label>
<select
@change=${this._entityChanged}
.value=${this.config.display_mode || 'min_value'}
name="display_mode"
>
<option value="min_value">显示最小值</option>
<option value="specific_entity">显示指定实体</option>
</select>
</div>
<div class="form-group">
<label>小数点精度控制显示的小数位数默认1位</label>
<input
type="number"
@change=${this._entityChanged}
.value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
name="decimal_precision"
placeholder="默认1"
min="0"
max="10"
step="1"
@input=${this._onSpecificEntitySearch}
@focus=${this._onSpecificEntitySearch}
.value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
placeholder="搜索实体..."
class="entity-search-input"
/>
</div>
<div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
<label>指定显示的实体</label>
<div class="entity-selector">
<input
type="text"
@input=${this._onSpecificEntitySearch}
@focus=${this._onSpecificEntitySearch}
.value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
placeholder="搜索实体..."
class="entity-search-input"
/>
${this._showSpecificEntityList ? html`
<div class="entity-dropdown">
${this._specificFilteredEntities.map(entity => html`
<div
class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
@click=${() => this._selectSpecificEntity(entity.entity_id)}
>
<div class="entity-info">
<div class="entity-details">
<div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
<div class="entity-id">${entity.entity_id}</div>
</div>
<ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
${this._showSpecificEntityList ? html`
<div class="entity-dropdown">
${this._specificFilteredEntities.map(entity => html`
<div
class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
@click=${() => this._selectSpecificEntity(entity.entity_id)}
>
<div class="entity-info">
<div class="entity-details">
<div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
<div class="entity-id">${entity.entity_id}</div>
</div>
${this.config.specific_entity_id === entity.entity_id ?
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
<ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
</div>
`)}
${this._specificFilteredEntities.length === 0 ? html`
<div class="no-results">未找到匹配的实体</div>
` : ''}
</div>
` : ''}
</div>
${this.config.specific_entity_id === entity.entity_id ?
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
</div>
`)}
${this._specificFilteredEntities.length === 0 ? html`
<div class="no-results">未找到匹配的实体</div>
` : ''}
</div>
` : ''}
</div>
</div>
<div class="form-group">
<label>按钮宽度默认70px, 支持像素(px)和百分比(%)</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
name="button_width"
placeholder="默认70px"
<div class="form-group">
<label>按钮显示图标
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
name="button_icon"
placeholder="mdi:cellphone"
/></label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.transparent_bg === true}
name="transparent_bg"
id="transparent_bg"
/>
<label for="transparent_bg" class="checkbox-label">
(平板端特性)透明背景(勾选后按钮背景透明)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.lock_white_fg === true}
name="lock_white_fg"
id="lock_white_fg"
/>
<label for="lock_white_fg" class="checkbox-label">
(平板端特性)白色图标文字(勾选后锁定显示白色)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.hide_icon === true}
name="hide_icon"
id="hide_icon"
/>
<label for="hide_icon" class="checkbox-label">
平板端特性)隐藏图标(勾选后隐藏图标)
</label>
</div>
<div class="form-group">
<label>按钮宽度默认65px, 支持像素(px)和百分比(%)</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
name="button_width"
placeholder="默认65px"
/>
</div>
<div class="form-group">
<label>按钮高度:支持像素(px)、百分比(%)和视窗高度(vh)默认24px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
name="button_height"
placeholder="默认24px"
/>
</div>
</div>
<div class="form-group">
<label>按钮文字大小:支持像素(px)默认11px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
name="button_font_size"
placeholder="默认11px"
/>
</div>
<div class="form-group">
<label>按钮图标大小:支持像素(px)默认13px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
name="button_icon_size"
placeholder="默认13px"
/>
</div>
<div class="form-group">
<label>按钮高度:支持像素(px)、百分比(%)和视窗高度(vh)默认24px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
name="button_height"
placeholder="默认24px"
/>
</div>
<div class="form-group">
<label>按钮文字大小:支持像素(px)默认11px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
name="button_font_size"
placeholder="默认11px"
/>
</div>
<div class="form-group">
<label>按钮图标大小:支持像素(px)默认15px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
name="button_icon_size"
placeholder="默认15px"
/>
</div>
<div class="form-group">
<label>点击动作:点击按钮时触发的动作</label>
<select
@change=${this._entityChanged}
.value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
name="tap_action"
>
<option value="tap_action">弹出余额信息卡片(默认)</option>
<option value="none">无动作</option>
</select>
</div>
<div class="form-group">
<label>点击动作:点击按钮时触发的动作</label>
<select
@change=${this._entityChanged}
.value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
name="tap_action"
>
<option value="tap_action">弹出余额信息卡片(默认)</option>
<option value="none">无动作</option>
</select>
</div>
<div class="form-group">
<label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
<textarea
@change=${this._entityChanged}
.value=${this.config.other_cards || ''}
name="other_cards"
placeholder='# 示例配置添加button卡片
<div class="form-group">
<label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
<textarea
@change=${this._entityChanged}
.value=${this.config.other_cards || ''}
name="other_cards"
placeholder='# 示例配置添加button卡片
- type: custom:button-card
template: 测试模板(最好引用模板,否则大概率会报错)
template: 测试模板(最好引用模板,否则大概率会报错)
- type: custom:button-card
template: 测试模板(最好引用模板,否则大概率会报错)'>
</textarea>
</div>
template: 测试模板(最好引用模板,否则大概率会报错)'>
</textarea>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.no_preview === true}
name="no_preview"
id="no_preview"
/>
<label for="no_preview" class="checkbox-label" style="color: red;">
📻显示预览📻( 请先勾选测试显示效果
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.no_preview === true}
name="no_preview"
id="no_preview"
/>
<label for="no_preview" class="checkbox-label" style="color: red;">
📻显示预览📻( 请先勾选测试显示效果
</label>
</div>
<div class="form-group">
<label> </label>
<label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
<label> </label>
</div>
<div class="form-group">
<label> </label>
<label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
<label> </label>
</div>
<!-- button新元素 结束-->
<!-- button新元素 结束-->
<div class="form-group">
<label>卡片宽度:支持像素(px)和百分比(%)默认100%</label>
@@ -425,16 +469,16 @@ class XiaoshiBalanceButtonEditor extends LitElement {
<input
type="color"
@change=${this._entityChanged}
.value=${this.config.warning_color || '#f44336'}
.value=${this.config.warning_color || 'rgb(255, 0, 0)'}
name="warning_color"
style="width: 50px; height: 34px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;"
/>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.warning_color || '#f44336'}
.value=${this.config.warning_color || 'rgb(255, 0, 0)'}
name="warning_color"
placeholder="默认:#f44336"
placeholder="默认:rgb(255, 0, 0)"
style="flex: 1;"
/>
</div>
@@ -624,7 +668,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
} else if (name === 'button_font_size') {
finalValue = value || '11px';
} else if (name === 'button_icon_size') {
finalValue = value || '15px';
finalValue = value || '13px';
} else if (name === 'width') {
finalValue = value || '100%';
} else if (name === 'display_mode') {
@@ -658,6 +702,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
}
}
/*button新按钮方法 结束*/
this.config = {
...this.config,
[name]: finalValue
@@ -934,7 +979,7 @@ class XiaoshiBalanceButton extends LitElement {
/*button新元素 开始*/
.balance-status {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
padding: 0;
margin: 0;
@@ -955,8 +1000,9 @@ class XiaoshiBalanceButton extends LitElement {
}
.status-icon {
--mdc-icon-size: var(--button-icon-size, 15px);
--mdc-icon-size: var(--button-icon-size, 13px);
color: var(--fg-color, #000);
margin-right: 3px;
}
/*button新元素 结束*/
@@ -977,7 +1023,6 @@ class XiaoshiBalanceButton extends LitElement {
align-items: center;
padding: 16px;
background: var(--bg-color, #fff);
border-radius: 12px;
}
@@ -1007,8 +1052,6 @@ class XiaoshiBalanceButton extends LitElement {
display: flex;
align-items: center;
justify-content: center;
}
/*标题统计数字*/
@@ -1142,7 +1185,7 @@ class XiaoshiBalanceButton extends LitElement {
}
.device-value.warning {
color: var(--warning-color, #F44336);
color: var(--warning-color, rgb(255, 0, 0));
}
.device-unit {
@@ -1153,7 +1196,7 @@ class XiaoshiBalanceButton extends LitElement {
}
.device-unit.warning {
color: var(--warning-color, #F44336);
color: var(--warning-color, rgb(255, 0, 0));
}
.no-devices {
@@ -1190,16 +1233,10 @@ class XiaoshiBalanceButton extends LitElement {
// 设置主题属性
this.setAttribute('theme', this._evaluateTheme());
//button新元素 开始
setTimeout(() => {
this._loadOilPriceData();
}, 50);
//button新元素 结束
// 每300秒刷新一次数据减少频繁刷新
this._refreshInterval = setInterval(() => {
this._loadOilPriceData();
}, 300000);
}, 3000);
}
_evaluateTheme() {
@@ -1612,11 +1649,14 @@ class XiaoshiBalanceButton extends LitElement {
/*button新元素 前9行和最后1行开始*/
const showPreview = this.config.no_preview === true;
// 获取参数
// 获取参数
const transparentBg = this.config.transparent_bg === true;
const hideIcon = this.config.hide_icon === true;
const lockWhiteFg = this.config.lock_white_fg === true;
const buttonIcon = this.config.button_icon || 'mdi:cellphone';
// 设置背景颜色
const buttonBgColor = bgColor;
const buttonBgColor = transparentBg ? 'transparent' : bgColor;
// 获取显示模式
const displayMode = this.config.display_mode || 'min_value';
@@ -1704,15 +1744,24 @@ class XiaoshiBalanceButton extends LitElement {
const displayText = formattedDisplayValue !== null && displayUnit ? `${formattedDisplayValue}${displayUnit}` : formattedDisplayValue;
// 获取预警颜色
const warningColor = this.config.warning_color || '#f44336';
const warningColor = this.config.warning_color || 'rgb(255, 0, 0)';
// 根据预警状态设置数字颜色
const numberColor = isWarning ? warningColor : fgColor;
// 根据预警状态设置数字颜色,应用锁定白色功能
let numberColor, iconColor;
if (isWarning) {
// 预警状态:数字始终使用红色,图标根据锁定白色设置
numberColor = warningColor;
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
} else {
// 非预警状态:数字和图标都根据锁定白色设置
numberColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
}
// 渲染按钮
const buttonHtml = html`
<div class="balance-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
<div class="balance-status" style="--fg-color: ${numberColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
<span style="color: ${numberColor};">${displayText}</span>
</div>
`;
@@ -1725,7 +1774,7 @@ class XiaoshiBalanceButton extends LitElement {
<label>👇👇👇下面是弹出卡片内容👇👇👇</label>
</div>
<ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor}; --warning-color: ${this.config.warning_color || '#f44336'};">
<ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor}; --warning-color: ${this.config.warning_color || 'rgb(255, 0, 0)'};">
<div class="card-header">
<div class="card-title">
<span class="offline-indicator" style="background: rgb(0,222,220); animation: pulse 2s infinite"></span>
@@ -1785,7 +1834,7 @@ class XiaoshiBalanceButton extends LitElement {
if (config.button_width) {
this.style.setProperty('--button-width', config.button_width);
} else {
this.style.setProperty('--button-width', '70px');
this.style.setProperty('--button-width', '65px');
}
// 设置按钮高度(只控制 balance-status
@@ -1806,7 +1855,7 @@ class XiaoshiBalanceButton extends LitElement {
if (config.button_icon_size) {
this.style.setProperty('--button-icon-size', config.button_icon_size);
} else {
this.style.setProperty('--button-icon-size', '15px');
this.style.setProperty('--button-icon-size', '13px');
}
// 设置卡片宽度(控制原来的 UI
@@ -1822,7 +1871,7 @@ class XiaoshiBalanceButton extends LitElement {
if (config.warning_color) {
this.style.setProperty('--warning-color', config.warning_color);
} else {
this.style.setProperty('--warning-color', '#f44336');
this.style.setProperty('--warning-color', 'rgb(255, 0, 0)');
}
if (config.theme) {

View File

@@ -262,7 +262,6 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
</label>
</div>
<div class="form-group">
<label>按钮显示文本
<input
@@ -295,10 +294,24 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
id="transparent_bg"
/>
<label for="transparent_bg" class="checkbox-label">
透明背景(勾选后按钮背景透明)
(平板端特性)透明背景(勾选后按钮背景透明)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.lock_white_fg === true}
name="lock_white_fg"
id="lock_white_fg"
/>
<label for="lock_white_fg" class="checkbox-label">
(平板端特性)白色图标文字(勾选后锁定显示白色)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -309,10 +322,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
id="hide_icon"
/>
<label for="hide_icon" class="checkbox-label">
隐藏图标(勾选后隐藏图标)
平板端特性)隐藏图标(勾选后隐藏图标)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -323,10 +336,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
id="hide_colon"
/>
<label for="hide_colon" class="checkbox-label">
隐藏冒号(勾选后不显示冒号,改为空格)
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -337,18 +350,18 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
id="hide_zero"
/>
<label for="hide_zero" class="checkbox-label">
隐藏0值勾选后数量为0时不显示数量
(平板端特性)隐藏0值勾选后数量为0时不显示数量
</label>
</div>
<div class="form-group">
<label>按钮宽度:默认70px, 支持像素(px)和百分比(%)</label>
<label>按钮宽度:默认65px, 支持像素(px)和百分比(%)</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
name="button_width"
placeholder="默认70px"
placeholder="默认65px"
/>
</div>
@@ -375,13 +388,13 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
</div>
<div class="form-group">
<label>按钮图标大小:支持像素(px)默认15px</label>
<label>按钮图标大小:支持像素(px)默认13px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
name="button_icon_size"
placeholder="默认15px"
placeholder="默认13px"
/>
</div>
@@ -691,7 +704,7 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
} else if (name === 'button_font_size') {
finalValue = value || '11px';
} else if (name === 'button_icon_size') {
finalValue = value || '15px';
finalValue = value || '13px';
} else if (name === 'width') {
finalValue = value || '100%';
} else if (name === 'tap_action') {
@@ -919,7 +932,7 @@ class XiaoshiConsumablesButton extends LitElement {
/*button新元素 开始*/
.consumables-status {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
padding: 0;
margin: 0;
@@ -940,13 +953,14 @@ class XiaoshiConsumablesButton extends LitElement {
}
.status-icon {
--mdc-icon-size: var(--button-icon-size, 15px);
--mdc-icon-size: var(--button-icon-size, 13px);
color: var(--fg-color, #000);
margin-right: 3px;
}
/* 角标模式样式 */
.consumables-status.badge-mode {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
border-radius: 10px;
padding: 0;
@@ -1287,17 +1301,11 @@ class XiaoshiConsumablesButton extends LitElement {
// 设置主题属性
this.setAttribute('theme', this._evaluateTheme());
//button新元素 开始
setTimeout(() => {
this._loadOilPriceData();
}, 50);
//button新元素 结束
// 每300秒刷新一次数据减少频繁刷新
this._refreshInterval = setInterval(() => {
this._loadOilPriceData();
}, 300000);
}, 3000);
}
_evaluateTheme() {
@@ -1850,6 +1858,7 @@ class XiaoshiConsumablesButton extends LitElement {
const hideColon = this.config.hide_colon === true;
const hideZero = this.config.hide_zero === true;
const autoHide = this.config.auto_hide === true;
const lockWhiteFg = this.config.lock_white_fg === true;
const buttonText = this.config.button_text || '耗材';
const buttonIcon = this.config.button_icon || 'mdi:battery-sync';
@@ -1876,6 +1885,10 @@ class XiaoshiConsumablesButton extends LitElement {
`;
} else {
// 普通模式
// 应用锁定白色功能
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
// 构建显示文本
let displayText = buttonText;
@@ -1895,8 +1908,8 @@ class XiaoshiConsumablesButton extends LitElement {
}
buttonHtml = html`
<div class="consumables-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
<div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -1914,7 +1927,17 @@ class XiaoshiConsumablesButton extends LitElement {
`;
} else {
// 普通模式:显示文本和数量
const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
// 应用锁定白色功能,但预警颜色(红色)不受影响
let textColor, iconColor;
if (warningCount === 0) {
// 非预警状态:根据锁定白色设置决定颜色
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
} else {
// 预警状态:始终使用红色,不受锁定白色影响
textColor = 'rgb(255, 0, 0)';
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
}
// 构建显示文本
let displayText = buttonText;
@@ -1936,7 +1959,7 @@ class XiaoshiConsumablesButton extends LitElement {
buttonHtml = html`
<div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -1992,7 +2015,7 @@ class XiaoshiConsumablesButton extends LitElement {
if (config.button_width) {
this.style.setProperty('--button-width', config.button_width);
} else {
this.style.setProperty('--button-width', '70px');
this.style.setProperty('--button-width', '65px');
}
// 设置按钮高度(只控制 consumables-status
@@ -2013,7 +2036,7 @@ class XiaoshiConsumablesButton extends LitElement {
if (config.button_icon_size) {
this.style.setProperty('--button-icon-size', config.button_icon_size);
} else {
this.style.setProperty('--button-icon-size', '15px');
this.style.setProperty('--button-icon-size', '13px');
}
// 设置卡片宽度(控制原来的 UI

View File

@@ -93,7 +93,6 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
</label>
</div>
<div class="form-group">
<label>按钮显示文本
<input
@@ -126,7 +125,21 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
id="transparent_bg"
/>
<label for="transparent_bg" class="checkbox-label">
透明背景(勾选后按钮背景透明)
(平板端特性)透明背景(勾选后按钮背景透明)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.lock_white_fg === true}
name="lock_white_fg"
id="lock_white_fg"
/>
<label for="lock_white_fg" class="checkbox-label">
(平板端特性)白色图标文字(勾选后锁定显示白色)
</label>
</div>
@@ -140,7 +153,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
id="hide_icon"
/>
<label for="hide_icon" class="checkbox-label">
隐藏图标(勾选后隐藏图标)
平板端特性)隐藏图标(勾选后隐藏图标)
</label>
</div>
@@ -154,7 +167,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
id="hide_colon"
/>
<label for="hide_colon" class="checkbox-label">
隐藏冒号(勾选后不显示冒号,改为空格)
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
</label>
</div>
@@ -168,18 +181,18 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
id="hide_zero"
/>
<label for="hide_zero" class="checkbox-label">
隐藏0值勾选后数量为0时不显示数量
(平板端特性)隐藏0值勾选后数量为0时不显示数量
</label>
</div>
<div class="form-group">
<label>按钮宽度:默认70px, 支持像素(px)和百分比(%)</label>
<label>按钮宽度:默认65px, 支持像素(px)和百分比(%)</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
name="button_width"
placeholder="默认70px"
placeholder="默认65px"
/>
</div>
@@ -206,13 +219,13 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
</div>
<div class="form-group">
<label>按钮图标大小:支持像素(px)默认15px</label>
<label>按钮图标大小:支持像素(px)默认13px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
name="button_icon_size"
placeholder="默认15px"
placeholder="默认13px"
/>
</div>
@@ -342,7 +355,7 @@ template: 测试模板(最好引用模板,否则大概率会报错)'>
if (type === 'checkbox') {
finalValue = checked;
} else {
if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action') return;
if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action' && name !== 'display_mode' && name !== 'decimal_precision') return;
finalValue = value
}
@@ -354,7 +367,7 @@ template: 测试模板(最好引用模板,否则大概率会报错)'>
} else if (name === 'button_font_size') {
finalValue = value || '11px';
} else if (name === 'button_icon_size') {
finalValue = value || '15px';
finalValue = value || '13px';
} else if (name === 'width') {
finalValue = value || '100%';
} else if (name === 'exclude_entities') {
@@ -417,7 +430,7 @@ export class XiaoshiHaInfoButton extends LitElement {
/*button新元素 开始*/
.ha-info-status {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
padding: 0;
margin: 0;
@@ -438,13 +451,14 @@ export class XiaoshiHaInfoButton extends LitElement {
}
.status-icon {
--mdc-icon-size: var(--button-icon-size, 15px);
--mdc-icon-size: var(--button-icon-size, 13px);
color: var(--fg-color, #000);
margin-right: 3px;
}
/* 角标模式样式 */
.ha-info-status.badge-mode {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
border-radius: 10px;
padding: 0;
@@ -788,18 +802,11 @@ export class XiaoshiHaInfoButton extends LitElement {
// 设置主题属性
this.setAttribute('theme', this._evaluateTheme());
//button新元素 开始
setTimeout(() => {
this._loadUpdateData();
this._loadOfflineDevices();
}, 50);
//button新元素 结束
// 每300秒刷新一次数据减少频繁刷新
this._refreshInterval = setInterval(() => {
this._loadUpdateData();
this._loadOfflineDevices();
}, 300000);
}, 3000);
}
_evaluateTheme() {
@@ -1780,6 +1787,7 @@ export class XiaoshiHaInfoButton extends LitElement {
const hideColon = this.config.hide_colon === true;
const hideZero = this.config.hide_zero === true;
const autoHide = this.config.auto_hide === true;
const lockWhiteFg = this.config.lock_white_fg === true;
const buttonText = this.config.button_text || 'HA';
const buttonIcon = this.config.button_icon || 'mdi:home-assistant';
@@ -1824,9 +1832,13 @@ export class XiaoshiHaInfoButton extends LitElement {
displayText += '\u2002'; // 两个en空格大约等于数字"0"的宽度
}
// 应用锁定白色功能
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
buttonHtml = html`
<div class="ha-info-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
<div class="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -1844,7 +1856,17 @@ export class XiaoshiHaInfoButton extends LitElement {
`;
} else {
// 普通模式:显示文本和数量
const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
// 应用锁定白色功能,但预警颜色(红色)不受影响
let textColor, iconColor;
if (warningCount === 0) {
// 非预警状态:根据锁定白色设置决定颜色
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
} else {
// 预警状态:始终使用红色,不受锁定白色影响
textColor = 'rgb(255, 0, 0)';
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
}
// 构建显示文本
let displayText = buttonText;
@@ -1866,7 +1888,7 @@ export class XiaoshiHaInfoButton extends LitElement {
buttonHtml = html`
<div class="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -2052,7 +2074,7 @@ export class XiaoshiHaInfoButton extends LitElement {
if (config.button_width) {
this.style.setProperty('--button-width', config.button_width);
} else {
this.style.setProperty('--button-width', '70px');
this.style.setProperty('--button-width', '65px');
}
// 设置按钮高度(只控制 ha-info-status
@@ -2073,7 +2095,7 @@ export class XiaoshiHaInfoButton extends LitElement {
if (config.button_icon_size) {
this.style.setProperty('--button-icon-size', config.button_icon_size);
} else {
this.style.setProperty('--button-icon-size', '15px');
this.style.setProperty('--button-icon-size', '13px');
}
// 设置卡片宽度(控制原来的 UI

View File

@@ -213,7 +213,6 @@ class XiaoshiTodoButtonEditor extends LitElement {
</label>
</div>
<div class="form-group">
<label>按钮显示文本
<input
@@ -246,10 +245,24 @@ class XiaoshiTodoButtonEditor extends LitElement {
id="transparent_bg"
/>
<label for="transparent_bg" class="checkbox-label">
透明背景(勾选后按钮背景透明)
(平板端特性)透明背景(勾选后按钮背景透明)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
class="checkbox-input"
@change=${this._entityChanged}
.checked=${this.config.lock_white_fg === true}
name="lock_white_fg"
id="lock_white_fg"
/>
<label for="lock_white_fg" class="checkbox-label">
(平板端特性)白色图标文字(勾选后锁定显示白色)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -260,10 +273,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
id="hide_icon"
/>
<label for="hide_icon" class="checkbox-label">
隐藏图标(勾选后隐藏图标)
平板端特性)隐藏图标(勾选后隐藏图标)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -274,10 +287,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
id="hide_colon"
/>
<label for="hide_colon" class="checkbox-label">
隐藏冒号(勾选后不显示冒号,改为空格)
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
@@ -288,18 +301,18 @@ class XiaoshiTodoButtonEditor extends LitElement {
id="hide_zero"
/>
<label for="hide_zero" class="checkbox-label">
隐藏0值勾选后数量为0时不显示数量
(平板端特性)隐藏0值勾选后数量为0时不显示数量
</label>
</div>
<div class="form-group">
<label>按钮宽度:默认70px, 支持像素(px)和百分比(%)</label>
<label>按钮宽度:默认65px, 支持像素(px)和百分比(%)</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
name="button_width"
placeholder="默认70px"
placeholder="默认65px"
/>
</div>
@@ -326,13 +339,13 @@ class XiaoshiTodoButtonEditor extends LitElement {
</div>
<div class="form-group">
<label>按钮图标大小:支持像素(px)默认15px</label>
<label>按钮图标大小:支持像素(px)默认13px</label>
<input
type="text"
@change=${this._entityChanged}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
name="button_icon_size"
placeholder="默认15px"
placeholder="默认13px"
/>
</div>
@@ -491,7 +504,7 @@ class XiaoshiTodoButtonEditor extends LitElement {
} else if (name === 'button_font_size') {
finalValue = value || '11px';
} else if (name === 'button_icon_size') {
finalValue = value || '15px';
finalValue = value || '13px';
} else if (name === 'width') {
finalValue = value || '100%';
} else if (name === 'tap_action') {
@@ -633,7 +646,7 @@ class XiaoshiTodoButton extends LitElement {
/*button新元素 开始*/
.todo-status {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
padding: 0;
margin: 0;
@@ -654,13 +667,14 @@ class XiaoshiTodoButton extends LitElement {
}
.status-icon {
--mdc-icon-size: var(--button-icon-size, 15px);
--mdc-icon-size: var(--button-icon-size, 13px);
color: var(--fg-color, #000);
margin-right: 3px;
}
/* 角标模式样式 */
.todo-status.badge-mode {
width: var(--button-width, 70px);
width: var(--button-width, 65px);
height: var(--button-height, 24px);
border-radius: 10px;
padding: 0;
@@ -1108,19 +1122,13 @@ class XiaoshiTodoButton extends LitElement {
super.connectedCallback();
this._loadTodoData();
//button新元素 开始
setTimeout(() => {
this._loadTodoData();
}, 50);
//button新元素 结束
// 设置主题属性
this.setAttribute('theme', this._evaluateTheme());
// 每300秒刷新一次数据减少频繁刷新
this._refreshInterval = setInterval(() => {
this._loadTodoData();
}, 300000);
}, 3000);
}
_evaluateTheme() {
@@ -1617,6 +1625,7 @@ class XiaoshiTodoButton extends LitElement {
const hideColon = this.config.hide_colon === true;
const hideZero = this.config.hide_zero === true;
const autoHide = this.config.auto_hide === true;
const lockWhiteFg = this.config.lock_white_fg === true;
const buttonText = this.config.button_text || '待办';
const buttonIcon = this.config.button_icon || 'mdi:clipboard-list';
@@ -1643,6 +1652,10 @@ class XiaoshiTodoButton extends LitElement {
`;
} else {
// 普通模式
// 应用锁定白色功能
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
// 构建显示文本
let displayText = buttonText;
@@ -1662,8 +1675,8 @@ class XiaoshiTodoButton extends LitElement {
}
buttonHtml = html`
<div class="todo-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
<div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -1681,7 +1694,17 @@ class XiaoshiTodoButton extends LitElement {
`;
} else {
// 普通模式:显示文本和数量
const textColor = totalIncompleteCount === 0 ? fgColor : 'rgb(255, 0, 0)';
// 应用锁定白色功能,但预警颜色(红色)不受影响
let textColor, iconColor;
if (totalIncompleteCount === 0) {
// 非预警状态:根据锁定白色设置决定颜色
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
} else {
// 预警状态:始终使用红色,不受锁定白色影响
textColor = 'rgb(255, 0, 0)';
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
}
// 构建显示文本
let displayText = buttonText;
@@ -1703,7 +1726,7 @@ class XiaoshiTodoButton extends LitElement {
buttonHtml = html`
<div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
@@ -1975,7 +1998,7 @@ class XiaoshiTodoButton extends LitElement {
if (config.button_width) {
this.style.setProperty('--button-width', config.button_width);
} else {
this.style.setProperty('--button-width', '70px');
this.style.setProperty('--button-width', '65px');
}
// 设置按钮高度(只控制 todo-status
@@ -1996,7 +2019,7 @@ class XiaoshiTodoButton extends LitElement {
if (config.button_icon_size) {
this.style.setProperty('--button-icon-size', config.button_icon_size);
} else {
this.style.setProperty('--button-icon-size', '15px');
this.style.setProperty('--button-icon-size', '13px');
}
// 设置卡片宽度(控制原来的 UI

View File

@@ -1,4 +1,4 @@
console.info("%c 消逝卡-平板端 \n%c v 0.1.7 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
console.info("%c 消逝卡-平板端 \n%c v 0.2.1 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
const loadCards = async () => {
await import('./xiaoshi-pad-grid-card.js');