Public
Edited
Dec 19
viewof w = Weight()
w
Weight = () => {
const maxForce = 3.0;
const gramsPerForceUnit = 1000 / maxForce;
const output = htl.html`<output style="
font-size: 1.5em;
font-weight: bold;
margin: 10px 0;
display: block;
">`;
const status = htl.html`<div style="
color: #666;
margin-bottom: 10px;
">Click and press to measure</div>`;
const node = htl.html`<div style="font-family: system-ui, sans-serif;">
<div style="
padding: 20px;
border: 2px dashed #ccc;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
"
onmousedown=${handleForce}
onmousemove=${handleForce}
onmouseup=${handleReset}>
${status}
Current weight: ${output}g
</div>
</div>`;
function handleForce(event) {
if (typeof event.webkitForce !== "undefined") {
const force = event.webkitForce;
const grams = Math.round(force * gramsPerForceUnit);
set(node, grams);
status.textContent = "Measuring...";
event.target.style.background = "#e6f3ff";
event.target.style.borderColor = "#3b82f6";
} else {
status.textContent = "Force Touch not supported. Use Safari.";
event.target.style.background = "#fee2e2";
event.target.style.borderColor = "#ef4444";
}
}
function handleReset() {
status.textContent = "Click and press to measure";
event.target.style.background = "";
event.target.style.borderColor = "#ccc";
}
Object.defineProperty(node, "value", {
get() {
return +output.value || 0;
},
set(v) {
output.value = v;
}
});
// Set initial value to 0
node.value = 0;
return node;
}
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true }));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
