Ship
- I made the Overlay Popup
- Made it semi transparent
- added pause, skip, prev buttons
- styled it to look a lot better
- added fades
- added to system tray
- added icon.ico for tray
I also uploaded everything to github and made the readme
Goal
Build a desktop app to show what music is playing and detect its genre in real time, in a clean overlay-style UI.
Setup
- Created a WPF app using .NET
- Confirmed blank window worked
UI
- Added basic dark UI in XAML
- Showed song title, artist, and genre
- Started with fake test data
Song Detection
- Used Windows media session API
- App now detects Spotify, YouTube, etc.
- Updates when song changes
Genre System
- Integrated Last.fm API
- Fetches genre from artist name
- Returns “Unknown” if no data
Current State
Working MVP:
- Live song detection
- Artist + title display
- Genre lookup working
- Auto-updates on song change
To Do
- Overlay popup UI (FluentFlyouts style)
- Album art(maybe)
- Skip, back, pause buttons
- Caching + performance improvements
Ship
- Made checklist page
- similar as edit page
- download json and upload to website root to save globally
- Made mobile Friendly
- Made github
- made editor have journal/bom buttons
- edit links
- edit status
- dashboard display from json
- projects page displays from json
- filled info for blueprint/flavortown in .json
To Do
- Make checklist page
- Add Database(mightnt do, downloading and uploading the json fill would be easier)
- Make Github Page!!!
- uploaded boms and journals for blueprint/flavortown
- Worked on Upload/Edit Page
Current Features
- Edit Projects on right panel and hit save.
- download the json and replace with current one to save changes outside of local
- 4 items in the center are editable
- Add Programs/Projects buttons (Save Locally ATM)
To Do
- Add image upload/change
- change local storage to database(last thing)
- make projects in projects and dashboard pages load from projects.json instead of static
- make checklist page
- Add rest of info for blueprint/flavortown in .json
Completed
- Made Header
- Cleaner Dashboard
- Cleaner Projects Page
- Collapse button for each section
- Filter between project status and cost
- stats display at top of dashboard
- Fixed journal/bom box sizes
- made links next to eachother at the bottom
- Changed Global font to inter
- Changed color scheme to match and look nicer
To Do
- links for hackatime/lapse
- upload boms/journals for blueprint and flavortown
- make upload/edit section
- make checklist page
I added a view BOM using a similar system but i ran in to some bugs of course, like the BOM not showing at all, styles not working.
At first i was gonna type all the BOMs in as tables one by one but i remembered you can export your BOMs or just use the ones that would of been put in the GitHub.
Once everything was looking nice and how i wanted it i did the slower part and copied and pasted it for each and every project and filled in their info.
I filled in everything except for the pricing and times on the blueprint and flavortown projects. Additionally i have to upload the BOMs and journals for those projects as well.
To Do List:
- Upload BOMs, Journals, Time, and Prices to Blueprint and Flavortown Projects
- Possibly make a “frontend” upload control so if others want to use this they can easy add in their own projects into their own copy of the site
- Possibly Filter option for completed and in progress projects
- Links section, for lapse or hackatime
- Cleaner Dashboard, collapse button for projects*(each program its own button)*
- Stats in the dashboard
- header to move between hackclub.html and index.html
Made the project list, and added a Status bar, links to github and hackclub sites, when you click on the project itself it takes you to its own page.
I made the stasis page but only with the stopwatch on it so far.
its the same setup but i added a total time, cost and the journals.
For the journals i used zero-md.
Heres the code for that if you wanna use it yourself:
<head>
script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
</head>
<body>
<div class="journal">
<details>
<summary>View Journal</summary>
<zero-md src="journals/Desktop-Stopwatch-JOURNAL.md">
<template data-append>
<style>
img {
max-width: 20% !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 10px 0 !important;
}
</style>
</template>
</zero-md>
</details>
</div>
</body>
