feat: polish life os cards and voice stack
This commit is contained in:
parent
66362c7176
commit
0edf8c3fef
21 changed files with 3681 additions and 502 deletions
|
|
@ -1,4 +1,13 @@
|
|||
<div data-weather-card style="font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace); background:#ffffff; color:#111827; padding:14px 16px;">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'BlexMono Nerd Font Mono';
|
||||
src: url('/card-templates/upcoming-conditions-live/assets/BlexMonoNerdFontMono-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px;">
|
||||
<div data-weather-subtitle style="font-size:0.86rem; line-height:1.35; color:#4b5563; font-weight:600;">Loading…</div>
|
||||
<span data-weather-status style="font-size:0.8rem; line-height:1.2; font-weight:700; color:#6b7280; white-space:nowrap;">Loading…</span>
|
||||
|
|
@ -9,24 +18,22 @@
|
|||
<span data-weather-unit style="font-size:1.05rem; font-weight:700; color:#4b5563; padding-bottom:0.28rem;">°F</span>
|
||||
</div>
|
||||
|
||||
<div data-weather-condition style="font-size:1rem; line-height:1.3; font-weight:700; color:#1f2937; margin-bottom:10px; text-transform:capitalize;">--</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 12px;">
|
||||
<div>
|
||||
<div style="font-size:0.74rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280;">Humidity</div>
|
||||
<div title="Humidity" style="font-family:'BlexMono Nerd Font Mono', monospace; font-size:0.86rem; line-height:1.2; color:#6b7280;"></div>
|
||||
<div data-weather-humidity style="margin-top:2px; font-size:1rem; line-height:1.25; font-weight:700; color:#111827;">--</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:0.74rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280;">Wind</div>
|
||||
<div title="Wind" style="font-family:'BlexMono Nerd Font Mono', monospace; font-size:0.86rem; line-height:1.2; color:#6b7280;"></div>
|
||||
<div data-weather-wind style="margin-top:2px; font-size:1rem; line-height:1.25; font-weight:700; color:#111827;">--</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:0.74rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280;">Pressure</div>
|
||||
<div data-weather-pressure style="margin-top:2px; font-size:1rem; line-height:1.25; font-weight:700; color:#111827;">--</div>
|
||||
<div title="Rain" style="font-family:'BlexMono Nerd Font Mono', monospace; font-size:0.86rem; line-height:1.2; color:#6b7280;"></div>
|
||||
<div data-weather-rain style="margin-top:2px; font-size:1rem; line-height:1.25; font-weight:700; color:#111827;">--</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:0.74rem; line-height:1.2; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280;">Updated</div>
|
||||
<div data-weather-updated style="margin-top:2px; font-size:0.94rem; line-height:1.25; font-weight:700; color:#374151;">--</div>
|
||||
<div title="UV" style="font-family:'BlexMono Nerd Font Mono', monospace; font-size:0.86rem; line-height:1.2; color:#6b7280;"></div>
|
||||
<div data-weather-uv style="margin-top:2px; font-size:1rem; line-height:1.25; font-weight:700; color:#111827;">--</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,22 +47,20 @@
|
|||
const subtitleEl = root.querySelector('[data-weather-subtitle]');
|
||||
const tempEl = root.querySelector('[data-weather-temp]');
|
||||
const unitEl = root.querySelector('[data-weather-unit]');
|
||||
const condEl = root.querySelector('[data-weather-condition]');
|
||||
const humidityEl = root.querySelector('[data-weather-humidity]');
|
||||
const windEl = root.querySelector('[data-weather-wind]');
|
||||
const pressureEl = root.querySelector('[data-weather-pressure]');
|
||||
const updatedEl = root.querySelector('[data-weather-updated]');
|
||||
const rainEl = root.querySelector('[data-weather-rain]');
|
||||
const uvEl = root.querySelector('[data-weather-uv]');
|
||||
const statusEl = root.querySelector('[data-weather-status]');
|
||||
if (!(subtitleEl instanceof HTMLElement) || !(tempEl instanceof HTMLElement) || !(unitEl instanceof HTMLElement) || !(condEl instanceof HTMLElement) || !(humidityEl instanceof HTMLElement) || !(windEl instanceof HTMLElement) || !(pressureEl instanceof HTMLElement) || !(updatedEl instanceof HTMLElement) || !(statusEl instanceof HTMLElement)) return;
|
||||
if (!(subtitleEl instanceof HTMLElement) || !(tempEl instanceof HTMLElement) || !(unitEl instanceof HTMLElement) || !(humidityEl instanceof HTMLElement) || !(windEl instanceof HTMLElement) || !(rainEl instanceof HTMLElement) || !(uvEl instanceof HTMLElement) || !(statusEl instanceof HTMLElement)) return;
|
||||
|
||||
const subtitle = typeof state.subtitle === 'string' ? state.subtitle : '';
|
||||
const configuredToolName = typeof state.tool_name === 'string' ? state.tool_name.trim() : '';
|
||||
const configuredForecastToolName = typeof state.forecast_tool_name === 'string' ? state.forecast_tool_name.trim() : 'exec';
|
||||
const forecastCommand = typeof state.forecast_command === 'string' ? state.forecast_command.trim() : '';
|
||||
const providerPrefix = typeof state.provider_prefix === 'string' ? state.provider_prefix.trim() : '';
|
||||
const temperatureName = typeof state.temperature_name === 'string' ? state.temperature_name.trim() : '';
|
||||
const humidityName = typeof state.humidity_name === 'string' ? state.humidity_name.trim() : '';
|
||||
const pressureName = typeof state.pressure_name === 'string' ? state.pressure_name.trim() : '';
|
||||
const windName = typeof state.wind_name === 'string' ? state.wind_name.trim() : '';
|
||||
const conditionLabel = typeof state.condition_label === 'string' ? state.condition_label.trim() : '';
|
||||
const refreshMsRaw = Number(state.refresh_ms);
|
||||
const refreshMs = Number.isFinite(refreshMsRaw) && refreshMsRaw >= 60000 ? refreshMsRaw : 24 * 60 * 60 * 1000;
|
||||
|
||||
|
|
@ -162,6 +167,18 @@
|
|||
return '';
|
||||
};
|
||||
|
||||
const stripExecFooter = (value) => String(value || '').replace(/\n+\s*Exit code:\s*\d+\s*$/i, '').trim();
|
||||
|
||||
const extractExecJson = (toolResult) => {
|
||||
const parsedText = stripExecFooter(toolResult?.content);
|
||||
if (!parsedText) return null;
|
||||
try {
|
||||
return JSON.parse(parsedText);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const resolveToolName = async () => {
|
||||
if (configuredToolName) return configuredToolName;
|
||||
if (!window.__nanobotListTools) return 'mcp_home_assistant_GetLiveContext';
|
||||
|
|
@ -187,24 +204,41 @@
|
|||
}) || null;
|
||||
};
|
||||
|
||||
const resolveForecastBundle = async () => {
|
||||
if (!forecastCommand) return null;
|
||||
const toolResult = await window.__nanobotCallTool?.(configuredForecastToolName || 'exec', {
|
||||
command: forecastCommand,
|
||||
max_output_chars: 200000,
|
||||
});
|
||||
const payload = extractExecJson(toolResult);
|
||||
return payload && typeof payload === 'object' ? payload : null;
|
||||
};
|
||||
|
||||
const firstForecastEntry = (bundle, key, metricKey = '') => {
|
||||
const source = bundle && typeof bundle === 'object' ? bundle[key] : null;
|
||||
const forecast = source && typeof source === 'object' && Array.isArray(source.forecast) ? source.forecast : [];
|
||||
if (!metricKey) {
|
||||
return forecast.length > 0 && forecast[0] && typeof forecast[0] === 'object' ? forecast[0] : null;
|
||||
}
|
||||
return forecast.find((entry) => entry && typeof entry === 'object' && entry[metricKey] !== null && entry[metricKey] !== undefined) || null;
|
||||
};
|
||||
|
||||
const refresh = async () => {
|
||||
const resolvedToolName = await resolveToolName();
|
||||
if (!resolvedToolName) {
|
||||
const errorText = 'Missing tool_name';
|
||||
setStatus('No tool', '#b91c1c');
|
||||
updatedEl.textContent = errorText;
|
||||
updateLiveContent({
|
||||
kind: 'weather',
|
||||
subtitle: subtitleEl.textContent || null,
|
||||
tool_name: null,
|
||||
temperature: null,
|
||||
temperature_unit: String(state.unit || '°F'),
|
||||
condition: null,
|
||||
humidity: null,
|
||||
wind: null,
|
||||
pressure: null,
|
||||
rain: null,
|
||||
uv: null,
|
||||
status: 'No tool',
|
||||
updated_at: errorText,
|
||||
error: errorText,
|
||||
});
|
||||
return;
|
||||
|
|
@ -212,7 +246,10 @@
|
|||
|
||||
setStatus('Refreshing', '#6b7280');
|
||||
try {
|
||||
const toolResult = await window.__nanobotCallTool?.(resolvedToolName, {});
|
||||
const [toolResult, forecastBundle] = await Promise.all([
|
||||
window.__nanobotCallTool?.(resolvedToolName, {}),
|
||||
resolveForecastBundle(),
|
||||
]);
|
||||
const entries = parseLiveContextEntries(extractLiveContextText(toolResult)).filter((entry) => normalizeText(entry.domain) === 'sensor');
|
||||
const prefix = providerPrefix || 'OpenWeatherMap';
|
||||
const temperatureEntry = findEntry(entries, [
|
||||
|
|
@ -223,32 +260,29 @@
|
|||
humidityName,
|
||||
`${prefix} Humidity`,
|
||||
]);
|
||||
const pressureEntry = findEntry(entries, [
|
||||
pressureName,
|
||||
`${prefix} Pressure`,
|
||||
]);
|
||||
const windEntry = findEntry(entries, [
|
||||
windName,
|
||||
`${prefix} Wind speed`,
|
||||
`${prefix} Wind`,
|
||||
]);
|
||||
|
||||
const temperature = Number(temperatureEntry?.state);
|
||||
tempEl.textContent = Number.isFinite(temperature) ? String(Math.round(temperature)) : '--';
|
||||
unitEl.textContent = String(temperatureEntry?.attributes?.unit_of_measurement || state.unit || '°F');
|
||||
condEl.textContent = conditionLabel || `${prefix || 'Weather'} live context`;
|
||||
|
||||
const humidity = Number(humidityEntry?.state);
|
||||
humidityEl.textContent = Number.isFinite(humidity) ? `${Math.round(humidity)}%` : '--';
|
||||
const windSpeed = Number(windEntry?.state);
|
||||
const windUnit = String(windEntry?.attributes?.unit_of_measurement || 'mph');
|
||||
windEl.textContent = Number.isFinite(windSpeed) ? `${windSpeed} ${windUnit}` : '--';
|
||||
const pressure = Number(pressureEntry?.state);
|
||||
pressureEl.textContent = Number.isFinite(pressure)
|
||||
? `${pressure} ${String(pressureEntry?.attributes?.unit_of_measurement || '').trim()}`.trim()
|
||||
: '--';
|
||||
const updatedText = new Date().toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
updatedEl.textContent = updatedText;
|
||||
subtitleEl.textContent = subtitle || prefix || 'Home Assistant live context';
|
||||
|
||||
const nwsEntry = firstForecastEntry(forecastBundle, 'nws');
|
||||
const uvEntry = firstForecastEntry(forecastBundle, 'uv', 'uv_index');
|
||||
const nwsSource = forecastBundle && typeof forecastBundle === 'object' && forecastBundle.nws && typeof forecastBundle.nws === 'object' ? forecastBundle.nws : null;
|
||||
|
||||
const windSpeed = Number(nwsEntry?.wind_speed);
|
||||
const windUnit = String(nwsSource?.wind_speed_unit || 'mph');
|
||||
windEl.textContent = Number.isFinite(windSpeed) ? `${Math.round(windSpeed)} ${windUnit}` : '--';
|
||||
|
||||
const rainChance = Number(nwsEntry?.precipitation_probability);
|
||||
rainEl.textContent = Number.isFinite(rainChance) ? `${Math.round(rainChance)}%` : '--';
|
||||
|
||||
const uvValue = Number(uvEntry?.uv_index);
|
||||
uvEl.textContent = Number.isFinite(uvValue) ? String(Math.round(uvValue)) : '--';
|
||||
|
||||
subtitleEl.textContent = subtitle || prefix || 'Weather';
|
||||
setStatus('Live', '#047857');
|
||||
updateLiveContent({
|
||||
kind: 'weather',
|
||||
|
|
@ -256,29 +290,32 @@
|
|||
tool_name: resolvedToolName,
|
||||
temperature: Number.isFinite(temperature) ? Math.round(temperature) : null,
|
||||
temperature_unit: unitEl.textContent || null,
|
||||
condition: condEl.textContent || null,
|
||||
humidity: Number.isFinite(humidity) ? Math.round(humidity) : null,
|
||||
wind: windEl.textContent || null,
|
||||
pressure: pressureEl.textContent || null,
|
||||
rain: rainEl.textContent || null,
|
||||
uv: Number.isFinite(uvValue) ? Math.round(uvValue) : null,
|
||||
status: 'Live',
|
||||
updated_at: updatedText,
|
||||
});
|
||||
} catch (error) {
|
||||
const errorText = String(error);
|
||||
setStatus('Unavailable', '#b91c1c');
|
||||
updatedEl.textContent = errorText;
|
||||
tempEl.textContent = '--';
|
||||
unitEl.textContent = String(state.unit || '°F');
|
||||
humidityEl.textContent = '--';
|
||||
windEl.textContent = '--';
|
||||
rainEl.textContent = '--';
|
||||
uvEl.textContent = '--';
|
||||
updateLiveContent({
|
||||
kind: 'weather',
|
||||
subtitle: subtitleEl.textContent || null,
|
||||
tool_name: resolvedToolName,
|
||||
temperature: null,
|
||||
temperature_unit: unitEl.textContent || null,
|
||||
condition: null,
|
||||
humidity: null,
|
||||
wind: null,
|
||||
pressure: null,
|
||||
rain: null,
|
||||
uv: null,
|
||||
status: 'Unavailable',
|
||||
updated_at: errorText,
|
||||
error: errorText,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue