Skip to content

Latest commit

 

History

History
206 lines (142 loc) · 6.54 KB

readme.md

File metadata and controls

206 lines (142 loc) · 6.54 KB

Microcontroller with WIFI

In this speedcourse we will connect a Microcontroller to the internet to decide what color LED it should show.

picker

What you will need

feather

Steps

  • Installing drivers and Arduino
  • Connecting to WIFI
  • Connecting to your own PHP page
  • Connecting the RGB LED
  • Using the PHP RGB value for the LED
  • Creating a color picker

Install Arduino

arduino

Install the Arduino IDE

Install Drivers for Feather

Then, follow these instructions to install the Feather board

  • Install CP2104 driver
  • Set the board manager url in Arduino
  • Install esp8266 library in Arduino
  • Connect Feather via MicroUSB
  • In Arduino, set the BOARD to "Adafruit Feather Huzzah"
  • In Arduino, set PORT to your relevant USB port

Test uploading code

  • Copy>Paste the code from Blink example into Arduino, and upload to the Feather. If the small red led starts blinking, we have successfully installed the Feather board!

Connecting the RGB LED

Connect the RGB Led according to this example. Test if you can make the red, green and blue lights blink. Note that we use analogWrite() and a value from 0 to 1024.

board

void setup() {
  pinMode(14, OUTPUT);
  pinMode(12, OUTPUT);
  pinMode(13, OUTPUT);
}
void loop(){
  analogWrite(14, 1024);  // red
  analogWrite(12, 0);     // green
  analogWrite(13, 0);     // blue
  delay(1000);
}

Note that some RGB Leds need their long pin connected to 3V instead of GND.

Connecting to WIFI

client

Create a new Arduino document and copy>paste the code from the WIFI example.

Fill in the SSID and USERNAME for the wifi network you are connecting to.

Make sure the Wifi network allows IoT devices. You can set up a phone hotspot if your network does not allow this.

Test if the message from the adafruit website is displayed in the monitor: If you can read this, it's working! Make sure the BAUD of the serial monitor is 115200.

Connecting to your own PHP page

Create a simple PHP page that returns a color as a string:

<?php
   echo "244,0,10";

Upload PHP file

Upload your PHP file to a server, so your Feather can get the data.

If your laptop is on the same WIFI as your Feather, you can serve the PHP page via localhost, and then use the IP address of your laptop to visit the PHP page.

Paste the url of your PHP page in the Arduino code:

const char* host = "http://192.168.2.8";
String url = "/test/rgb.php";

The Feather should now show 244,0,10 instead of the Adafruit welcome message!

Using the RGB Led value

Instead of just printing to the serial monitor, the line variable should be passed to a RGB function:

void loop() {
  // ... wifi code here
  Serial.println("closing connection");
  Serial.println(line);
  updateRGBLed(line);        // add this function call
}

And we'll create a function that can convert the string "255,10,100" to three numbers. Each number is then sent to one of the pins of the RGB LED!

void updateRGBLed(String webColor) {
  webColor.replace(" ", "");
  webColor.replace("\n", "");
  int firstComma = webColor.indexOf(",");
  int secondComma = webColor.indexOf(",", firstComma + 1);
  String r = webColor.substring(0, firstComma);
  String g = webColor.substring(firstComma + 1, secondComma);
  String b = webColor.substring(secondComma + 1);
  // feather analog values go from 0 to 1024 instead of 0 to 255
  valueR = r.toInt() * 4;
  valueG = g.toInt() * 4;
  valueB = b.toInt() * 4;
  analogWrite(rpin, valueR);
  analogWrite(gpin, valueG);
  analogWrite(bpin, valueB);
}

Check the complete code here!

Creating a color picker

We will add a color picker that updates rgb.php, so anyone on the web can choose a color for the RGB LED!

Our HTML page displays a basic color picker . When the user changes the color, we send the color value to the saveajax.php page.

wheel.addEventListener("change", () => saveColor())

async function saveColor() {
    let color = wheel.value.replace("#", "")
    let response = await fetch("saveajax.php?favcolor=" + color)
    let success = await response.text()
    console.log(success)
    }

Then, saveajax.php saves the color value in a local text file.

$color = $r . "," . $g . "," . $b;
file_put_contents('color.txt', $color);

Note: the textfile needs to have 777 write permissions!

And finally, our old rgb.php page will simply echo the contents of the text file.

<?php
    $color = file_get_contents('color.txt');
    echo $color;

Complete code

We are finished! The RGB light can now be changed by anyone who visits the color picker website.


Sending sensor data to Adafruit IO

io

Instead of calling your own PHP page, you can send sensor data to Adafruit IO. This service will keep track of all the data that you send, and make it available as a feed for any other website.


Using the Feather as a server

Instead of sending data at intervals, we can set up the Feather as a server. Then it will wait until someone requests data from the internet.


Links