PictoBox

Inspiration

Art is the most expressive form of media to exist. As the famous saying goes, “a picture is worth 1000 words.” In the midst of a global pandemic, we wanted to revamp this idea by creating a fun and engaging way to communicate with friends and families, using just pictures. With communication becoming so hard during COVID-19, we aspired to create an app that allowed for easy, real-time communication with just a few swipes. This led to the birth of our project, PictoBox.

What it does

PictoBox is a touchscreen device that can be held or mounted anywhere in the house. Whether it be in the bedroom or the kitchen, the PictoBox is perfect for any location. Once connected to a power source and WIFI, and a custom link will be generated which can be sent to anyone and everyone. People with the link can connect on any device through the web browser. Once they start drawing, the artwork will appear instantaneously onto the PictoBox display and any other connected device. Anyone with the link or a Pictobox display will be able to view and utilize this virtual “whiteboard.” From here, the possibilities are endless.

How we built it

Building this project was the most fun part of this entire process. We decided to utilize a Raspberry Pi, a touchscreen display, and a web app to create our PictoBox. Development of this app was a learning experience allowing us to expand beyond our normal coding boundaries.

Challenges we ran into

What is a hackathon without challenges? Challenges are what force us to grow and learn and is what makes partaking in these coding events so fun. To say that our project was without challenges would be akin to saying that pigs could fly. Our first main challenge was the website we planned on integrating with our app. While both of us did have some prior JavaScript and HTML knowledge, it did not prove sufficient enough for the magnitude of code that we wanted to run. We kept encountering errors upon errors both because of syntax and overall logic. To remedy this issue, we turned to a third-party website so that we could spend our time improving the rest of the app in the short time constraint we had. Another challenge we faced was the technical difficulty involved in merging changes. While it may sound like updating the drawings in real-time was the difficult part, in reality we struggled more with merging the changes smoothly into one image that is both cohesive and concise. To remedy this issue, we looked at existing real-time collaborative technologies and adapted our code based on their logic and reasoning.

Accomplishments that we're proud of

Being blessed and fortunate enough to participate in this hackathon was our biggest accomplishment. We’d like to thank you guys for hosting such an amazing event and allowing us to participate. Other than that, our biggest accomplishment was finishing the app. We worked day and night, (thank you for those monsters), and we were able to publish and app that we’re proud that exists.

What we learned

To quantize what we learned would be simply impossible. But we will attempt to do so in the next few sentences. As discussed above, one of our challenges was creating a website. During this process, we started with little knowledge about web design. But the more time we spent, the more we began to develop the intuition and insight required for creating a good website. We also got the opportunity to practice our HTML and node.js while learn a new framework (for us) called Fluid.

What's next for PictoBox

The journey with PictoBox has just started. Its current age is only approximately 22 hours. We can’t wait to see what we do with this product, once we’ve gotten some sleep. But in our vision, PictoBox would be used as a communication method between friends and families, more specifically elderly people with their grandchildren. We designed PictoBox with simplicity at its heart, an app that anyone with any experience can use. Grandparents can send their grandchildren or children cute messages every morning, some motiviation to keep going in these hard times.

Built With

• fluid
• node.js
• raspberry-pi