My First Hackathon

On December 3rd, I attended my first Hackathon. It was organized by BCIT and ran from 9:00 AM on January 3rd, to 2 pm on January 4th. We were put into randomly assigned groups of 5 students and given a theme to produce a solution for. The theme was "As a BCIT Student I want _____, so that ______". 

My teams solution was "As a BCIT Student I want a more useful and mobile ready MyBCIT homepage, so that I can access the site on my phone and have access to more useful information." 

The MyBCIT website is one of the 3 sites we use as students, but it's the main site we use to get our course schedules, pay our tuition, and email our professors, among many other tasks. Unfortunately, it's not mobile ready, the course schedule is about 4 links deep from the home page, the search doesn't work (it takes you to another search engine where you have to re-enter the search terms again), and the campus map isn't very useful. We sought to produce a vision of what this website could be. 

One of our goals was to integrate a useful course calendar onto the main page. We wanted it to show the current days schedule on mobile, and a week on any larger screen size. As we did not know how to link to the built-in calendar or student course data, we used Google Calendar to simulate what we envisioned. 

The second main goal was to integrate a campus map onto the Campus Life page. BCIT has a clunky but useful campus map here. We tried embed it using an iFrame, but the permissions on the page wouldn't allow us to, so we just put a placeholder pdf map. 

The final goal was to style the pages like the rest of the BCIT website (grey, blue, white, and black), and make it fit neatly on a mobile screen, which we accomplished. 

There were some areas of the original website that we didn't have the time or knowledge to rework (like the groups, email, and help sections), but we felt that our main goal was accomplished. The site even has a working login page (for a fake student). 

To build the site we used HTML, CSS, Bootstrap, PHP, and a bit of jQuery. We didn't face any major challenges, just a few hiccups like getting the login to work, and getting the calendar to resize depending on the screen size. In the end, we were happy with what we produced. 

Pong

So I built Pong! I wanted to make something in Java and settled on this classic game because it seemed just challenging enough. I've never made anything that uses Javafx like this so it was an interesting challenge. 

The hardest part was getting the ball to move. I had to teach myself how to use the animation features of javafx and even then it was a headache. 

Basically, I generate a black screen, 2 rectangular paddles, and a ball. 
Each paddle is stuck to it's side of the screen, and the paddle on the left (paddle 1), follows the y position of the mouse pointer. The other paddle line's its centre up with the y position of the ball using an animation. The general instruction is: "Paddle 2, you have x-amount of time to move your centre to line up with the y coordinate of the ball." I found using animation controls for the paddle to make it move much more smoothly than just translating it. I also implemented limits of motion so the paddles can't go off the edges of the screen. 

The ball starts off in the centre and moves away from the side that last scored a point. Movement in the x-direction is done using another animation command that essentially says: "Ball, you have x-amount of time to translate in X to the rightmost (or leftmost) side of the screen." The x-amount of time controls the speed of the ball, and the direction is controlled using a switch statement that checks for a positive, zero, or negative integer.

Once the ball starts moving, a "motion-in-x" listener keeps track of where it is and if it's reached one side or the other. If it does, it runs another command to either reset the ball(if a point was scored) or bounce it back (if it hits a paddle). 

When I tried to implement the same logic for the top and bottom of the screen (making the ball bounce off those sides), I got nothing but glitches. What I believe was happening was I was trying to give the ball another "animate" command while one was already in progress. The result was a conniption. In the end, I opted for a much simpler "adjust y position" command that directs the ball up or down depending on what it hit. 

Finally, I implemented a way of keeping score, and topped it all off with system beep noises every time the ball hits a paddle. 

The files are available for download here:
Github - Pong 

Weather Webpage

I wanted practice making a functional website, so I opted for a simple weather one. I'm sure there are many better one's out there, but I haven't made one yet. 

I wanted it to:

- Allow the user to search for a city,
- Display the temperature, conditions, and windspeed,
- Update the background to a related image, and
- Automatically detect the users location if the user wants.

My first idea was to build a javascript program that would pull weather data from somewhere like The Weather Network, or Yahoo. About 5 minutes into my search for how to do that it occurred to me that I do not need to reinvent the wheel; someone's GOT to have a script that already does this. That someone was James Fleeting. He made a great little Javascript Plugin called SimpleWeather.js . This script would get all the weather information I needed (and more!) and accept City, state, country, zip, and latitude and longitude as queries. 

It took me a bit to understand how to get it to work, not because it was a difficult script, but because I'm still quite new to this, but I got it up and running. The hardest part was figuring out how to get it to accept a variable as a location so I could hook it to my input field and button. 

With the weather updating correctly, the next thing to do was to find out how to change the background image. I knew I needed to pull images from an image hosting site, but I didn't know how. I first thought to find out how to send search terms to Google Images and retrieve the first image result, but that proved to be more difficult than I thought. It doesn't seem like a simple bit of script for that exists, for free anyway. A bit of digging on the goldmine that is Stack Overflow and I found a script that would take in a keyword and return a random image from a small, free, publicly available feed from Flickr. The pictures aren't great (it'll sometimes return a random image of a bunch of people when I'd really like a photo of a city), but it's free and it works. I added that in, then faced my next problem: getting the city and region out of the SimpleWeather script and into the Flickr script. 

The nice thing about the SimpleWeather script is it'll take a location in a variety of forms, then determine the corresponding city and region, so I didn't have to find a way to convert the users search terms to something Flickr-searchable, but I had a devil of a time figuring out how to properly hook the two scripts together. I did eventually figure it out though, and got the image changing. The only problem was the image was tiled. MORE tweaking later, and I got it to be full size. 

Finally, I updated James's script to his newer version that can request the user's location (if their browser supports it). 

Unfortunately the location detection doesn't seem to work on this host, but everything else does, and if you copy the script below to your own computer and give it a try, it should work for you too. Be sure to download the SimpleWeather.js  package from the website before running it though!

Code available here.

Tic Tac Toe (Python)

I've been working on Python and wanted to challenge myself. I had wanted to make a Tic Tac Toe game for a while, so I decided to give it a try.


The first thing I had to figure out were the rules of Tic Tac Toe as a computer would need to understand them. Here's what I came up with, in no particular order:


1) X's go first, then O's, then X's again, and so on until someone wins or the game ties.

2) If you go first, take the middle spot.

3) Try to get 3 of your symbol in a row.

4) Prevent your opponent from getting 3 of their symbols in a row.

5) You cannot place a symbol on an already occupied space.

6) The maximum amount of moves in a game is 9: 5 X's, 4 O's.

7) If you get 3 of your symbol in a row, the game is over and you've won.

8) If your opponent gets 3 symbols in a row, the game is over and your opponent has won.

9) If neither you nor your opponent get 3 symbols in a row, the game over and tied.


Then next thing I had to figure out was a way for the computer to keep track of what symbols were where, and which spaces were free. To do this, I assigned a letter to each spot on the grid:


A | B | C

----------

D | E | F

----------

G | H | I


To keep track of the game-play, I used arrays: one for the overall game-play, one for the computers moves, and one for the humans moves. So one game might look like this: [E,A,B,C,D,F,H] with X taking [E,B,D,H] and O taking [A,C,F] for a win for X.


To check for a win, I determined which combinations of taken places resulted in a win (there's 8 combinations). Then I had the computer check each players arrays against those arrays after every turn. If a player had any combination of spaces used by a winning combination, the game would end.


Now, it was easy enough to have the computer just play random spots (if they weren't taken), but a human player doesn't do that, they strategize. Unfortunately, I had no idea how to make the computer observe the field and determine (using algorithms) the best move to make. What I did know, was that it could carry out preprogrammed moves. So my first thought was to program every possible game of Tic Tac Toe and have the computer determine which moves have already been made, compare that to the database, then make a move. It turns out there are 255168 (not including symmetries) games of Tic Tac Toe that can be played. So that idea was out. Then I thought, "why not make it learn from it's victories?" So I did. When the computer won or tied, it would save the gameplay, and refer to it at each stage of subsequent games. In summary, the computer's thought process would be:


1) Is there a winning move I can make right now? if so, make it. If not:

2) Is there a move I can make right now that will prevent the human from winning afterward? If so, make it. If not:

3) Do the current pieces in this game match a game I've won before? If so, what was the next move I made at that time? Make it. If not:

4) Do the current pieces in this game match a game I've tied before? If so, what was the next move i made at that time? Make it. If not:

5) Make a random move.


Then I programmed in the niceties: placing X's and O's, updating the playing field, saving the game-plays, and so on. The last thing I did was give the user the option of playing X's or O's. Now I'm a bit embarrassed, but my solution to this broke a fundamental rule of programming: Don't Repeat Yourself. Although I repeated myself all over the place, the quickest and easiest solution was to duplicate the entire game with the symbols swapped, then give the player the choice of which game to start. It's not a perfect program, but I accomplished what I set out to do which is the first step of any bit of code.

WeightLifts: Editing is fixed!

Fixed the issue with editing: update 2.1.0.4 is ready for download and contains the fix. Sorry for the trouble! 

Weightlifts: Editing is broken!!

Warning! I just found a glitch: editing an entry in a workout will cause your historical data to get overwritten! Avoid using the edit function until I fix it!

WeightLifts Coming Update 2.1.0.2

I just finished working on the next updates for WeightLifts and will release it after about a week of testing (so around April 7th to 9th). See how I went from 2.0.0.0 to 2.1.0.2? In my testing so far I've not seen any issues going from 2.0.0.0 to 2.1.0.2 (I finally sorted out the issue of it erasing all the data when making changes to the memory structure, so future updates shouldn't do that either)

Update 2.1.0.2 will have the following changes:

- The "goals" section has been replaced with a nice looking line chart instead. 
- Bug fix: Exercise Info now updates immediately after changes have been made. 
- The photo on the Exercise Info screen can be swiped to view a small line chart of the exercise history. 
- Added the ability to reorder exercises within a workout
- Added the ability to rename and reorder workouts in the workouts screen. 
- Added a bunch of new exercises to the default roster which will be installed automatically with this update. EXISTING DATA WILL NOT BE OVERWRITTEN. If you already have an exercise with the exact same name as one of the ones being added, you won't notice any change.