Appunti di Hardware & Software Technologies for Design

RFID

Stay for radio frequency identi er, it docent need any power on the tag. It can be active

and passive, is cheaper and easy instead of NFC

RC522 RFID

MFRC522 is a baord which Read & Write a RFID Card or Tag using the ISO/IEC 14443A/

MIFARE interface.

The connection can be done via SPI, 12C and USART

PN532 RFID

PN532 is a baord which Read & Write a RFID and NFC.

The connection can be done via SPI or 12C

Relay is a connection

Relays allow low-power microcontrollers to handle circuits that uses much higher power

than what the board can handle directly. They are typically used in industrial applications to

control high power circuits, but it is also used in cars, homes and other electric

applications. fi

LEZIONE 5

ProtoPie is a prototyping tool for smart devices

ProtoPie designs elaborate prototypes without any coding, and these prototypes can be

tested on actual devices.

It is not the only one; on the market you can nd Proto.io, Origami studio, InVision and the

most famous one Axure.

Explore design solutions

> create a variety of interactions without the help of developers

Communicate design

> explain elaborate interactions to development team members

Research user feedback and evaluation of preliminary UI and UX design

> quickly get user feedback even before a programmed development

Protopie is not a UI design program.

You can draw the entire screen from scratch importing it from your UI design tool.

Protopie import from Adobe XD, Figma and Sketch.

Object is part of our UI, it could be buttons, but also invisible stuff like voice control

Trigger is the action we need to click on, or create in your application part in order to

interact with your mobile connection. It could be press a button,duble press, but also

receiving message from arduino or cloud. It’s related to object that could be visible and

invisible, so the trigger could be visible or digital (you receive something)

Then you can respond to this trigger with other stuff that could be voice over, sending

message to arduino to turn o or off a light

API: how you comunicate with online stuff

Scene

All the screens of the app are represented by through SCENEs.

Every SCENE corresponds to one screen of the app, but it can

contain different pages, including elements which are out of the

screen and which can enter through animation.

You can move from a scene to another with the response

“Jump”.

You can decide the type of transition and the delay after the

trigger. fi

Layers

Protopie scene is structured with layers which are a little bit

different from layers in Illustrator and Figma.

ProtoPie layers consist in components: each layer is a

component.

Trigger

Protopie implements different type of triggers:

• touch

• sensors movement

• keyboard

• mouse

• …

For any trigger you can create different response

Responses are executed based on trigger.

You can chain multiple respones, based not only on trigger but

also on conditions.

Also you can generate a condition and inside different condition

you can create different response

Variables

Protopie implements also variables which can be used for saving

data temporarly or for the entire duration of the prototype.

Variables can simulate a login.

That can be a number, text, color

If you reset the number would be 0, the text is empty and the color

is white

Let’s start from the variables.

1. Create a login page in gma

2. Import the login in protopie

3. Read username and password

4. Check if credential is correct and move to another

page.

In order to move UI from Figma to Protopie, a Figma plugin is required.

Before the importing process it is important to select into protopie the

right size for the frame; it shoiuld be the same of gma UI.

fi fi

In order to move UI from Figma to Protopie, a Figma

plugin is required.

Before the importing process it is important to select into

protopie the right size for the frame; it shoiuld be the same of gma

UI.

Log in

Add variable and debug

Arduino connection

Let’s send start command to arduno to run the game.

When nish the game, Arduino reply with the time.

Protopie compute points and show it.

Points are saved on Adafruit and retrived if necessary.

Arduino can send:

Message

Message + Value

Arduino can receive:

Message (fast)

Message + Value (slow)

Sending message

Sending simple message is the easiest solution:

Serial.println(“MESSAGE”);

Protopie will search for receive trigger on the same message

Receiving message

Receive message from Protopie require reading the serial.

if (Serial.available()>0){

String message = Serial.readString();

if (message == "ON")

digitalWrite(13, HIGH);

if (message == "OFF")

digitalWrite(13, LOW);

}

fi fi

Arduino programming error

Arduino could give you an errore while programming becouse the port is busy.

This is due to Protopie connect plugin. Stop the Arduino plugin and retry.

Sending message and value

Sending message and value requires to format the string to send.

Serial.println("STARTGAME||20");

|| are the two special characters that divide the message from the

value.

On Protopie, activating “Assign to Variable”, the value is

automatically saved in the selected variable.

Receiving message and value

Receiving message and value require parsing the string.

If there is only the message, the “||” is not present.

If there are both message and valure, “||” is present and can be

used to divide the string.

Receiving message and value

// Declare struct

struct MessageValue {

String message;

String value;

};

// Declare function that parse message format

struct MessageValue getMessage(String inputtedStr) {

struct MessageValue result;

char charArr[50];

inputtedStr.toCharArray(charArr, 50);

char* ptr = strtok(charArr, "||");

result.message = String(ptr);

ptr = strtok(NULL, "||");

if (ptr == NULL) {

result.value = String("");

return result;

}

result.value = String(ptr);

return result;

}

struct MessageValue getMessage2(String inputtedStr) {

struct MessageValue result;

int index = inputtedStr.indexOf('|');

result.message = inputtedStr.substring(0, index);

if (index == NULL) {

result.value = String("");

return result;

}

result.value = inputtedStr.substring(index + 2);

return result;

}

// Declare MessageValue struct's instance

struct MessageValue receivedData;

void loop(){

...

...

if (Serial.available()>0){

String receivedString = Serial.readString();

receivedData = getMessage(receivedString);

//receivedData = getMessage2(receivedString);

if (receivedData.message.equals("CMD")){

if (receivedData.value.equals("ON")){

digitalWrite(13,HIGH);

}

else if (receivedData.value.equals("OFF"))

digitalWrite(13,LOW);

}

}

...

...

}

Save data on Arduino

#include <EEPROM.h> //This is the library for writing arduino memory

typedef struct Protopie{

String msg;

String value;

} Protopie;

typedef struct StructuredData{

char text[50]; //you can't use string becouse you need a nite lenght

int val; fi

oat otherVal;

} StructuredData;

int eeAddressValue1; //Location where we want to save the data

int eeAddressValue2;

int eeAddressValue3;

int eeAddressValueStruct;

String dataReceived;

Protopie dataFromProtopie;

oat value;

StructuredData myStructToRead;

void setup() {

//Init serial at the same speed of Protopie Connect

Serial.begin(9600);

eeAddressValue1 = 0;

eeAddressValue2 = eeAddressValue1+sizeof( oat);

eeAddressValue3 = eeAddressValue2+sizeof( oat);

eeAddressValueStruct = eeAddressValue3+sizeof( oat);

Serial.println(eeAddressValue2);

//Here I save into memory an example of structured data

StructuredData myStructToWrite = {

"Here is a message",

10,

36.5f

};

EEPROM.put(eeAddressValueStruct, myStructToWrite);

}

void loop() {

if (Serial.available()>0){

dataReceived = Serial.readString();

//Serial.println(dataReceived);

dataFromProtopie = parseProtopieMsg(dataReceived); //This divide msg from value, but

value is in string format, we need to convert it in the right format

if ((dataFromProtopie.msg == "WRITEVALUE1") || (dataFromProtopie.msg ==

"WRITEVALUE2") || (dataFromProtopie.msg == "WRITEVALUE3")){

value = dataFromProtopie.value.toFloat();

if (dataFromProtopie.msg == "WRITEVALUE1"){

EEPROM.put(eeAddressValue1, value);

Serial.println("WRITE OK");

}

if (dataFromProtopie.msg == "WRITEVALUE2"){

EEPROM.put(eeAddressValue2, value);

Serial.println("WRITE OK");

}

fl

fl fl

fl fl

if (dataFromProtopie.msg == "WRITEVALUE3"){

EEPROM.put(eeAddressValue3, value);

Serial.println("WRITE OK");

}

}

else if (dataFromProtopie.msg == "READSTRUCT"){

EEPROM.get(eeAddressValueStruct, myStructToRead);

Serial.println("VALUESTRUCT||" +

String(myStructToRead.text) + "\n" +

String(myStructToRead.val) + "\n" +

String(myStructToRead.otherVal));

}

else if (dataFromProtopie.msg ==

"READVALUE1"){

EEPROM.get(eeAddressValue1, value);

Serial.println("VALUE1||" + String(value));

}

else if (dataFromProtopie.msg ==

"READVALUE2"){

EEPROM.get(eeAddressValue2, value);

Serial.println("VALUE2||" +String(value));

}

else if (dataFromProtopie.msg ==

"READVALUE3"){

EEPROM.get(eeAddressValue3, value);

Serial.println("VALUE3||" + String(value));

}

}

}

Protopie parseProtopieMsg(String data){

String msg;

int val;

char *str;

char charArray[200];

Protopie myMessage;

data.toCharArray(charArray, 200);

str = strtok(charArray, "||");

myMessage.msg = String(str);

str = strtok(NULL, "||");

myMessage.value = String(str);

return myMessage;

}

MICROPHONE

Analog Microphone is usually composed by a low power microphone. It can be a standard

microphone or a mems technology microphone.

The analog ouput is the wave recorded by the

mic.

The digital ouput is high, when the sound is

over the threshold, low if it is under.

The threshold can be set by means of

sensitivity screw.

- interfacing the microphone module with arduino requires the use of an analog input

(orange wire)

- if we also want to manage the comparator output we need to allocate a digital i