New Feature: Copy Deep-Link URL for Components and Nets#556
Open
dani007200964 wants to merge 4 commits into
Open
New Feature: Copy Deep-Link URL for Components and Nets#556dani007200964 wants to merge 4 commits into
dani007200964 wants to merge 4 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
requested changes
Jun 13, 2026
qu1ck
left a comment
qu1ck
left a comment
Member
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; |
Member
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%"; |
Member
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()); |
Member
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.
Comment on lines
+746
to
+765
| // 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); | ||
| } |
Member
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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.