This tutorial shows you how to build a battery voltage level indicator with red, yellow and green areas for the
good, almost good and critical range of the battery voltage. To do this, we will use three Linear Level Indicators
put on top of each other. What does this mean?

If you right click one of the elements on your RemoteXY editor screen, you might have recognized the last
for items "....."

Each element placed in the editor is put on its own "level". You may think about these levels like glass frames stacked on each other.
Viewing from top you can see all the elements, but you can also move the elements over each other, sometimes hiding one element
below the other. Here is one example: a text element placed on top of a panel element. The text background is switched off, so that
the text background becomes the panel color and shape ( using "lowered" option ).

Or you can place a button element below a LED element. Still the button function is available, even the
button is behind the LED. This way you can have a nice push-on/off button with indicator LED.

Coming back to the battery level indicator. We are using three Linear Level Indicators.
We change the size and the color as shown here.

We can add a panel element and move the for elements over each other. Please note the order. The panel is in the back. Use the
right-click-context menu and select "To back" if this is not the case. On top of the panel, the green Level Indicator will be placed.
The the context menu again to change the order. Once again, all elements are active, even you would move the Level Indicator
behind the panel, making it invisible.

This was the hardest part already. Add a slider element and a text element and your done with the screen setup.

This might look a little bit weird, but in the end it's perfect:

The Arduino code is here:

void setup() 
{
  RemoteXY_Init (); 
  // TODO you setup code
  RemoteXY.level_grn = 0 ;
  RemoteXY.level_yel = 0 ;
  RemoteXY.level_red = 0 ;
  
}

#define LEVEL_YEL 20
#define LEVEL_GRN 68
void loop() 
{ 
int value ;
  RemoteXY_Handler ();

  value = RemoteXY.slider ;
  sprintf(RemoteXY.text, "%5d", value);
  if ( value < LEVEL_YEL ) {
      RemoteXY.level_red = map(value,0, LEVEL_YEL,0, 100) ;
      RemoteXY.level_yel = 0 ;
      RemoteXY.level_grn = 0 ;
  }
  if ((value >= LEVEL_YEL) && (value<LEVEL_GRN)) {
      RemoteXY.level_red = 100 ;
      RemoteXY.level_yel = map(value,0, LEVEL_GRN,0, 100) ;    
      RemoteXY.level_grn = 0 ;      
  }
  if ( value >= LEVEL_GRN ) {
      RemoteXY.level_red = 100 ;
      RemoteXY.level_yel = 100 ;
      RemoteXY.level_grn = map(value,0, 100,0, 100) ;    
  }
}