— weekly — 1 min read
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.
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:
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 goal8 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.
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:
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.
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:
1var playerOneScore = 0;2var playerTwoScore = 0;3
4socket.on("data", function(data) {5 if (data === true) { // player one goal6 playerOneScore ++;7 var item = document.getElementById("left");8 item.textContent = playerOneScore.toString();9 } else { // player two goal10 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!