progrium/badger.html

## badger.html
<html>
  <head>
    <style type="text/css">
      svg { margin-left: -2000px; }
    </style>
    <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="http://labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.latest.js" type="text/javascript" charset="UTF-8"> </script>
    <script type="text/javascript">
      var config = {
        'label': [1307268, 'DisketteLabel.xml'], // https://gist.github.com/1307268
        'badge': [1307282, 'test.badge.js'], // https://gist.github.com/1307282
      }

      function svgToBase64Image(paper) {
        function serializeXmlNode(xmlNode) { if (typeof window.XMLSerializer != "undefined") { return (new window.XMLSerializer()).serializeToString(xmlNode); } else if (typeof xmlNode.xml != "undefined") { return xmlNode.xml; } else { return ""; } }
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', paper.canvas.width);
        canvas.setAttribute('height', paper.canvas.height);
        document.body.appendChild(canvas);
        canvg(canvas, serializeXmlNode(paper.canvas));
        var dataURL = canvas.toDataURL('image/png');
        document.body.removeChild(canvas);
        return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      }

      function loadGistFile(gist, filename, callback) {
        $.getJSON("https://api.github.com/gists/"+gist+"?callback=?", function(data){
          callback(data['data']['files'][filename]['content']);
        });
      }

      function printLabel(labelXml) {
        try {
          var printerName = "";
          var printers = dymo.label.framework.getPrinters();
          if (printers.length == 0) {
              throw "No DYMO printers are installed. Install DYMO printers.";
          }
          for (var i = 0; i < printers.length; ++i) {
              var printer = printers[i];
              if (printer.printerType == "LabelWriterPrinter") {
                  printerName = printer.name;
                  break;
              }
          }
          if (printerName == "") {
            throw "No LabelWriter printers found. Install LabelWriter printer";
          }
          dymo.label.framework.openLabelXml(labelXml).print(printerName);
        } catch (e) {
          alert(e);
        }
      }

      function fitWidth(text, width) {
        while (text.getBBox().width > width) { text.attr('font-size', text.attr('font-size') - 1) }
      }

      function updateBadge() {
        $('svg').remove();
        loadGistFile(config['badge'][0], config['badge'][1], function (data) {
          badge = null;
          eval(data);
          data = svgToBase64Image(badge);
          $('#data').val(data);
          $('#preview').attr("src", "data:image/png;base64,"+data);
        });
      }

      function renderLabelXml() {
        return $('#labelxml').val().replace('{ImageData}', $('#data').val())
      }

      $(document).ready(function() {
        loadGistFile(config['label'][0], config['label'][1], function (data) { $('#labelxml').val(data) });
        updateBadge();
      });
    </script>
  </head>
  <body>
    <img id="preview" style="float: right;" />
    <input type="text" id="first_name" placeholder="first name" onchange="updateBadge()" />
    <input type="text" id="last_name" placeholder="last name" onchange="updateBadge()" />
    <input type="text" id="tags" placeholder="tags" onchange="updateBadge()" />
    <input type="button" value="Update" onclick="updateBadge()" />
    <input type="button" value="Print" onclick="printLabel(renderLabelXml())" /><br />
    <div style="float: left; margin-left: -2000px;">
      <textarea id="data"></textarea>
      <textarea id="labelxml"></textarea>
    </div>

  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	svg { margin-left: -2000px; }
	</style>
	<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
	<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
	<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="http://labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.latest.js" type="text/javascript" charset="UTF-8"> </script>
	<script type="text/javascript">
	var config = {
	'label': [1307268, 'DisketteLabel.xml'], // https://gist.github.com/1307268
	'badge': [1307282, 'test.badge.js'], // https://gist.github.com/1307282
	}

	function svgToBase64Image(paper) {
	function serializeXmlNode(xmlNode) { if (typeof window.XMLSerializer != "undefined") { return (new window.XMLSerializer()).serializeToString(xmlNode); } else if (typeof xmlNode.xml != "undefined") { return xmlNode.xml; } else { return ""; } }
	var canvas = document.createElement('canvas');
	canvas.setAttribute('width', paper.canvas.width);
	canvas.setAttribute('height', paper.canvas.height);
	document.body.appendChild(canvas);
	canvg(canvas, serializeXmlNode(paper.canvas));
	var dataURL = canvas.toDataURL('image/png');
	document.body.removeChild(canvas);
	return dataURL.replace(/^data:image\/(png\|jpg);base64,/, "");
	}

	function loadGistFile(gist, filename, callback) {
	$.getJSON("https://api.github.com/gists/"+gist+"?callback=?", function(data){
	callback(data['data']['files'][filename]['content']);
	});
	}

	function printLabel(labelXml) {
	try {
	var printerName = "";
	var printers = dymo.label.framework.getPrinters();
	if (printers.length == 0) {
	throw "No DYMO printers are installed. Install DYMO printers.";
	}
	for (var i = 0; i < printers.length; ++i) {
	var printer = printers[i];
	if (printer.printerType == "LabelWriterPrinter") {
	printerName = printer.name;
	break;
	}
	}
	if (printerName == "") {
	throw "No LabelWriter printers found. Install LabelWriter printer";
	}
	dymo.label.framework.openLabelXml(labelXml).print(printerName);
	} catch (e) {
	alert(e);
	}
	}

	function fitWidth(text, width) {
	while (text.getBBox().width > width) { text.attr('font-size', text.attr('font-size') - 1) }
	}

	function updateBadge() {
	$('svg').remove();
	loadGistFile(config['badge'][0], config['badge'][1], function (data) {
	badge = null;
	eval(data);
	data = svgToBase64Image(badge);
	$('#data').val(data);
	$('#preview').attr("src", "data:image/png;base64,"+data);
	});
	}

	function renderLabelXml() {
	return $('#labelxml').val().replace('{ImageData}', $('#data').val())
	}

	$(document).ready(function() {
	loadGistFile(config['label'][0], config['label'][1], function (data) { $('#labelxml').val(data) });
	updateBadge();
	});
	</script>
	</head>
	<body>
	<img id="preview" style="float: right;" />
	<input type="text" id="first_name" placeholder="first name" onchange="updateBadge()" />
	<input type="text" id="last_name" placeholder="last name" onchange="updateBadge()" />
	<input type="text" id="tags" placeholder="tags" onchange="updateBadge()" />
	<input type="button" value="Update" onclick="updateBadge()" />
	<input type="button" value="Print" onclick="printLabel(renderLabelXml())" /><br />
	<div style="float: left; margin-left: -2000px;">
	<textarea id="data"></textarea>
	<textarea id="labelxml"></textarea>
	</div>

	</body>
	</html>