New Feature: Copy Deep-Link URL for Components and Nets by dani007200964 · Pull Request #556 · openscopeproject/InteractiveHtmlBom

dani007200964 · 2026-06-13T18:10:43Z

Summary

Added copy functionality for generating properly encoded deep-link URLs to components and nets in Interactive HTML BOM.

Implementation Details

URL linking support: Nets and components can be linked via URL parameters (ibom.html?net="GND" or ibom.html?ref="R1")
Mode-specific copy buttons:
- Copy icon/button added next to component references in ungrouped mode
- Copy icon/button added next to net names in netlist mode
Proper encoding: All special characters (including +, spaces, quotes) are correctly URL-encoded using encodeURIComponent()
Clipboard integration: Generated URLs are automatically copied to clipboard

Examples

Component reference R12 → ibom.html?ref=R12
Net name +3V3 → ibom.html?net=%2B3V3
Net name "GND" → ibom.html?net=%22GND%22

Usage

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:

Link to R1: ibom.html?ref=R1 -> link
Link to VCC: ibom.html?net=VCC -> link

Because 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, -5V and 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.

- 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

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.

dani007200964 · 2026-06-21T12:20:31Z

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. 🙂

qu1ck · 2026-07-25T23:57:03Z

+  statusBox.textContent = "Copied!";
+
+  // Cache footprint references for faster lookups (only build if needed)
+  var footprintRefCache = null;


You need this cache only because you are passing footprint by ref which is incorrect as like I said they are not always unique. Either pass the (ref, id) tuple or use id and lookup ref from pcbdata.footprints[id].

qu1ck

Sorry for late review. Functionality and styling looks good! But there are some bugs I noted in inline comments.

Also a few general things:

In css use em sizing wherever possible instead of px
The "copied!" text is taking up invisible space in the table which unnecessarily extends the cell when the column is small enough.

Make it float next to the button. In fact it probably should be created dynamically on demand and not exist in the table at all times.

Also change the browser url when link is copied. Url should also be fixed when chosing one of the options in the warning toast.
Copying the table to clipboard still inserts null elements.
(Optional) This can be done at a later stage and does not need to be part of this merge request but usability would be improved. When navigating to a deep link url the initial highlight is very easy to lose by accidentally hovering with mouse on another cell. It would be good if the deep linked table row highlight status was persistent and differed a bit from normal hover highlight (for example darker shade of green).

qu1ck · 2026-07-25T23:57:31Z

+        // Build cache if needed
+        if (!footprintRefCache) {
+          footprintRefCache = {};
+          for (var i = 0; i < pcbdata.footprints.length; i++) {
+            footprintRefCache[pcbdata.footprints[i].ref] = i;
+          }
+        }
+
+        // Use the cache to get ID quickly
+        if (footprintRefCache[value] !== undefined) {
+          id = footprintRefCache[value];
+        }


All of this is not necessary

qu1ck · 2026-07-26T00:01:05Z

+
+  // Right-click -> open in new window
+  copyButton.addEventListener("mousedown", function (e) {
+    if (e.button === 1) {


button 1 is middle click, update the comment above.

qu1ck · 2026-07-26T00:02:58Z

+}
+
+function showReferenceMismatchWarning(ref, id) {
+  // Ha már van ilyen figyelmeztetés, töröljük


English only please

qu1ck · 2026-07-26T00:08:36Z

+    selectComponentById(id);
+  });
+
+  //const root = document.querySelector(".topmostdiv") || document.body;


Remove dead code

qu1ck · 2026-07-26T00:11:27Z

+        Use Unique ID
+      </button>
+    </div>
+  `;


This whole template should be moved to html file. Dont delete/create the toast, just make it invisible by default. Populate text that changes from javascript and make it visible when needed.

qu1ck · 2026-07-26T00:15:13Z

+      if (!isNaN(id)) {
+        if (validateReferenceForId(refParam, id)) {
+          // Both parameters are valid, select the component
+          selectComponentByReference(refParam);


You need to select by id in this case.

dani007200964 added 4 commits June 12, 2026 21:52

Add deep-linking support for nets via URL parameters

7fa3c58

For example viewer.html?net=VCC

Fixed argument string handling

9dbe5e2

Copy link button added to list elements.

01c9466

qu1ck requested changes Jun 13, 2026

View reviewed changes

Comment thread InteractiveHtmlBom/web/ibom.css Outdated

Comment thread InteractiveHtmlBom/web/ibom.css Outdated

Comment thread InteractiveHtmlBom/web/ibom.js Outdated

Comment thread InteractiveHtmlBom/web/ibom.js Outdated

Comment thread InteractiveHtmlBom/web/ibom.js

dani007200964 added 5 commits June 20, 2026 14:36

Fixed everything but the (id,ref) encoding

355676a

copy link button height fix

f867ce8

reference and ID used for linking. Error handling logic still needed

77e3cad

Ugly, but working prototype for warning window

5aa5f9b

Working dark / light theme and URL search param bugfix

536ea66

dani007200964 requested a review from qu1ck June 21, 2026 12:20

qu1ck reviewed Jul 25, 2026

View reviewed changes

qu1ck requested changes Jul 26, 2026

View reviewed changes

Navigation Menu

Uh oh!

New Feature: Copy Deep-Link URL for Components and Nets - #556

New Feature: Copy Deep-Link URL for Components and Nets#556
dani007200964 wants to merge 9 commits into
openscopeproject:masterfrom
dani007200964:master

dani007200964 commented Jun 13, 2026

Uh oh!

qu1ck left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dani007200964 commented Jun 21, 2026

Uh oh!

qu1ck Jul 25, 2026

Uh oh!

qu1ck left a comment

Uh oh!

qu1ck Jul 25, 2026

Uh oh!

qu1ck Jul 26, 2026

Uh oh!

qu1ck Jul 26, 2026

Uh oh!

qu1ck Jul 26, 2026

Uh oh!

qu1ck Jul 26, 2026

Uh oh!

qu1ck Jul 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

dani007200964 commented Jun 13, 2026

Summary

Implementation Details

Examples

Usage

Motivation behind this feature

Demo

Usage

Uh oh!

qu1ck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dani007200964 commented Jun 21, 2026

Uh oh!

qu1ck Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck left a comment

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 26, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 26, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 26, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 26, 2026

Choose a reason for hiding this comment

Uh oh!

qu1ck Jul 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants