Week 14 : Interface and Application Programming

This week we are building on networking and communications week. For our individual task we are to write an application that interfaces a user with an input and/or output device that we made. As a group assignment we are to compare as many tool options as possible.

Interface and Application Programming

For networking and communications week, I had my board interact with the internet. The web interface would keep count of the number of times the switch was triggered. For this week I will be make the interface a bit more intentional versus the most basic and stiff robotic interface known to mankind.

- Let’s make the web interface a bit more aesthetically pleasing and purposeful. It is currently a white page with a title of “Servo Trigger Counter” and a single line underneath that says “Times Triggered:” where it displays the number in real time.

- I changed the text to be more relevant to the intended purpose saying “Creative Cutout Market Event” which is my company name and where this would be used. I also change the generic counter verbiage to “People Who Want a Closer look”

- Looking at my existing code, I could not find where it indicates what font is being used or where to adjust the background color. I went to chat gpt with my existing code and asked to change my header to a bold cursive font and the body to a cute san serif font, along with changing the background to the webpage a light teal color. The color was perfect but chat gpt has a sense of humor and thought to suggest using Comic Sans as the body font. If you know only one thing about font, it’s that Comic Sans is a no no for anything (maybe except for an elementary school class room…and even then, that’s being generous).
Thumbnail of chat gpt prompt

- Regardless of chat committing a cardinal sin, I now see how to format the code to indicate what font I would like to use. I initially tried a font but it wouldn’t display it since it was not a default system font.

- I looked through some default system fonts and chose some that matched more of my brand and logo.


#include <WiFi.h>
#include <WebServer.h>
#include <ESP32Servo.h>

const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

const int switchPin = 44;
const int servoPin = 8;

Servo myServo;
WebServer server(80);

int pressCount = 0;
bool lastButtonState = HIGH;
int var = 0;

void handleRoot() {
  String html = "<!DOCTYPE html><html><head>";
  html += "<meta http-equiv='refresh' content='1'>";
  html += "<style>";
  html += "body { background-color: #b2f0e3; font-family: 'Be You', cursive, sans-serif; text-align: center; padding-top: 50px; }";
  html += "h1 { font-family: 'Christmas Wish Calligraphy', cursive; font-weight: bold; font-size: 48px; }";
  html += "p { font-size: 24px; }";
  html += "</style>";
  html += "</head><body>";
  html += "<h1>Creative Cutout Market Event</h1><p>People Who Want a Closer Look: ";
  html += String(pressCount);
  html += "</p></body></html>";
  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(9600);
  pinMode(switchPin, INPUT_PULLUP);
  myServo.attach(servoPin, 600, 2400);

  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected. IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
  Serial.println("Web server started.");
}

void loop() {
  server.handleClient();

  bool currentState = digitalRead(switchPin);

  if (lastButtonState == HIGH && currentState == LOW) {
    pressCount++;
    var = 0;
    Serial.print("click");

    while (var < 4) {
      for (int pos = 0; pos <= 90; pos++) {
        myServo.write(pos);
        delay(10);
      }

      for (int pos = 90; pos >= 0; pos--) {
        myServo.write(pos);
        delay(10);
      }

      var++;
    }

    delay(200);
  }

  lastButtonState = currentState;
}

Group Assignment

Python vs Arduino

Python is a high-level language designed for general-purpose use, including software development, automation, data processing, and web applications. It supports dynamic typing, which allows for intricate and flexible code. In contrast, Arduino relies on a simplified version of C/C++, which is compiled before being uploaded to a microcontroller. This language structure enables Arduino to run efficiently on low-power hardware and support real-time operations, making it a bit more intuitive but slightly less customizable.

We can also compare their hardware interaction. Python requires external libraries to communicate with physical devices and components. There are a wide range of applications across various domains including machine learning, networking, and automation. While Arduino also can use external libraries, it is more user friendly with built in functions and libraries. Their libraries focus on embedded hardware control and are optimized for specific components like sensors, servos, and displays.

For development environments Python is supported by a range of IDEs, including VS Code, PyCharm, and IDLE. These tools offer strong support for debugging and code management. Arduino typically takes place within the Arduino IDE or PlatformIO, which includes features tailored for embedded programming such as serial monitors and board-specific uploading.

Python is typically used for interfacing with devices, processing data, and handling complex logic. Arduino is used for building standalone embedded systems and controlling hardware in real-time.