How to Control Arduino R4 WiFi From Your IPhone / Apple Watch / IPad / Mac

This simple instructable is about Arduino Manager, a powerful general purpose iOS iPadOS / watchOS / macOS App which allows to control any Arduino (or Arduino compatible) board by the means of about 40 different Widgets.

Some of the available Widgets are:

• Display Widget
• LED Widget
• Switch Widget
• Push Button Widget
• Knob Widget
• Slider Widget
• Alarm Widget
• Sound Alarm Widget
• Thermostat Widget
• Threshold Widget
• Text Widget
• and many more

Note that Arduino Manager doesn't require any registration or cloud account, preserving your privacy. Anyway, you can save your Widget Lists on iCloud in order to share them between your devices.

The objectives of this Instructable are:

• Install the required Arduino library
• Configure an Arduino Manager's Widget List to work with Arduino UNO R4 WiFi and some of the most used Widgets
• Load and run a simple Arduino sketch which performs basic operations, provides data to Ardunino Manager and receives commands from it
• Learn how to write Arduino code compatible with Arduino Manager.

The videos below show what we are going to build:

Demo Video: Arduino Manager for iPhone

Demo Video: Arduino Manager for Watch

When the complexity of the Arduino code increases, such as when dealing with multiple analog and digital sensors to read, controlling numerous actuators, and implementing complex algorithms, the likelihood of making errors rises. Consequently, debugging the code becomes more challenging and the time and effort required to address these issues could significantly affect the progress of your project. For this reason Arduino Manager also provides (for an additional small fee):

• Code Generator: This add-on allows to generate the basic Arduino code for supporting the Widgets you need in your project.
• PIN Code Generator: Linking widgets to Arduino PINs, this add-on dramatically speeds up Arduino code development. In many cases you don't need to write a single line of code.

A nice additional feature is Voice Commands which allows to control most of the Arduino Manager Widgets by means of your voice (English only)!.

Demo Video: Arduino Manager Voice Commands

Apple Watch is supported as well (with some limitations): you can control any Arduino board directly from your wrist, wherever you are in the world!

Arduino Manager for iOS/iPadOS is available here: App Store for $7.99 and includes the watchOS version. The macOS version is available here: App Store for $10.99 (please, note that not all the widgets are available on all the platforms).

More information, documentation, video tutorials, libraries and examples on Arduino Manager are available here:

Arduino Manager for iOS or here: Arduino Manager for macOS.

For this project you need:

1. An iOS device or an iPadOS device or a macOS computer
2. An Arduino UNO R4 WiFi
3. Arduino IDE (you can download it here: Arduino IDE)
4. 1 breadboard
5. A few male-male jumpers
6. 1 DTH22 Temperature and Humidity sensor
7. 1 RED LED
8. 1 YELLOW LED
9. 3 10KΩ resistors (0.25w)
10. An SD Card reader
11. Push Button
12. 1 10KΩ Potentiometer

You can also use other Arduino compatible boards, see Arduino Manager Documentation for further information on the compatible boards.

The circuit is very easy (just for demonstration purposes):

• The DHT22 is a temperature and humidity sensor (it can of course be replaced with any other digital sensor which provides information displayed by Arduino Manager).
• Yellow LED is turned on and off via Arduino Manager (this can also be replaced with any other digital actuator. The LED can be replaced with suitable circuit to control a DC or AC load).
• Red LED luminosity is controlled via Arduino Manager (it represents any analog actuator).

The SD Card reader is used to store temperature and humidity measurements over a long period of time. Arduino Manager will then display these measurements by means of a graph.

Pictures above show the circuit diagram and the how to wire the circuit using the breadboard.

In order to make Arduino Manager work with Arduino, you need to install some additional libraries but it will take a few minutes.

Your Arduino IDE has to be already installed. Please, open it at least once before installing the libraries.

1. The required library depends on the board and the communication device (WiFi, Bluetooth, Serial) you are using. The documentation helps you to choose the right library for your setup (see section 2 here: Arduino Manager documentation)
2. Since this Instructable is based on Uno R4, no additional communication device is required and the library to use is: AM_UnoR4WiFi
3. Download the required library here: AM_UnoR4WiFi
4. Open the Arduino IDE
5. Import the downloaded library: Sketch -> Include Library -> Add Zip Library... and selected the just downloaded library

If you have not already installed support for Uno R4, please follow the setup guide here: Arduino R4 Setup.

A library is also required to work with the DHT22 sensor. We will install the library provided by Adafruit. In the Arduino IDE follow these steps:

1. Tools -> Manager Libraries...
2. In the search field enter DHT22
3. Choose DHT sensor library by Adafruit and click INSTALL

Now we are ready to upload the Arduino code for the project.

• Download the code attached to this page.
• Open it with the Arduino IDE.
• Locate the following lines:

IPAddress ip(a, b, c, d);
IPAddress dns(8, 8, 8, 8);
IPAddress gateway(e, f, g, h);
IPAddress subnet(255, 255, 255, 0);

and change them according to your network configuration.

• a.b.c.d: it is the IP address that will be assigned to the Arduino R4 WiFi (usually something like 192.168.1.233 should work).
• e.f.g.h: it is the IP address of the router connected to the internet (usually something like 192.168.1.1 should work).
• in a domestic network the subnet address shouldn't require any change
• Locate this line:

WiFiServer server(80);

This is the IP port assigned to the Arduino R4 WiFi, you will not have to make any changes to this.

• Locate the following lines:

char ssid[] = SECRET_SSID;  // your network SSID (name) e.g. "MYNETWORK"
char pass[] = SECRET_PASS;  // your network password e.g. "MYPASSWORD"

and replace them with:

• ssid: the name of your WiFi network.
• pass: the password of your WiFi network.

• Connect your board to your PC or Mac.
• Select UNO R4 WiFi in the Arduino IDE (Tools->Boards->Arduino UNO R4 boards->Arduino UNO R4 WiFi).
• Select the USB port where your Arduino board is attached (Tools->Port->...).
• File->Upload.
• Open the Serial Monitor (Tools->Serial Monitor).
• Some messages should appear in the console. If you read:

...
Device Ready
Measuring...
Storing...

your board is ready to go.

Now your Arduino is ready for receiving commands from your iOS / iPadOS / macOS device and from your Apple Watch.

Now you have to create a new Widget List: a set of Widgets to interact with the board. For this Instructable we assume that you are using Arduino Manager on an iPhone. The same instructions apply almost unchanged using an iPad or a Mac. In case of a Mac, you will not need to open the side menu as it is always visible.

To create a new Widget List (refer to the attached images):

1. Open the side menu.
2. Select Widget Lists.
3. Tap New.

The Widget List can be stored locally on on the iCloud. In the latter case, it is shared across all your devices.

Tap on the cloud, enter the name of the Widget List: Instructable Widget List and tap Ok. The list is now created, to use it:

1. Select it in the list.
2. Open the side menu and tap on Widgets.

The same Widget List can be used to control different boards, so we have to create a new Connection to link your actual board.

• Open the side menu.
• Tap Connections.
• Tap New.
• Enter the required information
• Name: Uno R4
• IP: IP address assigned to the Uno R4 WiFi board. This address has to be the same you set in the Arduino code at Step 4
• Port: left it unchanged unless you have changed it in your code
• Tap Ok.
• Open the side menu.
• Tap Widgets.
• Open the page's configuration panel (see attached images).
• Select the Uno R4 connection.

Now we can quickly test if everything has been set up properly.

1. Tap to the Plug button on the left bottom side of the screen.
2. If the Blue LED turns on, Arduino Manager is successfully connected to the board.

We are now ready for the best part: adding Widgets and starting using Arduino Manager!

In case Arduino Manager doesn't get connected to the board, double check your IP configuration in the code and double check that the same values are used in the Arduino Manager connection.

To add a new Widget:

• Switch to Edit Mode tapping Edit in the lower side of the screen.
• Choose a free position and tap the + button. A list of all available Widgets will appear on the screen.
• Select the Display Widget.
• Replace the "?" with Temperature. This is the name of the Widget and it has information purpose only
• Complete the Display Widget configuration tapping the configuration button and entering the following information:
• Variable: enter T. This is the variable name associated with to this Widget. To send data to this widget the Arduino code sends a message with a variable name (T) and a value.
• Unit of Measure: C. To indicate that the temperature is in Celsius.
• Number of Digits: Number of decimal digits shown by the Display Widget. Let it at 2.
• Let all the other parameters unchanged.
• Tap Ok.
• Turn off the edit mode.

Now, connecting Arduino Manager to the Uno R4 the Display shows the temperature measured by the DHT22 sensor.

To show the temperature in Fahrenheit, you need to add another Display Widget. Since the sensor provides the temperature in Celsius you have to convert it to Fahrenheit. You can do that in the Arduino code or the Display Widget can do it for you.

The formula for the conversion is:

Fahrenheit = Celsius * 1.8 + 32

To add the new Widget:

• Switch to Edit Mode
• Add another Display Widget
• Name it Temperature as well
• In the configuration panel use the following values:
• Variable: T
• Unit of Measure: F
• Scale: 1.8
• Variable Shift: 0.0
• Constant Shift: 32.0

Now connecting to the Uno R4, the temperature is shown in both Celsius and Fahrenheit. Easy, isn't it?

To show the Humidity measured by the sensor, add another Display Widget with the following configuration:

• Name: Humidity
• Variable: H
• Unit of Measure: %

The Display Widget can also show a message text, add a new Display Widget with the following configuration:

• Name: Message
• Variable: Msg
• Unit of Measure: empty
• Text Only: enabled

Now connecting to the Uno R4, both the humidity and a message are displayed.

The Gauge Widget can show a numeric value on a colored scale by the mean of a needle. This allows to quickly see if the value is above the configured thresholds.

• Add a Gauge Widget with the following configuration:
• Name: Temperature
• Variable: T
• Unit of Measure: C
• Min: 0. This is the minimum value that the temperature can reach
• Max: 50: This is the maximum value that the temperature can reach
• Green Area: 24.0. Temperatures up to 24.0 C are shown on the green area
• Yellow Area: 32.0. Temperatures between 24.0 C and 32.0 C are shown on the yellow area. Temperatures over 32.0 C are shown on the red area.

• Add a Gauge Widget with the following configuration:
• Name: Temperature
• Variable: T
• Unit of Measure: F
• Min: 0. This is the minimum value that the temperature can reach
• Max: 122: This is the maximum value that the temperature can reach
• Green Area: 75.0. Temperatures up to 75.0 F are shown on the green area
• Yellow Area: 89.6. Temperatures between 75.0 F and 89.6 F are shown on the yellow area. Temperatures over 89.6 F are shown on the red area.
• Scale: 1.8
• Variable Shift: 0.0
• Constant Shift: 32.0

• Add a Gauge with the following configuration:
• Name: Humidity
• Variable: H
• Unit of Measure: %
• Min: 0.
• Max: 100.
• Green Area: 33.3.
• Yellow Area: 66.6

Double tap a Gauge Widget to zoom it in and also read the graduated scale.

Sometimes displaying a quantity using a graph is more useful than simply displaying raw data values. In this case the Graph Widget comes in to play.

We have connected a potentiometer to one of the ADC that the Uno R4 provides, to show how the ADC output changes according with the position of the potentiometer's wiper we can use the Graph Widget.

Add a Graph Widget and configure it as follows:

• Name: Potentiometer
• Variable: Pot
• Variable 1: empty
• Variable 2: empty
• Variable 3: empty
• Variable 4: empty
• Min: 0. This is the minimum value that the ADC converter can provide
• Max: 1024: This is the maximum value that the temperature can reach
• Number of X divisions: 10
• Number of Y divisions: 16

Connecting Arduino Manager to the Uno and rotating the potentiometer's wiper, the widget displays the graph.

Double tap a Graph Widget to zoom it in so you can read the graduated scale.

The Graph Widget can show up to five different quantities and the relative labels. In our example we have used just one.

The LED Widget is used to show the current state of a digital value. Add a LED Widget and configure it as follows:

• Name: Button
• Variable: Button
• Color: Choose a color you like

Connecting Arduino Manager to the Uno and pushing the button connected to the board, the Widget turns on.

The LED Widget can also blink and change color dynamically, see the Arduino Manager Documentation form more details.

So far we have used different Widgets to display the information coming from the Uno R4. Really often we also need to control something connected to the board. We are now going to turn the Yellow LED on and off using the Switch Widget.

Add a Switch Widget and configure it as follows:

• Name: Yellow LED
• Variable: Yellow_LED

Connecting Arduino Manager to the board you can turn the yellow LED on and off by operating the Switch LED on Arduino Manager.

If you need to temporarily operate something (e.g. a motor), you can take advantage of the Push Button Switch. It sends a signal to the board when it is pushed and another when it is released, in that way you can keep something activated (or disactivated) for as long as the button is being pushed.

Add a Push Button Widget and configure it as follows:

• Name: Show Logo
• Variable: Show
• Color: Choose a color you like

Connecting Arduino Manager to the board you can make the the AM logo on the R4's display as far as you keep the button pressed.

Traditional Arduino boards use a PWM signal to control the light intensity of an LED. Arduino R4 provides a DAC which can be used as well. To control the voltage generated by the DAC we can use the Knob Widget which sends a value proportional to the wiper's position of the Widget.

Add a Knob Widget and configure it as follows:

• Name: Red LED
• Variable: Red_LED
• Min: 340 (below a voltage of about 1.5V the LED is always off)
• Max: 1023
• Color: Choose a color you like

Connecting Arduino Manager to the board you can change the Red LED's light intensity moving the knob up and down.

You can double tap the Widget to zoom it in and to have a better control of the Knob's wiper.

Since we have a temperature and humidity sensor, it quite easy to automatically store measurements during the day and display them on a graph.

Arduino Manager provides the Logged Data Graph Widget for that purpose.

Add a Logged Data Graph Widget to show the graph of the temperature in Celsius and configure it as follows:

• Name: Temperature
• Variable: Graph_TC

Add a Logged Data Graph Widget to show the graph of the temperature in Fahrenheit and configure it as follows:

• Name: Temperature
• Variable: Graph_TF

Add a Logged Data Graph Widget to show the graph of humidity and configure it as follows:

• Name: Temperature
• Variable: Graph_H

Connect Arduino Manager to the Uno R4, double tap on one of the graphs and tap the update button then the graph shows up. You can scroll the graph to the left to show more data.

On Uno R4 data are stored every five minutes, so you have to wait a while before the graph shows a significant number of data.

To collect data more frequently you can change this value in the code and upload it again:

#define TEMPERATURE_STORE_PERIOD 5 * 60000  // 5 minutes [ms]

The code for supporting Arduino Manager is mainly based on four functions:

1. doWork - Replaces the loop functions. Here goes your code.
2. processIncomingMessages - Receives information from the connected device
3. processOutgoingMessages - Sends information to the connected device
4. doSync - Sends status information to the device as soon as it connects

Let's see each function.

The doWork replace the standard Arduino's loop function.

void doWork() {
  // Reading DHT22 sensor periodically

  // Storing Temperature and humidity periodically

  // Reading ADC 

  // Reading if the Push Button is pressed or not
}

About the code to read the DHT22 sensor, the ADC and the push button nothing has to be said, because it is standard code. About the code to store temperature on the SD Card:

...
amController.sdLog("Graph_TC", now, temperature);
...

The sdLog function does everything for you. Keep in mind that the first parameter is the name of the variable used in the Logged Data Graph Widget on Arduino Manager.

The function initializeOrCleanLog creates the log files (or purge them when they are too big) and add the labels to display in the Logged Data Graph Widget:

amController.sdLogLabels("Graph_TC", "T [C]");

The processIncomingMessages is called for each message received and has two parameters:

• variable - the variable name associated to the widget which is sending data
• value - data associated to the widget. For example, in case if the Switch Widget value is 0 if the switch is off and 1 if it is on.

void processIncomingMessages(char *variable, char *value) {  
  if (strcmp(variable, "Yellow_LED") == 0) {
    digitalWrite(YELLOW_LED_PIN, atoi(value));
  }

  if (strcmp(variable, "Show") == 0) {
      if (atoi(value) == 1) {
        matrix.loadFrame(AM_Logo);
      } else {
        matrix.loadFrame(AM_Clear);
      }
   }
  
   if (strcmp(variable, "Red_LED") == 0) {
      analogWrite(RED_LED_PIN, atoi(value));
   }
 }

The processOutgoingMessages is called periodically (only when the iOS / iPadOS / macOS device is connected) allowing to send data to Arduino Manager:

void processOutgoingMessages() {
  amController.writeMessage("T", temperature);
  amController.writeMessage("H", humidity);
  amController.writeMessage("Pot", potentiometer);
  amController.writeMessage("Button", pushButtonPressed);
}

The first parameter of the writeMessage is the name of the variable of the Widget to update and the second is the value. In the first call we are updating whatever widget has the variable T with the current temperature value.

The doSync function is called only once when the device gets connected to Arduino and Arduino sends information for initializing some Widgets like Switch Widget and Knob Widget.

If the LED has changed status from previous connection, the device has to know if the Switch Widget has to be initialized on or off. The same for the position of the Knob Widget.

void doSync() {
  amController.writeMessage("Yellow_LED", digitalRead(YELLOW_LED_PIN));
  amController.writeMessage("Red_LED", analogRead(RED_LED_PIN));
}

More information about how to write the code and about the available library functions are in the documentation (Arduino Manager Documentation).

So far you have learned how to use Arduino Manager and some of the available Widgets. If you want to learn more:

• Read the documentation directly from the app or here: Arduino Manager Documentation.
• Try to write your own code starting from the skeleton provided in the library.
• Experiment with the other available Widgets
• Learn more on Arduino Manager Code Generator and the Arduino Manager PIN Code Generator (documentation available directly from the app):

Arduino Manager Code Generator (available for an additional price directly from the application), generates the sketch skeleton and the callback functions for each used Widget. It helps you in writing your Arduino code hiding all the communication details and reducing the chances of errors.

Arduino Manager PIN Code Generator (available for an additional price directly from the application), together with the Code Generator it creates the standard code for reading and writing data from the specified analog and digital pins. In many cases, the genearated code is ready to be run without any additional effort.