RGB Led Project - Help

You are reading a single comment by @allObjects and its replies. Click here to read the full conversation.

•

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](https://forum.espruino.com/search/?q=%23AFAFAF) 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.

5 Attachments

RGB Led Project - Help

About

Espruino