week 14. Interface and application programming

This week's brief:

INDIVIDUAL ASSIGNMENT

JavaScript

#Code by Midlaj
#interface to connect the serial port and to send the values to the board. 
<script>
let port;
let writer;
let reader;
let toggle;

async function connectToSerial() {
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });

    #allows to send data to the serial device
    writer = port.writable.getWriter();  

    #reads incoming data
    reader = port.readable.getReader();  

  
    #decodes text from a stream of bytes
    const decoder = new TextDecoder();

    while(true) {
        const { value, done } = await reader.read();
        if (done) break;

 
#decoding stored data into a string
        const string = decoder.decode(value);
        document.getElementById('outputMsg').textContent += string;
    }
}

async function sendMessage() {
    const input = document.getElementById('input').value;
    if (!writer) return;

    const encoder = new TextEncoder();
    await writer.write(encoder.encode(input + '\n'));
    document.getElementById('input').value = ""
}

async function toggleLED() {
  if (!writer) return;

  const dataToSend = toggle ? '1' : '0'
  const encoder = new TextEncoder();
  writer.write(encoder.encode(dataToSend)).then(() => {
    if (dataToSend === '0') {
      document.getElementById('toggle').innerHTML = ``;
    } else {
      document.getElementById('toggle').innerHTML = ``;
    }
    toggle = !toggle;
  });
}

document.getElementById('serial').addEventListener('click', connectToSerial);
document.getElementById('upload').addEventListener('click', sendMessage);
document.getElementById('toggle').addEventListener('click', toggleLED);
<script>

Making our own Interface

This week i wanted to explore Pygame for making a game interface with the macropad i made during Output week.

As you can see there is an underlying game theme going on throughout the projects i have been doing. I wanted to get used to figuring out the logic required for programming and how the concept of interface works so that i can implement it into my final project . I thought , why not make a simple game and learn and see how much i would have to prep for the making the game for my final project . I already had an idea to somehow program the macropad to making it into a standalone gaming console. So basically this week opened up that oppurtunity to integrate the assignment and doing something fun!. So the goal for me this week was to make a snake game and control the movements using my macropad through serial communication. Whenever the game starts/stops ,snake eats the food or hits a wall the macropad should play a melody to denote the action . Additionally the addressable LEDs should light up when you lose the game. The main challenge is to make the macropad interact with the game on the screen through serial ports and vice versa.

Pygame

  python3 -m pip install -U pygame --user

PySerial

  pip install pyserial 

  # Importing Libraries 
import serial 
import time 
arduino = serial.Serial(port='COM4', baudrate=115200, timeout=.1) 
def write_read(x): 
	   arduino.write(bytes(x, 'utf-8')) 
	   time.sleep(0.05) 
	   data = arduino.readline() 
	   return data 
while True: 
	   num = input("Enter a number: ") # Taking input from user 
	   value = write_read(num) 
	   print(value) # printing the value 

        int x; 
        void setup() { 
          Serial.begin(115200); 
          Serial.setTimeout(1); 
        } 
        void loop() { 
          while (!Serial.available()); 
          x = Serial.readString().toInt(); 
          Serial.print(x + 1); 
        } 
        

Understanding Pygame

Arduino Code

  
//Code for sending data to python when a switch1 input is registered

#define switch1 26
#define switch2 28


int a = 0;
int b = 0;


bool SerUpdate;



void setup() {

  Serial.begin(9600);
  pinMode(switch1, INPUT);
  pinMode(switch2, INPUT);
  SerUpdate = false;
}

void loop() {
  a = digitalRead(switch1);
  b = digitalRead(switch2);
  if (a == LOW && !SerUpdate) {
    Serial.print("a");
    SerUpdate = true;

  } else if (b == LOW && !SerUpdate) {
    Serial.print("D");
    SerUpdate = true;
    delay(300);
  } else {

    SerUpdate = false;
  }
}

          
  

Python code

      
          #code for shifting positon of rectangle 
          #Code from Coding With Russ modified by namita 

          import pygame
          import sys
          import serial
          
          
          # to read serial data
          ser = serial.Serial('COM20', 9800, timeout=1)
          ser.readline()
          
          
          pygame.init()
          # for the display window
          SCREEN_H = 600
          SCREEN_W = 800
          screen = pygame.display.set_mode((SCREEN_W,SCREEN_H))
          pygame.display.set_caption("My Pygame Window")
          
          player = pygame.Rect((300,250,50,50))
          
          run = True
          while run:
              for event in pygame.event.get():
                  if event.type == pygame.QUIT:
                       run = False
                   
              pygame.draw.rect(screen,(128, 0, 128),player)
          
           # to receive
          
              input= ser.read() 
              swinput =str(input,'UTF-8') 
              # variable to store the incoming serial data
              print(swinput)
          
          
          # to send
          
          
          
          #  comparing the strings ,if they match the position shifts 
              if(swinput == "U"):
                  player.move_ip(0,-30)
          
              elif(swinput == "D"):
                  player.move_ip(-30,0) 
                 
              elif(swinput == "J"):
                  player.move_ip(30,0) 
                     
              elif(swinput == "A"):
                  player.move_ip(0,30) 
                 
          
              pygame.display.update()
              
          
          pygame.quit()
          sys.exit()       
          
  

SNAKE GAME

For Mapping the keys

Python Code (moving the snake onscreen using macropad)

      
#snake game 1st attempt to control usoing macropad

import pygame
import sys
import serial


ser = serial.Serial('COM20', 9800, timeout=1)
ser.readline()

pygame.init()

SCREEN_H = 600
SCREEN_W = 800
screen = pygame.display.set_mode((SCREEN_W,SCREEN_H))
pygame.display.set_caption("My Pygame Window")

player = pygame.Rect((300,250,50,50))

run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
             run = False
         
    pygame.draw.rect(screen,(128, 0, 128),player)

    datatosend = 

    input= ser.readline()
    swinput =str(input,'UTF-8')
    print(swinput)

    if(swinput == "UP"):
        player.move_ip(0,-30)

    elif(swinput == "DOWN"):
        player.move_ip(0,30) 
 

    pygame.display.update()

pygame.quit()
sys.exit()       
 

Arduino Code(moving the snake onscreen using macropad)

      //arduino ide code for up and down controllers 

      #define switch1 26
      #define switch2 18
      #define switch3 28
      #define switch4 14
      
      int a = 0;
      int b = 0;
      int c = 0;
      int d = 0;
      
      bool SerUpdate;
      
      
      
      void setup() {
      
        Serial.begin(9600);
        pinMode(switch1, INPUT);
        pinMode(switch2, INPUT);
        pinMode(switch3, INPUT);
        pinMode(switch4, INPUT);
       SerUpdate = false;
      
      }
      
      void loop() {
      a = digitalRead(switch1);
      b = digitalRead(switch2);
      c = digitalRead(switch3);
      d = digitalRead(switch4);
      
      
      
      
      
      if (a == LOW && !SerUpdate){
        Serial.print("UP");
        SerUpdate = true;
        delay(300);
        
      }else if (b == LOW && !SerUpdate) {
        Serial.print("JUMP");
        SerUpdate = true;
      delay(300);
      
      }else if (c == LOW && !SerUpdate) {
        Serial.print("DOWN");
        SerUpdate = true;
       delay(300);
      
      }else if (d == LOW && !SerUpdate) {
        Serial.print("ATTACK");
        SerUpdate = true;
        delay(300);
      
      
      }else
      
      
         SerUpdate = false;
      
      
      
        // delay(100);
      
      
      }
      
 

The Modified final Codes(as of now)

Python Code

  #snake game by edureka , modified by Namita
# to be controlled using an external macropad

  import pygame
  import time
  import random
  import serial
  
  
  # declared a null variable
  ser = ""  
  
  pygame.init()
   
  white = (255, 255, 255)
  yellow = (255, 255, 102)
  black = (211, 211, 211)
  red = (213, 50, 80)
  green = (0, 255, 0)
  blue = (21, 27, 84)
   
  dis_width = 600
  dis_height = 400
   
  dis = pygame.display.set_mode((dis_width, dis_height))
  pygame.display.set_caption('Snake Game by Edureka modified by Namita')
   
  #caption for display window
  
  clock = pygame.time.Clock()
   
  snake_block = 10
  snake_speed = 15
  #speed of snake 

  font_style = pygame.font.SysFont("lemonmilk", 25)
  score_font = pygame.font.SysFont("montserrat", 25) 
  #fonts for displaying 
  
   
  def Your_score(score):
      value = score_font.render("Your Score: " + str(score), True, white)
      dis.blit(value, [10, 0])
   
   
   
  def our_snake(snake_block, snake_list):
      # dis.blit(img, (snake_list[-1][0], snake_list[-1][1]))
      for x in snake_list:
          pygame.draw.rect(dis, black, [x[0], x[1], snake_block, snake_block])
   
   
  def message(msg, color):
      mesg = font_style.render(msg, True, color)
      dis.blit(mesg, [dis_width /6, dis_height / 3])
  
          
  def serialInit():
      global ser 
      ser = serial.Serial('COM20', 2000000  , timeout=1)
          # ser.read()
  def gameOver():
       ser.write(b'0')
  def gameRestart():
       ser.write(b'1')
  
  
  def gameLoop():
  #for checking is serial port is open/close
      serialInit()
      if ser.is_open:
          print("Serial port is open.")
      else:
          print("Serial port is closed.")
      ser.write(b'1')
      game_over = False
      game_close = False
   
  
      #position coordinates

      x1 = dis_width / 2
      y1 = dis_height / 2
   
      x1_change = 0
      y1_change = 0
   
      snake_List = []
      Length_of_snake = 1
   
      foodx = round(random.randrange(0, dis_width - snake_block) / 10.0) * 10.0
      foody = round(random.randrange(0, dis_height - snake_block) / 10.0) * 10.0
   
      while not game_over:
          
      
      #to quit or restart game
          while game_close == True:
              dis.fill(blue)
              message("You Lost! Press C-Play Again or Q-Quit", red)
              Your_score(Length_of_snake - 1)
              
              if ser.is_open:
                   ser.write(b'0')
                   ser.close()
              pygame.display.update()
  
              for event in pygame.event.get():
                  if event.type == pygame.KEYDOWN:
                      if event.key == pygame.K_q:
                          game_over = True
                          game_close = False
                          
                      if event.key == pygame.K_c:
                          message("Loading...", white)
                          gameLoop()
                         
          if ser.in_waiting > 0:
              input= ser.read()
              swinput =str(input,'UTF-8')
              print(swinput)
  
              if swinput == "D":
                  x1_change = -snake_block
                  y1_change = 0
              elif swinput == "J":
                      x1_change = snake_block
                      y1_change = 0
              elif swinput == "U":
                      y1_change = -snake_block
                      x1_change = 0
                      
              elif swinput == "A":
                      y1_change = snake_block
                      x1_change = 0
   #interfacing with macropad       
  
          
                          
          if x1 >= dis_width or x1 < 0 or y1 >= dis_height or y1 < 0:
              game_close = True
          x1 += x1_change
          y1 += y1_change
          dis.fill(blue)
          pygame.draw.rect(dis, green, [foodx, foody, snake_block, snake_block])
          snake_Head = []
          snake_Head.append(x1)
          snake_Head.append(y1)
          snake_List.append(snake_Head)
          if len(snake_List) > Length_of_snake:
              del snake_List[0]
      #If snake head touches the tail
          for x in snake_List[:-1]:
              if x == snake_Head:
                  game_close = True
   
          our_snake(snake_block, snake_List)
          Your_score(Length_of_snake - 1)
   
          pygame.display.update()
      #when snake encounters food 
          if x1 == foodx and y1 == foody:
              foodx = round(random.randrange(0, dis_width - snake_block) / 10.0) * 10.0
              foody = round(random.randrange(0, dis_height - snake_block) / 10.0) * 10.0
              Length_of_snake += 1
              ser.write(b'2')
   
          clock.tick(snake_speed)
   
      pygame.quit()
  
      quit()
  
  
   
  gameLoop()
  
   

Arduino IDE Code

// Code for pygame snake

#define switch1 26
#define switch2 18
#define switch3 28
#define switch4 14
//defining all the switches

#define ledPin 12 // neopixel pin

#include <Adafruit_NeoPixel.h> // addressable LED library
#ifdef __AVR__
#include <avr/power.h>  // Required for 16 MHz Adafruit Trinket
#endif
#include <LiquidCrystal.h> // library for LCD


// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS 4
Adafruit_NeoPixel pixels(NUMPIXELS,ledPin, NEO_GRB + NEO_KHZ800);

#define DELAYVAL 500
// Adafruit_NeoPixel strip(PIXEL_COUNT, PIXEL_PIN, NEO_GRB + NEO_KHZ800);


int a = 0;
int b = 0;
int c = 0;
int d = 0;

bool SerUpdate;  //for debouncing

int incoming; 

const int buzzerPin = 22;

const int rs = 6, en = 7, d4 = 13, d5 = 11, d6 = 9, d7 = 8;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {

  Serial.begin(2000000);
  pinMode(switch1, INPUT);
  pinMode(switch2, INPUT);
  pinMode(switch3, INPUT);
  pinMode(switch4, INPUT);
  SerUpdate = false;
  pixels.begin();  // INITIALIZE NeoPixel strip object 
  lcd.begin(2, 16);
  // Print a message to the LCD.
  lcd.print("START GAME");

}

void loop() {
  a = digitalRead(switch1);
  b = digitalRead(switch2);
  c = digitalRead(switch3);
  d = digitalRead(switch4);

  incoming = Serial.read(); // variable storing serial data sent from python code

  if (incoming > -1) {  
    Serial.println(incoming);
  }

  if (incoming == '0') { // if serial read as 0 , game over ( turns on led and plays the game over tune)
 
    gameover_seq();
    gamefail();
    lcd.print("GAME OVER");
    lcd.clear();
    delay(100);
    clearPixel();
  }

  if (incoming == '1') { // if serail is read as 1 , restarts the game(turns LED off and plays the startup  tune)

    clearPixel();
    startup();
    start_seq();
    // lcd.clear();
    // lcd.print("GAME OVER");

  }
  if (incoming == '2') { //serial when the snake eats food

    tone(buzzerPin, 3500, 10);
  }

// checking if switch is pressed
  if (a == LOW && !SerUpdate) { 
    Serial.print("U");
    tone(buzzerPin, 2000, 20);
    SerUpdate = true;
    delay(300);

  } else if (b == LOW && !SerUpdate) {
    Serial.print("J");
    tone(buzzerPin, 2000, 20);
    SerUpdate = true;
    delay(300);

  } else if (c == LOW && !SerUpdate) {
    Serial.print("D");
    tone(buzzerPin, 2000, 20);
    SerUpdate = true;
    delay(300);

  } else if (d == LOW && !SerUpdate) {
    Serial.print("A");
    tone(buzzerPin, 2000, 20);
    SerUpdate = true;
    delay(300);


  } else


    SerUpdate = false;
}


// led sequence when game starts
void start_seq() {


  for (int i = 0; i < NUMPIXELS; i++) {

    pixels.setPixelColor(i, pixels.Color(0, 255, 0));
 
    pixels.show();
    // delay(300);
    clearPixel();
    // delay(DELAYVAL);
  }
}
// led sequence when game is over
void gameover_seq() {
  pixels.clear();
  for (int i = 0; i < NUMPIXELS; i++) {

    pixels.setPixelColor(i, pixels.Color(255, 0, 0));

    pixels.show();
  }
}

//clears led  colours
void clearPixel() {
  pixels.clear();
  pixels.show();
}


// buzzer melody sequence when game starts
void startup() {
  tone(buzzerPin, 262, 500);  // C4
  delay(200);

  tone(buzzerPin, 294, 500);  // D4
  delay(200);

  tone(buzzerPin, 330, 500);  // E4
  delay(200);

  tone(buzzerPin, 349, 500);  // F4
  delay(200);

  noTone(buzzerPin);
  delay(500);
}

// buzzer melody sequence when game is over
void gamefail() {
  tone(buzzerPin, 500, 200);
  delay(200);
  tone(buzzerPin, 500, 200);
  delay(200);
  tone(buzzerPin, 500, 200);
  delay(200);
  tone(buzzerPin, 800, 150);
  delay(150);
  tone(buzzerPin, 500, 500);
  delay(500);
  tone(buzzerPin, 600, 1000);

  delay(10000);
}

 

The Game

The Game Window

Playing the Game

Making custom Keycap

We explored different tools to make an interface. We tried out tools like Kodular, Pygame, Processing, Flutter, and HTML with CSS for creating computer interfaces. The main objective was to understand how we can use various tools to help in making an interface for our final projects.

Download files

References