Newer
Older
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive BOM for KiCAD</title>
<link href="index.css" rel="stylesheet">
<!-- This is a really hacky way to import the json data from
an external file. Need to find a way to do this at the javascript level and
not the html level -->
<script type="text/javascript" src="pcbdata.json"></script>
</head>
<body>
<div id="topmostdiv" style="width: 100%; height: 100%">
<div id="top">
<div style="float: right;">
<div class="hideonprint menu" style="float: right; margin: 10px; top: 8px;">
<button class="menubtn"></button>
<div class="menu-content">
<label class="menu-label menu-label-top">
<input id="darkmodeCheckbox" type="checkbox">
Dark mode
</label>
<label class="menu-label">
<input id="silkscreenCheckbox" type="checkbox">
Show silkscreen
</label>
<label class="menu-label">
<input id="highlightpin1Checkbox" type="checkbox">
Highlight first pin
</label>
<label class="menu-label">
<input id="dragCheckbox" type="checkbox">
Continuous redraw on drag
</label>
<label class="menu-label">
<input id="combineValues" type="checkbox">
Combine values
</label>
<label class="menu-label">
<span>Board rotation</span>
<span style="float: right"><span id="rotationDegree">0</span>°</span>
<input id="boardRotation" type="range" min="-36" max="36" value="0" class="slider">
</label>
<label class="menu-label">
<div style="margin-left: 5px">BOM Checkboxes</div>
<input id="bomCheckboxes" class="menu-textbox" type=text>
<div style="margin-left: 5px">Remove BOM Entries</div>
<input id="removeBOMEntries" class="menu-textbox" type=text>
<div style="margin-left: 5px">Additional Attributes</div>
<input id="additionalAttributes" class="menu-textbox" type=text>
</label>
</div>
</div>
<div class="button-container hideonprint"
style="float: right; margin: 10px; position: relative; top: 8px">
<button id="fl-btn" class="left-most-button"title="Front only">F</button>
<button id="fb-btn" class="middle-button" title="Front and Back">FB</button>
<button id="bl-btn" class="right-most-button" title="Back only">B</button>
</div>
<div class="button-container hideonprint"
style="float: right; margin: 10px; position: relative; top: 8px">
<button id="bom-btn" class="left-most-button" title="BOM only"></button>
<button id="lr-btn" class="middle-button" title="BOM left, drawings right"></button>
<button id="tb-btn" class="right-most-button" title="BOM top, drawings bot"></button>
</div>
</div>
<div id="fileinfodiv" style="overflow: auto;">
<table class="fileinfo">
<tbody>
<tr>
<td id="title" class="title" style="width: 70%">
Title
</td>
<td id="revision" class="title" style="width: 30%">
Revision
</td>
</tr>
<tr>
<td id="company">
Kicad version
</td>
<td id="filedate">
Date
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="bot" class="split" style="height: calc(100% - 80px)">
<div id="bomdiv" class="split split-horizontal">
<div style="width: 100%">
<input id="filter" class="searchbox filter hideonprint" type="text" placeholder="Filter">
</div>
<div id="dbg"></div>
<table class="bom">
<thead id="bomhead">
</thead>
<tbody id="bombody">
</tbody>
</table>
</div>
<div id="canvasdiv" class="split split-horizontal">
<div id="frontcanvas" class="split" style="overflow: hidden">
<div style="position: relative; width: 100%; height: 100%;">
<canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
</div>
</div>
<div id="backcanvas" class="split" style="overflow: hidden">
<div style="position: relative; width: 100%; height: 100%;">
<canvas id="B_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="B_slk" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>