A simple stickerbomb to showcase this project.
A stickerbomb meant for Ceramic Lounge Merchandise.
A stickerbomb created during development.
OVERVIEW:
StickerFuse was meant to be a Print-on-Demand style service. You would use the webtool to create a stickerbomb of your desired style, using images uploaded by the user. Since I was so focused on making it easier to generate each one, I neglected styling. It is still hosted on stickefuse.com at the time of writing this.
Main Tech Stack:
HTML/CSS/JS, PHP, GitHub
Other technologies:
Affinity Suite, Porkbun
TECHNICAL GOALS:
For this project, I wanted something that would scale to the User's specs, and work on virtually any hardware. Making it meet the requirements set, and reducing hardware load were important. I was able to calculate the minimal amount of necessary loops, and also create the grid and do RNG in advance before loading any images in. This reduced the load time from about 20 seconds to 3.5 seconds on a 4k resolution grid on low-end hardware with 4 stickers. I used this project to normalize and record the optimization techniques I use in my day to day development.
NOTABLE FEATURES:
HTML2PNG
To capture the orders at full resolution, I created a puppeteer.js tool to load the page and wait for an event to fire once all elements are placed and loaded. This would return full page, high res shots, usually 3600x3600, largest was 8400x4200, that could be printed on my large format printer. A snippet of a 3600x3600 generation is shown on the right, this is 5% of the original photo.
reciever.html
In order to make this project usable on the business end, I created a tool that would load the source from a flat text file on the server and re-construct it on the desired, much larger, scale. Usually about 5 to 15 times larger resolution wise. Making this optimized enough to be practical was a challenge with a web tool, and would probably get ported to something more powerful than web JS if I was still supporting it. The selection on the right is a portion of the 18x18in print I used to wrap my work laptop at Unmanned Experts, to keep it from getting scratched. We had NASA Contracts in progress at the time.
Request Headers:
In order to make the tool useful without an account, but still place orders, I had to set strict cross origin policies to prevent DDoS from external endpoints. Also to retrieve an old order, without handing out POST permissions, I used a GET request with a custom header containing the order number. This is a good dev/demo solution.
HURDLES:
Time Complexity:
Reducing time complexity in this program was one of the biggest challenges for this project, as it was necessary to produce such complex sets of elements in a short time. I was able to bring the tool render time from about 16 seconds down to 1 second with roughly the same image size. I was able to reduce the elements needed, and also reduce the containers the were placed in by automatically calculating and generating a grid on each request.
Placing Orders:
Orders are rendered at a much larger scale than the original, sometime 15x larger, so reducing the time complexity, and hardware load in a manner that worked at that size was quite a challenge. Once done, I created a tool that would open a headless chrome session at the desired resolution and wait for all images to be loaded until capturing.
