examples/demo-thumbnail.html

<!DOCTYPE html>
<html>
  <head>
    <title>the-graph-thumb documentation</title>
    <meta charset="utf-8">

    <!-- Deps -->
    <script src="../node_modules/webcomponents.js/webcomponents.js"></script>
    <script src="../node_modules/react/dist/react.js"></script>
    <script src="../node_modules/react-dom/dist/react-dom.js"></script>
    <script src="../dist/the-graph.js"></script>

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../the-graph-thumb/the-graph-thumb.html">

  </head>
  <body style="background-color:gray; color:white;">

    <the-graph-thumb id="thumb" width="400" height="300"></the-graph-thumb>

    <script type="text/javascript">
    (function(){
      "use strict";

      Polymer.veiledElements = ["the-graph-thumb"];
      window.addEventListener('polymer-ready', function() {
    
        window.loadGraph = function (json) {
          // Load graph
          var graphData = json.data.files['noflo.json'].content;
          var thumb = document.getElementById('thumb');
          window.fbpGraph.graph.loadJSON(graphData, function(err, graph) {
            thumb.graph = graph;
          });

        };
        var body = document.querySelector('body');
        var script = document.createElement('script');
        script.type = 'application/javascript';
        // Clock
        script.src = 'https://api.github.com/gists/7135158?callback=loadGraph';
        // Gesture object building (lots of ports!)
        //script.src = 'https://api.github.com/gists/7022120?callback=loadGraph';
        // Gesture data gathering (big graph)
        //script.src = 'https://api.github.com/gists/7022262?callback=loadGraph';
        // Edge algo test
        // script.src = 'https://api.github.com/gists/6890344?callback=loadGraph';
        body.appendChild(script);
      });

    })();
    </script>
  </body>
</html>