Continuing from yesterday, I added illustrations drawn with Photoshop to the poster and ran it by Prof. Medero, who suggested some small changes. After adding some finishing touches to the poster, I continued updating documentation and making sure all my files are readily accessible for future use.
Yesterday, I worked a bit on the Python data analysis program so that I can leave it at a place where the basic building blocks are all there.I also fixed some issues with GitHub uploading with Prof. Medero and Michael and updated the documentation accordingly.
Today I started making the poster I was working on planning out for a portion of yesterday. Below is where it’s currently at. I’m planning to add a few illustrations demonstrating how the app works in the white space at the top right. Hope that it’ll be ready for printing tomorrow after some final touches.
Last Friday and today were spent troubleshooting the weird visual bugs and nil errors that appeared in TestViewController after I transferred the working code from TutorialViewController over. After rearranging the code (and dearranging the code if I made things worse) I fixed the nil exception errors, but then found out that GPUImage can’t handle images larger than 2048×2048 at the moment, and the sample texts in the main experiment have a width of around ~34,000. For the time being, the blur filter stops working for these text samples, and I’m currently searching for a fix. I’ve tried reimplementing other 3rd party extensions I’ve found, but none of them worked, and uninstalling/reinstalling frameworks was quite a headache.
Goals for the end of this week are:
- Make a poster
- Leave TextScroll and documentation in a place where a new researcher can continue
- Get basic data analysis working so that new researchers can easily build on that
- Added a tutorial for the constant acceleration tilt mapping and troubleshooted visual/transition bugs as I was adding these new things in.
- Updated the TestViewController to the new blur filter program. Still a couple visual bugs, such as the blurred text not aligning/ not appearing at all despite me being pretty sure that the code is identical to the working version in TutorialViewController.
- Updated Remote Config with the new stuff
- Got my Python program automatically fetching the .json file from Firebase.
Tomorrow I hope to fix those two bugs and continue working on the data analysis code.
Figured it out! The current layout is two scrollviews stacked on each other: the one on top that holds the moving sharp text is masked to look transparent on the left/right so you can see the blurred text moving on the scrollview underneath. This nice effect is achieved with much fewer lines of code than I expected. It took a while to properly synchronize these two scrollviews with autolayout and everything in the code that interacts with the text, movement, etc.. I also implemented a new “characters visible on screen” feature, where you can set the size of the viewing window (the sharp, dark text in the center) by specifying how many characters you would like to have the user see at a time. It’s not super precise, but works well so far. I also had to adjust the calculation for the text’s travel distance since the size of the blur filter changes dynamically now. At the moment, this new look runs smoothly, the blurred/clear texts are synchronized, and blur amount, font, font size, and characters visible on screen are all easily adjustable.
- Update the documentation
- Implement this update in the TestViewController
- Add “characters visible on screen” setting to Remote Config
Closer to getting the ideal look for the blur filter. The layer issue I had yesterday was resolved – the app was layering as I wanted, but the dark text (original text/ “sharp” text) is so dark and the blurred text is semitransparent, so it looked like the dark text was over the blurred text when it actually wasn’t. However, because of this I will need to create transparency masks for both dark and blurred texts. After lots of experimentation, the most straightforward method I found was to layer a white-transparent gradient rectangle over the text in order to cover the areas I didn’t want appearing on the screen. For example, if I only want the dark text to appear in the center of the screen, I create a rectangle that’s transparent in the center and white on the edges. Here’s the layer order I have at the moment:
_ = white
_____ ……….. _____
blur blur text
The problem with this is that the left/right side of the top rectangle covers everything underneath it, so you can’t see the blurred text at all. Unsure how to fix this until I find an alternate way of hiding areas of the text.
Today I had another go at blurring. It turns out GPUImage was properly installed, but I was trying to use objects in GPUImage 2 when I had installed GPUImage 1. I also implemented a gradient mask over the text so the blur gradually fades in/ fades out, which looks better aesthetically than the previous sharp borders between super blurry and crystal clear. GPUImage does blur very fast, but getting layers in the right order in the scroll view hasn’t been resolved yet. That should be the last step before blurring is exactly where we want it, though.