WEEK 15 INTERFACE AND APPLICATION PROGAMMING

#define BLYNK_TEMPLATE_ID "..."
#define BLYNK_TEMPLATE_NAME "..."
#define BLYNK_AUTH_TOKEN "..."

#include 
#include 
#include 
#include 
#include 

// --- NETWORK CONFIGURATION ---
char ssid[] = "...";
char pass[] = "...";

const int oneWireBus = 4;     // Data pin for the DS18B20 temperature probe
const int pinLED = 2;         // Onboard LED (usually blue on ESP32 DevKits)

OneWire oneWire(oneWireBus);
DallasTemperature sensors(&oneWire);
BlynkTimer timer;

// --- SENSOR READING & DATA TRANSMISSION ---
void sendSensorData() {
  sensors.requestTemperatures(); 
  float tempC = sensors.getTempCByIndex(0);

  // Check if the sensor is properly connected
  if (tempC != DEVICE_DISCONNECTED_C) {
    // Send data to Blynk Cloud (Virtual Pin V1)
    Blynk.virtualWrite(V1, tempC);
    
    // Serial Monitor feedback for debugging
    Serial.print("Sent Temp: ");
    Serial.print(tempC);
    Serial.println(" °C");

    // Visual feedback on the ESP32 (Short blink upon transmission)
    digitalWrite(pinLED, HIGH);
    delay(100);
    digitalWrite(pinLED, LOW);
  } else {
    Serial.println("Error: Probe not detected. Check wiring/pull-up resistor.");
  }
}

// --- REMOTE CONTROL FROM APP (Button on Virtual Pin V2) ---
BLYNK_WRITE(V2) {
  int relayState = param.asInt(); // Get integer value from the App widget
  
  // Controls the onboard LED or a relay based on the App button state
  digitalWrite(pinLED, relayState); 
}

void setup() {
  Serial.begin(115200);
  
  pinMode(pinLED, OUTPUT);
  sensors.begin(); // Initialize the OneWire sensors

  Serial.println("Connecting to Blynk Cloud...");
  Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);
  
  // Set up a timer to send data every 2 seconds (non-blocking)
  timer.setInterval(2000L, sendSensorData);
}

void loop() {
  Blynk.run(); // Keeps the Blynk connection alive
  timer.run(); // Checks the timer to trigger data transmission
}
        

#include 

const int pinNTC = A0;
const int B = 3950;      // Beta coefficient (standard for most 10k NTC thermistors)
const int R0 = 10000;    // Resistance of the NTC at 25°C (Room temperature)

void setup() {
  Serial.begin(115200);
  
  // Set ADC resolution to 12-bit (0-4095 range) for better precision
  // Common for modern boards like Seeed Studio Xiao or ESP32
  analogReadResolution(12); 
}

void loop() {
  int val = analogRead(pinNTC);
  
  // Calculate resistance based on the analog reading (voltage divider)
  // Assuming a pull-up configuration on the analog pin
  float resistance = (float)(4095 - val) * R0 / val;
  
  // Steinhart-Hart equation (Beta-model approximation)
  // 1. Calculate temperature in Kelvin
  // 2. Convert Kelvin to Celsius (-273.15)
  float temperature = 1 / (log(resistance / R0) / B + 1 / 298.15) - 273.15;

  // Stream the temperature value via Serial for Processing to parse
  Serial.println(temperature); 
  
  delay(200); // Sampling rate (approx. 5Hz)
}
        

import processing.serial.*;

Serial myPort;
float temp = 0;
float[] history; // Array to store historical data points for the graph

void setup() {
  size(800, 400);
  history = new float[width]; // Initialize the array based on screen width
  
  // List available serial ports in the console
  printArray(Serial.list());
  
  // Ensure the correct index is selected for your Xiao or microcontroller
  try {
    myPort = new Serial(this, Serial.list()[0], 115200);
    myPort.bufferUntil('\n'); // Generate a serialEvent when a newline arrives
  } catch (Exception e) {
    println("Serial Port Error: Check your connection and index.");
  }
}

void draw() {
  background(20);
  drawGrid(); // Call helper function to draw the background grid
  
  // Draw the temperature trend line
  stroke(0, 255, 200);
  strokeWeight(2);
  noFill();
  beginShape();
  for (int i = 0; i < history.length; i++) {
    // Map the temperature range (0°C - 50°C) to the window height
    // Note: Y-axis is inverted in Processing (0 is top)
    float y = map(history[i], 0, 50, height, 0);
    vertex(i, y);
  }
  endShape();
  
  // Display current numerical value
  fill(255);
  textSize(32);
  text(nf(temp, 0, 1) + " °C", 20, 50);
}

// Handler for incoming serial data
void serialEvent(Serial p) {
  String inString = p.readStringUntil('\n');
  if (inString != null) {
    temp = float(trim(inString));
    
    // Shift historical data to the left to create a scrolling effect
    for (int i = 0; i < history.length - 1; i++) {
      history[i] = history[i+1];
    }
    // Add the newest reading to the end of the array
    history[history.length - 1] = temp;
  }
}

// Background visualization helper
void drawGrid() {
  stroke(50); // Subtle grey for the grid lines
  for (int i = 0; i < height; i += 50) {
    line(0, i, width, i);
  }
}
        

import processing.serial.*;

Serial myPort;
float temp = 0; 
float smoothedTemp = 0; 

// Gauge configuration settings
float cx, cy; 
float diameter; 
float startAngle = PI + QUARTER_PI; 
float endAngle = TWO_PI + PI - QUARTER_PI; 
float minTemp = 20;
float maxTemp = 50;

void setup() {
  size(800, 600);
  smooth(8); // Anti-aliasing for smoother graphics
  
  cx = width / 2;
  cy = height / 2 + 50; 
  diameter = width * 0.65; 
  
  // List available serial ports
  printArray(Serial.list());
  
  // REMINDER: Change the index [0] to match your specific port if it doesn't connect
  try {
    myPort = new Serial(this, Serial.list()[0], 115200);
    myPort.bufferUntil('\n'); // Wait for a newline character to trigger serialEvent
  } catch (Exception e) {
    println("Error: Could not open the port. Check the index [0, 1, 2...]");
  }
  
  background(15);
}

void draw() {
  background(15); // Clear the frame every cycle
  
  // 1. Movement smoothing (Linear Interpolation)
  smoothedTemp = lerp(smoothedTemp, temp, 0.08);
  
  // 2. Draw the gauge BACKGROUND arc (Dark grey)
  noFill(); // <--- CRITICAL: Prevents solid fill distortion
  strokeWeight(45); 
  stroke(40); 
  strokeCap(ROUND); 
  arc(cx, cy, diameter, diameter, startAngle, endAngle);
  
  // 3. Draw visual markers (Ticks and numbers)
  drawMarkers();
  
  // 4. Draw the PROGRESS BAR (Dynamic color feedback)
  float tempAngle = map(smoothedTemp, minTemp, maxTemp, startAngle, endAngle);
  tempAngle = constrain(tempAngle, startAngle, endAngle);
  
  // Color calculation (Transition Blue -> Red)
  float colorRatio = map(smoothedTemp, minTemp, maxTemp, 0, 1);
  colorRatio = constrain(colorRatio, 0, 1);
  color barColor = lerpColor(color(0, 100, 255), color(255, 40, 0), colorRatio);
  
  // Draw the colored data arc
  noFill(); 
  stroke(barColor);
  strokeWeight(45);
  if (smoothedTemp > minTemp) {
    arc(cx, cy, diameter, diameter, startAngle, tempAngle);
  }
  
  // 5. Aesthetic glow (Thin outer stroke)
  strokeWeight(2);
  stroke(255, 30);
  arc(cx, cy, diameter + 55, diameter + 55, startAngle, endAngle);

  // 6. Central numeric display
  drawNumericDisplay(barColor);
}

void drawMarkers() {
  int numMarkers = 7; 
  for (int i = 0; i < numMarkers; i++) {
    float angle = map(i, 0, numMarkers - 1, startAngle, endAngle);
    float labelTemp = map(i, 0, numMarkers - 1, minTemp, maxTemp);
    
    float rOuter = diameter / 2 + 20;
    float rInner = diameter / 2 - 20;
    
    stroke(80); 
    strokeWeight(3);
    line(cx + cos(angle)*rInner, cy + sin(angle)*rInner, cx + cos(angle)*rOuter, cy + sin(angle)*rOuter);
    
    // Labels/Numbers
    fill(120);
    textAlign(CENTER, CENTER);
    textSize(18);
    float rText = diameter / 2 + 50;
    text(int(labelTemp) + "°", cx + cos(angle)*rText, cy + sin(angle)*rText);
  }
}

void drawNumericDisplay(color c) {
  // Container box for the value
  fill(0, 100);
  noStroke();
  rectMode(CENTER);
  rect(cx, cy - 30, 220, 110, 15);
  
  // Temperature value string
  fill(255);
  textSize(70);
  textAlign(CENTER, CENTER);
  text(nf(smoothedTemp, 0, 1), cx - 20, cy - 40);
  
  // Unit label
  fill(c);
  textSize(30);
  text("°C", cx + 70, cy - 30);
  
  // Title/Caption
  fill(100);
  textSize(14);
  text("AMBIENT TEMPERATURE", cx, cy + 10);
}

// Serial Communication Handler
void serialEvent(Serial p) {
  String inString = p.readStringUntil('\n'); // Read incoming serial buffer
  if (inString != null) {
    inString = trim(inString); // Remove whitespace/newlines
    float m = float(inString); // Convert string to float
    if (!Float.isNaN(m)) {
      temp = m; // Update global temperature variable
    }
  }
}
        

import processing.serial.*;

Serial myPort;
float temp = 0; 
float smoothedTemp = 0; 

// Gauge Configuration
float cx, cy; 
float diameter; 
float startAngle = PI + QUARTER_PI; 
float endAngle = TWO_PI + PI - QUARTER_PI; 
float minTemp = 20;
float maxTemp = 50;

void setup() {
  size(800, 600);
  smooth(8); // Anti-aliasing for better UI quality
  
  cx = width / 2;
  cy = height / 2 + 50; 
  diameter = width * 0.65; 
  
  // List available serial ports
  printArray(Serial.list());
  
  // Initialize Serial communication
  try {
    // Adjust the index [0] to match your specific port
    myPort = new Serial(this, Serial.list()[0], 115200);
    myPort.bufferUntil('\n');
  } catch (Exception e) {
    println("Error: Could not open serial port. Check the index [0, 1, 2...]");
  }
  
  background(15);
}

void draw() {
  background(15); // Refresh background every frame
  
  // 1. Movement smoothing (Linear Interpolation)
  smoothedTemp = lerp(smoothedTemp, temp, 0.08);
  
  // 2. Draw Gauge Background (Dark grey arc)
  noFill(); 
  strokeWeight(45); 
  stroke(40); 
  strokeCap(ROUND); 
  arc(cx, cy, diameter, diameter, startAngle, endAngle);
  
  // 3. Draw UI Markers (Ticks and labels)
  drawMarkers();
  
  // 4. Draw Progress Bar (Dynamic color)
  float tempAngle = map(smoothedTemp, minTemp, maxTemp, startAngle, endAngle);
  tempAngle = constrain(tempAngle, startAngle, endAngle);
  
  // Color calculation
  float colorRatio = map(smoothedTemp, minTemp, maxTemp, 0, 1);
  colorRatio = constrain(colorRatio, 0, 1);

  /* 
     UPDATED COLOR SCHEME:
     From Yellow (255, 200, 0) to Green (0, 255, 100).
     Changed to provide a different visual feedback compared to the previous Blue-Red scale.
  */
  color barColor = lerpColor(color(255, 200, 0), color(0, 255, 100), colorRatio);
  
  // Draw the active colored arc
  noFill(); 
  stroke(barColor);
  strokeWeight(45);
  if (smoothedTemp > minTemp) {
    arc(cx, cy, diameter, diameter, startAngle, tempAngle);
  }
  
  // 5. Aesthetic glow (Fine outer line)
  strokeWeight(2);
  stroke(255, 30);
  arc(cx, cy, diameter + 55, diameter + 55, startAngle, endAngle);

  // 6. Center Numeric Display
  drawNumericDisplay(barColor);
}

void drawMarkers() {
  int numMarkers = 7; 
  for (int i = 0; i < numMarkers; i++) {
    float angle = map(i, 0, numMarkers - 1, startAngle, endAngle);
    float labelTemp = map(i, 0, numMarkers - 1, minTemp, maxTemp);
    
    float rOuter = diameter / 2 + 20;
    float rInner = diameter / 2 - 20;
    
    stroke(80); 
    strokeWeight(3);
    line(cx + cos(angle)*rInner, cy + sin(angle)*rInner, cx + cos(angle)*rOuter, cy + sin(angle)*rOuter);
    
    // Labels
    fill(120);
    textAlign(CENTER, CENTER);
    textSize(18);
    float rText = diameter / 2 + 50;
    text(int(labelTemp) + "°", cx + cos(angle)*rText, cy + sin(angle)*rText);
  }
}

void drawNumericDisplay(color c) {
  // Number background box
  fill(0, 100);
  noStroke();
  rectMode(CENTER);
  rect(cx, cy - 30, 220, 110, 15);
  
  // Temperature value
  fill(255);
  textSize(70);
  textAlign(CENTER, CENTER);
  text(nf(smoothedTemp, 0, 1), cx - 20, cy - 40);
  
  // Units
  fill(c);
  textSize(30);
  text("°C", cx + 70, cy - 30);
  
  fill(100);
  textSize(14);
  text("AMBIENT TEMPERATURE", cx, cy + 10);
}

void serialEvent(Serial p) {
  // Read incoming string until newline
  String inString = p.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    float m = float(inString);
    // Validate that the received data is a number
    if (!Float.isNaN(m)) {
      temp = m;
    }
  }
}