Now, I’ve made a board with 16 modified buttons and some micropython code.
White = mole, green = hit in time, red = wrong button/out of time, rainbow = bonus points.
Now i have to think of a display and select buttons, to select the game mode and see the score.
Schematic
Above is a simplified schematic. See notes below.
Led rings are 8 not in example 12 (didn’t have that part in fritzing)
Led rings have 5V, GND, DI (data in) and DO (data out)
Led rings are connected in series, python code divides by 8
GPIO for buttons (16 yellow) have internal PICO pullup resistors
Todo: Screen and mode select
Game modes : Currently I can think of four.
1 Player mode – with bonus button – works kindda
2 Player mode – Green player 1 and Blue player 2 – need testing
2 Player mode (half playfield) … todo
Above with mixed random colors, press only GREEN (or blue) .. todo
1 Player mode – all random colors + bonus .. todo
1 Player mode – with bonus button – keep bonus pressed for 5 seconds to double, so you need to single hand press others. (Missing is reset bonus?!?) … todo
Button keeps lit until pressed .. do 10 in a row. Print fastest and average time… todo
I needed to change a lot to the javascript on the website to fix some stuff.
Fix IPhone control. (I hate iphone)
Fix screenlock timeout
Added meta refresh
The XMAS/Fireworks controller was often used, and I got notifications via my TV. (see other posts)
Now I want to see when MQTT movement when I’m in the livingroom. So I programmed a Wemos controller to blink the internal when MQTT messages are received.
CODE:
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
const char* ssid = "WIFIAP";
const char* password = "WIFIPASS";
const char* mqtt_server = "MQTTBROKER"; // MQTT broker IP
const char* mqtt_topic = "game/tilt";
WiFiClient espClient;
PubSubClient client(espClient);
String lastPayload = "";
void setup_wifi() {
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
}
void blinkLED() {
digitalWrite(LED_BUILTIN, LOW); // LED ON
delay(200);
digitalWrite(LED_BUILTIN, HIGH); // LED OFF
delay(200);
}
void callback(char* topic, byte* payload, unsigned int length) {
String message;
for (unsigned int i = 0; i < length; i++) {
message += (char)payload[i];
}
// Blink only if topic value changed
if (message != lastPayload) {
blinkLED();
lastPayload = message;
}
}
void reconnect() {
while (!client.connected()) {
if (client.connect("WemosClientMqttBlink")) {
client.subscribe(mqtt_topic);
} else {
delay(2000);
}
}
}
void setup() {
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, HIGH);
setup_wifi();
client.setServer(mqtt_server, 1883);
client.setCallback(callback);
}
void loop() {
if (!client.connected()) {
reconnect();
}
client.loop();
}
The plan is to hide these in the woods, and children have to find them using a scanner device.
3D printed scanner (model not mine, but changed to hold electronics
Using a ESP32 with bluetooth, using RSSI (strength of signal) I can limit the range of detection.
The order of finding the tags is important, so a hidden tag should not be found when another should be found first.
These tags, hidden in toys, should be placed in a treasure chest. (In order) Then lights and sounds should hint the kids that they have successfully completed the mission.
New version has a beeper on the left. .. sorry .. hayfever
So same detecting but even shorter range ESP is hidden in the Chest.
Some leds or a single blinking one should give hints about the distance of the object.
This weekend we went to Nerdland in Belgium. I saw a cool game when we had to wait before some talks started.
What is so special about pong? Well, half of the audience was playing the other part of the audience. 250 against 250 Multiplayer. It used mqtt websockets, and the audience mobile phones with tilting. Average of 33+ % choosing up? Paddle goes up, Center and down the same.
I think I can make it myself. So below my two days progression. MQTT via internet. Sound and score counter. Using the mobile phone’s tilt sensor.
I changed left and right because we sat in the wrong chairs.
Maybe I’m going to change it into some 3D maze game. Code soon
Using a mqtt server with websockets and a website with the Eclipse Paho JavaScript Client
Above video: Joystick sends movement through the internet to my mqtt server, laptop is fetching a webpage from one of my webservers. A piece of javascript connects via websockets to the mqtt server and realtime changes the displayed image.
I intend to display maps and views into a maze you can walk through. like: (shamelessly stolen image from the internet)
I already have written another piece of code which generates a maze, and tells you using samples which way to go.
CODE
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
var connected_flag=0
var mqtt;
var reconnectTimeout = 2000;
var host="MQTTSERVER";
var port=8084;
var sub_topic="web/#";
function onConnectionLost(){
connected_flag=0;
document.getElementById("status").innerHTML = "Connection to HQ Lost";
}
function onFailure(message) {
console.log("Failed");
setTimeout(MQTTconnect, reconnectTimeout);
}
function onMessageArrived(r_message){
var topic=r_message.destinationName;
document.getElementById("status").innerHTML = "";
if(topic=="web/mapviewer")
{
$(".deze").attr("src","tiles/" + r_message.payloadString + ".png");
}
}
function onConnected(recon,url){
console.log(" in onConnected " +reconn);
}
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
connected_flag=1
document.getElementById("status").innerHTML = "Connection made to HQ";
mqtt.subscribe(sub_topic);
}
function MQTTconnect() {
console.log("connecting to "+ host +" "+ port);
var x=Math.floor(Math.random() * 10000);
var cname="controlform-"+x;
//var cname="escape1";
mqtt = new Paho.MQTT.Client(host,port,cname);
var options = {
useSSL:true,
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
};
mqtt.onConnectionLost = onConnectionLost;
mqtt.onMessageArrived = onMessageArrived;
mqtt.connect(options);
return false;
}
function sub_topics(){
document.getElementById("messages").innerHTML ="";
if (connected_flag==0){
out_msg="<b>Not Connected so can't subscribe</b>"
console.log(out_msg);
document.getElementById("messages").innerHTML = out_msg;
return false;
}
var stopic= document.forms["subs"]["Stopic"].value;
console.log("Subscribing to topic ="+stopic);
mqtt.subscribe(stopic);
return false;
}
function send_message(msg,topic){
if (connected_flag==0){
out_msg="<b>Not Connected so can't send</b>"
console.log(out_msg);
document.getElementById("messages").innerHTML = out_msg;
return false;
}
var value=msg.value;
console.log("value= "+value);
console.log("topic= "+topic);
message = new Paho.MQTT.Message(value);
message.destinationName = "web/"+topic;
mqtt.send(message);
return false;
}
</script>
<style>
@media only screen and (max-width: 600px) {
div {
max-width: 320px;
}
img {
max-width: 320px;
}
}
div.imageview {
color: white;
background: gray;
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
</head>
<body onload="MQTTconnect()">
<div class=imageview>
<img class="deze" src="tiles/00.png">
<div id="status">Connection Status: Not Connected</div>
</div>
</body>
</html>
"If something is worth doing, it's worth overdoing."
