type: custom:button-card
variables:
thermostatversion: 2.0.0
var_url_params: |-
[[[
return new URLSearchParams(window.location.search);
]]]
var_climate_visuals: |-
[[[
/**
* Get visual styling based on HVAC mode and action
* @param {Object} state - Climate entity state object
* @returns {Object} Object with gradient and icon properties
*/
const getClimateVisuals = (state) => {
if (!state) {
return {
gradient: 'linear-gradient(135deg, #1c1c1c 0%, #2d2d2d 100%)',
icon: 'mdi:thermostat'
};
}
const mode = state.state;
const action = state.attributes?.hvac_action;
// Priority 1: Use action if available for most accurate representation
if (action) {
switch(action) {
case 'heating':
return {
gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)',
icon: 'mdi:fire'
};
case 'cooling':
return {
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
icon: 'mdi:snowflake'
};
case 'drying':
return {
gradient: 'linear-gradient(135deg, #f39c12 0%, #f1c40f 100%)',
icon: 'mdi:water-percent'
};
case 'fan':
return {
gradient: 'linear-gradient(135deg, #3498db 0%, #2980b9 100%)',
icon: 'mdi:fan'
};
case 'idle':
// Idle state - show mode intention with muted colors
switch(mode) {
case 'heat':
return {
gradient: 'linear-gradient(135deg, #c46b6b 0%, #c47e53 100%)',
icon: 'mdi:fire-circle'
};
case 'cool':
return {
gradient: 'linear-gradient(135deg, #5a9cc4 0%, #4090c4 100%)',
icon: 'mdi:snowflake-variant'
};
case 'heat_cool':
return {
gradient: 'linear-gradient(135deg, #c46b6b 0%, #5a9cc4 100%)',
icon: 'mdi:sync-circle'
};
default:
return {
gradient: 'linear-gradient(135deg, #434343 0%, #5a5a5a 100%)',
icon: 'mdi:power-standby'
};
}
case 'off':
return {
gradient: 'linear-gradient(135deg, #1c1c1c 0%, #2d2d2d 100%)',
icon: 'mdi:power'
};
}
}
// Priority 2: Fall back to mode if no action available
switch(mode) {
case 'heat':
return {
gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)',
icon: 'mdi:fire'
};
case 'cool':
return {
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
icon: 'mdi:snowflake'
};
case 'heat_cool':
return {
gradient: 'linear-gradient(135deg, #ff6b6b 0%, #4facfe 100%)',
icon: 'mdi:autorenew'
};
case 'dry':
return {
gradient: 'linear-gradient(135deg, #f39c12 0%, #f1c40f 100%)',
icon: 'mdi:water-percent'
};
case 'fan_only':
return {
gradient: 'linear-gradient(135deg, #3498db 0%, #2980b9 100%)',
icon: 'mdi:fan'
};
case 'off':
return {
gradient: 'linear-gradient(135deg, #1c1c1c 0%, #2d2d2d 100%)',
icon: 'mdi:power'
};
}
// Priority 3: Infer from temperature difference
const currentTemp = state.attributes?.current_temperature;
const targetTemp = state.attributes?.temperature;
if (currentTemp != null && targetTemp != null) {
const tempDiff = targetTemp - currentTemp;
if (tempDiff > 0.5) {
return {
gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)',
icon: 'mdi:fire'
};
}
if (tempDiff < -0.5) {
return {
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
icon: 'mdi:snowflake'
};
}
}
// Final fallback: Neutral gradient
return {
gradient: 'linear-gradient(135deg, #434343 0%, #5a5a5a 100%)',
icon: 'mdi:thermostat'
};
};
// Return visuals for the current climate device
if (!variables.var_climate_device) {
return getClimateVisuals(null);
}
const state = hass.states[variables.var_climate_device];
return getClimateVisuals(state);
]]]
var_climate_device: |-
[[[
/**
* Get the area/floor ID for a given device
* @param {string} deviceId - Device ID to look up
* @returns {Object} Object with areaId and floorId properties
*/
const getDeviceLocation = (deviceId) => {
if (!deviceId) return { areaId: null, floorId: null };
const device = Object.values(hass.devices || {}).find(d => d.id === deviceId);
if (!device) return { areaId: null, floorId: null };
const areaId = device.area_id || null;
let floorId = null;
if (areaId && hass.areas) {
const area = Object.values(hass.areas).find(a => a.area_id === areaId);
if (area) {
floorId = area.floor_id || null;
}
}
return { areaId, floorId };
};
/**
* Get the device ID for a climate entity
* @param {string} entityId - Climate entity ID
* @returns {string|null} Device ID or null
*/
const getClimateDeviceId = (entityId) => {
if (!hass.entities || !hass.entities[entityId]) return null;
return hass.entities[entityId].device_id || null;
};
/**
* Get the mic device ID from View Assist sensor entity
* @returns {string|null} Mic device ID or null
*/
const getViewAssistDeviceId = () => {
const vaEntity = variables.var_assistsat_entity;
if (!vaEntity || !hass.states[vaEntity]) return null;
const micDeviceId = hass.states[vaEntity].attributes.mic_device_id;
return micDeviceId || null;
};
const urlParams = variables.var_url_params;
const urlClimate = urlParams.get('climate');
// If URL specifies a climate device, use it
if (urlClimate) {
const entity = hass.states[urlClimate];
if (entity && entity.state !== 'unavailable' && entity.state !== 'unknown') {
return urlClimate;
}
}
// Get View Assist device location for intelligent matching
const vaDeviceId = getViewAssistDeviceId();
const vaLocation = getDeviceLocation(vaDeviceId);
// Get all available climate devices
const climateKeys = Object.keys(hass.states).filter(id => id.startsWith('climate.'));
const availableClimate = [];
const maxIterations = Math.min(climateKeys.length, 15); // Realistic upper bound
for (let i = 0; i < maxIterations; i++) {
const entityId = climateKeys[i];
const state = hass.states[entityId].state;
if (state !== 'unavailable' && state !== 'unknown') {
const deviceId = getClimateDeviceId(entityId);
const location = getDeviceLocation(deviceId);
availableClimate.push({
entityId,
deviceId,
areaId: location.areaId,
floorId: location.floorId
});
}
}
if (availableClimate.length === 0) {
return "";
}
// Priority 1: Same area as View Assist device
if (vaLocation.areaId) {
const sameAreaClimate = availableClimate.find(c => c.areaId === vaLocation.areaId);
if (sameAreaClimate) {
return sameAreaClimate.entityId;
}
}
// Priority 2: Same floor as View Assist device
if (vaLocation.floorId) {
const sameFloorClimate = availableClimate.find(c => c.floorId === vaLocation.floorId);
if (sameFloorClimate) {
return sameFloorClimate.entityId;
}
}
// Priority 3: First available climate device
return availableClimate[0].entityId;
]]]
var_all_climate_devices: |-
[[[
/**
* Format climate entity name for display
* @param {string} entityId - Climate entity ID
* @returns {string} Formatted name
*/
const formatClimateName = (entityId) => {
return entityId.replace('climate.', '').replace(/_/g, ' ');
};
/**
* Check if climate entity is available
* @param {string} state - Entity state
* @returns {boolean} True if available
*/
const isClimateAvailable = (state) => {
return state !== 'unavailable' && state !== 'unknown';
};
/**
* Get visual styling based on HVAC mode and action
* @param {Object} entity - Entity object
* @returns {Object} Object with gradient and icon properties
*/
const getClimateVisuals = (entity) => {
const mode = entity.state;
const action = entity.attributes?.hvac_action;
// Priority 1: Use action if available
if (action) {
switch(action) {
case 'heating':
return { icon: 'mdi:fire' };
case 'cooling':
return { icon: 'mdi:snowflake' };
case 'drying':
return { icon: 'mdi:water-percent' };
case 'fan':
return { icon: 'mdi:fan' };
case 'idle':
// Idle state - show mode intention with variant icons
switch(mode) {
case 'heat':
return { icon: 'mdi:fire-circle' };
case 'cool':
return { icon: 'mdi:snowflake-variant' };
case 'heat_cool':
return { icon: 'mdi:sync-circle' };
default:
return { icon: 'mdi:power-standby' };
}
case 'off':
return { icon: 'mdi:power' };
}
}
// Priority 2: Fall back to mode
switch(mode) {
case 'heat':
return { icon: 'mdi:fire' };
case 'cool':
return { icon: 'mdi:snowflake' };
case 'heat_cool':
return { icon: 'mdi:autorenew' };
case 'dry':
return { icon: 'mdi:water-percent' };
case 'fan_only':
return { icon: 'mdi:fan' };
case 'off':
return { icon: 'mdi:power' };
default:
return { icon: entity.attributes.icon || 'mdi:thermostat' };
}
};
const urlParams = variables.var_url_params;
const showType = urlParams.get('show');
const configuredClimate = urlParams.get('climate_devices');
// If specific devices are configured via URL
if (showType === 'configured' && configuredClimate) {
const devices = [];
const climateEntityList = decodeURIComponent(configuredClimate).split(',');
const maxIterations = Math.min(climateEntityList.length, 10); // Realistic upper bound
for (let i = 0; i < maxIterations; i++) {
const entityId = climateEntityList[i].trim();
const entity = hass.states[entityId];
if (entity && isClimateAvailable(entity.state)) {
const visuals = getClimateVisuals(entity);
devices.push({
entity_id: entityId,
name: entity.attributes.friendly_name || formatClimateName(entityId),
hvac_mode: entity.state,
hvac_action: entity.attributes?.hvac_action || null,
icon: visuals.icon
});
}
}
return devices;
}
// Get all available climate devices
const devices = [];
const climateKeys = Object.keys(hass.states).filter(id => id.startsWith('climate.'));
const maxIterations = Math.min(climateKeys.length, 15); // Realistic upper bound
for (let i = 0; i < maxIterations; i++) {
const entityId = climateKeys[i];
const entity = hass.states[entityId];
if (isClimateAvailable(entity.state)) {
const visuals = getClimateVisuals(entity);
devices.push({
entity_id: entityId,
name: entity.attributes.friendly_name || formatClimateName(entityId),
hvac_mode: entity.state,
hvac_action: entity.attributes?.hvac_action || null,
icon: visuals.icon
});
}
}
// Sort alphabetically for consistent display
devices.sort((a, b) => a.name.localeCompare(b.name));
return devices;
]]]
var_has_multiple_climate: "[[[ return variables.var_all_climate_devices.length > 1; ]]]"
template:
- body_template
styles:
grid:
- grid-template-areas: |-
[[[
const isPortrait = window.viewAssistResponsive?.orientation === "portrait";
if (!variables.var_climate_device) {
return isPortrait ?
`"title_card status"
"no_climate no_climate"
"no_climate no_climate"` :
`"title_card status status"
"no_climate no_climate no_climate"
"no_climate no_climate no_climate"`;
}
if (variables.var_has_multiple_climate) {
return isPortrait ?
`"title_card status"
"thermostat thermostat"
"thermostat thermostat"
"thermostat thermostat"
"thermostat thermostat"
"controls controls"` :
`"title_card status status status"
"thermostat thermostat thermostat controls"
"thermostat thermostat thermostat controls"
"thermostat thermostat thermostat controls"`;
}
return isPortrait ?
`"title_card status"
"thermostat thermostat"
"thermostat thermostat"
"thermostat thermostat"
"thermostat thermostat"` :
`"title_card status status"
"thermostat thermostat thermostat"
"thermostat thermostat thermostat"
"thermostat thermostat thermostat"`;
]]]
- grid-template-columns: |-
[[[
const isPortrait = window.viewAssistResponsive?.orientation === "portrait";
if (!variables.var_climate_device) {
return isPortrait ? "min-content 1fr" : "min-content 1fr 1fr";
}
if (variables.var_has_multiple_climate && !isPortrait) {
return "min-content 1fr 1fr min-content";
}
return isPortrait ? "min-content 1fr" : "min-content 1fr 1fr";
]]]
- grid-template-rows: |-
[[[
if (!variables.var_climate_device) {
return "min-content 1fr 1fr";
}
if (variables.var_has_multiple_climate && window.viewAssistResponsive?.orientation === "portrait") {
return "min-content 1fr 1fr 1fr 1fr min-content";
}
if (variables.var_has_multiple_climate) {
return "min-content 1fr 1fr 1fr";
}
return window.viewAssistResponsive?.orientation === "portrait" ?
"min-content 1fr 1fr 1fr 1fr" :
"min-content 1fr 1fr 1fr";
]]]
card:
- background: "[[[ return variables.var_climate_visuals.gradient; ]]]"
- border-radius: 0px
- font-family: >-
[[[ return `"${variables.var_assistsat_entity_font_style}", sans-serif`;
]]]
custom_fields:
title_card:
- position: absolute
- justify-self: start
- align-self: start
- z-index: 1
- width: max-content
- margin-left: 2%
- margin-top: "-4%"
thermostat:
- display: "[[[ return variables.var_climate_device ? 'flex' : 'none' ]]]"
- justify-content: center
- align-items: center
- height: 100%
- width: 100%
- padding-top: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "8vh" : "1vh";
]]]
- padding-left: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "0" : "1vw";
]]]
- padding-right: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "0" : "1vw";
]]]
controls:
- display: "[[[ return variables.var_has_multiple_climate ? 'flex' : 'none' ]]]"
- justify-self: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "center" : "end";
]]]
- align-self: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "end" : "center";
]]]
- justify-content: flex-start
- align-items: |-
[[[
// In landscape, align to start so cards begin at top
// In portrait, keep centered
return window.viewAssistResponsive?.orientation === "portrait" ? "center" : "flex-start";
]]]
- padding: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "1vh 0" : "0 2vw";
]]]
- overflow-y: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "hidden" : "auto";
]]]
- overflow-x: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "auto" : "hidden";
]]]
- max-height: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "25vh" : "84vh";
]]]
- max-width: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "93vw" : "18vw";
]]]
- margin-top: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ? "0" : "9vh";
]]]
- "-webkit-overflow-scrolling": touch
- scroll-behavior: smooth
no_climate:
- display: "[[[ return variables.var_climate_device ? 'none' : 'flex' ]]]"
- justify-content: center
- align-items: center
- color: white
- text-align: center
custom_fields:
title_card:
card:
type: markdown
content: |-
[[[
if (!variables.var_climate_device) {
return "## Climate Control";
}
const state = hass.states[variables.var_climate_device];
const name = state?.attributes?.friendly_name || variables.var_climate_device.replace('climate.', '');
return `## ${name}`;
]]]
card_mod:
style: |-
[[[
const isPortrait = window.viewAssistResponsive?.orientation === "portrait";
const fontSize = isPortrait ? "320%" : "280%";
return `
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
ha-markdown {
color: white !important;
text-align: left !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
}
ha-markdown h2 {
margin: 0 !important;
font-size: ${fontSize} !important;
font-weight: 400 !important;
letter-spacing: 0.05em !important;
}
`;
]]]
thermostat:
card:
type: thermostat
entity: "[[[ return variables.var_climate_device ]]]"
card_mod:
style:
ha-state-control-climate-temperature$: |
.container {
--primary-text-color: white !important;
--secondary-text-color: white !important;
}
p.label,
p.label.secondary {
color: white !important;
}
.: |-
[[[
const isPortrait = window.viewAssistResponsive?.orientation === "portrait";
const zoomLevel = isPortrait ? "1.7" : "1.6";
return `
ha-card {
background: transparent !important;
height: 100% !important;
zoom: ${zoomLevel};
--mdc-ripple-hover-opacity: 0 !important;
--mdc-ripple-focus-opacity: 0 !important;
--mdc-ripple-press-opacity: 0 !important;
}
.title {
display: none !important;
}
.more-info {
color: white !important;
${isPortrait ? 'margin-top: 7vh !important;' : ''}
}
ha-state-control-climate-temperature {
--secondary-text-color: rgba(255, 255, 255, 0.9) !important;
--control-circular-slider-color: white !important;
--control-circular-slider-background: rgba(255, 255, 255, 0.3) !important;
}
`;
]]]
controls:
card:
type: |-
[[[
return window.viewAssistResponsive?.orientation === "portrait" ?
"horizontal-stack" : "vertical-stack";
]]]
cards: |-
[[[
if (!variables.var_has_multiple_climate) return [];
const devices = variables.var_all_climate_devices;
const maxDevices = Math.min(devices.length, 10);
const currentDevice = variables.var_climate_device;
const isPortrait = window.viewAssistResponsive?.orientation === "portrait";
const cards = [];
for (let i = 0; i < maxDevices; i++) {
const device = devices[i];
const isActive = device.entity_id === currentDevice;
cards.push({
type: "custom:button-card",
icon: device.icon,
name: device.name,
show_name: true,
show_icon: true,
tap_action: {
action: "call-service",
service: "view_assist.navigate",
service_data: {
device: variables.var_assistsat_entity,
path: (variables.var_dashboard || '/view-assist') + "/thermostat?climate=" + device.entity_id
}
},
styles: {
card: [
{ "background": isActive ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.2)" },
{ "border": isActive ? "3px solid white" : "2px solid rgba(255,255,255,0.5)" },
{ "border-radius": "1rem" },
{ "padding": "1.5rem" },
{ "width": isPortrait ? "29vw" : "16vw" },
{ "height": isPortrait ? "29vw" : "16vw" },
{ "backdrop-filter": "blur(15px)" },
{ "box-shadow": "0 4px 20px rgba(0,0,0,0.3)" },
{ "margin": isPortrait ? "0 0.5vw" : "0.75vh 0" },
{ "flex-shrink": "0" }
],
icon: [
{ "width": isPortrait ? "15vw" : "8vw" },
{ "height": isPortrait ? "15vw" : "8vw" },
{ "color": "white" },
{ "filter": "drop-shadow(0 2px 4px rgba(0,0,0,0.5))" }
],
name: [
{ "font-size": isPortrait ? "3.7vw" : "1.9vw" },
{ "color": "white" },
{ "margin-top": "0.75rem" },
{ "font-weight": "700" },
{ "text-shadow": "0 2px 9px rgba(0,0,0,0.8)" },
{ "line-height": "1.2" },
{ "letter-spacing": "0.02em" },
{ "overflow": "hidden" },
{ "text-overflow": "ellipsis" },
{ "white-space": "nowrap" },
{ "max-width": "100%" }
],
grid: [
{ "grid-template-areas": '"i" "n"' },
{ "grid-template-rows": "1fr auto" },
{ "gap": "0.5rem" }
]
}
});
}
return cards;
]]]
no_climate:
card:
type: markdown
content: |
## No Climate Devices Available
No thermostats found in your Home Assistant setup.
card_mod:
style: |
ha-card {
background: rgba(255,255,255,0.1);
color: white;
padding: 2rem;
border-radius: 1rem;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
