Reflection on Our Experience with Open Source Development
Challenges of open source development
Communication is a major challenge for open source development, as much of the time we have not been able to work together in-person. We have to rely mostly on online communication tools, and this can cause delays, especially when people work at different times.
Benefits of open source development
Open source projects have the potential to get feedback and contributions from anyone, whether it’s a bug report or a new feature.
Also, many development tools that would otherwise require payment are free for open source projects. Conversely, open source projects are usable by anyone for free, so it is easier to reach a wide audience and contribute something positive to the world.
Differences from other classes or jobs
The goals are different with a typical project-based computer science class; you work on a project for a period of time until its due date, following a specific set of (sometimes very strict) directions, and often using boilerplate code and/or tests provided by the instructor. Open source, by contrast, doesn’t have that sense of deadlines, the creators or community decide the directions, and you start basically from scratch.
In a typical job, there is a team of employees working on the project for eight hours a day, five days a week, so work tends to progress quickly, especially if everyone is physically together in the same office. However, companies tend to have stricter requirements, more red tape, or a concern only for the bottom line.
Continuing on this project
We plan to continue working on this project, both responding to issues and pull requests opened by others, and continuing to add features and enhancements. The app is in a working form, but it is by no means done, and there are many features we discussed but did not think it would be practical to implement right away.
Contributing to other projects
Working with the open source development style has been a positive experience for us, and we will keep an eye out for other open source projects to contribute to in the future, either improving a tool we already use or contributing to something random and new.
Welcome to the Brick-a-Pic project! After our 5 months of development, we’d like to announce this project to the world at large. Brick-a-Pic is a web application that intends to make it as easy as possible for people to make mosaics out of LEGO bricks. If you’d like to learn more about it, read on. If you want to try it out, you can here. You can also find a video demonstration of our project on Youtube.
Running
Brick-a-Pic is hosted as a static site hosted on GitHub Pages. If you’d like to run your own copy, you can build it with npm, or run it as a Docker container. Build instruction with both npm and Docker can be found in our README.md. Since Brick-a-pic works entirely offline after the first page load, you can also save it as a progressive web application.
Key Features
Overview:
The interface is a simple one, with a banner along the top with the app name and links if they want to learn more. Most of the screen is a preview of the resulting Lego image, with a settings panel on the left side. The panel can be shown and hidden using the hamburger button at the top left to save space.
Image Uploading
By clicking “Open image,” users can select any image file from their computer to upload, or take a photo if they’re on a mobile device.
If they just want to get a sense of what the app can do, they can select one of the sample images.
Size Selection:
The user can then customize the dimensions of the image to fit their desired resolution and size by either changing the slider position or directly enter the dimensions themselves. When “Preserve aspect ratio” is checked, the image retains its proportions as it is scaled.
Color Quantization:
Depending on the size of their Lego collection, the user may want to check more or fewer of the colors to include, but we start with the 17 most common colors. More colors means a more realistic image, but they might be harder to find.
Grid Labelling:
The resulting image will have gridlines and grid numbering to guide builders:
Pan/Zoom Functionality
Once you’ve uploaded an image, it can be panned and zoomed across the screen at will. It’s fully touch-screen compatible, too!
Static Hosting:
Since Brick-a-Pic exists entirely in the client and all processing is done directly in the browser, very little is required to host a copy.
Contributing
Brick-a-Pic is completely free and open source, so contributions are always welcome. You can start by reading our CONTRIBUTING.md, or by looking for open issues on GitHub. Feel free to join our Gitter channel to discuss your ideas with our developers.
After nearly a month of development, we’re happy to announce the implementation of a number of features outlined in the the previous post!
An overview of what’s been created so far:
User Interface / Interactivity
UI Development
We’ve decided to create our UI using Material Design components from Vuetify, a component framework for Vue. It’s enabled us to quickly make a simple, repsonsive user interface:
The dimensions of the resulting mosaic can be adjusted in the settings:
And the resulting image will have gridlines and grid numbering to guide builders:
Image Upload
It’s possible to upload any of your own images, and they will automatically be converted to a pixelated mosaic:
Or, you can pick from a sample image (more coming soon):
Pan/Zoom Functionality
Once you’ve uploaded an image, it can be panned and zoomed across the screen at will. It’s fully touch-screen compatible, too!
Color Palette Selection
Since not everyone has the full LEGO color palette to use, there is now a ‘color picker’ that allows you to pick and choose which LEGO colors will be applied to your mosaic:
Image Transformation
LEGO Color Approximation
Each image is transformed by downsizing it to a smaller size, then calculating the Euclidean distance (in terms of red, green, and blue values) of each remaining pixel and picking the closest LEGO color:
Image Size Detection / Scaling
The app will also automatically detect the relative shape of an image, and size the mosaic to match:
Next Steps
We’d like to focus on developing a few things in the near future:
Better input validation, since the form does not perform very much and it’s possible to enter invalid values
Expand our documentation, so it’s easier for others to contribute. There’s not much in the way of our README and CONTRIBUTING at the moment.
More mosaic customization options, since it’s the heart of our app.
We would like to announce that we are beginning development of a free, open-source, LEGO mosaic maker. Our goal is to create a web application that allows anyone to render images into mosaics made of LEGO bricks, and then create them in real life. The most recent working build of this app can be found here, and If you’d like to follow development or even contribute a pull request or issue, our GitHub page can be found here.
Motivation
Building a real-life Lego mosaic is tedious and error-prone. Brick-a-Pic aims to automate much of this process by handling the rasterization of the image into hypothetical LEGO bricks and providing instructions detailing which bricks to use and where to put them. The goal is to let a user focus on actually building their mosaic, instead of keeping track of what goes where.
Related Work
In order to get an idea of how this project could improve upon things that already existed, we looked at some of the other applications out there that aimed to perform a task similar to this project’s: Legoizer, Bricks Camera, POPMosaic.fun, and Brick-a-pic (no relation to this project).
The upshot of this research is that we knew we wanted to focus on a LEGO mosaic-maker that provided detailed instructions for free, since it didn’t seem like a comprehensive solution existed yet. The current goal is to publish a web app, so it could be easily used and shared across multiple platforms. If possible, it should do all processing client-side, to further simplify hosting to any static web server (like it is, currently).
Technology Stack
Based on what we knew this project should accomplish, we looked at the tools we could use to this end.
Front-End Development
Since we decided to create a web application, a UI development framework seemed necessary to make it easy to create the interface. We decided on Vue.js, since it had the most familiarity among our current team members and didn’t have as steep of a learning curve as other frameworks like AngularJS, for the team members that needed to pick it up.
Image Manipulation
We anticipate Brick-a-Pic will involve nontrivial image manipulation – there’s the problem of rasterizing arbitrary images into lower resolutions while still keeping them recognizable, and since LEGO only consistently manufactures 17 colors, image colors may have to be heavily quantized. Since the current goal is to keep all image processing client-side, any and all image manipulation will have to be done in Javascript, in the browser. Thus, we looked at Javascript libraries that could help with that – Camanjs, glfx, Jimp, and the HTML5 Canvas itself.
We came to the conclusion however, that with the presence of Canvas API calls like getImageData and drawImage, to try to develop image manipulation routines with just the HTML5 Canvas, to reduce the number of unnecessary dependencies used.
Containerization
A secondary goal of this project is to allow for multiple distribution options – in theory, since a web app should be simple to reproduce and rehost. In order to simplify this process, our current plan is to provide a Dockerfile so that anyone can and host their own personal Brick-a-Pic instance.
UI Mockups
In order to get an idea of what the process of using Brick-a-Pic could look like, we created mockup of a final mobile UI.
Future Goals
Since we are starting this project for our Open-Source Software Development course, we’ve developed some goals for a Minimum Viable Product (MVP) that we will create by the end of the semester (around early April, 2020). We’ve also identified a list of features that would be useful and interesting to implement if time permits, given the tight schedule, but which aren’t immediately critical.
MVP Goals
The user can select an image from their device, or take a new one
The user can specify the final ‘resolution’ (in LEGO bricks) of the mosaic
Image pixels will be reduced to the common LEGO colors that they are closest to
The transformed image will be displayed with a LEGO overlay and grid numbering, to help with building
Aspirational Goals
Brick-a-Pic should work offline, as a progressive web app
Sample images should be available for user testing
Images can be set to use LEGO plates, which are 1/3rd the height of a normal brick, for higher-resolution results
Mosaics have a row-by-row breakdown to make construction easier
User can zoom/pan around the image with their mouse
User can save/print their finished image
More processing of the image for a better result: edge detection, computer vision, etc.—May require a backend
