Overview
Things
Story

Description
Details
Files

Published November 27, 2020 © MIT

Electronic Number Sign - ENS

Electronic display unit with a configurable number that can be managed remotely via a web interface.

BeginnerFull instructions provided4 hours223

Things used in this project

Hardware components

Nextion screen 2.4"

smart screen

ESp32 devkitC

microcontroler with wifi

MPC1700 3300

curent regulator

1000uF capacitor

1nF capacitor

M3 screw and nuts

a 3D printer or what you want to make the case

a switch ON/OFF

Hand tools and fabrication machines

3D Printer (generic)

Soldering iron (generic)

Story

1 / 6

Description

ESN (Electronic Number Sign) is an electronic sign that displays a number on a configurable background image.

It allows to display on a variable screen size a number that can be used as a reference for example in an auction or during a live sale.

The uses are infinite from the moment there is a need to display a number somewhere.

ESN is battery operated and therefore does not need a power outlet to operate. It is portable and convenient to use.

Details

The configuration of ENS is done via a web interface.

At startup the device indicates the IP address or connect. It can operate in AP or client mode.

Changing the number is done via the web interface very easily. There is no login and/or password, but this option can easily be added.

I used a Nextion screen to make this device. I find them very easy to use and the design software is well done.

The background image can be modified from the interface as well as the text color.

The screen size is variable. I opted for a 2.4", but it is possible to make it bigger.

I made this object to help my wife during her live sales on Facebook.

Feel free to contact me if you need more information.

Files

Code

main.cpp

/***************************************************************************************************************************************
                      LEA LIVE- NEXTION DISPLAY - HTTP SERVER 


NOTE : 
UART	RX IO	TX IO	CTS	RTS
UART0	GPIO3	GPIO1	N/A	N/A
UART1	GPIO9	GPIO10	GPIO6	GPIO11
UART2	GPIO16	GPIO17	GPIO8	GPIO7

****************************************************************************************************************************************/
#include <WiFi.h>
#include <SPI.h>
#include "ESPAsyncWebServer.h"

/* ------------------------- Wifi -------------------------*/
const char* ssid = "JJJJ";  // Enter SSID here
const char* password = "nicolajean1975";  //Enter Password here
AsyncWebServer server(80);

/* ------------------------- Variables -------------------------*/
String numero = "0";
int count = 0;

#define RXD2 16
#define TXD2 17

/* ------------------------- FONCTIONS -------------------------*/

void endNextionCommand()
{
  Serial2.write(0xff);
  Serial2.write(0xff);
  Serial2.write(0xff);
}

String SendHTML(String numero){

   String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<title>LEA LIVE</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>! LEA LIVE !</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">Num&eacute;ro Produit: </div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=numero;
   ptr +="</div>\n";
   ptr +="</div>\n";

  ptr +="<form action='/'>";
  ptr +="  <input type='text' name='numero'>";
  ptr +="  <input type='submit' value='Changer le num&eacute;ro'>";
  ptr +="</form><br>";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}


String IpAddress2String(const IPAddress& ipAddress)
{
  return String(ipAddress[0]) + String(".") +\
  String(ipAddress[1]) + String(".") +\
  String(ipAddress[2]) + String(".") +\
  String(ipAddress[3])  ; 
}



/* ------------------------- SETUP -------------------------*/

void setup() {
  
  Serial.begin(9600);    // debug
  Serial2.begin(9600, SERIAL_8N1, RXD2, TXD2);
  Serial.println("Serial Txd is on pin: "+String(TX));
  Serial.println("Serial Rxd is on pin: "+String(RX));

  Serial.println("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);   //connect to your local wi-fi network

  while (WiFi.status() != WL_CONNECTED)   //check wi-fi is connected to wi-fi network
  {
     delay(1000);
     Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connect..!");
  Serial.print("Adresse IP: ");  
  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
 
    int paramsNr = request->params();
    Serial.println(paramsNr);
 
    for(int i=0;i<paramsNr;i++){
        AsyncWebParameter* p = request->getParam(i);
        Serial.print("Param name: ");
        Serial.println(p->name());
        Serial.print("Param value: ");
        Serial.println(p->value());
        Serial.println("------");
        
        numero = p->value();
        // Affichage du numro
        String command = "numero.txt=\"" + numero + "\"";
        Serial.println("Envoy Ecran: " + numero);
        Serial2.print(command);
        endNextionCommand();
    } 
    request->send(200, "text/html", SendHTML(numero));
  });


  server.begin(); 
  Serial.println("Serveur HTTP dmarr");

}


/* ------------------------- LOOP -------------------------*/

void loop() 
{
  delay(2000);

  count = count + 1;

  // Affichage de l'IP sur l'ecran Nextion
  if (count < 10) {
    String afficheIP = "ip.txt=\"" + IpAddress2String(WiFi.localIP()) + "\"";
    Serial2.print(afficheIP);
    endNextionCommand();
  } else {
    String afficheIP = "ip.txt=\"LUNAECRAFT\"";
    Serial2.print(afficheIP);
    endNextionCommand();
  }


}

Credits

nj1337

3 projects • 2 followers

I have been a professional web developer for more than 10 years. I like to tinker with stuff and discover electronics and 3D design.

Contact

Comments

Please log in or sign up to comment.

Embed the widget on your own site

Electronic Number Sign - ENS

Electronic Number Sign - ENS

Things used in this project

Hardware components

Hand tools and fabrication machines

Story

Description

Details

Files

Custom parts and enclosures

lealive.stl

lealivepcb.stl

Code

main.cpp

Credits

nj1337

Comments

Related channels and tags