End of MVP

tl;dr

Lots of small improvements of for user experience, and application output.

Check for yourself here: corner.builders

Final 360° Room-Scale real life test coming soon in a regular post!

Current status

We can project normal or 360° images on the room walls, then extract the images to print as a zip of PDFs.

The goal

While the main functionality is already achieved, there are a couple of "pain points" to solve to truly make this webapp "MVP ready". Those points are annoyances for me (who already knows well the product) so they would be absolute stopper for anyone else. Fixing those points would be the bare minimum to raise the product state into MVP (Minimum Viable Product) level.

Last tweaks

Progression feedback / Cancellation

Creating the zip can take some time (in the range of minute), especially for large room with 360 images, as each images will be (losslessly) compressed. (A 1-time "cost" for indefinite lower storage space is something good by default, I think). However, the current "zip-function" would block the application until finished, without a way of cancelling it. So if you click the button by mistake, you have to wait for it to finish. And while you wait you have to hope that the application is actually doing something and didn't crash and if you have to actually kill the tab. Not a good user experience. A simple fix is to split the work per images, and update a progress bar 0-100% depending on the number of images already processed, and adding a "cancel" button. I personally find it easier to wait looking at a progress bar than looking at "nothing". Here is what the new progress bar + cancel button look like (cancelling once):

Multipage PDF

What we had was a zip of single page PDFs, looking like this:

The surprising first issue, is that in windows 11, you can only print up to 15 PDFs at once (if you select 16 files, the option to print just silently disappears). Ok in 30+ years it's the first time I try to print more than 1 document at once, but still. The solution from the official microsoft forum is just to print "manually" by chunks of 15 files. Ok. The original idea to have 1 PDF per image was to code the image position in the name of the file, and also the ease to just print 1 selected image if needed. Obviously it has to change, so we will go with having all pages in a single PDF. It has the advantage of being better encapsulated (all images in 1 file), and directly open-able in the browser after download. Win-win. Opening in the browser would now look like this:

Fit real-size paper format

We need a "white border" around the image, but why? While printers are very accurate while printing, the general orientation of the page is never perfect, so it's better to print "perfectly" inside a inner rectangle, and cut later the rectangle (more post-work but impeccable result).

Before, I would have the pdf page be exactly the image (no borders around), but with dimension justs smaller than a real paper size. So printing centered would add this buffer border around the image. The issue with this is that it relies on the user to select the option to center the image while printing on the printer. A better approach is to have the pdf be the exact paper size, and include the white border (and centering in code ourselves the image)

Also the added white border gives us a chance to print some instructions on it.

So before we had something like this:

And after something like this:

Note: we always add a black rectangle around the image. So if the image is mostly white, we still know where to cut.

Add main POV as first page

Let's say for some reasons we have many PDFs outputs of different use-cases. Guessing from the image tiles alone what was the main image about is not an easy task, like guessing from puzzle pieces what is the main picture. To fix this, we include as first page of the downloadable PDF the "main view". So it's easily recognizable, even without opening the PDF, with the file preview, like this:

Add full wall pictures for reference

Depending on the size of the room and the "distortion", it can be hard to assemble all the tiles together. This webapp is not meant to be a puzzle generator, so we should offer some help to assemble back all the tiles together. An easy way to help is to add the complete images of each walls (if they are part of the projected image) so the user can use them as reference. for example here is the full Left-Surface:

and it can be use to locate for example this particular tile:

Add cues for tile positions

While generating all the tiles, we obviously know the tile position. We can add the data to each image. for example for the above image:

The image says:

Surface:Left | Left-side of picture toward Surface-Back offset 3 :: Bottom-side of picture toward Surface-Floor offset 3        

Which can be interpreted as: place this tile on the Left wall. The image orientation is: left side points toward the Back wall. Bottom points to the Floor. The offset of this tile from the Floor and the Back wall is 3 tiles each. There might be better /more expressive text encoding or graphics, but the data is there at least and can help (keep in mind this is an MVP, and could be polished further later).

Add summary page of parameters

Once the final pdf is generated, we might want to remember all the parameters we used, like the room size, or the point of view definition etc. I added a parameter value page in the PDF. For now simply a json-string serialization of the parameters set in the GUI. As a note, this is simply a

#[derive(Serialize)]        

Trait auto derivation above your rust struct. An extract of this page looks like this:

Select paper size

Paper print size can now be chosen from the GUI under Tile Size (only A4 and A3 for now, could add more later).

Downscale image if necessary

Each device has a limit on the texture size that can be displayed. On my dev laptop, its 16,384 (big enough, virtually all image are smaller than this). However on my phone, it's only 4096, and bigger images are not too uncommon. Trying to load a texture too big to graphic buffer would result in a black image.. not ideal. The simple fix is to downscale the image to fit the max texture size of the webgl rendering context.

Viewpoint always inside the room

Well, the viewpoint should be inside the room, not outside and the app has to enforce it, it doesn't make sense otherwise. It's now done

Asking to wait when 100%

The longest task now is transforming the printpdf rust crate representation of a PDF into actual pdf bytes, to be downloaded as a file. There is now a waiting message when we are at this stage (after 100% of images are extracted/compressed). Looking like this:

Better PDF name

The downloaded PDF file now also has a timestamp to it, to make it unique., like this:

corner.builders-2024-02-23--15h44.pdf        

Conclusion

A lot of small Quality-of-Life improvement for the user that makes the app and it's output more usable. This should be an iterative process, and the app is now at the floor level of usability, where actual users could use it and give feedback for improvement. So I will pause the work on it and wait for user requests, if any!

Retrospective

The road from nothing to online MVP web-app went surprisingly smoothly without any real blockers, and we can be happy and proud of what we achieved.

The first edition of this newsletter was exactly 7 weeks ago with just the demo concept. I believe we were able to go this fast because we sticked to our principle of very focused and small additional features, toward this MVP goal and our initial plan was mostly correct without the need to pivot too much, so the overall limited time spend on the project was quite productive.

What's next?

Well, the 360° Room-Scale real-life print is not yet printed, but will be for sure next week, so be ready for the conclusion video post for this project of the toilet room covered in some new environment, that should be cool!

I might also try to contact a tiling company see if there is any interest on their part. I'm thinking of bathrooms, where we can maybe design some nice patterns that doesn't look too bad when looking up close, even with distortion and all that, but still reveal some interesting patterns from some point of view. But I will not insist too much on this side of things, as it was not the goal.. and expect to see me in some other projects that I have in mind!

See you soon, and I hope you enjoyed this mini-series! :)