= 0 && v_idx < visual_steps) visual_array[v_idx] = true;
+ }
+ }
+
+ let zone_bars = ``;
+
+ for(let i=0; i
`;
+ }
+ zone_bars += ``;
+
+ let l1 = (max_r * 0.25).toFixed(1) + 'm';
+ let l2 = (max_r * 0.50).toFixed(1) + 'm';
+ let l3 = (max_r * 0.75).toFixed(1) + 'm';
+ let l4 = max_r.toFixed(0) + 'm';
+
+ let labels = `
+ 0m${l1}${l2}${l3}${l4}
+
`;
+
+ return `${labels}${zone_bars}
`;
+ ]]]
+extra_styles: |
+ [[[
+ let is_on = entity && entity.state === 'on';
+
+ let dist_valid = variables.show_distance !== false && variables.distance && states[variables.distance] && states[variables.distance].state !== 'unknown' && states[variables.distance].state !== 'unavailable' && !isNaN(parseFloat(states[variables.distance].state));
+ let safe_dist = dist_valid ? parseFloat(states[variables.distance].state) : 0;
+ if (safe_dist > variables.max_supported_limit) safe_dist = variables.max_supported_limit;
+
+ let range_valid = variables.show_range !== false && variables.range && states[variables.range] && states[variables.range].state !== 'unknown' && states[variables.range].state !== 'unavailable' && !isNaN(parseInt(states[variables.range].state));
+ let bm = range_valid ? parseInt(states[variables.range].state) : 0;
+
+ let raw_zone = Math.floor(safe_dist / 0.25);
+ let is_zone_valid = range_valid ? ((bm & (1 << raw_zone)) !== 0) : true;
+
+ let status_text = 'CLEAR';
+ if (!entity) {
+ status_text = 'SETUP REQ';
+ } else if (is_on) {
+ if (dist_valid) {
+ status_text = `PRESENCE • ${safe_dist.toFixed(1)}m`;
+ } else {
+ status_text = 'PRESENCE';
+ }
+ }
+
+ let color = is_on ? (is_zone_valid ? '0, 229, 255' : '255, 82, 82') : '158, 158, 158';
+
+ let env_parts = [];
+ let c_temp = '128, 128, 128';
+ let c_hum = '128, 128, 128';
+ let c_lux = '128, 128, 128';
+
+ if (variables.show_environment !== false && variables.temp && states[variables.temp]) {
+ let st = states[variables.temp].state;
+ if (st !== 'unknown' && st !== 'unavailable') {
+ let v = parseFloat(st);
+ if (!isNaN(v)) {
+ env_parts.push(`${v.toFixed(1)}°C`);
+ if (v < variables.temp_low) c_temp = '66, 165, 245';
+ else if (v < variables.temp_mid) c_temp = '255, 235, 59';
+ else if (v < variables.temp_high) c_temp = '255, 167, 38';
+ else c_temp = '239, 83, 80';
+ }
+ }
+ }
+
+ if (variables.show_environment !== false && variables.humidity && states[variables.humidity]) {
+ let st = states[variables.humidity].state;
+ if (st !== 'unknown' && st !== 'unavailable') {
+ let v = parseFloat(st);
+ if (!isNaN(v)) {
+ env_parts.push(`${v.toFixed(0)}%`);
+ if (v < variables.hum_low) c_hum = '255, 167, 38';
+ else if (v <= variables.hum_high) c_hum = '66, 165, 245';
+ else c_hum = '255, 167, 38';
+ }
+ }
+ }
+
+ if (variables.show_environment !== false && variables.lux && states[variables.lux]) {
+ let st = states[variables.lux].state;
+ if (st !== 'unknown' && st !== 'unavailable') {
+ let v = parseFloat(st);
+ if (!isNaN(v)) {
+ env_parts.push(`${v.toFixed(0)}lx`);
+ c_lux = v < variables.lux_min ? '120, 144, 156' : (v > variables.lux_max ? '255, 235, 59' : '212, 225, 87');
+ }
+ }
+ }
+
+ let b2_text = env_parts.join(' • ');
+ let display_b2 = env_parts.length > 0 ? 'block' : 'none';
+ let bg_gradient = `linear-gradient(90deg, rgba(${c_temp}, 0.15) 0%, rgba(${c_hum}, 0.15) 50%, rgba(${c_lux}, 0.2) 100%)`;
+
+ return `
+ #card {
+ --appliance-color: ${color};
+ }
+
+ #badge1 {
+ display: block;
+ background: rgba(var(--appliance-color), 0.07);
+ color: var(--primary-text-color);
+ border-top: 1px solid var(--divider-color, rgba(128,128,128,0.2));
+ border-bottom: 1px solid var(--divider-color, rgba(128,128,128,0.2));
+ border-left: 2.5px solid rgb(var(--appliance-color));
+ border-radius: 6px !important;
+ }
+ #badge1::before { content: "${status_text}"; }
+
+ #badge2 {
+ display: ${display_b2};
+ background: ${bg_gradient};
+ color: var(--primary-text-color);
+ border-top: 1px solid var(--divider-color, rgba(128,128,128,0.2));
+ border-bottom: 1px solid var(--divider-color, rgba(128,128,128,0.2));
+ border-left: 2.5px solid rgb(${c_temp});
+ border-right: 2.5px solid rgb(${c_lux});
+ border-radius: 6px !important;
+ }
+ #badge2::before { content: "${b2_text}"; }
+
+ @keyframes radar-spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ `;
+ ]]]
+
+```
+
+
+