The analog joystick adventure

At the end of the previse part, I told you I got some crazy idea of using esp. and html for a game – so apparently It was not that crazy – and it works.

using the VR valentine game by the IOT Makers Israel team I made adjustments to use the joystick https://dev.to/azure/how-to-build-a-w...

The game is based on a-frame which is a JavaScript framework for VR and 3D powered by the three.js library.
The game is served from an ESP8266 and there is a web socket open between the 2, and each change in the joystick is sent as a web socket message to the game.

off course it all just didn’t happen in one go, there were steps.

My first step was to set a web server sketch on the esp, that included events, which are a bit similar to socket, but short messages and only from the server to the page.
The next step was to connect the joystick buttons, if you want to know how to buttons work, you can watch it all in the first episode

once the buttons where connected I added the small joystick to control the direction of the camera. The next big thing, which took me the longest, was to figure out how to imitate the click of the mouse which in the original game is how you collect the hearts - so I can use the front trigger joy stick button instead.
I had to dig into the library itself and look how it was done in the courser section, and it’s all down to the canvas object with in the scene object.

As all of you probably know, the esp8266 has only one analog and this is why only the joystick Y-axis is working. On top of that, it seems that reading the analog slowed down the web service of the esp dramatically.
After I was done getting everything to work, the event service was not working well, and kept on disconnecting, and was replace with a web sockets. I still get some errors, but its way more stable this way.

My next big task will be to find the right analog multiplexer, I did ordered a few that were recommended to me. Hoping to get better results than when the esp is doing the analog read.
And I can always go with the known mcp3008.

And the progress on this stage is on this video 

At the end of the previse part, I mentioned adding an analog multiplexer, so we can read more than one analog input from the joystick. I choose 3 options, when ended up using the CD4051, which is an eight channel analog multiplexer.
In the video I cove the data sheet of the IC.
Starting with its functional Diagrams, showing the truth table used to set the input channel.
Through the IC pinout and pin uses.
I first run a test on Arduino uno, to make it easier.
Then move the setup to the esp and in the end adjust the code of the game, so I can use the joystick to move in space both x & y.
I defiantly need to solder the setup, it’s a wire madness.

And I want a better game that fit the joystick.
The demo was a great start But it’s time to create something new

Here is the video of this 

In this video – the analog joystick gets upgraded to BLE using esp32.

I wanted the esp to host the game using a web server but couldn’t find the time to make the game more interesting and playable. Some comments on the previous video suggested an interface for a computer, either USB or BLE. And I decided I will try the BLE first – this way I can play on any device. 

You can see me in the background trying a nice web flight simulator that support joystick. The esp32 is powered by a battery that is inside the 3d printed box.
https://www.geo-fs.com/geofs.php

I take you through the process I made to move to esp32, added some features and printed a 3d case for it.
I show the assembly process, and go over the code used for it.
The libraries I used for the BLE game pad is https://github.com/lemmingDev/ESP32-B...

And the MCP is https://github.com/adafruit/Adafruit_...

At the end of the previse part, I told you I got some crazy idea of using esp. and html for a game – so apparently It was not that crazy – and it works. using the VR valentine game by the IOT Makers Israel team I made adjustments to use the joystick https://dev.to/azure/how-to-build-a-webvr-game-with-a-frame-4ifg

The game is based on a-frame which is a JavaScript framework for VR and 3D powered by the  three.js library. The game is served from an ESP8266 and there is a web socket open between the 2, and each change in the joystick is sent as a web socket message to the game. off course it all just didn’t happen in one go, there were steps. My first step was to set a web server sketch on the esp, that included events, which are a bit similar to socket, but short messages and only from the server to the page. The next step was to connect the joystick buttons, if you want to know how to buttons work, you can watch it all in the first episode

once the buttons where connected I added the small joystick to control the direction of the camera.
The next big thing, which took me the longest, was to figure out how to imitate the click of the mouse which in the original game is how you collect the hearts - so I can use the front trigger joy stick button instead. I had to dig into the library itself and look how it was done in the courser section, and it’s all down to the canvas object with in the scene object.

As all of you probably know, the esp8266 has only one analog and this is why only the joystick Y-axis is working. On top of that, it seems that reading the analog slowed down the web service of the esp dramatically.

After I was done getting everything to work, the event service was not working well, and kept on disconnecting, and was replace with a web sockets. I still get some errors, but its way more stable this way. My next big task will be to find the right analog multiplexer, I did ordered a few that were recommended to me.  Hoping to get better results than when the esp is doing the analog read.
And I can always go with the known mcp3008.

I need to work out a game worthy of the joystick. So if you got ideas, or want to help out, please feel free to drop me a line in the comments and if you haven’t done it by now, please subscribe or give a thumbs up and see you next time.

After many adventures I finally manged to get a proper readings from the analog. 

at first I tried to work it out using a 555 IC in monostable configuration and to read the result using the pulsein command.

My first big task was to find the right circuit, I had one major hardware limitation, and that is the 100K vcc connected potentiometer.

The second most important limitation I had was that I wanted the total of both the High and Low period to be as short and possible, yet leaving me enough scale on the High part.

After searching and few trials and errors, I ended up with this circuit.

Down there between the wires there is a 555 IC, one of the oldest most used IC till today. The setup is monostable, and the output is red by the Arduino using the pulsein command.

What you are seeing in the serial monitor is the pulsein result of both the High and Low square wave length of time in microseconds. The potentiometer, valued at 100K ohm, will control the length of the HIGH period. As you can see when I move it, the High period changes. Running from 6 to about 50, which gives more than enough scale to work with. 

After running the test with a potentiometer it was time to connect the joy stick and see if I get proper results.

Now at this stage I was getting unstable reads, mainly from the scroller on the side.

After a conversation with my friend Ofer, that pointed out that the 555 and analog are both using a voltage divider and why won’t I go back to analog. I did. I first took an 100K ohm resistor and working with voltage dividing formula to calculate the value of the variant resistor I was able to get some reasonable values. Link for this post in the description. Out of this value I could see the possibility of calculate, at some accuracy, what is the position of the x & y of the joystick. Now that worked well with the x & y, but when tested on the side scroller, I find it to get thrown out of balance at the edge of the scroller

My first guess was that unlike the x&y this one seem to have to full range of the potentiometer and its due to the none linear change in resistance.

I added another 100K ohm resistor, so the diving id done between 100K to 100K + potentiometer resistance value. It gave much better result across the board. The last step was to decide what will be the edges of all the x& y in value, I add to trim thing up a bit, 

I still have to deiced what to do with it now, I originally thought of moving some thing physically,  but in the last few days I'm thinking of maybe using esp and serve a html game out of it, using the joystick as the game controller. 

This is how the setting file in the video looks like 

#define BUT_TRIGGER 14 //1110
#define BUT_TRIG_R  11 //1011
#define BUT_TRIG_C  7  //0111
#define BUT_TRIG_L  13 //1101
#define BUT_UP      0  //0000
#define BUT_DOWN    8  //1000
#define BUT_LEFT    12 //1100
#define BUT_RIGHT   4  //0100

#define MAX_X1 190
#define MIN_X1 110

#define MAX_Y1 185 
#define MIN_Y1 105

#define MAX_Y2 184 
#define MIN_Y2 104

and this is the main code 

#include "joyStickSettings.h"

#define BUT_A1_PIN 4
#define BUT_A2_PIN 5
#define BUT_B1_PIN 6
#define BUT_B2_PIN 7

#define JOY1_X A8
#define JOY1_Y A9
#define JOY2_Y A10

int joy1_x,joy1_y,joy2_y;

// include the library header
#include <openGLCD.h>


int getAnalogPosition(byte analogChannel) {
  int analogValue = analogRead(analogChannel);
  return (102300) / analogValue - 100;
}


void setup()
{
  Serial.begin(115200);
  Serial.println("System started");
  pinMode(BUT_A1_PIN, INPUT);
  pinMode(BUT_A2_PIN, INPUT);
  pinMode(BUT_B1_PIN, INPUT);
  pinMode(BUT_B2_PIN, INPUT);

  // Initialize the GLCD
  GLCD.Init();
  // Select the font for the default text area
  GLCD.SelectFont(Callibri10);
  GLCD.print("-JOYSTICK TEST-");


}

void loop()
{
  //read buttons
  byte butState = 128;
  butState |= digitalRead(BUT_A1_PIN);
  butState |= digitalRead(BUT_A2_PIN) << 1;
  butState |= digitalRead(BUT_B1_PIN) << 2;
  butState |= digitalRead(BUT_B2_PIN) << 3;

  // read analog
  joy1_x = constrain(getAnalogPosition(JOY1_X),MIN_X1,MAX_X1);
  joy1_y = constrain(getAnalogPosition(JOY1_Y),MIN_Y1,MAX_Y1);
  joy2_y = constrain(getAnalogPosition(JOY2_Y),MIN_Y2,MAX_Y2);
  

  GLCD.CursorTo(0, 2);
  GLCD.print(butState, BIN);
  GLCD.print(" ");
  switch (butState - 128) {
    case BUT_TRIGGER:
      GLCD.print("TRIGGER");
      break;
    case BUT_TRIG_R:
      GLCD.print("R-TRIG");
      break;
    case BUT_TRIG_C:
      GLCD.print("C-TRIG");
      break;
    case BUT_TRIG_L:
      GLCD.print("L-TRIG");
      break;
    case BUT_UP:
      GLCD.print("UP");
      break;
    case BUT_DOWN:
      GLCD.print("DOWN");
      break;
    case BUT_LEFT:
      GLCD.print("LEFT");
      break;
    case BUT_RIGHT:
      GLCD.print("RIGHT");
      break;
      default :
      GLCD.print("        ");
  }


  GLCD.print("    ");
  // print X1
  GLCD.CursorTo(0, 3);
  GLCD.print("Joy1_X : ");
  GLCD.print(map(joy1_x,MIN_X1,MAX_X1,0,100));
  GLCD.print("  ");
  // print Y1
  GLCD.CursorTo(0, 4);
  GLCD.print("Joy1_Y : ");
  GLCD.print(map(joy1_y,MIN_Y1,MAX_Y1,0,100));
  GLCD.print("  ");
  
  GLCD.CursorTo(0, 5);
  GLCD.print("Joy2_Y : ");
  GLCD.print(map(joy2_y,MIN_Y2,MAX_Y2,0,100));
  GLCD.print("  ");
}