Scribd
Upload
9 views7 pages

Code For Touch Counts and Graded Touch

This document contains an Arduino sketch for an ESP8266-based web server that displays a counter on a TM1637 display and allows users to increment, decrement, or reset the counter via buttons. It also retrieves the current date and time from an NTP server and serves a web page that updates the counter and displays the date and time. The code includes HTML and JavaScript for dynamic updates and user interaction.

Uploaded by

sirataerasool6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views7 pages

Code For Touch Counts and Graded Touch

This document contains an Arduino sketch for an ESP8266-based web server that displays a counter on a TM1637 display and allows users to increment, decrement, or reset the counter via buttons. It also retrieves the current date and time from an NTP server and serves a web page that updates the counter and displays the date and time. The code includes HTML and JavaScript for dynamic updates and user interaction.

Uploaded by

sirataerasool6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

#include <ESP8266WiFi.

h>

#include <ESP8266WebServer.h>

#include <TM1637Display.h>

#include <ESP8266mDNS.h>

#include <NTPClient.h>

#include <WiFiUdp.h>

// Wi-Fi Credentials

const char* ssid = "Ask me";

const char* password = "31373139";

// Define TM1637 display pins

#define CLK 5 // GPIO5

#define DIO 4 // GPIO4

// Define button pins

#define BUTTON_INCREMENT 14 // GPIO14

#define BUTTON_DECREMENT 12 // GPIO12

#define BUTTON_RESET 13 // GPIO13

// Initialize TM1637 display (CLK, DIO pins)

TM1637Display display(CLK, DIO);

int counter = 0; // Counter variable

// Web server on port 80

ESP8266WebServer server(80);

// NTP setup
WiFiUDP udp;

NTPClient timeClient(udp, "pool.ntp.org", 18000, 3600000); // UTC+5 for Lahore (18000 seconds)

// Function to calculate the current date from epoch time

String getCurrentDate() {

time_t rawTime = timeClient.getEpochTime();

struct tm* timeInfo = gmtime(&rawTime); // Get time in UTC

int day = timeInfo->tm_mday;

int month = timeInfo->tm_mon + 1; // tm_mon is 0-11

int year = timeInfo->tm_year + 1900; // tm_year is years since 1900

return String(day) + "-" + String(month) + "-" + String(year);

// Convert 24-hour time to 12-hour format with AM/PM

String formatTimeWithAMPM(String formattedTime) {

int hour = formattedTime.substring(0, 2).toInt();

String minutes = formattedTime.substring(3, 5);

String seconds = formattedTime.substring(6, 8);

String ampm = (hour >= 12) ? "PM" : "AM";

if (hour == 0) hour = 12; // Midnight case

else if (hour > 12) hour -= 12; // Convert to 12-hour format

return String(hour) + ":" + minutes + ":" + seconds + " " + ampm;

// Get the current date and time from the NTP server

String getCurrentDateTime() {

timeClient.update();

String dateTime = getCurrentDate() + " " + formatTimeWithAMPM(timeClient.getFormattedTime()); //


Combine date and time
return dateTime;

// HTML content for the webpage

String getHTMLPage() {

String html = "<!DOCTYPE html><html><head><title>ESP8266 Counter</title>";

html += "<style>body { font-family: Arial; text-align: center; margin: 0; padding: 20px; background-color:
#f4f4f4; }";

html += "h1 { color: #333; }";

html += ".branding { color: red; font-weight: bold; }";

html += ".digitrixx { color: black; font-weight: bold; }";

html += ".container { position: relative; z-index: 1; padding-bottom: 60px; }"; // Padding to avoid
overlapping branding

html += "</style>";

html += "<script>function updateCounter() {";

html += " fetch('/getCounter').then(response => response.json()).then(data => {";

html += " document.getElementById('counterValue').innerText = data.counter; ";

html += " document.getElementById('currentDateTime').innerText = data.dateTime; ";

html += " });";

html += " setTimeout(updateCounter, 1000);"; // Update every second

html += "} function updateValue() {";

html += " var newValue = document.getElementById('counterInput').value;";

html += " fetch('/setCounter?value=' + newValue).then(response => response.json()).then(data => {";

html += " document.getElementById('counterValue').innerText = data.counter; ";

html += " });";

html += "} function copyInfo() {";

html += " var info = document.getElementById('info');";

html += " var range = document.createRange();";

html += " range.selectNode(info);";


html += " window.getSelection().removeAllRanges();";

html += " window.getSelection().addRange(range);";

html += " document.execCommand('copy');";

html += " alert('Info copied to clipboard!');";

html += "}</script></head><body onload='updateCounter()'>";

html += "<div class='container'>";

html += "<h1 id='currentDateTime'>" + getCurrentDateTime() + "</h1>";

html += "<h2>Welcome Dr. Faraz</h2>";

html += "<h3>FUE Count: <span id='counterValue'>" + String(counter) + "</span></h3>";

html += "<input type='number' id='counterInput' value='" + String(counter) + "'>";

html += "<button onclick='updateValue()'>Update Counter</button><br><br>";

html += "<button onclick='copyInfo()'>Copy Info</button><br><br>";

// Branding added above the Copy Info button

html += "<div class='branding'>Powered by <span


class='digitrixx'>TheDigitrixx</span>®</div><br><br>";

html += "<div id='info'>";

html += "<p>Date & Time: <span id='currentDateTimeCopy'>" + getCurrentDateTime() + "</span></p>";

html += "<p>FUE Count: <span id='counterValueCopy'>" + String(counter) + "</span></p>";

html += "<p>Powered by <span class='digitrixx'>TheDigitrixx</span>®</p>"; // Added to the copied


content

html += "</div>";

html += "</div>";

html += "</body></html>";

return html;
}

// Update the 7-segment display

void updateDisplay() {

display.showNumberDec(counter, false); // Display the counter

Serial.println("Counter: " + String(counter)); // Output to Serial Monitor

// Previous button states for detecting changes

bool lastIncrementState = HIGH;

bool lastDecrementState = HIGH;

bool lastResetState = HIGH;

void setup() {

Serial.begin(115200);

display.setBrightness(7);

display.clear();

display.showNumberDec(counter, false);

pinMode(BUTTON_INCREMENT, INPUT_PULLUP);

pinMode(BUTTON_DECREMENT, INPUT_PULLUP);

pinMode(BUTTON_RESET, INPUT_PULLUP);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) delay(500);

// Print the IP address once connected

Serial.println("Connected to Wi-Fi");

Serial.print("IP Address: ");


Serial.println(WiFi.localIP()); // This will print the IP address of the ESP8266

MDNS.begin("esp8266-counter");

timeClient.begin();

server.on("/", []() { server.send(200, "text/html", getHTMLPage()); });

server.on("/getCounter", []() {

String jsonResponse = "{\"counter\": " + String(counter) + ", \"dateTime\": \"" + getCurrentDateTime()


+ "\"}";

server.send(200, "application/json", jsonResponse);

});

server.on("/setCounter", HTTP_GET, []() {

if (server.hasArg("value")) {

counter = server.arg("value").toInt();

String jsonResponse = "{\"counter\": " + String(counter) + "}";

server.send(200, "application/json", jsonResponse);

updateDisplay();

});

server.begin();

void loop() {

server.handleClient();

bool incrementState = digitalRead(BUTTON_INCREMENT);

if (lastIncrementState == HIGH && incrementState == LOW) { // Detect only high-to-low transition

counter = min(counter + 1, 9999); // Prevent overflow


updateDisplay();

lastIncrementState = incrementState;

bool decrementState = digitalRead(BUTTON_DECREMENT);

if (lastDecrementState == HIGH && decrementState == LOW) { // Detect only high-to-low transition

counter = max(counter - 1, 0); // Prevent negative values

updateDisplay();

lastDecrementState = decrementState;

bool resetState = digitalRead(BUTTON_RESET);

if (lastResetState == HIGH && resetState == LOW) { // Detect only high-to-low transition

counter = 0;

updateDisplay();

lastResetState = resetState;

You might also like