Compare as many tool options as possible.
Document your findings on the group work page and reflect on the tool options.
Write an application that interfaces a user with an input &/or output device that you made.
Interface and Application Programming is a crucial week in Fab Academy where we bridge the gap between hardware and users. This week focuses on creating applications that allow users to interact with the devices we've built throughout the course. We explore various programming languages, frameworks, and tools to create intuitive interfaces that communicate with our embedded systems.
The goal is to make our electronic creations accessible and user-friendly by developing applications that can control, monitor, and interact with our input and output devices through various communication protocols.
| Tool/Language | Strengths | Weaknesses | Best Use Case | Learning Curve |
|---|---|---|---|---|
| Python | Easy syntax, extensive libraries (Tkinter, PyQt, Flask), great for prototyping | Slower execution, requires Python installation | Desktop applications, data processing, web backends | Beginner-friendly |
| JavaScript/Node.js | Universal language, great for web interfaces, real-time communication | Single-threaded, callback complexity | Web applications, IoT dashboards, real-time interfaces | Moderate |
| Processing | Visual-focused, easy graphics, Arduino-like syntax | Limited to desktop, less web integration | Data visualization, interactive art, prototypes | Beginner-friendly |
| MIT App Inventor | Visual programming, mobile-first, no coding required | Limited customization, Android-focused | Quick mobile prototypes, educational projects | Very easy |
| React/Vue.js | Modern web interfaces, component-based, responsive | Steep learning curve, complex setup | Professional web applications, responsive UIs | Advanced |
| Protocol | Description | Advantages | Disadvantages | Typical Use |
|---|---|---|---|---|
| Serial (UART) | Simple point-to-point communication | Easy to implement, reliable, widely supported | Short range, requires cables | Direct computer-microcontroller communication |
| HTTP/REST | Web-based communication protocol | Internet-compatible, stateless, familiar | Overhead, not real-time | IoT devices, web-based control panels |
| WebSocket | Real-time bidirectional communication | Low latency, persistent connection | More complex implementation | Real-time monitoring, live data streams |
| Bluetooth | Short-range wireless communication | Wireless, mobile-friendly, low power options | Limited range, pairing complexity | Mobile apps, wearable devices |
| WiFi | Network-based wireless communication | Long range, high bandwidth, internet access | Higher power consumption, security concerns | IoT applications, remote monitoring |
Technologies: Python, Tkinter, Serial
import tkinter as tk
import serial
import threading
class DeviceController:
def __init__(self):
self.root = tk.Tk()
self.root.title("Device Controller")
self.serial_port = serial.Serial('/dev/ttyUSB0', 9600)
# Create GUI elements
self.create_widgets()
def create_widgets(self):
# LED Control
tk.Label(self.root, text="LED Control").pack()
tk.Button(self.root, text="Turn ON",
command=self.led_on).pack()
tk.Button(self.root, text="Turn OFF",
command=self.led_off).pack()
# Sensor Reading
self.sensor_label = tk.Label(self.root,
text="Sensor: --")
self.sensor_label.pack()
# Start sensor reading thread
self.start_sensor_reading()
def led_on(self):
self.serial_port.write(b'LED_ON\n')
def led_off(self):
self.serial_port.write(b'LED_OFF\n')
def start_sensor_reading(self):
def read_sensor():
while True:
if self.serial_port.in_waiting:
data = self.serial_port.readline().decode().strip()
self.sensor_label.config(text=f"Sensor: {data}")
thread = threading.Thread(target=read_sensor)
thread.daemon = True
thread.start()
if __name__ == "__main__":
app = DeviceController()
app.root.mainloop()
Technologies: HTML, JavaScript, WebSocket
<!DOCTYPE html>
<html>
<head>
<title>IoT Device Dashboard</title>
<style>
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
}
.card {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
background: #2196F3;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dashboard">
<div class="card">
<h3>LED Control</h3>
<button onclick="controlLED('on')">Turn ON</button>
<button onclick="controlLED('off')">Turn OFF</button>
</div>
<div class="card">
<h3>Sensor Data</h3>
<p>Temperature: <span id="temp">--</span>°C</p>
<p>Humidity: <span id="humidity">--</span>%</p>
</div>
</div>
<script>
const ws = new WebSocket('ws://192.168.1.100:8080');
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('temp').textContent = data.temperature;
document.getElementById('humidity').textContent = data.humidity;
};
function controlLED(state) {
ws.send(JSON.stringify({
command: 'led',
state: state
}));
}
</script>
</body>
</html>
MIT App Inventor provides a visual, drag-and-drop interface for creating mobile applications. It's particularly useful for Fab Academy students because:
Choose your development approach based on these factors:
Through this week's work, students should gain understanding of:
The skills developed this week are essential for creating: