Page 1 of 1
Simple Visualizer
Posted: Fri Oct 10, 2025 6:01 pm
by v864
I wanted a graphic equalizer display widget so I whipped one up with AI! Hudiy made this super easy and I'm very impressed.
Here's the widget definition from dashboards.json:
Code: Select all
{
"type": "web_static",
"size": "small_narrow",
"url" : "file:///home/car/hudiy-repo/viz/viz.html"
}
Here's the source for the single HTML file:
https://gist.github.com/DrewMikola/b4d1 ... c4ca68650d
Just copy that onto your Pi, adjust the paths as neccesary, and you're good to go. If you want something fancier just dump it into the AI tool of your choice (I used Grok for this) and have at it.
Cheers!
Image:
https://pasteboard.co/Qaeqzo9EeBGI.png
Re: Simple Visualizer
Posted: Mon Nov 24, 2025 11:18 pm
by k.s.deviate
Would you be willing to write a tutorial for this?
Simple Visualizer Mod
Posted: Tue Jan 20, 2026 8:38 pm
by k.s.deviate
Piggybacking off the simple Visualizer post -
viewtopic.php?t=86
Is there a way to capture the audio that Hudiy is outputting after the eq, to use with this visualizer html instead of using the microphone? A loopback or using a monitor? Running pw-cli ls Node, in my case only 2 options show available for input, Echo-Cancel Source and the Unitek usb sound card.
Or would this need to be accomplished as a standalone python app?
Along the standalone app route, is it, or can it be possible to minimize Hudiy to the desktop tray and in theory keep AA alive and playing audio? Along the same vein as using the ^ in a window to minimize.
Re: Simple Visualizer Mod
Posted: Tue Jan 20, 2026 11:43 pm
by hudiy
In PipeWire, every sink has its own monitor, which is visible in
pactl list sources. You can redirect any monitor (e.g. hudiy_equalizer_sink.monitor) to your virtual source and then use that source in your visualizer, for example:
Code: Select all
pactl load-module module-remap-source master=hudiy_equalizer_sink.monitor source_name=visualizer_source source_properties=device.description="Visualizer"
and then in HTML/JavaScript:
Code: Select all
let stream = await navigator.mediaDevices.getUserMedia({ audio: true }); // It is required for granting microphone permission in chromium
const devices = await navigator.mediaDevices.enumerateDevices();
const virtualMic = devices.find(device =>
device.kind === 'audioinput' &&
device.label.includes("Visualizer")
);
stream.getTracks().forEach(track => track.stop());
stream = await navigator.mediaDevices.getUserMedia({
audio: {
deviceId: { exact: virtualMic.deviceId },
}
});
