RGB Led Project - Help

[espruino-discuss]

Posted at 2016-12-09 by GarrettL

in function called from system
Uncaught Error: Function "getPattern" not found!
at line 129 col 1
getPattern();
^
in function called from system

Unknown LCD code 35208 35209

| |_ ___ ___ _ ||___ ___
| |_ -| . | _| | | | | . |
||| || |_|||_|_|

      |_| http://espruino.com
1v84 Copyright 2015 G.Williams
I keep getting this error, the first part will send 100+ times. and the actual program is this, any ideas?

/*var sensor = require("HC-SR04").connect(C6,C7,functio­n(dist) {
console.log(dist+" cm away");
});
setInterval(function() {
sensor.trigger(); // send pulse
}, 500);
*/

SPI2.setup({baud:3200000, mosi:B15});
var rgb = new Uint8Array(50*3);

var pos=0;

function lightsOff() {
clearInterval(cycle);
pos++;
for (var i=0;i<rgb.length;i+=3) {

rgb[i  ] = 0;
rgb[i+1] = 0;
rgb[i+2] = 0;
}
SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patterns = [];
//patterns.push(lightsOff);
patterns.push(function() {
// Fading white lights

pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = (Math.sin(i+pos*0.2)+1) * 127;
 rgb[i  ] = col;
 rgb[i+1] = col;
 rgb[i+2] = col;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(255,255,255);
}
});
patterns.push(function() {
// Red Light
pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = 255;
 rgb[i  ] = col;
 rgb[i+1] = 0;
 rgb[i+2] = 0;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(255,0,0);
}
});
patterns.push(function() {
// Green Light
pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = 255;
 rgb[i  ] = 0;
 rgb[i+1] = col;
 rgb[i+2] = 0;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(0,255,0);
}
});
patterns.push(function() {
// Blue Light
pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = 255;
 rgb[i  ] = 0;
 rgb[i+1] = 0;
 rgb[i+2] = col;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(0,0,255);
}
});
patterns.push(function() {
// Yellow light
pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = 255;
 rgb[i  ] = col;
 rgb[i+1] = col;
 rgb[i+2] = 0;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(255,255,0);
}
});
patterns.push(function() {
// Cyan light
pos++;
for (var i=0;i<rgb.length;i+=3) {

 var col = 255;
 rgb[i  ] = 0;
 rgb[i+1] = col;
 rgb[i+2] = col;
LCD.drawRect(0,0,320,240);
LCD.fillRect(0,0,320,240);
LCD.setColor(0,255,255);
}
});
patterns.push(function() {
// Fading colours
pos++;
for (var i=0;i<rgb.length;i+=3) {

 rgb[i  ] = (1 + Math.sin((i+pos)*0.1324))*127;
 rgb[i+1] = (1 + Math.sin((i+pos)*0.1654))*127;
 rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;
}
});
patterns.push(function() {
// Random blue lights
for (var i=0;i<rgb.length;i+=3) {

 rgb[i  ] = 0;
 rgb[i+1] = 0;
 rgb[i+2] = Math.random()*255;
}
});

var getPattern = patterns[0];

function doLights() {

getPattern();

SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patternNumber = 0;
function changePattern() {
patternNumber = (patternNumber+1);
//% patterns.length;
getPattern = patterns[patternNumber];
}

setWatch(changePattern, BTN, { repeat: true, edge:'rising' });
//falling
cycle = setInterval(doLights,50);

[espruino-discuss]

Posted at 2016-12-14 by GarrettL

I keep getting this error, the first part will send 100+ times. and the actual program is this, any ideas?

[espruino-discuss]

Posted at 2016-12-14 by @allObjects

I cannot see anything wrong in the logic of your code. From what I get is that you fill an array with functions that do different lights. Such a light pattern function is then called every 50ms and you start with pattern with index 0. When you press the button, you increment the index (with modulo, currently commented) and run the new pattern - which you get by invoking next pattern.

...never mind next paragraph (came across your other conversation about A HY Mini-STM32 VCT6 3.2" board... and there LCD is probably defined... the LCD that is part of the board... but you errors with it and that could be the reason all is failing...)...

What is not clear to me is the LCD... I don't see any initialization or so... and do not understand what you want to achieve with it... (btw, you set the color first, before you draw,... drawing the rectangle border first, and then draw a filled rectangle, is that what you want?)

(And btw, cycle is an undeclared global).

To get to the bottom of the story, check each of your pattern function at once...

It is a good practice to put your initiating / starting code into onInit() function, so you can make sure that the upload just sets the stuff up (in your case actually fills up the array), but does not right away start to operate on the data/functions.

After upload, you then enter in the console onInit() and then it begins to run... (if onInit() is too long to type, create a r() - run - function that calls onInit()). You can then also create a s() - stop - function that clears the interval with clearInterval(cycle); to stop the cycling.

[gfwilliams]

Posted at 2016-12-14 by @gfwilliams

LCD is actually built-in on the HY STM32 boards.

I'm not sure I understand what you're doing - for each LED you're completely wiping the screen with fillRect for most patterns - so it's going to be insanely slow and almost certainly not what you want.

If you want to see the lights on the screen, remove all the LCD calls you have, and change doLights to:

function doLights() {
  getPattern();  
  for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(i,0,i+2,10);
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

Your actual problem is changePattern(). It actually works fine until you press the button?

For some reason you've actually commented out the code that made it work - so unsurprisingly it's now broken.

function changePattern() {
  patternNumber = (patternNumber+1);
  //% patterns.length;
  getPattern = patterns[patternNumber];
}

should be:

function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
}

The percent is a 'modulo' - basically if patternNumber gets bigger than the number of patterns then it rolls over back to 0.

Without it, patternNumber gets bigger, and you try and access something in the patterns array that doesn't exist, which gives you undefined.

Finally, you probably also want to debounce the switch, so use:

setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });

instead of just setWatch(changePattern, BTN, { repeat: true, edge:'rising' });

[espruino-discuss]

Posted at 2016-12-15 by GarrettL

/*var sensor = require("HC-SR04").connect(C6,C7,function(dist) {
  console.log(dist+" cm away");
});
setInterval(function() {
  sensor.trigger(); // send pulse
}, 500);
*/

SPI2.setup({baud:3200000, mosi:B15});
var rgb = new Uint8Array(50*3);

var pos=0;

function lightsOff() {
  clearInterval(cycle);
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
    rgb[i  ] = 0;
    rgb[i+1] = 0;
    rgb[i+2] = 0;
  }
 
  SPI2.send4bit(rgb, 0b0001, 0b0011);
  
}
 
var patterns = [];
//patterns.push(lightsOff);
patterns.push(function() {
  // Fading white lights
  LCD.clear();
 
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = col;

  }
});
patterns.push(function() {
  // Red Light
   
  
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
 
  }
});
patterns.push(function() {
  // Green Light 
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;

  }
});
patterns.push(function() {
  // Blue Light 
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;

  }
});
patterns.push(function() {
  // Yellow light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = 0;

  }
});
patterns.push(function() {
  // Cyan light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = col;

  }
});
patterns.push(function() {
  // Fading colours
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = (1 + Math.sin((i+pos)*0.1324))*127;
     rgb[i+1] = (1 + Math.sin((i+pos)*0.1654))*127;
     rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;

  }
});
patterns.push(function() {
  // Random blue lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = Math.random()*255;

    }
});

var getPattern = patterns[0];

function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];


  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patternNumber = 0;
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
}

setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });

//cycle = setInterval(doLights,50);
// this below was ^
function doLights() {
  getPattern();  
  for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(i,0,i+2,10);
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

[espruino-discuss]

Posted at 2016-12-15 by GarrettL

So this is the new code correct? Shouldn't the screen show what the leds are showing and then the screen isn't showing anything?

[gfwilliams]

Posted at 2016-12-16 by @gfwilliams

You seem to have commented out the line cycle = setInterval(doLights,50);

I guess it was failing because you moved the definition of doLights to be after the command, where it was before? Just put the line cycle = setInterval(doLights,50); after you defined doLights.

If you get an error and comment stuff out, can say in the future? It can save a lot of time.

Also, if you want code to show up in the forum properly, you need to highlight it and click the </> code button - I've just done that for you above.

[espruino-discuss]

Posted at 2016-12-17 by GarrettL

Now it won't send it, it either gets a 1/4 of the way on the progress bar or 90 and then it becomes un responsive.

[espruino-discuss]

Posted at 2016-12-20 by GarrettL

any ideas?

[gfwilliams]

Posted at 2016-12-20 by @gfwilliams

Did you change anything else? Did you plug in via the other USB connector this time by mistake?

[espruino-discuss]

Posted at 2016-12-21 by GarrettL

I think i fixed it, thank you so very much!

[espruino-discuss]

Posted at 2016-12-21 by GarrettL

If i want to make the size of the box on the lcd what numbers would i need to adjust?

[espruino-discuss]

Posted at 2016-12-22 by GarrettL

I know how to fix the y2 and that made it taller, any way to make it wider?

[espruino-discuss]

Posted at 2016-12-23 by @allObjects

Check the references for fillRect(...) and drawRect(...).

[espruino-discuss]

Posted at 2016-12-23 by GarrettL

But the code has i, I'm not sure how i can change that. Its not that simple of a rect allObjects

[espruino-discuss]

Posted at 2016-12-23 by @allObjects

@GarrettL, line 143 LCD.fillRect(i,0,i+2,10); is obviously where it happens... and what it does is drawing 50 bars (rectangles) of 3x10 pixels - 3 pixels wide, 10 pixels heigh.

The current setup / code takes advantage of the stepping of 3 and makes it 3 wide... depending on the pixels you have in x-axis, you can make it wider... I assume you have a 240x320 display... I though do not know how you orient it: is x-axis (A) 240 pixels, or (b) 320 pixels... It matters, but not really, because you can calculate it...

I suggest you explore your options with these 3 steps:

1st, replace line 143 with these two lines:

    LCD.fillRect(x,y,x+xd,y+yd);
    x += xi; y += yi;

2nd, insert between line 140 and 141 this line:

  var  x = 0, y = 0;

3rd, to make everything work, you do some prep work between line 10 and 11 with these lines:

var WX = 240, HY = 320, Orient = "y", xi, yi, xd, yd;
if (Orient === "x") {
  xi = Math.floor(WX / (rgb.length / 3)); yi = 0; xd = xi - 1; yd =     29;
} else {
  xi = 0; yi = Math.floor(HY / (rgb.length / 3)); xd =     29; yd = yi - 1;
}

The Constant Orient says in which direction - x or y - you want to show the (50) LEDs and is used to calculate how many pixels you can use per LED to fit in one line in - x or y - direction.

Enjoy!

[espruino-discuss]

Posted at 2016-12-24 by GarrettL

Or it just has a delay of the showing

[espruino-discuss]

Posted at 2016-12-24 by @allObjects

@GarrettL, what I prepared for you are 2 emulations in html5 and movie clips of them running: your initial code and then the code with my suggestion changes to display the LEDs on the display in maximal size - in either vertical or horizontal orientation . Click RGBLightsEmulation2.html link, play with it, view the source (in the browser). To run it on Espruino, copy the portion from line 29 through 223 to the Espruino Web IDE, upload it to your board, and run it by entering in the console lightsOn() and lightsOff(), respective.

I used emulation to verify the code because I do not have the LED string and didn't want to wire up my SPI connected LCD to Original/Pico/Wifi/Puck Espruino boards (using the LCD over SPI is so slow that it does not allow to have 50ms redraw cycles... :(... ). Furthermore, emulation shows that cross development is easily and quickly to achieve, is very useful, and is fun. Note that I use your Espruino code as is (with a minor fix that has nothing to do with the emulation0)...

You can run the emulations yourself by clicking on the html attachments. You start and stop the lights by clicking on lightsOn() and lightsOff() buttons. These buttons are for convenience and work as if you entered the commands into the Espruino console (or browser debug console). Cycling through your light patterns is done by clicking repeatedly on the BTN button.

The code in html5 with my suggested modifications for displaying the LED string in maximal size - either vertical or horizontal - looks like below and includes the code for Espruino from line 83 thru 223:

<html><!-- RGBLightsEmulation2.html -->
<head>
<title>RGB Led Project - Help</title>
<style>
.btn-bar { padding: 0.3em 0 0.3em 0; }
.lcd { border: 1em #AFAFAF solid; }
</style>
</head>
<body>
<b>RGBLightsEmulation2</b>
<!-- hardware emulation / manifestations -->
<div class="btn-bar">
  <button id="BTN">BTN</button>
</div>
<div>
  <canvas id="LCD" width="240px" height="320px" class="lcd"></canvas>
</div>
<div><!-- console entry conveniences -->
<div class="btn-bar">
  <button onclick="lightsOn();">lightsOn()</button>
  <button onclick="lightsOff();">lightsOff()</button>
</div>
<script> // some html5 helpers
var ee_ =
{ e: function(i) { return document.getElementById(i); }
};
</script>
<script> // Espruino shim / emulation
var Pin = function(id) {
  this.id = id;
  this.state = false;
  this.watch = null;
  this.connect(); // connect to hardware emulation / manifestation
};
Pin.prototype.connect = function() {
  var hw = ee_.e(this.id), _this = this;
  if (hw) {
    hw.addEventListener("mousedown", function() { _this.setState(true ); });
    hw.addEventListener("mouseup"  , function() { _this.setState(false); });
  }
};
Pin.prototype.setState = function(state) {
  state = state && true;
  if (this.state !== state) {
    this.state = state;
    if (    this.watch
         && (    this.watch.opts.edge === "both"
              || ( this.state && (this.watch.opts.edge === "rising" ))
              || (!this.state && (this.watch.opts.edge === "falling")) ) ) {
       this.watch.fnct();
} } };
var ee_watches = [];
function setWatch(fnct, pin, opts) {
  opts = opts || {};
  opts.repeat   = ("undefined" === typeof opts.repeat  ) ? true   : opts.repeat;
  opts.edge     = ("undefined" === typeof opts.edge    ) ? "both" : opts.edge;
  opts.debounce = ("undefined" === typeof opts.debounce) ?      0 : opts.debounce;
  pin.watch = { fnct: fnct, opts: opts };  
}
var SPI2 =
{ setup: function() {}
, send4bit: function() {}
}
var LCD =
{ dsp: ee_.e("LCD")
, clr: "#000000"
, clear: function() {}
, setColor: function(r,g,b) {
    // console.log("LCD.setColor(): " + r + "-" + g + "-" + b);
    var clr = "#";
    clr += ("0" + (Math.round(r * 255) & 255).toString(16)).substr(-2);
    clr += ("0" + (Math.round(g * 255) & 255).toString(16)).substr(-2);
    clr += ("0" + (Math.round(b * 255) & 255).toString(16)).substr(-2);
    this.clr = clr;
  }
, fillRect(x1, y1, x2, y2) {
    // console.log("LCD.fillRect(): " + this.clr + " " + x1 + "@" + y1 + "x" + x2 + "@" + y2);
    var ctx = this.dsp.getContext("2d");
    ctx.fillStyle = this.clr;
    ctx.fillRect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
  }
}
var BTN = new Pin("BTN");
var B15 = new Pin("B15");

</script>
<script> // ---------- Espruino user code ----------

SPI2.setup({baud:3200000, mosi:B15});

var rgb = new Uint8Array(50*3);

var WX = 240, HY = 320, Orient = "y", xi, yi, xd, yd;
if (Orient === "x") {
  xi = Math.floor(WX / (rgb.length / 3)); yi = 0; xd = xi - 1; yd =     29;
} else {
  xi = 0; yi = Math.floor(HY / (rgb.length / 3)); xd =     29; yd = yi - 1;
}

var pos=0;

function lightsOff() {
  cycle = clearInterval(cycle);
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
    rgb[i  ] = 0;
    rgb[i+1] = 0;
    rgb[i+2] = 0;
  } SPI2.send4bit(rgb, 0b0001, 0b0011);
}
 
var patterns = [];

patterns.push(function() {
  // Fading white lights
  // LCD.clear(); // allObjects: this does not belong here
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = col;
  } });
  
patterns.push(function() {
  // Red Light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  } });

patterns.push(function() {
  // Green Light 
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  } });
  
patterns.push(function() {
  // Blue Light 
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  } });
  
patterns.push(function() {
  // Yellow light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  } });

patterns.push(function() {
  // Cyan light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = col;
  } });

patterns.push(function() {
  // Fading colours
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = (1 + Math.sin((i+pos)*0.1324))*127;
     rgb[i+1] = (1 + Math.sin((i+pos)*0.1654))*127;
     rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;
  } });

patterns.push(function() {
  // Random blue lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = Math.random()*255;
    } });

var getPattern = patterns[0];
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}
var patternNumber = 0;
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
  // console.log("changePattern(): patternNumber = "+patternNumber);
}
setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });
// cycle = setInterval(doLights,50);
// this below was ^
function doLights() {
  getPattern();
  var  x = 0, y = 0;
  for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(x,y,x+xd,y+yd);
    x += xi; y += yi;
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var cycle ;
function lightsOn() {
  if (!cycle) {
    cycle = setInterval(doLights,50);
  }
}
</script>
</body>
</html>

There are some small change/fix to your code of which commenting the LCD.clear() statement is noteworthy.

Attachments:

• RGBLightsEmulations.png
• RGBLightsEmulation.html
• RGBLightsEmulation2.html
• RGBLightsEmulation.mov
• RGBLightsEmulation2.mov

[espruino-discuss]

Posted at 2016-12-24 by GarrettL

You made this so much more than it needed to be, I have no idea on any of this stuff you're talking about and wanting me to do now. I just wanted the simple fix to enlarge my screen thats it.

[espruino-discuss]

Posted at 2016-12-24 by GarrettL

The emulators are great but it still doesn't help me with what i need to edit, I'm on here for help because I'm not sure what i need to change that doesn't tell me what i need to change or anything, I understand how the first guy helped me but you completely changed what he did.

[espruino-discuss]

Posted at 2016-12-25 by @allObjects

...I'm not so sure... I understand more or less what you want to do: show a larger rectangle for each of the LEDs on your display.

In post #16 of this conversation, I gave you some help to modify the code so it shows wider bars for each of the LED. You mentioned then no positive feedback in posts #17 and #18, since I could not test the code as per the instruction, I decided to to that verification,... and it was successful.

Just follow the instructions and copy the lines 89 through 223 - your code with the added lines as instructed in post #16 - and paste them into the editor pane of your Espruino Web IDE, upload them, and enter lightsOn() in the console. Then you play with your button that changes the patterns. Finally, you enter lightsOff() in the console to stop the lights.

That's it!

PS: Study the doLights() {...}... you will see how it achieves to make rectangle per LED as wide or tall as possible (together with the setup in the if-then-else after your line that shows var rgb = new Uint8Array(50*3);.

[espruino-discuss]

Posted at 2016-12-26 by GarrettL

In post #16 it didn't widen the bars though it, it moved them over the the left or only showed one bar!

[espruino-discuss]

Posted at 2016-12-26 by @allObjects

Can you take a pic of what you see with the unchanged code and share it in the forum?

Your code creates something looking like on the right in the screen shot I attached... assuming the display you have is configured 240 pixels horizontal in the x-axis and 320 pixels vertical in the y-axis with x=0 and y=0 being left-top corner.

You have 50 lights and the code creates a bar of 3 pixels wide for each of the LEDs, which makes 150 pixels... just by co-using the fact that every third byte in the Uint8Array is the begin of a new LED.

My suggested changes take the full width into account - 240 pixels - which makes it possible to have a 4 pixels wide vertical bar for each LED building a large horizontal bar. Furthermore, the suggested changes allow to use the vertical - 320 pixels - which makes it possible to have a 6 pixels high horizontal bar for each LED building a large vertical bar. The changes in the begin use the Orientation information - "x" or "y" axis - and the WX width and HY height to calculate the maximal width or height for each bar given 50 LEDs and 240 or 320 pixels.

If this is not what you get, then we are not talking the same language, or may be not the same hardware...

[espruino-discuss]

Posted at 2016-12-26 by GarrettL

/*var sensor = require("HC-SR04").connect(C6,C7,function(dist) {
  console.log(dist+" cm away");
});
setInterval(function() {
  sensor.trigger(); // send pulse
}, 500);
*/
LCD.clear();

SPI2.setup({baud:3200000, mosi:B15});
var rgb = new Uint8Array(50*3);

var pos=0;

function lightsOff() {
  clearInterval(cycle);
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
    rgb[i  ] = 0;
    rgb[i+1] = 0;
    rgb[i+2] = 0;
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patterns = [];
//patterns.push(lightsOff);
patterns.push(function() {
  // Fading white lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Fading Red lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Green lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Blue lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Low red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Medium red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full red light 2
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  //  low blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Med blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Full blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  //  low Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Med Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading colours
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = (1 + Math.sin((i+pos)*0.1324)) * 127;
     rgb[i+1] = (1 + Math.sin((i+pos)*0.1654)) * 127;
     rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;
  }
});
patterns.push(function() {
  // Random White lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = Math.random()*255;
  }
});
patterns.push(function() {
  // Random Red lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Green lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Blue lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = Math.random()*255;
  }
});
var getPattern = patterns[0];
function doLights() {
  getPattern();
  for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(i,0,i+2,240);
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patternNumber = 0;
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
}

setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });

cycle = setInterval(doLights,50);

[espruino-discuss]

Posted at 2016-12-26 by GarrettL

This is what this code is doing, it isn't with the modifications you have showed me, i will send that later on. I want these bars wider but i want to make it cover the full screen. I can change the var rgb = new Uint8Array(50*3); 3 to 9 and it make full screen but i dont know if that will change my leds.

Attachments:

• IMG_0351.JPG

[espruino-discuss]

Posted at 2016-12-27 by @allObjects

@GarretL, your pic helps a lot.

You may easily achieve using 300 of the 320 horizontal pixels with the following changes to your original code:

Make line 12 of code in post #25 look like this:

var xi = 6, xd = xi - 1;

...and line 204 like this:

  getPattern();  var x = 0;

...and line 204 like this:

  LCD.fillRect(x,0,x+xd,240);  x += xi;

Using all of the 320 pixels is a bit a mess and may slow down the execution to the point where you cannot achieve 20 cycles per second anymore. But you may give it a try:

Make line 12 of code in post #25 look like this:

var xi = 320 / rgb.length, xd = xi - 1;

...and line 204 like this:

  getPattern();  var x = 0;

...and line 204 like this:

  x = i * xi; LCD.fillRect(Math.floor(x),0,Math.floor(x+xd),240);

Just for my curiosity - and help you with the generic code that maximizes dynamically the display size of the LEDs.

A) Do you know the number pixels your display has horizontally? ...I assume it is 320.
B) Do you know the number pixels your display has vertically? ...I assume it is 240.
C) Do you know in which corner (x,y) = (0,0) is?

The answer for C) is easy to find out. It should be sufficient to enter in the console pane of the Espruino Web IDE (left hand pane) the following line:

LCD.setColor(1,0,0); LCD.fillRect(0,0,200,100);

This draws and filled rectangle that is double as wide as high in the corner where 0,0 is.

Looking forward to hear from you about - hopefully - success!

[espruino-discuss]

Posted at 2016-12-27 by GarrettL

/*var sensor = require("HC-SR04").connect(C6,C7,function(dist) {
  console.log(dist+" cm away");
});
setInterval(function() {
  sensor.trigger(); // send pulse
}, 500);
*/
LCD.clear();

SPI2.setup({baud:3200000, mosi:B15});
var rgb = new Uint8Array(50*3);
//
var xi = 6, xd = xi - 1;
//
var pos=0;

function lightsOff() {
  clearInterval(cycle);
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
    rgb[i  ] = 0;
    rgb[i+1] = 0;
    rgb[i+2] = 0;
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patterns = [];
//patterns.push(lightsOff);
patterns.push(function() {
  // Fading white lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Fading Red lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Green lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Blue lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Low red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Medium red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full red light 2
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  //  low blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Med blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Full blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  //  low Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Med Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading colours
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = (1 + Math.sin((i+pos)*0.1324)) * 127;
     rgb[i+1] = (1 + Math.sin((i+pos)*0.1654)) * 127;
     rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;
  }
});
patterns.push(function() {
  // Random White lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = Math.random()*255;
  }
});
patterns.push(function() {
  // Random Red lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Green lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Blue lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = Math.random()*255;
  }
});
var getPattern = patterns[0];
function doLights() {
  //getPattern();
  //
  var xi = 6, xd = xi - 1;
  LCD.fillRect(x,0,x+xd,240);  x += xi;
  //
  for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(i,0,i+2,240);
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patternNumber = 0;
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
}

setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });

cycle = setInterval(doLights,50);

The first set of changes showed nothing on the screen.

---

Attachments:

• IMG_0357.JPG

[espruino-discuss]

Posted at 2016-12-27 by GarrettL

/*var sensor = require("HC-SR04").connect(C6,C7,function(dist) {
  console.log(dist+" cm away");
});
setInterval(function() {
  sensor.trigger(); // send pulse
}, 500);
*/
LCD.clear();

SPI2.setup({baud:3200000, mosi:B15});
var rgb = new Uint8Array(50*3);
//
var xi = 320 / rgb.length, xd = xi - 1;
//
var pos=0;

function lightsOff() {
  clearInterval(cycle);
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
    rgb[i  ] = 0;
    rgb[i+1] = 0;
    rgb[i+2] = 0;
  }
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patterns = [];
//patterns.push(lightsOff);
patterns.push(function() {
  // Fading white lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = col;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Fading Red lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Green lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading Blue lights
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = (Math.sin(i+pos*0.2)+1) * 127;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Low red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Medium red light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full red light 2
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = col;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  //  low blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Med blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  // Full blue light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = col;
  }
});
patterns.push(function() {
  //  low Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 85;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Med Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 170;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Full Green light
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     var col = 255;
     rgb[i  ] = 0;
     rgb[i+1] = col;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Fading colours
  pos++;
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = (1 + Math.sin((i+pos)*0.1324)) * 127;
     rgb[i+1] = (1 + Math.sin((i+pos)*0.1654)) * 127;
     rgb[i+2] = (1 + Math.sin((i+pos)*0.1)) * 127;
  }
});
patterns.push(function() {
  // Random White lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = Math.random()*255;
  }
});
patterns.push(function() {
  // Random Red lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = Math.random()*255;
     rgb[i+1] = 0;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Green lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = Math.random()*255;
     rgb[i+2] = 0;
  }
});
patterns.push(function() {
  // Random Blue lights
  for (var i=0;i<rgb.length;i+=3) {
     rgb[i  ] = 0;
     rgb[i+1] = 0;
     rgb[i+2] = Math.random()*255;
  }
});
var getPattern = patterns[0];
function doLights() {
  //getPattern();
  getPattern();  var x = 0;
   x = i * xi; LCD.fillRect(Math.floor(x),0,Math.floor(x+xd),240);
  
  // for (var i=0;i<rgb.length;i+=3) {
    LCD.setColor(rgb[i+0]/256,rgb[i+1]/256,rgb[i+2]/256);
    LCD.fillRect(i,0,i+2,240);
  
  SPI2.send4bit(rgb, 0b0001, 0b0011);
}

var patternNumber = 0;
function changePattern() {
  patternNumber = (patternNumber+1) % patterns.length;
  getPattern = patterns[patternNumber];
}

setWatch(changePattern, BTN, { repeat: true, edge:'rising', debounce: 50 });

cycle = setInterval(doLights,50);

The second shows the same thing without the white thing in the corner. Yes you have the correct dimensions and i believe 0,0 is top left corner!

[espruino-discuss]

Posted at 2016-12-27 by @allObjects

@GarrettL, thanks for showing the coded... because you inserted lines, it got a bit mangled because the line numbers changed... The reason that you do not see effects is that both 3rd changes ended up outside the loop and before the color is set instead of replacing your fillRect() in the loop after the color is set. Furthermore, because your code comes after the changes, it just overwrites what was before... and in the second example you commented oh¥-so-required the loop that's why you get just a white dot in the top left corner... ;-)

Return to your code in post #25, and apply literally proposed changes.... and you will see it work. There is nothing wrong with your code in post #25, because it produced a big tall, fat horizontal bar from top to bottom - 240 pixels - consisting of 50 slim vertical bars - 3 pixels wide - for each LED. The proposed changes will just double that...

[espruino-discuss]

Posted at 2017-01-02 by GarrettL

in post #27 you have two codes of line that you want me to sub for the same line and also i tried it and causes some errors!

[espruino-discuss]

Posted at 2017-01-02 by GarrettL

If you could just copy the code and change them yourself it might be easier than explaining! Thank you