How to use Color Widget

Software IoT Cloud
1

Hello everyone, I would like to add the color widget to my project. My goal is for example if analog sensor value is xxx, then set the color to yellow etc....
I created the widget and attached it to a variable Cloud color named color.
But I cannot find in the documentation how to set the color. I tried
color = #FFFFED or color = "#FFFFED" but the compiler does not like it. Does anyone as an example on setting the color of a color widget? Thank you.

widget-color
widget-color1920×1080 19.2 KB

2

I found that in the documentation but I do not understand how to use it.

uint8_t r, g, b;
rgbVariable.getValue().getRGB(r, g, b);

3

Hi @jimmy747. Do you specifically want to know how to set the color using the hex value as you attempted here:

Or are you OK with setting it using the hue, saturation, brightness (AKA "HSV") values like the ones shown in the first three fields of the screenshot you shared.

Or would you like to use red, green, blue ("RGB") values to set the color?

4

Hello ptillisch, Thank you. I am working hard at it but all I got is a headache!
I am trying to keep this simple. To answer your question, RGB seems easy for me. In my code, depending on a sensor value I need to set the color to different colors. It is easy for me to google light yellow and come up with 255, 255, 191 for a pale yellow as an example. hard coding my 3 different colors I need is no problem. So in the documentation under CloudColoredLight it shows x.setRGB(r,g,b) so i add to my code myvariable.setRGB(255,255,191); but I get error below. setSwitch(1) does work. Thank you very much for your help.

/tmp/2741674287/WIDGETS_TESTING_sep24a/WIDGETS_TESTING_sep24a.ino: In function 'void onSelectionChange()': /tmp/2741674287/WIDGETS_TESTING_sep24a/WIDGETS_TESTING_sep24a.ino:67:19: error: 'class CloudColoredLight' has no member named 'setRGB' ChlorineLevel.setRGB(255, 255, 191); ^ Error during build: exit status 1

5

Here is a simple Thing sketch that demonstrates setting the colors of a "Colored Light" (CloudColoredLight) variable using RGB values:

#include "thingProperties.h"

// Instantiate objects for each of the pre-set colors.
// The constructor requires HSV values but we want to use RGB in the sketch code so we use dummy values here and set the actual RGB values in the setup function.
ColoredLight red(true, 0, 0, 0);
ColoredLight blue(true, 0, 0, 0);
void setup() {
  Serial.begin(9600);
  delay(1500);

  initProperties();

  ArduinoCloud.begin(ArduinoIoTPreferredConnection);

  setDebugMessageLevel(2);
  ArduinoCloud.printDebugInfo();

  // Set the pre-set color objects using RGB values
  red.setColorRGB(255, 0, 0);
  blue.setColorRGB(0, 0, 255);
}

void loop() {
  ArduinoCloud.update();

  if (analogRead(A0) > 500) {
    myvariable = red;
  } else {
    myvariable = blue;
  }
}

void onMyvariableChange() {}

Note that the "Color" Arduino IoT Cloud dashboard widget shown in your screenshot doesn't work with "Colored Light" variables. It only works with "Color" (CloudColor type) variables. You must use the "Colored light" widget with a "Colored Light" variable. The above sketch can easily be adjusted to use a "Color" variable instead of "Colored Light" if you prefer that, and would actually be slightly more simple. If you would like assistance with that I would be happy to help.

1 Like
6

Thank you! That is awesome! This is a great help! While I was waiting for your reply i was trying different things. I got this to work also. For example blue. But I prefer your code! Thank you again, I can continue. I love doing Arduino. IoT makes it easier too without the need to constantly adding libraries.

MyVariable.setHue(236);
MyVariable.setSaturation(87);
MyVariable.setBrightness(50);

7

You are welcome. I'm glad if I was able to be of assistance.

Nice work! I discovered while I was investigating this request that the design of the ArduinoIoTCloud library API makes it more convenient to work with HSV values than RGB. So if you don't have a strong preference for RGB then it is worth considering using HSV instead.

RGB can be more intuitive (e.g., it is obvious that 255, 0, 0 is pure red) but there are advantages to HSV as well.

Regards,
Per

1 Like
8

No problem at all using HSV. I found the HSL online color picker online, you click on the color and you get the HSV. Thanks again for time. You made a newbie very happy! See you on my next road block (hopefully not too many!)

9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.