RxJS AJAX: Quantum Random Color Sequence

Renders random color stream based on random numbers received via AJAX from a quantum-randomizer server.

by Lou Mauget

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<h4>RxJS AJAX: Quantum Random Color Sequence</h4>
<p>Ref: <a target="_blank" href="http://qrng.anu.edu.au/index.php">http://qrng.anu.edu.au/index.php</a></p>
<button id="button">Refresh</button>
<p id="result"></p>

CSS

body { font-family: "Arial", sans-serif; }

.working { color: #ff0000;}

JavaScript

var valCount = 1020;
var $button = $('#button'),
      $result = $('#result');
      
// AJAX fn: returns observable promise
var getNumbers = function(count) {
  return Rx.Observable.fromPromise(
    // Get promise of: {"type":"uint8","length":1,"data":[99],"success":true}
    $.ajax({
      url: `https://qrng.anu.edu.au/API/jsonI.php?length=${count}&type=uint8`})
      	.promise());
};

// Listen for button clicks, do service request, subscribe to result
Rx.Observable.fromEvent($button.get(0), 'click')
  .map( function(e) {
  $result.html('<span class="working">(working)</span>');
  return e.target.value;
})
  .flatMap( getNumbers( valCount ) )
  .subscribe( function(data) {
  	console.log(data);
  	if (data.success) {
   	 $result.empty();
    	var cols = 0
    	var c = []; // rgb value

   	 data.data.forEach( function(v)  {
      c.push( v % 256 );
      if (c.length > 2 ) {
        var rgb = `rgb(${c.pop()},${c.pop()},${c.pop()})`;
        $result.append(`<span style="background-color:${rgb}">&nbsp;&nbsp;&nbsp;&nbsp;</span>`);

        if ( ++cols > 33 ) {
          $result.append(`<br/>`);
          cols = 0;
        }
      }
    });
  }
});

$button.trigger('click');