Exercise 5: ESP8266 Web Server Development

Overview

This exercise consists of three main parts that will take you from basic networking concepts to building a complete web server application with drag-and-drop functionality on the ESP8266 D1 Mini platform.

Once the Wi-Fi connection is established, the ESP8266 can: Respond to HTTP requests (GET/POST), Return HTML pages, Receive form data or AJAX calls, and Control I/O pins through the browser.

Arduino IDE Setup for ESP8266 D1 Mini

Add ESP8266 Board Manager URL

Open: File → Preferences
Add to "Additional Boards Manager URLs":
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Select Board Manager ESP8266

Part 1: Fundamentals - Networking & Communication

CSV (Comma Separated Values)

CSV is a simple file format where values are separated by commas. Example:

23,0.6,hello

Each value separated by a comma. First value: 23, second: 0.6, third: "hello"

JSON (JavaScript Object Notation)

JSON is a structured file format where data is represented as key-value pairs. Example:

{
  "temperature": 23,
  "humidity": 0.6,
  "message": "hello"
}

JSON uses curly braces {} for objects and square brackets [] for arrays.

🎥 Video Tutorial

Watch the tutorial video (Duration: ~15-20 minutes):

▶ Watch on YouTube (starts at 4:43)

📚 Useful Links and Resources

ESP8266 Web Server Tutorial - Access Point mode guide
ESP8266 HTTP GET and POST - Good place to practice HTTP requests

TCP/IP Protocol

TCP/IP is the fundamental protocol that enables network communication. ESP8266 uses TCP/IP through Wi-Fi connection.

Part 2: Web Development Basics

Server Creation (AP/Station Mode)
HTML Basics → W3Schools Tutorial
JavaScript Fundamentals → W3Schools Tutorial
CSS Styling → W3Schools Tutorial

Part 3: Advanced Drag-and-Drop UI

Drag & Drop Keywords - Step-by-Step AI Guide

📌 What is this Modal? A popup window overlay that appears on top of the main page. Click the × or outside this box to close it.

Step-by-step guide: What to ask AI when creating drag and drop functionality from scratch:

Step 1: Create Dragzone and Dropzone

Ask AI: "Create dragzone with draggable buttons and dropzone area" or "Add source area (dragzone) and target area (dropzone) with borders"

Live Demo:

Drag Zone:

Button A

Drop Zone:

Drop here

Code Example (Editable):

<!-- HTML Structure -->
<div id="dragZone">
  <!-- Source area for draggable items -->
  <div draggable="true">Button A</div>
</div>

<div id="dropZone" style="border: 2px dashed #ccc;">
  <!-- Target area where items will be dropped -->
  Drop here
</div>

<style>
#dropZone {
  padding: 20px;        /* Space inside dropzone */
  min-height: 80px;     /* Minimum height */
  /* TRY: Change padding to 40px or min-height to 120px */
}
</style>

<!-- TIPS: 
  - Change "Button A" to "Forward" 
  - Add more draggable divs
  - Try border: 3px solid #2196F3;
-->

💡 Tip: Edit the code and click "Run" to see changes in the demo

Step 1b: Style Dropzone Border

Ask AI: "Add border to dropzone (border: 2px dashed #ccc)" or "Change border color when dragging over (drag-over state)"

Live Demo:

Dropzone with border

Code Example:

<!-- HTML -->
<div id="dropZone">Drop here</div>

<style>
/* Default dropzone style */
#dropZone {
  border: 2px dashed #ccc;  /* Style: solid/dashed/dotted */
  /* TRY: Change color to #2196F3 or style to 'solid' */
}

/* Active state when dragging over */
#dropZone.drag-over {
  border: 2px solid #4CAF50;  /* Green solid border */
  background-color: #e8f5e9;  /* Light green background */
  /* TRY: Change to border: 3px solid #ff9800; */
}
</style>

<script>
// Add visual feedback when dragging over
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();              // Required to allow drop
  dropZone.classList.add('drag-over');  // Add CSS class
});

// Remove feedback when leaving
dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('drag-over');  // Remove CSS class
});
</script>

<!-- TIPS:
  - Try different border styles: solid, dashed, dotted, double
  - Try different colors: #2196F3 (blue), #f44336 (red)
  - Add border-radius: 8px; for rounded corners
-->

Step 2: Add Draggable Buttons

Ask AI: "Create draggable buttons with labels like 'Forward', 'Right', 'Left', 'Stop'" or "Add buttons with draggable='true' attribute"

Live Demo:

Forward

Right

Drag buttons horizontally to reorder them. Click × to delete.

Code Example:

<!-- HTML Structure -->
<div id="container">
  <!-- First button item -->
  <div draggable="true" id="btn-forward">
    <span>Forward</span>  <!-- Button label (what user sees) -->
    <button onclick="deleteBtn(this)">×</button>  <!-- Delete button -->
  </div>
  
  <!-- Second button item -->
  <div draggable="true" id="btn-right">
    <span>Right</span>
    <button onclick="deleteBtn(this)">×</button>
  </div>
</div>

<style>
/* Container with horizontal alignment */
#container {
  display: flex;
  flex-direction: row;     /* Arrange horizontally (left to right) */
  align-items: center;     /* Vertical center alignment */
  gap: 8px;                /* Space between items */
  flex-wrap: wrap;         /* Wrap to next line if needed */
  /* TRY: Change to flex-direction: column; for vertical */
}

[draggable="true"] {
  cursor: move;            /* Show move cursor */
}
</style>

<script>
let draggedItem = null;  // Track which item is being dragged

// Setup drag events for all draggable items
document.querySelectorAll('[draggable]').forEach(item => {
  
  // When drag starts - save reference
  item.addEventListener('dragstart', (e) => {
    draggedItem = e.target;
    e.target.style.opacity = '0.5';  // Visual feedback
  });
  
  // When dragging over another item - reorder
  item.addEventListener('dragover', (e) => {
    e.preventDefault();  // Required to allow drop
    
    // Calculate position for horizontal reordering
    const rect = e.target.getBoundingClientRect();
    const midpoint = rect.left + rect.width / 2;
    
    if (e.target !== draggedItem && e.clientX < midpoint) {
      // Insert before if mouse is on left half
      container.insertBefore(draggedItem, e.target);
    } else if (e.target !== draggedItem) {
      // Insert after if mouse is on right half
      container.insertBefore(draggedItem, e.target.nextSibling);
    }
  });
  
  // When drag ends - restore opacity
  item.addEventListener('dragend', (e) => {
    e.target.style.opacity = '1';
  });
});

// Delete button function
function deleteBtn(btn) {
  btn.closest('div').remove();  // Find parent div and remove it
}
</script>

<!-- TIPS TO TRY:
  - Add more buttons: "Left", "Stop", "Back"
  - Change button colors in CSS
  - Add data-command="forward" attribute
  - Try gap: 15px; for more spacing
  - Add transition: opacity 0.3s; for smooth fade
-->

Step 3: Button Name, ID, and Data Attributes

Button Name/Label: What user sees (e.g., "Move Forward"). Button ID: Technical identifier in code (e.g., "btn-forward"). Data Attributes: Custom data storage (e.g., data-command="forward"). Ask AI: "Set button text to 'Forward', id to 'btn-forward', and data-command='f'" or "Add unique ID and data attributes to buttons"

Code Example:

<!-- Button with Name, ID, and Data Attributes -->

<button 
  id="btn-forward"              <!-- ID: Unique identifier -->
  data-command="f"              <!-- Data: Command code -->
  data-speed="100"              <!-- Data: Default speed -->
  onclick="executeCommand(this)">
    Move Forward                <!-- Name/Label: What user sees -->
</button>

<button 
  id="btn-right" 
  data-command="r" 
  data-speed="100">
    Turn Right
</button>

<script>
// Access by ID (unique identifier)
const forwardBtn = document.getElementById('btn-forward');
console.log('Button ID:', forwardBtn.id);  // "btn-forward"

// Access button label/name (text content)
console.log('Button Name:', forwardBtn.textContent);  // "Move Forward"

// Access data attributes
console.log('Command:', forwardBtn.dataset.command);  // "f"
console.log('Speed:', forwardBtn.dataset.speed);      // "100"

// Use data attributes in function
function executeCommand(button) {
  const cmd = button.dataset.command;    // Get 'f'
  const speed = button.dataset.speed;    // Get '100'
  const name = button.textContent;       // Get 'Move Forward'
  
  console.log(`Execute: ${cmd}:${speed} (${name})`);
  // Output: "Execute: f:100 (Move Forward)"
}

// Change button name dynamically
forwardBtn.textContent = 'Go Forward';  // Changes what user sees
// ID stays same: 'btn-forward' (used in code)

// Add data attribute dynamically
forwardBtn.dataset.duration = '2000';  // data-duration="2000"
console.log(forwardBtn.dataset.duration);  // "2000"
</script>

<!-- SUMMARY:
  - innerHTML/textContent = Button NAME (user visible)
  - id = Button ID (code reference, must be unique)
  - data-* = Custom data storage (data-command, data-speed)
-->

<!-- TIPS TO TRY:
  - Use getElementById('btn-forward') to find button by ID
  - Use dataset.command to read data-command attribute
  - Name can change, but ID should stay constant
  - Data attributes are perfect for storing parameters
  - Try data-direction, data-duration, data-pin
  - Access: element.dataset.myData = "value"
-->

Step 4: Add Parameter Input

Ask AI: "Add input field for parameters like r:100 (right:speed)" or "Create number input for servo speed value (0-255)"

Live Demo:

Command: Speed:

Code Example:

<!-- HTML Form Elements -->
<label>Command:</label>
<input type="text" id="cmd" value="r">  <!-- r=right, f=forward, l=left -->

<label>Speed:</label>
<input type="number" id="speed" 
       min="0"        <!-- Minimum value -->
       max="255"      <!-- Maximum value (servo range) -->
       value="100">   <!-- Default speed -->

<button onclick="generate()">Generate Command</button>

<div id="output"></div>  <!-- Display result here -->

<script>
function generate() {
  // Get values from input fields
  const cmd = document.getElementById('cmd').value;
  const speed = document.getElementById('speed').value;
  
  // Combine into command format: "r:100"
  const result = cmd + ':' + speed;
  
  // Display result
  document.getElementById('output').textContent = result;
  console.log(result);  // Also log to console
}
</script>

<!-- TIPS TO TRY:
  - Change default command to 'f' (forward)
  - Change max to 180 for different servo
  - Add validation: if (speed < 0 || speed > 255)
  - Add more parameters: r:100:2000 (cmd:speed:duration)
  - Create dropdown instead of text input
-->

Step 5: Drag & Drop Functionality

Ask AI: "Implement drag and drop so buttons can be dropped into dropzone" or "Add dragstart, dragover, and drop event handlers"

Live Demo with Debug Console:

Reorderable Buttons (drag to swap positions):

Debug Console:

                                    Click "Start" to begin logging events...
                                

Current Order: R, L

Code Example:

<!-- HTML -->
<div draggable="true" id="dragItem">Button A</div>
<div id="dropZone">Drop here</div>
<div id="debug"></div>  <!-- Debug output -->

<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');
const debug = document.getElementById('debug');

// 1. DRAGSTART - When user starts dragging
dragItem.addEventListener('dragstart', (e) => {
  console.log('🟢 DRAGSTART - User started dragging');
  
  e.dataTransfer.effectAllowed = 'copy';  // Allow copy operation
  e.dataTransfer.setData('text/html', e.target.innerHTML);
  
  // Visual feedback
  e.target.style.opacity = '0.5';
  debug.innerHTML += 'dragstart event fired<br>';
});

// 2. DRAGEND - When dragging stops
dragItem.addEventListener('dragend', (e) => {
  console.log('🔴 DRAGEND - Dragging stopped');
  e.target.style.opacity = '1';  // Restore opacity
  debug.innerHTML += 'dragend event fired<br>';
});

// 3. DRAGOVER - When dragging over dropzone
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();  // ⚠️ REQUIRED! Without this, drop won't work
  console.log('🟡 DRAGOVER - Over dropzone');
  
  e.dataTransfer.dropEffect = 'copy';  // Show copy cursor
  dropZone.style.backgroundColor = '#e8f5e9';  // Highlight
});

// 4. DRAGLEAVE - When leaving dropzone
dropZone.addEventListener('dragleave', () => {
  console.log('🟠 DRAGLEAVE - Left dropzone');
  dropZone.style.backgroundColor = '';  // Remove highlight
  debug.innerHTML += 'dragleave event fired<br>';
});

// 5. DROP - When item is dropped
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();  // Prevent default behavior
  console.log('✅ DROP - Item dropped!');
  
  const data = e.dataTransfer.getData('text/html');
  dropZone.innerHTML = data;  // Add dropped content
  dropZone.style.backgroundColor = '';  // Reset background
  
  debug.innerHTML += '<strong>drop event - SUCCESS!</strong><br>';
});
</script>

<!-- TIPS TO TRY:
  - Remove e.preventDefault() from dragover to see why drop fails
  - Change effectAllowed to 'move' instead of 'copy'
  - Add console.log() to see exact event order
  - Try dropEffect: 'move' or 'link'
  - Add timestamp to debug: new Date().toLocaleTimeString()
-->

Step 6: Clone Items (Keep Original)

Ask AI: "Clone buttons when dragging so original stays in place" or "Make copies of dragged items instead of moving them"

Example 1: MOVE (Original moves)

Source:

Button A

Target (drag here):

Drop here

⚠️ Notice: Original button DISAPPEARS from source

Example 2: CLONE (Original stays)

Source:

Button B

Target (drag here):

Drop here

✅ Notice: Original button REMAINS in source

Code Example:

<!-- Clone vs Move Comparison -->

<script>
// METHOD 1: CLONE (Copy) - Original stays in place
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  
  // Get the data from dragged item
  const data = e.dataTransfer.getData('text/html');
  
  // Create NEW element (clone)
  const clone = document.createElement('div');
  clone.innerHTML = data;           // Copy content
  clone.className = 'button-item';  // Same styling
  
  // Add to dropzone - ORIGINAL REMAINS!
  dropZone.appendChild(clone);
  
  console.log('Cloned - original still in drag zone');
});

// ----------------------------------------

// METHOD 2: MOVE - Original is removed
let draggedElement = null;

dragItem.addEventListener('dragstart', (e) => {
  draggedElement = e.target;  // Save reference to original
  e.dataTransfer.effectAllowed = 'move';  // 'move' not 'copy'
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  
  // Move original element (not clone)
  dropZone.appendChild(draggedElement);  // ORIGINAL MOVES!
  
  console.log('Moved - original is now in dropzone');
});

// ----------------------------------------

// KEY DIFFERENCE:
// CLONE: Create new element with createElement()
// MOVE:  Use the draggedElement reference directly

</script>

<!-- TIPS TO TRY:
  - Clone: Use cloneNode(true) for deep copy with children
  - Clone: Copy data attributes: clone.dataset.cmd = original.dataset.cmd
  - Move: effectAllowed = 'move' shows different cursor
  - Clone allows multiple drops of same item
  - Move is useful for one-time placement
  - Combine: Clone from source, but Move within dropzone
-->

Step 7: Visual Feedback (Cursor, Opacity)

Ask AI: "Change cursor to 'pointer' on hover" or "Change cursor to 'move' when dragging" or "Add opacity: 0.5 when dragging item"

Live Demo:

Hover: opacity + color change | Click: more opacity change

Try different effects:

Code Example:

<!-- HTML -->
<button id="myBtn">Hover & Click Me</button>

<style>
/* Button base styles */
button {
  cursor: pointer;              /* Show pointer cursor on hover */
  transition: all 0.3s;         /* Smooth transitions for ALL properties */
  padding: 10px 20px;
  background-color: #2196F3;    /* Default blue */
  color: white;
  border: none;
  border-radius: 4px;
}

/* Hover state - mouse over button */
button:hover {
  opacity: 0.8;                      /* 80% opacity */
  background-color: #1976D2;         /* Darker blue */
  transform: scale(1.05);            /* Zoom 5% larger */
  /* TRY: Change scale to 1.1 or add box-shadow */
}

/* Active state - button being clicked */
button:active {
  opacity: 0.5;                      /* 50% opacity */
  background-color: #0d47a1;         /* Even darker blue */
  transform: scale(0.95);            /* Shrink 5% (press effect) */
  /* TRY: Change to scale(0.9) for more press effect */
}
</style>

<script>
// Example 1: Visual feedback when dragging
const element = document.getElementById('myBtn');

element.addEventListener('dragstart', () => {
  console.log('Drag started');
  element.style.cursor = 'move';           // Change to move cursor
  element.style.opacity = '0.5';           // Make semi-transparent
  element.style.backgroundColor = '#ff9800';  // Orange color
  /* TRY: Add element.style.transform = 'rotate(5deg)'; */
});

element.addEventListener('dragend', () => {
  console.log('Drag ended');
  element.style.cursor = 'pointer';        // Restore pointer cursor
  element.style.opacity = '1';             // Restore full opacity
  element.style.backgroundColor = '#2196F3';  // Restore blue
});

// Example 2: Hover feedback with JavaScript (alternative to CSS)
element.addEventListener('mouseenter', () => {
  console.log('Mouse entered button');
  element.style.backgroundColor = '#1976D2';  // Darker blue
  /* You can also change cursor here if needed */
});

element.addEventListener('mouseleave', () => {
  console.log('Mouse left button');
  element.style.backgroundColor = '#2196F3';  // Original blue
});

// Example 3: Click feedback
element.addEventListener('click', () => {
  console.log('Button clicked!');
  // Flash effect
  element.style.backgroundColor = '#4CAF50';  // Green flash
  setTimeout(() => {
    element.style.backgroundColor = '#2196F3';  // Back to blue
  }, 200);
});
</script>

<!-- TIPS TO TRY:
  - Opacity: Try 0.3, 0.6, 0.9 for different transparency levels
  - Colors: Try #4CAF50 (green), #f44336 (red), #ff9800 (orange)
  - Transform: scale(1.1), rotate(5deg), translateY(-2px)
  - Cursor: grab, grabbing, move, pointer, help
  - Add box-shadow: 0 4px 8px rgba(0,0,0,0.3); on hover
  - Combine: opacity + color + transform together!
-->

Step 8: Send to C-Code

Ask AI: "Convert commands to C function calls like moveRight(100)" or "Send command sequence as CSV string: r:100,f:50,stop"

Live Demo:

Available Commands (drag to sequence):

R:100

L:50

F:80

STOP

Command Sequence (drop here):

Drop commands here

Code Example:

<!-- HTML -->
<div id="cmdSequence"></div>  <!-- Dropzone for commands -->
<button onclick="sendToESP()">Send to ESP8266</button>

<script>
// Read all commands from dropzone
function getCommands() {
  const items = document.querySelectorAll('#cmdSequence .cmd-item');
  const commands = [];
  
  items.forEach(item => {
    commands.push(item.dataset.cmd);  // Get data-cmd attribute
  });
  
  return commands;  // ['R:100', 'L:50', 'F:80', 'STOP']
}

// Method 1: Send as JSON
function sendJSON() {
  const commands = getCommands();
  const data = { commands: commands };  // {"commands": ["R:100", "L:50"]}
  
  fetch('/execute', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(response => response.text())
  .then(result => console.log('Success:', result));
}

// Method 2: Send as CSV (GET request)
function sendCSV() {
  const commands = getCommands();
  const csv = commands.join(',');  // "R:100,L:50,F:80,STOP"
  
  // Send as URL parameter
  fetch('/execute?cmds=' + csv)
    .then(response => response.text())
    .then(result => console.log('Success:', result));
}

// Method 3: Send as URL parameters
function sendParams() {
  const commands = getCommands();
  let url = '/execute?';
  
  commands.forEach((cmd, index) => {
    url += 'cmd' + index + '=' + cmd + '&';
  });
  // Result: /execute?cmd0=R:100&cmd1=L:50&cmd2=F:80
  
  fetch(url).then(response => response.text());
}
</script>

<!-- C Code on ESP8266 -->
<!--
// Handle GET request with CSV
server.on("/execute", []() {
  String cmds = server.arg("cmds");  // Get "R:100,L:50,STOP"
  
  // Parse CSV
  int start = 0;
  int end = cmds.indexOf(',');
  
  while (end != -1) {
    String cmd = cmds.substring(start, end);  // "R:100"
    executeCommand(cmd);  // Call C function
    
    start = end + 1;
    end = cmds.indexOf(',', start);
  }
  
  server.send(200, "text/plain", "OK");
});
-->

<!-- TIPS TO TRY:
  - Send single command: fetch('/move?dir=R&speed=100')
  - Use JSON.parse() on ESP8266 with ArduinoJson library
  - Add error handling with .catch()
  - Show loading spinner while sending
  - Display response message to user
-->

UI Elements & Controls

Additional elements for user interaction:

Text Input Field

Ask AI: "Add text input field for button name" or "Create input type='text' with placeholder='Enter name'" or "Add label for text field"

Live Demo:

Button Name:

Code Example:

<!-- Text Input Field -->
<label for="nameInput">Button Name:</label>
<input type="text" 
       id="nameInput" 
       placeholder="Enter button name"  <!-- Gray hint text -->
       value=""                         <!-- Default value -->
       maxlength="20">                  <!-- Max characters -->

<button onclick="createBtn()">Create</button>

<script>
function createBtn() {
  // Get value from input field
  const input = document.getElementById('nameInput');
  const name = input.value;  // User's typed text
  
  // Validation
  if (name === '' || name.trim() === '') {
    alert('Please enter a name!');
    return;
  }
  
  // Create new button with user's text
  const newButton = document.createElement('button');
  newButton.textContent = name;      // Set button text
  newButton.id = 'btn-' + name.toLowerCase().replace(/\s/g, '-');
  
  // Add to page
  document.body.appendChild(newButton);
  
  // Clear input field
  input.value = '';
  input.focus();  // Return focus to input
}

// Listen for Enter key
document.getElementById('nameInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    createBtn();  // Create button on Enter
  }
});
</script>

<!-- TIPS TO TRY:
  - Add input.value.length check for validation
  - Use trim() to remove spaces: name.trim()
  - Add oninput event to validate while typing
  - Clear field after creating: input.value = ''
  - Focus input after creating: input.focus()
  - Disable button if input empty
-->

Range Slider

Ask AI: "Add range slider for speed control (0-255)" or "Create input type='range' with value display" or "Show current slider value next to slider"

Live Demo:

Speed Control: 100

Code Example:

<!-- Range Slider -->
<label>Speed: <span id="value">100</span></label>
<input type="range" 
       id="slider" 
       min="0"           <!-- Minimum value -->
       max="255"         <!-- Maximum value -->
       value="100"       <!-- Default/starting value -->
       step="1"          <!-- Increment step -->
       oninput="update()">  <!-- Fires while dragging -->

<script>
// Update display in real-time as user drags
function update() {
  const slider = document.getElementById('slider');
  const display = document.getElementById('value');
  
  // Get current slider value
  const currentValue = slider.value;
  
  // Update text display
  display.textContent = currentValue;
  
  console.log('Slider value:', currentValue);
}

// Alternative: Listen for change (fires when released)
slider.addEventListener('change', () => {
  console.log('Final value:', slider.value);
  // Send to ESP8266
  fetch('/setSpeed?value=' + slider.value);
});

// Set slider value programmatically
slider.value = 150;  // Set to 150
update();            // Update display
</script>

<style>
/* Customize slider appearance */
input[type="range"] {
  width: 300px;
  height: 6px;
  background: #ddd;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  background: #2196F3;  /* Blue thumb */
  border-radius: 50%;
  cursor: pointer;
}
</style>

<!-- TIPS TO TRY:
  - oninput fires while dragging (real-time)
  - onchange fires when released (final value)
  - Add step="10" for increments of 10
  - Show percentage: (value / max) * 100
  - Add color change based on value
  - Vertical slider: transform: rotate(-90deg)
-->

Toggle Button (On/Off)

Ask AI: "Create toggle button that switches between ON/OFF" or "Add button that changes color when clicked" or "Toggle between two states"

Live Demo:

State: ON

Code Example:

<!-- Toggle Button -->
<button id="toggleBtn" onclick="toggle()">ON</button>

<script>
let isOn = true;  // Track current state

function toggle() {
  const btn = document.getElementById('toggleBtn');
  
  // Toggle state
  isOn = !isOn;  // Flip boolean: true → false, false → true
  
  if (isOn) {
    // ON state
    btn.textContent = 'ON';
    btn.style.backgroundColor = '#4CAF50';  // Green
    console.log('State: ON');
    // Send to ESP8266
    fetch('/setState?on=1');
  } else {
    // OFF state  
    btn.textContent = 'OFF';
    btn.style.backgroundColor = '#f44336';  // Red
    console.log('State: OFF');
    // Send to ESP8266
    fetch('/setState?on=0');
  }
}

// Alternative: Use CSS class
btn.classList.toggle('active');  // Add/remove class

// Alternative: Use data attribute
btn.dataset.state = isOn ? 'on' : 'off';
</script>

<style>
button {
  transition: all 0.3s;  /* Smooth color change */
}

button.active {
  background-color: #4CAF50;  /* Green when ON */
}
</style>

<!-- TIPS TO TRY:
  - Use boolean variable: let isActive = true/false
  - Toggle with: isActive = !isActive
  - Change icon: btn.innerHTML = isOn ? '✓' : '✗'
  - Add transition for smooth color change
  - Use classList.toggle('active') for CSS approach
  - Store state: localStorage.setItem('state', isOn)
-->

Radio Buttons (Single Select)

Ask AI: "Add radio buttons for direction (Forward/Left/Right)" or "Create radio group where only one can be selected" or "Add name attribute to group radio buttons"

Live Radio Demo:

Radio Buttons = Only ONE can be selected (same name attribute)

Robot Direction: ⬆️ Forward ⬅️ Left ➡️ Right ⬇️ Backward

Selected: forward

Code Example:

<!-- RADIO BUTTONS (Single Select) -->
<fieldset>
  <legend>Direction:</legend>
  
  <!-- CRITICAL: Same 'name' groups them -->
  <label>
    <input type="radio" name="direction" value="forward" checked>
    Forward
  </label>
  
  <label>
    <input type="radio" name="direction" value="left">
    Left
  </label>
  
  <label>
    <input type="radio" name="direction" value="right">
    Right
  </label>
</fieldset>

<script>
// Get selected value
const radios = document.getElementsByName('direction');
for (let radio of radios) {
  if (radio.checked) {
    console.log('Selected:', radio.value);
    break;
  }
}

// Listen for changes
document.getElementsByName('direction').forEach(radio => {
  radio.addEventListener('change', (e) => {
    console.log('Changed to:', e.target.value);
    // Send to ESP8266:
    fetch('http://192.168.4.1/direction?dir=' + e.target.value);
  });
});
</script>

<!-- KEY: Same 'name' = only one selectable! -->

HTML Basics Keywords - AI Guide

📌 What is this Modal? A popup window overlay that appears on top of the main page. Click the × or outside this box to close it.

Essential HTML concepts for building web interfaces:

HTML Structure

Basic page structure. Ask AI: "Create HTML page structure with head and body" or "Add DOCTYPE html and basic tags"

Live Demo:

↓ HTML Page Structure Preview

<head>: Title, meta tags, CSS

<body>: Visible content (buttons, text, images)

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP8266 Control Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1>ESP8266 Web Server</h1>
    <p>Control your device from this page</p>
    <button onclick="alert('Button clicked!')">Click Me</button>
</body>
</html>

<!-- STRUCTURE EXPLANATION:
  - <!DOCTYPE html> = Tells browser this is HTML5
  - <html> = Root element, contains everything
  - <head> = Metadata (not visible): title, CSS, meta tags
  - <body> = Visible content: all buttons, text, images
  - <meta charset="UTF-8"> = Support for special characters
  - <meta viewport> = Makes page responsive on mobile
-->

<!-- TIPS TO TRY:
  - Change title to "My Robot Controller"
  - Add more CSS in <style> section
  - Add more buttons or text in <body>
-->

Button

Clickable element. Ask AI: "Create button with id and onclick" or "Add button that calls function"

Live Demo:

↓ Button Container

Code Example:

<!-- Button Examples -->

<button id="btn-forward" onclick="moveForward()">
    Forward
</button>

<button id="btn-stop" onclick="stopRobot()">
    Stop
</button>

<script>
// Function called when button is clicked
function moveForward() {
    console.log('Moving forward');
    // Send to ESP8266
    fetch('/move?dir=forward');
}

function stopRobot() {
    console.log('Stopping');
    fetch('/stop');
}

// Access button by ID
const forwardBtn = document.getElementById('btn-forward');
forwardBtn.textContent = 'Go Forward';  // Change text
</script>

<!-- BUTTON ATTRIBUTES:
  - id = Unique identifier (use in JavaScript)
  - onclick = Function to call when clicked
  - style = Inline CSS styling
-->

<!-- TIPS TO TRY:
  - Add more buttons: Left, Right, Back
  - Change onclick to different function names
  - Add data-speed="100" attribute
  - Use addEventListener instead of onclick
-->

Input Fields with MQTT Communication (shiftr.io)

Send and receive messages through MQTT broker. Ask AI: "Send input field values to MQTT server" or "Create two input fields that communicate via shiftr.io"

Live MQTT Demo (shiftr.io):

ℹ️ Connection Status: Disconnected

↓ Input Container (MQTT Enabled)

Field 1 Name:

Field 1 Value:

Field 2 Name:

Field 2 Value:

Code Example:

<!-- MQTT Input Fields Demo -->
<!-- Include MQTT library in <head> -->
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

<!-- Connection Controls -->
<button id="connectBtn" onclick="connectMQTT()">Connect MQTT</button>
<button id="disconnectBtn" onclick="disconnectMQTT()" disabled>Disconnect</button>
<span id="status">Disconnected</span>

<!-- HTML Inputs -->
<input type="text" id="field1Name" placeholder="Field 1 name" value="speed">
<input type="text" id="field1Value" placeholder="Field 1 value" value="100">
<input type="text" id="field2Name" placeholder="Field 2 name" value="direction">
<input type="text" id="field2Value" placeholder="Field 2 value" value="forward">
<button onclick="sendMessage()">Send via MQTT</button>
<div id="log"></div>

<script>
// MQTT Client setup
let client = null;

// Connect to shiftr.io broker
function connectMQTT() {
    if (client && client.connected) {
        document.getElementById('log').innerHTML += '⚠️ Already connected<br>';
        return;
    }
    
    const brokerUrl = 'wss://public:public@public.cloud.shiftr.io';
    document.getElementById('status').textContent = 'Connecting...';
    
    client = mqtt.connect(brokerUrl);
    
    client.on('connect', () => {
        console.log('✅ Connected to MQTT broker');
        document.getElementById('log').innerHTML += '✅ Connected to MQTT broker<br>';
        document.getElementById('status').textContent = 'Connected ✅';
        document.getElementById('connectBtn').disabled = true;
        document.getElementById('disconnectBtn').disabled = false;
        
        // Subscribe to ALL test messages
        // This way we can see messages from ESP8266 and Processing too!
        client.subscribe('test/#');
    });
    
    client.on('message', (topic, message) => {
        const data = message.toString();
        console.log('📨 Received from ' + topic + ':', data);
        document.getElementById('log').innerHTML += 
            '📨 [' + topic + ']: ' + data + '<br>';
    });
    
    client.on('error', (err) => {
        console.error('❌ MQTT Error:', err);
        document.getElementById('log').innerHTML += '❌ Error: ' + err.message + '<br>';
        document.getElementById('status').textContent = 'Error ❌';
    });
    
    client.on('close', () => {
        console.log('Connection closed');
        document.getElementById('status').textContent = 'Disconnected';
        document.getElementById('connectBtn').disabled = false;
        document.getElementById('disconnectBtn').disabled = true;
    });
}

// Disconnect from MQTT broker
function disconnectMQTT() {
    if (client) {
        client.end();
        client = null;
        document.getElementById('log').innerHTML += '🔌 Disconnected from MQTT broker<br>';
        console.log('🔌 Disconnected');
    }
}

// Send message via MQTT to WEB topic
function sendMessage() {
    if (!client || !client.connected) {
        alert('Not connected! Click "Connect MQTT" first.');
        return;
    }
    
    const name1 = document.getElementById('field1Name').value;
    const value1 = document.getElementById('field1Value').value;
    const name2 = document.getElementById('field2Name').value;
    const value2 = document.getElementById('field2Value').value;
    
    // Create message object
    const message = {
        source: 'web',
        [name1]: value1,
        [name2]: value2
    };
    
    // Send as JSON string to WEB topic
    const jsonMessage = JSON.stringify(message);
    client.publish('test/web', jsonMessage);
    
    console.log('📤 Sent to test/web:', jsonMessage);
    document.getElementById('log').innerHTML += 
        '📤 Sent to test/web: ' + jsonMessage + '<br>';
}

// Disconnect when page is closed
window.addEventListener('beforeunload', () => {
    if (client && client.connected) {
        disconnectMQTT();
    }
});
</script>

<!-- MQTT TOPICS EXPLAINED:
  📤 Web sends to: test/web
  📤 ESP8266 sends to: test/esp8266
  📤 Processing sends to: test/processing
  
  📥 Everyone subscribes to: test/# (receives all)
  
  This way messages don't overlap and you can see who sent what!
-->

<!-- ESP8266 CODE:
  #include <ESP8266WiFi.h>
  #include <PubSubClient.h>
  
  WiFiClient espClient;
  PubSubClient client(espClient);
  
  void setup() {
    // Connect to WiFi and MQTT...
    client.setServer("public.cloud.shiftr.io", 1883);
    client.setCallback(messageReceived);
    client.connect("ESP8266", "public", "public");
    
    // Subscribe to all test messages
    client.subscribe("test/#");
  }
  
  void loop() {
    client.loop();
    
    // Send message every second to ESP8266 topic
    String msg = "{\"source\":\"esp8266\",\"value\":" + String(counter++) + "}";
    client.publish("test/esp8266", msg.c_str());
    delay(1000);
  }
  
  void messageReceived(char* topic, byte* payload, unsigned int length) {
    Serial.print("Received from ");
    Serial.print(topic);
    Serial.print(": ");
    for (int i = 0; i < length; i++) Serial.print((char)payload[i]);
    Serial.println();
  }
-->

<!-- PROCESSING CODE:
  import mqtt.*;
  
  MQTTClient client;
  int counter = 0;
  
  void setup() {
    size(400, 300);
    client = new MQTTClient(this);
    client.connect("mqtt://public:public@public.cloud.shiftr.io", "processing");
    
    // Subscribe to all test messages
    client.subscribe("test/#");
  }
  
  void draw() {
    // Send message every second to Processing topic
    if (frameCount % 60 == 0) {
      String msg = "{\"source\":\"processing\",\"value\":" + counter++ + "}";
      client.publish("test/processing", msg);
    }
  }
  
  void messageReceived(String topic, byte[] payload) {
    println("Received from " + topic + ": " + new String(payload));
  }
-->

<!-- TIPS TO TRY:
  - Open multiple browser tabs and see them all communicate
  - Run ESP8266 code and watch its messages appear in browser
  - Run Processing sketch and see all three platforms talking
  - Change message content and observe real-time updates
  - Visit https://www.shiftr.io/try to visualize the network
-->

MQTT Messages Log:

                                Click "Connect MQTT" to start...
                                

Input Fields (Basic)

User input elements. Ask AI: "Add input type='text' for name" or "Create number input with min/max" or "Add range slider"

Live Demo:

↓ Input Container

Text Input:

Number Input (0-255):

Range Slider: 50

Code Example:

<!-- Input Field Examples -->

<!-- TEXT INPUT -->
<label>Robot Name:</label>
<input type="text" 
       id="robotName" 
       placeholder="Enter name"
       value="">

<!-- NUMBER INPUT -->
<label>Speed (0-255):</label>
<input type="number" 
       id="speed" 
       min="0" 
       max="255" 
       value="100">

<!-- RANGE SLIDER -->
<label>Brightness: <span id="value">50</span></label>
<input type="range" 
       id="brightness" 
       min="0" 
       max="100" 
       value="50"
       oninput="updateValue()">

<script>
// Get input values
const name = document.getElementById('robotName').value;
const speed = document.getElementById('speed').value;
const brightness = document.getElementById('brightness').value;

// Update slider value display
function updateValue() {
    const slider = document.getElementById('brightness');
    document.getElementById('value').textContent = slider.value;
}
</script>

<!-- TIPS TO TRY:
  - Add step="10" to number input for increments
  - Use oninput for real-time updates
  - Add maxlength="20" to text input
  - Validate: if (speed < 0 || speed > 255)
-->

Div & Span Containers

Group elements. Ask AI: "Create div container for buttons" or "Use span for inline text" or "Add div with id='container'"

Live Demo:

↓ Div Container (groups buttons together)

Buttons inside <div>:

Status: Click a button

Code Example:

<!-- Div & Span Containers -->

<!-- DIV = Block container (takes full width) -->
<div id="buttonContainer">
    <button onclick="updateStatus('Button 1')">Button 1</button>
    <button onclick="updateStatus('Button 2')">Button 2</button>
    <button onclick="updateStatus('Button 3')">Button 3</button>
</div>

<!-- SPAN = Inline container (stays on same line) -->
<div>
    <span style="color: #666;">Status: </span>
    <span id="statusText" style="color: #2196F3; font-weight: bold;">Click a button</span>
</div>

<script>
// Update status when button is clicked
function updateStatus(buttonName) {
    const statusText = document.getElementById('statusText');
    statusText.textContent = buttonName + ' clicked!';
    
    // Change color based on which button
    if (buttonName === 'Button 1') {
        statusText.style.color = '#2196F3';  // Blue
    } else if (buttonName === 'Button 2') {
        statusText.style.color = '#4CAF50';  // Green
    } else {
        statusText.style.color = '#ff9800';  // Orange
    }
}

// Access div by ID
const container = document.getElementById('buttonContainer');

// Change div background
container.style.backgroundColor = '#f0f0f0';
container.style.padding = '10px';
</script>

<!-- KEY DIFFERENCES:
  - DIV = Block element (new line, full width)
  - SPAN = Inline element (same line, minimal width)
  - Use DIV for grouping large sections
  - Use SPAN for styling small text portions
  - SPAN updates can change text/color dynamically
-->

<!-- TIPS TO TRY:
  - Add id or class to div for styling
  - Use div to group related buttons
  - Use span to colorize part of text
  - Update span textContent to show button status
  - Nest divs inside divs for complex layouts
-->

Forms & Labels

Structured input collection. Ask AI: "Create form with input fields" or "Add label for input field" or "Form with submit button"

Live Form Demo:

↓ Form Container

Robot Name:

Email (optional):

Speed (0-100):

Operating Mode:

Robot Active

Code Example:

<!-- HTML Form Example -->
<form id="robotForm">
  <label for="robotName">Robot Name:</label>
  <input type="text" id="robotName" name="robotName" 
         placeholder="Enter name" required>
  
  <label for="speed">Speed (0-100):</label>
  <input type="number" id="speed" name="speed" 
         min="0" max="100" value="50">
  
  <label for="mode">Mode:</label>
  <select id="mode" name="mode">
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>
  </select>
  
  <label>
    <input type="checkbox" id="active" name="active" checked>
    Active
  </label>
  
  <button type="submit">Submit</button>
</form>

<div id="output"></div>

<script>
document.getElementById('robotForm').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent page reload!
  
  const formData = new FormData(this);
  const data = {};
  for (let [key, value] of formData.entries()) {
    data[key] = value;
  }
  data.active = document.getElementById('active').checked;
  
  document.getElementById('output').innerHTML = 
    'Data: ' + JSON.stringify(data, null, 2);
  
  // ⭐ fetch() = Send data WITHOUT page reload!
  fetch('http://192.168.4.1/config', {
    method: 'POST',  // Use POST to send data
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)  // Convert object to JSON
  })
  .then(response => response.json())  // Parse response
  .then(data => console.log('✅ Success:', data))
  .catch(error => console.error('❌ Error:', error));
});
</script>

<!-- 📡 fetch() vs Traditional Form Submit:
  
  Traditional: <form action="config" method="POST">
  ❌ Page reloads, user loses context
  ❌ URL changes in address bar
  ❌ Interrupts user experience
  
  Modern fetch(): fetch('http://192.168.4.1/config', {...})
  ✅ Runs in background (AJAX/Asynchronous)
  ✅ Page stays active - no reload!
  ✅ Can show loading spinners
  ✅ Better user experience
-->

<!-- 💾 ESP8266 Memory: ROM vs RAM

  ESP8266 Memory:
  - RAM: ~80KB (runtime variables, temporary data)
  - Flash ROM: 3MB (program code, PROGMEM data)
  
  ❓ Can HTML be stored in ROM? YES!
  ❓ Can it still be dynamic? YES!
  
  // ❌ BAD - HTML in RAM (wastes precious memory):
  String html = "<html><body><h1>Speed: " + String(speed) + "</h1></body></html>";
  server.send(200, "text/html", html);
  
  // ✅ GOOD - HTML in ROM with placeholders:
  const char html[] PROGMEM = R"rawliteral(
  <html><body><h1>Speed: %SPEED%</h1></body></html>
  )rawliteral";
  String page = FPSTR(html);
  page.replace("%SPEED%", String(speed));  // Dynamic!
  server.send(200, "text/html", page);
  
  // ⭐ BEST - Static HTML + JavaScript fetch():
  // Store entire HTML/CSS/JS in ROM (PROGMEM)
  // Use JavaScript fetch() to get live data
  // Page updates dynamically WITHOUT reloading!
  
  ✅ Store 4000+ line HTML files in ROM
  ✅ Page is still dynamic via JavaScript
  ✅ Saves RAM for sensor data & variables
  ✅ This exercise page could run on ESP8266!
-->

Form Output:

📡 SENDING DATA WITHOUT PAGE RELOAD

Use fetch() to send data in background:

fetch('http://192.168.4.1/config', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log('Success:', data));

✅ Page stays active - no reload!
✅ Perfect for real-time robot control

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

💾 CAN THIS HTML PAGE RUN FROM ESP8266 ROM?

YES! Even though it's 4000+ lines!

ESP8266 Memory:
• RAM: ~80KB (for variables, sensor data)
• ROM/Flash: 3MB (for code, HTML, CSS, JS)

Method 1: Store HTML in ROM with placeholders
const char html[] PROGMEM = R"(<h1>Speed: %SPEED%</h1>)";
page.replace("%SPEED%", String(currentSpeed));

Method 2: ⭐ BEST - Static HTML in ROM + fetch()
• Store entire HTML/CSS/JS in ROM once
• JavaScript fetch() gets live sensor data
• Page updates WITHOUT reloading
• THIS page could run on ESP8266!

Submit form to see live example →
                                

Lists (ul, ol, li)

Display items in lists. Ask AI: "Create unordered list with items" or "Add numbered list (ol)" or "List commands in ul"

Live Lists Demo:

↓ Lists Container

Unordered List (ul) - Robot Commands:

Move forward
Turn left 90°
Scan surroundings
Return to base

Ordered List (ol) - Setup Steps:

Connect ESP8266 to WiFi
Open web browser
Navigate to 192.168.4.1
Configure robot settings

Code Example:

<!-- UNORDERED LIST (bullets) -->
<ul>
  <li>Move forward</li>
  <li>Turn left</li>
  <li>Scan area</li>
</ul>

<!-- ORDERED LIST (numbered) -->
<ol>
  <li>Connect to WiFi</li>
  <li>Open browser</li>
  <li>Navigate to 192.168.4.1</li>
</ol>

<!-- NESTED LISTS -->
<ul>
  <li>Sensors
    <ul>
      <li>Ultrasonic</li>
      <li>Temperature</li>
    </ul>
  </li>
  <li>Motors
    <ul>
      <li>DC motors (x2)</li>
      <li>Servo</li>
    </ul>
  </li>
</ul>

<!-- ADD ITEMS DYNAMICALLY -->
<ul id="myList">
  <li>Item 1</li>
</ul>
<button onclick="addItem()">Add</button>

<script>
function addItem() {
  const list = document.getElementById('myList');
  const item = document.createElement('li');
  item.textContent = 'Item ' + (list.children.length + 1);
  list.appendChild(item);
}
</script>

<!-- USES:
  - Command history
  - Sensor readings
  - WiFi networks
  - Error logs
-->

Interactive Output:

📝 LIST TYPES:

<ul> = Bullets • <ol> = Numbers 1,2,3 • <li> = Item

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

❓ WHY NESTED LISTS?

Nested Lists = Lists inside lists (hierarchical data)

Example use cases for ESP8266:
✅ Device specifications grouped by category
✅ Menu structure (main → submenu)
✅ Sensors + Actuators organized
✅ Settings grouped by type
✅ Command history with sub-actions

Real ESP8266 example:
<ul>
  <li>Sensors
    <ul>
      <li>Ultrasonic: 5-400cm</li>
      <li>Temp: DHT22</li>
    </ul>
  </li>
</ul>

Shows organized, grouped information!

💡 Click buttons to add items dynamically!
                                

Modal / Dialog

Popup window. Ask AI: "Create modal popup window" or "Add dialog that opens on click" or "Make overlay window with close button"

Live Modal Demo:

↓ Modal Container

What is a Modal?
A popup overlay that appears on top of the page, dims the background, and requires user interaction before closing.

Code Example:

<!-- BUTTON TO OPEN MODAL -->
<button onclick="openModal()">Open Settings</button>

<!-- MODAL STRUCTURE -->
<div id="myModal" style="display: none; position: fixed; 
     z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; 
     background-color: rgba(0,0,0,0.6);">
  
  <!-- Modal Content Box -->
  <div style="margin: 15% auto; padding: 30px; 
       background: white; width: 400px; border-radius: 8px;">
    
    <!-- Close X button -->
    <span onclick="closeModal()" 
          style="float: right; font-size: 28px; cursor: pointer;">
      &times;
    </span>
    
    <h2>Settings</h2>
    <input type="text" placeholder="Robot name">
    <button onclick="closeModal()">Save</button>
  </div>
</div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = 'block';
}

function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}

// Close on background click
window.onclick = function(event) {
  const modal = document.getElementById('myModal');
  if (event.target === modal) {
    closeModal();
  }
}
</script>

<!-- KEY FEATURES:
  • position: fixed - stays in viewport
  • z-index: 1000 - appears on top
  • rgba(0,0,0,0.6) - dark semi-transparent background
  • Close on X click or background click
-->

<!-- ESP8266 USES:
  • Settings configuration
  • Confirm actions (delete, reset)
  • WiFi network selection
  • Error/success messages
  • Calibration wizards
-->

Modal Info:

🔔 WHAT IS A MODAL (POPUP DIALOG)?

Modal = Overlay window that appears on top of page

Key characteristics:
✅ Blocks interaction with main page
✅ Dark semi-transparent background
✅ Centered content box
✅ Close via X button or background click

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CSS REQUIREMENTS:

• position: fixed → Stays in viewport
• z-index: 1000 → Appears on top
• width: 100%; height: 100% → Fills screen
• background: rgba(0,0,0,0.6) → Dark overlay

Content box:
• margin: auto → Centers horizontally
• background: white → Visible content
• border-radius → Rounded corners

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ESP8266 USE CASES:

📱 Settings panel (WiFi, speed, sensors)
⚠️  Confirm actions (reset robot, delete data)
📡 WiFi network selection list
✅ Success/error notifications
🔧 Step-by-step calibration wizards

Click "Open Settings Modal" to try! →
                                

Card / Panel

Info box component. Ask AI: "Create card for sensor data" or "Add panel with border and shadow" or "Make info card with title and content"

Live Card Demo:

↓ Card Container

What is a Card?
A container box with border, shadow, and padding that groups related information together.

🌡️ Temperature

24.5°C

Last update: 2 min ago

📏 Distance

15 cm

Ultrasonic sensor

Code Example:

<!-- BASIC CARD -->
<div class="card">
  <h3>Temperature</h3>
  <p>24.5°C</p>
</div>

<style>
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
</style>

<!-- GRID OF CARDS -->
<div style="display: grid; grid-template-columns: 1fr 1fr; 
            gap: 15px;">
  <div class="card">
    <h3>🌡️ Temperature</h3>
    <div style="font-size: 32px; font-weight: bold;">
      24.5°C
    </div>
  </div>
  
  <div class="card">
    <h3>📏 Distance</h3>
    <div style="font-size: 32px; font-weight: bold;">
      15 cm
    </div>
  </div>
</div>

<!-- UPDATE CARD WITH JAVASCRIPT -->
<script>
function updateCard(id, value) {
  document.getElementById(id).textContent = value;
}

// Update from ESP8266 sensor
setInterval(() => {
  fetch('http://192.168.4.1/temp')
    .then(r => r.json())
    .then(data => updateCard('temp', data.value + '°C'));
}, 5000); // Every 5 seconds
</script>

<!-- KEY CSS:
  • border-radius: rounded corners
  • box-shadow: depth/elevation
  • padding: spacing inside
  • hover effects: interactive feel
-->

Card Info:

📦 WHAT IS A CARD/PANEL?

Card = Boxed container that groups related content

Like a physical card with:
✅ Background (usually white)
✅ Border (subtle outline)
✅ Shadow (depth/elevation)
✅ Padding (space inside)
✅ Rounded corners (modern look)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CSS ESSENTIALS:

background: white;
border: 1px solid #ddd;
border-radius: 8px;       ← Rounded corners
padding: 15px;            ← Inside spacing
box-shadow: 0 2px 8px rgba(0,0,0,0.1); ← Depth

Hover effect:
transform: translateY(-5px); ← Lift up
box-shadow: 0 4px 12px ... ← Bigger shadow

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ESP8266 USE CASES:

📊 Sensor data displays (temp, humidity, distance)
📈 Status panels (WiFi, battery, uptime)
🎛️  Control groups (motor controls, LED settings)
📋 Command history/logs
⚙️  Configuration sections
🔋 Device information cards

Cards make data organized and scannable!

Hover over cards to see lift effect →
                                

Part 1: Fundamentals - Networking & Communication

TCP/IP & HTTP Protocol

Server - provides resources, responds to requests
Client - requests resources from server (browser, app)
TCP/IP - protocol for reliable data transmission
HTTP - web protocol for transferring data http://192.168.4.1
HTTPS - secure HTTP with encryption (port 443)
GET request - retrieve data GET /move?dir=F&speed=50
POST request - send data to server (form submission)
PUT request - update existing data
DELETE request - remove data from server
REST API - structured web API design pattern
WebSocket - real-time bidirectional communication
Port number - communication endpoint :80, :443, :8080
Status codes - 200 OK, 404 Not Found, 500 Error

WiFi & ESP8266 Connection

SSID - WiFi network name "MyWiFi"
Password - WiFi authentication key
Station mode - ESP connects to existing WiFi router
Access Point mode - ESP creates its own WiFi network "ESP_Robot"
SoftAP - software-based access point on ESP
IP address - device network identifier 192.168.4.1
Gateway - router address for internet access 192.168.1.1
DHCP - automatic IP address assignment
DNS - converts domain names to IP addresses
MAC address - unique hardware identifier AA:BB:CC:DD:EE:FF

Part 2: Web Development Basics

HTML Structure

Form - collect and submit user input <form>
Input - text field, number, checkbox, radio <input type="number">
Button - clickable element <button onclick="send()">
Label - describes input field for accessibility
Select/Option - dropdown menu <select><option>
Div - container element for grouping <div id="dropzone">
Data attributes - custom data storage data-cmd="F"
Event attributes - inline handlers onclick="move()"

CSS Styling

Flexbox - flexible row/column layout system
display: flex - enable flexbox display: flex;
gap - space between flex items gap: 10px;
justify-content - horizontal alignment center, space-between
background-color - element background #2196F3
border - element border 2px solid #ccc
border-radius - rounded corners 8px
padding - space inside element padding: 10px 20px;
margin - space outside element margin: 10px;
:hover - mouse-over effects button:hover { }
transition - smooth changes transition: all 0.3s;

JavaScript Essentials

Variables - store data let speed = 50; const MAX = 100;
Functions - reusable code function sendCommand(dir) { }
Event listeners - respond to actions addEventListener('click', ...)
getElementById() - find by ID document.getElementById('btn')
querySelector() - find by selector querySelector('.button')
addEventListener() - attach event handler
onclick - click event onclick="sendCommand('F')"
oninput - real-time input event oninput="updateSpeed()"
onchange - value change (after blur)
console.log() - debug output console.log('Speed:', speed)

Part 3: Advanced Drag-and-Drop UI

Drag & Drop API

draggable="true" - enable drag <div draggable="true">
dragstart event - fires when drag begins ondragstart="handleDragStart(event)"
dragover event - fires while over drop target ondragover="allowDrop(event)"
drop event - fires when dropped ondrop="handleDrop(event)"
dragend event - drag operation completes
dataTransfer - carries drag data e.dataTransfer.setData('text', id)
effectAllowed - operation type e.dataTransfer.effectAllowed = 'copy'
cloneNode(true) - duplicate element const copy = elem.cloneNode(true)
insertAdjacentElement() - insert position insertAdjacentElement('beforebegin', elem)

Drop Zone & Positioning

Drop zone setup - container for dropped items <div id="dropzone">
Spacer element - end placeholder <div class="spacer">
getBoundingClientRect() - position/size elem.getBoundingClientRect().left
clientX/clientY - mouse coordinates event.clientX
Conditional placement - drop before/after midpoint calculation
Reordering - drag items within dropzone to swap positions
Visual feedback - highlight on dragover classList.add('drag-over')
pointer-events: none - prevent inner clicks while dragging
touch-action: none - mobile touch support

Command Handling & GET Requests

Command concatenation - build string cmds.join(',')
querySelectorAll() - get all blocks querySelectorAll('.block')
Loop through elements - collect IDs forEach(b => cmds.push(b.dataset.cmd))
Join command string - ESP format "F,L,R,B,S"
encodeURIComponent() - URL-safe encodeURIComponent(cmd)
Dynamic URL - build request /run?commands=F,L,R&speed=50
fetch(url) - send GET fetch('/move?dir=F')
Promise handling - async .then(r => r.text()).catch(e => ...)
Update DOM - show response elem.textContent = 'OK'
Non-blocking - UI stays responsive during requests

Part 4: ESP8266 ROM Integration

Memory & Storage

Flash ROM - read-only program memory ~4MB on ESP8266
PROGMEM - Arduino macro const char html[] PROGMEM = "..."
const char* - ROM string pointer const char* page = htmlPage;
Single-file HTML - all code in one file (no external CSS/JS)
Inline CSS/JS - embed in HTML <style>...</style>
Code in ROM - HTML/CSS/JS stored in flash, not RAM
Memory-efficient - ESP has limited RAM ~80KB available

ESP8266 Program Execution

GET-based upload - send code via URL /upload?code=...
URL parameter parsing - extract data server.arg("commands")
Direct block mapping - UI blocks → robot commands F=Forward, L=Left
Event-driven control - actions triggered by UI button clicks
Server response - ESP sends feedback server.send(200, "text/plain", "OK")
Non-RAM execution - code runs from flash memory
OTA update - Over-The-Air firmware update via WiFi
EEPROM storage - persistent config EEPROM.write(addr, value)

🔄 Complete System Flow

[User / Web Browser]
      |
      | 1. Drag-and-Drop blocks
      |    (UI selects sequence of commands)
      |
      v
[HTML/JS on ESP8266 ROM]
      |
      | 2. User clicks "RUN"
      |    → JS collects block IDs
      |    → Creates URL: /run?commands=FBLRO&collision=...
      |
      v
[ESP8266 WebServer]
      |
      | 3. GET Request received
      |    - handleRun()
      |    - Stores commands in normalCommands / collisionCommands
      |
      v
[Loop Function]
      |
      | 4a. Collision avoidance check
      |       - measureDistance()
      |       - If obstacle < 20cm → collisionAvoiding = true
      |
      | 4b. Execute commands
      |       - normalCommands or collisionCommands
      |       - runCommand(cmd):
      |            F → forward()
      |            B → backward()
      |            L → left()
      |            R → right()
      |            O → ledOn()
      |            N → ledOff()
      |            J → delay(1000)
      |
      v
[Servo Motors / LED]
      |
      | 5a. Move robot
      | 5b. Turn LED on/off
      |
      v
[Ultrasonic Sensor]
      |
      | 6. Measures distance
      |    - Triggers collisionAvoiding if <20cm
      |
      v
[ESP8266 Loop]
      |
      | 7. Updates next command or resets index
      | 8. Optionally send feedback back to UI (GET Message display)
      |
      └──> [HTML/JS updates GET Message Display]

Exercise 5: ESP8266 Web Server Development

Overview

Arduino IDE Setup for ESP8266 D1 Mini

Part 1: Fundamentals - Networking & Communication

CSV (Comma Separated Values)

JSON (JavaScript Object Notation)

🎥 Video Tutorial

📚 Useful Links and Resources

TCP/IP Protocol

Part 2: Web Development Basics

Part 3: Advanced Drag-and-Drop UI

⚙️ Robot Settings

🌡️ Temperature

📏 Distance

Exercises

Part 1: Fundamentals - Networking & Communication

Part 2: Web Development Basics

Part 3: Advanced Drag-and-Drop UI

Part 4: ESP8266 ROM Integration

Exercise 5: ESP8266 Web Server Development

Overview

Arduino IDE Setup for ESP8266 D1 Mini

Part 1: Fundamentals - Networking & Communication

CSV (Comma Separated Values)

JSON (JavaScript Object Notation)

🎥 Video Tutorial

📚 Useful Links and Resources

TCP/IP Protocol

Part 2: Web Development Basics

Part 3: Advanced Drag-and-Drop UI

Drag & Drop Keywords - Step-by-Step AI Guide

UI Elements & Controls

HTML Basics Keywords - AI Guide

Unordered List (ul) - Robot Commands:

Ordered List (ol) - Setup Steps:

⚙️ Robot Settings

🌡️ Temperature

📏 Distance

JavaScript Fundamentals - AI Guide

1️⃣ onclick - Button Click Event

2️⃣ oninput - Real-time Text Input

3️⃣ onchange - Selection Changed

4️⃣ onmouseover / onmouseout - Mouse Hover

CSS Styling Keywords - AI Guide

Exercises

Part 1: Fundamentals - Networking & Communication

Part 2: Web Development Basics

Part 3: Advanced Drag-and-Drop UI

Part 4: ESP8266 ROM Integration

EEPROM Memory Management - Step-by-Step AI Guide

What is EEPROM?

Critical EEPROM Limitations

Memory Types: ROM, RAM & Registers - Complete Guide

Memory Hierarchy Overview