-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpixelengine.html
53 lines (51 loc) · 1.98 KB
/
pixelengine.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DomBauMeister.js Test</title>
</head>
<body bgcolor="gray">
<p id="app"></p>
<script src="javascript/library.js"></script>
<script src="javascript/viewtemplates.js"></script>
<script>
function getPixelView(rootElement, name, x, y, color) {
return {
name: name,
rootElementId: rootElement,
render: (model) => {
if (!model.isVisible) // This "if" is on top of the function because we don't want
return null; // to create the elements if model.isVisible is false.
const elements = [{
type: "div",
style: "position:absolute;" +
"width:5px;height:5px;" +
"left:" + (model.x * 6) + "px;top:" + (model.y * 6) + "px;background:" + model.color + ";",
id: model.name + "_div",
}];
return elements;
},
model: { // This are the start values of the model
isVisible: true,
x: x,
y: y,
color: color
},
events: []
};
}
const dbm = new DomBauMeister({
rootElement: "app",
renderOnEventChange: "",
renderOnModelChange: ""
});
var views = [];
for (let i = 0; i < 120; i++) {
for (let j = 0; j < 120; j++) {
views.push(getPixelView("app","pixel" + i + "_" + j, i, j, "black"));
}
}
dbm.addViews(views);
dbm.start();
</script>
</body>
</html>