Formatted Code Files and added readme (Last Devlog)

this is my probably last devlog on this before this project first time i thing this projects 1st version is done and its ready to ship now
i added all the necessary feature like

• good web ui to control
• Alarm Setting
• Scheduling Alarm on specific date
• notification feature for slack
• animation feature

FUTURE OF THIS PROJECT

• this is enough for first ship in future i gonna make this project open to any one other peoples can use my web ui control making same alarm using unique id register feature so others can setup there alarm and data store in there id
• making alarms body in CAD and 3d print it to make final product
• i gonna make step by step guide for other peoples to make there own version

Learning from this Project

i learned lots of thing from this project about Arduino uno esp32 pipedream how to use webhook automation how to make slack bot app what’s pros and cons of uno based project
mainly using firebase DB for real time data sync between web and real lcd is very interesting part for me and designing web ui thats minimal and cool is also very good experience
and in this project i documented very single thing through develogs that was very new thing to me
Overall i have so much fun making this project

Added Some Small Ui Update

• added card for very animation and added play pause button in it
• added notification connecting card for apps like Slack , Discord and Email (Discord and Email is coming soon)
• added css in website to operate in portrait mode if opened if site is opened in desktop its remain in portrait mode , i added this because i don’t want to stretch ui and destroy it looks

This is my last devlog with adding feature and ui 😭

because i have exam from Monday so now i will format the code and create demo web ui to experience for voters and add readme and ship it

Got Well Cooked Mark on Project 😊

Added Feature

• added animation screen mode in real lcd also and i can can control it through web ui and manual push button both
• added push buttons to stop alarm ringing when you want manually and to switch modes between normal clock mode and animation mode.
  to add this push button feature faced a very new problem !😭

Problems -

to add push button feature i faced very new problem which is very complex to understand for me
so at first i thought that its very easy i will connect the 2 Push Buttons in UNO and add function in it to switch mode and stop but when i did it that’s not working properly like when i am pressing switch mode button its not working at single press when i pressed it 2-3 time its worked but when i tried which it from animation mode to normal its not working at all i thought push buttons are not working so run a serial test code in uno to test push button then i saw both them are working normally after debugging and searching on chatgpt i got to know about the issue i am facing,
so the real problem is i am using push button in uno and when its switch to animation mode its receive lots of data from esp32 in tx port and its process it all every sec so when i register the push button click then its didn’t got that window process that click of push button because its busy in animation

Solution -

to solve that push button problem i connected both push button in ESP32 GPIO pins and added Stop and Swith Mode Function in its code,
so now what’s happening is esp32 get the click registered and send it to UNO through same TX to RX connection from which animation is working and now push button function is also working

Learning -

‘i learned lots of thing about uno data transferring and receiving limit and solved a new problem occurred to me in feature i will take it in account that uno have this issue so do it correctly’

Next Step -

• improve the multi page ui in web

Added Animation feature

so i added animation feature to set animation on LCD screen after so many failed trial and attempts it took lot of work😭

Problem -

basically in 16X2 LCD display you can allot a special character to draw a specific things like this triangle for wave animation
Code -
"%":["00000","00000""00000","00100","01110","11111","00000","00000"]
in this if i use % it draw this triangle which allotted to this special character because i cant any alphabets and number because its use to show character eg. A , B , C … in message
so i have to very carefully choose special symbol which is not use very frequently in message it took lots of time

Updated Ui (only for test gonna change it to better soon)

• added multiple screens for every feature 1 screen for 1 feature
  Alarm - primary home screen
  Animation - set Animation stop it play it
  Notification - to connect mesaging apps to notify on lcd screen

Note -

this animation feature only added in web for now i am working on uno code to work in real 16x2 lcd and sync it

Next step -

1. work on uno code to add animation feature in real lcd screen also

2 . add push buttons in real lcd to stop and switch between normal and animation mode
3. work on web ui to make it better

Added alarm duration slider

so basically i added a alarm ringing duration adjustment slider
from that slider i can adjust the duration eg. 5sec to 2o sec ,how ever i want to set it easily
its customizable for every alarm individually you can set 1 alarm ringing duration 5 sec and other 7sec

How it works -

so when i set it on web ui and save it then its store with all alarm detail in firebase database and from that i can sync both real lcd with fetching it by esp32 and web simulation lcd

Next -

now i am building animation feature and adding multiple pages in web to separate all feature like notification , alarm, animation so user can access all the feature easily

Future plan -

to create a step by step guide how others can build it too
like hack club blueprints starter projects it is my inspiration to create a guide

Built Slack notification Feature

Now when i receive ping on mentioned message on slack channel i get notification on both LCD and its Web simulation

How i built it -

I used multiple method in first trials like

• slack bots only (failed partially)
• n8n /webhooks (failed)
• extention to track notification (dumb idea failed)

Final Method i used -

1. Created slack app to track message on group in which its added by me manually
2. connected it to service similar to n8n its called pipedream its also used to create automation so created trigger that filter and post the messages to firebase database
3. Web Simulation and control and Real LCD is connected to same firebase db it fetch that data and show mesaage on screen for 5 sec

(for now i didnt add any thing to fetch username thats why its showing user id)

Time BreakDown

i tried multiple method to track all message in any channel of workspace or track my dm also i tried all the methods to do that slackboot wehooks , event log many other but it dint work i spent 2 days in it 😭 so in last i settled on version i posted now a slack bot that can be added in any channel manually to track messages

Next Step

• alarm ring duration slider to change ringing duration
• add cool animation screens which can be changed because its desk alarm clock

I added a working video

Built the Note Feature

Now i can set to an alarm and that note will be appear on screen when it start ringing on set time , it can be single word or multiple with its scrolling text feature when word get bigger then screen it use word scrolling to show you full note

also added

• i can also set date day and schedule the alarm as i want

what i used -

i used same firebase db just added place for note also with alarm now when i set alarm in database its store both note and alarm

Next steps-

• i have to connect it to my slack account to get notification on screen
• alarm ring duration slider to change ringing duration

i given video in which i shown all the features

Built Website to control

today i made website to set the timing and make good ui with LCD 16X2 Display Simulator which sync with my real display and show same info on web
Now you can set alarms set time, dates and you can add notes(which later shown on display working on it)

Website inspiration -

UI Structure - Google clock app
Color and fonts - Scraps website

Used -

HTML
CSS
Java Script

how i did it -

So used firebase to store alarm data when i set alarm on website it store on firebase db and that fetched by esp32
and for real time clock i use ntp servers in both website simulation and real one

Time breakdown

to sync the real lcd with simulation it took most of the time almost 2hr on record and designing website it done pretty easily just the lcd display making it is little bit hard part but i later user wokwi simulator code and make it work with my website and then i used cursor to generate structure and did all ui work by own hands (some part of website is unpolished i will fix it )

Next Step

• now i fix small ui problems in website
• add that note feature when alarm rings it show your alarm note
• add stopping option by push button (if i got buttons in college lab 😭)

Built First Simple Working Version

for now i created a simple version on alarm clock using Arduino Uno and Esp32 i fetch time using ntpserver in esp32 and by tx2 connection esp32 sends the time to uno and display it on display .
I didn’t have a webpage to set alarm for now its set from serial monitor of UNO and i also didn’t added alarm stopping option because i didn’t have push buttons 😭 i will add that feature later.
i added bell icon in corner using - https://maxpromer.github.io/LCD-Character-Creator/

What i built -

So it just shows time on 1st line and stetted alarm time in 2nd line with bell icon as you can see it in picture and its rings on settled time

Why it took 4hours😭 -

I took 4 hr because its first time i am using rx tx connections in esp32 and uno and i got too many errors i created webpage but its not working properly i tried multiple times almost (whole night)😑 fixing but it didnt worked in last i am posting this simple version devlog

Next Step -

• I have to create an good looking webpage to set alarm timing and connect with esp32
• i have to add simple stop option using push button for now