-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathheatmap.html
131 lines (120 loc) · 3.57 KB
/
heatmap.html
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
<html>
<head>
<meta charset="UTF-8">
<title id="title">Runtime Code Heatmap</title>
<style>
body {
background-color: ghostwhite;
}
p {
height: 15px;
-webkit-margin-before:0px;
-webkit-margin-after:0px;
font-family: Consolas, Courier, monospace;
margin-left: 20px;
}
#code-container {
background-color: ghostwhite;
width: 300px;
color: darkblue;
text-align: left;
}
#center-div {
background-color: lightgray;
width: 300px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#minimap {
position: fixed;
top: 0;
right: 0;
}
</style>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script src="src/js/jquery-3.3.1.js"></script>
<script src="src/js/heatmap.js"></script>
<script src="src/js/html2canvas.js"></script>
</head>
<body onresize="resizeMinimap();">
<div id="center-div">
<div id="code-container">
</div>
</div>
</body>
<script>
st = nodeRequire('./vm/static');
ipcRenderer = nodeRequire('electron').ipcRenderer;
remote = nodeRequire('electron').remote;
ipcRenderer.send('give-heat-id', remote.getCurrentWindow().id);
var lineHeight = remote.getGlobal('sharedObject').lineHeight;
var lineLength = remote.getGlobal('sharedObject').lineLength;
var lineIndent = remote.getGlobal('sharedObject').lineIndent;
var dotSpace = remote.getGlobal('sharedObject').dotSpace;
var memlst = remote.getGlobal('sharedObject').memory;
for(var line = 256; line < 1348; line++) {
$("#code-container").append("<p>" + memlst[line] + "</p>")
}
// process = nodeRequire('process');
// console.log(process.pid);
// minimal heatmap instance configuration
var heatmapInstance = h337.create({
// only container is required, the rest will be defaults
container: document.getElementById('code-container'),
maxOpacity: 0.5,
radius: lineHeight+2
});
var data = remote.getGlobal('sharedObject').heatData;
// if you have a set of datapoints always use setData instead of addData
// for data initialization
// console.log(data);
heatmapInstance.setData(data);
// console.log(remote.getGlobal('sharedObject').executedInstruction)
// console.log('emmmm');
ipcRenderer.on('give-pc', (event, pc) => {
// console.log('data:', heatmapInstance.getData({x:j, y:(pc/2 + 0.5) * lineHeight})+1);
var dataList = [];
for(var j = 0; j <= lineLength; j += dotSpace) {
dataList.push({
x: j,
y: (pc/2 + 0.5 - 256) * lineHeight,
value: heatmapInstance.getData({x:j, y:(pc/2 + 0.5) * lineHeight})+1
})
}
// heatmapInstance.addData(dataList);
})
html2canvas(document.getElementById("code-container")).then(canvas => {
canvas.setAttribute('id', 'minimap');
document.body.appendChild(canvas);
//获取画布的宽和高
var width=308;
var height=10080;
//获取画布的图像信息,一个副本
var content=canvas.getContext("2d");
var data=content.getImageData(0,0,width,height)
//重新设置画布的大小
width=80;
height=document.body.clientHeight;
canvas.style.width = width;
canvas.style.height = height;
// // canvas.setAttribute("height",height)
// console.log(canvas.getAttribute("width"))
// console.log(canvas.getAttribute("height"))
//将获得的图像副本,重新绘制到画布,完成画布的大小改变
content.putImageData(data,0,0)
});
function resizeMinimap() {
var canvas = document.getElementById('minimap');
canvas.style.height = document.body.clientHeight;
}
</script>
</html>