Skip to content

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.

alt text

How to use

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.

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

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 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 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 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

/*************************************************************
  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.