Creative Prototyping

Experimental IoT Prototyping

adesso mobile solutions
Study Case

Protopie - Interactive IoT Prototypes

Work
IoT Prototyping UI & UX
Client
adesso mobile solutions
This is a collection of prototypes I did while working at adesso mobile solutions as a digital designer. Besides my client-related work, I was able to tinker around with the advanced prototyping possibilities of Protopie - mainly: The exploitation of the serial communication feature.

Protopie to USB Serial

The protyping tool "Protopie" has the wonderful feature to send messages from you app-prototype to the USB serial via a bridge app. This feature allows to build high fidelity IoT prototypes without the need to code any mobile application. With a massive push button and some actuators that I integrated into the housing, I tinkered around a little.

Quick example on how to receive sensor data though USB serial:

This is the function that sends the changing potentiometer value to your app prototype

-- CODE language-cpp -- int potiValue = 0; int lastPotiValue = 0; int pin_poti = A0; void setup() { Serial.begin(9600); pinMode(pin_poti, INPUT); } void loop() { potiValue = analogRead(pin_poti); //map potentiometer to reasonable amount of increments potiValue = map(potiValue, 1, 824, 0, 50); //creating the right formated string for the bridge app char cstr[16]; sprintf_P(cstr, (PGM_P)F(""), potiValue); // Send Data only when value changes if (potiValue != lastPotiValue) { Serial.println(cstr); lastPotiValue = potiValue; } }

In Protopie we can now use the receive trigger, type in the referencing message (in this case "POTI") and store the value (in this case numbers from 0 to 50 into a variable. Now we can use the potentiometer as a trigger for any event. In the example from the video I chained the values to the background color so it switches between black and green when the potentiometer is rotated.

Sending messages from Protopie basically works the same way around. Lets take the RGB-LED from the video as an example. In Protopie, we add a variable for the R, G and B value. Those values can be adjusted in 255 increments each. So if we want to use a vertical slider to change one color of the LED (like seen in the video), we need to chain the y values of the slider-button to numbers from 0 to 255 and store them in a variable. Now we can send the variable via "Android Broadcast" whenever a change is detected.

The coresponding arduino code looks like this. The loop function checks for new data. When there is a serial input from USB, it parses the messages in consumable chunks for the RGB LED function.

-- CODE language-arduino -- boolean newData = false; const byte numChars = 10; char receivedChars[numChars]; // an array to store the received data char tempChars[numChars]; static byte ndx = 0; boolean newData = false; int channel1; int channel1Code = 1; bool channel1State = false; int redPin= 11; int greenPin = 10; int bluePin = 9; void loop() { recData(); if (newData == true) { strcpy(tempChars, receivedChars); parseData(); rgbLED(); newData = false; } } void rgbLED() { int red = channel1; analogWrite(redPin, red); } void recData() { static boolean recvInProgress = false; char startMarker = '<'; char endMarker = '>'; char rc; while (Serial.available() > 0 && newData == false) { rc = Serial.read(); if (recvInProgress == true) { if (rc != endMarker) { receivedChars[ndx] = rc; ndx++; if (ndx >= numChars) { ndx = numChars - 1; } } else { receivedChars[ndx] = '\0'; // terminate the string recvInProgress = false; ndx = 0; newData = true; } } else if (rc == startMarker) { recvInProgress = true; } } } void parseData() { // split the data into its parts char * strtokIndx; // this is used by strtok() as an index strtokIndx = strtok(tempChars,":"); // get the first part - the channelCode recCodeFromPP = atoi(strtokIndx); strtokIndx = strtok(NULL, ":"); // this continues where the previous call left off if (recCodeFromPP == channel1Code) { channel1 = atoi(strtokIndx); channel1State = true; } }

‍

And now something useful

During the development of motorcycles, many hours of test rides are necessary to fix bugs and behaviour issues. The problem: it is quite difficult and dangerous for the test engineer to execute a streamlined road test while driving the machine, especially while wearing a helmet and gloves. For an early stage sales pitch at an automotive firm, I built a small demonstrator of how a test ride app might look and how to interact with it.

This prototype was again built without any Java programming involved, only with the help of protopie and some basic Arduino.

‍

Protopie - the future of interactive prototyping for creatives?

In my opinion? Definitely! In a newer project I went a step further and rewrote the Android bridge app, so it would skip the USB Serial and instead publish the data via MQTT. This way, it can interact with basically every IoT hardware. In my opinion there is now quicker/simpler and more cost-effective way to validate the user experience of an IoT application early on.

Check out the Rjiksstudio Ambient lamp I did for the Rijksstudio award to see how the Prototype turned out.

‍

No items found.

Other Projects

Rijksstudio Ambient

(
IoT
)

Material Experience

(
)

Metahuman Exploration

(
)

Work together?

Write an email

Linkedin
liermannerik@gmail.com