How to use a variable in an argument ?

[espruino-discuss]

Posted at 2021-01-10 by Guillaume_G

Hey!
I'm trying to stock the RGB color code in variables but I don't know how to use it in an argument like the argument of the g.setColor() function.
Here is my code

// set up the parameters of the dial
var xC = 120;
var yC = 120;
var rC = 100;

// define the RGB code for each color
var red = (1,0,0);
var blue = (0,0,1);
var green = (0,1,0);
var yellow = (1,1,0);
var cyan = (0,1,1);
var purple = (1,0,1);
var pink = (1,0,0.5);
var pulpit = (1,0.5,0.5);
var lightBlue = (0.5,0.5,1);
var lime = (0,1,0.2);
var orange = (1,0.5,0);
var darkGreen = (0.2,0.5,0.2);
var brown = (0.5,0.2,0);
var bordeaux = (0.4,0,0.2);
var gris = (0.5,0.5,0.5);


function drawCircle() {
 //here is the function where I want to put the variable in argument (this actually doesn't work but its to show you my idea
  g.setColor (blue);
  g.drawCircle(xC, yC, rC);
}

g.clear();
drawCircle();

(this code doesn't work )
I don't know how to transfer the values of one variable in the arguments
I hope you see what I'm trying to do if not ask me ;)
Thanks for your help

[espruino-discuss]

Posted at 2021-01-10 by Robin

Sun 2021.01.10

Hi @Guillaume_G chew on this for a while

The issue appears to be L26 with an incorrect parameter list.

Espruino reference for setColor() function: > http://www.espruino.com/Reference#l_Graphics_setColor
This is a great web site to test Javascript concepts:

Tutorial and Examples along with a 'TryIt' editor

https://www.w3schools.com/js/js_functions.asp

This may also be solved using either Arrays or JSON object notation.

https://www.w3schools.com/jsref/jsref_entries.asp
https://www.w3schools.com/jsref/jsref_obj_json.asp

If you wish to stay in base10 then these snippets might be one way

aryRGB =[
  { "r": 255, "g": 0, "b": 0 },
  { "r": 171, "g": 85, "b": 0 },
  { "r": 171, "g": 171, "b": 0 },
  { "r": 0, "g": 255, "b": 0 },
  { "r": 0, "g": 171, "b": 85 },
  { "r": 0, "g": 0, "b": 255 },
  { "r": 85, "g": 0, "b": 171 },
  { "r": 171, "g": 0, "b": 85 }
 ]


    var aryRGB = new Uint8ClampedArray( this.aryColors.length );
    aryRGB = this.aryColors;


    var r = aryRGB[i].r;
    var g = aryRGB[i].g;
    var b = aryRGB[i].b;

or maybe in hex

const RGB = {
  
  AliceBlue  : "F0F8FF",
  AntiqueWhite : "FAEBD7",
  Aqua       : "00FFFF",
  Aquamarine : "7FFFD4",

    . . . 


// User defined functions required to extract each value

    this.decR = Color.cvrtHexToDec(this.colorR);


    var vals = {};
    vals.r = this.decR;
    vals.g = this.decG;
    vals.b = this.decB;

and if you get stuck on the gristle, I'll check back in a few hours to get you over the goal post.

[espruino-discuss]

Posted at 2021-01-10 by @MaBecker

@Guillaume_G take a look at this file

https://github.com/espruino/BangleApps/blob/master/apps/scolor/show-color.js

[espruino-discuss]

Posted at 2021-01-11 by @allObjects

...this is really a weird piece of code... with every button 1 press, a new watch on button 1 is created... furthermore, the index runs away... (of course, only after quite many presses). Fixing of the code is removing the first repeating watch and changing the second one to repeat. For the index, remove the modulo in every array access, and replace the simple increment with index = ++index % maxColors;. Looking at why maxColors is needed to be set manually, I decided to give this code a face lift, because it's less to rewrite than instruct what to change to make it ... (you can call it whatever you want).

/* jshint esversion: 6 */
(function() {

  const colors = [
    { value: 0x0000, name: "Black" },
    { value: 0x000F, name: "Navy" },
    { value: 0x03E0, name: "DarkGreen" },
    { value: 0x03EF, name: "DarkCyan" },
    { value: 0x7800, name: "Maroon" },
    { value: 0x780F, name: "Purple" },
    { value: 0x7BE0, name: "Olive" },
    { value: 0xC618, name: "LightGray" },
    { value: 0x7BEF, name: "DarkGrey" },
    { value: 0x001F, name: "Blue" },
    { value: 0x07E0, name: "Green" },
    { value: 0x07FF, name: "Cyan" },
    { value: 0xF800, name: "Red" },
    { value: 0xF81F, name: "Magenta" },
    { value: 0xFFE0, name: "Yellow" },
    { value: 0xFFFF, name: "White" },
    { value: 0xFD20, name: "Orange" },
    { value: 0xAFE5, name: "GreenYellow" },
    { value: 0xF81F, name: "Pink" }
  ];

  const colorCount = colors.length;
  var index = -1, color;

  function drawColor() {
    // 'get' - point to - next color
    color = colors[index = ++index % colorCount];

    // draw filled rectangle
    g.setColor(color.value)
     .fillRect(0, 24, g.getWidth(), g.getHeight())

    // draw value name of color
     .setFontAlign(0, 0)
     .setColor((color.name == "White") ? 0 : 0xFFFF)
     .setFont("6x8", 4)
     .drawString('0x' + color.value.toString(16), 120, 80)
     .setFont("6x8", 3)
     .drawString(color.name, 120, 160)

    // draw next button info
     .setFont("6x8", 2)
     .setFontAlign(0, 0, 3)
     .drawString("Next", 230, 46)

     ;

  }

  g.clear();
  setWatch(drawColor, BTN1, { repeat: true });
  E.showMessage("Press BTN1\nto start");

})();

PS: I assume that creator of this code confused that the original design did not work with repeated watching button 1 outside of the drawColor() function - that no matter what value the repeat(e) option property was given - it just did not work so the watch, the second one inside the loop was established... this time with proper spelling of the repeat: option property...

(...this in the official Espruino repo... @gfwilliams, I guess introducing an ESR### - like the JSR### - process would give a bit more stability to the code base. To not stifle the contribution process, it could be a two stage app repository, where a new or changed app first goes into a staging mode / area / ... and move into the final place only after community feedback.)

[gfwilliams]

Posted at 2021-01-11 by @gfwilliams

Hi! It depends a bit what platform you're aiming for...

• @robin's code is designed for neopixels and leans on Color.cvrtHexToDec which I think is a function that he's made (it's not in core Espruino).
• @MaBecker and @allObjects 16 bit colors will work great with Bangle.js or other 16 bit LCDs, but won't work on neopixels or 24 bit displays.

One way of doing it that is efficient and portable between different displays is to use the hex string format that newer Espruino firmwares support:

var red = "#ff0000"; // #rrggbb
...
g.setColor(red);

[espruino-discuss]

Posted at 2021-01-11 by @allObjects

@gfwilliams,

for that reason I created implemented an overridable custom color setter in my UI work. I took advantage of your normation of 3 values from 0..1 for each of the RGB color. From that I map with the custom setter to what the connected display needs. Everyone goes for a logical / abstract / common graphic layer to keep the api and most of the code the same across displays.

[espruino-discuss]

Posted at 2021-01-17 by Guillaume_G

Yes in this format it works thanks!