MNT Reform: Open Source Portable Computer https://mntre.com/reform
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3625 lines
146KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Interactive BOM for KiCAD</title>
  7. <style type="text/css">
  8. :root {
  9. --pcb-edge-color: black;
  10. --pad-color: #878787;
  11. --pad-color-highlight: #D04040;
  12. --pin1-outline-color: #ffb629;
  13. --pin1-outline-color-highlight: #b4ff03;
  14. --silkscreen-edge-color: #aa4;
  15. --silkscreen-polygon-color: #4aa;
  16. --silkscreen-text-color: #4aa;
  17. --fabrication-edge-color: #907651;
  18. --fabrication-polygon-color: #907651;
  19. --fabrication-text-color: #a27c24;
  20. --track-color: #def5f1;
  21. --track-color-highlight: #D04040;
  22. --zone-color: #def5f1;
  23. --zone-color-highlight: #d0404080;
  24. }
  25. html, body {
  26. margin: 0px;
  27. height: 100%;
  28. font-family: Verdana, sans-serif;
  29. }
  30. .dark.topmostdiv {
  31. --pcb-edge-color: #eee;
  32. --pad-color: #808080;
  33. --pin1-outline-color: #ffa800;
  34. --pin1-outline-color-highlight: #ccff00;
  35. --track-color: #42524f;
  36. --zone-color: #42524f;
  37. background-color: #252c30;
  38. color: #eee;
  39. }
  40. button {
  41. background-color: #eee;
  42. border: 1px solid #888;
  43. color: black;
  44. height: 44px;
  45. width: 44px;
  46. text-align: center;
  47. text-decoration: none;
  48. display: inline-block;
  49. font-size: 14px;
  50. font-weight: bolder;
  51. }
  52. .dark button {
  53. /* This will be inverted */
  54. background-color: #c3b7b5;
  55. }
  56. button.depressed {
  57. background-color: #0a0;
  58. color: white;
  59. }
  60. .dark button.depressed {
  61. /* This will be inverted */
  62. background-color: #b3b;
  63. }
  64. button:focus {
  65. outline: 0;
  66. }
  67. button#tb-btn {
  68. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.32 290.12h5.82M1.32 291.45h5.82' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 292.5v4.23M.26 292.63H8.2' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='1.35' y='295.73'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
  69. }
  70. button#lr-btn {
  71. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.06 290.12H3.7m-2.64 1.33H3.7m-2.64 1.32H3.7m-2.64 1.3H3.7m-2.64 1.33H3.7' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 288.8v7.94m0-4.11h3.96' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='5.11' y='291.96'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
  72. }
  73. button#bom-btn {
  74. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)' fill='none' stroke='%23000' stroke-width='.4'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' stroke-linejoin='round'/%3E%3Cpath d='M1.59 290.12h5.29M1.59 291.45h5.33M1.59 292.75h5.33M1.59 294.09h5.33M1.59 295.41h5.33'/%3E%3C/g%3E%3C/svg%3E");
  75. }
  76. button#bom-grouped-btn {
  77. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m4 0h5m4 0h3M6.1 22h3m3.9 0h5m4 0h4m-16-8h4m4 0h4'/%3E%3Cpath stroke-linecap='null' d='M5 17.5h22M5 26.6h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E");
  78. }
  79. button#bom-ungrouped-btn {
  80. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%23000' stroke-linejoin='round' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-linecap='square' stroke-width='2' d='M6 10h4m-4 8h3m-3 8h4'/%3E%3Cpath stroke-linecap='null' d='M5 13.5h22m-22 8h22M5 5.5h22'/%3E%3C/g%3E%3C/svg%3E");
  81. }
  82. button#bom-netlist-btn {
  83. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23000' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-width='2' d='M6 26l6-6v-8m13.8-6.3l-6 6v8'/%3E%3Ccircle cx='11.8' cy='9.5' r='2.8' stroke-width='2'/%3E%3Ccircle cx='19.8' cy='22.8' r='2.8' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  84. }
  85. button#copy {
  86. background-image: url("data:image/svg+xml,%3Csvg height='48' viewBox='0 0 48 48' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h48v48h-48z' fill='none'/%3E%3Cpath d='M32 2h-24c-2.21 0-4 1.79-4 4v28h4v-28h24v-4zm6 8h-22c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h22c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm0 32h-22v-28h22v28z'/%3E%3C/svg%3E");
  87. background-position: 6px 6px;
  88. background-repeat: no-repeat;
  89. background-size: 26px 26px;
  90. border-radius: 6px;
  91. height: 40px;
  92. width: 40px;
  93. margin: 10px 5px;
  94. }
  95. button#copy:active {
  96. box-shadow: inset 0px 0px 5px #6c6c6c;
  97. }
  98. textarea.clipboard-temp {
  99. position: fixed;
  100. top: 0;
  101. left: 0;
  102. width: 2em;
  103. height: 2em;
  104. padding: 0;
  105. border: None;
  106. outline: None;
  107. box-shadow: None;
  108. background: transparent;
  109. }
  110. .left-most-button {
  111. border-right: 0;
  112. border-top-left-radius: 6px;
  113. border-bottom-left-radius: 6px;
  114. }
  115. .middle-button {
  116. border-right: 0;
  117. }
  118. .right-most-button {
  119. border-top-right-radius: 6px;
  120. border-bottom-right-radius: 6px;
  121. }
  122. .button-container {
  123. font-size: 0;
  124. margin: 10px 10px 10px 0px;
  125. }
  126. .dark .button-container {
  127. filter: invert(1);
  128. }
  129. .button-container button {
  130. background-size: 32px 32px;
  131. background-position: 5px 5px;
  132. background-repeat: no-repeat;
  133. }
  134. @media print {
  135. .hideonprint {
  136. display: none;
  137. }
  138. }
  139. canvas {
  140. cursor: crosshair;
  141. }
  142. canvas:active {
  143. cursor: grabbing;
  144. }
  145. .fileinfo {
  146. width: 100%;
  147. max-width: 1000px;
  148. border: none;
  149. padding: 5px;
  150. }
  151. .fileinfo .title {
  152. font-size: 20pt;
  153. font-weight: bold;
  154. }
  155. .fileinfo td {
  156. overflow: hidden;
  157. white-space: nowrap;
  158. max-width: 1px;
  159. width: 50%;
  160. text-overflow: ellipsis;
  161. }
  162. .bom {
  163. border-collapse: collapse;
  164. font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
  165. font-size: 10pt;
  166. table-layout: fixed;
  167. width: 100%;
  168. margin-top: 1px;
  169. }
  170. .bom th, .bom td {
  171. border: 1px solid black;
  172. padding: 5px;
  173. word-wrap: break-word;
  174. text-align: center;
  175. position: relative;
  176. }
  177. .dark .bom th, .dark .bom td {
  178. border: 1px solid #777;
  179. }
  180. .bom th {
  181. background-color: #CCCCCC;
  182. background-clip: padding-box;
  183. }
  184. .dark .bom th {
  185. background-color: #3b4749;
  186. }
  187. .bom tr.highlighted:nth-child(n) {
  188. background-color: #cfc;
  189. }
  190. .dark .bom tr.highlighted:nth-child(n) {
  191. background-color: #226022;
  192. }
  193. .bom tr:nth-child(even) {
  194. background-color: #f2f2f2;
  195. }
  196. .dark .bom tr:nth-child(even) {
  197. background-color: #313b40;
  198. }
  199. .bom tr.checked {
  200. color: #aaa;
  201. }
  202. .dark .bom tr.checked {
  203. color: #666;
  204. }
  205. .bom tr {
  206. transition: background-color 0.2s;
  207. }
  208. .bom .numCol {
  209. width: 25px;
  210. }
  211. .bom .Description {
  212. width: 10%;
  213. }
  214. .bom .Part {
  215. width: 10%;
  216. }
  217. .bom .Value {
  218. width: 15%;
  219. }
  220. .bom .Quantity {
  221. width: 65px;
  222. }
  223. .bom th .sortmark {
  224. position: absolute;
  225. right: 1px;
  226. top: 1px;
  227. margin-top: -5px;
  228. border-width: 5px;
  229. border-style: solid;
  230. border-color: transparent transparent #221 transparent;
  231. transform-origin: 50% 85%;
  232. transition: opacity 0.2s, transform 0.4s;
  233. }
  234. .dark .bom th .sortmark {
  235. filter: invert(1);
  236. }
  237. .bom th .sortmark.none {
  238. opacity: 0;
  239. }
  240. .bom th .sortmark.desc {
  241. transform: rotate(180deg);
  242. }
  243. .bom th:hover .sortmark.none {
  244. opacity: 0.5;
  245. }
  246. .bom .bom-checkbox {
  247. width: 30px;
  248. position: relative;
  249. user-select: none;
  250. -moz-user-select: none;
  251. }
  252. .bom .bom-checkbox:before {
  253. content: "";
  254. position: absolute;
  255. border-width: 15px;
  256. border-style: solid;
  257. border-color: #51829f transparent transparent transparent;
  258. visibility: hidden;
  259. top: -15px;
  260. }
  261. .bom .bom-checkbox:after {
  262. content: "Double click to set/unset all";
  263. position: absolute;
  264. color: white;
  265. top: -35px;
  266. left: -26px;
  267. background: #51829f;
  268. padding: 5px 15px;
  269. border-radius: 8px;
  270. white-space: nowrap;
  271. visibility: hidden;
  272. }
  273. .bom .bom-checkbox:hover:before, .bom .bom-checkbox:hover:after {
  274. visibility: visible;
  275. transition: visibility 0.2s linear 1s;
  276. }
  277. .split {
  278. -webkit-box-sizing: border-box;
  279. -moz-box-sizing: border-box;
  280. box-sizing: border-box;
  281. overflow-y: auto;
  282. overflow-x: hidden;
  283. background-color: inherit;
  284. }
  285. .split.split-horizontal, .gutter.gutter-horizontal {
  286. height: 100%;
  287. float: left;
  288. }
  289. .gutter {
  290. background-color: #ddd;
  291. background-repeat: no-repeat;
  292. background-position: 50%;
  293. transition: background-color 0.3s;
  294. }
  295. .dark .gutter {
  296. background-color: #777;
  297. }
  298. .gutter.gutter-horizontal {
  299. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  300. cursor: ew-resize;
  301. width: 5px;
  302. }
  303. .gutter.gutter-vertical {
  304. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
  305. cursor: ns-resize;
  306. height: 5px;
  307. }
  308. .searchbox {
  309. float: left;
  310. height: 40px;
  311. margin: 10px 5px;
  312. padding: 12px 32px;
  313. font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
  314. font-size: 18px;
  315. box-sizing: border-box;
  316. border: 1px solid #888;
  317. border-radius: 6px;
  318. outline: none;
  319. background-color: #eee;
  320. transition: background-color 0.2s, border 0.2s;
  321. 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==');
  322. background-position: 10px 10px;
  323. background-repeat: no-repeat;
  324. }
  325. .dark .searchbox {
  326. background-color: #111;
  327. color: #eee;
  328. }
  329. .searchbox::placeholder {
  330. color: #ccc;
  331. }
  332. .dark .searchbox::placeholder {
  333. color: #666;
  334. }
  335. .filter {
  336. width: calc(60% - 64px);
  337. }
  338. .reflookup {
  339. width: calc(40% - 10px);
  340. }
  341. input[type=text]:focus {
  342. background-color: white;
  343. border: 1px solid #333;
  344. }
  345. .dark input[type=text]:focus {
  346. background-color: #333;
  347. border: 1px solid #ccc;
  348. }
  349. mark.highlight {
  350. background-color: #5050ff;
  351. color: #fff;
  352. padding: 2px;
  353. border-radius: 6px;
  354. }
  355. .dark mark.highlight {
  356. background-color: #76a6da;
  357. color: #111;
  358. }
  359. .menubtn {
  360. background-color: white;
  361. border: none;
  362. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 20 20'%3E%3Cpath fill='none' d='M0 0h20v20H0V0z'/%3E%3Cpath d='M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z'/%3E%3C/svg%3E%0A");
  363. background-position: center;
  364. background-repeat: no-repeat;
  365. }
  366. .statsbtn {
  367. background-color: white;
  368. border: none;
  369. background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h28v24H4V6zm0 8h28v8H4m9-16v24h10V5.8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  370. background-position: center;
  371. background-repeat: no-repeat;
  372. }
  373. .iobtn {
  374. background-color: white;
  375. border: none;
  376. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M3 33v-7l6.8-7h16.5l6.7 7v7H3zM3.2 26H33M21 9l5-5.9 5 6h-2.5V15h-5V9H21zm-4.9 0l-5 6-5-6h2.5V3h5v6h2.5z'/%3E%3Cpath fill='none' stroke='%23000' d='M6.1 29.5H10'/%3E%3C/svg%3E");
  377. background-position: center;
  378. background-repeat: no-repeat;
  379. }
  380. .dark .statsbtn, .dark .savebtn, .dark .menubtn, .dark .iobtn {
  381. filter: invert(1);
  382. }
  383. .flexbox {
  384. display: flex;
  385. align-items: center;
  386. justify-content: space-between;
  387. width: 100%;
  388. }
  389. .savebtn {
  390. background-color: #d6d6d6;
  391. width: auto;
  392. height: 30px;
  393. flex-grow: 1;
  394. margin: 5px;
  395. border-radius: 4px;
  396. }
  397. .savebtn:active {
  398. background-color: #0a0;
  399. color: white;
  400. }
  401. .dark .savebtn:active {
  402. /* This will be inverted */
  403. background-color: #b3b;
  404. }
  405. .stats {
  406. border-collapse: collapse;
  407. font-size: 12pt;
  408. table-layout: fixed;
  409. width: 100%;
  410. min-width: 450px;
  411. }
  412. .dark .stats td {
  413. border: 1px solid #bbb;
  414. }
  415. .stats td {
  416. border: 1px solid black;
  417. padding: 5px;
  418. word-wrap: break-word;
  419. text-align: center;
  420. position: relative;
  421. }
  422. #checkbox-stats div {
  423. position: absolute;
  424. left: 0;
  425. top: 0;
  426. height: 100%;
  427. width: 100%;
  428. display: flex;
  429. align-items: center;
  430. justify-content: center;
  431. }
  432. #checkbox-stats .bar {
  433. background-color: rgba(28, 251, 0, 0.6);
  434. }
  435. .menu {
  436. position: relative;
  437. display: inline-block;
  438. margin: 10px 10px 10px 0px;
  439. }
  440. .menu-content {
  441. display: none;
  442. position: absolute;
  443. background-color: white;
  444. right: 0;
  445. min-width: 300px;
  446. box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  447. z-index: 100;
  448. padding: 8px;
  449. }
  450. .dark .menu-content {
  451. background-color: #111;
  452. }
  453. .menu:hover .menu-content {
  454. display: block;
  455. }
  456. .menu:hover .menubtn, .menu:hover .iobtn, .menu:hover .statsbtn {
  457. background-color: #eee;
  458. }
  459. .menu-label {
  460. display: inline-block;
  461. padding: 8px;
  462. border: 1px solid #ccc;
  463. border-top: 0;
  464. width: calc(100% - 18px);
  465. }
  466. .menu-label-top {
  467. border-top: 1px solid #ccc;
  468. }
  469. .menu-textbox {
  470. float: left;
  471. height: 24px;
  472. margin: 10px 5px;
  473. padding: 5px 5px;
  474. font-family: Consolas, "DejaVu Sans Mono", Monaco, monospace;
  475. font-size: 14px;
  476. box-sizing: border-box;
  477. border: 1px solid #888;
  478. border-radius: 4px;
  479. outline: none;
  480. background-color: #eee;
  481. transition: background-color 0.2s, border 0.2s;
  482. width: calc(100% - 10px);
  483. }
  484. .menu-textbox.invalid, .dark .menu-textbox.invalid {
  485. color: red;
  486. }
  487. .dark .menu-textbox {
  488. background-color: #222;
  489. color: #eee;
  490. }
  491. .radio-container {
  492. margin: 4px;
  493. }
  494. .topmostdiv {
  495. width: 100%;
  496. height: 100%;
  497. background-color: white;
  498. transition: background-color 0.3s;
  499. }
  500. #top {
  501. height: 78px;
  502. border-bottom: 2px solid black;
  503. }
  504. .dark #top {
  505. border-bottom: 2px solid #ccc;
  506. }
  507. #dbg {
  508. display: block;
  509. }
  510. ::-webkit-scrollbar {
  511. width: 8px;
  512. }
  513. ::-webkit-scrollbar-track {
  514. background: #aaa;
  515. }
  516. ::-webkit-scrollbar-thumb {
  517. background: #666;
  518. border-radius: 3px;
  519. }
  520. ::-webkit-scrollbar-thumb:hover {
  521. background: #555;
  522. }
  523. .slider {
  524. -webkit-appearance: none;
  525. width: 100%;
  526. margin: 3px 0;
  527. padding: 0;
  528. outline: none;
  529. opacity: 0.7;
  530. -webkit-transition: .2s;
  531. transition: opacity .2s;
  532. border-radius: 3px;
  533. }
  534. .slider:hover {
  535. opacity: 1;
  536. }
  537. .slider:focus {
  538. outline: none;
  539. }
  540. .slider::-webkit-slider-runnable-track {
  541. -webkit-appearance: none;
  542. width: 100%;
  543. height: 8px;
  544. background: #d3d3d3;
  545. border-radius: 3px;
  546. border: none;
  547. }
  548. .slider::-webkit-slider-thumb {
  549. -webkit-appearance: none;
  550. width: 15px;
  551. height: 15px;
  552. border-radius: 50%;
  553. background: #0a0;
  554. cursor: pointer;
  555. margin-top: -4px;
  556. }
  557. .dark .slider::-webkit-slider-thumb {
  558. background: #3d3;
  559. }
  560. .slider::-moz-range-thumb {
  561. width: 15px;
  562. height: 15px;
  563. border-radius: 50%;
  564. background: #0a0;
  565. cursor: pointer;
  566. }
  567. .slider::-moz-range-track {
  568. height: 8px;
  569. background: #d3d3d3;
  570. border-radius: 3px;
  571. }
  572. .dark .slider::-moz-range-thumb {
  573. background: #3d3;
  574. }
  575. .slider::-ms-track {
  576. width: 100%;
  577. height: 8px;
  578. border-width: 3px 0;
  579. background: transparent;
  580. border-color: transparent;
  581. color: transparent;
  582. transition: opacity .2s;
  583. }
  584. .slider::-ms-fill-lower {
  585. background: #d3d3d3;
  586. border: none;
  587. border-radius: 3px;
  588. }
  589. .slider::-ms-fill-upper {
  590. background: #d3d3d3;
  591. border: none;
  592. border-radius: 3px;
  593. }
  594. .slider::-ms-thumb {
  595. width: 15px;
  596. height: 15px;
  597. border-radius: 50%;
  598. background: #0a0;
  599. cursor: pointer;
  600. margin: 0;
  601. }
  602. .shameless-plug {
  603. font-size: 0.8em;
  604. text-align: center;
  605. display: block;
  606. }
  607. a {
  608. color: #0278a4;
  609. }
  610. .dark a {
  611. color: #00b9fd;
  612. }
  613. #frontcanvas, #backcanvas {
  614. touch-action: none;
  615. }
  616. </style>
  617. <script type="text/javascript" >
  618. ///////////////////////////////////////////////
  619. /*
  620. Split.js - v1.3.5
  621. MIT License
  622. https://github.com/nathancahill/Split.js
  623. */
  624. !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var e=window,t=e.document,n="addEventListener",i="removeEventListener",r="getBoundingClientRect",s=function(){return!1},o=e.attachEvent&&!e[n],a=["","-webkit-","-moz-","-o-"].filter(function(e){var n=t.createElement("div");return n.style.cssText="width:"+e+"calc(9px)",!!n.style.length}).shift()+"calc",l=function(e){return"string"==typeof e||e instanceof String?t.querySelector(e):e};return function(u,c){function z(e,t,n){var i=A(y,t,n);Object.keys(i).forEach(function(t){return e.style[t]=i[t]})}function h(e,t){var n=B(y,t);Object.keys(n).forEach(function(t){return e.style[t]=n[t]})}function f(e){var t=E[this.a],n=E[this.b],i=t.size+n.size;t.size=e/this.size*i,n.size=i-e/this.size*i,z(t.element,t.size,this.aGutterSize),z(n.element,n.size,this.bGutterSize)}function m(e){var t;this.dragging&&((t="touches"in e?e.touches[0][b]-this.start:e[b]-this.start)<=E[this.a].minSize+M+this.aGutterSize?t=E[this.a].minSize+this.aGutterSize:t>=this.size-(E[this.b].minSize+M+this.bGutterSize)&&(t=this.size-(E[this.b].minSize+this.bGutterSize)),f.call(this,t),c.onDrag&&c.onDrag())}function g(){var e=E[this.a].element,t=E[this.b].element;this.size=e[r]()[y]+t[r]()[y]+this.aGutterSize+this.bGutterSize,this.start=e[r]()[G]}function d(){var t=this,n=E[t.a].element,r=E[t.b].element;t.dragging&&c.onDragEnd&&c.onDragEnd(),t.dragging=!1,e[i]("mouseup",t.stop),e[i]("touchend",t.stop),e[i]("touchcancel",t.stop),t.parent[i]("mousemove",t.move),t.parent[i]("touchmove",t.move),delete t.stop,delete t.move,n[i]("selectstart",s),n[i]("dragstart",s),r[i]("selectstart",s),r[i]("dragstart",s),n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",r.style.userSelect="",r.style.webkitUserSelect="",r.style.MozUserSelect="",r.style.pointerEvents="",t.gutter.style.cursor="",t.parent.style.cursor=""}function S(t){var i=this,r=E[i.a].element,o=E[i.b].element;!i.dragging&&c.onDragStart&&c.onDragStart(),t.preventDefault(),i.dragging=!0,i.move=m.bind(i),i.stop=d.bind(i),e[n]("mouseup",i.stop),e[n]("touchend",i.stop),e[n]("touchcancel",i.stop),i.parent[n]("mousemove",i.move),i.parent[n]("touchmove",i.move),r[n]("selectstart",s),r[n]("dragstart",s),o[n]("selectstart",s),o[n]("dragstart",s),r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",o.style.userSelect="none",o.style.webkitUserSelect="none",o.style.MozUserSelect="none",o.style.pointerEvents="none",i.gutter.style.cursor=j,i.parent.style.cursor=j,g.call(i)}function v(e){e.forEach(function(t,n){if(n>0){var i=F[n-1],r=E[i.a],s=E[i.b];r.size=e[n-1],s.size=t,z(r.element,r.size,i.aGutterSize),z(s.element,s.size,i.bGutterSize)}})}function p(){F.forEach(function(e){e.parent.removeChild(e.gutter),E[e.a].element.style[y]="",E[e.b].element.style[y]=""})}void 0===c&&(c={});var y,b,G,E,w=l(u[0]).parentNode,D=e.getComputedStyle(w).flexDirection,U=c.sizes||u.map(function(){return 100/u.length}),k=void 0!==c.minSize?c.minSize:100,x=Array.isArray(k)?k:u.map(function(){return k}),L=void 0!==c.gutterSize?c.gutterSize:10,M=void 0!==c.snapOffset?c.snapOffset:30,O=c.direction||"horizontal",j=c.cursor||("horizontal"===O?"ew-resize":"ns-resize"),C=c.gutter||function(e,n){var i=t.createElement("div");return i.className="gutter gutter-"+n,i},A=c.elementStyle||function(e,t,n){var i={};return"string"==typeof t||t instanceof String?i[e]=t:i[e]=o?t+"%":a+"("+t+"% - "+n+"px)",i},B=c.gutterStyle||function(e,t){return n={},n[e]=t+"px",n;var n};"horizontal"===O?(y="width","clientWidth",b="clientX",G="left","paddingLeft"):"vertical"===O&&(y="height","clientHeight",b="clientY",G="top","paddingTop");var F=[];return E=u.map(function(e,t){var i,s={element:l(e),size:U[t],minSize:x[t]};if(t>0&&(i={a:t-1,b:t,dragging:!1,isFirst:1===t,isLast:t===u.length-1,direction:O,parent:w},i.aGutterSize=L,i.bGutterSize=L,i.isFirst&&(i.aGutterSize=L/2),i.isLast&&(i.bGutterSize=L/2),"row-reverse"===D||"column-reverse"===D)){var a=i.a;i.a=i.b,i.b=a}if(!o&&t>0){var c=C(t,O);h(c,L),c[n]("mousedown",S.bind(i)),c[n]("touchstart",S.bind(i)),w.insertBefore(c,s.element),i.gutter=c}0===t||t===u.length-1?z(s.element,s.size,L/2):z(s.element,s.size,L);var f=s.element[r]()[y];return f<s.minSize&&(s.minSize=f),t>0&&F.push(i),s}),o?{setSizes:v,destroy:p}:{setSizes:v,getSizes:function(){return E.map(function(e){return e.size})},collapse:function(e){if(e===F.length){var t=F[e-1];g.call(t),o||f.call(t,t.size-t.bGutterSize)}else{var n=F[e];g.call(n),o||f.call(n,n.aGutterSize)}},destroy:p}}});
  625. ///////////////////////////////////////////////
  626. ///////////////////////////////////////////////
  627. // Copyright (c) 2013 Pieroxy <pieroxy@pieroxy.net>
  628. // This work is free. You can redistribute it and/or modify it
  629. // under the terms of the WTFPL, Version 2
  630. // For more information see LICENSE.txt or http://www.wtfpl.net/
  631. //
  632. // For more information, the home page:
  633. // http://pieroxy.net/blog/pages/lz-string/testing.html
  634. //
  635. // LZ-based compression algorithm, version 1.4.4
  636. var LZString=function(){var o=String.fromCharCode,i={};var n={decompressFromBase64:function(o){return null==o?"":""==o?null:n._decompress(o.length,32,function(n){return function(o,n){if(!i[o]){i[o]={};for(var t=0;t<o.length;t++)i[o][o.charAt(t)]=t}return i[o][n]}("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o.charAt(n))})},_decompress:function(i,n,t){var r,e,a,s,p,u,l,f=[],c=4,d=4,h=3,v="",g=[],m={val:t(0),position:n,index:1};for(r=0;r<3;r+=1)f[r]=r;for(a=0,p=Math.pow(2,2),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;switch(a){case 0:for(a=0,p=Math.pow(2,8),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;l=o(a);break;case 1:for(a=0,p=Math.pow(2,16),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;l=o(a);break;case 2:return""}for(f[3]=l,e=l,g.push(l);;){if(m.index>i)return"";for(a=0,p=Math.pow(2,h),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;switch(l=a){case 0:for(a=0,p=Math.pow(2,8),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;f[d++]=o(a),l=d-1,c--;break;case 1:for(a=0,p=Math.pow(2,16),u=1;u!=p;)s=m.val&m.position,m.position>>=1,0==m.position&&(m.position=n,m.val=t(m.index++)),a|=(s>0?1:0)*u,u<<=1;f[d++]=o(a),l=d-1,c--;break;case 2:return g.join("")}if(0==c&&(c=Math.pow(2,h),h++),f[l])v=f[l];else{if(l!==d)return null;v=e+e.charAt(0)}g.push(v),f[d++]=e+v.charAt(0),e=v,0==--c&&(c=Math.pow(2,h),h++)}}};return n}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module?module.exports=LZString:"undefined"!=typeof angular&&null!=angular&&angular.module("LZString",[]).factory("LZString",function(){return LZString});
  637. ///////////////////////////////////////////////
  638. ///////////////////////////////////////////////
  639. /*!
  640. * PEP v0.4.3 | https://github.com/jquery/PEP
  641. * Copyright jQuery Foundation and other contributors | http://jquery.org/license
  642. */
  643. !function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):a.PointerEventsPolyfill=b()}(this,function(){"use strict";function a(a,b){b=b||Object.create(null);var c=document.createEvent("Event");c.initEvent(a,b.bubbles||!1,b.cancelable||!1);
  644. for(var d,e=2;e<m.length;e++)d=m[e],c[d]=b[d]||n[e];c.buttons=b.buttons||0;
  645. var f=0;return f=b.pressure&&c.buttons?b.pressure:c.buttons?.5:0,c.x=c.clientX,c.y=c.clientY,c.pointerId=b.pointerId||0,c.width=b.width||0,c.height=b.height||0,c.pressure=f,c.tiltX=b.tiltX||0,c.tiltY=b.tiltY||0,c.twist=b.twist||0,c.tangentialPressure=b.tangentialPressure||0,c.pointerType=b.pointerType||"",c.hwTimestamp=b.hwTimestamp||0,c.isPrimary=b.isPrimary||!1,c}function b(){this.array=[],this.size=0}function c(a,b,c,d){this.addCallback=a.bind(d),this.removeCallback=b.bind(d),this.changedCallback=c.bind(d),A&&(this.observer=new A(this.mutationWatcher.bind(this)))}function d(a){return"body /shadow-deep/ "+e(a)}function e(a){return'[touch-action="'+a+'"]'}function f(a){return"{ -ms-touch-action: "+a+"; touch-action: "+a+"; }"}function g(){if(F){D.forEach(function(a){String(a)===a?(E+=e(a)+f(a)+"\n",G&&(E+=d(a)+f(a)+"\n")):(E+=a.selectors.map(e)+f(a.rule)+"\n",G&&(E+=a.selectors.map(d)+f(a.rule)+"\n"))});var a=document.createElement("style");a.textContent=E,document.head.appendChild(a)}}function h(){if(!window.PointerEvent){if(window.PointerEvent=a,window.navigator.msPointerEnabled){var b=window.navigator.msMaxTouchPoints;Object.defineProperty(window.navigator,"maxTouchPoints",{value:b,enumerable:!0}),u.registerSource("ms",_)}else Object.defineProperty(window.navigator,"maxTouchPoints",{value:0,enumerable:!0}),u.registerSource("mouse",N),void 0!==window.ontouchstart&&u.registerSource("touch",V);u.register(document)}}function i(a){if(!u.pointermap.has(a)){var b=new Error("InvalidPointerId");throw b.name="InvalidPointerId",b}}function j(a){for(var b=a.parentNode;b&&b!==a.ownerDocument;)b=b.parentNode;if(!b){var c=new Error("InvalidStateError");throw c.name="InvalidStateError",c}}function k(a){var b=u.pointermap.get(a);return 0!==b.buttons}function l(){window.Element&&!Element.prototype.setPointerCapture&&Object.defineProperties(Element.prototype,{setPointerCapture:{value:W},releasePointerCapture:{value:X},hasPointerCapture:{value:Y}})}
  646. var m=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","pageX","pageY"],n=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0],o=window.Map&&window.Map.prototype.forEach,p=o?Map:b;b.prototype={set:function(a,b){return void 0===b?this["delete"](a):(this.has(a)||this.size++,void(this.array[a]=b))},has:function(a){return void 0!==this.array[a]},"delete":function(a){this.has(a)&&(delete this.array[a],this.size--)},get:function(a){return this.array[a]},clear:function(){this.array.length=0,this.size=0},forEach:function(a,b){return this.array.forEach(function(c,d){a.call(b,c,d,this)},this)}};var q=["bubbles","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget","buttons","pointerId","width","height","pressure","tiltX","tiltY","pointerType","hwTimestamp","isPrimary","type","target","currentTarget","which","pageX","pageY","timeStamp"],r=[!1,!1,null,null,0,0,0,0,!1,!1,!1,!1,0,null,0,0,0,0,0,0,0,"",0,!1,"",null,null,0,0,0,0],s={pointerover:1,pointerout:1,pointerenter:1,pointerleave:1},t="undefined"!=typeof SVGElementInstance,u={pointermap:new p,eventMap:Object.create(null),captureInfo:Object.create(null),eventSources:Object.create(null),eventSourceList:[],registerSource:function(a,b){var c=b,d=c.events;d&&(d.forEach(function(a){c[a]&&(this.eventMap[a]=c[a].bind(c))},this),this.eventSources[a]=c,this.eventSourceList.push(c))},register:function(a){for(var b,c=this.eventSourceList.length,d=0;d<c&&(b=this.eventSourceList[d]);d++)
  647. b.register.call(b,a)},unregister:function(a){for(var b,c=this.eventSourceList.length,d=0;d<c&&(b=this.eventSourceList[d]);d++)
  648. b.unregister.call(b,a)},contains:function(a,b){try{return a.contains(b)}catch(c){return!1}},down:function(a){a.bubbles=!0,this.fireEvent("pointerdown",a)},move:function(a){a.bubbles=!0,this.fireEvent("pointermove",a)},up:function(a){a.bubbles=!0,this.fireEvent("pointerup",a)},enter:function(a){a.bubbles=!1,this.fireEvent("pointerenter",a)},leave:function(a){a.bubbles=!1,this.fireEvent("pointerleave",a)},over:function(a){a.bubbles=!0,this.fireEvent("pointerover",a)},out:function(a){a.bubbles=!0,this.fireEvent("pointerout",a)},cancel:function(a){a.bubbles=!0,this.fireEvent("pointercancel",a)},leaveOut:function(a){this.out(a),this.propagate(a,this.leave,!1)},enterOver:function(a){this.over(a),this.propagate(a,this.enter,!0)},eventHandler:function(a){if(!a._handledByPE){var b=a.type,c=this.eventMap&&this.eventMap[b];c&&c(a),a._handledByPE=!0}},listen:function(a,b){b.forEach(function(b){this.addEvent(a,b)},this)},unlisten:function(a,b){b.forEach(function(b){this.removeEvent(a,b)},this)},addEvent:function(a,b){a.addEventListener(b,this.boundHandler)},removeEvent:function(a,b){a.removeEventListener(b,this.boundHandler)},makeEvent:function(b,c){this.captureInfo[c.pointerId]&&(c.relatedTarget=null);var d=new a(b,c);return c.preventDefault&&(d.preventDefault=c.preventDefault),d._target=d._target||c.target,d},fireEvent:function(a,b){var c=this.makeEvent(a,b);return this.dispatchEvent(c)},cloneEvent:function(a){for(var b,c=Object.create(null),d=0;d<q.length;d++)b=q[d],c[b]=a[b]||r[d],!t||"target"!==b&&"relatedTarget"!==b||c[b]instanceof SVGElementInstance&&(c[b]=c[b].correspondingUseElement);return a.preventDefault&&(c.preventDefault=function(){a.preventDefault()}),c},getTarget:function(a){var b=this.captureInfo[a.pointerId];return b?a._target!==b&&a.type in s?void 0:b:a._target},propagate:function(a,b,c){for(var d=a.target,e=[];d!==document&&!d.contains(a.relatedTarget);) if(e.push(d),d=d.parentNode,!d)return;c&&e.reverse(),e.forEach(function(c){a.target=c,b.call(this,a)},this)},setCapture:function(b,c,d){this.captureInfo[b]&&this.releaseCapture(b,d),this.captureInfo[b]=c,this.implicitRelease=this.releaseCapture.bind(this,b,d),document.addEventListener("pointerup",this.implicitRelease),document.addEventListener("pointercancel",this.implicitRelease);var e=new a("gotpointercapture");e.pointerId=b,e._target=c,d||this.asyncDispatchEvent(e)},releaseCapture:function(b,c){var d=this.captureInfo[b];if(d){this.captureInfo[b]=void 0,document.removeEventListener("pointerup",this.implicitRelease),document.removeEventListener("pointercancel",this.implicitRelease);var e=new a("lostpointercapture");e.pointerId=b,e._target=d,c||this.asyncDispatchEvent(e)}},dispatchEvent:/*scope.external.dispatchEvent || */function(a){var b=this.getTarget(a);if(b)return b.dispatchEvent(a)},asyncDispatchEvent:function(a){requestAnimationFrame(this.dispatchEvent.bind(this,a))}};u.boundHandler=u.eventHandler.bind(u);var v={shadow:function(a){if(a)return a.shadowRoot||a.webkitShadowRoot},canTarget:function(a){return a&&Boolean(a.elementFromPoint)},targetingShadow:function(a){var b=this.shadow(a);if(this.canTarget(b))return b},olderShadow:function(a){var b=a.olderShadowRoot;if(!b){var c=a.querySelector("shadow");c&&(b=c.olderShadowRoot)}return b},allShadows:function(a){for(var b=[],c=this.shadow(a);c;)b.push(c),c=this.olderShadow(c);return b},searchRoot:function(a,b,c){if(a){var d,e,f=a.elementFromPoint(b,c);for(e=this.targetingShadow(f);e;){if(d=e.elementFromPoint(b,c)){var g=this.targetingShadow(d);return this.searchRoot(g,b,c)||d} e=this.olderShadow(e)} return f}},owner:function(a){
  649. for(var b=a;b.parentNode;)b=b.parentNode;
  650. return b.nodeType!==Node.DOCUMENT_NODE&&b.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&(b=document),b},findTarget:function(a){var b=a.clientX,c=a.clientY,d=this.owner(a.target);
  651. return d.elementFromPoint(b,c)||(d=document),this.searchRoot(d,b,c)}},w=Array.prototype.forEach.call.bind(Array.prototype.forEach),x=Array.prototype.map.call.bind(Array.prototype.map),y=Array.prototype.slice.call.bind(Array.prototype.slice),z=Array.prototype.filter.call.bind(Array.prototype.filter),A=window.MutationObserver||window.WebKitMutationObserver,B="[touch-action]",C={subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["touch-action"]};c.prototype={watchSubtree:function(a){
  652. //
  653. this.observer&&v.canTarget(a)&&this.observer.observe(a,C)},enableOnSubtree:function(a){this.watchSubtree(a),a===document&&"complete"!==document.readyState?this.installOnLoad():this.installNewSubtree(a)},installNewSubtree:function(a){w(this.findElements(a),this.addElement,this)},findElements:function(a){return a.querySelectorAll?a.querySelectorAll(B):[]},removeElement:function(a){this.removeCallback(a)},addElement:function(a){this.addCallback(a)},elementChanged:function(a,b){this.changedCallback(a,b)},concatLists:function(a,b){return a.concat(y(b))},
  654. installOnLoad:function(){document.addEventListener("readystatechange",function(){"complete"===document.readyState&&this.installNewSubtree(document)}.bind(this))},isElement:function(a){return a.nodeType===Node.ELEMENT_NODE},flattenMutationTree:function(a){
  655. var b=x(a,this.findElements,this);
  656. return b.push(z(a,this.isElement)),b.reduce(this.concatLists,[])},mutationWatcher:function(a){a.forEach(this.mutationHandler,this)},mutationHandler:function(a){if("childList"===a.type){var b=this.flattenMutationTree(a.addedNodes);b.forEach(this.addElement,this);var c=this.flattenMutationTree(a.removedNodes);c.forEach(this.removeElement,this)}else"attributes"===a.type&&this.elementChanged(a.target,a.oldValue)}};var D=["none","auto","pan-x","pan-y",{rule:"pan-x pan-y",selectors:["pan-x pan-y","pan-y pan-x"]}],E="",F=window.PointerEvent||window.MSPointerEvent,G=!window.ShadowDOMPolyfill&&document.head.createShadowRoot,H=u.pointermap,I=25,J=[1,4,2,8,16],K=!1;try{K=1===new MouseEvent("test",{buttons:1}).buttons}catch(L){}
  657. var M,N={POINTER_ID:1,POINTER_TYPE:"mouse",events:["mousedown","mousemove","mouseup","mouseover","mouseout"],register:function(a){u.listen(a,this.events)},unregister:function(a){u.unlisten(a,this.events)},lastTouches:[],
  658. isEventSimulatedFromTouch:function(a){for(var b,c=this.lastTouches,d=a.clientX,e=a.clientY,f=0,g=c.length;f<g&&(b=c[f]);f++){
  659. var h=Math.abs(d-b.x),i=Math.abs(e-b.y);if(h<=I&&i<=I)return!0}},prepareEvent:function(a){var b=u.cloneEvent(a),c=b.preventDefault;return b.preventDefault=function(){a.preventDefault(),c()},b.pointerId=this.POINTER_ID,b.isPrimary=!0,b.pointerType=this.POINTER_TYPE,b},prepareButtonsForMove:function(a,b){var c=H.get(this.POINTER_ID);
  660. 0!==b.which&&c?a.buttons=c.buttons:a.buttons=0,b.buttons=a.buttons},mousedown:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=H.get(this.POINTER_ID),c=this.prepareEvent(a);K||(c.buttons=J[c.button],b&&(c.buttons|=b.buttons),a.buttons=c.buttons),H.set(this.POINTER_ID,a),b&&0!==b.buttons?u.move(c):u.down(c)}},mousemove:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K||this.prepareButtonsForMove(b,a),b.button=-1,H.set(this.POINTER_ID,a),u.move(b)}},mouseup:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=H.get(this.POINTER_ID),c=this.prepareEvent(a);if(!K){var d=J[c.button];
  661. c.buttons=b?b.buttons&~d:0,a.buttons=c.buttons}H.set(this.POINTER_ID,a),
  662. c.buttons&=~J[c.button],0===c.buttons?u.up(c):u.move(c)}},mouseover:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K||this.prepareButtonsForMove(b,a),b.button=-1,H.set(this.POINTER_ID,a),u.enterOver(b)}},mouseout:function(a){if(!this.isEventSimulatedFromTouch(a)){var b=this.prepareEvent(a);K||this.prepareButtonsForMove(b,a),b.button=-1,u.leaveOut(b)}},cancel:function(a){var b=this.prepareEvent(a);u.cancel(b),this.deactivateMouse()},deactivateMouse:function(){H["delete"](this.POINTER_ID)}},O=u.captureInfo,P=v.findTarget.bind(v),Q=v.allShadows.bind(v),R=u.pointermap,S=2500,T=200,U="touch-action",V={events:["touchstart","touchmove","touchend","touchcancel"],register:function(a){M.enableOnSubtree(a)},unregister:function(){},elementAdded:function(a){var b=a.getAttribute(U),c=this.touchActionToScrollType(b);c&&(a._scrollType=c,u.listen(a,this.events),
  663. Q(a).forEach(function(a){a._scrollType=c,u.listen(a,this.events)},this))},elementRemoved:function(a){a._scrollType=void 0,u.unlisten(a,this.events),
  664. Q(a).forEach(function(a){a._scrollType=void 0,u.unlisten(a,this.events)},this)},elementChanged:function(a,b){var c=a.getAttribute(U),d=this.touchActionToScrollType(c),e=this.touchActionToScrollType(b);
  665. d&&e?(a._scrollType=d,Q(a).forEach(function(a){a._scrollType=d},this)):e?this.elementRemoved(a):d&&this.elementAdded(a)},scrollTypes:{EMITTER:"none",XSCROLLER:"pan-x",YSCROLLER:"pan-y",SCROLLER:/^(?:pan-x pan-y)|(?:pan-y pan-x)|auto$/},touchActionToScrollType:function(a){var b=a,c=this.scrollTypes;return"none"===b?"none":b===c.XSCROLLER?"X":b===c.YSCROLLER?"Y":c.SCROLLER.exec(b)?"XY":void 0},POINTER_TYPE:"touch",firstTouch:null,isPrimaryTouch:function(a){return this.firstTouch===a.identifier},setPrimaryTouch:function(a){
  666. (0===R.size||1===R.size&&R.has(1))&&(this.firstTouch=a.identifier,this.firstXY={X:a.clientX,Y:a.clientY},this.scrolling=!1,this.cancelResetClickCount())},removePrimaryPointer:function(a){a.isPrimary&&(this.firstTouch=null,this.firstXY=null,this.resetClickCount())},clickCount:0,resetId:null,resetClickCount:function(){var a=function(){this.clickCount=0,this.resetId=null}.bind(this);this.resetId=setTimeout(a,T)},cancelResetClickCount:function(){this.resetId&&clearTimeout(this.resetId)},typeToButtons:function(a){var b=0;return"touchstart"!==a&&"touchmove"!==a||(b=1),b},touchToPointer:function(a){var b=this.currentTouchEvent,c=u.cloneEvent(a),d=c.pointerId=a.identifier+2;c.target=O[d]||P(c),c.bubbles=!0,c.cancelable=!0,c.detail=this.clickCount,c.button=0,c.buttons=this.typeToButtons(b.type),c.width=2*(a.radiusX||a.webkitRadiusX||0),c.height=2*(a.radiusY||a.webkitRadiusY||0),c.pressure=a.force||a.webkitForce||.5,c.isPrimary=this.isPrimaryTouch(a),c.pointerType=this.POINTER_TYPE,
  667. c.altKey=b.altKey,c.ctrlKey=b.ctrlKey,c.metaKey=b.metaKey,c.shiftKey=b.shiftKey;
  668. var e=this;return c.preventDefault=function(){e.scrolling=!1,e.firstXY=null,b.preventDefault()},c},processTouches:function(a,b){var c=a.changedTouches;this.currentTouchEvent=a;for(var d,e=0;e<c.length;e++)d=c[e],b.call(this,this.touchToPointer(d))},
  669. shouldScroll:function(a){if(this.firstXY){var b,c=a.currentTarget._scrollType;if("none"===c)
  670. b=!1;else if("XY"===c)
  671. b=!0;else{var d=a.changedTouches[0],e=c,f="Y"===c?"X":"Y",g=Math.abs(d["client"+e]-this.firstXY[e]),h=Math.abs(d["client"+f]-this.firstXY[f]);
  672. b=g>=h}return this.firstXY=null,b}},findTouch:function(a,b){for(var c,d=0,e=a.length;d<e&&(c=a[d]);d++)if(c.identifier===b)return!0},
  673. vacuumTouches:function(a){var b=a.touches;
  674. if(R.size>=b.length){var c=[];R.forEach(function(a,d){
  675. if(1!==d&&!this.findTouch(b,d-2)){var e=a.out;c.push(e)}},this),c.forEach(this.cancelOut,this)}},touchstart:function(a){this.vacuumTouches(a),this.setPrimaryTouch(a.changedTouches[0]),this.dedupSynthMouse(a),this.scrolling||(this.clickCount++,this.processTouches(a,this.overDown))},overDown:function(a){R.set(a.pointerId,{target:a.target,out:a,outTarget:a.target}),u.enterOver(a),u.down(a)},touchmove:function(a){this.scrolling||(this.shouldScroll(a)?(this.scrolling=!0,this.touchcancel(a)):(a.preventDefault(),this.processTouches(a,this.moveOverOut)))},moveOverOut:function(a){var b=a,c=R.get(b.pointerId);
  676. if(c){var d=c.out,e=c.outTarget;u.move(b),d&&e!==b.target&&(d.relatedTarget=b.target,b.relatedTarget=e,
  677. d.target=e,b.target?(u.leaveOut(d),u.enterOver(b)):(
  678. b.target=e,b.relatedTarget=null,this.cancelOut(b))),c.out=b,c.outTarget=b.target}},touchend:function(a){this.dedupSynthMouse(a),this.processTouches(a,this.upOut)},upOut:function(a){this.scrolling||(u.up(a),u.leaveOut(a)),this.cleanUpPointer(a)},touchcancel:function(a){this.processTouches(a,this.cancelOut)},cancelOut:function(a){u.cancel(a),u.leaveOut(a),this.cleanUpPointer(a)},cleanUpPointer:function(a){R["delete"](a.pointerId),this.removePrimaryPointer(a)},
  679. dedupSynthMouse:function(a){var b=N.lastTouches,c=a.changedTouches[0];
  680. if(this.isPrimaryTouch(c)){
  681. var d={x:c.clientX,y:c.clientY};b.push(d);var e=function(a,b){var c=a.indexOf(b);c>-1&&a.splice(c,1)}.bind(null,b,d);setTimeout(e,S)}}};M=new c(V.elementAdded,V.elementRemoved,V.elementChanged,V);var W,X,Y,Z=u.pointermap,$=window.MSPointerEvent&&"number"==typeof window.MSPointerEvent.MSPOINTER_TYPE_MOUSE,_={events:["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerOut","MSPointerOver","MSPointerCancel","MSGotPointerCapture","MSLostPointerCapture"],register:function(a){u.listen(a,this.events)},unregister:function(a){u.unlisten(a,this.events)},POINTER_TYPES:["","unavailable","touch","pen","mouse"],prepareEvent:function(a){var b=a;return $&&(b=u.cloneEvent(a),b.pointerType=this.POINTER_TYPES[a.pointerType]),b},cleanup:function(a){Z["delete"](a)},MSPointerDown:function(a){Z.set(a.pointerId,a);var b=this.prepareEvent(a);u.down(b)},MSPointerMove:function(a){var b=this.prepareEvent(a);u.move(b)},MSPointerUp:function(a){var b=this.prepareEvent(a);u.up(b),this.cleanup(a.pointerId)},MSPointerOut:function(a){var b=this.prepareEvent(a);u.leaveOut(b)},MSPointerOver:function(a){var b=this.prepareEvent(a);u.enterOver(b)},MSPointerCancel:function(a){var b=this.prepareEvent(a);u.cancel(b),this.cleanup(a.pointerId)},MSLostPointerCapture:function(a){var b=u.makeEvent("lostpointercapture",a);u.dispatchEvent(b)},MSGotPointerCapture:function(a){var b=u.makeEvent("gotpointercapture",a);u.dispatchEvent(b)}},aa=window.navigator;aa.msPointerEnabled?(W=function(a){i(a),j(this),k(a)&&(u.setCapture(a,this,!0),this.msSetPointerCapture(a))},X=function(a){i(a),u.releaseCapture(a,!0),this.msReleasePointerCapture(a)}):(W=function(a){i(a),j(this),k(a)&&u.setCapture(a,this)},X=function(a){i(a),u.releaseCapture(a)}),Y=function(a){return!!u.captureInfo[a]},g(),h(),l();var ba={dispatcher:u,Installer:c,PointerEvent:a,PointerMap:p,targetFinding:v};return ba});
  682. ///////////////////////////////////////////////
  683. ///////////////////////////////////////////////
  684. var config = {"dark_mode": true, "show_pads": true, "show_fabrication": false, "show_silkscreen": true, "highlight_pin1": false, "redraw_on_drag": true, "board_rotation": 0.0, "checkboxes": "Sourced,Placed", "bom_view": "top-bottom", "layer_view": "F", "extra_fields": ["Manufacturer", "Manufacturer_No"]}
  685. ///////////////////////////////////////////////
  686. ///////////////////////////////////////////////
  687. var pcbdata = JSON.parse(LZString.decompressFromBase64("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"))
  688. ///////////////////////////////////////////////
  689. ///////////////////////////////////////////////
  690. /* Utility functions */
  691. var storagePrefix = 'KiCad_HTML_BOM__' + pcbdata.metadata.title + '__' +
  692. pcbdata.metadata.revision + '__#';
  693. var storage;
  694. function initStorage(key) {
  695. try {
  696. window.localStorage.getItem("blank");
  697. storage = window.localStorage;
  698. } catch (e) {
  699. // localStorage not available
  700. }
  701. if (!storage) {
  702. try {
  703. window.sessionStorage.getItem("blank");
  704. storage = window.sessionStorage;
  705. } catch (e) {
  706. // sessionStorage also not available
  707. }
  708. }
  709. }
  710. function readStorage(key) {
  711. if (storage) {
  712. return storage.getItem(storagePrefix + key);
  713. } else {
  714. return null;
  715. }
  716. }
  717. function writeStorage(key, value) {
  718. if (storage) {
  719. storage.setItem(storagePrefix + key, value);
  720. }
  721. }
  722. function fancyDblClickHandler(el, onsingle, ondouble) {
  723. return function() {
  724. if (el.getAttribute("data-dblclick") == null) {
  725. el.setAttribute("data-dblclick", 1);
  726. setTimeout(function() {
  727. if (el.getAttribute("data-dblclick") == 1) {
  728. onsingle();
  729. }
  730. el.removeAttribute("data-dblclick");
  731. }, 200);
  732. } else {
  733. el.removeAttribute("data-dblclick");
  734. ondouble();
  735. }
  736. }
  737. }
  738. function smoothScrollToRow(rowid) {
  739. document.getElementById(rowid).scrollIntoView({
  740. behavior: "smooth",
  741. block: "center",
  742. inline: "nearest"
  743. });
  744. }
  745. function focusInputField(input) {
  746. input.scrollIntoView(false);
  747. input.focus();
  748. input.select();
  749. }
  750. function copyToClipboard() {
  751. var text = '';
  752. for (var node of bomhead.childNodes[0].childNodes) {
  753. if (node.firstChild) {
  754. text = text + node.firstChild.nodeValue;
  755. }
  756. if (node != bomhead.childNodes[0].lastChild) {
  757. text += '\t';
  758. }
  759. }
  760. text += '\n';
  761. for (var row of bombody.childNodes) {
  762. for (var cell of row.childNodes) {
  763. for (var node of cell.childNodes) {
  764. if (node.nodeName == "INPUT") {
  765. if (node.checked) {
  766. text = text + '✓';
  767. }
  768. } else if (node.nodeName == "MARK") {
  769. text = text + node.firstChild.nodeValue;
  770. } else {
  771. text = text + node.nodeValue;
  772. }
  773. }
  774. if (cell != row.lastChild) {
  775. text += '\t';
  776. }
  777. }
  778. text += '\n';
  779. }
  780. var textArea = document.createElement("textarea");
  781. textArea.classList.add('clipboard-temp');
  782. textArea.value = text;
  783. document.body.appendChild(textArea);
  784. textArea.focus();
  785. textArea.select();
  786. try {
  787. if (document.execCommand('copy')) {
  788. console.log('Bom copied to clipboard.');
  789. }
  790. } catch (err) {
  791. console.log('Can not copy to clipboard.');
  792. }
  793. document.body.removeChild(textArea);
  794. }
  795. function removeGutterNode(node) {
  796. for (var i = 0; i < node.childNodes.length; i++) {
  797. if (node.childNodes[i].classList &&
  798. node.childNodes[i].classList.contains("gutter")) {
  799. node.removeChild(node.childNodes[i]);
  800. break;
  801. }
  802. }
  803. }
  804. function cleanGutters() {
  805. removeGutterNode(document.getElementById("bot"));
  806. removeGutterNode(document.getElementById("canvasdiv"));
  807. }
  808. var units = {
  809. prefixes: {
  810. giga: ["G", "g", "giga", "Giga", "GIGA"],
  811. mega: ["M", "mega", "Mega", "MEGA"],
  812. kilo: ["K", "k", "kilo", "Kilo", "KILO"],
  813. milli: ["m", "milli", "Milli", "MILLI"],
  814. micro: ["U", "u", "micro", "Micro", "MICRO", "μ", "µ"], // different utf8 μ
  815. nano: ["N", "n", "nano", "Nano", "NANO"],
  816. pico: ["P", "p", "pico", "Pico", "PICO"],
  817. },
  818. unitsShort: ["R", "r", "Ω", "F", "f", "H", "h"],
  819. unitsLong: [
  820. "OHM", "Ohm", "ohm", "ohms",
  821. "FARAD", "Farad", "farad",
  822. "HENRY", "Henry", "henry"
  823. ],
  824. getMultiplier: function(s) {
  825. if (this.prefixes.giga.includes(s)) return 1e9;
  826. if (this.prefixes.mega.includes(s)) return 1e6;
  827. if (this.prefixes.kilo.includes(s)) return 1e3;
  828. if (this.prefixes.milli.includes(s)) return 1e-3;
  829. if (this.prefixes.micro.includes(s)) return 1e-6;
  830. if (this.prefixes.nano.includes(s)) return 1e-9;
  831. if (this.prefixes.pico.includes(s)) return 1e-12;
  832. return 1;
  833. },
  834. valueRegex: null,
  835. }
  836. function initUtils() {
  837. var allPrefixes = units.prefixes.giga
  838. .concat(units.prefixes.mega)
  839. .concat(units.prefixes.kilo)
  840. .concat(units.prefixes.milli)
  841. .concat(units.prefixes.micro)
  842. .concat(units.prefixes.nano)
  843. .concat(units.prefixes.pico);
  844. var allUnits = units.unitsShort.concat(units.unitsLong);
  845. units.valueRegex = new RegExp("^([0-9\.]+)" +
  846. "\\s*(" + allPrefixes.join("|") + ")?" +
  847. "(" + allUnits.join("|") + ")?" +
  848. "(\\b.*)?$", "");
  849. units.valueAltRegex = new RegExp("^([0-9]*)" +
  850. "(" + units.unitsShort.join("|") + ")?" +
  851. "([GgMmKkUuNnPp])?" +
  852. "([0-9]*)" +
  853. "(\\b.*)?$", "");
  854. for (var bom_type of ["both", "F", "B"]) {
  855. for (var row of pcbdata.bom[bom_type]) {
  856. row.push(parseValue(row[1], row[3][0][0]));
  857. }
  858. }
  859. }
  860. function parseValue(val, ref) {
  861. var inferUnit = (unit, ref) => {
  862. if (unit) {
  863. unit = unit.toLowerCase();
  864. if (unit == 'Ω' || unit == "ohm" || unit == "ohms") {
  865. unit = 'r';
  866. }
  867. unit = unit[0];
  868. } else {
  869. ref = /^([a-z]+)\d+$/i.exec(ref);
  870. if (ref) {
  871. ref = ref[1].toLowerCase();
  872. if (ref == "c") unit = 'f';
  873. else if (ref == "l") unit = 'h';
  874. else if (ref == "r" || ref == "rv") unit = 'r';
  875. else unit = null;
  876. }
  877. }
  878. return unit;
  879. };
  880. val = val.replace(/,/g, "");
  881. var match = units.valueRegex.exec(val);
  882. var unit;
  883. if (match) {
  884. val = parseFloat(match[1]);
  885. if (match[2]) {
  886. val = val * units.getMultiplier(match[2]);
  887. }
  888. unit = inferUnit(match[3], ref);
  889. if (!unit) return null;
  890. else return {
  891. val: val,
  892. unit: unit,
  893. extra: match[4],
  894. }
  895. }
  896. match = units.valueAltRegex.exec(val);
  897. if (match && (match[1] || match[4])) {
  898. val = parseFloat(match[1] + "." + match[4]);
  899. if (match[3]) {
  900. val = val * units.getMultiplier(match[3]);
  901. }
  902. unit = inferUnit(match[2], ref);
  903. if (!unit) return null;
  904. else return {
  905. val: val,
  906. unit: unit,
  907. extra: match[5],
  908. }
  909. }
  910. return null;
  911. }
  912. function valueCompare(a, b, stra, strb) {
  913. if (a === null && b === null) {
  914. // Failed to parse both values, compare them as strings.
  915. if (stra != strb) return stra > strb ? 1 : -1;
  916. else return 0;
  917. } else if (a === null) {
  918. return 1;
  919. } else if (b === null) {
  920. return -1;
  921. } else {
  922. if (a.unit != b.unit) return a.unit > b.unit ? 1 : -1;
  923. else if (a.val != b.val) return a.val > b.val ? 1 : -1;
  924. else if (a.extra != b.extra) return a.extra > b.extra ? 1 : -1;
  925. else return 0;
  926. }
  927. }
  928. function validateSaveImgDimension(element) {
  929. var valid = false;
  930. var intValue = 0;
  931. if (/^[1-9]\d*$/.test(element.value)) {
  932. intValue = parseInt(element.value);
  933. if (intValue <= 16000) {
  934. valid = true;
  935. }
  936. }
  937. if (valid) {
  938. element.classList.remove("invalid");
  939. } else {
  940. element.classList.add("invalid");
  941. }
  942. return intValue;
  943. }
  944. function saveImage(layer) {
  945. var width = validateSaveImgDimension(document.getElementById("render-save-width"));
  946. var height = validateSaveImgDimension(document.getElementById("render-save-height"));
  947. var bgcolor = null;
  948. if (!document.getElementById("render-save-transparent").checked) {
  949. var style = getComputedStyle(topmostdiv);
  950. bgcolor = style.getPropertyValue("background-color");
  951. }
  952. if (!width || !height) return;
  953. // Prepare image
  954. var canvas = document.createElement("canvas");
  955. var layerdict = {
  956. transform: {
  957. x: 0,
  958. y: 0,
  959. s: 1,
  960. panx: 0,
  961. pany: 0,
  962. zoom: 1,
  963. },
  964. bg: canvas,
  965. fab: canvas,
  966. silk: canvas,
  967. highlight: canvas,
  968. layer: layer,
  969. }
  970. // Do the rendering
  971. recalcLayerScale(layerdict, width, height);
  972. prepareLayer(layerdict);
  973. clearCanvas(canvas, bgcolor);
  974. drawBackground(layerdict, false);
  975. drawHighlightsOnLayer(layerdict, false);
  976. // Save image
  977. var imgdata = canvas.toDataURL("image/png");
  978. var filename = pcbdata.metadata.title;
  979. if (pcbdata.metadata.revision) {
  980. filename += `.${pcbdata.metadata.revision}`;
  981. }
  982. filename += `.${layer}.png`;
  983. saveFile(filename, dataURLtoBlob(imgdata));
  984. }
  985. function saveSettings() {
  986. var data = {
  987. type: "InteractiveHtmlBom settings",
  988. version: 1,
  989. pcbmetadata: pcbdata.metadata,
  990. settings: settings,
  991. }
  992. var blob = new Blob([JSON.stringify(data, null, 4)], {type: "application/json"});
  993. saveFile(`${pcbdata.metadata.title}.settings.json`, blob);
  994. }
  995. function loadSettings() {
  996. var input = document.createElement("input");
  997. input.type = "file";
  998. input.accept = ".settings.json";
  999. input.onchange = function(e) {
  1000. var file = e.target.files[0];
  1001. var reader = new FileReader();
  1002. reader.onload = readerEvent => {
  1003. var content = readerEvent.target.result;
  1004. var newSettings;
  1005. try {
  1006. newSettings = JSON.parse(content);
  1007. } catch(e) {
  1008. alert("Selected file is not InteractiveHtmlBom settings file.");
  1009. return;
  1010. }
  1011. if (newSettings.type != "InteractiveHtmlBom settings") {
  1012. alert("Selected file is not InteractiveHtmlBom settings file.");
  1013. return;
  1014. }
  1015. var metadataMatches = newSettings.hasOwnProperty("pcbmetadata");
  1016. if (metadataMatches) {
  1017. for (var k in pcbdata.metadata) {
  1018. if (!newSettings.pcbmetadata.hasOwnProperty(k) || newSettings.pcbmetadata[k] != pcbdata.metadata[k]) {
  1019. metadataMatches = false;
  1020. }
  1021. }
  1022. }
  1023. if (!metadataMatches) {
  1024. var currentMetadata = JSON.stringify(pcbdata.metadata, null, 4);
  1025. var fileMetadata = JSON.stringify(newSettings.pcbmetadata, null, 4);
  1026. if (!confirm(
  1027. `Settins file metadata does not match current metadata.\n\n` +
  1028. `Page metadata:\n${currentMetadata}\n\n` +
  1029. `Settings file metadata:\n${fileMetadata}\n\n` +
  1030. `Press OK if you would like to import settings anyway.`)) {
  1031. return;
  1032. }
  1033. }
  1034. overwriteSettings(newSettings.settings);
  1035. }
  1036. reader.readAsText(file, 'UTF-8');
  1037. }
  1038. input.click();
  1039. }
  1040. function overwriteSettings(newSettings) {
  1041. initDone = false;
  1042. Object.assign(settings, newSettings);
  1043. writeStorage("bomlayout", settings.bomlayout);
  1044. writeStorage("bommode", settings.bommode);
  1045. writeStorage("canvaslayout", settings.canvaslayout);
  1046. writeStorage("bomCheckboxes", settings.checkboxes.join(","));
  1047. document.getElementById("bomCheckboxes").value = settings.checkboxes.join(",");
  1048. for (var checkbox of settings.checkboxes) {
  1049. writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
  1050. }
  1051. writeStorage("darkenWhenChecked", settings.darkenWhenChecked);
  1052. padsVisible(settings.renderPads);
  1053. document.getElementById("padsCheckbox").checked = settings.renderPads;
  1054. fabricationVisible(settings.renderFabrication);
  1055. document.getElementById("fabricationCheckbox").checked = settings.renderFabrication;
  1056. silkscreenVisible(settings.renderSilkscreen);
  1057. document.getElementById("silkscreenCheckbox").checked = settings.renderSilkscreen;
  1058. referencesVisible(settings.renderReferences);
  1059. document.getElementById("referencesCheckbox").checked = settings.renderReferences;
  1060. valuesVisible(settings.renderValues);
  1061. document.getElementById("valuesCheckbox").checked = settings.renderValues;
  1062. tracksVisible(settings.renderTracks);
  1063. document.getElementById("tracksCheckbox").checked = settings.renderTracks;
  1064. zonesVisible(settings.renderZones);
  1065. document.getElementById("zonesCheckbox").checked = settings.renderZones;
  1066. dnpOutline(settings.renderDnpOutline);
  1067. document.getElementById("dnpOutlineCheckbox").checked = settings.renderDnpOutline;
  1068. setRedrawOnDrag(settings.redrawOnDrag);
  1069. document.getElementById("dragCheckbox").checked = settings.redrawOnDrag;
  1070. setDarkMode(settings.darkMode);
  1071. document.getElementById("darkmodeCheckbox").checked = settings.darkMode;
  1072. setHighlightPin1(settings.highlightpin1);
  1073. document.getElementById("highlightpin1Checkbox").checked = settings.highlightpin1;
  1074. writeStorage("boardRotation", settings.boardRotation);
  1075. document.getElementById("boardRotation").value = settings.boardRotation / 5;
  1076. document.getElementById("rotationDegree").textContent = settings.boardRotation;
  1077. initDone = true;
  1078. prepCheckboxes();
  1079. changeBomLayout(settings.bomlayout);
  1080. }
  1081. function saveFile(filename, blob) {
  1082. var link = document.createElement("a");
  1083. var objurl = URL.createObjectURL(blob);
  1084. link.download = filename;
  1085. link.href = objurl;
  1086. link.click();
  1087. }
  1088. function dataURLtoBlob(dataurl) {
  1089. var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  1090. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  1091. while(n--){
  1092. u8arr[n] = bstr.charCodeAt(n);
  1093. }
  1094. return new Blob([u8arr], {type:mime});
  1095. }
  1096. var settings = {
  1097. canvaslayout: "default",
  1098. bomlayout: "default",
  1099. bommode: "grouped",
  1100. checkboxes: [],
  1101. checkboxStoredRefs: {},
  1102. darkMode: false,
  1103. highlightpin1: false,
  1104. redrawOnDrag: true,
  1105. boardRotation: 0,
  1106. renderPads: true,
  1107. renderReferences: true,
  1108. renderValues: true,
  1109. renderSilkscreen: true,
  1110. renderFabrication: true,
  1111. renderDnpOutline: false,
  1112. renderTracks: true,
  1113. renderZones: true,
  1114. }
  1115. function initDefaults() {
  1116. settings.bomlayout = readStorage("bomlayout");
  1117. if (settings.bomlayout === null) {
  1118. settings.bomlayout = config.bom_view;
  1119. }
  1120. if (!['bom-only', 'left-right', 'top-bottom'].includes(settings.bomlayout)) {
  1121. settings.bomlayout = config.bom_view;
  1122. }
  1123. settings.bommode = readStorage("bommode");
  1124. if (settings.bommode === null) {
  1125. settings.bommode = "grouped";
  1126. }
  1127. if (!["grouped", "ungrouped", "netlist"].includes(settings.bommode)) {
  1128. settings.bommode = "grouped";
  1129. }
  1130. settings.canvaslayout = readStorage("canvaslayout");
  1131. if (settings.canvaslayout === null) {
  1132. settings.canvaslayout = config.layer_view;
  1133. }
  1134. var bomCheckboxes = readStorage("bomCheckboxes");
  1135. if (bomCheckboxes === null) {
  1136. bomCheckboxes = config.checkboxes;
  1137. }
  1138. settings.checkboxes = bomCheckboxes.split(",").filter((e) => e);
  1139. document.getElementById("bomCheckboxes").value = bomCheckboxes;
  1140. settings.darkenWhenChecked = readStorage("darkenWhenChecked") || "";
  1141. populateDarkenWhenCheckedOptions();
  1142. function initBooleanSetting(storageString, def, elementId, func) {
  1143. var b = readStorage(storageString);
  1144. if (b === null) {
  1145. b = def;
  1146. } else {
  1147. b = (b == "true");
  1148. }
  1149. document.getElementById(elementId).checked = b;
  1150. func(b);
  1151. }
  1152. initBooleanSetting("padsVisible", config.show_pads, "padsCheckbox", padsVisible);
  1153. initBooleanSetting("fabricationVisible", config.show_fabrication, "fabricationCheckbox", fabricationVisible);
  1154. initBooleanSetting("silkscreenVisible", config.show_silkscreen, "silkscreenCheckbox", silkscreenVisible);
  1155. initBooleanSetting("referencesVisible", true, "referencesCheckbox", referencesVisible);
  1156. initBooleanSetting("valuesVisible", true, "valuesCheckbox", valuesVisible);
  1157. if ("tracks" in pcbdata) {
  1158. initBooleanSetting("tracksVisible", true, "tracksCheckbox", tracksVisible);
  1159. initBooleanSetting("zonesVisible", true, "zonesCheckbox", zonesVisible);
  1160. } else {
  1161. document.getElementById("tracksAndZonesCheckboxes").style.display = "none";
  1162. tracksVisible(false);
  1163. zonesVisible(false);
  1164. }
  1165. initBooleanSetting("dnpOutline", false, "dnpOutlineCheckbox", dnpOutline);
  1166. initBooleanSetting("redrawOnDrag", config.redraw_on_drag, "dragCheckbox", setRedrawOnDrag);
  1167. initBooleanSetting("darkmode", config.dark_mode, "darkmodeCheckbox", setDarkMode);
  1168. initBooleanSetting("highlightpin1", config.highlight_pin1, "highlightpin1Checkbox", setHighlightPin1);
  1169. settings.boardRotation = readStorage("boardRotation");
  1170. if (settings.boardRotation === null) {
  1171. settings.boardRotation = config.board_rotation * 5;
  1172. } else {
  1173. settings.boardRotation = parseInt(settings.boardRotation);
  1174. }
  1175. document.getElementById("boardRotation").value = settings.boardRotation / 5;
  1176. document.getElementById("rotationDegree").textContent = settings.boardRotation;
  1177. }
  1178. // Helper classes for user js callbacks.
  1179. const IBOM_EVENT_TYPES = {
  1180. ALL: "all",
  1181. HIGHLIGHT_EVENT: "highlightEvent",
  1182. CHECKBOX_CHANGE_EVENT: "checkboxChangeEvent",
  1183. BOM_BODY_CHANGE_EVENT: "bomBodyChangeEvent",
  1184. }
  1185. const EventHandler = {
  1186. callbacks: {},
  1187. init: function() {
  1188. for (eventType of Object.values(IBOM_EVENT_TYPES))
  1189. this.callbacks[eventType] = [];
  1190. },
  1191. registerCallback: function(eventType, callback) {
  1192. this.callbacks[eventType].push(callback);
  1193. },
  1194. emitEvent: function(eventType, eventArgs) {
  1195. event = {
  1196. eventType: eventType,
  1197. args: eventArgs,
  1198. }
  1199. var callback;
  1200. for(callback of this.callbacks[eventType])
  1201. callback(event);
  1202. for(callback of this.callbacks[IBOM_EVENT_TYPES.ALL])
  1203. callback(event);
  1204. }
  1205. }
  1206. EventHandler.init();
  1207. ///////////////////////////////////////////////
  1208. ///////////////////////////////////////////////
  1209. /* PCB rendering code */
  1210. var emptyContext2d = document.createElement("canvas").getContext("2d");
  1211. function deg2rad(deg) {
  1212. return deg * Math.PI / 180;
  1213. }
  1214. function calcFontPoint(linepoint, text, offsetx, offsety, tilt) {
  1215. var point = [
  1216. linepoint[0] * text.width + offsetx,
  1217. linepoint[1] * text.height + offsety
  1218. ];
  1219. // This approximates pcbnew behavior with how text tilts depending on horizontal justification
  1220. point[0] -= (linepoint[1] + 0.5 * (1 + text.horiz_justify)) * text.height * tilt;
  1221. return point;
  1222. }
  1223. function drawtext(ctx, text, color, flip) {
  1224. if ("ref" in text && !settings.renderReferences) return;
  1225. if ("val" in text && !settings.renderValues) return;
  1226. ctx.save();
  1227. ctx.fillStyle = color;
  1228. ctx.strokeStyle = color;
  1229. ctx.lineCap = "round";
  1230. ctx.lineJoin = "round";
  1231. ctx.lineWidth = text.thickness;
  1232. if (text.svgpath) {
  1233. ctx.stroke(new Path2D(text.svgpath));
  1234. ctx.restore();
  1235. return;
  1236. }
  1237. ctx.translate(...text.pos);
  1238. ctx.translate(text.thickness * 0.5, 0);
  1239. var angle = -text.angle;
  1240. if (text.attr.includes("mirrored")) {
  1241. ctx.scale(-1, 1);
  1242. angle = -angle;
  1243. }
  1244. var tilt = 0;
  1245. if (text.attr.includes("italic")) {
  1246. tilt = 0.125;
  1247. }
  1248. var interline = (text.height * 1.5 + text.thickness) / 2;
  1249. var txt = text.text.split("\n");
  1250. // KiCad ignores last empty line.
  1251. if (txt[txt.length - 1] == '') txt.pop();
  1252. ctx.rotate(deg2rad(angle));
  1253. for (var i in txt) {
  1254. var offsety = (-(txt.length - 1) + i * 2) * interline + text.height / 2;
  1255. var lineWidth = text.thickness + interline * tilt;
  1256. for (var j = 0; j < txt[i].length; j++) {
  1257. if (txt[i][j] == '\t') {
  1258. var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width;
  1259. lineWidth += fourSpaces - lineWidth % fourSpaces;
  1260. } else {
  1261. if (txt[i][j] == '~') {
  1262. j++;
  1263. if (j == txt[i].length)
  1264. break;
  1265. }
  1266. lineWidth += pcbdata.font_data[txt[i][j]].w * text.width;
  1267. }
  1268. }
  1269. var offsetx = 0;
  1270. switch (text.horiz_justify) {
  1271. case -1:
  1272. // Justify left, do nothing
  1273. break;
  1274. case 0:
  1275. // Justify center
  1276. offsetx -= lineWidth / 2;
  1277. break;
  1278. case 1:
  1279. // Justify right
  1280. offsetx -= lineWidth;
  1281. break;
  1282. }
  1283. var inOverbar = false;
  1284. for (var j = 0; j < txt[i].length; j++) {
  1285. if (txt[i][j] == '\t') {
  1286. var fourSpaces = 4 * pcbdata.font_data[' '].w * text.width;
  1287. offsetx += fourSpaces - offsetx % fourSpaces;
  1288. continue;
  1289. } else if (txt[i][j] == '~') {
  1290. j++;
  1291. if (j == txt[i].length)
  1292. break;
  1293. if (txt[i][j] != '~') {
  1294. inOverbar = !inOverbar;
  1295. }
  1296. }
  1297. var glyph = pcbdata.font_data[txt[i][j]];
  1298. if (inOverbar) {
  1299. var overbarStart = [offsetx, -text.height * 1.4 + offsety];
  1300. var overbarEnd = [offsetx + text.width * glyph.w, overbarStart[1]];
  1301. if (!lastHadOverbar) {
  1302. overbarStart[0] += text.height * 1.4 * tilt;
  1303. lastHadOverbar = true;
  1304. }
  1305. ctx.beginPath();
  1306. ctx.moveTo(...overbarStart);
  1307. ctx.lineTo(...overbarEnd);
  1308. ctx.stroke();
  1309. } else {
  1310. lastHadOverbar = false;
  1311. }
  1312. for (var line of glyph.l) {
  1313. ctx.beginPath();
  1314. ctx.moveTo(...calcFontPoint(line[0], text, offsetx, offsety, tilt));
  1315. for (var k = 1; k < line.length; k++) {
  1316. ctx.lineTo(...calcFontPoint(line[k], text, offsetx, offsety, tilt));
  1317. }
  1318. ctx.stroke();
  1319. }
  1320. offsetx += glyph.w * text.width;
  1321. }
  1322. }
  1323. ctx.restore();
  1324. }
  1325. function drawedge(ctx, scalefactor, edge, color) {
  1326. ctx.strokeStyle = color;
  1327. ctx.lineWidth = Math.max(1 / scalefactor, edge.width);
  1328. ctx.lineCap = "round";
  1329. if (edge.svgpath) {
  1330. ctx.stroke(new Path2D(edge.svgpath));
  1331. } else {
  1332. ctx.beginPath();
  1333. if (edge.type == "segment") {
  1334. ctx.moveTo(...edge.start);
  1335. ctx.lineTo(...edge.end);
  1336. }
  1337. if (edge.type == "arc") {
  1338. ctx.arc(
  1339. ...edge.start,
  1340. edge.radius,
  1341. deg2rad(edge.startangle),
  1342. deg2rad(edge.endangle));
  1343. }
  1344. if (edge.type == "circle") {
  1345. ctx.arc(
  1346. ...edge.start,
  1347. edge.radius,
  1348. 0, 2 * Math.PI);
  1349. ctx.closePath();
  1350. }
  1351. if (edge.type == "curve") {
  1352. ctx.moveTo(...edge.start);
  1353. ctx.bezierCurveTo(...edge.cpa, ...edge.cpb, ...edge.end);
  1354. }
  1355. ctx.stroke();
  1356. }
  1357. }
  1358. function getChamferedRectPath(size, radius, chamfpos, chamfratio) {
  1359. // chamfpos is a bitmask, left = 1, right = 2, bottom left = 4, bottom right = 8
  1360. var path = new Path2D();
  1361. var width = size[0];
  1362. var height = size[1];
  1363. var x = width * -0.5;
  1364. var y = height * -0.5;
  1365. var chamfOffset = Math.min(width, height) * chamfratio;
  1366. path.moveTo(x, 0);
  1367. if (chamfpos & 4) {
  1368. path.lineTo(x, y + height - chamfOffset);
  1369. path.lineTo(x + chamfOffset, y + height);
  1370. path.lineTo(0, y + height);
  1371. } else {
  1372. path.arcTo(x, y + height, x + width, y + height, radius);
  1373. }
  1374. if (chamfpos & 8) {
  1375. path.lineTo(x + width - chamfOffset, y + height);
  1376. path.lineTo(x + width, y + height - chamfOffset);
  1377. path.lineTo(x + width, 0);
  1378. } else {
  1379. path.arcTo(x + width, y + height, x + width, y, radius);
  1380. }
  1381. if (chamfpos & 2) {
  1382. path.lineTo(x + width, y + chamfOffset);
  1383. path.lineTo(x + width - chamfOffset, y);
  1384. path.lineTo(0, y);
  1385. } else {
  1386. path.arcTo(x + width, y, x, y, radius);
  1387. }
  1388. if (chamfpos & 1) {
  1389. path.lineTo(x + chamfOffset, y);
  1390. path.lineTo(x, y + chamfOffset);
  1391. path.lineTo(x, 0);
  1392. } else {
  1393. path.arcTo(x, y, x, y + height, radius);
  1394. }
  1395. path.closePath();
  1396. return path;
  1397. }
  1398. function getOblongPath(size) {
  1399. return getChamferedRectPath(size, Math.min(size[0], size[1]) / 2, 0, 0);
  1400. }
  1401. function getPolygonsPath(shape) {
  1402. if (shape.path2d) {
  1403. return shape.path2d;
  1404. }
  1405. if (shape.svgpath) {
  1406. shape.path2d = new Path2D(shape.svgpath);
  1407. } else {
  1408. var path = new Path2D();
  1409. for (var polygon of shape.polygons) {
  1410. path.moveTo(...polygon[0]);
  1411. for (var i = 1; i < polygon.length; i++) {
  1412. path.lineTo(...polygon[i]);
  1413. }
  1414. path.closePath();
  1415. }
  1416. shape.path2d = path;
  1417. }
  1418. return shape.path2d;
  1419. }
  1420. function drawPolygonShape(ctx, shape, color) {
  1421. ctx.save();
  1422. ctx.fillStyle = color;
  1423. if (!shape.svgpath) {
  1424. ctx.translate(...shape.pos);
  1425. ctx.rotate(deg2rad(-shape.angle));
  1426. }
  1427. ctx.fill(getPolygonsPath(shape));
  1428. ctx.restore();
  1429. }
  1430. function drawDrawing(ctx, layer, scalefactor, drawing, color) {
  1431. if (["segment", "arc", "circle", "curve"].includes(drawing.type)) {
  1432. drawedge(ctx, scalefactor, drawing, color);
  1433. } else if (drawing.type == "polygon") {
  1434. drawPolygonShape(ctx, drawing, color);
  1435. } else {
  1436. drawtext(ctx, drawing, color, layer == "B");
  1437. }
  1438. }
  1439. function getCirclePath(radius) {
  1440. var path = new Path2D();
  1441. path.arc(0, 0, radius, 0, 2 * Math.PI);
  1442. path.closePath();
  1443. return path;
  1444. }
  1445. function getCachedPadPath(pad) {
  1446. if (!pad.path2d) {
  1447. // if path2d is not set, build one and cache it on pad object
  1448. if (pad.shape == "rect") {
  1449. pad.path2d = new Path2D();
  1450. pad.path2d.rect(...pad.size.map(c => -c * 0.5), ...pad.size);
  1451. } else if (pad.shape == "oval") {
  1452. pad.path2d = getOblongPath(pad.size);
  1453. } else if (pad.shape == "circle") {
  1454. pad.path2d = getCirclePath(pad.size[0] / 2);
  1455. } else if (pad.shape == "roundrect") {
  1456. pad.path2d = getChamferedRectPath(pad.size, pad.radius, 0, 0);
  1457. } else if (pad.shape == "chamfrect") {
  1458. pad.path2d = getChamferedRectPath(pad.size, pad.radius, pad.chamfpos, pad.chamfratio)
  1459. } else if (pad.shape == "custom") {
  1460. pad.path2d = getPolygonsPath(pad);
  1461. }
  1462. }
  1463. return pad.path2d;
  1464. }
  1465. function drawPad(ctx, pad, color, outline, hole) {
  1466. ctx.save();
  1467. ctx.translate(...pad.pos);
  1468. ctx.rotate(deg2rad(pad.angle));
  1469. if (pad.offset) {
  1470. ctx.translate(...pad.offset);
  1471. }
  1472. ctx.fillStyle = color;
  1473. ctx.strokeStyle = color;
  1474. var path = getCachedPadPath(pad);
  1475. if (outline) {
  1476. ctx.stroke(path);
  1477. } else {
  1478. ctx.fill(path);
  1479. }
  1480. if (pad.type == "th" && hole) {
  1481. if (pad.offset) {
  1482. ctx.translate(-pad.offset[0], -pad.offset[1]);
  1483. }
  1484. ctx.fillStyle = "#CCCCCC";
  1485. if (pad.drillshape == "oblong") {
  1486. ctx.fill(getOblongPath(pad.drillsize));
  1487. } else {
  1488. ctx.fill(getCirclePath(pad.drillsize[0] / 2));
  1489. }
  1490. }
  1491. ctx.restore();
  1492. }
  1493. function drawModule(ctx, layer, scalefactor, module, padcolor, outlinecolor, highlight, outline) {
  1494. if (highlight) {
  1495. // draw bounding box
  1496. if (module.layer == layer) {
  1497. ctx.save();
  1498. ctx.globalAlpha = 0.2;
  1499. ctx.translate(...module.bbox.pos);
  1500. ctx.rotate(deg2rad(-module.bbox.angle));
  1501. ctx.translate(...module.bbox.relpos);
  1502. ctx.fillStyle = padcolor;
  1503. ctx.fillRect(0, 0, ...module.bbox.size);
  1504. ctx.globalAlpha = 1;
  1505. ctx.strokeStyle = padcolor;
  1506. ctx.strokeRect(0, 0, ...module.bbox.size);
  1507. ctx.restore();
  1508. }
  1509. }
  1510. // draw drawings
  1511. for (var drawing of module.drawings) {
  1512. if (drawing.layer == layer) {
  1513. drawDrawing(ctx, layer, scalefactor, drawing.drawing, padcolor);
  1514. }
  1515. }
  1516. // draw pads
  1517. if (settings.renderPads) {
  1518. for (var pad of module.pads) {
  1519. if (pad.layers.includes(layer)) {
  1520. drawPad(ctx, pad, padcolor, outline, true);
  1521. if (pad.pin1 && settings.highlightpin1) {
  1522. drawPad(ctx, pad, outlinecolor, true, false);
  1523. }
  1524. }
  1525. }
  1526. }
  1527. }
  1528. function drawEdgeCuts(canvas, scalefactor) {
  1529. var ctx = canvas.getContext("2d");
  1530. var edgecolor = getComputedStyle(topmostdiv).getPropertyValue('--pcb-edge-color');
  1531. for (var edge of pcbdata.edges) {
  1532. drawedge(ctx, scalefactor, edge, edgecolor);
  1533. }
  1534. }
  1535. function drawModules(canvas, layer, scalefactor, highlight) {
  1536. var ctx = canvas.getContext("2d");
  1537. ctx.lineWidth = 3 / scalefactor;
  1538. var style = getComputedStyle(topmostdiv);
  1539. var padcolor = style.getPropertyValue('--pad-color');
  1540. var outlinecolor = style.getPropertyValue('--pin1-outline-color');
  1541. if (highlight) {
  1542. padcolor = style.getPropertyValue('--pad-color-highlight');
  1543. outlinecolor = style.getPropertyValue('--pin1-outline-color-highlight');
  1544. }
  1545. for (var i = 0; i < pcbdata.modules.length; i++) {
  1546. var mod = pcbdata.modules[i];
  1547. var outline = settings.renderDnpOutline && pcbdata.bom.skipped.includes(i);
  1548. if (!highlight || highlightedModules.includes(i)) {
  1549. drawModule(ctx, layer, scalefactor, mod, padcolor, outlinecolor, highlight, outline);
  1550. }
  1551. }
  1552. }
  1553. function drawBgLayer(layername, canvas, layer, scalefactor, edgeColor, polygonColor, textColor) {
  1554. var ctx = canvas.getContext("2d");
  1555. for (var d of pcbdata[layername][layer]) {
  1556. if (["segment", "arc", "circle", "curve"].includes(d.type)) {
  1557. drawedge(ctx, scalefactor, d, edgeColor);
  1558. } else if (d.type == "polygon") {
  1559. drawPolygonShape(ctx, d, polygonColor);
  1560. } else {
  1561. drawtext(ctx, d, textColor, layer == "B");
  1562. }
  1563. }
  1564. }
  1565. function drawTracks(canvas, layer, color, highlight) {
  1566. ctx = canvas.getContext("2d");
  1567. ctx.strokeStyle = color;
  1568. ctx.lineCap = "round";
  1569. for(var track of pcbdata.tracks[layer]) {
  1570. if (highlight && highlightedNet != track.net) continue;
  1571. ctx.lineWidth = track.width;
  1572. ctx.beginPath();
  1573. ctx.moveTo(...track.start);
  1574. ctx.lineTo(...track.end);
  1575. ctx.stroke();
  1576. }
  1577. }
  1578. function drawZones(canvas, layer, color, highlight) {
  1579. ctx = canvas.getContext("2d");
  1580. ctx.strokeStyle = color;
  1581. ctx.fillStyle = color;
  1582. ctx.lineJoin = "round";
  1583. for(var zone of pcbdata.zones[layer]) {
  1584. if (!zone.path2d) {
  1585. zone.path2d = getPolygonsPath(zone);
  1586. }
  1587. if (highlight && highlightedNet != zone.net) continue;
  1588. ctx.lineWidth = zone.width ? zone.width : 0;
  1589. ctx.fill(zone.path2d);
  1590. ctx.stroke(zone.path2d);
  1591. }
  1592. }
  1593. function clearCanvas(canvas, color = null) {
  1594. var ctx = canvas.getContext("2d");
  1595. ctx.save();
  1596. ctx.setTransform(1, 0, 0, 1, 0, 0);
  1597. if (color) {
  1598. ctx.fillStyle = color;
  1599. ctx.fillRect(0, 0, canvas.width, canvas.height);
  1600. } else {
  1601. ctx.clearRect(0, 0, canvas.width, canvas.height);
  1602. }
  1603. ctx.restore();
  1604. }
  1605. function drawNets(canvas, layer, highlight) {
  1606. var style = getComputedStyle(topmostdiv);
  1607. if (settings.renderTracks) {
  1608. var trackColor = style.getPropertyValue(highlight ? '--track-color-highlight' : '--track-color');
  1609. drawTracks(canvas, layer, trackColor, highlight);
  1610. }
  1611. if (settings.renderZones) {
  1612. var zoneColor = style.getPropertyValue(highlight ? '--zone-color-highlight' : '--zone-color');
  1613. drawZones(canvas, layer, zoneColor, highlight);
  1614. }
  1615. if (highlight && settings.renderPads) {
  1616. var padColor = style.getPropertyValue('--pad-color-highlight');
  1617. var ctx = canvas.getContext("2d");
  1618. for (var mod of pcbdata.modules) {
  1619. // draw pads
  1620. for (var pad of mod.pads) {
  1621. if (highlightedNet != pad.net) continue;
  1622. if (pad.layers.includes(layer)) {
  1623. drawPad(ctx, pad, padColor, false, true);
  1624. }
  1625. }
  1626. }
  1627. }
  1628. }
  1629. function drawHighlightsOnLayer(canvasdict, clear = true) {
  1630. if (clear) {
  1631. clearCanvas(canvasdict.highlight);
  1632. }
  1633. if (highlightedModules.length > 0) {
  1634. drawModules(canvasdict.highlight, canvasdict.layer,
  1635. canvasdict.transform.s * canvasdict.transform.zoom, true);
  1636. }
  1637. if (highlightedNet !== null) {
  1638. drawNets(canvasdict.highlight, canvasdict.layer, true);
  1639. }
  1640. }
  1641. function drawHighlights() {
  1642. drawHighlightsOnLayer(allcanvas.front);
  1643. drawHighlightsOnLayer(allcanvas.back);
  1644. }
  1645. function drawBackground(canvasdict, clear = true) {
  1646. if (clear) {
  1647. clearCanvas(canvasdict.bg);
  1648. clearCanvas(canvasdict.fab);
  1649. clearCanvas(canvasdict.silk);
  1650. }
  1651. drawNets(canvasdict.bg, canvasdict.layer, false);
  1652. drawModules(canvasdict.bg, canvasdict.layer,
  1653. canvasdict.transform.s * canvasdict.transform.zoom, false);
  1654. drawEdgeCuts(canvasdict.bg, canvasdict.transform.s);
  1655. var style = getComputedStyle(topmostdiv);
  1656. var edgeColor = style.getPropertyValue('--silkscreen-edge-color');
  1657. var polygonColor = style.getPropertyValue('--silkscreen-polygon-color');
  1658. var textColor = style.getPropertyValue('--silkscreen-text-color');
  1659. if (settings.renderSilkscreen) {
  1660. drawBgLayer(
  1661. "silkscreen", canvasdict.silk, canvasdict.layer,
  1662. canvasdict.transform.s * canvasdict.transform.zoom,
  1663. edgeColor, polygonColor, textColor);
  1664. }
  1665. edgeColor = style.getPropertyValue('--fabrication-edge-color');
  1666. polygonColor = style.getPropertyValue('--fabrication-polygon-color');
  1667. textColor = style.getPropertyValue('--fabrication-text-color');
  1668. if (settings.renderFabrication) {
  1669. drawBgLayer(
  1670. "fabrication", canvasdict.fab, canvasdict.layer,
  1671. canvasdict.transform.s * canvasdict.transform.zoom,
  1672. edgeColor, polygonColor, textColor);
  1673. }
  1674. }
  1675. function prepareCanvas(canvas, flip, transform) {
  1676. var ctx = canvas.getContext("2d");
  1677. ctx.setTransform(1, 0, 0, 1, 0, 0);
  1678. var fontsize = 1.55;
  1679. ctx.scale(transform.zoom, transform.zoom);
  1680. ctx.translate(transform.panx, transform.pany);
  1681. if (flip) {
  1682. ctx.scale(-1, 1);
  1683. }
  1684. ctx.translate(transform.x, transform.y);
  1685. ctx.rotate(deg2rad(settings.boardRotation));
  1686. ctx.scale(transform.s, transform.s);
  1687. }
  1688. function prepareLayer(canvasdict) {
  1689. var flip = (canvasdict.layer == "B");
  1690. for (var c of ["bg", "fab", "silk", "highlight"]) {
  1691. prepareCanvas(canvasdict[c], flip, canvasdict.transform);
  1692. }
  1693. }
  1694. function rotateVector(v, angle) {
  1695. angle = deg2rad(angle);
  1696. return [
  1697. v[0] * Math.cos(angle) - v[1] * Math.sin(angle),
  1698. v[0] * Math.sin(angle) + v[1] * Math.cos(angle)
  1699. ];
  1700. }
  1701. function applyRotation(bbox) {
  1702. var corners = [
  1703. [bbox.minx, bbox.miny],
  1704. [bbox.minx, bbox.maxy],
  1705. [bbox.maxx, bbox.miny],
  1706. [bbox.maxx, bbox.maxy],
  1707. ];
  1708. corners = corners.map((v) => rotateVector(v, settings.boardRotation));
  1709. return {
  1710. minx: corners.reduce((a, v) => Math.min(a, v[0]), Infinity),
  1711. miny: corners.reduce((a, v) => Math.min(a, v[1]), Infinity),
  1712. maxx: corners.reduce((a, v) => Math.max(a, v[0]), -Infinity),
  1713. maxy: corners.reduce((a, v) => Math.max(a, v[1]), -Infinity),
  1714. }
  1715. }
  1716. function recalcLayerScale(layerdict, width, height) {
  1717. var bbox = applyRotation(pcbdata.edges_bbox);
  1718. var scalefactor = 0.98 * Math.min(
  1719. width / (bbox.maxx - bbox.minx),
  1720. height / (bbox.maxy - bbox.miny)
  1721. );
  1722. if (scalefactor < 0.1) {
  1723. scalefactor = 1;
  1724. }
  1725. layerdict.transform.s = scalefactor;
  1726. var flip = (layerdict.layer == "B");
  1727. if (flip) {
  1728. layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor + width) * 0.5;
  1729. } else {
  1730. layerdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5;
  1731. }
  1732. layerdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5;
  1733. for (var c of ["bg", "fab", "silk", "highlight"]) {
  1734. canvas = layerdict[c];
  1735. canvas.width = width;
  1736. canvas.height = height;
  1737. canvas.style.width = (width / devicePixelRatio) + "px";
  1738. canvas.style.height = (height / devicePixelRatio) + "px";
  1739. }
  1740. }
  1741. function redrawCanvas(layerdict) {
  1742. prepareLayer(layerdict);
  1743. drawBackground(layerdict);
  1744. drawHighlightsOnLayer(layerdict);
  1745. }
  1746. function resizeCanvas(layerdict) {
  1747. var canvasdivid = {
  1748. "F": "frontcanvas",
  1749. "B": "backcanvas"
  1750. } [layerdict.layer];
  1751. var width = document.getElementById(canvasdivid).clientWidth * devicePixelRatio;
  1752. var height = document.getElementById(canvasdivid).clientHeight * devicePixelRatio;
  1753. recalcLayerScale(layerdict, width, height);
  1754. redrawCanvas(layerdict);
  1755. }
  1756. function resizeAll() {
  1757. resizeCanvas(allcanvas.front);
  1758. resizeCanvas(allcanvas.back);
  1759. }
  1760. function pointWithinDistanceToSegment(x, y, x1, y1, x2, y2, d) {
  1761. var A = x - x1;
  1762. var B = y - y1;
  1763. var C = x2 - x1;
  1764. var D = y2 - y1;
  1765. var dot = A * C + B * D;
  1766. var len_sq = C * C + D * D;
  1767. var dx, dy;
  1768. if (len_sq == 0) {
  1769. // start and end of the segment coincide
  1770. dx = x - x1;
  1771. dy = y - y1;
  1772. } else {
  1773. var param = dot / len_sq;
  1774. var xx, yy;
  1775. if (param < 0) {
  1776. xx = x1;
  1777. yy = y1;
  1778. } else if (param > 1) {
  1779. xx = x2;
  1780. yy = y2;
  1781. } else {
  1782. xx = x1 + param * C;
  1783. yy = y1 + param * D;
  1784. }
  1785. dx = x - xx;
  1786. dy = y - yy;
  1787. }
  1788. return dx * dx + dy * dy <= d * d;
  1789. }
  1790. function pointWithinPad(x, y, pad) {
  1791. var v = [x - pad.pos[0], y - pad.pos[1]];
  1792. v = rotateVector(v, -pad.angle);
  1793. if (pad.offset) {
  1794. v[0] -= pad.offset[0];
  1795. v[1] -= pad.offset[1];
  1796. }
  1797. return emptyContext2d.isPointInPath(getCachedPadPath(pad), ...v);
  1798. }
  1799. function netHitScan(layer, x, y) {
  1800. // Check track segments
  1801. if (settings.renderTracks && pcbdata.tracks) {
  1802. for(var track of pcbdata.tracks[layer]) {
  1803. if (pointWithinDistanceToSegment(x, y, ...track.start, ...track.end, track.width / 2)) {
  1804. return track.net;
  1805. }
  1806. }
  1807. }
  1808. // Check pads
  1809. if (settings.renderPads) {
  1810. for (var mod of pcbdata.modules) {
  1811. for(var pad of mod.pads) {
  1812. if (pad.layers.includes(layer) && pointWithinPad(x, y, pad)) {
  1813. return pad.net;
  1814. }
  1815. }
  1816. }
  1817. }
  1818. return null;
  1819. }
  1820. function pointWithinModuleBbox(x, y, bbox) {
  1821. var v = [x - bbox.pos[0], y - bbox.pos[1]];
  1822. v = rotateVector(v, bbox.angle);
  1823. return bbox.relpos[0] <= v[0] && v[0] <= bbox.relpos[0] + bbox.size[0] &&
  1824. bbox.relpos[1] <= v[1] && v[1] <= bbox.relpos[1] + bbox.size[1];
  1825. }
  1826. function bboxHitScan(layer, x, y) {
  1827. var result = [];
  1828. for (var i = 0; i < pcbdata.modules.length; i++) {
  1829. var module = pcbdata.modules[i];
  1830. if (module.layer == layer) {
  1831. if (pointWithinModuleBbox(x, y, module.bbox)) {
  1832. result.push(i);
  1833. }
  1834. }
  1835. }
  1836. return result;
  1837. }
  1838. function handlePointerDown(e, layerdict) {
  1839. if (e.button != 0) {
  1840. return;
  1841. }
  1842. e.preventDefault();
  1843. e.stopPropagation();
  1844. if (!e.hasOwnProperty("offsetX")) {
  1845. // The polyfill doesn't set this properly
  1846. e.offsetX = e.pageX - e.currentTarget.offsetLeft;
  1847. e.offsetY = e.pageY - e.currentTarget.offsetTop;
  1848. }
  1849. layerdict.pointerStates[e.pointerId] = {
  1850. distanceTravelled: 0,
  1851. lastX: e.offsetX,
  1852. lastY: e.offsetY,
  1853. downTime: Date.now(),
  1854. };
  1855. }
  1856. function handleMouseClick(e, layerdict) {
  1857. if (!e.hasOwnProperty("offsetX")) {
  1858. // The polyfill doesn't set this properly
  1859. e.offsetX = e.pageX - e.currentTarget.offsetLeft;
  1860. e.offsetY = e.pageY - e.currentTarget.offsetTop;
  1861. }
  1862. var x = e.offsetX;
  1863. var y = e.offsetY;
  1864. var t = layerdict.transform;
  1865. if (layerdict.layer == "B") {
  1866. x = (devicePixelRatio * x / t.zoom - t.panx + t.x) / -t.s;
  1867. } else {
  1868. x = (devicePixelRatio * x / t.zoom - t.panx - t.x) / t.s;
  1869. }
  1870. y = (devicePixelRatio * y / t.zoom - t.y - t.pany) / t.s;
  1871. var v = rotateVector([x, y], -settings.boardRotation);
  1872. if ("nets" in pcbdata) {
  1873. var net = netHitScan(layerdict.layer, ...v);
  1874. if (net !== highlightedNet) {
  1875. netClicked(net);
  1876. }
  1877. }
  1878. if (highlightedNet === null) {
  1879. var modules = bboxHitScan(layerdict.layer, ...v);
  1880. if (modules.length > 0) {
  1881. modulesClicked(modules);
  1882. }
  1883. }
  1884. }
  1885. function handlePointerLeave(e, layerdict) {
  1886. e.preventDefault();
  1887. e.stopPropagation();
  1888. if (!settings.redrawOnDrag) {
  1889. redrawCanvas(layerdict);
  1890. }
  1891. delete layerdict.pointerStates[e.pointerId];
  1892. }
  1893. function resetTransform(layerdict) {
  1894. layerdict.transform.panx = 0;
  1895. layerdict.transform.pany = 0;
  1896. layerdict.transform.zoom = 1;
  1897. redrawCanvas(layerdict);
  1898. }
  1899. function handlePointerUp(e, layerdict) {
  1900. if (!e.hasOwnProperty("offsetX")) {
  1901. // The polyfill doesn't set this properly
  1902. e.offsetX = e.pageX - e.currentTarget.offsetLeft;
  1903. e.offsetY = e.pageY - e.currentTarget.offsetTop;
  1904. }
  1905. e.preventDefault();
  1906. e.stopPropagation();
  1907. if (e.button == 2) {
  1908. // Reset pan and zoom on right click.
  1909. resetTransform(layerdict);
  1910. layerdict.anotherPointerTapped = false;
  1911. return;
  1912. }
  1913. // We haven't necessarily had a pointermove event since the interaction started, so make sure we update this now
  1914. var ptr = layerdict.pointerStates[e.pointerId];
  1915. ptr.distanceTravelled += Math.abs(e.offsetX - ptr.lastX) + Math.abs(e.offsetY - ptr.lastY);
  1916. if (e.button == 0 && ptr.distanceTravelled < 10 && Date.now() - ptr.downTime <= 500) {
  1917. if (Object.keys(layerdict.pointerStates).length == 1) {
  1918. if (layerdict.anotherPointerTapped) {
  1919. // This is the second pointer coming off of a two-finger tap
  1920. resetTransform(layerdict);
  1921. } else {
  1922. // This is just a regular tap
  1923. handleMouseClick(e, layerdict);
  1924. }
  1925. layerdict.anotherPointerTapped = false;
  1926. } else {
  1927. // This is the first finger coming off of what could become a two-finger tap
  1928. layerdict.anotherPointerTapped = true;
  1929. }
  1930. } else {
  1931. if (!settings.redrawOnDrag) {
  1932. redrawCanvas(layerdict);
  1933. }
  1934. layerdict.anotherPointerTapped = false;
  1935. }
  1936. delete layerdict.pointerStates[e.pointerId];
  1937. }
  1938. function handlePointerMove(e, layerdict) {
  1939. if (!layerdict.pointerStates.hasOwnProperty(e.pointerId)) {
  1940. return;
  1941. }
  1942. e.preventDefault();
  1943. e.stopPropagation();
  1944. if (!e.hasOwnProperty("offsetX")) {
  1945. // The polyfill doesn't set this properly
  1946. e.offsetX = e.pageX - e.currentTarget.offsetLeft;
  1947. e.offsetY = e.pageY - e.currentTarget.offsetTop;
  1948. }
  1949. var thisPtr = layerdict.pointerStates[e.pointerId];
  1950. var dx = e.offsetX - thisPtr.lastX;
  1951. var dy = e.offsetY - thisPtr.lastY;
  1952. // If this number is low on pointer up, we count the action as a click
  1953. thisPtr.distanceTravelled += Math.abs(dx) + Math.abs(dy);
  1954. if (Object.keys(layerdict.pointerStates).length == 1) {
  1955. // This is a simple drag
  1956. layerdict.transform.panx += devicePixelRatio * dx / layerdict.transform.zoom;
  1957. layerdict.transform.pany += devicePixelRatio * dy / layerdict.transform.zoom;
  1958. } else if (Object.keys(layerdict.pointerStates).length == 2) {
  1959. var otherPtr = Object.values(layerdict.pointerStates).filter((ptr) => ptr != thisPtr)[0];
  1960. var oldDist = Math.sqrt(Math.pow(thisPtr.lastX - otherPtr.lastX, 2) + Math.pow(thisPtr.lastY - otherPtr.lastY, 2));
  1961. var newDist = Math.sqrt(Math.pow(e.offsetX - otherPtr.lastX, 2) + Math.pow(e.offsetY - otherPtr.lastY, 2));
  1962. var scaleFactor = newDist/oldDist;
  1963. if (scaleFactor != NaN) {
  1964. layerdict.transform.zoom *= scaleFactor;
  1965. var zoomd = (1 - scaleFactor) / layerdict.transform.zoom;
  1966. layerdict.transform.panx += devicePixelRatio * otherPtr.lastX * zoomd;
  1967. layerdict.transform.pany += devicePixelRatio * otherPtr.lastY * zoomd;
  1968. }
  1969. }
  1970. thisPtr.lastX = e.offsetX;
  1971. thisPtr.lastY = e.offsetY;
  1972. if (settings.redrawOnDrag) {
  1973. redrawCanvas(layerdict);
  1974. }
  1975. }
  1976. function handleMouseWheel(e, layerdict) {
  1977. e.preventDefault();
  1978. e.stopPropagation();
  1979. var t = layerdict.transform;
  1980. var wheeldelta = e.deltaY;
  1981. if (e.deltaMode == 1) {
  1982. // FF only, scroll by lines
  1983. wheeldelta *= 30;
  1984. } else if (e.deltaMode == 2) {
  1985. wheeldelta *= 300;
  1986. }
  1987. var m = Math.pow(1.1, -wheeldelta / 40);
  1988. // Limit amount of zoom per tick.
  1989. if (m > 2) {
  1990. m = 2;
  1991. } else if (m < 0.5) {
  1992. m = 0.5;
  1993. }
  1994. t.zoom *= m;
  1995. var zoomd = (1 - m) / t.zoom;
  1996. t.panx += devicePixelRatio * e.offsetX * zoomd;
  1997. t.pany += devicePixelRatio * e.offsetY * zoomd;
  1998. redrawCanvas(layerdict);
  1999. }
  2000. function addMouseHandlers(div, layerdict) {
  2001. div.addEventListener("pointerdown", function(e) {
  2002. handlePointerDown(e, layerdict);
  2003. });
  2004. div.addEventListener("pointermove", function(e) {
  2005. handlePointerMove(e, layerdict);
  2006. });
  2007. div.addEventListener("pointerup", function(e) {
  2008. handlePointerUp(e, layerdict);
  2009. });
  2010. var pointerleave = function(e) {
  2011. handlePointerLeave(e, layerdict);
  2012. }
  2013. div.addEventListener("pointercancel", pointerleave);
  2014. div.addEventListener("pointerleave", pointerleave);
  2015. div.addEventListener("pointerout", pointerleave);
  2016. div.onwheel = function(e) {
  2017. handleMouseWheel(e, layerdict);
  2018. }
  2019. for (var element of [div, layerdict.bg, layerdict.fab, layerdict.silk, layerdict.highlight]) {
  2020. element.addEventListener("contextmenu", function(e) {
  2021. e.preventDefault();
  2022. }, false);
  2023. }
  2024. }
  2025. function setRedrawOnDrag(value) {
  2026. settings.redrawOnDrag = value;
  2027. writeStorage("redrawOnDrag", value);
  2028. }
  2029. function setBoardRotation(value) {
  2030. settings.boardRotation = value * 5;
  2031. writeStorage("boardRotation", settings.boardRotation);
  2032. document.getElementById("rotationDegree").textContent = settings.boardRotation;
  2033. resizeAll();
  2034. }
  2035. function initRender() {
  2036. allcanvas = {
  2037. front: {
  2038. transform: {
  2039. x: 0,
  2040. y: 0,
  2041. s: 1,
  2042. panx: 0,
  2043. pany: 0,
  2044. zoom: 1,
  2045. },
  2046. pointerStates: {},
  2047. anotherPointerTapped: false,
  2048. bg: document.getElementById("F_bg"),
  2049. fab: document.getElementById("F_fab"),
  2050. silk: document.getElementById("F_slk"),
  2051. highlight: document.getElementById("F_hl"),
  2052. layer: "F",
  2053. },
  2054. back: {
  2055. transform: {
  2056. x: 0,
  2057. y: 0,
  2058. s: 1,
  2059. panx: 0,
  2060. pany: 0,
  2061. zoom: 1,
  2062. },
  2063. pointerStates: {},
  2064. anotherPointerTapped: false,
  2065. bg: document.getElementById("B_bg"),
  2066. fab: document.getElementById("B_fab"),
  2067. silk: document.getElementById("B_slk"),
  2068. highlight: document.getElementById("B_hl"),
  2069. layer: "B",
  2070. }
  2071. };
  2072. addMouseHandlers(document.getElementById("frontcanvas"), allcanvas.front);
  2073. addMouseHandlers(document.getElementById("backcanvas"), allcanvas.back);
  2074. }
  2075. ///////////////////////////////////////////////
  2076. ///////////////////////////////////////////////
  2077. /* DOM manipulation and misc code */
  2078. var bomsplit;
  2079. var canvassplit;
  2080. var initDone = false;
  2081. var bomSortFunction = null;
  2082. var currentSortColumn = null;
  2083. var currentSortOrder = null;
  2084. var currentHighlightedRowId;
  2085. var highlightHandlers = [];
  2086. var moduleIndexToHandler = {};
  2087. var netsToHandler = {};
  2088. var highlightedModules = [];
  2089. var highlightedNet = null;
  2090. var lastClicked;
  2091. function dbg(html) {
  2092. dbgdiv.innerHTML = html;
  2093. }
  2094. function redrawIfInitDone() {
  2095. if (initDone) {
  2096. redrawCanvas(allcanvas.front);
  2097. redrawCanvas(allcanvas.back);
  2098. }
  2099. }
  2100. function padsVisible(value) {
  2101. writeStorage("padsVisible", value);
  2102. settings.renderPads = value;
  2103. redrawIfInitDone();
  2104. }
  2105. function referencesVisible(value) {
  2106. writeStorage("referencesVisible", value);
  2107. settings.renderReferences = value;
  2108. redrawIfInitDone();
  2109. }
  2110. function valuesVisible(value) {
  2111. writeStorage("valuesVisible", value);
  2112. settings.renderValues = value;
  2113. redrawIfInitDone();
  2114. }
  2115. function tracksVisible(value) {
  2116. writeStorage("tracksVisible", value);
  2117. settings.renderTracks = value;
  2118. redrawIfInitDone();
  2119. }
  2120. function zonesVisible(value) {
  2121. writeStorage("zonesVisible", value);
  2122. settings.renderZones = value;
  2123. redrawIfInitDone();
  2124. }
  2125. function dnpOutline(value) {
  2126. writeStorage("dnpOutline", value);
  2127. settings.renderDnpOutline = value;
  2128. redrawIfInitDone();
  2129. }
  2130. function setDarkMode(value) {
  2131. if (value) {
  2132. topmostdiv.classList.add("dark");
  2133. } else {
  2134. topmostdiv.classList.remove("dark");
  2135. }
  2136. writeStorage("darkmode", value);
  2137. settings.darkMode = value;
  2138. redrawIfInitDone();
  2139. }
  2140. function setFullscreen(value) {
  2141. if (value) {
  2142. document.documentElement.requestFullscreen();
  2143. } else {
  2144. document.exitFullscreen();
  2145. }
  2146. }
  2147. function fabricationVisible(value) {
  2148. writeStorage("fabricationVisible", value);
  2149. settings.renderFabrication = value;
  2150. redrawIfInitDone();
  2151. }
  2152. function silkscreenVisible(value) {
  2153. writeStorage("silkscreenVisible", value);
  2154. settings.renderSilkscreen = value;
  2155. redrawIfInitDone();
  2156. }
  2157. function setHighlightPin1(value) {
  2158. writeStorage("highlightpin1", value);
  2159. settings.highlightpin1 = value;
  2160. redrawIfInitDone();
  2161. }
  2162. function getStoredCheckboxRefs(checkbox) {
  2163. function convert(ref) {
  2164. var intref = parseInt(ref);
  2165. if (isNaN(intref)) {
  2166. for (var i = 0; i < pcbdata.modules.length; i++) {
  2167. if (pcbdata.modules[i].ref == ref) {
  2168. return i;
  2169. }
  2170. }
  2171. return -1;
  2172. } else {
  2173. return intref;
  2174. }
  2175. }
  2176. if (!(checkbox in settings.checkboxStoredRefs)) {
  2177. var val = readStorage("checkbox_" + checkbox);
  2178. settings.checkboxStoredRefs[checkbox] = val ? val : "";
  2179. }
  2180. if (!settings.checkboxStoredRefs[checkbox]) {
  2181. return new Set();
  2182. } else {
  2183. return new Set(settings.checkboxStoredRefs[checkbox].split(",").map(r => convert(r)).filter(a => a >= 0));
  2184. }
  2185. }
  2186. function getCheckboxState(checkbox, references) {
  2187. var storedRefsSet = getStoredCheckboxRefs(checkbox);
  2188. var currentRefsSet = new Set(references.map(r => r[1]));
  2189. // Get difference of current - stored
  2190. var difference = new Set(currentRefsSet);
  2191. for (ref of storedRefsSet) {
  2192. difference.delete(ref);
  2193. }
  2194. if (difference.size == 0) {
  2195. // All the current refs are stored
  2196. return "checked";
  2197. } else if (difference.size == currentRefsSet.size) {
  2198. // None of the current refs are stored
  2199. return "unchecked";
  2200. } else {
  2201. // Some of the refs are stored
  2202. return "indeterminate";
  2203. }
  2204. }
  2205. function setBomCheckboxState(checkbox, element, references) {
  2206. var state = getCheckboxState(checkbox, references);
  2207. element.checked = (state == "checked");
  2208. element.indeterminate = (state == "indeterminate");
  2209. }
  2210. function createCheckboxChangeHandler(checkbox, references) {
  2211. return function(evt) {
  2212. refsSet = getStoredCheckboxRefs(checkbox);
  2213. var darkenWhenChecked = settings.darkenWhenChecked == checkbox;
  2214. eventArgs = {
  2215. checkbox: checkbox,
  2216. refs: references,
  2217. }
  2218. if (this.checked) {
  2219. // checkbox ticked
  2220. for (var ref of references) {
  2221. refsSet.add(ref[1]);
  2222. }
  2223. if (darkenWhenChecked) {
  2224. evt.target.parentElement.parentElement.classList.add("checked");
  2225. }
  2226. eventArgs.state = 'checked';
  2227. } else {
  2228. // checkbox unticked
  2229. for (var ref of references) {
  2230. refsSet.delete(ref[1]);
  2231. }
  2232. if (darkenWhenChecked) {
  2233. evt.target.parentElement.parentElement.classList.remove("checked");
  2234. }
  2235. eventArgs.state = 'unchecked';
  2236. }
  2237. settings.checkboxStoredRefs[checkbox] = [...refsSet].join(",");
  2238. writeStorage("checkbox_" + checkbox, settings.checkboxStoredRefs[checkbox]);
  2239. updateCheckboxStats(checkbox);
  2240. EventHandler.emitEvent(IBOM_EVENT_TYPES.CHECKBOX_CHANGE_EVENT, eventArgs);
  2241. }
  2242. }
  2243. function clearHighlightedModules() {
  2244. if (currentHighlightedRowId) {
  2245. document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
  2246. currentHighlightedRowId = null;
  2247. highlightedModules = [];
  2248. highlightedNet = null;
  2249. }
  2250. }
  2251. function createRowHighlightHandler(rowid, refs, net) {
  2252. return function() {
  2253. if (currentHighlightedRowId) {
  2254. if (currentHighlightedRowId == rowid) {
  2255. return;
  2256. }
  2257. document.getElementById(currentHighlightedRowId).classList.remove("highlighted");
  2258. }
  2259. document.getElementById(rowid).classList.add("highlighted");
  2260. currentHighlightedRowId = rowid;
  2261. highlightedModules = refs ? refs.map(r => r[1]) : [];
  2262. highlightedNet = net;
  2263. drawHighlights();
  2264. EventHandler.emitEvent(
  2265. IBOM_EVENT_TYPES.HIGHLIGHT_EVENT,
  2266. {
  2267. rowid: rowid,
  2268. refs: refs,
  2269. net: net
  2270. });
  2271. }
  2272. }
  2273. function entryMatches(entry) {
  2274. if (settings.bommode == "netlist") {
  2275. // entry is just a net name
  2276. return entry.toLowerCase().indexOf(filter) >= 0;
  2277. }
  2278. // check refs
  2279. for (var ref of entry[3]) {
  2280. if (ref[0].toLowerCase().indexOf(filter) >= 0) {
  2281. return true;
  2282. }
  2283. }
  2284. // check extra fields
  2285. for (var i in config.extra_fields) {
  2286. if (entry[4][i].toLowerCase().indexOf(filter) >= 0) {
  2287. return true;
  2288. }
  2289. }
  2290. // check value
  2291. if (entry[1].toLowerCase().indexOf(filter) >= 0) {
  2292. return true;
  2293. }
  2294. // check footprint
  2295. if (entry[2].toLowerCase().indexOf(filter) >= 0) {
  2296. return true;
  2297. }
  2298. return false;
  2299. }
  2300. function findRefInEntry(entry) {
  2301. return entry[3].filter(r => r[0].toLowerCase() == reflookup);
  2302. }
  2303. function highlightFilter(s) {
  2304. if (!filter) {
  2305. return s;
  2306. }
  2307. var parts = s.toLowerCase().split(filter);
  2308. if (parts.length == 1) {
  2309. return s;
  2310. }
  2311. var r = "";
  2312. var pos = 0;
  2313. for (var i in parts) {
  2314. if (i > 0) {
  2315. r += '<mark class="highlight">' +
  2316. s.substring(pos, pos + filter.length) +
  2317. '</mark>';
  2318. pos += filter.length;
  2319. }
  2320. r += s.substring(pos, pos + parts[i].length);
  2321. pos += parts[i].length;
  2322. }
  2323. return r;
  2324. }
  2325. function checkboxSetUnsetAllHandler(checkboxname) {
  2326. return function() {
  2327. var checkboxnum = 0;
  2328. while (checkboxnum < settings.checkboxes.length &&
  2329. settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) {
  2330. checkboxnum++;
  2331. }
  2332. if (checkboxnum >= settings.checkboxes.length) {
  2333. return;
  2334. }
  2335. var allset = true;
  2336. var checkbox;
  2337. var row;
  2338. for (row of bombody.childNodes) {
  2339. checkbox = row.childNodes[checkboxnum + 1].childNodes[0];
  2340. if (!checkbox.checked || checkbox.indeterminate) {
  2341. allset = false;
  2342. break;
  2343. }
  2344. }
  2345. for (row of bombody.childNodes) {
  2346. checkbox = row.childNodes[checkboxnum + 1].childNodes[0];
  2347. checkbox.checked = !allset;
  2348. checkbox.indeterminate = false;
  2349. checkbox.onchange();
  2350. }
  2351. }
  2352. }
  2353. function createColumnHeader(name, cls, comparator) {
  2354. var th = document.createElement("TH");
  2355. th.innerHTML = name;
  2356. th.classList.add(cls);
  2357. th.style.cursor = "pointer";
  2358. var span = document.createElement("SPAN");
  2359. span.classList.add("sortmark");
  2360. span.classList.add("none");
  2361. th.appendChild(span);
  2362. th.onclick = function() {
  2363. if (currentSortColumn && this !== currentSortColumn) {
  2364. // Currently sorted by another column
  2365. currentSortColumn.childNodes[1].classList.remove(currentSortOrder);
  2366. currentSortColumn.childNodes[1].classList.add("none");
  2367. currentSortColumn = null;
  2368. currentSortOrder = null;
  2369. }
  2370. if (currentSortColumn && this === currentSortColumn) {
  2371. // Already sorted by this column
  2372. if (currentSortOrder == "asc") {
  2373. // Sort by this column, descending order
  2374. bomSortFunction = function(a, b) {
  2375. return -comparator(a, b);
  2376. }
  2377. currentSortColumn.childNodes[1].classList.remove("asc");
  2378. currentSortColumn.childNodes[1].classList.add("desc");
  2379. currentSortOrder = "desc";
  2380. } else {
  2381. // Unsort
  2382. bomSortFunction = null;
  2383. currentSortColumn.childNodes[1].classList.remove("desc");
  2384. currentSortColumn.childNodes[1].classList.add("none");
  2385. currentSortColumn = null;
  2386. currentSortOrder = null;
  2387. }
  2388. } else {
  2389. // Sort by this column, ascending order
  2390. bomSortFunction = comparator;
  2391. currentSortColumn = this;
  2392. currentSortColumn.childNodes[1].classList.remove("none");
  2393. currentSortColumn.childNodes[1].classList.add("asc");
  2394. currentSortOrder = "asc";
  2395. }
  2396. populateBomBody();
  2397. }
  2398. return th;
  2399. }
  2400. function populateBomHeader() {
  2401. while (bomhead.firstChild) {
  2402. bomhead.removeChild(bomhead.firstChild);
  2403. }
  2404. var tr = document.createElement("TR");
  2405. var th = document.createElement("TH");
  2406. th.classList.add("numCol");
  2407. tr.appendChild(th);
  2408. var checkboxCompareClosure = function(checkbox) {
  2409. return (a, b) => {
  2410. var stateA = getCheckboxState(checkbox, a[3]);
  2411. var stateB = getCheckboxState(checkbox, b[3]);
  2412. if (stateA > stateB) return -1;
  2413. if (stateA < stateB) return 1;
  2414. return 0;
  2415. }
  2416. }
  2417. if (settings.bommode == "netlist") {
  2418. th = createColumnHeader("Net name", "bom-netname", (a, b) => {
  2419. if (a > b) return -1;
  2420. if (a < b) return 1;
  2421. return 0;
  2422. });
  2423. tr.appendChild(th);
  2424. } else {
  2425. for (var checkbox of settings.checkboxes) {
  2426. th = createColumnHeader(
  2427. checkbox, "bom-checkbox", checkboxCompareClosure(checkbox));
  2428. th.onclick = fancyDblClickHandler(
  2429. th, th.onclick.bind(th), checkboxSetUnsetAllHandler(checkbox));
  2430. tr.appendChild(th);
  2431. }
  2432. tr.appendChild(createColumnHeader("References", "References", (a, b) => {
  2433. var i = 0;
  2434. while (i < a[3].length && i < b[3].length) {
  2435. if (a[3][i] != b[3][i]) return a[3][i] > b[3][i] ? 1 : -1;
  2436. i++;
  2437. }
  2438. return a[3].length - b[3].length;
  2439. }));
  2440. // Extra fields
  2441. if (config.extra_fields.length > 0) {
  2442. var extraFieldCompareClosure = function(fieldIndex) {
  2443. return (a, b) => {
  2444. var fa = a[4][fieldIndex];
  2445. var fb = b[4][fieldIndex];
  2446. if (fa != fb) return fa > fb ? 1 : -1;
  2447. else return 0;
  2448. }
  2449. }
  2450. for (var i in config.extra_fields) {
  2451. tr.appendChild(createColumnHeader(
  2452. config.extra_fields[i], "extra", extraFieldCompareClosure(i)));
  2453. }
  2454. }
  2455. tr.appendChild(createColumnHeader("Value", "Value", (a, b) => {
  2456. return valueCompare(a[5], b[5], a[1], b[1]);
  2457. }));
  2458. tr.appendChild(createColumnHeader("Footprint", "Footprint", (a, b) => {
  2459. if (a[2] != b[2]) return a[2] > b[2] ? 1 : -1;
  2460. else return 0;
  2461. }));
  2462. if (settings.bommode == "grouped") {
  2463. tr.appendChild(createColumnHeader("Quantity", "Quantity", (a, b) => {
  2464. return a[3].length - b[3].length;
  2465. }));
  2466. }
  2467. }
  2468. bomhead.appendChild(tr);
  2469. }
  2470. function populateBomBody() {
  2471. while (bom.firstChild) {
  2472. bom.removeChild(bom.firstChild);
  2473. }
  2474. highlightHandlers = [];
  2475. moduleIndexToHandler = {};
  2476. netsToHandler = {};
  2477. currentHighlightedRowId = null;
  2478. var first = true;
  2479. if (settings.bommode == "netlist") {
  2480. bomtable = pcbdata.nets.slice();
  2481. } else {
  2482. switch (settings.canvaslayout) {
  2483. case 'F':
  2484. bomtable = pcbdata.bom.F.slice();
  2485. break;
  2486. case 'FB':
  2487. bomtable = pcbdata.bom.both.slice();
  2488. break;
  2489. case 'B':
  2490. bomtable = pcbdata.bom.B.slice();
  2491. break;
  2492. }
  2493. if (settings.bommode == "ungrouped") {
  2494. // expand bom table
  2495. expandedTable = []
  2496. for (var bomentry of bomtable) {
  2497. for (var ref of bomentry[3]) {
  2498. expandedTable.push([1, bomentry[1], bomentry[2], [ref], bomentry[4], bomentry[5]]);
  2499. }
  2500. }
  2501. bomtable = expandedTable;
  2502. }
  2503. }
  2504. if (bomSortFunction) {
  2505. bomtable = bomtable.sort(bomSortFunction);
  2506. }
  2507. for (var i in bomtable) {
  2508. var bomentry = bomtable[i];
  2509. if (filter && !entryMatches(bomentry)) {
  2510. continue;
  2511. }
  2512. var references = null;
  2513. var netname = null;
  2514. var tr = document.createElement("TR");
  2515. var td = document.createElement("TD");
  2516. var rownum = +i + 1;
  2517. tr.id = "bomrow" + rownum;
  2518. td.textContent = rownum;
  2519. tr.appendChild(td);
  2520. if (settings.bommode == "netlist") {
  2521. netname = bomentry;
  2522. td = document.createElement("TD");
  2523. td.innerHTML = highlightFilter(netname ? netname : "&lt;no net&gt;");
  2524. tr.appendChild(td);
  2525. } else {
  2526. if (reflookup) {
  2527. references = findRefInEntry(bomentry);
  2528. if (references.length == 0) {
  2529. continue;
  2530. }
  2531. } else {
  2532. references = bomentry[3];
  2533. }
  2534. // Checkboxes
  2535. for (var checkbox of settings.checkboxes) {
  2536. if (checkbox) {
  2537. td = document.createElement("TD");
  2538. var input = document.createElement("input");
  2539. input.type = "checkbox";
  2540. input.onchange = createCheckboxChangeHandler(checkbox, references);
  2541. setBomCheckboxState(checkbox, input, references);
  2542. if (input.checked && settings.darkenWhenChecked == checkbox) {
  2543. tr.classList.add("checked");
  2544. }
  2545. td.appendChild(input);
  2546. tr.appendChild(td);
  2547. }
  2548. }
  2549. // References
  2550. td = document.createElement("TD");
  2551. td.innerHTML = highlightFilter(references.map(r => r[0]).join(", "));
  2552. tr.appendChild(td);
  2553. // Extra fields
  2554. for (var i in config.extra_fields) {
  2555. td = document.createElement("TD");
  2556. td.innerHTML = highlightFilter(bomentry[4][i]);
  2557. tr.appendChild(td);
  2558. }
  2559. // Value
  2560. td = document.createElement("TD");
  2561. td.innerHTML = highlightFilter(bomentry[1]);
  2562. tr.appendChild(td);
  2563. // Footprint
  2564. td = document.createElement("TD");
  2565. td.innerHTML = highlightFilter(bomentry[2]);
  2566. tr.appendChild(td);
  2567. if (settings.bommode == "grouped") {
  2568. // Quantity
  2569. td = document.createElement("TD");
  2570. td.textContent = bomentry[3].length;
  2571. tr.appendChild(td);
  2572. }
  2573. }
  2574. bom.appendChild(tr);
  2575. var handler = createRowHighlightHandler(tr.id, references, netname);
  2576. tr.onmousemove = handler;
  2577. highlightHandlers.push({
  2578. id: tr.id,
  2579. handler: handler,
  2580. });
  2581. if (references !== null) {
  2582. for (var refIndex of references.map(r => r[1])) {
  2583. moduleIndexToHandler[refIndex] = handler;
  2584. }
  2585. }
  2586. if (netname !== null) {
  2587. netsToHandler[netname] = handler;
  2588. }
  2589. if ((filter || reflookup) && first) {
  2590. handler();
  2591. first = false;
  2592. }
  2593. }
  2594. EventHandler.emitEvent(
  2595. IBOM_EVENT_TYPES.BOM_BODY_CHANGE_EVENT,
  2596. {
  2597. filter: filter,
  2598. reflookup: reflookup,
  2599. checkboxes: settings.checkboxes,
  2600. bommode: settings.bommode,
  2601. });
  2602. }
  2603. function highlightPreviousRow() {
  2604. if (!currentHighlightedRowId) {
  2605. highlightHandlers[highlightHandlers.length - 1].handler();
  2606. } else {
  2607. if (highlightHandlers.length > 1 &&
  2608. highlightHandlers[0].id == currentHighlightedRowId) {
  2609. highlightHandlers[highlightHandlers.length - 1].handler();
  2610. } else {
  2611. for (var i = 0; i < highlightHandlers.length - 1; i++) {
  2612. if (highlightHandlers[i + 1].id == currentHighlightedRowId) {
  2613. highlightHandlers[i].handler();
  2614. break;
  2615. }
  2616. }
  2617. }
  2618. }
  2619. smoothScrollToRow(currentHighlightedRowId);
  2620. }
  2621. function highlightNextRow() {
  2622. if (!currentHighlightedRowId) {
  2623. highlightHandlers[0].handler();
  2624. } else {
  2625. if (highlightHandlers.length > 1 &&
  2626. highlightHandlers[highlightHandlers.length - 1].id == currentHighlightedRowId) {
  2627. highlightHandlers[0].handler();
  2628. } else {
  2629. for (var i = 1; i < highlightHandlers.length; i++) {
  2630. if (highlightHandlers[i - 1].id == currentHighlightedRowId) {
  2631. highlightHandlers[i].handler();
  2632. break;
  2633. }
  2634. }
  2635. }
  2636. }
  2637. smoothScrollToRow(currentHighlightedRowId);
  2638. }
  2639. function populateBomTable() {
  2640. populateBomHeader();
  2641. populateBomBody();
  2642. }
  2643. function modulesClicked(moduleIndexes) {
  2644. var lastClickedIndex = moduleIndexes.indexOf(lastClicked);
  2645. for (var i = 1; i <= moduleIndexes.length; i++) {
  2646. var refIndex = moduleIndexes[(lastClickedIndex + i) % moduleIndexes.length];
  2647. if (refIndex in moduleIndexToHandler) {
  2648. lastClicked = refIndex;
  2649. moduleIndexToHandler[refIndex]();
  2650. smoothScrollToRow(currentHighlightedRowId);
  2651. break;
  2652. }
  2653. }
  2654. }
  2655. function netClicked(net) {
  2656. if (net in netsToHandler) {
  2657. netsToHandler[net]();
  2658. smoothScrollToRow(currentHighlightedRowId);
  2659. } else {
  2660. clearHighlightedModules();
  2661. highlightedNet = net;
  2662. drawHighlights();
  2663. }
  2664. }
  2665. function updateFilter(input) {
  2666. filter = input.toLowerCase();
  2667. populateBomTable();
  2668. }
  2669. function updateRefLookup(input) {
  2670. reflookup = input.toLowerCase();
  2671. populateBomTable();
  2672. }
  2673. function changeCanvasLayout(layout) {
  2674. document.getElementById("fl-btn").classList.remove("depressed");
  2675. document.getElementById("fb-btn").classList.remove("depressed");
  2676. document.getElementById("bl-btn").classList.remove("depressed");
  2677. switch (layout) {
  2678. case 'F':
  2679. document.getElementById("fl-btn").classList.add("depressed");
  2680. if (settings.bomlayout != "bom-only") {
  2681. canvassplit.collapse(1);
  2682. }
  2683. break;
  2684. case 'B':
  2685. document.getElementById("bl-btn").classList.add("depressed");
  2686. if (settings.bomlayout != "bom-only") {
  2687. canvassplit.collapse(0);
  2688. }
  2689. break;
  2690. default:
  2691. document.getElementById("fb-btn").classList.add("depressed");
  2692. if (settings.bomlayout != "bom-only") {
  2693. canvassplit.setSizes([50, 50]);
  2694. }
  2695. }
  2696. settings.canvaslayout = layout;
  2697. writeStorage("canvaslayout", layout);
  2698. resizeAll();
  2699. changeBomMode(settings.bommode);
  2700. }
  2701. function populateMetadata() {
  2702. document.getElementById("title").innerHTML = pcbdata.metadata.title;
  2703. document.getElementById("revision").innerHTML = "Rev: " + pcbdata.metadata.revision;
  2704. document.getElementById("company").innerHTML = pcbdata.metadata.company;
  2705. document.getElementById("filedate").innerHTML = pcbdata.metadata.date;
  2706. if (pcbdata.metadata.title != "") {
  2707. document.title = pcbdata.metadata.title + " BOM";
  2708. }
  2709. // Calculate board stats
  2710. var fp_f = 0, fp_b = 0, pads_f = 0, pads_b = 0, pads_th = 0;
  2711. for (var i = 0; i < pcbdata.modules.length; i++) {
  2712. if (pcbdata.bom.skipped.includes(i)) continue;
  2713. var mod = pcbdata.modules[i];
  2714. if (mod.layer == "F") {
  2715. fp_f++;
  2716. } else {
  2717. fp_b++;
  2718. }
  2719. for (var pad of mod.pads) {
  2720. if (pad.type == "th") {
  2721. pads_th++;
  2722. } else {
  2723. if (pad.layers.includes("F")) {
  2724. pads_f++;
  2725. }
  2726. if (pad.layers.includes("B")) {
  2727. pads_b++;
  2728. }
  2729. }
  2730. }
  2731. }
  2732. document.getElementById("stats-components-front").innerHTML = fp_f;
  2733. document.getElementById("stats-components-back").innerHTML = fp_b;
  2734. document.getElementById("stats-components-total").innerHTML = fp_f + fp_b;
  2735. document.getElementById("stats-groups-front").innerHTML = pcbdata.bom.F.length;
  2736. document.getElementById("stats-groups-back").innerHTML = pcbdata.bom.B.length;
  2737. document.getElementById("stats-groups-total").innerHTML = pcbdata.bom.both.length;
  2738. document.getElementById("stats-smd-pads-front").innerHTML = pads_f;
  2739. document.getElementById("stats-smd-pads-back").innerHTML = pads_b;
  2740. document.getElementById("stats-smd-pads-total").innerHTML = pads_f + pads_b;
  2741. document.getElementById("stats-th-pads").innerHTML = pads_th;
  2742. // Update version string
  2743. document.getElementById("github-link").innerHTML = "InteractiveHtmlBom&nbsp;" +
  2744. /^v\d+\.\d+/.exec(pcbdata.ibom_version)[0];
  2745. }
  2746. function changeBomLayout(layout) {
  2747. document.getElementById("bom-btn").classList.remove("depressed");
  2748. document.getElementById("lr-btn").classList.remove("depressed");
  2749. document.getElementById("tb-btn").classList.remove("depressed");
  2750. switch (layout) {
  2751. case 'bom-only':
  2752. document.getElementById("bom-btn").classList.add("depressed");
  2753. if (bomsplit) {
  2754. bomsplit.destroy();
  2755. bomsplit = null;
  2756. canvassplit.destroy();
  2757. canvassplit = null;
  2758. }
  2759. document.getElementById("frontcanvas").style.display = "none";
  2760. document.getElementById("backcanvas").style.display = "none";
  2761. document.getElementById("bot").style.height = "";
  2762. break;
  2763. case 'top-bottom':
  2764. document.getElementById("tb-btn").classList.add("depressed");
  2765. document.getElementById("frontcanvas").style.display = "";
  2766. document.getElementById("backcanvas").style.display = "";
  2767. document.getElementById("bot").style.height = "calc(100% - 80px)";
  2768. document.getElementById("bomdiv").classList.remove("split-horizontal");
  2769. document.getElementById("canvasdiv").classList.remove("split-horizontal");
  2770. document.getElementById("frontcanvas").classList.add("split-horizontal");
  2771. document.getElementById("backcanvas").classList.add("split-horizontal");
  2772. if (bomsplit) {
  2773. bomsplit.destroy();
  2774. bomsplit = null;
  2775. canvassplit.destroy();
  2776. canvassplit = null;
  2777. }
  2778. bomsplit = Split(['#bomdiv', '#canvasdiv'], {
  2779. sizes: [50, 50],
  2780. onDragEnd: resizeAll,
  2781. direction: "vertical",
  2782. gutterSize: 5
  2783. });
  2784. canvassplit = Split(['#frontcanvas', '#backcanvas'], {
  2785. sizes: [50, 50],
  2786. gutterSize: 5,
  2787. onDragEnd: resizeAll
  2788. });
  2789. break;
  2790. case 'left-right':
  2791. document.getElementById("lr-btn").classList.add("depressed");
  2792. document.getElementById("frontcanvas").style.display = "";
  2793. document.getElementById("backcanvas").style.display = "";
  2794. document.getElementById("bot").style.height = "calc(100% - 80px)";
  2795. document.getElementById("bomdiv").classList.add("split-horizontal");
  2796. document.getElementById("canvasdiv").classList.add("split-horizontal");
  2797. document.getElementById("frontcanvas").classList.remove("split-horizontal");
  2798. document.getElementById("backcanvas").classList.remove("split-horizontal");
  2799. if (bomsplit) {
  2800. bomsplit.destroy();
  2801. bomsplit = null;
  2802. canvassplit.destroy();
  2803. canvassplit = null;
  2804. }
  2805. bomsplit = Split(['#bomdiv', '#canvasdiv'], {
  2806. sizes: [50, 50],
  2807. onDragEnd: resizeAll,
  2808. gutterSize: 5
  2809. });
  2810. canvassplit = Split(['#frontcanvas', '#backcanvas'], {
  2811. sizes: [50, 50],
  2812. gutterSize: 5,
  2813. direction: "vertical",
  2814. onDragEnd: resizeAll
  2815. });
  2816. }
  2817. settings.bomlayout = layout;
  2818. writeStorage("bomlayout", layout);
  2819. changeCanvasLayout(settings.canvaslayout);
  2820. }
  2821. function changeBomMode(mode) {
  2822. document.getElementById("bom-grouped-btn").classList.remove("depressed");
  2823. document.getElementById("bom-ungrouped-btn").classList.remove("depressed");
  2824. document.getElementById("bom-netlist-btn").classList.remove("depressed");
  2825. switch (mode) {
  2826. case 'grouped':
  2827. document.getElementById("bom-grouped-btn").classList.add("depressed");
  2828. break;
  2829. case 'ungrouped':
  2830. document.getElementById("bom-ungrouped-btn").classList.add("depressed");
  2831. break;
  2832. case 'netlist':
  2833. document.getElementById("bom-netlist-btn").classList.add("depressed");
  2834. }
  2835. writeStorage("bommode", mode);
  2836. if (mode != settings.bommode) {
  2837. settings.bommode = mode;
  2838. bomSortFunction = null;
  2839. currentSortColumn = null;
  2840. currentSortOrder = null;
  2841. clearHighlightedModules();
  2842. }
  2843. populateBomTable();
  2844. }
  2845. function focusFilterField() {
  2846. focusInputField(document.getElementById("filter"));
  2847. }
  2848. function focusRefLookupField() {
  2849. focusInputField(document.getElementById("reflookup"));
  2850. }
  2851. function toggleBomCheckbox(bomrowid, checkboxnum) {
  2852. if (!bomrowid || checkboxnum > settings.checkboxes.length) {
  2853. return;
  2854. }
  2855. var bomrow = document.getElementById(bomrowid);
  2856. var checkbox = bomrow.childNodes[checkboxnum].childNodes[0];
  2857. checkbox.checked = !checkbox.checked;
  2858. checkbox.indeterminate = false;
  2859. checkbox.onchange();
  2860. }
  2861. function checkBomCheckbox(bomrowid, checkboxname) {
  2862. var checkboxnum = 0;
  2863. while (checkboxnum < settings.checkboxes.length &&
  2864. settings.checkboxes[checkboxnum].toLowerCase() != checkboxname.toLowerCase()) {
  2865. checkboxnum++;
  2866. }
  2867. if (!bomrowid || checkboxnum >= settings.checkboxes.length) {
  2868. return;
  2869. }
  2870. var bomrow = document.getElementById(bomrowid);
  2871. var checkbox = bomrow.childNodes[checkboxnum + 1].childNodes[0];
  2872. checkbox.checked = true;
  2873. checkbox.indeterminate = false;
  2874. checkbox.onchange();
  2875. }
  2876. function setBomCheckboxes(value) {
  2877. writeStorage("bomCheckboxes", value);
  2878. settings.checkboxes = value.split(",").filter((e) => e);
  2879. prepCheckboxes();
  2880. populateBomTable();
  2881. populateDarkenWhenCheckedOptions();
  2882. }
  2883. function setDarkenWhenChecked(value) {
  2884. writeStorage("darkenWhenChecked", value);
  2885. settings.darkenWhenChecked = value;
  2886. populateBomTable();
  2887. }
  2888. function prepCheckboxes() {
  2889. var table = document.getElementById("checkbox-stats");
  2890. while (table.childElementCount > 1) {
  2891. table.removeChild(table.lastChild);
  2892. }
  2893. if (settings.checkboxes.length) {
  2894. table.style.display = "";
  2895. } else {
  2896. table.style.display = "none";
  2897. }
  2898. for (var checkbox of settings.checkboxes) {
  2899. var tr = document.createElement("TR");
  2900. var td = document.createElement("TD");
  2901. td.innerHTML = checkbox;
  2902. tr.appendChild(td);
  2903. td = document.createElement("TD");
  2904. td.id = "checkbox-stats-" + checkbox;
  2905. var progressbar = document.createElement("div");
  2906. progressbar.classList.add("bar");
  2907. td.appendChild(progressbar);
  2908. var text = document.createElement("div");
  2909. text.classList.add("text");
  2910. td.appendChild(text);
  2911. tr.appendChild(td);
  2912. table.appendChild(tr);
  2913. updateCheckboxStats(checkbox);
  2914. }
  2915. }
  2916. function populateDarkenWhenCheckedOptions() {
  2917. var container = document.getElementById("darkenWhenCheckedContainer");
  2918. if (settings.checkboxes.length == 0) {
  2919. container.parentElement.style.display = "none";
  2920. return;
  2921. }
  2922. container.innerHTML = '';
  2923. container.parentElement.style.display = "inline-block";
  2924. function createOption(name, displayName) {
  2925. var id = "darkenWhenChecked-" + name;
  2926. var div = document.createElement("div");
  2927. div.classList.add("radio-container");
  2928. var input = document.createElement("input");
  2929. input.type = "radio";
  2930. input.name = "darkenWhenChecked";
  2931. input.value = name;
  2932. input.id = id;
  2933. input.onchange = () => setDarkenWhenChecked(name);
  2934. div.appendChild(input);
  2935. // Preserve the selected element when the checkboxes change
  2936. if (name == settings.darkenWhenChecked) {
  2937. input.checked = true;
  2938. }
  2939. var label = document.createElement("label");
  2940. label.innerHTML = displayName;
  2941. label.htmlFor = id;
  2942. div.appendChild(label);
  2943. container.appendChild(div);
  2944. }
  2945. createOption("", "None");
  2946. for (var checkbox of settings.checkboxes) {
  2947. createOption(checkbox, checkbox);
  2948. }
  2949. }
  2950. function updateCheckboxStats(checkbox) {
  2951. var checked = getStoredCheckboxRefs(checkbox).size;
  2952. var total = pcbdata.modules.length - pcbdata.bom.skipped.length;
  2953. var percent = checked * 100.0 / total;
  2954. var td = document.getElementById("checkbox-stats-" + checkbox);
  2955. td.firstChild.style.width = percent + "%";
  2956. td.lastChild.innerHTML = checked + "/" + total + " (" + Math.round(percent) + "%)";
  2957. }
  2958. document.onkeydown = function(e) {
  2959. switch (e.key) {
  2960. case "n":
  2961. if (document.activeElement.type == "text") {
  2962. return;
  2963. }
  2964. if (currentHighlightedRowId !== null) {
  2965. checkBomCheckbox(currentHighlightedRowId, "placed");
  2966. highlightNextRow();
  2967. e.preventDefault();
  2968. }
  2969. break;
  2970. case "ArrowUp":
  2971. highlightPreviousRow();
  2972. e.preventDefault();
  2973. break;
  2974. case "ArrowDown":
  2975. highlightNextRow();
  2976. e.preventDefault();
  2977. break;
  2978. default:
  2979. break;
  2980. }
  2981. if (e.altKey) {
  2982. switch (e.key) {
  2983. case "f":
  2984. focusFilterField();
  2985. e.preventDefault();
  2986. break;
  2987. case "r":
  2988. focusRefLookupField();
  2989. e.preventDefault();
  2990. break;
  2991. case "z":
  2992. changeBomLayout("bom-only");
  2993. e.preventDefault();
  2994. break;
  2995. case "x":
  2996. changeBomLayout("left-right");
  2997. e.preventDefault();
  2998. break;
  2999. case "c":
  3000. changeBomLayout("top-bottom");
  3001. e.preventDefault();
  3002. break;
  3003. case "v":
  3004. changeCanvasLayout("F");
  3005. e.preventDefault();
  3006. break;
  3007. case "b":
  3008. changeCanvasLayout("FB");
  3009. e.preventDefault();
  3010. break;
  3011. case "n":
  3012. changeCanvasLayout("B");
  3013. e.preventDefault();
  3014. break;
  3015. default:
  3016. break;
  3017. }
  3018. if (e.key >= '1' && e.key <= '9') {
  3019. toggleBomCheckbox(currentHighlightedRowId, parseInt(e.key));
  3020. }
  3021. }
  3022. }
  3023. function hideNetlistButton() {
  3024. document.getElementById("bom-ungrouped-btn").classList.remove("middle-button");
  3025. document.getElementById("bom-ungrouped-btn").classList.add("right-most-button");
  3026. document.getElementById("bom-netlist-btn").style.display = "none";
  3027. }
  3028. window.onload = function(e) {
  3029. initUtils();
  3030. initRender();
  3031. initStorage();
  3032. initDefaults();
  3033. cleanGutters();
  3034. populateMetadata();
  3035. dbgdiv = document.getElementById("dbg");
  3036. bom = document.getElementById("bombody");
  3037. bomhead = document.getElementById("bomhead");
  3038. filter = "";
  3039. reflookup = "";
  3040. if (!("nets" in pcbdata)) {
  3041. hideNetlistButton();
  3042. }
  3043. initDone = true;
  3044. prepCheckboxes();
  3045. // Triggers render
  3046. changeBomLayout(settings.bomlayout);
  3047. // Users may leave fullscreen without touching the checkbox. Uncheck.
  3048. document.addEventListener('fullscreenchange', () => {
  3049. if (!document.fullscreenElement)
  3050. document.getElementById('fullscreenCheckbox').checked = false;
  3051. });
  3052. }
  3053. window.onresize = resizeAll;
  3054. window.matchMedia("print").addListener(resizeAll);
  3055. ///////////////////////////////////////////////
  3056. ///////////////////////////////////////////////
  3057. window.setTimeout(function() {
  3058. //tracksVisible(true);
  3059. },1000);
  3060. ///////////////////////////////////////////////
  3061. </script>
  3062. </head>
  3063. <body>
  3064. <div id="topmostdiv" class="topmostdiv">
  3065. <div id="top">
  3066. <div style="float: right; height: 100%;">
  3067. <div class="hideonprint menu" style="float: right; top: 8px;">
  3068. <button class="menubtn"></button>
  3069. <div class="menu-content">
  3070. <label class="menu-label menu-label-top" style="width: calc(50% - 18px)">
  3071. <input id="darkmodeCheckbox" type="checkbox" onchange="setDarkMode(this.checked)">
  3072. Dark mode
  3073. </label><!-- This comment eats space! All of it!
  3074. --><label class="menu-label menu-label-top" style="width: calc(50% - 17px); border-left: 0;">
  3075. <input id="fullscreenCheckbox" type="checkbox" onchange="setFullscreen(this.checked)">
  3076. Full Screen
  3077. </label>
  3078. <label class="menu-label" style="width: calc(50% - 18px)">
  3079. <input id="fabricationCheckbox" type="checkbox" checked onchange="fabricationVisible(this.checked)">
  3080. Fab layer
  3081. </label><!-- This comment eats space! All of it!
  3082. --><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
  3083. <input id="silkscreenCheckbox" type="checkbox" checked onchange="silkscreenVisible(this.checked)">
  3084. Silkscreen
  3085. </label>
  3086. <label class="menu-label" style="width: calc(50% - 18px)">
  3087. <input id="referencesCheckbox" type="checkbox" checked onchange="referencesVisible(this.checked)">
  3088. References
  3089. </label><!-- This comment eats space! All of it!
  3090. --><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
  3091. <input id="valuesCheckbox" type="checkbox" checked onchange="valuesVisible(this.checked)">
  3092. Values
  3093. </label>
  3094. <div id="tracksAndZonesCheckboxes">
  3095. <label class="menu-label" style="width: calc(50% - 18px)">
  3096. <input id="tracksCheckbox" type="checkbox" checked onchange="tracksVisible(this.checked)">
  3097. Tracks
  3098. </label><!-- This comment eats space! All of it!
  3099. --><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
  3100. <input id="zonesCheckbox" type="checkbox" checked onchange="zonesVisible(this.checked)">
  3101. Zones
  3102. </label>
  3103. </div>
  3104. <label class="menu-label" style="width: calc(50% - 18px)">
  3105. <input id="padsCheckbox" type="checkbox" checked onchange="padsVisible(this.checked)">
  3106. Pads
  3107. </label><!-- This comment eats space! All of it!
  3108. --><label class="menu-label" style="width: calc(50% - 17px); border-left: 0;">
  3109. <input id="dnpOutlineCheckbox" type="checkbox" checked onchange="dnpOutline(this.checked)">
  3110. DNP outlined
  3111. </label>
  3112. <label class="menu-label">
  3113. <input id="highlightpin1Checkbox" type="checkbox" onchange="setHighlightPin1(this.checked)">
  3114. Highlight first pin
  3115. </label>
  3116. <label class="menu-label">
  3117. <input id="dragCheckbox" type="checkbox" checked onchange="setRedrawOnDrag(this.checked)">
  3118. Continuous redraw on drag
  3119. </label>
  3120. <label class="menu-label">
  3121. <span>Board rotation</span>
  3122. <span style="float: right"><span id="rotationDegree">0</span>&#176;</span>
  3123. <input id="boardRotation" type="range" min="-36" max="36" value="0" class="slider" oninput="setBoardRotation(this.value)">
  3124. </label>
  3125. <label class="menu-label">
  3126. <div style="margin-left: 5px">Bom checkboxes</div>
  3127. <input id="bomCheckboxes" class="menu-textbox" type=text
  3128. oninput="setBomCheckboxes(this.value)">
  3129. </label>
  3130. <label class="menu-label">
  3131. <div style="margin-left: 5px">Darken when checked</div>
  3132. <div id="darkenWhenCheckedContainer"></div>
  3133. </label>
  3134. <label class="menu-label">
  3135. <span class="shameless-plug">
  3136. <span>Created using</span>
  3137. <a id="github-link" target="blank" href="https://github.com/openscopeproject/InteractiveHtmlBom">InteractiveHtmlBom</a>
  3138. </span>
  3139. </label>
  3140. </div>
  3141. </div>
  3142. <div class="button-container hideonprint"
  3143. style="float: right; position: relative; top: 8px">
  3144. <button id="fl-btn" class="left-most-button" onclick="changeCanvasLayout('F')"
  3145. title="Front only">F
  3146. </button>
  3147. <button id="fb-btn" class="middle-button" onclick="changeCanvasLayout('FB')"
  3148. title="Front and Back">FB
  3149. </button>
  3150. <button id="bl-btn" class="right-most-button" onclick="changeCanvasLayout('B')"
  3151. title="Back only">B
  3152. </button>
  3153. </div>
  3154. <div class="button-container hideonprint"
  3155. style="float: right; position: relative; top: 8px">
  3156. <button id="bom-btn" class="left-most-button" onclick="changeBomLayout('bom-only')"
  3157. title="BOM only"></button>
  3158. <button id="lr-btn" class="middle-button" onclick="changeBomLayout('left-right')"
  3159. title="BOM left, drawings right"></button>
  3160. <button id="tb-btn" class="right-most-button" onclick="changeBomLayout('top-bottom')"
  3161. title="BOM top, drawings bot"></button>
  3162. </div>
  3163. <div class="button-container hideonprint"
  3164. style="float: right; position: relative; top: 8px">
  3165. <button id="bom-grouped-btn" class="left-most-button" onclick="changeBomMode('grouped')"
  3166. title="Grouped BOM"></button>
  3167. <button id="bom-ungrouped-btn" class="middle-button" onclick="changeBomMode('ungrouped')"
  3168. title="Ungrouped BOM"></button>
  3169. <button id="bom-netlist-btn" class="right-most-button" onclick="changeBomMode('netlist')"
  3170. title="Netlist"></button>
  3171. </div>
  3172. <div class="hideonprint menu" style="float: right; top: 8px;">
  3173. <button class="statsbtn"></button>
  3174. <div class="menu-content">
  3175. <table class="stats">
  3176. <tbody>
  3177. <tr>
  3178. <td width="40%">Board stats</td>
  3179. <td>Front</td>
  3180. <td>Back</td>
  3181. <td>Total</td>
  3182. </tr>
  3183. <tr>
  3184. <td>Components</td>
  3185. <td id="stats-components-front">~</td>
  3186. <td id="stats-components-back">~</td>
  3187. <td id="stats-components-total">~</td>
  3188. </tr>
  3189. <tr>
  3190. <td>Groups</td>
  3191. <td id="stats-groups-front">~</td>
  3192. <td id="stats-groups-back">~</td>
  3193. <td id="stats-groups-total">~</td>
  3194. </tr>
  3195. <tr>
  3196. <td>SMD pads</td>
  3197. <td id="stats-smd-pads-front">~</td>
  3198. <td id="stats-smd-pads-back">~</td>
  3199. <td id="stats-smd-pads-total">~</td>
  3200. </tr>
  3201. <tr>
  3202. <td>TH pads</td>
  3203. <td colspan=3 id="stats-th-pads">~</td>
  3204. </tr>
  3205. </tbody>
  3206. </table>
  3207. <table class="stats">
  3208. <col width="40%"/><col />
  3209. <tbody id="checkbox-stats">
  3210. <tr>
  3211. <td colspan=2 style="border-top: 0">Checkboxes</td>
  3212. </tr>
  3213. </tbody>
  3214. </table>
  3215. </div>
  3216. </div>
  3217. <div class="hideonprint menu" style="float: right; top: 8px;">
  3218. <button class="iobtn"></button>
  3219. <div class="menu-content">
  3220. <div class="menu-label menu-label-top">
  3221. <div style="margin-left: 5px;">Save board image</div>
  3222. <div class="flexbox">
  3223. <input id="render-save-width" class="menu-textbox" type="text" value="1000" placeholder="Width"
  3224. style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
  3225. <span>X</span>
  3226. <input id="render-save-height" class="menu-textbox" type="text" value="1000" placeholder="Height"
  3227. style="flex-grow: 1; width: 50px;" oninput="validateSaveImgDimension(this)">
  3228. </div>
  3229. <label>
  3230. <input id="render-save-transparent" type="checkbox">
  3231. Transparent background
  3232. </label>
  3233. <div class="flexbox">
  3234. <button class="savebtn" onclick="saveImage('F')">Front</button>
  3235. <button class="savebtn" onclick="saveImage('B')">Back</button>
  3236. </div>
  3237. </div>
  3238. <div class="menu-label">
  3239. <span style="margin-left: 5px;">Config and checkbox state</span>
  3240. <div class="flexbox">
  3241. <button class="savebtn" onclick="saveSettings()">Export</button>
  3242. <button class="savebtn" onclick="loadSettings()">Import</button>
  3243. </div>
  3244. </div>
  3245. </div>
  3246. </div>
  3247. </div>
  3248. <div id="fileinfodiv" style="overflow: auto;">
  3249. <table class="fileinfo">
  3250. <tbody>
  3251. <tr>
  3252. <td id="title" class="title" style="width: 70%">
  3253. Title
  3254. </td>
  3255. <td id="revision" class="title" style="width: 30%">
  3256. Revision
  3257. </td>
  3258. </tr>
  3259. <tr>
  3260. <td id="company">
  3261. Company
  3262. </td>
  3263. <td id="filedate">
  3264. Date
  3265. </td>
  3266. </tr>
  3267. </tbody>
  3268. </table>
  3269. </div>
  3270. </div>
  3271. <div id="bot" class="split" style="height: calc(100% - 80px)">
  3272. <div id="bomdiv" class="split split-horizontal">
  3273. <div style="width: 100%">
  3274. <input id="reflookup" class="textbox searchbox reflookup hideonprint" type="text" placeholder="Ref lookup"
  3275. oninput="updateRefLookup(this.value)">
  3276. <input id="filter" class="textbox searchbox filter hideonprint" type="text" placeholder="Filter"
  3277. oninput="updateFilter(this.value)">
  3278. <div class="button-container hideonprint" style="float: left; margin: 0;">
  3279. <button id="copy" title="Copy bom table to clipboard"
  3280. onclick="copyToClipboard()"></button>
  3281. </div>
  3282. </div>
  3283. <div id="dbg"></div>
  3284. <table class="bom">
  3285. <thead id="bomhead">
  3286. </thead>
  3287. <tbody id="bombody">
  3288. </tbody>
  3289. </table>
  3290. </div>
  3291. <div id="canvasdiv" class="split split-horizontal">
  3292. <div id="frontcanvas" class="split" touch-action="none" style="overflow: hidden">
  3293. <div style="position: relative; width: 100%; height: 100%;">
  3294. <canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
  3295. <canvas id="F_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
  3296. <canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
  3297. <canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
  3298. </div>
  3299. </div>
  3300. <div id="backcanvas" class="split" touch-action="none" style="overflow: hidden">
  3301. <div style="position: relative; width: 100%; height: 100%;">
  3302. <canvas id="B_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
  3303. <canvas id="B_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
  3304. <canvas id="B_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
  3305. <canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
  3306. </div>
  3307. </div>
  3308. </div>
  3309. </div>
  3310. </div>
  3311. </body>
  3312. </html>