Lesson 4: Changing Colours

 

Written by Jonathan Sim

You can find this lesson and more in the Arduino IDE (File -> Examples -> Andee). If you are unable to find them, you will need to install the Andee Library for Arduino IDE.

Works on iOS and Android
In this lesson, I'll show you how to change the colours of text, buttons and displays!

Contents

Top of the Code

Always include these libraries. Annikken Andee needs them to work with the Arduino!

#include <SPI.h>
#include <Andee.h>

// We'll create several display boxes to demonstrate how you
// can make use of the various available colours!
AndeeHelper box1;
AndeeHelper box2;
AndeeHelper box3;
AndeeHelper box4;
AndeeHelper box5;
AndeeHelper box6;
AndeeHelper box7;
AndeeHelper box8;
AndeeHelper box9;
AndeeHelper box10;
AndeeHelper box11;
AndeeHelper box12;

In case you're wondering why the need for so many boxes, here's the reason why:

Lesson04.png

setup()

The setup() function is meant to tell Arduino what to do only when it starts up.

void setup()
{
  Andee.begin();  // Setup communication between Annikken Andee and Arduino
  Andee.clear();  // Clear the screen of any previous displays
  setInitialData(); // Define object types and their appearance
}

setInitialData()

There are a few methods to change the colours of your screen objects.

Method 1: Using Preset Themes Here are the preset theme options that you can choose:

Screenshot.jpg
  • THEME_TURQUOISE
  • THEME_TURQUOISE_DARK
  • THEME_GREEN
  • THEME_GREEN_DARK
  • THEME_BLUE
  • THEME_BLUE_DARK
  • THEME_PURPLE
  • THEME_PURPLE_DARK
  • THEME_MIDNIGHT
  • THEME_MIDNIGHT_DARK
  • THEME_YELLOW
  • THEME_YELLOW_DARK
  • THEME_ORANGE
  • THEME_ORANGE_DARK
  • THEME_RED
  • THEME_RED_DARK
  • THEME_GREY
  • THEME_GREY_DARK
  • THEME_DEFAULT
  • THEME_DEFAULT_DARK


These preset names can be used for the following commands:

  • setColor()
  • setTextColor()
  • setTitleColor()
  • setTitleTextColor()


For text colour, you can use:

  • TEXT_DARK
  • TEXT_LIGHT


Method 2: Using preset colour names

Here are the preset colour options that you can use:

Click the image above to view all the available colour codes

That's a lot of colours that you can play with!

These preset colour names can be used in:

  • setColor()
  • setTextColor()
  • setTitleColor()
  • setTitleTextColor()


Method 3: Using ARGB Colour Codes

ARGB colour codes are like the hexadecimal colour values that you see in web design, but with an added alpha channel. A typical ARGB colour code looks like this:

 FF114455
   
  • The first two characters control the alpha channel (from 00 to FF)
  • The next two characters control the red channel (from 00 to FF)
  • The next two characters control the green channel (from 00 to FF)
  • The last two characters control the blue channel (from 00 to FF)

The ARGB colour codes can be used in:

  • setColor()
  • setTextColor()
  • setTitleColor()
  • setTitleTextColor()


void setInitialData()
{ 
  // Here are some examples of Method 1:
  box1.setId(0);
  box1.setType(DATA_OUT);
  box1.setLocation(0,0,ONE_THIRD); // Row 1, Left
  box1.setTitle("Hello");
  box1.setData("World!");
  // Here's the code to set colours:
  box1.setColor(THEME_TURQUOISE); // Sets the background colour
  box1.setTextColor(TEXT_LIGHT); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box1.setTitleColor(THEME_TURQUOISE_DARK); // Title background colour
  box1.setTitleTextColor(TEXT_LIGHT); // Title font colour
  
  box2.setId(1);
  box2.setType(DATA_OUT);
  box2.setLocation(0,1,ONE_THIRD); // Row 1, middle
  box2.setTitle("Hello");
  box2.setData("World!");
  // Here's the code to set colours:
  box2.setColor(THEME_PURPLE); // Sets the background colour
  box2.setTextColor(TEXT_LIGHT); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box2.setTitleColor(THEME_PURPLE_DARK); // Title background colour
  box2.setTitleTextColor(TEXT_LIGHT); // Title font colour
  
  box3.setId(2);
  box3.setType(DATA_OUT);
  box3.setLocation(0,2,ONE_THIRD); // Row 1, right
  box3.setTitle("Hello");
  box3.setData("World!");
  // Here's the code to set colours:
  box3.setColor(THEME_MIDNIGHT); // Sets the background colour
  box3.setTextColor(TEXT_LIGHT); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box3.setTitleColor(THEME_MIDNIGHT_DARK); // Title background colour
  box3.setTitleTextColor(TEXT_LIGHT); // Title font colour

  // Here are some examples of Method 2:
  box4.setId(3);
  box4.setType(DATA_OUT);
  box4.setLocation(1,0,ONE_THIRD); // Row 2, Left
  box4.setTitle("Hello");
  box4.setData("World!");
  // Here's the code to set colours:
  box4.setColor(SKY_BLUE); // Sets the background colour
  box4.setTextColor(GHOST_WHITE); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box4.setTitleColor(DEEP_SKY_BLUE); // Title background colour
  box4.setTitleTextColor(GHOST_WHITE); // Title font colour
  
  box5.setId(4);
  box5.setType(DATA_OUT);
  box5.setLocation(1,1,ONE_THIRD); // Row 2, middle
  box5.setTitle("Hello");
  box5.setData("World!");
  // Here's the code to set colours:
  box5.setColor(CORAL); // Sets the background colour
  box5.setTextColor(LAVENDER_BLUSH); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box5.setTitleColor(TOMATO); // Title background colour
  box5.setTitleTextColor(LAVENDER_BLUSH); // Title font colour
  
  box6.setId(5);
  box6.setType(DATA_OUT);
  box6.setLocation(1,2,ONE_THIRD); // Row 2, right
  box6.setTitle("Hello");
  box6.setData("World!");
  // Here's the code to set colours:
  box6.setColor(DARK_CYAN); // Sets the background colour
  box6.setTextColor(WHITE); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box6.setTitleColor(PALE_TURQUOISE); // Title background colour
  box6.setTitleTextColor(DARK_CYAN); // Title font colour  
    
  // Here are some examples of Method 3
  box7.setId(6);
  box7.setType(DATA_OUT);
  box7.setLocation(2,0,ONE_THIRD); // Row 3, Left
  box7.setTitle("Hello");
  box7.setData("World!");
  // Here's the code to set colours:
  box7.setColor("FFFFB6C1"); // Sets the background colour
  box7.setTextColor("FFFFFFF0"); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box7.setTitleColor("FFFF69B4"); // Title background colour
  box7.setTitleTextColor("FFFFFFF0"); // Title font colour
  
  box8.setId(7);
  box8.setType(DATA_OUT);
  box8.setLocation(2,1,ONE_THIRD); // Row 3, middle
  box8.setTitle("Hello");
  box8.setData("World!");
  // Here's the code to set colours:
  box8.setColor("FFFFF5EE"); // Sets the background colour
  box8.setTextColor("FF000000"); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box8.setTitleColor("FFA9A9A9"); // Title background colour
  box8.setTitleTextColor("FFFFFFFF"); // Title font colour    

  box9.setId(8);
  box9.setType(DATA_OUT);
  box9.setLocation(2,2,ONE_THIRD); // Row 3, right
  box9.setTitle("Hello");
  box9.setData("World!");
  // Here's the code to set colours:
  box9.setColor("FF778899"); // Sets the background colour
  box9.setTextColor("FFFFFAFA"); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box9.setTitleColor("FF2F4F4F"); // Title background colour
  box9.setTitleTextColor("FFFFFAFA"); // Title font colour  
  
  // You can mix the above three methods! You don't have to stay strictly 
  
  // Here's are some examples:
  box10.setId(9);
  box10.setType(DATA_OUT);
  box10.setLocation(3,0,ONE_THIRD); // Row 4, Left
  box10.setTitle("Hello");
  box10.setData("World!");
  // Here's the code to set colours:
  box10.setColor(THEME_RED); // Sets the background colour
  box10.setTextColor("FFFFFFFF"); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box10.setTitleColor(THEME_RED_DARK); // Title background colour
  box10.setTitleTextColor(WHITE); // Title font colour
  
  box11.setId(10);
  box11.setType(DATA_OUT);
  box11.setLocation(3,1,ONE_THIRD); // Row 4, middle
  box11.setTitle("Hello");
  box11.setData("World!");
  // Here's the code to set colours:
  box11.setColor(THEME_YELLOW); // Sets the background colour
  box11.setTextColor(TEXT_LIGHT); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box11.setTitleColor("FFF39C12"); // Title background colour
  box11.setTitleTextColor("FFFFFFFF"); // Title font colour
  
  // You can also use the default Andee theme colours!
  box12.setId(11);
  box12.setType(DATA_OUT);
  box12.setLocation(3,2,ONE_THIRD); // Row 4, right
  box12.setTitle("Hello");
  box12.setData("World!");
  // Here's the code to set colours:
  box12.setColor(THEME_DEFAULT); // Sets the background colour
  box12.setTextColor(WHITE); // Sets the font colour
  // The code below applies ONLY to display boxes. These will set the colour of the display box's title bar
  box12.setTitleColor(THEME_DEFAULT_DARK); // Title background colour
  box12.setTitleTextColor(WHITE); // Title font colour     
}

loop()

Arduino will run instructions here repeatedly until you power it off.

void loop()
{
  box1.update(); // Update to show all the boxes on screen
  box2.update();
  box3.update();
  box4.update();
  box5.update();
  box6.update();
  box7.update();
  box8.update();
  box9.update();
  box10.update();
  box11.update();
  box12.update();
  
  // A short delay is necessary to give Andee time to communicate with the smartphone
  delay(500); 
}
comments powered by Disqus