@Aashish

worked on the appearance section

the appearance section on the web app is pretty much done now the web apps appearance section is done for now next imgonna work on bringing the themes to the physical tft too

• first went through the codebase again and cleaned things up properly. reorganized the files and folders to make the project structure cleaner and easier to work with, used ai to help with the refactoring

• then i started working on the appearance section and i wanted adeck to have its own theme picker so i built the section and its window layout first keeping it consistent with the existing web app theme

• for the appearance themes, i took inspiration from hackatime’s website and picked 4 colour palettes that felt different from each other. added them one by one along with the theme selection ui

• after adding the appearance section, a few things started acting weird in dark and light mode, so i went through and fixed those bugs to make sure the existing modes still work properly

• also made some small tweaks to the space theme on the tft like making the stars smaller on bright backgrounds and slowing down their movement

i checked the assembly again and noticed a few things were still not fitting properly and the tft display was slightly misaligned and the type c port cutout was also a bit off. the overall fitting wasnt as good as i wanted

• so i spent around 30 mins fixing these small things. adjusted the display cutout, aligned the type c port and made some changes to the tolerances so everything fits better now

• ive also replaced the old step files in the repo with the updated version. i em pretty much sure that everything fits properly when i get to test it physically

worked on the tft rotation feature

• added 4 rotation modes like monitor orientation and connected the web app controls to the physical tft
• fixed the layout issues at 180 and 270 degrees so the icons and labels align properly
• fixed the web preview so it actually rotates with the selected orientation instead of looking the same and moved the rotate button below the background colour section to keep the ui clean

i was gonna work on the remaining 3 themes next but felt like this feature was more imp rn so worked on it first

• changed the key colours to custom background colours instead of separate box colours so the app icons blend in better. now the key bg automatically picks the dominant colour of the selected app icon, like orange for brave, so the colours actually match the apps

• added the first theme called space with a dark bg and floating stars

• tweaked the star animations to make them smoother and more natural, fixed stars getting stuck together and slightly increased their count

• cleaned up the theme preview by removing unnecessary labels and fixing the heading sizes. still got 3 more themes to build, will update them as i work on them

resized tft display app icons , themes and codecleanup

• made the icons on the physical tft a bit bigger so they’re easier to recognize and use at a glance. they might look a lil pixelated up close bczz of the display resolution, but the goal was to make them more usable

• cleaned up the code in a few places and removing unnecessary comments and organizing things that had become a bit messy while developing

• also added the theme selection and save ui to the web app with 4 preset themes planned for now. the idea is that whichever theme you select should also show up on the physical display. the web side is done, but the actual theme implementation is still in progress. starting with a nothing-inspired black and white theme, while the other themes are still being planned

• and i have also added a subtle, minimal animation on click, so it feels more responsive and gives you that little visual feedback that the click actually registered. Looks pretty good tbh

the installed app picker is now connected with the physical tft display so when an app is selected, its windows icon can be used on that specific adeck key and the icon data is now going through the web app, python backend and arduino firmware instead of being only part of the web side so the actual logo can be rendered on the display

• added the icon data flow from the selected app config to the backend and then to the arduino, converted the windows icons into a tft compatible format and added the firmware side code to receive and draw the icon on the correct key

• tested the icon rendering with different installed apps and checked that each icon stays with its selected key while normal commands like git and npm still use the normal command flow

still need to polish the app part so the logos look better and text below them fits properly and the box colors and backgrounds look cleaner on the display

added automatic installed app detection to the adeck app which makes setting up app shortcuts much easier now since adeck can find installed apps from the pc and most of the setup happens automatically

• before this i had to find and paste exe paths manually, so i added an installed apps list to make this easier

• i kept installed apps separate from normal commands like git and npm so both dont get mixed together and the app list was getting pretty long, so i also added search to quickly find the app i want

after getting it working i tested it with different apps and also checked normal commands to make sure both still work properly
now when i select an app, its name and launch path are added to the selected key automatically

now i can install ADeck from the browser and use it more like a normal desktop app instead of opening the project files manually every time bczz i made adeck into an actual installable web app instead of having to open the html files manually every time

• added the web app manifest so ADeck can be installed like a normal app
• added the adeck app icons in different sizes including the maskable one
• added the service worker for the installed web app and connected the new setup with the existing adeck web interface without changing the main layout
• tested the installed version and checked that it opens as its own app instead of just another browser tab and also checked the existing profiles, settings and hardware preview after installing it so the old stuff still works

cut minimise and open
added and fixed the app relaunch option in settings, Now we can choose what happens when the same app is pressed again, either open another window, minimize or restore the same app, or close it

I also made sure this only applies to app opening commands. Things like git commands and other normal commands still work the same way

Tested all three options and the app now behaves correctly based on the selected setting

worked on the local backend

this update was mainly about taking the web app i made earlier and actually connecting it with the ADeck board and my pc. the web part was already getting pretty complete with profiles, slots, themes and local storage so now i started working on the python side and making the whole thing actually work with the board

• made the main deck.py file for the local python backend

• connected the web app with the uno r4 wifi through the serial connection and added auto detection for the board and its COM port so i dont have to keep changing the port manually

• added the firmware install part using Arduino CLI so the board can be setup from the project itself

• added the ping pong check so the backend can make sure the correct adeck firmware is actually responding

• added saving of the profiles and button settings on the pc so the data stays there even after restarting

• connected the save button with the real TFT so changing a label or color in the web app also changes it on the physical adeck

• added command support so now a button on the adeck can run things on my pc and tested this with vs code, Notepad, Calculator and Paint, also i had a small problem where the apps were opening in the background instead of coming in front. had to change the windows command launching part in deck.py and test it again with different apps

• made adeck_control.py for controlling the backend from the terminal and added the small ADeck-Control.bat menu where i can use options like 1 start, **2 **check system, 3 install or repair, 4 firmware, 5 logs, 6 stop, 7 errors and 8 status

• fixed the problem where starting adeck again while it was already running was causing another backend to start and show an error

• changed the setup so it checks if ADeck is already healthy and reuses it instead of starting another one and added the Setup ADeck.bat and Start ADeck.bat files so setup and normal starting can be done without typing all the python commands every time

• added test_reliability.py and used it to check the main startup and recovery cases

• tested stopping and starting the backend again and also tested removing and reconnecting the board and added .gitignore so things like .venv, .build and other generated files dont get pushed to github

there were quite a few small problems while connecting everything together but now the web app, python backend, pc commands and the physical adeck are all working together. the next part will be more testing and adding more things on top of this

sorry for those irritating lines on the TFT display🥀🥲

i guess some moisture messed it up a bit and thats why those lines showed up

i mostly worked on fixing those small things which were making ADeck feel more like a website than an actual app

• replaced the normal browser popups with custom ones for creating renaming and deleting profiles. now everything opens inside the adeck ui itself and matches the rest of the design much better and also fixed a small annoying thing where clicking anywhere outside the popup was closing it even if i was typing something. now it only closes when i actually press cancel or complete the action

• worked more on the profile system and duplicate profile stuff. also fixed the alerts bczz before if multiple actions happened the alerts could stack on each other. now only one alert stays there and when a new one comes the old one goes away first with a small simple animation

• dark mode needed some work too bczz light mode was looking pretty good but some parts in dark mode were feeling kinda weird and uncomfortable. fixed the contrast in those areas and also removed a lot of unnecessary yellow accent lines. now they are only used in places where they actually need to be

• changed Day and Night to Light and Dark and made the theme change a little smoother instead of instantly switching like befor

• cleaned up the color section too. there was an extra dropdown showing the same colors again which was honestly looking useless so removed that and kept the cleaner color list. also added a custom color picker so now im not limited to only the few preset colors

• also changed the display label from the old short 2.4 inch TFT text to the proper 2.4-inch TFT LCD Display ILI9341 name so it matches the actual hardware properly now

finished the 3D printable body for Spaceshoot and honestly this part took more time than i expected most of the work was not even drawing shapes, it was measuring everything properly and making sure the display actually fits inside the case without weird gaps and since i only know basic cad i built the whole thing directly from scratch instead of using a ready model and slowly kept fixing the dimensions until it started looking right

• measured the TFT shield using a vernier caliper and scale so the body matches the real hardware instead of guessing the dimensions and then built the whole front frame around the display and adjusted the screen opening until the bezels looked even from all sides

• spent a good amount of time figuring out the locking system bczz i wanted the display to stay secure without making the case hard to assemble and also i added a proper wall thickness cutouts and fitting space so the body is actually ready for 3d printing instead of being just a cad mode

now i just have to wait for the print to arrive and as soon as i get the body in my hands i will definitely post another update with the final fit and assemble😊😊

it was just a blank dashed wireframe box before but now i mapped out the colored 6-slot hardware grid in the dom to match the physical deck. major update this time is local storage logic bczz losing data on every refresh was getting anoying. getting the dom elements to talk to each other and sync state purely in vanilla js is coming together

• interactive 6-slot grid: swapped the empty black TFT placeholder with an actual css grid of 6 keys. whatever u set in the editor like colors (slate or signal) and labels instantly renders here

• dynamic slot editor: hooked up basic click events so if u tap a button like slot 03 it gets an active class. the right inspector panel dynamically updates to show u are editing that specific key’s command and hex code

• wrote basic data persistence using localStorage.setItem and JSON.stringify(). so when u hit + to add a profile or edit a key it pushes to the state array and saves it locally

• added top nav & status bar, actual pages for Settings and About. the topbar nw has a working day/night toggle and a live clock ticking via setInterval. bottom status bar finally tracks the active profile and save status instead of being static text

• added a raw css variable based theme switcher. hooked up the day/night button in the topbar to flip the data-theme attribute on the body so it switches between light and dark modes instantly

still got work left to do on the python bridge side but the web config layout is getting there tbh.

finally started making the ui feel like an actual tool instead of just a basic prototype

• added the top menu with Dashboard Profiles Settings and About and changed the hardware preview from the old empty box to a proper 6 slot layout

• added the right side editor where i can edit the selected slot and also added profile search and buttons for rename duplicate export import and delete

• added the bottom status bar to show save status profile and other basic info and the day mode and device status part in the top

but yeaahh, still have few things left to do

before it was just a blank dashed wireframe box but now i actually mapped out the 6-slot hardware grid in the dom to match the physical deck

• the major update this time is the local storage logic bczz losing data n every refresh was getting annoying. wrote simple loadState() and saveState() functions using localStorage.setItem and JSON.stringify(), so now when u hit the +new profile button it actually pushes to the state array and saves it permanetly and also added the third panel on the right for the action editor. hoked up basic click events so if u tap a button like slot 05 it gets an active class and the right panel dynamically updates to show u are editing that specific slot. getting the dom elements to talk to each other and sync state purely in vanilla js is actually working out perfectly

so moving away from the hardware headache for a bit and starting the actual web app configurator for Adeck decided to keep it completely vanilla with just html css and js instead of bloating it with react or anything heavy. first goal was just getting the basic ui skeleton ready so it doesn’t look like a blank screen

• built the main dashboard using a standard css grid layout to divide it into zone-a for the profiles list and zone-b for the hardware preview
• set up basic css variables for the themes and threw in the doto font which is heavily Nothing inspired so the whole interface feels raw and industrial right from the start
• wrote the initial js boilerplate with a simple state object tracking things like activeProfileId and activeSlotIndex and hooked up some basic dom refs using document.getElementById() just to make sure the base is solid

btw right now this is just a super basic placeholder layout… still got a ton of work left to do on this page

i noticed a really annoying ui glitch on the game over screen, basically when your high score goes above 3 digits the text was just overlapping and looking completely messy jumped into Spaceshoot.ino and fixed it real quick. just threw in a simple if (hiScore >= 1000) check. so now if your score hits 4 digits or more, it triggers gfx->setCursor(15, 195) to drop the actual number down below so the HIGHEST SCORE label stays perfectly clean on top. anything 3 digits or less just runs through the else block and prints normally on the same line like it used to.

so i thought my last update was gonna be the final one and i was just gonna leave this project as it is🤡 but after looking at it again i felt like it can still be made much better and i also have some more plans for it

so yeah im continuing Spaceshoot there are still some things i wanna try and improve so now im just taking it one update at a time and making it feel more complete i started with the space background because the old stars were looking kinda boring and sometimes they were getting drawn over the player too

fixed that and then added 3 different types of stars

• the first one is just a tiny normal star which stays mostly simple in the background using a basic gfx->drawPixel() call. the second one is a bit bigger and has a small blinking and glowing effect using a millis() based phase timer so the pixels change for a short time and it don’t look like every star is just a fixed pixel. the third one is a shooting star or falling star which moves diagonally (starX += 2 and starY += 4 every frame) with a small custom drawn trail behind it, so it gives that quick falling star effect and makes the background feel way more natural

• also added some spacing logic for the glowing stars using a glowStarTooClose() math function that calculates squared distance against a GLOW_STAR_MIN_DIST of 48 pixels so they dont randomly spawn too close together

i still have some plans left for this so yeah…🙃

so i thought the hardware phase was over but my old tft screen randomly died😭, got a replacement that looked exactly identical but obviously the touch refused to work and it turns out these cheap screens have different internal wiring depending on the batch

• wrote a raw diagnostic script to test and figured out the pins were totally different. had to swap xp and ym to digital pins 8 and 9 and route xm and yp to analog a2 and a3 just to wake it uponce it was finally alive it started reading garbage noise with the z axis pressure hitting crazy numbers like negative 13681 out of nowhere added strict minpressure 5 and maxpressure 3500 limits in the c++ code to filter out all the fake ghost inputsthen realized the manufacturer slapped the touch digitizer upside down lol

• tapping top left was registering at the bottom right instead of messing with wires i just inverted the coordinates in the arduino map function and changed the y axis map to flip 320 to 0 through softwareright at the end when testing python threw a permission error 13 access denied on com5. took a sec to realize the arduino serial monitor was still open in the background and locking the port. wiped out all those annoying hardcoded magic numbers and threw in proper define macros for screen size, lane boundaries, and touch limits. also killed off duplicate render functions and moved repetitive logic like asteroid spawning into neat little helper functions so making changes later wont feel like painbtw i wanna apologize for this mess coz as u guys can probably see even this new display has started showing random lines on it already hardware is just pain sometimesbut

so even with those lines on the screen🥲 the game still works fine just like you saw in the previous devlogs also uploaded a fresh demo video on youtube so you can check out the actual gameplay there

thought the hardware phase was over but my old TFT screen died 🤡 so i had to order a replacement. it looked exactly the same from outside but internally it behaved completely differently. because of that the whole project got delayed for a bit and i had to go back into hardware debugging again instead of continuing the software side

got a replacement that looked identical but touch refused to work. turns out these cheap screens have different internal wiring depending on the batch. wrote a diagnostic script and figured out the pins were different. had to swap XP and YM to digital pins 8 and 9 and route XM and YP to analog A2 and A3 to wake it up

once it was alive it started reading garbage noise with the Z axis pressure hitting crazy numbers like -13681. added strict MINPRESSURE 5 and MAXPRESSURE 3500 limits in the C++ code to filter out the fake inputs.then realized the manufacturer slapped the touch digitizer upside down. tapping top left opened the bottom right app. just inverted the coordinates in the Arduino map() function and flipped the Y axis completely through software.i have also pushed all the changes made for the new display in this commit

if you want to compare what changed after replacing the hardware you can check it here Commit

after recalibrating everything on the new display the hardware is finally back to the same stage as before. now the touch feels accurate again the bridge is stable and i can finally continue building the actual UI instead of fighting the hardware 😭