SyncStep
- 4 Devlogs
- 7 Total hours
helps people practice K-pop dance choreography by overlaying a skeleton on the video and comparing it to their movement using pose detection, eventually scoring how closely they match.
3h 34m 23s logged
Devlog #4:
Project Demos and Photos
Date: 8/01
Starting to get into the more technically difficult part of this so expect many bug fix parts in the future.
What’s New:
library.html:
- dance card layouts have dropdown member menus
- linked to practice.html to have member dance videos play
practice.html:
- can now play youtube videos in this page
Getting into the technical side:
- skeleton keypoints to have the overlay run over the youtube video skips to another person sometimes
- how it was fixed: refreshed code to get the skeleton files that worked within a certain zone of the dancer that was being tracked using AI as a tool to help catch bugs
Additional Logic:
(these are new parts that I realized needed to be added or are unnecessary)
- Start Recording button has to also turn on Youtube player at the right timestamp or developing code that will overlay the right section of music over the video
- speed buttons in practice.html are no longer necessary as the iframe already supports different speeds through its settings
1h 33m 12s logged
Devlog #3
Date: 7/30
Total time spent: 7hr 29m (using an already established file that had Firebase already attached that can’t currently be linked to this project) - hour log proof in photo folder linked
Completed as of this devlog:
admin.html: (page of the website made for me to upload dances to library)
- added input fields for song title, artist, section timestamps
- section timestamps includes start, end, and label of section
- member fields name, youtube video id for full body fancam as guide video, and mediapipe created keypoints files)
practice.html:
- start camera button actually uses and mirrors webcam footage
- added the space that score will go into
library.html:
- added and formatted dances on the page
- correctly sources all dance schema from firestore to display
- filter chips filter the dances by artist
- search bar to search dances
community.html:
- properly formatted each field
To-Do List:
admin.html:
- still have to add actual file input field for the keypoint files
- add logic to make add dance to library button actually upload to firebase storage and create a firestore document
practice.html:
- link results from clicking on dance in library.html to run in youtube player
- add the logic to load the loop option buttons
- add the logic to start actually recording with record session
- add a stop recording button
1h 46m 57s logged
Devlog #2
WIP post
what features I added today
index.html:
added introductory elements such as name, goal of the website and a button that links to library.html to later browse through dances that are added.
practice.html:
added the frames that the youtube video and webcam photo will be side to side as well as adding the buttons that will eventually control the webcam for starting and stopping the webcam feed as well as record. Additionally adding the speed and other control buttons
community.html:
adding the outline for creating posts
What is unfinished as of today (towards finishing the initial outline of the wireframes I’m starting with):
- library, bookmarks, and profile feature outline
- practice.html score box
- formatting of community.html
- uploading dance files to fill in library.html as well as other features that require photos
16m 40s logged
Establishing website basic file and navigation style
