Running Text ESP32 Input Via WIFI HOTSPOT

Running Text ESP32 Input Via WIFI HOTSPOT

 

         Pada kesempatan kali ini saya akan menjelaskan mengenai bagaimana cara membuat sebuah alat yang bisa digunakan untuk input text via wifi handphone. alat ini menggunakan wifi untuk input textnya sehingga meudahkan user dalam penggunaannya. untuk lebih jelasnya berikut adalah koding dan skemanya. jika ingin pesan modul esp32 yang sudah di program dan tinggal pakai bisa cek di link shopee berikut.  

 LINK PEMBELIAN SHOPEE : https://id.shp.ee/eVqaTRRi

 

 

1. Skema 

 

 

2. Program Arduino IDE

 

 /*
GND – GND
OE – D23
A – D19
B – D21
CLK – D18
LAT – D2
DR – D23
VCC – VP
GND – EN
*/

#include <WiFi.h>
#include <WebServer.h>
#include <DMD32.h>
#include "fonts/SystemFont5x7.h"
#include "fonts/Arial_black_16.h"
#include "PageIndex.h" //--> Include the contents of the User Interface Web page, stored in the same folder as the .ino file
#include <Preferences.h>
//----------------------------------------

//----------------------------------------Defining the key.
// "Key" functions like a password. In order to change the text on the P10, the user must know the "key".
// You can change it to another word.
#define key_Txt "123456789"
//----------------------------------------

// Fire up the DMD library as dmd.
#define DISPLAYS_ACROSS 1
#define DISPLAYS_DOWN 1
DMD dmd(DISPLAYS_ACROSS, DISPLAYS_DOWN);

// Timer setup.
// create a hardware timer  of ESP32
hw_timer_t * timer = NULL;

const char* ssid = "ESP32_WS";  //--> access point name
const char* password = "123456789"; //--> access point password

IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
//----------------------------------------

String display_Modes = "";
String single_Row_Txt = "";
String double_Row_First_Txt = "";
int double_Row_First_Txt_Pos = 0;
String double_Row_Second_Txt = "";

// Server on port 80.
WebServer server(80);  

// Initialize Preferences.
Preferences preferences;

//________________________________________________________________________________IRAM_ATTR triggerScan()
// Interrupt handler for Timer1 (TimerOne) driven DMD refresh scanning, 
// this gets called at the period set in Timer1.initialize();
void IRAM_ATTR triggerScan() {
  dmd.scanDisplayBySPI();
}
//________________________________________________________________________________

//________________________________________________________________________________handleRoot()
// This routine is executed when you open ESP32 IP Address in browser.
void handleRoot() {
  server.send(200, "text/html", MAIN_page); //Send web page
}
//________________________________________________________________________________

//________________________________________________________________________________handleSettings().
// Subroutine to handle settings. The displayed text and others are set here.
void handleSettings() {
  timerAlarmDisable(timer);
  delay(1000);
  
  String incoming_Settings = server.arg("Settings");
  Serial.println();
  Serial.print("Incoming settings : ");
  Serial.println(incoming_Settings);
  
  // Example of incoming data from a client in double row display mode : 
  // "p10esp32wb,DR,ESP32,1,ESP32 P10 LED Display"
  // - p10esp32wb             = key.
  // - DR                     = Double Row (Two row display mode).
  // - ESP32                  = Text for the first row.
  // - 1                      = Position of text for first row.
  // - ESP32 P10 LED Display  = Text for the second row.
  //
  // - When using the "getValue" string function, the sequence is:
  //   "p10esp32wb,DR,ESP32,1,ESP32 P10 LED Display"
  //        |       |   |   |           |
  //        0       1   2   3           4
  //
  //   > p10esp32wb = getValue(incoming_Settings, ',', 0);
  //   > DR         = getValue(incoming_Settings, ',', 1);
  //   > and so on.

  if (getValue(incoming_Settings, ',', 0) == key_Txt) {
    display_Modes = getValue(incoming_Settings, ',', 1);

    if (display_Modes == "SR") {
      single_Row_Txt = getValue(incoming_Settings, ',', 2);
      
      // Save texts and modes to flash memory.
      preferences.begin("P10_SD", false);
      preferences.putString("DM", display_Modes);
      preferences.putString("SRT", single_Row_Txt);
      preferences.end();
      delay(500);
    }
  
    if (display_Modes == "DR") {
      double_Row_First_Txt = getValue(incoming_Settings, ',', 2);
      double_Row_First_Txt_Pos = getValue(incoming_Settings, ',', 3).toInt();
      double_Row_Second_Txt = getValue(incoming_Settings, ',', 4);
      
      // Save texts and modes to flash memory.
      preferences.begin("P10_SD", false);
      preferences.putString("DM", display_Modes);
      preferences.putString("DRFT", double_Row_First_Txt);
      preferences.putInt("DRFTP", double_Row_First_Txt_Pos);
      preferences.putString("DRST", double_Row_Second_Txt);
      preferences.end();
      delay(500);
    }

    server.send(200, "text/plane", "+OK");  //--> Sending replies to the client.
    delay(500);
  } else {
    server.send(200, "text/plane", "+ERR"); //--> Sending replies to the client.
    delay(500);
  }
  
  timerAlarmEnable(timer);
  delay(500);
}
//________________________________________________________________________________

//________________________________________________________________________________getValue()
// String function to split strings based on certain characters.
String getValue(String data, char separator, int index) {
  int found = 0;
  int strIndex[] = { 0, -1 };
  int maxIndex = data.length() - 1;
  
  for (int i = 0; i <= maxIndex && found <= index; i++) {
    if (data.charAt(i) == separator || i == maxIndex) {
      found++;
      strIndex[0] = strIndex[1] + 1;
      strIndex[1] = (i == maxIndex) ? i+1 : i;
    }
  }
  return found > index ? data.substring(strIndex[0], strIndex[1]) : "";
}
//________________________________________________________________________________ 

//________________________________________________________________________________Single_Row_Display_Mode()
// Subroutine for displaying "running text" on P10 in Single Row mode.
void Single_Row_Display_Mode() {
  char CA_single_Row_Txt[single_Row_Txt.length() + 1];
  single_Row_Txt.toCharArray(CA_single_Row_Txt, single_Row_Txt.length() + 1);

  dmd.clearScreen(true);
  dmd.selectFont(Arial_Black_16);
  dmd.drawMarquee(CA_single_Row_Txt, single_Row_Txt.length(), (32*DISPLAYS_ACROSS)-1, 0);
  long start=millis();
  long timer=start;
  boolean ret=false;
  while(!ret){
   if ((timer+30) < millis()) {
     ret=dmd.stepMarquee(-1,0);
     timer=millis();
   }
  }
  delay(1000);
}
//________________________________________________________________________________ 

//________________________________________________________________________________Double_Row_Display_Mode()
// Subroutine to display text in the first row and display "running text" in the second row in Double Row mode.
void Double_Row_Display_Mode() {
  char CA_double_Row_First_Txt[double_Row_First_Txt.length() + 1];
  double_Row_First_Txt.toCharArray(CA_double_Row_First_Txt, double_Row_First_Txt.length() + 1);

  char CA_double_Row_Second_Txt[double_Row_Second_Txt.length() + 1];
  double_Row_Second_Txt.toCharArray(CA_double_Row_Second_Txt, double_Row_Second_Txt.length() + 1);

  dmd.clearScreen(true);
  dmd.selectFont(SystemFont5x7);
  dmd.drawString(double_Row_First_Txt_Pos, 0, CA_double_Row_First_Txt, double_Row_First_Txt.length(), GRAPHICS_NORMAL);
  
  int scrl_long = (double_Row_Second_Txt.length()*6) + (32*DISPLAYS_ACROSS);
  int i = 32*DISPLAYS_ACROSS;
  long start=millis();
  long timer=start;
  while(true){
    if ((timer+30) < millis()) {
      dmd.drawString(i, 9, CA_double_Row_Second_Txt, double_Row_Second_Txt.length(), GRAPHICS_NORMAL);    
      if (i > ~scrl_long) {
        i--;
      } else {
        break;
      }
      timer=millis();
    }
  }
}
//________________________________________________________________________________ 

//________________________________________________________________________________VOID SETUP()
void setup(void){
  // put your setup code here, to run once:
  
  Serial.begin(115200);
  delay(1000);
  
  Serial.println();

  display_Modes.reserve(5);
  single_Row_Txt.reserve(50);
  delay(500);

  //----------------------------------------Load data stored in flash memory.
  Serial.println("Load data stored in flash memory.");
  preferences.begin("P10_SD", false);
  
  display_Modes = preferences.getString("DM", "");
  single_Row_Txt = preferences.getString("SRT", "");
  double_Row_First_Txt = preferences.getString("DRFT", "");
  double_Row_First_Txt_Pos = preferences.getInt("DRFTP", 0);
  double_Row_Second_Txt = preferences.getString("DRST", "");

  Serial.print("display_Modes : ");
  Serial.println(display_Modes);
  Serial.print("single_Row_Txt : ");
  Serial.println(single_Row_Txt);
  Serial.print("double_Row_First_Txt : ");
  Serial.println(double_Row_First_Txt);
  Serial.print("double_Row_First_Txt_Pos : ");
  Serial.println(double_Row_First_Txt_Pos);
  Serial.print("double_Row_Second_Txt : ");
  Serial.println(double_Row_Second_Txt);

  preferences.end();
  delay(500);
  //----------------------------------------
  
  Serial.println();
  Serial.println("return the clock speed of the CPU.");
  // return the clock speed of the CPU.
  uint8_t cpuClock = ESP.getCpuFreqMHz();
  delay(500);

  Serial.println();
  Serial.println("Timer Begin");
  // Use 1st timer of 4.
  // devide cpu clock speed on its speed value by MHz to get 1us for each signal  of the timer.
  timer = timerBegin(0, cpuClock, true);
  delay(500);

  Serial.println();
  Serial.println("Attach triggerScan function to our timer.");
  // Attach triggerScan function to our timer.
  timerAttachInterrupt(timer, &triggerScan, true);
  delay(500);

  Serial.println();
  Serial.println("Set alarm to call triggerScan function.");
  // Set alarm to call triggerScan function.
  // Repeat the alarm (third parameter).
  timerAlarmWrite(timer, 300, true);
  delay(500);

  Serial.println();
  Serial.println("Start an alarm.");
  // Start an alarm.
  timerAlarmEnable(timer);
  delay(500);

  Serial.println();
  Serial.println("Chose the \"Arial_Black_16\" font.");
  dmd.selectFont(Arial_Black_16);

  Serial.println();
  Serial.println("Clear Screen.");
  // clear/init the DMD pixels held in RAM.
  // true is normal (all pixels off), false is negative (all pixels on).
  dmd.clearScreen(true); 
  delay(500);

  // While the process of connecting to a WiFi network is in progress or when the process of creating an access point is in progress, 
  // the "Alarm Timer" must be disabled.
  timerAlarmDisable(timer);
  delay(1000);

  //----------------------------------------Create ESP32 as Access Point.
Serial.println();
Serial.println("WIFI mode : AP");
WiFi.mode(WIFI_AP);
Serial.println("Setting up ESP32 to be an Access Point.");
WiFi.softAP(ssid, password); //--> Creating Access Points
delay(1000);
Serial.println("Setting up ESP32 softAPConfig.");
WiFi.softAPConfig(local_ip, gateway, subnet);
//----------------------------------------
 
  server.on("/", handleRoot); 
  server.on("/setText", handleSettings);

  // Start server.
  server.begin(); 
  Serial.println();
  Serial.println("HTTP server started");

  delay(500);

  // When successfully connected to a WiFi network or when the access point creation process is complete, 
  // the "Alarm Timer" is re-enabled.
  timerAlarmEnable(timer);
  delay(500);

  Serial.println();
  Serial.print("SSID name : ");
  Serial.println(ssid);
  Serial.print("IP address : ");
  Serial.println(WiFi.softAPIP());
  Serial.println();
  Serial.println("Connect your computer or mobile Wifi to the SSID above.");
  Serial.println("Visit the IP Address above in your browser to open the main page.");
  Serial.println();
  delay(500);

}
//________________________________________________________________________________

//________________________________________________________________________________VOID LOOP()
void loop(void){
  // put your main code here, to run repeatedly:

  // Handle client requests.
  server.handleClient();  

  if (display_Modes == "SR") {
    Single_Row_Display_Mode();
  }

  if (display_Modes == "DR") {
    Double_Row_Display_Mode();
  }
}
//________________________________________________________________________________
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

 

 

3. INTERFACE

 

 

4. VIDEO HASILNYA