Step by Step Guide

In this project, you will control a Street Light module connected to your Pixie M1 using a custom website. You will be able to turn the light on and off from any phone, tablet, or computer on the same Wi-Fi network. This is your introduction to creating web-controlled hardware.

1. What You’ll Need

2. Make the Connections

Connect the parts as shown by the diagram bellow

Street Light Module

  • G (Ground) → Connect to Pixie M1 GND
  • VIN (Power) → Connect to Pixie M1 3V3 pin
  • S (Signal) → Connect to Pixie M1 Pin 14

3. Connect to PC & Upload Code

  • Install Arduino IDE and Setup Axiometa PIXIE M1 if you haven't already
  • Connect the Pixie M1 to your computer using the USB-C cable
  • Select the correct board in Arduino IDE:
  • Go to Tools → Board →  Axiometa Pixie M1
  • Copy and Paste the code you can find at the end of this page.


You will need to update two lines in the code with your Wi-Fi credentials: replace the SSID with your network name and the password with your Wi-Fi password.

const char* SSID     = "Axiometa";
const char* PASSWORD = "Axiometa";

  • Now upload code (CMD+U or CTRL+U)

4. Test

After uploading the code, open the Serial Monitor by going to Tools > Serial Monitor (or press CTRL+Shift+M).

You should see an IP address printed in the Serial Monitor. Make sure your phone is connected to the same Wi-Fi network as the ESP32.

Open a web browser on your phone and type in that IP address.

  • You should see a simple webpage with ON and OFF
  • Click the buttons to control your Street Light
  • Street Light should turn ON and OFF

Back to blog

Arduino Code

example.ino
#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>

const char* SSID     = "Axiometa";
const char* PASSWORD = "Axiometa";

// Street Light on GPIO 14
const int LIGHT_PIN = 14;
bool lightOn = false;

WebServer server(80);

// Simple one-page UI
const char INDEX_HTML[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Street Light</title>
<style>
  body { font-family: system-ui, sans-serif; margin: 2rem; }
  .card { max-width: 360px; border:1px solid #ddd; padding:1rem; border-radius:8px; }
  button { padding:0.7rem 1rem; font-size:1rem; margin-right:0.5rem; }
  #state { font-weight:600; }
</style>
</head>
<body>
  <div class="card">
    <h1>Street Light</h1>
    <p>Status: <span id="state">…</span></p>
    <p>
      <button onclick="fetch('/on').then(update)">Turn ON</button>
      <button onclick="fetch('/off').then(update)">Turn OFF</button>
    </p>
  </div>
<script>
async function update(){
  const r = await fetch('/state'); 
  const j = await r.json();
  document.getElementById('state').textContent = j.on ? 'ON' : 'OFF';
}
update();
</script>
</body>
</html>
)HTML";

void handleRoot() {
  server.send_P(200, "text/html", INDEX_HTML);
}

void handleOn() {
  lightOn = true;
  digitalWrite(LIGHT_PIN, HIGH);
  server.send(200, "text/plain", "OK");
}

void handleOff() {
  lightOn = false;
  digitalWrite(LIGHT_PIN, LOW);
  server.send(200, "text/plain", "OK");
}

void handleState() {
  String json = String("{\"on\":") + (lightOn ? "true" : "false") + "}";
  server.send(200, "application/json", json);
}

void setup() {
  pinMode(LIGHT_PIN, OUTPUT);
  digitalWrite(LIGHT_PIN, LOW); // start OFF

  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting…");

  WiFi.mode(WIFI_STA);
  WiFi.begin(SSID, PASSWORD);
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
  Serial.println();
  Serial.print("IP: "); Serial.println(WiFi.localIP());

  if (MDNS.begin("streetlight")) {
    Serial.println("mDNS started: http://streetlight.local");
  }

  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.on("/state", handleState);
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}