The Pictorial Angularizer mk. 3000

See all the images

Comment

Inspiration

I've been getting into homographies (warping images to change camera views) in my robotics class so I built a project to solidify my knowledge about it.

What it does

  1. upload an image
  2. map points from the original image to what view you want to see
  3. profit

How I built it

I used Vue.js to handle client-side interactivity and rendering along with JQuery for AJAX goodness (for file upload). In addition to AJAX, I used websockets for real-time(ish) editing of the points warping. I wrote a small wrapper for HTML5 canvases that divided them into virtual sections, drew images and lines, and handled cleaning so that I could focus on learning and using Vue. My server ran Node.JS and uWebsockets, and ran a python script to warp and generate the images. Once an image is uploaded, an output image is generated (and further rewritten), and from there the browser is continuously made to reload it.

Challenges I ran into

I initially wanted to run 2 separate servers, one for hosting the web-app and doing the major work, and a small python service that would wait for images to warp. I wanted to do this to get more experience with IPC (specifically ZeroMQ), but I underestimated the amount of time it took me to get comfortable with vue - data binding is still a bit tricky with it for me.

Accomplishments that I'm proud of

I'm happy with my SectionedCanvas module. It's simple and a little bit messy, but it gets the job done. I've been trying to practice my design and scoping of a module, and I think it strikes a good balance between flexibility and effective-ness. I'm not sure if I'm ever going to use it again, but it taught me a few valuable lessons: I got it to resize not to the size of the entire browser window, like most examples on the web, but rather to its parent's size, and I also got it to resize effectively regardless of when it came to life with respect to Vue's DOM tampering.

What I learned

  1. I learned Vue. That was fun. Can't say I like it more than React or Angular (well, maybe Angular) but it gets a job done and it's relatively clean.
  2. I learned how to use Python for image manipulation (normally use MATLAB)

What's next for The Pictorial Angularizer mk. 3000

the shelf?

Built With

Share this project:

Updates