<!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>