Skip to content

Commit 8623142

Browse files
qu1ckqu1ck
committed
Split html css and js into more files
1 parent d72816e commit 8623142

File tree

6 files changed

+897
-875
lines changed

6 files changed

+897
-875
lines changed

‎InteractiveHtmlBom/generate_interactive_bom.py‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,28 @@ def open_file(filename):
350350
subprocess.call(('xdg-open', filename))
351351

352352

353+
def generate_file(dir, pcbdata):
354+
def get_file_content(file_name):
355+
with open(os.path.join(os.path.dirname(__file__), file_name), "r") as f:
356+
return f.read()
357+
358+
print "Dumping pcb json data"
359+
bom_file_name = os.path.join(dir, "ibom.html")
360+
if not os.path.isdir(os.path.dirname(bom_file_name)):
361+
os.makedirs(os.path.dirname(bom_file_name))
362+
pcbdata_js = "var pcbdata = " + json.dumps(pcbdata)
363+
html = get_file_content("ibom.html")
364+
html = html.replace('///CSS///', get_file_content('ibom.css'))
365+
html = html.replace('///SPLITJS///', get_file_content('split.js'))
366+
html = html.replace('///PCBDATA///', pcbdata_js)
367+
html = html.replace('///RENDERJS///', get_file_content('render.js'))
368+
html = html.replace('///IBOMJS///', get_file_content('ibom.js'))
369+
with open(bom_file_name, "wt") as bom:
370+
bom.write(html)
371+
print "Created file", bom_file_name
372+
373+
374+
353375
def main(pcb, launch_browser=True):
354376
pcb_file_name = pcb.GetFileName()
355377
if not pcb_file_name:
@@ -392,17 +414,7 @@ def main(pcb, launch_browser=True):
392414
bom_table = generate_bom(pcb, filter_layer=layer)
393415
pcbdata["bom"]["F" if layer == pcbnew.F_Cu else "B"] = bom_table
394416

395-
print "Dumping pcb json data"
396-
bom_file_name = os.path.join(bom_file_dir, "ibom.html")
397-
if not os.path.isdir(os.path.dirname(bom_file_name)):
398-
os.makedirs(os.path.dirname(bom_file_name))
399-
pcbdata_js = "var pcbdata = " + json.dumps(pcbdata)
400-
with open(os.path.join(os.path.dirname(__file__), "ibom.html"), "r") as html:
401-
html_content = html.read()
402-
html_content = html_content.replace('///PCBDATA///', pcbdata_js)
403-
with open(bom_file_name, "wt") as bom:
404-
bom.write(html_content)
405-
print "Created file", bom_file_name
417+
bom_file = generate_file(bom_file_dir, pcbdata)
406418

407419
if launch_browser:
408420
print "Opening it in browser"

‎InteractiveHtmlBom/ibom.css‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
html, body {
2+
margin: 0px;
3+
height: 100%;
4+
font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
5+
}
6+
7+
button {
8+
/* Gray */
9+
background-color: #eee;
10+
border: 1px solid #888;
11+
color: black;
12+
height: 44px;
13+
width: 44px;
14+
text-align: center;
15+
text-decoration: none;
16+
display: inline-block;
17+
font-size: 14px;
18+
font-weight: bolder;
19+
}
20+
21+
button.depressed {
22+
background-color: #0a0;
23+
color: white;
24+
}
25+
26+
button:focus {
27+
outline: 0;
28+
}
29+
30+
button#tb-btn {
31+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFAAAABQUFCAgICQkJCgoKEBAQFhYWFxcXGxsbHBwcISEhIyMjJCQkKSkpLS0tLi4uMTExNzc3PDw8QEBAQkJCRERERkZGSEhIT09PWlpaW1tbXFxcYGBgaWlpd3d3eXl5enp6f39/gICAgYGBgoKCi4uLjIyMkpKSk5OTlJSUlpaWl5eXmZmZnJycn5+foqKipqamr6+vtLS0uLi4v7+/w8PDyMjIy8vLz8/P1dXV19fX3Nzc5ubm6urq7+/v8fHx9fX1+Pj4////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdkhsDgAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTnU1rJkAAAA/klEQVQ4T9WT21bCMBBFB0UQRAWrVEmtDYgtXlC03m8l//9PwyQZSRfSLF/dLzmr2WtyHjqAKIJKBCJgI80rSRsIIlUeUgFBTud0LS9K5YEVorXMnFDJnwWeuULpCW61QqlkJf+mQ8wDLdmYgyUmIeRKloMOB0v464lpxMHCHYozy5yF1yRJ5O23Ez5hb6ApWJhBf3BUb32UhKGep2GBPt7DtV94hgePcPN01T6ltBQ2tohHJ+zub3ZpgBMi/ZN/OSFXxTlc+DuoXssvzDs7HuHw5Hi7drcUCqlHGozwJqUcXb5TIkFMzMUPRnBMBGAzM3vKxCEHQ9ak7fauP+ICTGDKoEYZFYYAAAAASUVORK5CYII=');
32+
background-position: 5px 5px;
33+
background-repeat: no-repeat;
34+
}
35+
36+
button#lr-btn {
37+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAABYWFhcXFzIyMjc3Nzw8PD09PUBAQE9PT1ZWVldXV1paWlxcXGFhYWNjY2dnZ2xsbG5ubnFxcXNzc3V1dXZ2dnl5eYCAgIaGhpKSkpOTk5SUlJycnKKioqampqysrLGxsbe3t7+/v8XFxcnJydTU1NbW1tnZ2ebm5u/v7/z8/P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJTAHzkAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQBwYWludC5uZXQgNC4wLjE51NayZAAAAO5JREFUOE+tk9kSgjAMRatRcakbrogL4q7//30xobFUpOiD56XJ9ExzpzNRiDrwohEV1qLUAeQ0RDVUOno4JJBIZYi0ClKpM4pCGpQKYY/h3giJRYRB90jkAlheQsiXjGfEd6FJEbbcV2W45YIEIP6XoSBIAMIjSABChJySEaE8ZigRCnxmKHtBZOKXDCyEw9k8vnDvEeirz2vYU2UEmUe8BP6HxcgKEoBwhf7GCg4itMZzmHDvz3A6wI6qqgwpWEECEK5whrt/BAnXaYcqnwDQaC/pARZ0nN0IRsiJtcL6SjY14315V3Xa7sr1R3wC/SGCp4FJdscAAAAASUVORK5CYII=');
38+
background-position: 5px 5px;
39+
background-repeat: no-repeat;
40+
}
41+
42+
button#bom-btn {
43+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFAAAAFhYWFxcXQEBAXFxcYGBgkpKSk5OTlJSUn5+fr6+vv7+/z8/P////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQtWgtgAAAQB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AFP3ByUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTnU1rJkAAAAaElEQVQ4T+3T0QqAIAwF0JlrWub/f+5NcpCIk16Fzosv4+6CjAD2JgYITpJJHIglTwiTT+U9hq6ck68D+9D5Dpg+D2hmp1mhrTpNSdNSHTSz8/9FtVAHjk+WITJhC3qpA2Er1z09f+AGC2MyfYdXtvQAAAAASUVORK5CYII=');
44+
background-position: 5px 5px;
45+
background-repeat: no-repeat;
46+
}
47+
48+
.left-most-button {
49+
border-right: 0;
50+
border-top-left-radius: 6px;
51+
border-bottom-left-radius: 6px;
52+
}
53+
54+
.middle-button {
55+
border-right: 0;
56+
}
57+
58+
.right-most-button {
59+
border-top-right-radius: 6px;
60+
border-bottom-right-radius: 6px;
61+
}
62+
63+
.button-container {
64+
font-size: 0;
65+
}
66+
67+
@media print {
68+
.hideonprint {
69+
display: none;
70+
}
71+
}
72+
73+
canvas {
74+
margin: 1px;
75+
}
76+
77+
.fileinfo {
78+
width: 100%;
79+
max-width: 1000px;
80+
border: none;
81+
padding: 5px;
82+
}
83+
84+
.fileinfo .title {
85+
font-size: 20pt;
86+
font-weight: bold;
87+
}
88+
89+
.fileinfo td {
90+
overflow: hidden;
91+
white-space: nowrap;
92+
max-width: 1px;
93+
width: 50%;
94+
text-overflow: ellipsis;
95+
}
96+
97+
.bom {
98+
border-collapse: collapse;
99+
font-family: Consolas, monospace;
100+
font-size: 10pt;
101+
table-layout: fixed;
102+
width: 100%;
103+
margin-top: 1px;
104+
}
105+
106+
.bom th, .bom td {
107+
border: 1px solid black;
108+
padding: 5px;
109+
word-wrap: break-word;
110+
text-align: center;
111+
}
112+
113+
.bom th {
114+
background-color: #CCCCCC;
115+
}
116+
117+
.bom tr:nth-child(even) {
118+
background-color: #f2f2f2;
119+
}
120+
121+
.bom tr {
122+
transition: background-color 0.2s;
123+
}
124+
125+
.bom tr:hover {
126+
background-color: #cfc;
127+
}
128+
129+
.bom .numCol {
130+
width: 25px;
131+
}
132+
133+
.bom .Description {
134+
width: 10%;
135+
}
136+
137+
.bom .Part {
138+
width: 10%;
139+
}
140+
141+
.bom .Value {
142+
width: 15%;
143+
}
144+
145+
.bom .Quantity {
146+
width: 65px;
147+
}
148+
149+
.split {
150+
-webkit-box-sizing: border-box;
151+
-moz-box-sizing: border-box;
152+
box-sizing: border-box;
153+
overflow-y: auto;
154+
overflow-x: hidden;
155+
}
156+
157+
.split.split-horizontal, .gutter.gutter-horizontal {
158+
height: 100%;
159+
float: left;
160+
}
161+
162+
.gutter {
163+
background-color: #eee;
164+
background-repeat: no-repeat;
165+
background-position: 50%;
166+
}
167+
168+
.gutter.gutter-horizontal {
169+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
170+
cursor: ew-resize;
171+
width: 5px;
172+
}
173+
174+
.gutter.gutter-vertical {
175+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
176+
cursor: ns-resize;
177+
height: 5px;
178+
}
179+
180+
.searchbox {
181+
float: left;
182+
height: 40px;
183+
margin: 10px 5px;
184+
padding: 12px 32px;
185+
font-family: Consolas, "DejaVu Sans Mono", monospace;
186+
font-size: 18px;
187+
box-sizing: border-box;
188+
border: 1px solid #888;
189+
border-radius: 6px;
190+
outline: none;
191+
background-color: #eee;
192+
transition: background-color 0.2s, border 0.2s;
193+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABNklEQVQ4T8XSMUvDQBQH8P/LElFa/AIZHcTBQSz0I/gFstTBRR2KUC4ldDxw7h0Bl3RRUATxi4iiODgoiLNrbQYp5J6cpJJqomkX33Z37/14d/dIa33MzDuYI4johOI4XhyNRteO46zNYjDzAxE1yBZprVeZ+QbAUhXEGJMA2Ox2u4+fQIa0mPmsCgCgJYQ4t7lfgF0opQYAdv9ABkKI/UnOFCClXKjX61cA1osQY8x9kiRNKeV7IWA3oyhaSdP0FkAtjxhj3hzH2RBCPOf3pzqYHCilfAAX+URm9oMguPzeWSGQvUcMYC8rOBJCHBRdqxTo9/vbRHRqi8bj8XKv1xvODbiuW2u32/bvf0SlDv4XYOY7z/Mavu+nM1+BmQ+NMc0wDF/LprP0DbTWW0T00ul0nn4b7Q87+X4Qmfiq2wAAAABJRU5ErkJggg==');
194+
background-position: 10px 10px;
195+
background-repeat: no-repeat;
196+
}
197+
198+
.searchbox::placeholder {
199+
color: #ccc;
200+
}
201+
202+
.filter {
203+
width: calc(60% - 10px);
204+
}
205+
206+
.reflookup {
207+
width: calc(40% - 10px);
208+
}
209+
210+
input[type=text]:focus {
211+
background-color: white;
212+
border: 1px solid #333;
213+
}
214+
215+
mark.highlight {
216+
background-color: #5050ff;
217+
color: #fff;
218+
padding: 2px;
219+
border-radius: 6px;
220+
}

0 commit comments

Comments
 (0)