sankarcheppali/esp32_webserver_token_disaply_system.ino

## esp32_webserver_token_disaply_system.ino
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
const uint8_t CLK_CYCLE_DELAY = 100;// us
const uint8_t CLK_PIN = 22;
const uint8_t DIO_PIN = 19;
const uint8_t NUM_DIGITS = 4;

const char* ssid = "****";
const char* password = "****";

WebServer server(80);

const char *htmlPage = R""""(
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ESP32 Token display system</title>
</head>

<body>

<h2>Token number</h2>
  <div class="row">
    <div class="col">
        <input type="text" id="token_number" size="10">
        <button onclick="updateTokenNumber()">Update</button>
    </div>
  </div>
  <div class="row" style="margin-top: 10px;">
    <div class="col">
        <button onclick="incrementTokenNumber()">Increase</button>
        <button onclick="decrementTokenNumber()">Decrease</button>
    </div>
  </div>
</body>
<script>

async function sendTokenNumber(tokenNumber) {
  console.log("sending token number "+tokenNumber);
  let formData = new FormData()
  formData.append('token-number',tokenNumber)
  let res = await fetch('/update-token',{
    method: 'post',
    body: formData
  })
  console.log(`resposnse ${res.status}`);
}

function readTokenNumber(){
  let elem = document.getElementById("token_number");
  if(elem.value){
    return parseInt(elem.value);
  }
  return 0;
}

function setTokenNumber(tokenNumber) {
  let elem = document.getElementById("token_number");
  elem.value = `${tokenNumber}`;
}

function incrementTokenNumber(){
  let tokenNumber = readTokenNumber()+1
  setTokenNumber(tokenNumber)
  sendTokenNumber(tokenNumber)
}

function decrementTokenNumber(){
  let tokenNumber = readTokenNumber()-1
  setTokenNumber(tokenNumber)
  sendTokenNumber(tokenNumber)
}

function updateTokenNumber(){
 sendTokenNumber(readTokenNumber())
}
</script>
</html>
  )"""";


uint8_t tokenBuffer[NUM_DIGITS+1] = {0xC0}; // first byte will be the register address
// LED segment patterns.
const uint8_t NUM_PATTERNS = 10;
int tokenNumber = 0;
const uint8_t PATTERNS[NUM_PATTERNS] = {
  0x3F, // 0
  0x06, // 1
  0x5B, // 2
  0x4F, // 3
  0x66, // 4
  0x6D, // 5
  0x7D, // 6
  0x07, // 7
  0x7F, // 8
  0x6F, // 9
};

void setDataPin(uint8_t _bit){
  digitalWrite(DIO_PIN,_bit);
}
void setClkPint(uint8_t _bit){
  digitalWrite(CLK_PIN,_bit);
}

void sleep(int sleep){
  delayMicroseconds(sleep);
}

void start() {
    setDataPin(0);
    sleep(CLK_CYCLE_DELAY);
    setClkPint(0);
    sleep(CLK_CYCLE_DELAY);
}

void stop() {
    setDataPin(0);
    sleep(CLK_CYCLE_DELAY);
    setClkPint(1);
    sleep(CLK_CYCLE_DELAY);
    setDataPin(1);
}


void writeByte(uint8_t _byte){
    for(uint8_t i=0;i<8;i++){
      setDataPin(_byte >> i & 0x01) ;
      sleep(CLK_CYCLE_DELAY);
      setClkPint(1);
      sleep(CLK_CYCLE_DELAY);
      setClkPint(0);
      sleep(CLK_CYCLE_DELAY);
    }

    setClkPint(0);
    sleep(CLK_CYCLE_DELAY);
    setClkPint(1);
    sleep(CLK_CYCLE_DELAY);
    setClkPint(0);
    sleep(CLK_CYCLE_DELAY);
}

void writeDataCmd(uint8_t cmd){
    start();
    writeByte(cmd);
    stop();
}

void sendByteStream(uint8_t *bytes,uint8_t len) {
    writeDataCmd(0x40);
    start();
    for(uint8_t i=0;i<len;i++){
        writeByte(bytes[i]);
    }
    stop();
}

void displayTokenNumber(int tokenNumber){
  for(uint8_t i=0;i<NUM_DIGITS;i++){
    uint8_t digit = tokenNumber % 10;
    tokenNumber = tokenNumber/10;
    tokenBuffer[NUM_DIGITS - i] = PATTERNS[digit];
  }
  sendByteStream(tokenBuffer,NUM_DIGITS+1);
}
void handleIndex() {
  server.send(200,"text/html",htmlPage);
}

void handleUpdate() {
  String tokenNumberStr = server.arg("token-number");
  Serial.print("Got new token number");
  Serial.println(tokenNumberStr);
  int tokenNumber = strtol(tokenNumberStr.c_str(), NULL, 10);
  displayTokenNumber(tokenNumber);
  server.send(200, "text/plain", tokenNumberStr);
}


void setup(void) {
  Serial.begin(115200);
  pinMode(CLK_PIN,OUTPUT);
  pinMode(DIO_PIN,OUTPUT);
  stop();
  // switch on the display
  uint8_t displayControlCmd[1]={0x8F};// display on with full brightness
  sendByteStream(displayControlCmd,1);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleIndex);
  server.on("/update-token", handleUpdate);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  delay(2);//allow the cpu to switch to other tasks
}
	#include <WiFi.h>
	#include <WiFiClient.h>
	#include <WebServer.h>
	const uint8_t CLK_CYCLE_DELAY = 100;// us
	const uint8_t CLK_PIN = 22;
	const uint8_t DIO_PIN = 19;
	const uint8_t NUM_DIGITS = 4;

	const char* ssid = "****";
	const char* password = "****";

	WebServer server(80);

	const char *htmlPage = R""""(
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>ESP32 Token display system</title>
	</head>

	<body>

	<h2>Token number</h2>
	<div class="row">
	<div class="col">
	<input type="text" id="token_number" size="10">
	<button onclick="updateTokenNumber()">Update</button>
	</div>
	</div>
	<div class="row" style="margin-top: 10px;">
	<div class="col">
	<button onclick="incrementTokenNumber()">Increase</button>
	<button onclick="decrementTokenNumber()">Decrease</button>
	</div>
	</div>
	</body>
	<script>

	async function sendTokenNumber(tokenNumber) {
	console.log("sending token number "+tokenNumber);
	let formData = new FormData()
	formData.append('token-number',tokenNumber)
	let res = await fetch('/update-token',{
	method: 'post',
	body: formData
	})
	console.log(`resposnse ${res.status}`);
	}

	function readTokenNumber(){
	let elem = document.getElementById("token_number");
	if(elem.value){
	return parseInt(elem.value);
	}
	return 0;
	}

	function setTokenNumber(tokenNumber) {
	let elem = document.getElementById("token_number");
	elem.value = `${tokenNumber}`;
	}

	function incrementTokenNumber(){
	let tokenNumber = readTokenNumber()+1
	setTokenNumber(tokenNumber)
	sendTokenNumber(tokenNumber)
	}

	function decrementTokenNumber(){
	let tokenNumber = readTokenNumber()-1
	setTokenNumber(tokenNumber)
	sendTokenNumber(tokenNumber)
	}

	function updateTokenNumber(){
	sendTokenNumber(readTokenNumber())
	}
	</script>
	</html>
	)"""";


	uint8_t tokenBuffer[NUM_DIGITS+1] = {0xC0}; // first byte will be the register address
	// LED segment patterns.
	const uint8_t NUM_PATTERNS = 10;
	int tokenNumber = 0;
	const uint8_t PATTERNS[NUM_PATTERNS] = {
	0x3F, // 0
	0x06, // 1
	0x5B, // 2
	0x4F, // 3
	0x66, // 4
	0x6D, // 5
	0x7D, // 6
	0x07, // 7
	0x7F, // 8
	0x6F, // 9
	};

	void setDataPin(uint8_t _bit){
	digitalWrite(DIO_PIN,_bit);
	}
	void setClkPint(uint8_t _bit){
	digitalWrite(CLK_PIN,_bit);
	}

	void sleep(int sleep){
	delayMicroseconds(sleep);
	}

	void start() {
	setDataPin(0);
	sleep(CLK_CYCLE_DELAY);
	setClkPint(0);
	sleep(CLK_CYCLE_DELAY);
	}

	void stop() {
	setDataPin(0);
	sleep(CLK_CYCLE_DELAY);
	setClkPint(1);
	sleep(CLK_CYCLE_DELAY);
	setDataPin(1);
	}


	void writeByte(uint8_t _byte){
	for(uint8_t i=0;i<8;i++){
	setDataPin(_byte >> i & 0x01) ;
	sleep(CLK_CYCLE_DELAY);
	setClkPint(1);
	sleep(CLK_CYCLE_DELAY);
	setClkPint(0);
	sleep(CLK_CYCLE_DELAY);
	}

	setClkPint(0);
	sleep(CLK_CYCLE_DELAY);
	setClkPint(1);
	sleep(CLK_CYCLE_DELAY);
	setClkPint(0);
	sleep(CLK_CYCLE_DELAY);
	}

	void writeDataCmd(uint8_t cmd){
	start();
	writeByte(cmd);
	stop();
	}

	void sendByteStream(uint8_t *bytes,uint8_t len) {
	writeDataCmd(0x40);
	start();
	for(uint8_t i=0;i<len;i++){
	writeByte(bytes[i]);
	}
	stop();
	}

	void displayTokenNumber(int tokenNumber){
	for(uint8_t i=0;i<NUM_DIGITS;i++){
	uint8_t digit = tokenNumber % 10;
	tokenNumber = tokenNumber/10;
	tokenBuffer[NUM_DIGITS - i] = PATTERNS[digit];
	}
	sendByteStream(tokenBuffer,NUM_DIGITS+1);
	}
	void handleIndex() {
	server.send(200,"text/html",htmlPage);
	}

	void handleUpdate() {
	String tokenNumberStr = server.arg("token-number");
	Serial.print("Got new token number");
	Serial.println(tokenNumberStr);
	int tokenNumber = strtol(tokenNumberStr.c_str(), NULL, 10);
	displayTokenNumber(tokenNumber);
	server.send(200, "text/plain", tokenNumberStr);
	}


	void setup(void) {
	Serial.begin(115200);
	pinMode(CLK_PIN,OUTPUT);
	pinMode(DIO_PIN,OUTPUT);
	stop();
	// switch on the display
	uint8_t displayControlCmd[1]={0x8F};// display on with full brightness
	sendByteStream(displayControlCmd,1);
	WiFi.mode(WIFI_STA);
	WiFi.begin(ssid, password);
	Serial.println("");

	while (WiFi.status() != WL_CONNECTED) {
	delay(500);
	Serial.print(".");
	}
	Serial.print("Connected to ");
	Serial.println(ssid);
	Serial.print("IP address: ");
	Serial.println(WiFi.localIP());

	server.on("/", handleIndex);
	server.on("/update-token", handleUpdate);

	server.begin();
	Serial.println("HTTP server started");
	}

	void loop(void) {
	server.handleClient();
	delay(2);//allow the cpu to switch to other tasks
	}