Introduction

View colors in RGB format as data packets gathered by TCS3200 on your IoT Dashboard with your Google+, Twitter or TheAmplituhedron account.


Tags

Share

Free IoT Services | Send Colors in RGB Format via ESP8266

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

View colors in RGB format as data packets gathered by TCS3200 on your IoT Dashboard with your Google+, Twitter or TheAmplituhedron account.

Tags

Share





Advertisement

Advertisement



    Components :
  • [1]NodeMCU [ESP-12E]
  • [1]TCS3200 Color Sensor
  • [1]5mm Green Led
  • [4]Mini Breadboard
  • [1]Male/Male Jumper Wires

Description

It is the second demonstration project about TheAmplituhedron IoT Services programmed by myself in HTML and PHP, as anew feature for my website subscribers if you want, you can view the first project on here. In this project, I want to use TheAmplituhedron IoT Services as an online RGB color detector hence the use of the TCS3200 RGB Color Sensor. So, by using IoT Services, you can view colors in RGB format between 255 and 0 on your dashboard. I thought that sending colors in RGB format over the Internet from NodeMCU to the database that of my website through your account on TheAmplituhedron would exemplify the variety of the possibilities in the Internet of Things. In every 2 seconds, you can monitor colors detected by the TCS3200 Color Sensor through TheAmplituhedron database via NodeMCU. Nonetheless, you can use any other device that is capable of making HTTP Get Requests instead of NodeMCU. Most importantly, you can use TheAmplituhedron IoT Services by signing in with your Gmail or Twitter account in the full and free version. The bottom line is that it is an online color detector sending data packets to the database dedicated to your account hedron in RGB format, allowing you to monitor the recent data packets as colors.

project-image
Figure - 18.1


project-image
Figure - 18.2

What is TheAmplituhedron IoT Services?

Aside from the cloud system of TheAmplituhedron used in other projects of mine, TheAmplituhedron IoT Services is for displaying and saving data packets received from NodeMCU etc. in HTTP Get Request Method only. Like the cloud system of TheAmplituhedron that can receive and transmit data packets through web server in either HTTP Get Request or HTTP Post Request, specialized for Arduino Ethernet Shield and Raspberry Pi, TheAmplituhedron IoT Services is programmed by myself in PHP, jQuery and AJAX as an available system for only my website subscribers. But, as opposed to the cloud system of TheAmplituhedron, it can only receive data packets in HTTP Get Request Method, and display recent data packets only; TheAmplituhedron IoT Services is dedicated to showing the recent data gathered by NodeMCU etc. via sensor readings properly through TheAmplituhedron database and server. To use this feature, please follow the steps down below and subscribe to my website if you have not yet.

How can I subscribe to TheAmplituhedron?

It is very simple to subscribe to benefit all available system provided by me; you just have to sign up to TheAmplituhedron.com, which is programmed by myself.

As showed by the figure down below, you have three options to sign up - Sign In with Google Plus, Continue with Twitter and Sign Up(Create an account).

project-image
Figure - 18.3

1) Sign In with Google Plus

Just click Sign In with Google Plus and accept permissions. After that, you are ready to use IoT Services freely.

project-image
Figure - 18.4

2) Continue with Twitter

Just click Continue with Twitter and authorize TheAmplituhedron. After that, you are ready to use IoT Services freely.

project-image
Figure - 18.5


project-image
Figure - 18.6

3) Sign Up

Or, if you do not want to use a third party account for verification, you can create your own account on TheAmplituhedron, as depicted down below.

project-image
Figure - 18.7


project-image
Figure - 18.8

After signing up process, your hedron - the unique 20-digit ID that used as an identifier in your connection path URL - generated by the server; you can display it under personal information section.

Personal Information -> Hedron -> Display

project-image
Figure - 18.9

How can I send data packets to my IoT Dashboard?

After subscribing, you have to create your unique connection path URL under IoT Services on your dashboard. Just click Create+ to auto-generate your connection path URL; after clicking, a pop-up bar will re-direct you to your connection path URL, containing your username and hedron.

Do not forget that you can create one connection page named with your username, and save in a constricted database - up to 6 entry.

Your secure connection path should be like this;

/dashboard/IoTServices/USERNAME-HEDRON

Now, you can send data packets - up to 6 entry - by using HTTP Get Request Method like down below.

https://www.theamplituhedron.com/dashboard/IoTServices/USERNAME-HEDRON?dataNameFirst=defineFirst&dataNameSecond=defineSecond&dataNameThird=defineThird&data1=value1&data2=value2&data3=value3

Syntax :

?dataNameFirst=

&dataNameSecond=

&dataNameThird=

&data1=

&data2=

&data3=

project-image
Figure - 18.10


project-image
Figure - 18.11


project-image
Figure - 18.12


project-image
Figure - 18.13


project-image
Figure - 18.14

How to use NodeMCU [ESP-12E] to send data packets with its default libraries

NodeMCU is an open source IoT platform, and also the name of an ESP8266 integrated development board. I used a ESP-12E V2.0 2.4Ghz in this demonstration project.

First of all, download its default board along with libraries from GitHub on here.

Add, the included libraries in the source code from example files - the rest of it is well-explained at the source code down below.

To make an HTTP Get or Post Request is simple and easy with HTTPClient Library, but if you make this request to a website protected with SSL Certificate like my website(TheAmplituhedron.com), you may need to learn how to manage to glean a website SSL FingerPrint or ThumbPrint.

SSL FingerPrint works like an ID card; when you visit a web-page that of a SSL protected website, it verifies your connection secure according to whether you have the fingerprint or not. As a result of that, every browser has a file that contains the fingerprint of the website, mostly known as ThumbPrint.

For instance,if you are using Google Chrome as default browser on your computer, just click lock icon on the url path to glean ThumbPrint.

Lock Icon -> Certificate -> Details -> ThumbPrint

I provided the FingerPrint in current use, but you can find it easily if it is changed by the service provider, as showed above.

Copy and paste it to the source code in http.begin() function.

SSL FingerPrint(ThumbPrint) : 46 3c 5c 2c 67 11 cd 88 b7 e9 76 74 41 34 48 bd bc a5 b9 cf

http.begin(connectionPath, "SSL FingerPrint or ThumbPrint");

project-image
Figure - 18.15


project-image
Figure - 18.16

How to detect colors in RGB format by using a TCS3200

I wanted to transfer colors as data packets over the Internet in this project but to achieve this, I needed to detect colors and turn them into integer values hence the use of the TCS3200 Color Sensor. It is a programmable color light - to -frequency converter that combine configurable silicon photodiodes and a current-to-frequency converter on a single monolithic CMOS integrated circuit. Basically, it includes red, blue and green square-wave frequency detector at its core. Depending to the surrounding brightness and its scaling value, TCS3200 sensors turn the detected frequency as integers. Most importantly, it allows you to get data from each photodiode group one by one. That is actually the trick to elicit color codes in RGB format. The reason is as follows. When you map the detected frequencies from 255 to 0, you get the approximate RGB codes in order, like (255, 255, 255).

As depicted below. you can choose the scaling value and the active photodiode detector. For instance, you can detect green in 20% scaling under a bright light source.

project-image
Figure - 18.17

So you can switch between photodiodes and scaling values to detect colors in RGB format accurately as showed at the source code.

project-image
Figure - 18.18

Connections

Connect the TCS3200 to the NodeMCU [ESP 12-E] as showed at the source code introduction in which all connections details are well-explained.

project-image-slide project-image-slide
Slide


Do not forget to attach the control led informing you whether the WiFi connection is ready to transfer data packets to the assigned database or not.

project-image
Figure - 18.19

Features and Conclusion

Now, after all these steps, there is one thing to do to use TheAmplituhedron IoT Services in a proper way. Before uploading the source code, enter your WiFi settings, account information and SSL FingerPrint.

After the last step, astonishingly, you can monitor your data packets in every 5 seconds on your encrypted connection page, coming from your database table hosted on TheAmplituhedron server in order :)

project-image
Figure - 18.19


project-image
Figure - 18.20

Get Data Packets on Mobile

By downloading TheAmplituhedron Mobile App in Android, you can view all the data packets provided by TheAmplituhedron IoT Services in collaboration with mobile features.

Also, you can use your default web browser to get data packets on mobile, especially on iOS.

project-image-slide project-image-slide project-image-slide
Slide


project-image-slide project-image-slide project-image-slide
Slide


Videos

Free TheAmplituhedron IoT Services | Send Colors in RGB Format | Hedron Authorization

Free TheAmplituhedron IoT Services | Send Colors in RGB Format | View Colors on your IoT Dashboard

Free TheAmplituhedron IoT Services | In Collaboration with TheAmplituhedron Mobile App

Code

Source Code

Download



         /////////////////////////////////////////////  
        //     IoT RGB Color Detector via          //
       //     TheAmplituhedron IoT Services       //
      //          ---------------------          //
     //           NodeMCU (ESP-12E)             //           
    //           by Kutluhan Aktar             // 
   //                                         //
  /////////////////////////////////////////////

// By merely subscribing to TheAmplituhedron, you will be able get your data packets from NodeMCU, or any other device that can make an HTTP GET Request, to your IoT Dashboard on your account page.
// TheAmplituhedron IoT Services is an available system for TheAmplituhedron.com subscribers only, and simple to use.
// Follow the steps down below to create and communicate your connection path on which you will display your data packets in every 2 seconds.
// 1) Go to your Dashboard.
// 2) Click Iot Services under Available Systems.
// 3) Read the given instructions and click Create+
// 4) Copy the url to use in the souce code.
// After creating your unique connection path, you can send data packets through NodeMCU by entering your WiFi settings and required information down below.
//
// As a reminder, my website has SSL protection so that you need to identify your connection request by entering TheAmplituhedron FingerPrint or ThumbPrint.
// You can learn about it more from the link below.
// https://www.theamplituhedron.com/dashboard/IoTServices/
//
// By taking the following steps, you will learn hoaw to send colors in RGB format from NodeMCU to your IoT Dashboard at TheAmplituhedron.ocm.
// Also, it is the second demonstration project for TheAmplituhedron IoT Serivces, programmed by myself, to give a new perspective on Internet of Things.
// I used a TCS3200 Color Sensor to detect colors in RGB format, and added a control led to show whether WiFi connection is active or not.
//
// Connections
// NodeMCU (ESP-12E) :           
//                                Control Led
// D1  --------------------------- +
//                                TCS3200 Color Sensor
// D2  --------------------------- S0
// D3  --------------------------- S1
// D4  --------------------------- S2
// D5  --------------------------- S3
// D6  --------------------------- OUT


// Include required libraries to send data to a website, in this case TheAmplituhedron.com.
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>

// Define your WiFi settings.
const char *ssid = "WiFi_SSID";
const char *password = "WiFi_PASSWORD";

// Define a control pin for WiFi test.
#define control D1

// Define TCS3200 input and output pins to collect color code data.
#define S0 D2
#define S1 D3
#define S2 D4
#define S3 D5
#define OutPin D6

// Create data holders to send data packets.
int colorCode[3];
String connectionPath, USERNAME, HEDRON, data_name_1, data_name_2, data_name_3, data_1, data_2, data_3;

void setup() {

  // Activate control led.
  pinMode(control, OUTPUT);
  digitalWrite(control, LOW);

  // Activate TCS3200 input and output pins.
  pinMode(S0, OUTPUT);
  pinMode(S1, OUTPUT);
  pinMode(S2, OUTPUT);
  pinMode(S3, OUTPUT);
  pinMode(OutPin, INPUT);

  // Set frequency scaling for specific development board. In this demonstration, it is set to 100%.
  digitalWrite(S0, HIGH);
  digitalWrite(S1, HIGH);
  
  // Wait until connected.
  delay(1000);
  Serial.begin(115200);
  // It is just for assuring connection is alive.
  WiFi.mode(WIFI_OFF);
  delay(1000);
  // This mode allows NodeMCU to connect any WiFi directly.
  WiFi.mode(WIFI_STA);        
  // Connect NodeMCU to your WiFi.
  WiFi.begin(ssid, password);
  
  Serial.print("\n\n");
  Serial.print("Try to connect to WiFi. Please wait! ");
  Serial.print("\n\n");
  // Halt the code until connected to WiFi.
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("*");
  }

  // If connection is successful, turn control led on and write WiFi SSID to serial monitor along with assigned IPAddress.
  digitalWrite(control, HIGH);
  Serial.print("\n\n");
  Serial.print("-------------------------------------");
  Serial.print("\n\n");
  Serial.print("Connection is successful!");
  Serial.print("\n\n");
  Serial.print("Connected WiFi SSID : ");
  Serial.print(ssid);
  Serial.print("\n\n");
  Serial.println("Connected IPAddress : ");
  Serial.println(WiFi.localIP());
  Serial.print("\n\n");

}

void loop() {
  // Get Color Code in array format to send it to IoT Dashboard.
  getRGBColorCode(50);
  
  // Create HTTP object to make a request.
  HTTPClient http;    
 
  // Enter your connection path variables and define a name and a value for each data packet below - up to 6 entry.
  USERNAME = "Account_Username";
  HEDRON = "Account_Hedron";
  // You can change these names if you want.
  data_name_1 = "Red";
  data_name_2 = "Green";
  data_name_3 = "Blue";
  data_1 = String(colorCode[0]);
  data_2 = String(colorCode[1]);
  data_3 = String(colorCode[2]);
  
  connectionPath = "https://www.theamplituhedron.com/dashboard/IoTServices/" + USERNAME + "-" + HEDRON + ".php?dataNameFirst=" + data_name_1 + "&dataNameSecond=" + data_name_2 + "&dataNameThird=" + data_name_3 + "&data1=" + data_1 + "&data2=" + data_2 + "&data3=" + data_3;
  
  http.begin(connectionPath, "xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx");
  
  int httpCode = http.GET();           
  String payload = http.getString();    
 
  Serial.println(httpCode); 

  // End HTTP Get Request.
  http.end(); 
  
  // Send data packets every 2 seconds to TheAmplituhedron.
  delay(2000);
}

// Get RBG Color Code from TCS3200 Color Sensor in red, blue and green as array.
void getRGBColorCode(int Delay){
  // Activate Red Filters on the sensor, and save this data in colorCode[0].
  digitalWrite(S2, LOW);
  digitalWrite(S3, LOW);
  // Read the frequency and save it.
  colorCode[0] = pulseIn(OutPin, LOW);
  // Represent the frequency in the RGB Model according to your sensor's frequency values at the given scaling value, and the brightness as well.
  colorCode[0] = map(colorCode[0], 275, 24, 255, 0);
  delay(Delay);

   // Activate Green Filters on the sensor, and save this data in colorCode[1].
  digitalWrite(S2, HIGH);
  digitalWrite(S3, HIGH);
  // Read the frequency and save it.
  colorCode[1] = pulseIn(OutPin, LOW);
  // Represent the frequency in the RGB Model according to your sensor's frequency values at the given scaling value, and the brightness as well.
  colorCode[1] = map(colorCode[1], 396, 80, 255, 0);
  delay(Delay);

   // Activate Blue Filters on the sensor, and save this data in colorCode[2].
  digitalWrite(S2, LOW);
  digitalWrite(S3, HIGH);
  // Read the frequency and save it.
  colorCode[2] = pulseIn(OutPin, LOW);
  // Represent the frequency in the RGB Model according to your sensor's frequency values at the given scaling value, and the brightness as well.
  colorCode[2] = map(colorCode[2], 300, 37, 255, 0);
  delay(Delay);

  }




Schematics

project-image
Schematic - 18.1

Downloads

Fritzing File

Download