JavaScript style.background-color

Question

I've a question about my code, where I'm trying to create a dynamic background using the webcam, which with help of .jquery gives a lightIntensity in a number 0-255, which I would like to use for the background, I am not able to get it to work.

    $(document).ready(function() {
        $.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
            $('.container p').text(lightIntensity);
            console.log(lightIntensity)
        });
        function decimalToHex(lightIntensity) {
        var hex = Number(lightIntensity).toString(16);
        hex = "000000".substr(0, 6 - hex.length) + hex;
        return hex;
            document.body.style.backgroundColor = hex;
        }

    });

'lightIntenisty' is a number between 0 and 255, which needs to be translated to a RGB or hex (I think).

Code uses jQuery library's:

jquery-1.9.1.js
jquery.image-brightness.js
jquery.webcam-light-sensor.js

<script src="https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.webcam-light-sensor.js"></script>
<script src="https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.image-brightness.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Light -> colour</title>

	<script src="js/jquery-1.9.1.js" ></script>
	<script src="js/jquery.image-brightness.js" ></script>
	<script src="js/jquery.webcam-light-sensor.js" ></script>
</head>
<body>
	<div>
		<div class="container">
			<!-- in between the <p> the 'amount' of light is displayed (0/255) -->
			<p></p>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			$.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
				$('.container p').text(lightIntensity);
				console.log(lightIntensity)
			});
			function decimalToHex(lightIntensity) {
    		var hex = Number(lightIntensity).toString(16);
    		hex = "000000".substr(0, 6 - hex.length) + hex;
    		document.body.style.backgroundColor = '#' + hex;
    		return hex;
				}
		});
	</script>
</body>
</html>

Oen44 · Accepted Answer · 2018-12-09 12:05:16Z

3

You are returning before setting backgroundColor so it never reaches.

function newColor() {
  decimalToHex(Math.floor((Math.random() * 16777215) + 1));
}

function decimalToHex(lightIntensity) {
    var hex = Number(lightIntensity).toString(16);
    hex = "000000".substr(0, 6 - hex.length) + hex;
    document.body.style.backgroundColor = '#' + hex;
    console.log(hex);
    return hex;
}

html, body {
width: 100%;
height: 100%;
}

<button onclick="newColor()">Change</button>

edited Dec 9, 2018 at 12:05

answered Dec 9, 2018 at 11:48

Oen44

3,2461 gold badge24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Erwyn Joziasse Over a year ago

I guess this indeed should be working, but my page seems so remain white... only console.log seems to work

Oen44 Over a year ago

I just used that in console on this page and passing values work. Background is changing colors.

Erwyn Joziasse Over a year ago

is there maybe something in my code that prevents this from changing when loading the webpage?

Oen44 Over a year ago

In code you posted, you are not executing that function.

Twisty · Accepted Answer · 2018-12-09 12:15:49Z

0

I would take some code from https://jqueryui.com/slider/#colorpicker

function hexFromRGB(r, g, b) {
  var hex = [
    r.toString( 16 ),
    g.toString( 16 ),
    b.toString( 16 )
  ];
  $.each( hex, function( nr, val ) {
    if ( val.length === 1 ) {
      hex[ nr ] = "0" + val;
    }
  });
  return hex.join( "" ).toUpperCase();
}

This of course requires red, green, and blue values. You're only getting 1 value from 0 to 255. So not sure how you would get a "color" out of that.

There is also nothing that is triggering this in your example code. I would setup a callback and then assign the hex value based on that event.

 $.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
   $('.container p').text(lightIntensity);
   console.log(lightIntensity);
   $("body").css("background", "#" + hexFromRGB(lightIntensity, lightIntensity, lightIntensity));
 });

Hope that helps.

answered Dec 9, 2018 at 12:15

Twisty

31k2 gold badges30 silver badges50 bronze badges

5 Comments

Erwyn Joziasse Over a year ago

this seems to be working! Thanks! any ideas how i could change the gray scale into some type of colour?

Twisty Over a year ago

I am not familiar with this webcam library exactly. You would need to have 3 values, one for red, one for green, and one for blue. Each would be from 0 to 255.

Erwyn Joziasse Over a year ago

$("body").css("background", "#" + hexFromRGB(0, 0, lightIntensity)); creates colour between black and blue, is there a way to do 0-lightIntensity, 0 , 0+lightIntensity to create a colour between red and blue?

Twisty Over a year ago

@ErwynJoziasse Sure: $("body").css("background", "#" + hexFromRGB((255 - lightIntensity), 0, lightIntensity));

Twisty Over a year ago

@ErwynJoziasse hope this helped, if it did, I hope you want to upvote my answer. If it did answer your question, hope you want to mark it as the answer too.

ewwink · Accepted Answer · 2018-12-09 12:19:28Z

0

with 1 value you will not get rich color but try this

function decimalToHex(i) {
  var hex = i.toString(16);
  hex = hex.length == 1 ? "0" + hex : hex;
  result = '#' + hex.repeat(3);
  document.body.style.backgroundColor = result;
  return result;
}

var num = 0;

$('button').on('click', function() {
  if (num > 255) return
  result = decimalToHex(num);
  console.clear()
  console.log(num, result)
  num = num + 20;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button>
Change background
</button>

answered Dec 9, 2018 at 12:19

ewwink

19.3k2 gold badges49 silver badges56 bronze badges

Collectives™ on Stack Overflow

JavaScript style.background-color

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related