Tag Archives: game

Computer

Mqtt Pong

Leave a comment

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

Computer

WSS Websocket to MQTT updating website

Leave a comment

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>