HeatMapper.js/generator.html at master · dankramp/HeatMapper.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
  <head>
    <title>HeatMapper Generator</title>
    <script src="HeatMapper.js"></script>
  </head>
  <body style="text-align: center">
    <h1>HeatMapper Generator</h1>
    <i><b>Click on the range below to add a new color.</b><br />
      Click a rectangle to change the color, or click and drag to move.<br />
      Right click a rectangle to remove it.</i>
    <br/><br/>
    <canvas id="heatCanvas" width="1000px" height="100px" style="border: 2px solid grey"></canvas>
    <ul id="input-list" style="list-style-type: none"></ul>
    <input type="checkbox" id="log-check"><label for="log-check"> Logarithmic scale?</label>
    <br />
    <br />
    <textarea rows="15" cols="100" id="code-box" disabled>// Auto-generated code will appear here

var colors = [];
var scale = [];
var heatmap = new HeatMapper(colors, scale);
    </textarea>

    <br />

    <code>heatmap.getHexColor(</code><input type="text" id="get-value" size="3"><code id="code-2">) = </code><p id="hex-value"></p>

    <script src="generatorScript.js"></script>
  </body>

</html>