FAR-Lab · crystalchong0058 · Aug 22, 2023 · Aug 24, 2023 · Aug 28, 2023 · Aug 29, 2023
diff --git a/.ipynb_checkpoints/Untitled-checkpoint.ipynb b/.ipynb_checkpoints/Untitled-checkpoint.ipynb
@@ -0,0 +1,6 @@
+{
+ "cells": [],
+ "metadata": {},
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/Lab 1/README.md b/Lab 1/README.md
diff --git a/Lab 1/costume1.jpg b/Lab 1/costume1.jpg
diff --git a/Lab 1/costume2.jpg b/Lab 1/costume2.jpg
diff --git a/Lab 1/costume3.jpg b/Lab 1/costume3.jpg
diff --git a/Lab 1/media/costumed_sketches.jpg b/Lab 1/media/costumed_sketches.jpg
diff --git a/Lab 1/media/storyboard-1.png b/Lab 1/media/storyboard-1.png
diff --git a/Lab 1/media/storyboard-2.png b/Lab 1/media/storyboard-2.png
diff --git a/Lab 1/media/storyboard-3.png b/Lab 1/media/storyboard-3.png
diff --git a/Lab 1/media/windbell_prototype.gif b/Lab 1/media/windbell_prototype.gif
diff --git a/Lab 1/part2_costume1.jpeg b/Lab 1/part2_costume1.jpeg
diff --git a/Lab 1/part2_costume2.jpeg b/Lab 1/part2_costume2.jpeg
diff --git a/Lab 1/part2_costume3.jpeg b/Lab 1/part2_costume3.jpeg
diff --git a/Lab 1/part2_storyboard1.png b/Lab 1/part2_storyboard1.png
diff --git a/Lab 1/part2_storyboard2.png b/Lab 1/part2_storyboard2.png
diff --git a/Lab 1/part2_storyboard3.png b/Lab 1/part2_storyboard3.png
diff --git a/Lab 1/part2_storyboard4.png b/Lab 1/part2_storyboard4.png
diff --git a/Lab 1/prototype1.jpg b/Lab 1/prototype1.jpg
diff --git a/Lab 1/prototype2.jpg b/Lab 1/prototype2.jpg
diff --git a/Lab 1/prototype3.jpg b/Lab 1/prototype3.jpg
diff --git a/Lab 1/prototype_interaction.jpg b/Lab 1/prototype_interaction.jpg
diff --git a/Lab 1/setup.jpg b/Lab 1/setup.jpg
diff --git a/Lab 1/storyboard1.png b/Lab 1/storyboard1.png
diff --git a/Lab 1/storyboard2.png b/Lab 1/storyboard2.png
diff --git a/Lab 1/storyboard3.png b/Lab 1/storyboard3.png
diff --git a/Lab 1/storyboard4.png b/Lab 1/storyboard4.png
diff --git a/Lab 2/README.md b/Lab 2/README.md
@@ -1,6 +1,8 @@
 # Interactive Prototyping: The Clock of Pi
 **NAMES OF COLLABORATORS HERE**
 
+John Li (jl4239), Shiying Wu (sw2298), Mingze Gao (mg2454), Crystal Chong (cc2795), Qianxin(Carl) Gan (qg72), Mingzhe Sun (ms3636)
+
 Does it feel like time is moving strangely during this semester?
 
 For our first Pi project, we will pay homage to the [timekeeping devices of old](https://en.wikipedia.org/wiki/History_of_timekeeping_devices) by making simple clocks.
@@ -77,20 +79,14 @@ Labs are due on Mondays. Make sure this page is linked to on your main class hub
 Just like you did in the lab prep, ssh on to your pi. Once you get there, create a Python environment (named venv) by typing the following commands.
 
 ```
-ssh pi@<your Pi's IP address>
+ssh [email protected]
 ...
-pi@raspberrypi:~ $ python -m venv venv
-pi@raspberrypi:~ $ source venv/bin/activate
-(venv) pi@raspberrypi:~ $ 
+johnli@johnli:~ $ python -m venv venv
+johnli@johnli:~ $ source venv/bin/activate
+(venv) johnli@johnli:~ $ 
 
 ```
 ### Setup Personal Access Tokens on GitHub
-Set your git name and email so that commits appear under your name.
-```
-git config --global user.name "Your Name"
-git config --global user.email "[email protected]"
-```
-
 The support for password authentication of GitHub was removed on August 13, 2021. That is, in order to link and sync your own lab-hub repo with your Pi, you will have to set up a "Personal Access Tokens" to act as the password for your GitHub account on your Pi when using git command, such as `git clone` and `git push`.
 
 Following the steps listed [here](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token) from GitHub to set up a token. Depends on your preference, you can set up and select the scopes, or permissions, you would like to grant the token. This token will act as your GitHub password later when you use the terminal on your Pi to sync files with your lab-hub repo.
@@ -101,7 +97,7 @@ Following the steps listed [here](https://docs.github.com/en/github/authenticati
 Clone your own lab-hub repo for this assignment to your Pi and change the directory to Lab 2 folder (remember to replace the following command line with your own GitHub ID):
 
 ```
-(venv) pi@raspberrypi:~$ git clone https://github.com/<YOURGITID>/Interactive-Lab-Hub.git
+(venv) pi@raspberrypi:~$ git clone https://github.com/zezhili/Interactive-Lab-Hub.git
 (venv) pi@raspberrypi:~$ cd Interactive-Lab-Hub/Lab\ 2/
 ```
 Depends on the setting, you might be asked to provide your GitHub user name and password. Remember to use the "Personal Access Tokens" you just set up as the password instead of your account one!
@@ -125,15 +121,15 @@ We have asked you to equip the [Adafruit MiniPiTFT](https://www.adafruit.com/pro
 
 <img src="https://cdn-learn.adafruit.com/assets/assets/000/082/842/large1024/adafruit_products_4393_iso_ORIG_2019_10.jpg" height="200" />
 
-The Raspberry Pi 4 has a variety of interfacing options. When you plug the pi in the red power LED turns on. Any time the SD card is accessed the green LED flashes. It has standard USB ports and HDMI ports. Less familiar it has a set of 20x2 pin headers that allow you to connect a various peripherals.
+The Raspberry Pi 3 has a variety of interfacing options. When you plug the pi in the red power LED turns on. Any time the SD card is accessed the green LED flashes. It has standard USB ports and HDMI ports. Less familiar it has a set of 20x2 pin headers that allow you to connect a various peripherals.
 
 <img src="https://maker.pro/storage/g9KLAxU/g9KLAxUiJb9e4Zp1xcxrMhbCDyc3QWPdSunYAoew.png" height="400" />
 
 To learn more about any individual pin and what it is for go to [pinout.xyz](https://pinout.xyz/pinout/3v3_power) and click on the pin. Some terms may be unfamiliar but we will go over the relevant ones as they come up.
 
 ### Hardware (you have already done this in the prep)
 
-From your kit take out the display and the [Raspberry Pi 4](https://cdn-shop.adafruit.com/970x728/3775-07.jpg)
+From your kit take out the display and the [Raspberry Pi 3](https://cdn-shop.adafruit.com/970x728/3775-07.jpg)
 
 Line up the screen and press it on the headers. The hole in the screen should match up with the hole on the raspberry pi.
 
@@ -220,10 +216,17 @@ After that, Git will ask you to login to your GitHub account to push the updates
 ## Make a short video of your modified barebones PiClock
 
 \*\*\***Take a video of your PiClock.**\*\*\*
+[<img src="https://hackmd.io/_uploads/SJge8rpC2.png">](https://youtu.be/mkWBqAWszes)
+
 
 ## Part G. 
 ## Sketch and brainstorm further interactions and features you would like for your clock for Part 2.
-
+![](https://hackmd.io/_uploads/ryMNrBTC3.jpg)
+![](https://hackmd.io/_uploads/HkxNrHSaC3.jpg)
+![](https://hackmd.io/_uploads/SyhHHSaAn.jpg)
+It will interact with the external enviroment, the display will change base on the weather.
+![](https://hackmd.io/_uploads/B1-IBBpRn.jpg)
+When you click both buttons it will play the classic music that represent the region.
 
 # Prep for Part 2
 
@@ -232,14 +235,61 @@ After that, Git will ask you to login to your GitHub account to push the updates
 
 2. Look at and give feedback on the Part G. for at least 2 other people in the class (and get 2 people to comment on your Part G!)
 
-# Lab 2 Part 2
+**Feedback:**
+
+_Gloria_: I really liked your displays and button interaction!! So creative and appealing. I also like how you demo the screen with the real clock time on the side in the video. Ngl, this is the best design I've seen so far! It’s fascinating to see how you actually implemented those representative and famous places in each country. Well done!
+I’m looking forward to seeing your next step!
+
+_Yifan_: Overall very good visual and background which provides intuitive understanding of the pi. It will be better if the text font/size/color can blend in to the background. 
+
+_Crystal_: I love how the button could make changes between 12-hour and 24-hour formats. It is interesting to see different time zones from various countries. 
+
+
+
+## Introduction
+
+In Part 2 of our project, we've developed an interactive game that allows users to engage with time in a fun and educational way. The game consists of three distinct phases, each with its own unique features and challenges.
+
+## Phases
+
+### Start Phase
+
+In the "Start Phase," the display shows the current time as a traditional clock. Two triangular arrows at the botton of the screen indicating the game mode can be invoked by pressing both buttons simultaneously.
+
+### Game Phase
+
+The "Game Phase" is the core of our interactive experience. The screen is divided into two halves, corresponding to the two buttons available. In this phase, various rectangles fall from the top of the screen, and the user's goal is to collect them. Each type of rectangle represents a different unit of time:
+
+- **Green Rectangles**: Represent hours.
+- **Blue Rectangles**: Represent minutes.
+- **Red Rectangles**: Represent seconds.
+
+As these rectangles reach the edge of the screen, the user must press the appropriate button to "collect" them. When successful, a yellow half ellipse is displayed on the corresponding side of the screen, indicating a successful collection.
+
+### End Phase
+
+The "End Phase" marks the conclusion of the game. There are two possible outcomes:
+
+1. **User Collects All Rectangles**: If the user successfully collects all the falling rectangles, this phase displays the time at which the user invoked the game. It serves as a rewarding conclusion to the game.
+
+2. **User Loses Some Rectangles**: If the user fails to collect some of the falling rectangles, this phase also displays the time when the game was invoked. However, it serves as a gentle reminder of the missed opportunities during gameplay.
+
+After a few seconds, we will switch the device back to the start phase.
+
+## Video
 
-Pull Interactive Lab Hub updates to your repo.
+[<img src="https://hackmd.io/_uploads/S10w2pVy6.jpg">](https://youtu.be/8llVNj1WjJY)
 
-Modify the code from last week's lab to make a new visual interface for your new clock. You may [extend the Pi](Extending%20the%20Pi.md) by adding sensors or buttons, but this is not required.
 
-As always, make sure you document contributions and ideas from others explicitly in your writeup.
+## Contribution List
 
-You are permitted (but not required) to work in groups and share a turn in; you are expected to make equal contribution on any group work you do, and N people's group project should look like N times the work of a single person's lab. What each person did should be explicitly documented. Make sure the page for the group turn in is linked to your Interactive Lab Hub page. 
+Our collaborative effort in developing this interactive time game was a team endeavor, with each team member contributing in various ways:
 
+- **John Li**: Idea brainstorming, end page design and implementation, and assistance with debugging.
+- **Shiying (Sophie) Wu**: Idea brainstorming, game mode implementation, README documentation, and debugging support.
+- **Mingze (Kevin) Gao**: Idea brainstorming, initial game setup and testing, end page design and implementation, and debugging assistance.
+- **Crystal Chong**: Idea brainstorming, game mode design, end product verification and testing, and debugging support.
+- **Qianxin (Carl) Gan**: Idea brainstorming, game mode design, end product verification and testing, and debugging support. 
+- **Mingzhe (Allen) Sun**: Idea brainstorming, game mode implementation, and debugging assistance.
 
+This collaborative effort allowed us to create an engaging and educational interactive game that explores the concept of time in a playful way.
diff --git a/Lab 2/__pycache__/binary_time.cpython-39.pyc b/Lab 2/__pycache__/binary_time.cpython-39.pyc
diff --git a/Lab 2/__pycache__/screen_test.cpython-311-pytest-7.4.0.pyc b/Lab 2/__pycache__/screen_test.cpython-311-pytest-7.4.0.pyc
diff --git a/Lab 2/au.jpg b/Lab 2/au.jpg
diff --git a/Lab 2/bg.jpg b/Lab 2/bg.jpg
diff --git a/Lab 2/binary_time.py b/Lab 2/binary_time.py
@@ -0,0 +1,19 @@
+import time
+
+def binary_time_conversion():
+    current_time = time.localtime()
+    hour_binary = bin(current_time.tm_hour)[2:].zfill(6)
+    minute_binary = bin(current_time.tm_min)[2:].zfill(6)
+    second_binary = bin(current_time.tm_sec)[2:].zfill(6)
+    return current_time, minute_binary, second_binary, hour_binary
+
+def print_time(current_time):
+    time_print = f"{current_time.tm_mon:02}/{current_time.tm_mday:02}/{current_time.tm_year} {current_time.tm_hour:02}:{current_time.tm_min:02}:{current_time.tm_sec:02}"
+    print("Current time:", time_print)
+
+def convert_binary_to_2d():
+    current_time, minute_binary, second_binary, hour_binary = binary_time_conversion()
+    current_time = time.strftime("%m/%d/%Y \n %H:%M:%S")
+    return current_time, [[int(m) for m in minute_binary], [int(s) for s in second_binary], [int(h) for h in hour_binary]]
+
+
diff --git a/Lab 2/china.jpg b/Lab 2/china.jpg
diff --git a/Lab 2/france.jpg b/Lab 2/france.jpg
diff --git a/Lab 2/future_font.ttf b/Lab 2/future_font.ttf
diff --git a/Lab 2/lab2_game_over.py b/Lab 2/lab2_game_over.py
@@ -0,0 +1,184 @@
+import textwrap
+import time
+import pytz
+import datetime
+import subprocess
+import digitalio
+import board
+from PIL import Image, ImageDraw, ImageFont
+import adafruit_rgb_display.st7789 as st7789
+
+# Configuration for CS and DC pins (these are FeatherWing defaults on M0/M4):
+cs_pin = digitalio.DigitalInOut(board.CE0)
+dc_pin = digitalio.DigitalInOut(board.D25)
+reset_pin = None
+
+# Config for display baudrate (default max is 24mhz):
+BAUDRATE = 64000000
+
+# Setup SPI bus using hardware SPI:
+spi = board.SPI()
+
+# Create the ST7789 display:
+disp = st7789.ST7789(
+    spi,
+    cs=cs_pin,
+    dc=dc_pin,
+    rst=reset_pin,
+    baudrate=BAUDRATE,
+    width=135,
+    height=240,
+    x_offset=53,
+    y_offset=40,
+)
+
+# Create blank image for drawing.
+# Make sure to create image with mode 'RGB' for full color.
+height = disp.width  # we swap height/width to rotate it to landscape!
+width = disp.height
+image = Image.new("RGB", (width, height))
+rotation = 90
+
+# Get drawing object to draw on image.
+draw = ImageDraw.Draw(image)
+
+# Draw a black filled box to clear the image.
+draw.rectangle((0, 0, width, height), outline=0, fill=(0, 0, 0))
+disp.image(image, rotation)
+# Draw some shapes.
+# First define some constants to allow easy resizing of shapes.
+padding = -2
+top = padding
+bottom = height - padding
+# Move left to right keeping track of the current x position for drawing shapes.
+x = 0
+
+# Alternatively load a TTF font.  Make sure the .ttf font file is in the
+# same directory as the python script!
+# Some other nice fonts to try: http://www.dafont.com/bitmap.php
+font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 18)
+
+# Turn on the backlight
+backlight = digitalio.DigitalInOut(board.D22)
+backlight.switch_to_output()
+backlight.value = True
+buttonA = digitalio.DigitalInOut(board.D23)	
+buttonB = digitalio.DigitalInOut(board.D24)	
+buttonA.switch_to_input()	
+buttonB.switch_to_input()
+
+background_list = ["liberty.jpg", "paris.jpg", "au.jpg", "china.jpg"]
+
+background_image = []
+for image_name in background_list:
+    bg_image = Image.open(image_name)	
+    bg_image = bg_image.resize((width, height))
+    background_image.append(bg_image)
+
+def get_current_time_in_timezone(timezone_str):
+    """Return the current time in the specified timezone."""
+    local_timezone = pytz.timezone(timezone_str)
+    local_time = datetime.datetime.now(local_timezone)
+    return local_time
+
+location_list = ['America/New_York', 
+                 'Europe/Paris',
+                 'Australia/Canberra',
+                 'Asia/Shanghai'
+                ]
+
+index = 0
+count = 0
+intended_score = 30
+user_score = 25
+def update_display(background_image, index, format_12_hour=True):
+    """Updates the display with the given background and time format."""
+    image.paste(background_image[index], (0, 0))
+    if format_12_hour:
+        Game_over(intended_score, user_score)
+    else:
+        Game_over(1, 1)
+
+
+
+index = 0
+format_12_hour = True
+
+buttonA_pressed_last = False
+buttonB_pressed_last = False
+
+game_state = False
+
+game_state = False
+
+def Game_over(intended_score, user_score):
+    """Updates the display with the given futuristic space-themed text format."""
+    # Define text_offset and other variables
+    text_offset = 10
+    bg_image = Image.open("bg.jpg")
+    bg_image = bg_image.resize((width, height))
+    bg_image = bg_image.rotate(90, expand=True)
+
+    # Define the text to display
+    if intended_score == user_score:
+        message = "Congrats! You have Won the Game!"
+    else:
+        mis_Score = str(intended_score - user_score)
+        message = "GG! You have missed " + mis_Score + " hit"
+
+    current_time = time.strftime("%m/%d/%Y \n %H:%M:%S")
+
+    # Create a new blank image with the desired dimensions
+    text_image = bg_image
+
+    # Create a draw object for the text image
+    text_draw = ImageDraw.Draw(text_image)
+
+    # Define a space-themed font (you can replace 'path_to_your_font.ttf' with your font file)
+    space_font_t = ImageFont.truetype('future_font.ttf', size=18)
+    space_font = ImageFont.truetype('future_font.ttf', size=25)
+    # Define font color (you can use any color that matches your space theme)
+    font_color = "#FFFFFF" 
+
+    # Define background color (you can use any color that matches your space theme)
+    background_color = "#000000"  # Black
+
+    # Draw the current_time text at the top of the screen
+    text_draw.text((10, 0), current_time, font=space_font_t, fill=font_color)
+
+    # Break the message into new lines at every space
+    message_lines = message.split(" ")
+    wrapped_message = "\n".join(message_lines)
+
+    # Draw the wrapped message below the current_time
+    text_draw.multiline_text((10, height // 2 - text_offset), wrapped_message, font=space_font, fill=font_color)
+
+    # Rotate the text image by 270 degrees
+    text_image = text_image.transpose(Image.ROTATE_270)
+
+    # Paste the rotated text image onto the original image
+    y = top
+    draw.text((x, y), "", fill="#000000")  # Clear any previous text
+    image.paste(text_image, (x, y))
+
+    # Display the result on your screen
+    disp.image(image, rotation)
+
+    game_state = False
+
+while True:
+
+    if not buttonB.value and not buttonB_pressed_last:
+        index = (index + 1) % len(background_list)
+        buttonB_pressed_last = True
+    elif buttonB.value:
+        buttonB_pressed_last = False
+
+    if not buttonA.value and not buttonA_pressed_last:
+        format_12_hour = not format_12_hour
+        buttonA_pressed_last = True
+    elif buttonA.value:
+        buttonA_pressed_last = False
+
+    update_display(background_image, index, format_12_hour)
+    time.sleep(0.1)