Week 11 - Interfaces

For intrefaces week I am not going to do something that will be included in my final project, but I can still use some of my ready made PONG components to demonstrate some interfacing.

Since I have been developing web interfaces for almost 12 years, I don't find this week particularly educative for me so I would hands down just do the bare minimum and spend more time on my final project design.

Embedded Side

The idea is to be able to show the PONG score at any given time based on the data provided by the Arduino board that drives the LED matrix. Since I already partly developed the game, the task would be roughly equivalent to adding a Serial.println() to the game program and to connect it to some Node.js server that consumes it. So I modified my goal() function to be:

Copycopy code to clipboard
1void goal(bool isPlayerOne) {
2  Serial.println(isPlayerOne);
3  pixels.setBrightness(100);
4  COLOR goalColor = isPlayerOne ? RED : GREEN;
5  int delayVal = 50;
6
7  // blink goal
8  showMatrix(screen);
9  delay(500);
10  for (int i=0; i<3; ++i) {
11    undraw(ball_y, ball_x);
12    delay(200);
13    showMatrix(screen);
14    draw(ball_y, ball_x, WHITE);
15    delay(200);
16    showMatrix(screen);
17  }
18  
19  for (int i=0; i<COLS; ++i) {
20    for (int j=0; j<ROWS; ++j) {
21      draw(j, i, goalColor);
22    }
23    showMatrix(screen);
24    delay(delayVal);
25  }
26
27  for (int i=0; i<ROWS; ++i) {
28    for (int j=0; j<COLS; ++j) {
29      undraw(i, j);
30    }
31    showMatrix(screen);
32    delay(delayVal);
33  }
34  newGame();
35}

So now everytime a player scores a goal I pass a boolean isPlayerOne that indicates who scored the goal. This should be enough for the display.

Server Side

I am using Express.js to create the app. Essentially my server only needs to listen to the Serial communication and identify new goals, then to parse it to a client so that it can consume and display it in whatever way.

In order to communicate continuously with my client, I would need to create some socket connection. I decided to use the Socket.IO library that makes this type of communication very easy. I am also using the JS library for Serial communication called Serialport. So now essentially all I have to do is:

Copycopy code to clipboard
1io.on('connection', (socket) => {
2      port.on("open", () => {
3        console.log('serial port open');
4      });
5
6      parser.on('data', data =>{
7        socket.emit("data", data);
8      });
9});

And indeed I am receiving the Serial prints on my Node server! so now the last part is to integrate some web GUI.

Client Side

I designed a super simple scoreboard using CSS, and now I just need to connect to my socket to consume the Serial data. The serial would only output a boolean that indicates whether the goal is player one or not (player two). So my JS code will look something like:

Copycopy code to clipboard
1var playerOneScore = 0;
2var playerTwoScore = 0;
3
4socket.on("data", function(data) {
5    if (data === true) { // player one goal
6        playerOneScore ++;
7        var item = document.getElementById("left");
8        item.textContent = playerOneScore.toString();
9    } else { // player two goal
10        playerTwoScore ++;
11        var item = document.getElementById("right");
12        item.textContent = playerTwoScore.toString();
13    }
14});

Great! let's test if it works:

Yep! I am able to receive and display the data from my Arduino!

Files

• score.zip