Activity

alaninnovates

I’m done reverse engineering the file format! At least, I’m done finding the data I need… there is still TONS of information in here where I don’t understand their purpose, but here’s the rundown:

  • First, image 1: Sets! In the 3da file, you’re going to find a list of all of the sets. You’ll first have to read “PTAB”, skip some spaces (‘20’) and skip some more. Then, you’ll be presented with a list of COUNTS and whether or not it is a SUBSET.
  • Next, image 2: Instruments! In the 3da file, there’s some text “CAST” and then some misc. 7 bytes afterwards. Then, I can start reading. Each instrument has its own index so that you can associate it later in each set. Then, it has a label, and finally it has a variable-sized name (ends with a 00 so we know where it ends)
  • Finally, image 3: this is just the sets but actually documented - I described the reverse engineering of this below.

I’ll be now writing a import script!

Attachment
Attachment
Attachment
0
alaninnovates

The next few devlogs are going to be me working on, perhaps, one of the most difficult parts of this app. Importing from Pyware. Just as an introduction, Pyware is a piece of software from the 1990s that is used for drill writing, and has been the leader in this industry for years. However, it’s file format is completely proprietary! These next few devlogs will be reverse-engineering one particular type of its file: the “3d app” file, used for exporting to their mobile viewer, which has all of the information that I need (hopefully!) to import to PocketBook.

I have reversed most of the way that the pyware coordinates are stored.
In the first image, you can see a binary file that contains coordinates from one performer. Here’s what I concluded from this:

  • blue = performer index (defined in instruments section)
  • cyan = case 00 00 -> side 2; case FF FF -> side 1
  • green = SIGNED INTEGER - units off from the 50
  • yellow = case 00 -> marcher is below the center; case FF FF -> above
  • orange = SIGNED INTEGER - units away from the center line
  • red = unknown
  • purple =
    • first bit = unknown
    • second bit = performer label (ie T, W, C, etc)

1 step = 625 pyware “units” as pyware rounds to a max of 1/16 steps aka 0.0625

This sounds really complicated, and it is! there is also still stuff that I don’t know. Regardless, I have been able to make a parser that gets this into a json format (image 2)

However, this isn’t how pyware provides the file - it actually gives a count-by-count breakdown of each performer’s location. One of these counts is shown in image 3. As you can see, all performers are bundled together. What I am still missing is what separates these different “counts” as well as any other metadata, as there are maybe 3-4 lines after each count that give more info

Additionally, I need to find ways to parse the field grid, the instrument list, and more… these will come in future devlogs!

Attachment
Attachment
Attachment
1

Comments

tathya is aweomse

i would pass out if i had to spend more than 5 minutes looking at plain hex

alaninnovates

Alright, so, this is a relatively short project for me, I just really want to get something out there to introduce myself to the world. The website is really scrappy but has all of the information that I want to ultimately include. It needs a ton of styling changes, and I’m practicing doing this fully in static html+css (no libraries) and without any ai.
Styling will definitely improve in future devlogs! However, this one’s here just to get all the information out to the world. Welcome to my site!

As I’m typing this I realize the “!” looks like an “I” and my name looks like “ALANI” - i’ll fix this in a later update.

Attachment
Attachment
Attachment
0
alaninnovates

Implemented membership management! This basically allows directors to approve/deny users from their ensemble and also promote people to admin.
The tab on the bottom bar displays dynamically, only when the user has admin in one or more ensembles. This was very challenging and was ultimately manually hardcoded in as expo js tabs didnt want to cooperate.

Attachment
0
alaninnovates

Check this out!!! There is a new play button on the side of the screen… and you can visualize how other people around you move! or you can just watch the drill and learn it that way, up to you 😉
The cool thing is, the way the app is implemented allowed this to be added very easily, so this only took a few minutes!

0
alaninnovates

Implemented a modal to select the set you want to jump to! Super useful for when your director suddenly says “we’re setting up at the end of the show” after your water break and you don’t want to spam the arrow button 50 times.

Attachment
0
alaninnovates

I have finally implemented plus/mins sets! This is super useful in marching, as it shows you exactly where you are headed towards. Basically, you need this information to understand what direction you are going to step off in.
Something else that shows is a “midset”, which is basically the center of this pathway. This is useful so you can “check yourself” on the halfway count and see how far off you are, adjusting to compensate.

Attachment
Attachment
0
alaninnovates

You can now select your instrument! When you first open a show, you’re prompted to select your instrument. Once you do so, it is stored into the phone’s storage (w/ AsyncStorage) and you never have to select it again! (unless you want to, of course)

0
alaninnovates

All shows and ensemble data are now cached locally on your device! This allows you to take PocketBook completely offline, which is pretty common in school football fields (bad wifi, anyone?). Anyway, about halfway through the video below, youll see me disconnect from wifi, and the app will still work! (albeit with limited functionality)

0
alaninnovates

A few notable things this update! You can now move around sets using the left/right arrow. Also, the top bar displays a few things:

  • Your current set and movement
  • Your step size to reach the next dot
  • Your midset to reach the next dot
  • The coordiantes of your current dot
    These are all necessary to achieve clean drill, and are things that you can reference when marching. The midset implementation probably took the longest as it involved converting from coordinates back into text.
0
alaninnovates

Pretty proud of what i got here now - all performers are now drawn onto the field! and now you can start to see the pretty pictures :)
Also, this is fully integrated with the database!! So I can now upload any shows I want and visualize them!
Note that this is drill from my school’s show last year.

Attachment
Attachment
Attachment
0
alaninnovates

Alright, so, the yard numbers are in! This took an insane amount of time. The reason for this is that in a drill viewing app, it is SUPER IMPORTANT that all of the measurements are correct! And guess whose measurements didn’t want to be correct… 😭
Regardless, the yard numbers are accurate up to the INCH/STEP! 10’ wide, 6’ high. 11.2 steps behind the front side line. This took so much longer than I expected.

Attachment
Attachment
Attachment
0
alaninnovates

The tab bar doesn’t display when you’re in the viewer anymore! This was done sort of in a hacky way… hopefully I can find the correct way to do this eventually. Basically, I just conditionally pass “display: none” to the tabbar when the router matches a route.

0
alaninnovates

What we have ourselves here is a high school football field! It has everything except the yard numbers - that’s coming in another devlog soon. Basically, I made a canvas (using skia canvas) and implemented the ability to zoom/pan around it.

Also, the field is exact to a school football field, which is why this took so long. For reference, one step in marching band is 22.5 inches so that is why the units are “steps”

In a future update I’m going to hide the bottom navigation so the canvas has more space to fill the screen.

Attachment
0
alaninnovates

Ensemble switcher is complete!! This is pretty much just to allow you to more easily view your shows from different ensembles.
The reason why this took so long is because react-native-paper does not have a dropdown component!! So I had to copy a pr’d implementation, which was broken… and fixed it 🤦
At that point i probably could have just done it from scratch anyways
Well, anyway, enjoy the demo of the switcher:

Attachment
0
alaninnovates

You could call this some of the first “real” backend work in this project, I guess. Okay, so basically the profile is fully finished now with data from supabase, but that’s not the main thing.

The main thing is ENSEMBLE JOINING! You can now join ensembles by searching a name and entering a code, depending on if the admins enabled that or not. If not, you go into an “approval queue” and otherwise you get automatically approved!

Tbh im very shocked that i still know how to write sql, even though its a small query. Baby steps, I guess.

Attachment
Attachment
0
alaninnovates

The profile page is complete with placeholder data. This is the page that you will use to join/leave ensembles and also sign out/in. Eventually I’ll make a state for “pending approval” as well.

PS if you havent noticed i also fixed some theming issues with the background of the app - it’s not pitch black anymore!

Attachment
0
alaninnovates

Who knew authentication could be so hard? I finally got this working with supabase, and got both discord and google authentication in (by request of band members). The issue is, google did not want toa ccept my custom URL scheme as a valid redirect so it took me forever to implement it a different way (with a web browser and a library, that somehow offers a paid tier?). Anyway, here it is! everything works with supabase too :)

Attachment
Attachment
Attachment
0
alaninnovates

Added the shows view using temporary placeholder data. Also, fixed the theming of the footer - turns out I was using the wrong color constants earlier. Now, the views work on both light and dark mode!

Attachment
Attachment
0
alaninnovates

Initial setup is always difficult. Especially when you’re dealing with React Native. Anyways, PocketBook is now set up with Material UI! The hardest part about this was getting the bottom bar to work, which I referenced from several sources¹².

Anyway, the app is now ready to start getting features! Next update: the show list.

¹ https://github.com/callstack/react-native-paper/issues/4346
² https://github.com/callstack/react-native-paper/issues/4496#issuecomment-2574286099

0