Week 14. Group / Interface and Application Programming¶

This is group assignment page for West harima student:

Student¶

Koharu Takeda

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.

alt text

How to use¶

download Processing

alt text

command execution

alt text

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.

alt text

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.

alt text

How to use¶

New project

akt text

Create a new file

alt text

At this time, the file extension should be .py.

alt text

command execution

alt text

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
- Processing Basics!
- Learning Python by Drawing (Turtle Graphics)

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¶

alt text

download

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.

alt text

How to use¶

board : XIAO ESP32C3
IDE : Arduino IDE

Register my account on Blynk
Open Arduino IDE, I installed Blynk Library

alt text

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

alt text

Datastreams

In this time, I choose Digital Pin

alt text

Setting for buzzer

Name: Any name is OK.
PIN: 21 (For PIN, enter the GPIO number from the datasheet.)

alt text

Web Dashboard

Drag the Widget(switch and LED) to Dashboard and setting

alt text

Switch Settings details

alt text

LED Settings details

akt text

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 )

alt text

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.

alt text

Create a new device¶

Return to the Blynk’ management page in PC to work again.

Create a new device from template.

alt text

Choose template.

alt text

Auth Token is appeared.

alt text

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.

alt text

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.