Contents

How to use the graphical interface for your tasks

And so. You already have downloaded the source code for the microcontroller, for example a sketch for the Arduino, you opened it in the IDE. In the simplest case, you can download the sketch in Arduino board and test your interface immediately, connecting via a smartphone. But often you need to integrate the developed graphical interface with your problem you want to solve it using the Arduino. Next, we will show how it is easy to do.

The generated source code have a part that is starts with tag RemoteXY include library and ends with tag END RemoteXY include. This part of the code defines the structure of the graphical interface that you have created. In turn, this structure is also divided into parts. Consider the order.

Select connection mode and include library

The code contains a definition of how you use the connection of interface. This definition of the form REMOTEXY_MODE__ XXX. For example, if you use SoftwareSerial, this definition would be REMOTEXY_MODE__SOFTWARESERIAL, if you use HardwareSerial - REMOTEXY_MODE__SERIAL respectively.

Additionally this section of code contains the necessary includes libraries to provide the necessary functionality. Also connects library RemoteXY.h. There is no need to change this part of code.

The example code fragment below.


/* RemoteXY select connection mode and include library */ 
#define REMOTEXY_MODE__SOFTWARESERIAL 
#include <SoftwareSerial.h> 
#include <RemoteXY.h>

Connection settings

This part of the code in more detail defines the characteristics of the selected connection. For example, if you are using a connection via SoftwareSerial, you can determine which pins microcontroller will be connected to the Bluetooth module. You can also determine the rate of exchange with the Bluetooth module, if it is different from the default 9600 baud. All definitions are set by default, but you can change them as you need. This is the only section of code in the included section of RemoteXY that you can change.

The example code fragment below.


/* RemoteXY connection settings */ 
#define REMOTEXY_SERIAL_RX 2 
#define REMOTEXY_SERIAL_TX 3 
#define REMOTEXY_SERIAL_SPEED 9600

RemoteXY configurate

This part contains an array of bytes, which will tell the mobile app about how to build a graphical interface. This part of the code contains the description of all control items on the interface, their position, color, and other settings. These data are encrypted, and you don't need to change them. When changing the graphical interface in the online editor with the subsequent generation of a new code, you can get new data that describes your modified interface.

The example code fragment below.


/* RemoteXY configurate  */ 
unsigned char RemoteXY_CONF[] = 
  { 2,2,37,0,1,5,2,0,9,8
  ,32,16,2,79,78,0,79,70,70,0
  ,4,0,78,9,13,50,2,65,4,46
  ,8,16,16,2,66,128,8,47,63,11
  ,2 };

Data structure of control interface

This part of the code define the structure of RemoteXY designed to interact with the graphical interface. This is the structure you should use when developing their solutions using the interface. The structure contains the definition of data in each element of the interface. You can read the state of an element. For example, to find out, pressed the button on the graphical interface or not pressed, you should be read the value of the field of RemoteXY structure, responsible for this button. You can also see the position of the joystick or slider, reading the value from the corresponding field of RemoteXY structure. You can easily transfer data to the display elements, such as LEDs. It is sufficient to record the new value in the field of RemoteXY structure corresponding to that element.

The example code fragment below.


/* this structure defines all the variables of your control interface */ 
struct { 

    /* input variable */
  unsigned char switch_1; /* =1 if switch ON and =0 if OFF */
  unsigned char slider_1; /* =0..100 slider position */

    /* output variable */
  unsigned char led_1_r; /* =0..255 LED red brightness */
  unsigned char level_1; /* =0..100 level position */

    /* other variable */
  unsigned char connect_flag;  /* =1 if wire connected, else =0 */

} RemoteXY;

Setup function

An example of how to set the initial position of the switch.


void setup()  
{ 
  RemoteXY_Init ();  
   
  pinMode (PIN_SWITCH_1, OUTPUT);
   
  // TODO you setup code 
   
  RemoteXY.switch_1 = 1; // After the start switch is "on"
}

Loop function

Function loop() is the call handler RemoteXY_Handler (). Do not remove this code. Handler RemoteXY_Handler must be called in each cycle of the program. The call is necessary to ensure that the RemoteXY library could handle another batch of data about the control elements that are transferred from the smartphone and put on the new data about the state of the display elements in smartphone.

In the loop() function you implement a program that solves your problem with using a graphical interface. To interact with a graphical interface, you must use field of the RemoteXY structure, that correspond to the controls and display elements in graphical interface. To read the state of the control, you need to read the data field corresponding to that element. That would change the state of the display element on the graphical interface, you must write a new value into the field of the RemoteXY structure corresponding to that element.

The attention. It is not recommended in the main loop to use the delay. If the handler RemoteXY_Handler will not be able to convey the necessary information on the smartphone, it will break connection.

Example code to interact with the controls and display.


void loop()  
{  
  RemoteXY_Handler (); 
   
  // TODO you loop code 
  // use the RemoteXY structure for data transfer  
  
  // Turn on the led on the Board pin 13 on the switch switch_1
  if (RemoteXY.switch_1 == 1) digitalWrite (13, HIGH);
  else digitalWrite (13, LOW);   

  // Light led led_1_r on the graphical interface if pin 5 is the voltage
  if (digitalRead(5)==HIGH) RemoteXY.led_1_r = 255;
  else RemoteXY.led_1_r = 0;
  
}

Replace delay()

If your code still needs delay(), you can replace it with RemoteXY_delay(). The RemoteXY_delay function from RemoteXY will also provide a delay in milliseconds, but RemoteXY will still work.


void loop()  
{  
  RemoteXY_Handler (); 

  digitalWrite(LED_BUILTIN, HIGH);   // turn on LED_BUILTIN
  RemoteXY_delay(1000);              // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn off LED_BUILTIN
  RemoteXY_delay(1000);              // wait for a second  
}