Begin to clean up styling and HTML elements.
Chris Pressey
7 years ago
| 2 | 2 |
<meta charset="utf-8">
|
| 3 | 3 |
<title>Canvas Feedback</title>
|
| 4 | 4 |
<style>
|
|
5 |
#installation_container > div {
|
|
6 |
display: inline-block;
|
|
7 |
vertical-align: top;
|
|
8 |
}
|
|
9 |
#canvas_container {
|
|
10 |
text-align: center;
|
|
11 |
}
|
|
12 |
#canvas_container canvas {
|
|
13 |
display: block;
|
|
14 |
background: white;
|
|
15 |
border: 1px solid black;
|
|
16 |
}
|
| 5 | 17 |
</style>
|
| 6 | 18 |
</head>
|
| 7 | 19 |
<body>
|
|
20 |
<h1>Canvas Feedback</h1>
|
| 8 | 21 |
|
| 9 | |
<h1>Canvas Feedback</h1>
|
|
22 |
<div id="installation_container"></div>
|
| 10 | 23 |
|
| 11 | |
<div id="container" style="display: inline-block;"></div>
|
| 12 | |
<div id="control_panel" style="display: inline-block; vertical-align: top;"></div>
|
| 13 | |
|
|
24 |
<script src="../src/canvas-feedback.js"></script>
|
|
25 |
<script>
|
|
26 |
launch('../src/yoob/', 'installation_container', {
|
|
27 |
'imgUrl': 'http://i.imgur.com/SYFLz1X.jpg'
|
|
28 |
});
|
|
29 |
</script>
|
| 14 | 30 |
</body>
|
| 15 | |
<script src="../src/canvas-feedback.js"></script>
|
| 16 | |
<script>
|
| 17 | |
launch('../src/yoob/', 'container', {
|
| 18 | |
'controlPanel': document.getElementById('control_panel'),
|
| 19 | |
'imgUrl': 'http://i.imgur.com/SYFLz1X.jpg'
|
| 20 | |
});
|
| 21 | |
</script>
|
| 56 | 56 |
|
| 57 | 57 |
var t = new CanvasFeedback();
|
| 58 | 58 |
|
| 59 | |
var canvas = yoob.makeCanvas(container, 400, 400);
|
| 60 | |
canvas.style.background = "white";
|
| 61 | |
canvas.style.border = "1px solid black";
|
|
59 |
var canvasContainer = yoob.makeDiv(container);
|
|
60 |
canvasContainer.id = 'canvas_container';
|
|
61 |
var canvas = yoob.makeCanvas(canvasContainer, 400, 400);
|
| 62 | 62 |
config.canvas = canvas;
|
| 63 | 63 |
|
| 64 | |
var buttonPanel = yoob.makeDiv(container);
|
|
64 |
var buttonPanel = yoob.makeDiv(canvasContainer);
|
|
65 |
buttonPanel.id = 'button_panel';
|
| 65 | 66 |
yoob.makeButton(buttonPanel, 'Restart', function() { t.reset(); });
|
| 66 | 67 |
yoob.makeButton(buttonPanel, 'Pause', function() { t.pause(); });
|
| 67 | 68 |
yoob.makeButton(buttonPanel, 'Resume', function() { t.resume(); });
|
| 68 | 69 |
|
| 69 | |
var controlPanel = config.controlPanel || container;
|
|
70 |
var controlPanel = yoob.makeDiv(container);
|
|
71 |
controlPanel.id = 'control_panel';
|
| 70 | 72 |
|
| 71 | 73 |
var stylePanel = function(panel) {
|
| 72 | 74 |
panel.style.background = "#e0e0e0";
|