Fil/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org, but unfortunately it does not work within Blockbuilder (#186).

  
## hola.txt
Text contents

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
  d3.imageload = function(src, cb) {
    image = new Image();
    image.src = src;
    image.onload = function() { cb(null, image); };
    image.onerror = cb;
  }

  d3.queue()
    .defer(d3.text, 'hola.txt')
    .defer(d3.imageload, 'thumbnail.png')
    .await(function(err, text, image) {

    let msg = (err) ? "Error: " + err : `Image and text loaded (${text})`;

    d3.select('body').append('p')
      .html(msg)
      .style("font-size", 14)
      .style("font-family", "monospace");

    if(err) return;

    var canvas = d3.select('body').append('canvas')
    .attr('width', image.width)
    .attr('height', image.height),
        context = canvas.node().getContext('2d');
    context.drawImage(image,0,0);
  });
  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	d3.imageload = function(src, cb) {
	image = new Image();
	image.src = src;
	image.onload = function() { cb(null, image); };
	image.onerror = cb;
	}

	d3.queue()
	.defer(d3.text, 'hola.txt')
	.defer(d3.imageload, 'thumbnail.png')
	.await(function(err, text, image) {

	let msg = (err) ? "Error: " + err : `Image and text loaded (${text})`;

	d3.select('body').append('p')
	.html(msg)
	.style("font-size", 14)
	.style("font-family", "monospace");

	if(err) return;

	var canvas = d3.select('body').append('canvas')
	.attr('width', image.width)
	.attr('height', image.height),
	context = canvas.node().getContext('2d');
	context.drawImage(image,0,0);
	});
	</script>
	</body>