heatmapper/tests/test.html at master · dcmox/heatmapper · 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
    <head>
        <title>heatmapper-js engine demo</title>
        <script src="../heatmapper.js" type="text/javascript"></script>
        <script>generateCoordMap();</script>
        <style>
            body{
                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
            }
            body a {
                text-decoration: none;
                color: #888;
            }
            body a:hover {
                text-decoration: underline;
            }
            #logo {
                font-size: 32px;
            }
            #logo span{
                color: #aaa;
            }
            header nav ul, header nav li{
                list-style: none;
                display: inline;
                margin: 0;
                padding-left: 0;
            }
            header nav {
                margin: 10px 0 20px 0;
            }
            header nav li{
                color: #888;
                border: 1px solid #eee;
                border-radius: 3px;
                padding: 4px 8px;
            }
            main {
                padding: 10px;
                width: 1000px;
                margin: 0 auto;
                background-color: #fafafa;
                min-height: 100%;
            }
            article {
                border-top: 1px dashed #ddd;
                color: #444
            }
            article li{
                margin-bottom: 20px;
            }
            button {
                margin: 0 auto;
                text-align: center;
                padding: 6px 12px;
                background-color: #eee;
                border: 1px solid #ddd;
            }
            button:hover {
                border-color: orange;
                cursor: pointer;
            }
            span.playground{
                font-family: 'Comic Sans MS';
                font-size: 142px;
                width: 100%;
                text-align: center;
                display: block;
            }
        </style>
    </head>
    <body>
        <main>
            <header>
                <div id="logo">
                    heatmapper-js <span>demo</span>
                </div>
                <nav>
                    <ul>
                        <li><a href="#">Nav</a></li>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Go</a></li>
                        <li><a href="#">Here</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <p>
                    Welcome to heatmapper-js! This is a demonstration on how you can use this script to generate heatmaps based on mouse movements.
                </p>
                <p>
                    As you read this, your mouse movements are being tracked on screen. Feel free to move your mouse around and hit the "Display Heat Map"
                    button to see this script in action. This script utilizes canvas and creates a PNG on the fly.
                </p>
                <p>
                    Some supported functions include:
                </p>
                <ul>
                    <li>
                        <b>generateCoordMap</b> - Generates data for your heatmap based on your mouse movements. This function is ran on this demo's page load.
                    </li>
                    <li>
                        <b>generateHeatMap</b> - Generates a heatmap based on a coordinate map. This can accept multiple maps and will automatically handle them
                        appropriately.
                    </li>
                    <li>
                        <b>getScreenSize</b> - Gets the current viewport size within your browser.
                    </li>
                    <li>
                        <b>getScreenSizes</b> - Gets all of the viewport sizes as you adjust the size of your browser window.
                    </li>
                    <li>
                        <b>coordMapToJson</b> - Converts the stored coordinates to JSON based on a map ID.
                    </li>
                    <li>
                        <b>loadCoordMap/loadCoordMaps</b> - Loads coordinates into the window context for generating a map.
                    </li>
                    <li>
                        <b>getCoordMap</b> - Get a current instance of a coord map being stored or generated.
                    </li>
                </ul>
            </article>
            <span class="playground">3 &nbsp; 6 &nbsp; 0</span>
            <p>
                Experiment by using your mouse to trace over the numbers above and then click Display Heat Map!
            </p>
            <button id="displayHeatMap" onclick="generateHeatMap('result', {maxWidth: 1000});">Display Heat Map</button><br /><br />
            <div id="result"></div>
        </main>
    </body>
</html>