New Feature: Copy Deep-Link URL for Components and Nets#556
New Feature: Copy Deep-Link URL for Components and Nets#556dani007200964 wants to merge 9 commits into
Conversation
- Parse URL parameters in window.onload function to look for 'ref' or 'component' parameters - Add selectComponentByReference() function that finds components by reference and triggers selection - Use existing highlightHandlers and footprintIndexToHandler mechanisms - Center the view on selected components using smoothScrollToRow() - Handle gracefully when component references are not found - Support both 'ref=' and 'component=' parameter names for flexibility
For example viewer.html?net=VCC
qu1ck
left a comment
qu1ck
left a comment
There was a problem hiding this comment.
- You need to urlencode the net name instead of adding quotes.
- You should use encoded (id, ref) pair instead of just reference for components. References are not always unique. Rely on id for uniqueness, double check that ref matches pcbdata for that id, show a warning if it does not. It can change between various board revisions and if someone uses stale link they will get a heads up.
- Make sure copy bom to clipboard does not insert "null"s instead of the deeplink button, best to just omit that element.
| } | ||
|
|
||
| .copy-link-button { | ||
| font-size: 12px; |
| } | ||
|
|
||
| .copy-link-button:hover { | ||
| opacity: 0.7; |
There was a problem hiding this comment.
I would rather have the transparency be reversed i.e. more opaque when hovered.
| copyButton.className = "copy-link-button"; | ||
| copyButton.title = "Copy deep-link URL"; | ||
| copyButton.innerHTML = "🔗"; | ||
| copyButton.style.cssText = "margin-left: 5px; font-size: 10pt; border: none; background: transparent; cursor: pointer; height: 100%"; |
There was a problem hiding this comment.
There are duplicated and overriding properties here, move everything to css.
| e.stopPropagation(); | ||
| var url = new URL(window.location.href); | ||
| url.searchParams.set("net", "\"" + currentNetname + "\""); | ||
| copyToClipboard(url.toString()); |
There was a problem hiding this comment.
Change window location to the url as well, will give more visual clues that the click action worked.
| // Add copy button for component references in ungrouped mode | ||
| if (settings.bommode === "ungrouped") { | ||
| var copyButton = document.createElement("button"); | ||
| copyButton.className = "copy-link-button"; | ||
| copyButton.title = "Copy deep-link URL"; | ||
| copyButton.innerHTML = "🔗"; | ||
| copyButton.style.cssText = "margin-left: 5px; font-size: 10pt; border: none; background: transparent; cursor: pointer; height: 100%"; | ||
| var refName = references[0][0]; | ||
| (function(currentRefname) { | ||
| copyButton.onclick = function(e) { | ||
| e.stopPropagation(); | ||
| // Get the first reference to create URL (since we have multiple refs, we'll use the first one) | ||
| var url = new URL(window.location.href); | ||
| url.searchParams.set("ref", "\"" + currentRefname + "\""); | ||
| copyToClipboard(url.toString()); | ||
|
|
||
| }; | ||
| })(refName); | ||
| td.appendChild(copyButton); | ||
| } |
There was a problem hiding this comment.
A lot of code duplication here with the copy button for nets. Extract it into a helper that creates button based on type (net/ref) and value (net name/ref name)
|
I have completed the requested changes and updated the demo to include the new functionality. From a functional perspective, everything appears to be working as expected. I tested the implementation across a variety of scenarios and was not able to identify any issues during my testing. The visual design may still need some refinement. UI/UX is not my strongest area, so there are likely opportunities to improve the overall appearance... particularly the error-handling dialog. I also made an effort to ensure the feature works well in both light and dark themes, although I may need some assistance fine-tuning the styling. For error handling, I implemented a mechanism that detects mismatches between the UID and the designator. When such a mismatch occurs, a notification card appears in the top-right corner of the interface, allowing the user to decide whether the link should be resolved using the designator or the UID. 
You can try this functionality with a broken link like this. As a final sanity check, I also reviewed the implementation with Qwen3 Coder to see whether it could identify any potential issues or concerns. So far, the feedback has been positive, and nothing problematic has been identified. If you run into any issues or have any questions, feel free to reach out. I'll be happy to help in any way I can. 🙂 |
2 participants
Summary
Added copy functionality for generating properly encoded deep-link URLs to components and nets in Interactive HTML BOM.
Implementation Details
ibom.html?net="GND"oribom.html?ref="R1")+, spaces, quotes) are correctly URL-encoded usingencodeURIComponent()Examples
R12→ibom.html?ref=R12+3V3→ibom.html?net=%2B3V3"GND"→ibom.html?net=%22GND%22Usage
In ungrouped BOM mode, click the link icon next to component references to copy a deep-link URL. In netlist mode, click the link icon next to net names to copy a deep-link URL.
Motivation behind this feature
This feature provides flexibility for documentation generation and assembly reference without requiring screenshots. The implementation resolves encoding issues that would otherwise prevent proper deep-linking of special character names.
Demo
I also created a demo, to demonstrate the new features. The live demo found here: https://dani007200964.github.io/InteractiveHtmlBom-Deep-Linking-Demo/
Usage
You can create URL liks to components and nets like this:
ibom.html?ref=R1-> linkibom.html?net=VCC-> linkBecause html rules there are some specia characters, like
+or-symbols and so on. It is really a pain, because PCB designs often has these characters(+3V3,-5Vand so on... ). For this reason some URL woodoo is needed to 'escape' these characters. For this reason a copy link button added next to each net and component name, that makes things simple.