The Making of Hydrate.me Electronic Coaster

comment 1
Physical Computing

For our Physical Computing midterm, Abhishek, Songee and I paired up and designed a hydration device called Hydrate.me. The device is an electronic coaster that works by sensing the amount of liquid remaining in your bottle and providing a corresponding graphic representation. According to your timer setting, you will be reminded once every so often to drink, and when need to refill your bottle.

We worked well together from the very beginning, and started out by brainstorming around this idea and making very abstract sketches.

IMG_7350

Arduino prototype and exterior

We decided that the sensor we should use for our prototype would be the force-sensor, and we also decided to use LEDs to allow visual feedback on the device itself (apart from the interface we designed in Processing). We started out by prototyping the actual object in various materials in order to understand size and dimensions.

IMG_7371

IMG_7391

IMG_7386 copy

Since the topic addressed is water, we decided the final prototype should be made out of organic materials. Plywood seemed to be a good material we could use to cut the layers of the coaster and stack them on top of each other. Each layer was crafted to house and support the various components. The top layer was made by cutting a silicone mat (originally made to be used as a baking mat!).

20141015_101413

20141015_182821

20141015_210553

20141015_112841 copy

After carefully crafting the exterior we inserted the different components, which included the Arduino microcontroller, a shield connected to the top of the arduino, LEDs, the force-sensor, and of course, all of the wiring. This was done, and could have only been done, with super-extra care!

20141017_163020

20141018_174206

Programming the sensors in Processing and Arduino

We used both Arduino and Processing to sense the weight on the coaster which is represented in a graphic interface. We designed and enabled a timer that allows the user to select increments of time in which he would like to be reminded to drink. The values that translated as the weight were mapped according to the specific X and Y locations on the interface. You can view the code here and here.

20141019_213254

Graphic Interface

The interface we created is a widget built to live on the desktop of a personal computer. The user may set the timer to increments of time in which he would like to be reminded to drink. The water animation is mapped with the data from the pressure sensor and responds accordingly.

midterm-design-mockup

That’s a brief summary on the making of Hydrate.me. View the final product on the next post or click here.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *