Analog Meters to display CPU and memory load

While this is a old project from 2019, I decided to make a more responsive one, after my friend Tyrone mentioned a project somewhere on the internet (forgot where).
Time to dust off this project!

2019 version

Above version worked but was slow.
I used a python script to send values to de controller.

Memory setup was the same.

Below my new schematic, using an opamp to drive the analog meter.

Untested design .. Yeah I got bored on new year’s eve

Utilizing a MCP41000 digital potmeter and a LM358 signal amplifier I hope to get a more responsive setup.

Input to display MQTT and maybe Serial.

Old version

Added group control to my Mobile Pong game.

Two player mobile pong using secure mqtt I made a few months ago.

Today I tested my group playing mode while at family to celebrate xmas.

I was filming during testing to get responses. I can’t post this because of everyone being in the shot.

What worked:

  • Response of multiple mobile phones was good
  • Measuring average movement worked great
    (3 People moving up and one down? – going up)
  • 8 Players tested

To do:

  • Iphones have a problem sending tilt, I’ve got a problem with Iphones in general 🙂
  • Screen timeout, I have to add javascript to keep the mobile device screen on. No problem
  • Number of players on the left and number of players on the right visible in the screen. Do-able
  • Timeout for disappearing phones! ..
  • QR join code on the play screen
  • Starting ball futher away from paddle, to give player more time to react

Nice to have:

  • Muliple games at the same time. Now hard coded.
  • Manual
  • ?

Too many services/ports/ip numbers in your network to remember?

Use a web server with a simple php script.

<?php
$host = $_SERVER['HTTP_HOST'];

$redirects = [
    'torrent.local'     => 'http://192.168.1.1:9091/',
    'nzb.local'     => 'http://192.168.1.1:8080/',
    'squeezebox.local'  => 'https://192.168.1.2:9000/',
    'squeeze.local'  => 'https://192.168.1.2:9000/',
];

if (isset($redirects[$host])) {
    header("Location: " . $redirects[$host], true, 302);
    exit;
}

http_response_code(404);
echo "Unknown host";

Add your webservers IP number to your local DNS server or hosts file

192.168.1.4 torrent.local
192.168.1.4 nzb.local
192.168.1.4 squeeze.local
192.168.1.4 squeezebox.local

Now you can use http://nzb.local in your browser and you will be redirected to http://serverip:port
No need to remember IP numbers or ports

Made a JavaScript plugin for Hydra

Control your effects using MQTT.

You can add anything to control your effects using RotaryEncoders, sensors and other data values.

I’m fixing the code to make use of free MQTT servers on the internet.
Then I’ll post the JavaScript in the Hydra forum or discord.


Calling the JavaScript in https://hydra.ojack.xyz/ website

https://gist.githubusercontent.com/fashice/2098d1301117b86caed94aca8f2101ff/raw/7d2a7300e7ddf42d4f1793f693dbb517e09bd2d8/gistfile1.txt
change mqtt server and add to hydra using
await loadScript("https://domain/script.js¨);

Giving people ability to control my Xmas lights

At the WHY2025 hackers event, we used bigred’s antenna pole to make a huge sign using leds.

It gave me the idea to make a pole which displays digital “fireworks” using leds.
Fireworks are becoming illegal the next year in the Netherlands, I think.

So why not going digital?
12 Meter pole, 300 Leds.

There is a QR code and a website link mentioned on a page at the gate.
10 presets to select via a website.

Notification on my TV

While waiting for the first visitor I made a magnetic game.
Using a bunch of magnets, and 3D printed hexagon rings.
Two players try to place magnets in a small area without moving the others. If magnets slam together, you have more pieces to place.
(Below, last player has to take those 6 pieces)

CODE for website index.html

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WLED Mast</title>

<style>
body {
    background: #111;
    color: #fff;
    font-family: Arial;
    margin: 0;
    padding: 20px;
    text-align: center;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
button {
    padding: 25px;
    font-size: 22px;
    border-radius: 20px;
    border: none;
    background: #333;
    color: #fff;
    font-weight: bold;
}
button:active {
    background: #555;
}
</style>
</head>

<body>

<h1>WLED Mast</h1>

<div class="grid">
    <button onclick="run('b1')">off</button>
    <button onclick="run('b2')">fireworks</button>
    <button onclick="run('b3')">sound<BR>reactive</button>
    <button onclick="run('b4')">bounch-balls</button>
    <button onclick="run('b5')">fire</button>
    <button onclick="run('b6')">juggle</button>
    <button onclick="run('b7')">swing</button>
    <button onclick="run('b8')">sparkle</button>
    <button onclick="run('b9')">popcorn</button>
    <button onclick="run('b10')">comet</button>
</div>

<script>
const API_KEY = "misuse-prevent";

function run(action) {
    fetch(`/action.php?action=${action}&key=${API_KEY}`)
        .then(r => r.json())
        .then(j => console.log(j))
        .catch(err => alert("Error"));
}
</script>

</body>
</html>

CODE for Wled API

<?php

$public_api_key = "misuse-prevent";
if (!isset($_GET['key']) || $_GET['key'] !== $public_api_key) {
    http_response_code(401);
    die("Unauthorized");
}

$action = $_GET['action'] ?? null;

// Map 10 buttons → WLED preset numbers
$allowed_actions = [
    "b1"  => 19,
    "b2"  => 22,
    "b3"  => 23,
    "b4"  => 20,
    "b5"  => 21,
    "b6"  => 3,
    "b7"  => 8,
    "b8"  => 2,
    "b9"  => 4,
    "b10" => 14
];

if (!$action || !isset($allowed_actions[$action])) {
    http_response_code(400);
    die("Invalid action");
}

$preset = $allowed_actions[$action];

// ---- WLED IP address ----
$wled_ip = "http://WLEDDEVICEIP";   // <-- CHANGE THIS

// API endpoint
$url = $wled_ip . "/win&PL=" . $preset;

// Call WLED directly
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($ch, CURLOPT_TIMEOUT, 2);

$response = curl_exec($ch);
$error = curl_error($ch);
curl_close($ch);

header("Content-Type: application/json");

if ($error) {
    echo json_encode(["ok" => false, "error" => $error]);
} else {
    echo json_encode(["ok" => true, "preset" => $preset]);
}

An idea I had to detect and count pages

One of my old ideas, never made or tested.
I saw a post on Reddit with this question, I decided to post a little drawing using my idea.

Center of below picture shows pages (the lines), with coppertape going front to back and connect to following page

Inductive copper tape

Taking resistors of the same value, you’ll get a logarithmic voltage divider.
If you want the values evenly spaced, to make sure you are not misreading the value you have to make the resistors more like:
10k,6k,3k3,2k5,2k,1k68,1k5

Strudel and Hydra

(Live real time using text (code) to make music and visuals)

Last week, I discovered Strudel.
I was playing around with it and thought: “This would be perfect for Tyrone”.
He is/was the main musical artist in our Group.

Strudel REPL is a web-based, live coding environment for creating music, based on the Tidal Cycles pattern language. It allows users to write and edit code in a browser to instantly hear the music it produces, with features like visual feedback and an interactive tutorial to help beginners and experts. The “REPL” stands for Read-Eval-Print Loop, a common term for interactive programming environments where you can type code, and the system immediately evaluates it and prints the result. 

Check it out on : https://strudel.cc/

Below a strudel example

I can make some simple patterns, but I discovered that it can be used multiuser with realtime synthesizer named Hydra.
I’m better doing visuals, than creating realtime digital music.
Check out https://www.henriaanstoot.nl/?s=shaders – for my previous shader programming posts.
(I love playing real instruments, let’s keep it that way.)

Hydra video synth is a free, open-source, live-coding environment for creating real-time visuals that runs in a web browser. It uses JavaScript and WebGL to allow users to “patch” together different visual sources and transformations, similar to an analog modular synthesizer, to generate effects like video feedback, generative patterns, and audio-reactive visuals. 

It is JavaScript being compiled to WebGL

So using https://flok.cc we can start a multiuser session with realtime live coding.

So the first test session, learning to use Hydra and Strudel together over the internet. Plan is to do a live session for others using a screen projector.

Left Tyrone (Strudel) right me with Hydra.

In the last few days, I made some examples using hydra.

These examples use Microphone for sound reactive, and Webcam for embedded effects.
NOTE: These are only in your browser session, nothing is being recorded/stored.

You can check some examples here :

https://media.henriaanstoot.nl/hydra/

UPDATE : Controlling Hydra input using my DIY Midi Controller (see other post) (Music is NOT related, no microphone input)

Strudel midi input with lpf volume and room controls.

let cc = await midin(1)
note("c a f e").lpf(cc(7).range(0, 1000)).room(cc(3).range(0, 10)).sound("sawtooth")