• Welcome to our site! Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

RGB Compact Format

Suraj143

Active Member
Thread starter #1
I'm doing a Neo pixel project & I want to deal with 3byte colour variables.For PIC micros I need a compact way of save RGB colours in a Table read instead of 3 bytes.Mike (Pommie) proposed me the 332 format (RRRGGGBB).
Need some advice regarding 332 method.Does it have 7 levels for Red, Green and 3 levels for blue?
 

Pommie

Well-Known Member
Most Helpful Member
#2
If you're curious how this looks, go to this page and copy this code into it,
Code:
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // invert colors
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] = (imgData.data[i]+16) & 0b11100000;;
    imgData.data[i+1] = (imgData.data[i+1]+16) & 0b11100000;
    imgData.data[i+2] = (imgData.data[i+2]+32) & 0b11000000;
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>

</body>
</html>
When you press run it copies the picture into the 332 format. You can see the difference but if they wern't side by side I doubt you could tell which was which.

Mike.
P.S. Hope the above works. First time trying.
Edit, changed the code to stop it making the picture darker.
 

Pommie

Well-Known Member
Most Helpful Member
#3
That "improved" code caused some wrapping around of colours. This avoids that,
Code:
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // invert colors
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
      if(imgData.data[i]<(256-16))
        imgData.data[i] = (imgData.data[i]+16) & 0b11100000;
    else
        imgData.data[i] = imgData.data[i] & 0b11100000;
      if(imgData.data[i+1]<(256-16))
        imgData.data[i+1] = (imgData.data[i+1]+16) & 0b11100000;
    else
        imgData.data[i+1] = imgData.data[i+1]+16 & 0b11100000;
      if(imgData.data[i+2]<(256-32))
        imgData.data[i+2] = (imgData.data[i+2]+32) & 0b11000000;
    else
        imgData.data[i+2] = imgData.data[i+2] & 0b11000000;
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Mike.
 

Latest threads

EE World Online Articles

Loading

 
Top