WEEK 15

Interface and Application Programming

How the week started

I am told with AI's help this week is gonna be one easy week. Hope so!

How the week ended

Well the tool we use is as good as the person who uses it, except some tools. After many conversations with each Ai. I found a method that works with less errors. Never underestimate the time taken to document.!

Week 15’s Assignment

In-image source

Gemini - ChatGPT - Claude

Interface and Application Programming

An interface is simply the bridge that allows two different systems to communicate with each other. Interface and Application Programming focuses on creating these connections between people, software, and hardware.

User Interface (UI): The visual screens, buttons, menus, and controls that allow a human to interact with a system. For example, in a vending machine, the touch screen used to select an item is the user interface.

Application Programming Interface (API): Code that allows two different software programs to communicate with each other. For example, a mobile app fetching weather data from an online weather service uses an API.

Device to Device Interface Programming: Communication between hardware devices. This is what we explored in Week 11: Networking and Communications, where devices exchanged data directly with each other.

Wireless Interface Programming: Devices communicate without physical wires using technologies such as WiFi, Bluetooth, or ESP NOW.

Web Application Programming Interfaces (API): A software application controls hardware through communication methods such as WiFi, Bluetooth, or USB. Examples include a mobile app controlling lights, a phone controlling a robot, or an app updating a smart clock.

Application to Application Programming: Two software applications exchange information with each other. For example, sharing an Instagram post to WhatsApp involves two applications communicating. Common methods include APIs, Web Services, REST APIs, and GraphQL.

Web Interface Programming: Applications communicate through the internet using web technologies. This allows users to interact with devices and services remotely through a web browser.

Firmware is a specific type of software written directly onto a hardware device's memory. In our case, we use Arduino IDE to program the XIAO ESP32S3. Firmware tells the physical hardware how to operate and acts as the bridge between the hardware and higher level software.

In this project, the technologies used move beyond traditional software and into the fields of Embedded Systems and the Internet of Things (IoT).

• The HTML file acts as the Frontend User Interface (UI) or Control Panel.
• The ESP32 code written using Arduino acts as the Firmware.
• ESP NOW is the communication protocol used to transfer data between boards.
• The XIAO ESP32S3 boards act as the Microcontrollers that execute the instructions.

The application is the complete software system working behind the scenes to make the data transfer happen. While the user mainly interacts with the interface, the application includes the firmware, communication protocols, and software logic that make the entire system function.

References

ChatGPT
GeeksforGeeks: What is an API?

Interface - Design

Inspiration for Interface

Clock app interface I used for reference

I had been using the app "Clock" by Samsung Electronics Co. Ltd. I liked the user interface for setting time in a dual clock, so I designed my interface around it.

I used this interaction with AI as a means to understand and create an interface, so that I could get a prompt for creating the app. This actually helps to get specifics correct and guides us and the AI to choose what we want. It also tells us about the options available.

I mentioned my project and described it. Then I mentioned that the page should open into a world map with locations. The locations should be pinned. I added features like rotate and zoom in. I mentioned the need for a search bar so one can search for a location on it. I had asked for a space to enter the name of the person for whom the location is chosen. I did mention the board setup.

I then continued the conversation with Claude using the prompt generated above. It initially created a complete Flutter project, and I did not understand the difference at first. Later, I specifically requested a web application, and it generated one in HTML. I downloaded the file and opened it in a browser. I liked the interface and the overall user experience. It was missing certain features.

Click to open the Web Application by Claude - Shared Daylight

I moved the html file i got into a folder named "ble". Moved that into week-15 folder linked in git repository. I linked the html file by <a href=""></a>

Claude's Interface

1 / 5

2 / 5

3 / 5

4 / 5

5 / 5

❮ ❯

Browser Compatibility

I opened it in Chrome. I did not try to create a BLE connection. Apparently, not all browsers support BLE connections. Google Chrome has support for the Web Bluetooth API, while some browsers have limited or no support. This means the same application may behave differently depending on the browser being used.

Learning

The segments Home, Location, and Device pages were saved under an "id". <div class="screen" id="home"></div>

This page would not have communicated with the ESP32S3, as there was no code to connect to it. There was only a visual connection and no real BLE or Bluetooth communication.

This is the most important section for your documentation.

Currently, this app does not actually communicate with the ESP32.

It only simulates communication.

Example: function connectDevice(el, deviceId). When the user taps a device, such as SharedDaylight-A3F2, the app pretends to connect.

It saves: state.settings.pairedDevice = deviceId; and displays: Connected. But there is:

No Bluetooth code
No WiFi code
No API
No WebSocket
No BLE service

So the communication is only visual.

Data Flow of the App

  User Opens App
       ↓
Splash Screen
       ↓
Choose City
       ↓
Calculate Sunrise/Sunset
       ↓
Save Companion Details
       ↓
Pair Device (simulated)
       ↓
Show Time and Sun Position
       ↓
Adjust Brightness / Calibration

Made a new folder for the web app inside my Week 15 folder. Made a single file, index.html.

Firmware

I am using my Input sensor week's board which has RTC and Attiny connected with UART pins. Since ATtiny1614 does not have bluetooth or wifi I am pairing it with the breakout board I created in Embedded Networking and Communications week I am using Xiao esp32s3 in that so I can use wifi or bluetooth

This is how I did this week. I used ChatGPT and communicated my idea on what I want. I told the basic flow of how I wanted the communications.

Drawn on drawio

"I have an RTC DS1307 connected to ATtiny1614 with UART pins. On another board, I got a XIAO ESP32S3 which has UART pins and an LED. I need the RTC to send time to the XIAO. I need this to be connected to a web application via Bluetooth. When I select a timezone in that, it should change the time in the RTC to that location."

Refer Week-9

The communication between the boards

The board setup.

The entire conversation with ChatGPT. Click here

I discussed this further and shared my preferences based on the questions it asked. This gave me clarity on my choices rather than blindly trusting AI. It helped customize the responses and code, leaving less room for error. I learned this the hard way after trying many code versions without understanding what I was missing while creating prompts.

Decisions

Based on the clarified approach, the system logic was refined. The ATtiny maintains time in UTC, and timezone adjustments are applied based on the selected region. Since only Bluetooth is used, the phone sends the correct time to the XIAO, which then passes it to the ATtiny. This avoids relying on WiFi for online time access.

1 / 3

2 / 3

3 / 3

❮ ❯

Final Workflow

1 / 3

2 / 3

3 / 3

❮ ❯

ATtiny1614 Board Setup

While setting up the board, I selected the ATtiny1614 without Optiboot. The port was chosen based on the connection being used. In the Tools menu, I set the programmer to SerialUPDI with a baud rate of 57600. However, the Serial Monitor was running at 9600 baud.

1 / 2

2 / 2

❮ ❯

Refining - Attiny - serial monitor output

1 / 3

2 / 3

3 / 3

❮ ❯

Troubleshooting - Attiny

After uploading the Arduino code to ATTiny.I prompted ChatGPT for "XIAO-esp32s3 Arduino code," which I got, and the code worked.

Issue pointed out:
At the same time, ChatGPT pointed out that ATtiny wants the local time. What was happening was that the web will already be sending the local time; e.g., it is 10:00 AM now. The ESP receives this and then it thinks it got the UTC, so it converts to IST (10:00 AM will become 3:30 PM). This step shouldn't happen. Because of this, ATtiny receives the wrong time.

ChatGPT fix:
Web will send UTC + offset.
XIAO-ESP32S3: will forward the UTC.
ATtiny will convert it.

XIAO-esp32s3 Arduino code

By now, ChatGPT did give the Arduino code for XIAO ESP32S3.

I was unable to follow the instructions ChatGPT gave me on where to change and delete the code in ATtiny's Arduino code and XIAO ESP32S3's Arduino code. It gave me the choice to fix both codes. So I prompted it to "Fix both sides cleanly."

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time Sync</title>

<style>
body {
  font-family: Arial;
  padding: 20px;
}
input, button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  font-size: 16px;
}
#list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.item:hover {
  background: #f0f0f0;
}
</style>
</head>

<body>

<h2>Time Sync</h2>

<button onclick="connectBLE()">Connect Device</button>

<input id="search" placeholder="Search city / country / timezone" oninput="filterList()">

<div id="list"></div>

<button onclick="sendTime()">Sync Time</button>

<p id="status"></p>

<script>

// ---------- TIMEZONE LIST ----------
const zones = [
  { name: "Asia/Kolkata", offset: 19800 },
  { name: "Europe/London", offset: 0 },
  { name: "America/New_York", offset: -18000 },
  { name: "Asia/Dubai", offset: 14400 },
  { name: "Asia/Singapore", offset: 28800 },
  { name: "Australia/Sydney", offset: 36000 }
];

let selectedZone = null;
let device, characteristic;

// ---------- SHOW LIST ----------
function filterList() {
  const val = document.getElementById("search").value.toLowerCase();
  const list = document.getElementById("list");
  list.innerHTML = "";

  zones
    .filter(z => z.name.toLowerCase().includes(val))
    .forEach(z => {
      const div = document.createElement("div");
      div.className = "item";
      div.innerText = z.name;
      div.onclick = () => {
        selectedZone = z;
        document.getElementById("status").innerText = "Selected: " + z.name;
      };
      list.appendChild(div);
    });
}

// ---------- BLE CONNECT ----------
async function connectBLE() {
  try {
    device = await navigator.bluetooth.requestDevice({
      filters: [{ name: "TimeSync" }],
      optionalServices: ["12345678-1234-1234-1234-1234567890ab"]
    });

    const server = await device.gatt.connect();
    const service = await server.getPrimaryService("12345678-1234-1234-1234-1234567890ab");
    characteristic = await service.getCharacteristic("abcd1234-5678-1234-5678-abcdef123456");

    document.getElementById("status").innerText = "Connected";
  } catch (e) {
    alert("Connection failed");
    console.log(e);
  }
}

// ---------- SEND TIME ----------
async function sendTime() {
  if (!characteristic || !selectedZone) {
    alert("Connect + select timezone");
    return;
  }

  const now = new Date();

  const utc = new Date(now.getTime() - now.getTimezoneOffset()*60000)
                .toISOString()
                .slice(0,19);

  const payload = {
    utc: utc,
    offset: selectedZone.offset,
    tz: selectedZone.name
  };

  const data = JSON.stringify(payload);

  await characteristic.writeValue(new TextEncoder().encode(data));

  document.getElementById("status").innerText =
    "Sent: " + selectedZone.name + " | " + utc;
}

filterList();

</script>

</body>
</html>