Week 14. Group / Interface and Application Programming¶
This is group assignment page for West harima student:
Student¶
group assignment¶
- compare as many tool options as possible
Processing¶
This time I decided to try something that uses Processing to draw a circle in response to mouse movements.
How to use¶
- download Processing
- command execution
Try circle dots¶
- program code
void setup(){
size(800,500);
}
void draw(){
noStroke();
fill(random(225),random(225),random(225));
ellipse(mouseX,mouseY,100,100);
}
I first tried this code and it worked, but the saturation and lightness were too high and made my eyes glaze over, so I edited it to make the colors more pastel.
- Edited code
void setup(){
size(800, 500);
colorMode(HSB, 360, 100, 100); // Switch to HSB color mode
background(255); // White background
}
void draw(){
noStroke();
float h = random(360); // Random hue
float s = random(20, 40); // Low saturation for soft colors
float b = random(85, 100); // High brightness for pastel tones
fill(h, s, b);
ellipse(mouseX, mouseY, 100, 100);
}
setup() function | |
---|---|
size(800, 500); | Set canvas size to 800 pixels wide and 500 pixels high. |
colorMode(HSB, 360, 100, 100); | Color representation changed to HSB (hue, saturation, brightness) mode. |
background(255); | Set background to white (255 corresponds to white in HSB mode) |
draw() function | |
---|---|
noStroke(); | Setting not to draw a border for a figure. |
float h = random(360); | Hue (Hue) randomly determined in the range 0-360. |
float s = random(20, 40); | Randomly set Saturation at a low value between 20 and 40 (to make the color pale). |
float b = random(85, 100); | Randomly set Brightness to a high value between 85 and 100 (for a brighter and softer impression). |
fill(h, s, b); | Set the paint color with the above hue, saturation, and lightness values. |
ellipse(mouseX, mouseY, 100, 100); | Draw a circle 100 pixels in diameter at the mouse position. |
turtle graphics¶
This time I also tried pycharm.
How to use¶
- New project
- Create a new file
At this time, the file extension should be .py.
- command execution
try turtle¶
- program code(try1)
At first I tried the code to draw a star by turtling out a star when I executed the command while looking at the reference site.
-
Reference site
import tkinter as tk
import turtle
def draw_star():
t = turtle.Turtle()
t.shape("turtle")
colors = ["red", "green", "blue", "cyan", "pink"]
for i in range(5):
t.color(colors[i])
t.forward(200)
t.left(144)
turtle.done()
- program code(try2)
Next, we added the code for the start button to appear when the command is executed.
import tkinter as tk
import turtle
def draw_star():
t = turtle.Turtle()
t.shape("turtle")
colors = ["red", "green", "blue", "cyan", "pink"]
for i in range(5):
t.color(colors[i])
t.forward(200)
t.left(144)
turtle.done()
root = tk.Tk()
root.geometry("200x100")
root.title("Launch Turtle")
btn = tk.Button(root, text="Start", command=draw_star)
btn.pack(expand=True)
root.mainloop()
Import of required modules | |
---|---|
import tkinter as tk | Load the tkinter library for creating GUIs (windows) under the alias tk. |
import turtle | Load the library for using Turtle Graphics (simple drawing) |
Definition of draw_star() function to draw a star | |
---|---|
t = turtle.Turtle() | Generate Turtle object |
t.shape(“turtle”) | Set turtle shape to turtle icon. |
colors = [“red”, “green”, “blue”, “cyan”, “pink”] | Define a list of 5 colors to be used for each side of the star. |
for i in range(5): | Repeat 5 times to draw a pentagonal star. |
t.color(colors[i]) | Change the color for each side. |
t.forward(200) | 200 pixels straight ahead. |
t.left(144) | Rotated 144 degrees to the left (angle of the pentagonal star). |
turtle.done() | Complete drawing and do not close the window. |
Create GUI window with Tkinter | |
---|---|
root = tk.Tk() | Create main window |
root.geometry(“200x100”) | Set window size to 200px wide and 100px high. |
root.title(“Turtle Launch”) | Set the window title to “Turtle Launch”. |
Button creation and placement | |
---|---|
btn = tk.Button(root, text=“start”, command=draw_star) | Create a button and execute the draw_star function when clicked. |
btn.pack(expand=True) | button in the center of the window. |
Application Execution | |
---|---|
root.mainloop() | Starts Tkinter event loop and runs until the window is closed. |
Blynk¶
What is Blynk?
Blynk is a platform that makes it easy to operate and monitor IoT devices such as Arduino and ESP32 from a smartphone. It consists of a smartphone app, cloud, and a library for microcontrollers, and can communicate in real time using Wi-Fi and BLE. Since the operation screen can be created with no code, even beginners can easily realize LED ON/OFF, check sensor information, etc.
How to use¶
board : XIAO ESP32C3 IDE : Arduino IDE
-
Register my account on Blynk
-
Open Arduino IDE, I installed Blynk Library
-
Connect hardware
-
Setting Blynk (The details below)
1.Try Blynk¶
This time I tried buzzer using Blynk.
PC setting¶
In PC, login Blynk
- Create Template
- Datastreams
In this time, I choose Digital Pin
- Setting for buzzer
Name: Any name is OK. PIN: 21 (For PIN, enter the GPIO number from the datasheet.)
- Web Dashboard
Drag the Widget(switch and LED) to Dashboard and setting
- Switch Settings details
- LED Settings details
Smartphone setting¶
Install Blynk App (Only the first time). Then, Login Blynk App.
1.Select “Developer Mode”. 2.Choose template I made in PC. (-> Edit view of Dashboard is opened.) 3.Add Switch and LED. (Switch is a alternative of switch )
4.Click Button and setting. 5.Click LED and setting. 6.Once the buttons and LEDs are tied to the pins configured on the PC, the setup is complete.
Create a new device¶
Return to the Blynk’ management page in PC to work again.
- Create a new device from template.
- Choose template.
- Auth Token is appeared.
In order for Blynk to communicate with each target device, an Auth Token must be planted on the target device side.Copy this AuthToken and insert it into the Arduino IDE code.
2.Arduino IDE¶
- Reference site(code)
- Replace AuthToken, Lines 7-9.
/*************************************************************
This is a simple demo of sending and receiving some data.
Be sure to check out other examples!
*************************************************************/
// Template ID, Device Name and Auth Token are provided by the Blynk.Cloud
// See the Device Info tab, or Template settings
#define BLYNK_TEMPLATE_ID "TMPL6mfpLRZRp"
#define BLYNK_TEMPLATE_NAME "week14LED"
#define BLYNK_AUTH_TOKEN "zrzT9HbkGFmcr14SVQwjE803HekDSkEs"
// Comment this out to disable prints and save space
#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
#include <math.h>
char auth[] = BLYNK_AUTH_TOKEN;
// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "your Wi-Fi name";
char pass[] = "your Wi-Fi password";
BlynkTimer timer;
// the number of the LED pin (GPIO number)
const int ledPin = 2;
// This function is called every time the Virtual Pin 1 state changes
BLYNK_WRITE(V1) ///LightPin:Relay_operates_on_LOW_Input_Voltage_coneccted_NC
{
int buttonState = param.asInt();
// Update state
if(buttonState == HIGH){
digitalWrite(ledPin, HIGH);
Serial.println("HIGH");
}else{
digitalWrite(ledPin, LOW);
Serial.println("LOW");
}
}
// This function is called every time the device is connected to the Blynk.Cloud
BLYNK_CONNECTED()
{
Serial.println("Connected!");
}
//////////////////////////////////////////////////////////////////////
void setup() {
// Serial port for debugging purposes
Serial.begin(115200);
//pinMode setting
pinMode(ledPin , OUTPUT);
//WiFI Setting
Blynk.begin(auth, ssid, pass);
// You can also specify server:
//Blynk.begin(auth, ssid, pass, "blynk.cloud", 80);
//Blynk.begin(auth, ssid, pass, IPAddress(10,0,1,28), 8080);
//Blynk.begin(auth, ssid, pass, IPAddress(10,0,1,28));
// Setup a function to be called every second
// timer.setInterval(1000L, myTimerEvent);
}
void loop() {
Blynk.run();
}
library | |
---|---|
WiFi.h | Standard Wi-Fi library for ESP32. |
WiFiClient.h | Library for TCP connections over Wi-Fi. |
BlynkSimpleEsp32.h | Provides the primary interface for connecting ESP32 with Blynk apps and Blynk.Cloud |
math.h | Standard C math library |
Problems I faced and solutions¶
Problems | solutions |
---|---|
Will not go online | Change Wi-Fi to 2.4G |
At first, I was using 5G. However, the XIAO ESP32C3 only supports 2.4G connections. I did not know there was such a difference in Wi-Fi in the first place. So I did not understand which Wi-Fi I was connecting to.
After starting over from the beginning a couple of times and asking chat-gpt I could not find what was the cause. Finally, the instructor led me to a solution.
Once connected Wi-Fi 2.4G, it will appear online as shown below.
It is important to check which Wi-Fi you are connected to.
result¶
Impressions¶
- I thought it was interesting to see how quickly the program reflected the interface.