mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
simplicity...
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -11,8 +11,8 @@
|
|||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<meta name="apple-mobile-web-app-title" content="Roomba Rover" />
|
<meta name="apple-mobile-web-app-title" content="Roomba Rover" />
|
||||||
<title>Roomba Rover</title>
|
<title>Roomba Rover</title>
|
||||||
<script type="module" crossorigin src="/assets/index-B5kEZ6--.js"></script>
|
<script type="module" crossorigin src="/assets/index-CBy0XoKw.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-Cj_nGPpn.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-Cmi0595H.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -92,19 +92,6 @@ function rgbLuminance(rgb) {
|
|||||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||||
}
|
}
|
||||||
|
|
||||||
function swatchMatchesEntity(entity, swatch) {
|
|
||||||
const current = getEntityRgb(entity);
|
|
||||||
if (!current || !Array.isArray(swatch.rgb)) return false;
|
|
||||||
|
|
||||||
// Exact Home Assistant color values vary by bulb and color space, so use a
|
|
||||||
// small distance threshold. This keeps the selected swatch useful without
|
|
||||||
// pretending bulbs report the same RGB values that the UI originally sent.
|
|
||||||
const distance = Math.sqrt(
|
|
||||||
current.reduce((sum, value, index) => sum + (value - swatch.rgb[index]) ** 2, 0),
|
|
||||||
);
|
|
||||||
return distance < 55;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildTileStyle(entity, { unavailable, isOn, supportsColor }) {
|
function buildTileStyle(entity, { unavailable, isOn, supportsColor }) {
|
||||||
if (unavailable) return undefined;
|
if (unavailable) return undefined;
|
||||||
if (!isOn) return undefined;
|
if (!isOn) return undefined;
|
||||||
@@ -122,8 +109,6 @@ function buildTileStyle(entity, { unavailable, isOn, supportsColor }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function LampSwatch({ entity, swatch, disabled, onSetColor, onSetWhite }) {
|
function LampSwatch({ entity, swatch, disabled, onSetColor, onSetWhite }) {
|
||||||
const selected = entity.state === 'on' && swatchMatchesEntity(entity, swatch);
|
|
||||||
|
|
||||||
const handleClick = (event) => {
|
const handleClick = (event) => {
|
||||||
// Swatches live inside a tile that toggles the lamp when clicked. Stop the
|
// Swatches live inside a tile that toggles the lamp when clicked. Stop the
|
||||||
// event here so choosing a color is a single, unambiguous action instead of
|
// event here so choosing a color is a single, unambiguous action instead of
|
||||||
@@ -154,8 +139,9 @@ function LampSwatch({ entity, swatch, disabled, onSetColor, onSetWhite }) {
|
|||||||
title={`${swatch.label} ${entity.name || entity.id}`}
|
title={`${swatch.label} ${entity.name || entity.id}`}
|
||||||
aria-label={`Set ${entity.name || entity.id} to ${swatch.label}`}
|
aria-label={`Set ${entity.name || entity.id} to ${swatch.label}`}
|
||||||
className={cx(
|
className={cx(
|
||||||
'h-5 w-6 shrink-0 rounded-sm border transition-transform disabled:cursor-not-allowed disabled:opacity-40',
|
// The tile background already shows the Home Assistant-reported color,
|
||||||
selected ? 'border-white ring-1 ring-white/80' : 'border-white/35',
|
// so swatches are plain presets rather than a selected-state indicator.
|
||||||
|
'h-5 w-6 shrink-0 rounded-sm border border-white/80 transition-transform disabled:cursor-not-allowed disabled:opacity-40',
|
||||||
!disabled && 'hover:scale-110 hover:border-white',
|
!disabled && 'hover:scale-110 hover:border-white',
|
||||||
)}
|
)}
|
||||||
style={{ backgroundColor: rgbToCss(swatch.rgb) }}
|
style={{ backgroundColor: rgbToCss(swatch.rgb) }}
|
||||||
|
|||||||
Reference in New Issue
Block a user