Build new UI and Fixes

• i added new ui to it because previous on is not that good this ui is inspired by - Scraps
• added new black and white look
• added some animations
• added an logout button
• pfp to the card which is fetched from google account and one more thing pfp is only fetched when its available if not then it will use first letter of name in pfp

Fixes

• previously the account cards are can be added multiple time because of my poor code i didnt limit the one of card per account , its now fixed
• there is one logout button now from which you can logout your account

Error Faced

• i faced error in fetching the pfp form google its occurring because of bad scope of google api then i took help of ai to solve it
• there is error in logout a account this error is also being solved after some tweaks its occur due to my bad code i noticed and fixed it

Summary

basically i created a new ui not which is very simple that’s why devlog time is low and added a logout button in cards to disconnect the account , added account pfp in cards and fixed the same account multiple card issue

• i attached new ui pictures below its very basic version of it upgrading it in future
• and added picture of some error i faced

Build Basic UI

• created account bar on left
• created account card on right
• in account card added all the info like email id an storage info of account you can see storage and trash bin storage
• browse button also its not working for now

Connect Multiple Account

• now i can connect multiple google drive account at ones but there a problem i have to manually add the account id in google cloud console to allow the testing app login

Problem Faced

• faced some problems in css making card grids so took chatgpt’s help little bit to fix it and learnt it how to do it

• some problem in java script in first version i create js in which the storage is showing in GB only so if account storage is 5TB its showings 5000GB so i changed it using this format pretty easy but common mistake
  if(gb >= 1000) { return (gb / 1024).toFixed(2) + " TB"}

Built a very basic page

• created very basic page for testing
• connected google drive api (only for testing users)
• fetch all the data on google drive of linked account

more info -

This is very basic page only for testing api and learning how google drive api works. so i created basic google console id and created oauth credesntials for google drive and used app in testing mode in which you can add your own google id manually (for now) in future it will be easy to use after adding my id manually i fetched data its worked i attached image of it

Learning

• how to create node.js server to host web locally and use .env file for credenstials
• how to use google cloud console and use api and how to create Oauth Google signing screen

Next

• i will work more on Ui
• work on join multiple Account at one time and fetch info from both of them

Last Devlog

this is my last devlog this project is very fun to make after shipping this i will do some SEO also on this website to rank this website

Added UI

• added new ui element like dots flicker screen on hero section
• now on side of temperature city name also appearing
• added buy me a coffee widget

Last Fixes

• fixed hero section avatar
• fixed openweather api calls error now uts working
• fixed some small erroe
• formated the code

Made Some Ui Fixes

this is my tech stack carousel this have svgs in it before i have some problem so used cdn this time to load the logos in it .
now it is more clean and appearing as i want too

Formatting

as i soon ship this project i am also slowly formating the code file and make the code more clean and understandable (Using Ai also in it )

First Devlog

website is almost completed only little bit ui changes and all is
remaining
this is very basic website with HTML CSS JS

pages -

HOME
PROJECT
CONTACT

API and Others Used -

• used web3 forms for getting form submissions from website to my email

• used Github API to fetch all real time repository data

• used spotify api also for fetching

• used weather fetching api to fetch weather real time

Purchased domain - airtolife.in from grant
added some fixes to reduce loading time tried
and formated code

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 some code changes formatted the code because i want to get more cookies reason is my 1st major ship which have 90% of its times it got only 2X cookie multiper thats not fair i guess thats why i reshiped it but with 20min dev and that reship got 13X multipler but i ggot 6 cookie only because that was only 20min devlog please support me i want pcb buying grant for my next project

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

I got received 5 cookies for 2hr work i think it was unfair that’s why i am reship the project added some changes like now motor also off when driver not looking in front for long time

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

Basically this project is for preventing road accident causing by Driver Drowsiness by using computer vision

An smart safety system that detects eye closure using open cv and triggers hardware alerts and telegram notification

Using -

• Python 3.11
• OpenCV
• MediaPipe
• SciPy
• PySerial
• Arduino UNO
• ESP32
• Telegram Bot API

I build this project because i am getting bored i am working on another project but i need some break thats why i build this in just 2 hours i implemented telegram bot notification also in this project using esp32 wifi module

Learning -

During building this i faced lots of problem in python using libraries
I learned about creating telegram bots and integrating it with esp32

Today i created RoadMap how do i make this with tools i have like old phone for camera and GPS and ESP32 for logging and laptop for processing it ,

PHONE (Camera + GPS)
├─▶ Laptop (Image / Video)
└─▶ ESP32 (GPS / Status)
ESP32 ─▶ Laptop (Metadata)
Laptop (AI Processing)
└─▶ n8n (Automation)
└─▶ Email Challan
Laptop ─▶ ESP32 (Alert / LED / Buzzer)

Then upgrade it from grants like using webcam for camera and using Raspberry pi for Processing the image and Making API calls all the thing natively on helmet attached

Today i also learned how i access phone cam on laptop by using IPCAM App and accessing the phone location coordinates from GPS logger App and send it to laptop

Added the Map to Select a State after selecting the state it will go to select city there is state map to select city there you can select your city there are some places there data is not available that’s why its not work but almost all states and city works you can fetch the info
WHAT USING -
For MAPS : using the JavaScript’s of Fusion Charts Trial and integrated with all data to work
PROMBLEMS - Because of too many JavaScript’s for state maps site loading time for first visit is very high
TRY TO SOLVE IT NEXT ANY ONE INTRESTED IN COLLAB/HELP MY CONTACT INFO ON MY GITHUB

This is my 2025 college science fest project i want to work on this project from long time but i didn’t getting time so i decided to complete it now so i start updating it form 10jan i will make some UI update add more location more data from which people can get more accurate data this is an awareness project how bad AQI is harmful for us and aware people about that any one interested can message me contact detail is on my GitHub