mirror of
https://github.com/bendtherules/multimeter-connect-web.git
synced 2026-08-18 22:03:12 +00:00
Version with audio and buzz
This commit is contained in:
+9
-9
@@ -1,22 +1,22 @@
|
||||
import './globals.css'
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import "./globals.css";
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+314
-101
@@ -1,113 +1,326 @@
|
||||
import Image from 'next/image'
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import {
|
||||
TParsedDMMResponse,
|
||||
debounceReadingFunc,
|
||||
parseDMMBuffer,
|
||||
startBluetoothCoonection as startBluetoothConnection,
|
||||
} from "@/helpers/parseDMM";
|
||||
import { startBuzz } from "@/helpers/buzzSound";
|
||||
import {
|
||||
MutableRefObject,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
} from "react";
|
||||
|
||||
export function SpeakerOnIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function SpeakerOffIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EyeIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MegaphoneIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function useBuzzSound() {}
|
||||
|
||||
export function useStateWithRef<TState>(
|
||||
initialValue: TState,
|
||||
): [TState, Dispatch<SetStateAction<TState>>, MutableRefObject<TState>] {
|
||||
const [value, setValue] = useState<TState>(initialValue);
|
||||
const valueRef = useRef<TState>(initialValue);
|
||||
valueRef.current = value;
|
||||
|
||||
return [value, setValue, valueRef];
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
|
||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
||||
Get started by editing
|
||||
<code className="font-mono font-bold">src/app/page.tsx</code>
|
||||
</p>
|
||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
||||
<a
|
||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{' '}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className="dark:invert"
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
const [printedValue, setPrintedValue] = useState<string | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const [liveValue, setLiveValue] = useState<string | undefined>(undefined);
|
||||
const [isMute, setIsMute, isMuteRef] = useStateWithRef<boolean>(false);
|
||||
const stopBuzzRef = useRef<(() => void) | undefined>(undefined);
|
||||
|
||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
|
||||
let [selectedVoice, setSelectedVoice, selectedVoiceRef] = useStateWithRef<
|
||||
string | undefined
|
||||
>(undefined);
|
||||
let [allVoices, setAllVoices] = useState<SpeechSynthesisVoice[]>();
|
||||
let multimeterBluetoothDeviceRef = useRef<BluetoothDevice | undefined>(
|
||||
undefined,
|
||||
);
|
||||
let multimeterDisconnectRef = useRef<(() => void) | undefined>(undefined);
|
||||
|
||||
const [showDisconnect, setShowDisconnect] = useState(false);
|
||||
const showConnect = !showDisconnect;
|
||||
|
||||
function resetStatusAfterDisconnect() {
|
||||
if (multimeterBluetoothDeviceRef.current !== undefined) {
|
||||
// Only announce once
|
||||
speak("Multimeter disconnected");
|
||||
}
|
||||
multimeterBluetoothDeviceRef.current = undefined;
|
||||
multimeterDisconnectRef.current = undefined;
|
||||
setLiveValue(undefined);
|
||||
setPrintedValue(undefined);
|
||||
setShowDisconnect(false);
|
||||
}
|
||||
|
||||
function speak(value: string) {
|
||||
let speech = new SpeechSynthesisUtterance();
|
||||
speech.lang = "en";
|
||||
speech.text = value;
|
||||
speech.voice =
|
||||
allVoices?.find(
|
||||
({ voiceURI }) => voiceURI === selectedVoiceRef.current,
|
||||
) || null;
|
||||
speech.volume = isMuteRef.current ? 0 : 1;
|
||||
window.speechSynthesis.speak(speech);
|
||||
}
|
||||
|
||||
function handleConnectClick() {
|
||||
const debouncedLogAndSpeak = debounceReadingFunc((value) => {
|
||||
value = value as string;
|
||||
setPrintedValue(value);
|
||||
console.log(value);
|
||||
speak(value.replace("-", "Minus "));
|
||||
}, 700);
|
||||
|
||||
function handleBuzz(parsedDMMresponse: TParsedDMMResponse) {
|
||||
const { isBuzz, isDiode } = parsedDMMresponse;
|
||||
// If BUZZ sign & not DIODE sign & not mute
|
||||
if (isBuzz && !isDiode && !isMuteRef.current) {
|
||||
// Multimeter is buzzing, reciprocate
|
||||
const { stop } = startBuzz();
|
||||
stopBuzzRef.current = stop;
|
||||
} else {
|
||||
stopBuzzRef.current?.();
|
||||
}
|
||||
}
|
||||
|
||||
function onNotify(bufferAsArray: number[]) {
|
||||
const parsedDMMresponse = parseDMMBuffer(bufferAsArray);
|
||||
const printValue = parsedDMMresponse.toString();
|
||||
// Set live value
|
||||
setLiveValue(printValue);
|
||||
|
||||
// Debounced announce value
|
||||
debouncedLogAndSpeak(printValue);
|
||||
|
||||
// Buzz, if needed
|
||||
handleBuzz(parsedDMMresponse);
|
||||
}
|
||||
startBluetoothConnection({
|
||||
onDisconnect: () => resetStatusAfterDisconnect(),
|
||||
onNotify,
|
||||
}).then((obj) => {
|
||||
multimeterBluetoothDeviceRef.current = obj.multimeterBluetoothDevice;
|
||||
multimeterDisconnectRef.current = obj.disconnect;
|
||||
setShowDisconnect(true);
|
||||
speak("Connected");
|
||||
});
|
||||
}
|
||||
|
||||
function handleDisconnectClick() {
|
||||
if (multimeterDisconnectRef.current) {
|
||||
console.log("Calling disconnect...");
|
||||
multimeterDisconnectRef.current();
|
||||
|
||||
resetStatusAfterDisconnect();
|
||||
} else {
|
||||
console.log("Disconnect is not set");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function _updateAllVoices() {
|
||||
// Get List of Voices
|
||||
const tempAllVoices = window.speechSynthesis.getVoices();
|
||||
const allEnglishVoices = tempAllVoices.filter(({ lang }) =>
|
||||
lang.startsWith("en"),
|
||||
);
|
||||
setAllVoices(allEnglishVoices);
|
||||
|
||||
if (allEnglishVoices.length > 0) {
|
||||
// Initially set the First Voice in the Array.
|
||||
setSelectedVoice(allEnglishVoices[0].name);
|
||||
}
|
||||
}
|
||||
|
||||
_updateAllVoices();
|
||||
window.speechSynthesis.onvoiceschanged = () => {
|
||||
_updateAllVoices();
|
||||
};
|
||||
}, [setSelectedVoice]);
|
||||
|
||||
function handleMuteClick() {
|
||||
setIsMute(true);
|
||||
}
|
||||
|
||||
function handleUnmuteClick() {
|
||||
setIsMute(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center p-12">
|
||||
<div className="flex flex-col items-center mb-12">
|
||||
<Image
|
||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
src="/dmm-speaker-icon.png"
|
||||
alt="Multimeter speaker Logo"
|
||||
className="dark:invert pb-4"
|
||||
width={150}
|
||||
height={150}
|
||||
priority
|
||||
/>
|
||||
<h1 className="font-mono text-2xl">Multimeter Speaker</h1>
|
||||
</div>
|
||||
|
||||
<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<div className="mb-4">
|
||||
<p
|
||||
title="Live value"
|
||||
className="mb-8 flex flex-row items-center min-w-[200px] text-lg font-bold"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Docs{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<span className="pr-2">
|
||||
<EyeIcon />
|
||||
</span>
|
||||
<span>{liveValue || "----"}</span>
|
||||
</p>
|
||||
<p
|
||||
title="Announced value (debounced)"
|
||||
className="mb-8 flex flex-row items-center min-w-[200px] text-lg font-bold"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Learn{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Templates{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Explore the Next.js 13 playground.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Deploy{' '}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
<span className="pr-2">
|
||||
<MegaphoneIcon />
|
||||
</span>
|
||||
<span>{printedValue || "----"}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
{showConnect ? (
|
||||
<button
|
||||
className="bg-white text-green-500 py-2 px-3 mx-4 rounded-sm border-green-500 border-2 border-solid"
|
||||
onClick={handleConnectClick}
|
||||
>
|
||||
Connect bluetooth
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="bg-white text-red-500 py-2 px-3 mx-4 rounded-sm border-red-500 border-2 border-solid"
|
||||
onClick={handleDisconnectClick}
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-8 flex flex-col sm:flex-row items-center">
|
||||
<label className="mb-2 sm:mb-0 flex flex-col sm:flex-row items-center">
|
||||
<span className="mx-2 mb-2 sm:mb-0">Voice:</span>
|
||||
<select
|
||||
name="voice"
|
||||
className="mx-2 px-1 border-gray-200 border-2 border-solid rounded-sm"
|
||||
value={selectedVoice}
|
||||
onChange={(e) => setSelectedVoice(e.target.value)}
|
||||
>
|
||||
{allVoices?.map(({ name, voiceURI }) => (
|
||||
<option key={voiceURI} value={voiceURI}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{!isMute ? (
|
||||
<button
|
||||
title="Mute audio"
|
||||
className="bg-white text-gray-500 py-1 px-1 mx-4"
|
||||
onClick={handleMuteClick}
|
||||
>
|
||||
<SpeakerOnIcon />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
title="Unmute audio"
|
||||
className="bg-white text-red-400 py-1 px-1 mx-4"
|
||||
onClick={handleUnmuteClick}
|
||||
>
|
||||
<SpeakerOffIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
// The browser will limit the number of concurrent audio contexts
|
||||
// So be sure to re-use them whenever you can
|
||||
const myAudioContext = new AudioContext();
|
||||
let lastOscillatorNode: OscillatorNode | undefined = undefined;
|
||||
|
||||
/**
|
||||
* Helper function to emit a beep sound in the browser using the Web Audio API.
|
||||
*
|
||||
* @param {number} duration - The duration of the beep sound in milliseconds.
|
||||
* @param {number} frequency - The frequency of the beep sound.
|
||||
* @param {number} volume - The volume of the beep sound.
|
||||
*
|
||||
* @returns {Promise} - A promise that resolves when the beep sound is finished.
|
||||
*/
|
||||
export function startBuzz({
|
||||
duration = 500,
|
||||
frequency = 2800,
|
||||
volume = 70,
|
||||
onEnd = () => {},
|
||||
} = {}) {
|
||||
if (lastOscillatorNode !== undefined) {
|
||||
lastOscillatorNode.stop(myAudioContext.currentTime + duration * 0.001);
|
||||
return {
|
||||
stop: () => lastOscillatorNode?.stop(),
|
||||
};
|
||||
} else {
|
||||
let oscillatorNode = myAudioContext.createOscillator();
|
||||
let gainNode = myAudioContext.createGain();
|
||||
oscillatorNode.connect(gainNode);
|
||||
|
||||
// Set the oscillator frequency in hertz
|
||||
oscillatorNode.frequency.value = frequency;
|
||||
|
||||
// Set the type of oscillator
|
||||
oscillatorNode.type = "sine";
|
||||
gainNode.connect(myAudioContext.destination);
|
||||
|
||||
// Set the gain to the volume
|
||||
gainNode.gain.value = volume * 0.01;
|
||||
|
||||
// Start audio with the desired duration
|
||||
oscillatorNode.start(myAudioContext.currentTime);
|
||||
oscillatorNode.stop(myAudioContext.currentTime + duration * 0.001);
|
||||
|
||||
// Resolve the promise when the sound is finished
|
||||
oscillatorNode.onended = () => {
|
||||
lastOscillatorNode = undefined;
|
||||
onEnd();
|
||||
};
|
||||
|
||||
lastOscillatorNode = oscillatorNode;
|
||||
|
||||
return {
|
||||
stop: () => oscillatorNode.stop(),
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
export const DEFAULT_SERVICE_UUID = "0000fff0-0000-1000-8000-00805f9b34fb";
|
||||
export const DEFAULT_CHARACTERISTIC_UUID =
|
||||
"0000fff4-0000-1000-8000-00805f9b34fb";
|
||||
|
||||
// eslint-disable-next-line max-len
|
||||
export const XOR_KEYS = [
|
||||
parseInt("41", 16),
|
||||
parseInt("21", 16),
|
||||
parseInt("73", 16),
|
||||
parseInt("55", 16),
|
||||
parseInt("a2", 16),
|
||||
parseInt("c1", 16),
|
||||
parseInt("32", 16),
|
||||
parseInt("71", 16),
|
||||
parseInt("66", 16),
|
||||
parseInt("aa", 16),
|
||||
parseInt("3b", 16),
|
||||
];
|
||||
|
||||
export const CHAR_MAP = {
|
||||
"0": [1, 1, 1, 0, 1, 1, 1].join(""),
|
||||
"1": [0, 0, 1, 0, 0, 1, 0].join(""),
|
||||
"2": [1, 0, 1, 1, 1, 0, 1].join(""),
|
||||
"3": [1, 0, 1, 1, 0, 1, 1].join(""),
|
||||
"4": [0, 1, 1, 1, 0, 1, 0].join(""),
|
||||
"5": [1, 1, 0, 1, 0, 1, 1].join(""),
|
||||
"6": [1, 1, 0, 1, 1, 1, 1].join(""),
|
||||
"7": [1, 0, 1, 0, 0, 1, 0].join(""),
|
||||
"8": [1, 1, 1, 1, 1, 1, 1].join(""),
|
||||
"9": [1, 1, 1, 1, 0, 1, 1].join(""),
|
||||
A: [1, 1, 1, 1, 1, 1, 0].join(""),
|
||||
U: [0, 0, 0, 0, 1, 1, 1].join(""),
|
||||
T: [0, 1, 0, 1, 1, 0, 1].join(""),
|
||||
O: [0, 0, 0, 1, 1, 1, 1].join(""),
|
||||
L: [0, 1, 0, 0, 1, 0, 1].join(""), // Part of "OL" text
|
||||
};
|
||||
|
||||
export type KNOWN_CHARS = keyof typeof CHAR_MAP;
|
||||
export type KNOWN_UNKNOWN_CHARS = KNOWN_CHARS | undefined;
|
||||
|
||||
export const LCD_CHAR_BIT_POSITIONS = [
|
||||
[24, 25, 36, 37, 26, 38, 39], // 0
|
||||
[32, 33, 44, 45, 34, 46, 47], // 1
|
||||
[40, 41, 52, 53, 42, 54, 55], // 2
|
||||
[48, 49, 60, 61, 50, 62, 63], // 3
|
||||
];
|
||||
|
||||
export const LCD_DECIMAL_POINT_BIT_POSITIONS = [35, 43, 51];
|
||||
|
||||
export const LCD_SYMBOL_BIT_POSITION_MAP = {
|
||||
Minus: 27,
|
||||
Buzz: 28,
|
||||
Relative: 30,
|
||||
BatteryLow: 31,
|
||||
Diode: 56,
|
||||
Celsius: 57,
|
||||
Fahrenheit: 58,
|
||||
Hold: 59,
|
||||
NanoFarad: 64,
|
||||
MicroFarad: 65,
|
||||
MilliFarad: 66,
|
||||
Farad: 67,
|
||||
AC: 68,
|
||||
Percentage: 69,
|
||||
Min: 70,
|
||||
Max: 71,
|
||||
Ampere: 72,
|
||||
DC: 73,
|
||||
MilliVolt: 74,
|
||||
Volt: 75,
|
||||
MegaOhm: 76,
|
||||
KiloOhm: 77,
|
||||
Ohm: 78,
|
||||
Hertz: 79,
|
||||
MilliAmp: 84,
|
||||
MicroAmp: 85,
|
||||
Auto: 87,
|
||||
};
|
||||
|
||||
export type KNOWN_SYMBOLS = keyof typeof LCD_SYMBOL_BIT_POSITION_MAP;
|
||||
@@ -0,0 +1,358 @@
|
||||
import {
|
||||
CHAR_MAP,
|
||||
DEFAULT_CHARACTERISTIC_UUID,
|
||||
DEFAULT_SERVICE_UUID,
|
||||
KNOWN_CHARS,
|
||||
KNOWN_UNKNOWN_CHARS,
|
||||
LCD_CHAR_BIT_POSITIONS,
|
||||
LCD_DECIMAL_POINT_BIT_POSITIONS,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP,
|
||||
XOR_KEYS,
|
||||
} from "./constants";
|
||||
import { getBit, getBitAsBoolean, zeroPad } from "./utils";
|
||||
|
||||
export function parseDMMBuffer(bufferAsNumberArray: number[]) {
|
||||
const partsXOR = bufferAsNumberArray.map(
|
||||
(rawVal, index) => rawVal ^ XOR_KEYS[index],
|
||||
);
|
||||
|
||||
const partsBin = partsXOR.map((val) => val.toString(2));
|
||||
const partsBinPadded = partsBin.map((t) => zeroPad(t, 8));
|
||||
|
||||
const parsedBooleanString = partsBinPadded.join("");
|
||||
|
||||
return {
|
||||
parsedBooleanString,
|
||||
getBitAsBoolean(binIndex: number) {
|
||||
return getBitAsBoolean(this.parsedBooleanString, binIndex);
|
||||
},
|
||||
char0: readCharacter(parsedBooleanString, 0),
|
||||
char1: readCharacter(parsedBooleanString, 1),
|
||||
char2: readCharacter(parsedBooleanString, 2),
|
||||
char3: readCharacter(parsedBooleanString, 3),
|
||||
decimalPointIndex: getDecimalPointIndex(parsedBooleanString),
|
||||
isMinus: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Minus,
|
||||
),
|
||||
isBuzz: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Buzz,
|
||||
),
|
||||
isRelative: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Relative,
|
||||
),
|
||||
isBatteryLow: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.BatteryLow,
|
||||
),
|
||||
isDiode: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Diode,
|
||||
),
|
||||
isHold: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Hold,
|
||||
),
|
||||
isAuto: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Auto,
|
||||
),
|
||||
isMin: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Min,
|
||||
),
|
||||
isMax: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Max,
|
||||
),
|
||||
isAC: getBitAsBoolean(parsedBooleanString, LCD_SYMBOL_BIT_POSITION_MAP.AC),
|
||||
isDC: getBitAsBoolean(parsedBooleanString, LCD_SYMBOL_BIT_POSITION_MAP.DC),
|
||||
isCelsius: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Celsius,
|
||||
),
|
||||
isFahrenheit: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Fahrenheit,
|
||||
),
|
||||
isNanoFarad: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.NanoFarad,
|
||||
),
|
||||
isMicroFarad: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MicroFarad,
|
||||
),
|
||||
isMilliFarad: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MilliFarad,
|
||||
),
|
||||
isFarad: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Farad,
|
||||
),
|
||||
isPercentage: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Percentage,
|
||||
),
|
||||
isHertz: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Hertz,
|
||||
),
|
||||
isMilliVolt: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MilliVolt,
|
||||
),
|
||||
isVolt: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Volt,
|
||||
),
|
||||
isMegaOhm: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MegaOhm,
|
||||
),
|
||||
isKiloOhm: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.KiloOhm,
|
||||
),
|
||||
isOhm: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Ohm,
|
||||
),
|
||||
isMilliAmp: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MilliAmp,
|
||||
),
|
||||
isMicroAmp: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.MicroAmp,
|
||||
),
|
||||
isAmpere: getBitAsBoolean(
|
||||
parsedBooleanString,
|
||||
LCD_SYMBOL_BIT_POSITION_MAP.Ampere,
|
||||
),
|
||||
get isFullAuto() {
|
||||
return (
|
||||
this.char0 === "A" &&
|
||||
this.char1 === "U" &&
|
||||
this.char2 === "T" &&
|
||||
this.char3 === "O"
|
||||
);
|
||||
},
|
||||
get unit() {
|
||||
if (this.isCelsius) {
|
||||
return "Celsius";
|
||||
} else if (this.isFahrenheit) {
|
||||
return "Fahrenheit";
|
||||
} else if (this.isNanoFarad) {
|
||||
return "NanoFarad";
|
||||
} else if (this.isMicroFarad) {
|
||||
return "MicroFarad";
|
||||
} else if (this.isMilliFarad) {
|
||||
return "MilliFarad";
|
||||
} else if (this.isFarad) {
|
||||
return "Farad";
|
||||
} else if (this.isPercentage) {
|
||||
return "Percentage";
|
||||
} else if (this.isHertz) {
|
||||
return "Hertz";
|
||||
} else if (this.isMilliVolt) {
|
||||
return "MilliVolt";
|
||||
} else if (this.isVolt) {
|
||||
return "Volt";
|
||||
} else if (this.isMegaOhm) {
|
||||
return "MegaOhm";
|
||||
} else if (this.isKiloOhm) {
|
||||
return "KiloOhm";
|
||||
} else if (this.isOhm) {
|
||||
return "Ohm";
|
||||
} else if (this.isMilliAmp) {
|
||||
return "MilliAmp";
|
||||
} else if (this.isMicroAmp) {
|
||||
return "MicroAmp";
|
||||
} else if (this.isAmpere) {
|
||||
return "Ampere";
|
||||
}
|
||||
},
|
||||
get value() {
|
||||
const parsedChars = [
|
||||
this.char0 && parseInt(this.char0),
|
||||
this.char1 && parseInt(this.char1),
|
||||
this.char2 && parseInt(this.char2),
|
||||
this.char3 && parseInt(this.char3),
|
||||
];
|
||||
let value: number | undefined = undefined;
|
||||
if (
|
||||
parsedChars.every(
|
||||
(tmpChar) => typeof tmpChar === "number" && !isNaN(tmpChar),
|
||||
)
|
||||
) {
|
||||
value =
|
||||
(parsedChars[0] as number) * 1000 +
|
||||
(parsedChars[1] as number) * 100 +
|
||||
(parsedChars[2] as number) * 10 +
|
||||
(parsedChars[3] as number) * 1;
|
||||
|
||||
if (this.decimalPointIndex !== undefined) {
|
||||
value = value / 10 ** (3 - this.decimalPointIndex);
|
||||
}
|
||||
|
||||
if (this.isMinus) {
|
||||
value = -value;
|
||||
}
|
||||
}
|
||||
return value;
|
||||
},
|
||||
get isOutOfLimit() {
|
||||
return this.char1 == "0" && this.char2 == "L";
|
||||
},
|
||||
toString() {
|
||||
if (this.value !== undefined && this.unit !== undefined) {
|
||||
return `${this.value} ${this.unit} ${this.isAC ? "(AC)" : ""}${
|
||||
this.isDC ? "(DC)" : ""
|
||||
}`;
|
||||
} else if (this.isOutOfLimit) {
|
||||
return `Out of Limit (${this.unit})`;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export type TParsedDMMResponse = ReturnType<typeof parseDMMBuffer>;
|
||||
|
||||
class MultimeterError extends Error {}
|
||||
|
||||
export async function startBluetoothCoonection({
|
||||
serviceUUID = DEFAULT_SERVICE_UUID,
|
||||
characteristicUUID = DEFAULT_CHARACTERISTIC_UUID,
|
||||
onNotify = printBLENotify,
|
||||
onDisconnect = () => {},
|
||||
} = {}) {
|
||||
let multimeterBluetoothDevice: BluetoothDevice | null = null;
|
||||
multimeterBluetoothDevice = await navigator.bluetooth.requestDevice({
|
||||
filters: [
|
||||
{
|
||||
services: [serviceUUID],
|
||||
},
|
||||
],
|
||||
});
|
||||
if (multimeterBluetoothDevice === undefined) {
|
||||
throw new MultimeterError("Multimeter not selected");
|
||||
}
|
||||
if (multimeterBluetoothDevice.gatt === undefined) {
|
||||
throw new MultimeterError("BLE: Gatt is not available");
|
||||
}
|
||||
let gatt = await multimeterBluetoothDevice.gatt.connect();
|
||||
multimeterBluetoothDevice.addEventListener("gattserverdisconnected", (ev) => {
|
||||
console.log("Multimeter disconnected");
|
||||
onDisconnect();
|
||||
});
|
||||
|
||||
let service = await gatt.getPrimaryService(serviceUUID);
|
||||
let characteristic = await service.getCharacteristic(characteristicUUID);
|
||||
|
||||
async function notifyCallback() {
|
||||
const buffer: ArrayBuffer | undefined = characteristic.value?.buffer;
|
||||
if (buffer == undefined) {
|
||||
throw new MultimeterError("BLE: Notify buffer is undefined");
|
||||
}
|
||||
const bufferAsArray = [...new Uint8Array(buffer)];
|
||||
onNotify(bufferAsArray);
|
||||
}
|
||||
|
||||
if (characteristic.properties.notify) {
|
||||
characteristic.addEventListener(
|
||||
"characteristicvaluechanged",
|
||||
notifyCallback,
|
||||
);
|
||||
await characteristic.startNotifications();
|
||||
}
|
||||
|
||||
return {
|
||||
multimeterBluetoothDevice,
|
||||
service,
|
||||
characteristic,
|
||||
removeEventListener() {
|
||||
characteristic.removeEventListener(
|
||||
"characteristicvaluechanged",
|
||||
notifyCallback,
|
||||
);
|
||||
},
|
||||
disconnect() {
|
||||
multimeterBluetoothDevice?.gatt?.disconnect();
|
||||
onDisconnect();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const debouncedLog = debounceReadingFunc((value) => console.log(value));
|
||||
export function printBLENotify(bufferAsArray: number[]) {
|
||||
const printValue = parseDMMBuffer(bufferAsArray).toString();
|
||||
debouncedLog(printValue);
|
||||
}
|
||||
|
||||
export function debounceReadingFunc(
|
||||
callbackFn: (input: string | number) => void,
|
||||
debounceMillis = 1000,
|
||||
) {
|
||||
let timerId: ReturnType<typeof setTimeout> | undefined = undefined;
|
||||
let lastReturnedValue: number | string | undefined = undefined;
|
||||
let lastNewValue: number | string | undefined = undefined;
|
||||
|
||||
return function debouncedReading(newValue: string | number | undefined) {
|
||||
if (newValue !== undefined && newValue !== lastNewValue) {
|
||||
if (timerId !== undefined) {
|
||||
clearTimeout(timerId);
|
||||
timerId = undefined;
|
||||
}
|
||||
|
||||
if (newValue !== lastReturnedValue) {
|
||||
timerId = setTimeout(() => {
|
||||
lastReturnedValue = newValue;
|
||||
timerId = undefined;
|
||||
|
||||
callbackFn(newValue);
|
||||
}, debounceMillis);
|
||||
}
|
||||
}
|
||||
lastNewValue = newValue;
|
||||
};
|
||||
}
|
||||
|
||||
export function readCharacter(
|
||||
binString: string,
|
||||
charIndex: number,
|
||||
): KNOWN_UNKNOWN_CHARS {
|
||||
if (charIndex >= LCD_CHAR_BIT_POSITIONS.length) {
|
||||
throw new Error("Character index is invalid");
|
||||
}
|
||||
const charBitPositions = LCD_CHAR_BIT_POSITIONS[charIndex];
|
||||
const receivedCharValueString = charBitPositions
|
||||
.map((tmpBitPosition) => getBit(binString, tmpBitPosition))
|
||||
.join("");
|
||||
|
||||
const foundKeyValue: [KNOWN_CHARS, string] | undefined = (
|
||||
Object.entries(CHAR_MAP) as Array<[KNOWN_CHARS, string]>
|
||||
).find(([_, matchingCharValue]) => {
|
||||
if (matchingCharValue == receivedCharValueString) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
if (foundKeyValue == undefined) {
|
||||
return undefined;
|
||||
}
|
||||
return foundKeyValue[0];
|
||||
}
|
||||
|
||||
export function getDecimalPointIndex(binString: string): number | undefined {
|
||||
const maybeDecimalPointIndex = LCD_DECIMAL_POINT_BIT_POSITIONS.findIndex(
|
||||
(tmpBitPosition) => getBitAsBoolean(binString, tmpBitPosition),
|
||||
);
|
||||
if (maybeDecimalPointIndex === -1) {
|
||||
return undefined;
|
||||
}
|
||||
return maybeDecimalPointIndex;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Pads number/string with zeros and returns string of required length.
|
||||
* @example `zeroPad('101', 8)` - converts boolean (string) to 8-sized byte (string)
|
||||
* @param num Number to pad
|
||||
* @param length Total length after padding
|
||||
* @returns zeropadded string
|
||||
*/
|
||||
export function zeroPad(num: number | string, length: number): string {
|
||||
return String(num).padStart(length, "0");
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets bit value from binary string
|
||||
* @param str Binary string
|
||||
* @param bitIndex Index of bit to get
|
||||
* @returns bit value
|
||||
*/
|
||||
export function getBit(str: string, bitIndex: number): number {
|
||||
const value = str[bitIndex];
|
||||
if (value == undefined) {
|
||||
throw new RangeError(`Index:${bitIndex} not found in ${str}`);
|
||||
}
|
||||
return Number(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets bit value as boolean from binary string
|
||||
* @param str Binary string
|
||||
* @param bitIndex Index of bit to get
|
||||
* @returns bit value as boolean
|
||||
*/
|
||||
export function getBitAsBoolean(str: string, bitIndex: number): boolean {
|
||||
return !!getBit(str, bitIndex);
|
||||
}
|
||||
|
||||
export function hexStringToNumberArray(rawString: string) {
|
||||
return rawString.split("-").map((val) => parseInt(val, 16));
|
||||
}
|
||||
|
||||
export function hexArrayToNumberArray(rawStrings: string[]) {
|
||||
return rawStrings.map((val) => parseInt(val, 16));
|
||||
}
|
||||
Reference in New Issue
Block a user