-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
180 lines (158 loc) · 8.05 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="de">
<head>
<title>EAGLE board</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/font.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="eaglecanvas.js"></script>
<script type="text/javascript">
var eaglecanvas;
var itemHints = {
'element:MCU' : 'The central processing unit. A NXP LPC 1343.',
'element:X1' : 'A 12 MHz crystal. Provides a precise clock source in combination with C1 and C2. The processor has its own RC clock source, but a quartz is required to fulfill the strict timing requirements of USB.',
'element:T1' : 'A MOSFET transistor that enables or disables the R3 pullup resistor by software, allowing the device to logically connect and disconnect from the USB. This feature is called "soft connect".',
'element:R1' : 'A termination resistor (33Ω) for USB, preventing signal reflections in the USB wire.',
'element:R2' : 'A termination resistor (33Ω) for USB, preventing signal reflections in the USB wire.',
'element:R3' : 'A pullup resistor (1.5kΩ) that slightly pulls the USB D+ level towards 3.3V. This pullup signals the USB host that a device is connected to USB.',
'element:R4' : 'A pullup resistor (10kΩ) for the programming pin, ensuring a HIGH level when the PGM button is not pressed.',
'element:R5' : 'A pullup resistor (10kΩ) for the reset pin, ensuring a HIGH level when the PGM button is not pressed.',
'element:R6' : 'The LED current limiting resistor(100Ω), ensuring that the LED current does not exceed 10mA.',
'element:R7' : 'Forms a voltage divider (1.5kΩ) in combination with R8. Generates a signal for the MCU to detect a USB connection.',
'element:R8' : 'Forms a voltage divider (10kΩ) in combination with R7. Generates a signal for the MCU to detect a USB connection.',
'element:C1' : 'Crystal load capacitor (18pF). Tunes the capacitive load for the crystal to work properly.',
'element:C2' : 'Crystal load capacitor (10pF). Tunes the capacitive load for the crystal to work properly.',
'element:C3' : 'Input buffer capacitor (1µF) for the voltage regulator. Smoothes the voltage, prevents oscillation of the voltage regulator.',
'element:C4' : 'Output buffer capacitor (1µF) for the voltage regulator. Smoothes the voltage, prevents oscillation of the voltage regulator.',
'element:C5' : 'Power supply buffer (100nF) for the microcontroller. Stabilizes supply voltage, prevents digital noise from spreading.',
'element:C6' : 'Power supply buffer (100nF) for the microcontroller. Stabilizes supply voltage, prevents digital noise from spreading.',
'element:VREG' : '3.3V voltage regulator (LDO). Generates 3.3V for the microcontroller from 5V USB and higher voltages',
'element:D1' : 'A double common cathode diode package. Prevents damage from reverse voltage, prevents current flow from higher voltage sources to lower voltage sources when more than one power supply is connected.',
'element:RST' : "Reset button. Pulls the PIO0_0 pin low. Can be reconfigured as a user button (if you don't need a reset button).",
'element:PGM' : 'Program button. Pulls the PIO0_1 pin low. At startup, this causes the microcontroller to boot into the bootloader in ROM. Can be used as an application button during normal operation.',
'element:LED' : 'A light emitting diode. Emits light, controllable by software.',
'element:USB' : 'Micro USB-B port. Power supply, host communication, programming.'
};
function stupidWebfontTrick(eagle) {
// see http://stackoverflow.com/a/8223543/27408
var i = new Image()
i.src = "../fonts/osifont.woff"
i.onerror = function() {
eagle.draw()
setTimeout(function(){eagle.draw()}, 50)
};
updateCheckboxes()
selectItem(null)
}
function init() {
eaglecanvas = new EagleCanvas('canvas');
eaglecanvas.loadURL('board.brd', stupidWebfontTrick);
eaglecanvas.setScaleToFit('outer');
}
function showFrontSide(e) {
e = e || window.event;
if (e) e.stopPropagation();
eaglecanvas.setBoardFlipped(false);
document.getElementById('frontsidebutton').className = "button selected";
document.getElementById('backsidebutton').className = "button";
}
function showBackSide(e) {
e = e || window.event;
if (e) e.stopPropagation();
eaglecanvas.setBoardFlipped(true);
document.getElementById('frontsidebutton').className = "button";
document.getElementById('backsidebutton').className = "button selected";
}
function zoomIn(e) {
e = e || window.event;
if (e) e.stopPropagation();
eaglecanvas.setScale(eaglecanvas.getScale()*1.2);
}
function zoomOut(e) {
e = e || window.event;
if (e) e.stopPropagation();
eaglecanvas.setScale(eaglecanvas.getScale()/1.2);
}
function toggleLayer(layer) {
e = window.event;
if (e) e.stopPropagation();
var shown = eaglecanvas.isLayerVisible(layer);
shown = !shown;
eaglecanvas.setLayerVisible(layer,shown);
updateCheckboxes();
}
function canvasClick(e) {
e = e || window.event;
if (!e) return;
e.stopPropagation();
var canvas = document.getElementById('canvas');
var x = e.clientX - canvas.getBoundingClientRect().left - canvas.clientLeft + canvas.scrollLeft;
var y = e.clientY - canvas.getBoundingClientRect().top - canvas.clientTop + canvas.scrollTop;
var hit = eaglecanvas.hitTest(x,y);
selectItem(hit);
}
function updateCheckboxes() {
for (var layerKey in EagleCanvas.LayerId) {
var layerId = EagleCanvas.LayerId[layerKey];
var cbId = "SHOW_LAYER_CB_"+layerId;
var cb = document.getElementById(cbId);
if (!cb) continue;
cb.checked = (eaglecanvas.isLayerVisible(layerId)) ? "checked" : "";
}
}
function selectItem(hit) {
eaglecanvas.setHighlightedItem(hit);
var hintsbox = document.getElementById('hintsbox');
hintsbox.style.display = (hit) ? 'block' : 'none';
if (hit) {
var hintstitle = document.getElementById('hintstitle');
while (hintstitle.childNodes.length > 0) hintstitle.removeChild(hintstitle.firstChild);
var title = "";
if (hit.type=='element') title = "Element: "+hit.name;
else if (hit.type=='signal') title = "Signal: "+hit.name;
hintstitle.appendChild(document.createTextNode(title));
var hintstext = document.getElementById('hintstext');
while (hintstext.childNodes.length > 0) hintstext.removeChild(hintstext.firstChild);
var desc = "";
if (itemHints) desc = itemHints[hit.type+":"+hit.name];
if (!desc) desc = "";
hintstext.appendChild(document.createTextNode(desc));
}
}
</script>
</head>
<body onload="init();">
<div id="outer" onclick="selectItem(null);">
<div id="hintsbox">
<h2 id="hintstitle"></h2>
<p id="hintstext"></p>
</div>
<div id="controls">
<div class="button selected" id="frontsidebutton" onclick="showFrontSide()">Front</div>
<div class="button" id="backsidebutton" onclick="showBackSide()">Back</div>
<div class="button" id="zoominbutton" onclick="zoomIn()">+</div>
<div class="button" id="zoomoutbutton" onclick="zoomOut()">-</div>
<div class="button" id="showlayerbutton">
Layers...
<ul>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_5" onclick="toggleLayer(5);">Top Copper</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_6" onclick="toggleLayer(6);">Top silkscreen</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_7" onclick="toggleLayer(7);">Top documentation</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_1" onclick="toggleLayer(1);">Bottom copper</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_2" onclick="toggleLayer(2);">Bottom silkscreen</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_3" onclick="toggleLayer(3);">Bottom documentation</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_9" onclick="toggleLayer(9);">Outline</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_8" onclick="toggleLayer(8);">Vias</li>
<li><input type="checkbox" checked="checked" id="SHOW_LAYER_CB_4" onclick="toggleLayer(4);">Dim backside</li>
</ul>
</div>
</div>
<div id="hcenter">
<div id="vcenter">
<canvas id="canvas" width="800" height="600" onclick="canvasClick()">
</canvas>
</div>
</div>
</div>
</body>
</html>