A summary of the last week…

I’ve had the project for over a week now, and I’d like to think I’m getting the hang of it. I’ve been working on it for at least an hour every day, more often than not, more (a pace I probably won’t be able to uphold later in the semester when things get crazy) and I’m not really sure if the progress I’ve made his enough. It’s nerve wracking dealing with something this big because it’s really difficult to estimate how long it will take me to figure out each part. This week, I scrapped the python edge detection I wrote since it was incompatible with the HTML (I probably should have done this sooner since I wasted multiple hours trying to get it to work) and started working with Java Script. Early on, I had an error where I couldn’t get my script to recognize a HTML canvas, and Dr. McVey sent me some code to get me started that just printed the images to the screen using HTML. I used this as a starting point, though I realized after about a day that I would need to go back to using a canvas since the function I was using in javascript to turn my image into a matrix could only be used on canvases. For some reason, the second time, it worked. I think it was calling the javascript on the button click that was giving the page enough time to load for the canvas to be found.

I was excited when I got through all the edge detection code and debugged it until there were no more errors, but the program still wasn’t doing what I wanted to. When I ran it, the end result of the edge detection (Sobel’s) was a black canvas. I realized that the photo wasn’t correctly being passed into the javascript and spent a while fixing that (I needed to initialize my picture variable like this: var pic = new Image()). After this, I was hopeful it would work, but it didn’t. This was frustrating because I didn’t have any errors, so I put in multiple document.writes to find where the code was leaking and discovered it wasn’t converting my picture to a matrix like the function was supposed to. By this time, there was an error on that line that, after researching, I discovered meant that I was unable to alter my picture because it was coming directly from a folder on my laptop.

I am not trying to set up the photo upload to hopefully fix this issue, because it will then be grabbing the picture from the upload path and not directly from my computer. Had problems at first because the simple file upload HTML code wasn’t working, but I found out that was just an issue on Chrome (probably popup blocker) and it worked on safari.

This code from Github was incredibly helpful to me for the Sobel edge detection code. I had to change quite a bit of it, but I wouldn’t have even known where to start without it: https://github.com/miguelmota/sobel