Just like last week, I decided two write my blog today instead of at the end of Friday.
After a long week of tiny adjustments and debugging, we decided to turn our attention to something different for a change. Well, we didn’t really decide on it, but we drifted towards working on the “user friendliness” of the program simply because debugging was getting tedious. It turns out that making a program “user friendly” isn’t all that “programmer friendly.”
As I explained earlier, we are utilizing a nifty tool called “Lightbox” to fulfill our aim of bringing up a popup of instructions when the program is loaded by the user. Despite my lack of CSS knowledge, I did manage to successfully implement Lightbox into our program. But, my lack of CSS knowledge was not enough to overcome what we were about to encounter.
First off, when the instructions image popped up, the image fit on the screen, but it was too large for the sphere. We had to change the image size so that when loaded, the image would be smaller than the Sun (in the page). That was easily fixed. However, now the image was no longer where we wanted it. The image now appeared at the top of the page, which means that it would only partially appear on the top of the Sun. So all we have to do is shift the image a few centimeters down right? It sounds so simple, but it is frustratingly not simple.
The image is horizontally aligned in the middle, but it is not vertically aligned. I expected a few tweaks of the lightbox.css file would do the trick, but after an entire day of throwing “vertical-align: middle;” statements everywhere that I could, I began to lose hope.
When I get back to the lab, I’m going to take another shot at the issue. If all else fails, I might have some ideas for alternative approaches that don’t involve Lightbox (but that would be a shame because Lightbox is so pretty).