68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import React, {useState} from "react";
|
|
import {
|
|
CircularInput,
|
|
CircularTrack,
|
|
CircularProgress,
|
|
CircularThumb,
|
|
useCircularInputContext,
|
|
} from 'react-circular-input'
|
|
|
|
|
|
// Example of a custom component to display text on top of the thumb
|
|
|
|
function TemperatureDisplay() {
|
|
const {getPointFromValue, value} = useCircularInputContext();
|
|
const {x, y} = getPointFromValue();
|
|
const style = {
|
|
fontFamily: "Lato",
|
|
fontSize: "1.2rem",
|
|
color: "white",
|
|
|
|
};
|
|
|
|
return (
|
|
<text x={x} y={y} style={style}>
|
|
{Math.round(value * 100)}
|
|
</text>
|
|
)
|
|
}
|
|
|
|
export default function Sensor(props) {
|
|
const style = {width: "10rem", height: "10rem", position: "absolute", top: "0", left: "0"};
|
|
const valueStyle = {
|
|
fill: "#3e99ff",
|
|
fontSize: "2.5rem",
|
|
fontFamily: "Lato",
|
|
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
|
}
|
|
|
|
const nameStyle = {
|
|
fill: "#3e99ff",
|
|
fontSize: "1.5rem",
|
|
fontFamily: "Lato",
|
|
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
|
|
}
|
|
const [value, setValue] = useState(0.25);
|
|
|
|
return (
|
|
<CircularInput
|
|
value={value}
|
|
onChange={setValue}
|
|
style={style}
|
|
>
|
|
<CircularTrack/>
|
|
<CircularProgress/>
|
|
<CircularThumb/>
|
|
|
|
<text style={valueStyle} x={100} y={100} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
|
{Math.round(value * props.device.maxValue)}{props.device.units}
|
|
</text>
|
|
<text style={nameStyle} x={100} y={150} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
|
{props.device.name}
|
|
</text>
|
|
</CircularInput>
|
|
)
|
|
}
|
|
|
|
|