= new Map();
+ @state() private _isTirePreview: boolean = false;
@query('panel-images') private _panelImages!: PanelImages;
@@ -73,9 +75,9 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
}
private _cleanConfig(): void {
- if (['btn_preview', 'card_preview'].some((key) => this._config[key])) {
+ if (['btn_preview', 'card_preview', 'tire_preview'].some((key) => this._config[key])) {
console.log('Cleaning config of preview keys');
- this._config = { ...this._config, btn_preview: null, card_preview: null };
+ this._config = { ...this._config, btn_preview: null, card_preview: null, tire_preview: null };
this.configChanged();
}
}
@@ -90,7 +92,7 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
- if (!this._btnPreview && !this._cardPreview) {
+ if (!this._btnPreview && !this._cardPreview && !this._isTirePreview) {
this._cleanConfig();
}
}
@@ -741,13 +743,13 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
- ${this._config.extra_configs?.tire_background
- ? html` this._removeTireBackground()}> Remove image `
+ ${this._config.extra_configs?.tire_card_custom.background
+ ? html` this._removeTireBackground()}> Use Defaut image `
: html` this.shadowRoot?.getElementById('file-upload-new')?.click()}>
Upload image
@@ -758,10 +760,63 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
@change=${(ev: any) => this._handleTireBackgroundUpload(ev)}
accept="image/*"
/>`}
+ this._toggleTirePreview()}>
+ ${this._isTirePreview ? 'Close preview' : 'Preview'}
`;
- return this.panelTemplate('customTireBackground', 'customTireBackground', 'mdi:car-tire-alert', urlInput);
+ const tireCard = this._config.extra_configs?.tire_card_custom || {};
+
+ const imageSizeDirection = [
+ {
+ value: tireCard.image_size || 100,
+ label: 'Base image size',
+ configValue: 'image_size',
+ pickerType: 'number' as 'number',
+ options: { selector: { number: { max: 200, min: 0, mode: 'slider', step: 1 } } },
+ },
+ {
+ value: tireCard.value_size || 100,
+ label: 'Name & Value size',
+ configValue: 'value_size',
+ pickerType: 'number' as 'number',
+ options: { selector: { number: { max: 150, min: 50, mode: 'slider', step: 1 } } },
+ },
+ {
+ value: tireCard.top || 50,
+ label: `${tireCard.horizontal ? 'Horizontal' : 'Vertical'} position`,
+ configValue: 'top',
+ pickerType: 'number' as 'number',
+ options: { selector: { number: { max: 100, min: 0, mode: 'slider', step: 1 } } },
+ },
+ {
+ value: tireCard.left || 50,
+ label: `${tireCard.horizontal ? 'Vertical' : 'Horizontal'} position`,
+ configValue: 'left',
+ pickerType: 'number' as 'number',
+ options: { selector: { number: { max: 100, min: 0, mode: 'slider', step: 1 } } },
+ },
+ {
+ value: tireCard.horizontal || false,
+ label: 'Horizontal layout',
+ configValue: 'horizontal',
+ pickerType: 'selectorBoolean' as 'selectorBoolean',
+ },
+ ];
+
+ const imageSizeWrapper = html`
+ ${imageSizeDirection.map((config) =>
+ this.generateItemPicker({ ...config, configIndex: 'extra_configs', configType: 'tire_card_custom' })
+ )}
+ this.resetTireImageSizes()}
+ >Reset
+
`;
+
+ const content = html`${urlInput} ${imageSizeWrapper}
`;
+
+ return this.panelTemplate('customTireBackground', 'customTireBackground', 'mdi:car-tire-alert', content);
}
/* ---------------------------- TEMPLATE HELPERS ---------------------------- */
@@ -833,8 +888,37 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
`;
}
+ private generateItemPicker(config: any, wrapperClass = 'item-content'): TemplateResult {
+ return html`
+
+ ${Create.Picker({
+ ...config,
+ component: this,
+ })}
+
+ `;
+ }
+
/* ----------------------------- EVENT HANDLERS ----------------------------- */
+ private resetTireImageSizes(): void {
+ this._config = {
+ ...this._config,
+ extra_configs: {
+ ...this._config.extra_configs,
+ tire_card_custom: {
+ ...this._config.extra_configs?.tire_card_custom,
+ image_size: 100,
+ value_size: 100,
+ top: 50,
+ left: 50,
+ horizontal: false,
+ },
+ },
+ };
+ this.configChanged();
+ }
+
private async _handleTireBackgroundUpload(ev: any): Promise {
if (!ev.target.files || ev.target.files.length === 0) {
return;
@@ -843,7 +927,13 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
const file = ev.target.files[0];
const url = await uploadImage(this.hass, file);
if (url) {
- this._config = { ...this._config, extra_configs: { ...this._config.extra_configs, tire_background: url } };
+ this._config = {
+ ...this._config,
+ extra_configs: {
+ ...this._config.extra_configs,
+ tire_card_custom: { ...this._config.extra_configs?.tire_card_custom, background: url },
+ },
+ };
this.configChanged();
} else {
return;
@@ -851,7 +941,13 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
}
private _removeTireBackground(): void {
- this._config = { ...this._config, extra_configs: { ...this._config.extra_configs, tire_background: '' } };
+ this._config = {
+ ...this._config,
+ extra_configs: {
+ ...this._config.extra_configs,
+ tire_card_custom: { ...this._config.extra_configs?.tire_card_custom, background: '' },
+ },
+ };
this.configChanged();
}
@@ -1169,6 +1265,7 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
const target = ev.target;
const configValue = target.configValue;
const configBtnType = target.configBtnType;
+ const configIndex = target.configIndex;
let newValue: any = target.value;
const updates: Partial = {};
@@ -1204,6 +1301,16 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
[key]: parseInt(newValue) || newValue,
};
console.log('Button grid config changed:', key, newValue);
+ } else if (configIndex === 'extra_configs') {
+ newValue = ev.detail.value;
+ const key = configValue as keyof VehicleCardConfig['extra_configs']['tire_card_custom'];
+ updates.extra_configs = {
+ ...this._config.extra_configs,
+ tire_card_custom: {
+ ...this._config.extra_configs?.tire_card_custom,
+ [key]: parseInt(newValue) || newValue,
+ },
+ };
} else {
newValue = target.checked !== undefined ? target.checked : ev.detail.value;
updates[configValue] = newValue;
@@ -1346,6 +1453,46 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
}
}
+ public _toggleTirePreview(): void {
+ if (this._cardPreview) {
+ this._dispatchCardEvent('close_card_preview');
+ this._cardPreview = false;
+ }
+
+ if (this._isTirePreview) {
+ console.log('Closing tire preview');
+ if (this._config) {
+ this._config = {
+ ...this._config,
+ tire_preview: null,
+ };
+ }
+
+ this._isTirePreview = false;
+ this.configChanged();
+ setTimeout(() => {
+ this._dispatchCardEvent('close_preview');
+ }, 50);
+ } else {
+ let tireConfig = this._config.extra_configs?.tire_card_custom;
+ console.log('Setting tire preview');
+ if (this._config) {
+ this._config = {
+ ...this._config,
+ tire_preview: {
+ ...tireConfig,
+ },
+ };
+ }
+
+ this._isTirePreview = true;
+ this.configChanged();
+ setTimeout(() => {
+ this._dispatchCardEvent('toggle_preview_tire');
+ }, 50);
+ }
+ }
+
private _closeSubCardEditor(card: CardTypeConfig): void {
const resetState = () => {
this._activeSubcardType = null;
diff --git a/src/types/config.ts b/src/types/config.ts
index 2231016..a5c4b8b 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -130,7 +130,23 @@ export interface ShowOptionsConfig extends VehicleCardConfig {
}
export type ExtraConfigs = {
- tire_background: string;
+ tire_card_custom: {
+ background: string;
+ horizontal: boolean;
+ image_size: number;
+ value_size: number;
+ top: number;
+ left: number;
+ };
+ images_swipe: {
+ max_height: number;
+ max_width: number;
+ autoplay: boolean;
+ loop: boolean;
+ delay: number;
+ speed: number;
+ effect: 'slide' | 'fade' | 'coverflow';
+ };
};
export interface VehicleCardConfig extends LovelaceCardConfig {
@@ -216,7 +232,23 @@ export const defaultConfig: Partial = {
mode: THEME_MODE.Auto,
},
extra_configs: {
- tire_background: '',
+ tire_card_custom: {
+ background: '',
+ horizontal: false,
+ image_size: 100,
+ value_size: 100,
+ top: 50,
+ left: 50,
+ },
+ images_swipe: {
+ max_height: 150,
+ max_width: 450,
+ autoplay: false,
+ loop: true,
+ delay: 5000,
+ speed: 500,
+ effect: 'slide',
+ },
},
button_grid: {
use_swiper: false,
diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
index 0dd3752..fd9fc05 100644
--- a/src/vehicle-info-card.ts
+++ b/src/vehicle-info-card.ts
@@ -13,6 +13,7 @@ import {
import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup, nothing } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
import './components/cards';
import { VehicleButtons } from './components/cards';
@@ -55,14 +56,14 @@ export class VehicleCard extends LitElement implements LovelaceCard {
@state() public _entityNotFound: boolean = false;
// Active card type
- @state() private _currentCardType: string | null = null;
+ @state() public _currentCardType: string | null = null;
@state() private _activeSubCard: Set = new Set();
@state() private _mapPopupLovelace: LovelaceCardConfig[] = [];
@state() private chargingInfoVisible!: boolean;
@state() private isTyreHorizontal!: boolean;
// Preview states
- @state() private _currentPreviewType: 'button' | 'card' | null = null;
+ @state() private _currentPreviewType: 'button' | 'card' | 'tire' | null = null;
@state() private _cardPreviewElement: LovelaceCardConfig[] = [];
@state() private _buttonEntityPreview: Partial = {};
@@ -161,9 +162,6 @@ export class VehicleCard extends LitElement implements LovelaceCard {
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
- if (changedProps.has('_buttonReady')) {
- console.log('Button ready:', this._buttonReady);
- }
if (
changedProps.has('activeCardType') &&
this._currentCardType !== 'mapDialog' &&
@@ -293,6 +291,8 @@ export class VehicleCard extends LitElement implements LovelaceCard {
this._currentPreviewType = 'card';
} else if (!this._currentPreviewType && this.config?.btn_preview) {
this._currentPreviewType = 'button';
+ } else if (!this._currentPreviewType && this.config?.tire_preview) {
+ this._currentPreviewType = 'tire';
}
if (this._currentPreviewType !== null) {
@@ -302,7 +302,7 @@ export class VehicleCard extends LitElement implements LovelaceCard {
}
}
- private async _configurePreview(cardType: 'button' | 'card' | null): Promise {
+ private async _configurePreview(cardType: 'button' | 'card' | 'tire' | null): Promise {
if (!cardType && !this.isEditorPreview) return;
let cardConfig: LovelaceCardConfig[] | BaseButtonConfig = [];
@@ -321,11 +321,14 @@ export class VehicleCard extends LitElement implements LovelaceCard {
cardElement = await createCardElement(this._hass, cardConfig as LovelaceCardConfig[]);
this._cardPreviewElement = cardElement;
break;
+ case 'tire':
+ this._currentPreviewType = 'tire';
+ break;
default:
return;
}
- if (!cardElement) {
+ if (cardType === null) {
this._resetCardPreview(); // Reset preview
return;
}
@@ -394,6 +397,7 @@ export class VehicleCard extends LitElement implements LovelaceCard {
const typeMap = {
button: this._renderBtnPreview(this._buttonEntityPreview as CustomButtonEntity),
card: html`${this._cardPreviewElement}`,
+ tire: this._renderDefaultTyreCard(),
};
return typeMap[type];
@@ -808,9 +812,22 @@ export class VehicleCard extends LitElement implements LovelaceCard {
}
private _renderDefaultTyreCard(): TemplateResult {
- const customTyreBg = this.config.extra_configs?.tire_background
- ? this.config.extra_configs.tire_background
- : IMG.tyreBg;
+ const tireConfig = this.config.extra_configs.tire_card_custom;
+ const customTyreBg = tireConfig?.background || IMG.tyreBg;
+ const isHorizontal = tireConfig?.horizontal ?? false;
+ const tireImageSize = tireConfig?.image_size ?? 100;
+ const tireValueSize = tireConfig?.value_size ?? 100;
+ const tireTop = tireConfig?.top ?? 50;
+ const tireLeft = tireConfig?.left ?? 50;
+
+ const sizeStyle = {
+ '--vic-tire-top': `${tireTop}%`,
+ '--vic-tire-left': `${tireLeft}%`,
+ '--vic-tire-size': `${tireImageSize}%`,
+ '--vic-tire-value-size': tireValueSize / 100,
+ };
+ const directionClass = isHorizontal ? 'rotated' : '';
+
const lang = this.userLang;
const isPressureWarning = this.getBooleanState(this.vehicleEntities.tirePressureWarning?.entity_id);
@@ -821,22 +838,17 @@ export class VehicleCard extends LitElement implements LovelaceCard {
const tyreInfo = isPressureWarning ? tireWarningProblem : tireWarningOk;
const infoClass = isPressureWarning ? 'warning' : '';
- const isHorizontal = this.isTyreHorizontal ? 'rotated' : '';
- const toggleHorizontal = () => {
- this.isTyreHorizontal = !this.isTyreHorizontal;
- };
-
return html`
-
+
this.toggleTireDirection(ev)}>
-
+
${DataKeys.tyrePressures(lang).map(
(tyre) =>
- html`
+ html`
${this.getStateDisplay(this.vehicleEntities[tyre.key]?.entity_id)}
${tyre.name}
`
@@ -849,6 +861,21 @@ export class VehicleCard extends LitElement implements LovelaceCard {
`;
}
+ private toggleTireDirection(ev: Event): void {
+ ev.stopPropagation();
+ const target = ev.target as HTMLElement;
+ const tyreWrapper = target.closest('.default-card')?.querySelector('.tyre-wrapper');
+ const tyreBoxex = tyreWrapper?.querySelectorAll('.tyre-box');
+ if (!tyreWrapper || !tyreBoxex) return;
+
+ const isHorizontal = tyreWrapper.classList.contains('rotated');
+
+ tyreWrapper.classList.toggle('rotated', !isHorizontal);
+ tyreBoxex.forEach((el) => {
+ el.classList.toggle('rotated', !isHorizontal);
+ });
+ }
+
private _renderServiceControl(): TemplateResult | void {
const hass = this._hass;
const serviceControl = this.config.services;