Thursday, April 13, 2017

2 recent projects

Two little projects I've worked on lately....

One was my company's April Fool's riff. The idea was a continuation of a finding a car is a bit like romance theme (as best exemplified by last year's Tinder-parody VINder where you could swipe to find the car you'd love.) This year, the idea was a messenger-like chat program to talk directly with the auto - or rather, allowing cars to find the driver they'd love.

I came up with an early rough UI prototype you can play with here- it had a few interesting bits - I think I did a good job with the "hopping dots" as a pure CSS animation. The window scrolling is pretty smart too... I realized that the "other person is talking" always has to occur beneath everything that has happened. Also I used the trick outlined here to embed a horn sound directly into the page, without needing an external file. We ended up not going with that, but it's a clever idea to know about.

The other project I started in a bout of insomnia, caused in part by wondering if am my girlfriend's and my stuff would fit in the new medium-small apartment we're moving in to together.

I found a few so-so apps for iPad, for sketching out the apartment layout and then putting furniture in. The most attractive was one called Tiny Furniture - it had a great look, was fun to use and was even easy to sketch out walls, but had some fatal flaws, in that "pinch to resize" was always enabled, so you couldn't lock down the size of a piece of furniture. Also it didn't really have the concept of making a "library" of furniture. I think a usable program would make it both easy to set up the walls like the space you're in and considering, as well as put up a host of pieces you own or might want to buy, and then you can freely drag those around.

So, you can see the first draft of what I made here: http://stuff.alienbill.com/apartmenter/. (the final version made some minor improvements and allowed saving and loading, but you get the idea) It's a p5.js app using the html5 canvas. It's definitely a rough MVP (Minimal Viable Product) / Proof of Concept but it actually was enough for us to play with layouts and find the one we wanted.

I made a simple form to let the user put in the width, height, and identifying name of a piece, which then gets jammed into the JSON. I made the JSON visible so it can be edited directly, and pushed back into the display. (This lets me also put in irregularly shaped pieces, like the oval tables or the L-shaped couch, without having to build a UI for every thing the program knows how to draw.)

(I've built a few UIs built on saving big blobs of JSON like that, often as regular form data. It's not a bad hack, actually)

The thing I most punted putting in room layout data. That's an interesting UI/UX challenge to thing about - how do you most easily let people (who are probably crawling around on the floor wielding tape measures) put in wall info that is both precisely measured and carefully placed? Do you lock a wall to the corner and then let them adjust the measurement? Do you let them enter a wall of a fixed length and then drag it around? or do you treat it like drawing a straight line in a paint program, but show the current length 'til the user gets it right? Combine with other issues like "walls have widths that probably aren't being measured") and it gets tricky!

As a further hack, I used the same code for a simple "will this dresser fit in our triangular shaped cubbyhole closet" problem - http://stuff.alienbill.com/closeted/ - in this case what was an overhead view is now a side cutaway for the closet and various drawers. (Also in apartmenter, a punt of one inch = one pixel worked well, but here one inch = ten pixels seemed more appropriate)

Anyway, it's nice when a homebrew program like this proves to be so useful in the physical world!