@kvaser/canking-api 7.1.0-beta.231 → 7.1.0-beta.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +101 -37
  2. package/dist/controls/CanIdentifierControl.d.ts +21 -3
  3. package/dist/controls/ColumnItemControl.d.ts +36 -0
  4. package/dist/controls/OneLineButton.d.ts +1 -1
  5. package/dist/controls/index.d.ts +2 -0
  6. package/dist/controls.js +1 -1
  7. package/dist/controls.mjs +1385 -1141
  8. package/dist/grpc.mjs +114 -114
  9. package/dist/index.js +1 -1
  10. package/dist/measurement_settings.js +1 -1
  11. package/dist/measurement_settings.mjs +449 -403
  12. package/dist/models.js +1 -1
  13. package/dist/models.mjs +30 -30
  14. package/dist/protos/app_service.d.ts +1 -1
  15. package/dist/protos/device_service.d.ts +1 -1
  16. package/dist/protos/frame_params.d.ts +6 -0
  17. package/dist/protos/measurement_service.d.ts +1 -1
  18. package/dist/status_params.js +1 -1
  19. package/dist/status_params.mjs +1780 -1780
  20. package/doc/assets/material-style.css +105 -14
  21. package/doc/assets/navigation.js +1 -1
  22. package/doc/assets/search.js +1 -1
  23. package/doc/functions/controls.ColumnItemControl.html +175 -0
  24. package/doc/functions/controls.OneLineButton.html +4 -4
  25. package/doc/functions/controls.useColumnItem.html +176 -0
  26. package/doc/functions/controls.useColumnItems.html +177 -0
  27. package/doc/index.html +87 -43
  28. package/doc/interfaces/controls.CanIdentifierFrameControlProps.html +4 -2
  29. package/doc/interfaces/controls.CanIdentifierGeneratorControlProps.html +6 -2
  30. package/doc/interfaces/controls.CanIdentifierGeneratorSettingsControlProps.html +6 -2
  31. package/doc/interfaces/controls.ColumnItemControlProps.html +177 -0
  32. package/doc/interfaces/models.SignalValue.html +4 -2
  33. package/doc/interfaces/models.WriteFrame.html +6 -2
  34. package/doc/modules/controls.html +4 -0
  35. package/index.js +14 -0
  36. package/licenses/ELECTRON-TOOLKIT-PRELOAD_MIT.TXT +21 -0
  37. package/licenses/FAST-DEEP-EQUAL_MIT.TXT +21 -0
  38. package/licenses/GOOGLE-PROTOBUF_(BSD-3-CLAUSE AND APACHE-2.0).TXT +29 -0
  39. package/licenses/REACT-DOM_MIT.TXT +21 -0
  40. package/licenses/REACT_MIT.TXT +21 -0
  41. package/licenses/UUID_MIT.TXT +9 -0
  42. package/licenses/licenses.css +22 -0
  43. package/licenses/licenses.html +67 -0
  44. package/package.json +10 -16
  45. package/scripts/createCanKingExtension.js +0 -403
  46. package/scripts/index.js +0 -39
  47. package/scripts/template/_.eslintrc.cjs +0 -38
  48. package/scripts/template/_.gitignore +0 -24
  49. package/scripts/template/_.npmrc +0 -2
  50. package/scripts/template/_.prettierrc +0 -8
  51. package/scripts/template/_.vscode/_launch.json +0 -28
  52. package/scripts/template/_index.html +0 -15
  53. package/scripts/template/_tsconfig.app.json +0 -27
  54. package/scripts/template/_tsconfig.json +0 -11
  55. package/scripts/template/_tsconfig.node.json +0 -13
  56. package/scripts/template/_vite.config.ts +0 -7
  57. package/scripts/template/src/App.tsx +0 -12
  58. package/scripts/template/src/WorkspaceView/index.tsx +0 -47
  59. package/scripts/template/src/main.css +0 -9
  60. package/scripts/template/src/main.tsx +0 -19
  61. package/scripts/template/src/vite-env.d.ts +0 -1
package/doc/functions/controls.useColumnItem.html ADDED
@@ -0,0 +1,176 @@
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useColumnItem | Kvaser CanKing GUI Extensions SDK</title><meta name="description" content="Documentation for Kvaser CanKing GUI Extensions SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><style>
2
+ @media (prefers-color-scheme: dark) {
3
+ :root {
4
+ --md-sys-color-primary: #60d4fe;
5
+ --md-sys-color-on-primary: #003545;
6
+ --md-sys-color-primary-container: #004d62;
7
+ --md-sys-color-on-primary-container: #baeaff;
8
+ --md-sys-color-secondary: #b4cad5;
9
+ --md-sys-color-on-secondary: #1e333c;
10
+ --md-sys-color-secondary-container: #354a53;
11
+ --md-sys-color-on-secondary-container: #cfe6f1;
12
+ --md-sys-color-tertiary: #c4c3ea;
13
+ --md-sys-color-on-tertiary: #2d2d4d;
14
+ --md-sys-color-tertiary-container: #444465;
15
+ --md-sys-color-on-tertiary-container: #e2dfff;
16
+ --md-sys-color-error: #ffb4ab;
17
+ --md-sys-color-on-error: #690005;
18
+ --md-sys-color-error-container: #93000a;
19
+ --md-sys-color-on-error-container: #ffb4ab;
20
+ --md-sys-color-background: #191c1e;
21
+ --md-sys-color-on-background: #e1e3e4;
22
+ --md-sys-color-surface: #191c1e;
23
+ --md-sys-color-on-surface: #e1e3e4;
24
+ --md-sys-color-surface-variant: #40484c;
25
+ --md-sys-color-on-surface-variant: #c0c8cc;
26
+ --md-sys-color-outline: #8a9296;
27
+ --md-sys-color-outline-variant: #40484c;
28
+ --md-sys-color-shadow: #000000;
29
+ --md-sys-color-scrim: #000000;
30
+ --md-sys-color-inverse-surface: #e1e3e4;
31
+ --md-sys-color-inverse-on-surface: #2e3132;
32
+ --md-sys-color-inverse-primary: #006782;
33
+ --md-sys-color-surface-dim: #111415;
34
+ --md-sys-color-surface-bright: #373a3b;
35
+ --md-sys-color-surface-container-lowest: #0c0f10;
36
+ --md-sys-color-surface-container-low: #191c1e;
37
+ --md-sys-color-surface-container: #1d2022;
38
+ --md-sys-color-surface-container-high: #272a2c;
39
+ --md-sys-color-surface-container-highest: #323537
40
+ }
41
+ }
42
+ :root[data-theme="dark"] {
43
+ --md-sys-color-primary: #60d4fe;
44
+ --md-sys-color-on-primary: #003545;
45
+ --md-sys-color-primary-container: #004d62;
46
+ --md-sys-color-on-primary-container: #baeaff;
47
+ --md-sys-color-secondary: #b4cad5;
48
+ --md-sys-color-on-secondary: #1e333c;
49
+ --md-sys-color-secondary-container: #354a53;
50
+ --md-sys-color-on-secondary-container: #cfe6f1;
51
+ --md-sys-color-tertiary: #c4c3ea;
52
+ --md-sys-color-on-tertiary: #2d2d4d;
53
+ --md-sys-color-tertiary-container: #444465;
54
+ --md-sys-color-on-tertiary-container: #e2dfff;
55
+ --md-sys-color-error: #ffb4ab;
56
+ --md-sys-color-on-error: #690005;
57
+ --md-sys-color-error-container: #93000a;
58
+ --md-sys-color-on-error-container: #ffb4ab;
59
+ --md-sys-color-background: #191c1e;
60
+ --md-sys-color-on-background: #e1e3e4;
61
+ --md-sys-color-surface: #191c1e;
62
+ --md-sys-color-on-surface: #e1e3e4;
63
+ --md-sys-color-surface-variant: #40484c;
64
+ --md-sys-color-on-surface-variant: #c0c8cc;
65
+ --md-sys-color-outline: #8a9296;
66
+ --md-sys-color-outline-variant: #40484c;
67
+ --md-sys-color-shadow: #000000;
68
+ --md-sys-color-scrim: #000000;
69
+ --md-sys-color-inverse-surface: #e1e3e4;
70
+ --md-sys-color-inverse-on-surface: #2e3132;
71
+ --md-sys-color-inverse-primary: #006782;
72
+ --md-sys-color-surface-dim: #111415;
73
+ --md-sys-color-surface-bright: #373a3b;
74
+ --md-sys-color-surface-container-lowest: #0c0f10;
75
+ --md-sys-color-surface-container-low: #191c1e;
76
+ --md-sys-color-surface-container: #1d2022;
77
+ --md-sys-color-surface-container-high: #272a2c;
78
+ --md-sys-color-surface-container-highest: #323537
79
+ }
80
+
81
+ @media (prefers-color-scheme: light) {
82
+ :root {
83
+ --md-sys-color-primary: #006782;
84
+ --md-sys-color-on-primary: #ffffff;
85
+ --md-sys-color-primary-container: #baeaff;
86
+ --md-sys-color-on-primary-container: #001f29;
87
+ --md-sys-color-secondary: #4c616b;
88
+ --md-sys-color-on-secondary: #ffffff;
89
+ --md-sys-color-secondary-container: #cfe6f1;
90
+ --md-sys-color-on-secondary-container: #071e26;
91
+ --md-sys-color-tertiary: #5c5b7e;
92
+ --md-sys-color-on-tertiary: #ffffff;
93
+ --md-sys-color-tertiary-container: #e2dfff;
94
+ --md-sys-color-on-tertiary-container: #181837;
95
+ --md-sys-color-error: #ba1a1a;
96
+ --md-sys-color-on-error: #ffffff;
97
+ --md-sys-color-error-container: #ffdad6;
98
+ --md-sys-color-on-error-container: #410002;
99
+ --md-sys-color-background: #fbfcfe;
100
+ --md-sys-color-on-background: #191c1e;
101
+ --md-sys-color-surface: #fbfcfe;
102
+ --md-sys-color-on-surface: #191c1e;
103
+ --md-sys-color-surface-variant: #dce4e8;
104
+ --md-sys-color-on-surface-variant: #40484c;
105
+ --md-sys-color-outline: #70787d;
106
+ --md-sys-color-outline-variant: #c0c8cc;
107
+ --md-sys-color-shadow: #000000;
108
+ --md-sys-color-scrim: #000000;
109
+ --md-sys-color-inverse-surface: #2e3132;
110
+ --md-sys-color-inverse-on-surface: #eff1f3;
111
+ --md-sys-color-inverse-primary: #60d4fe;
112
+ --md-sys-color-surface-dim: #d8dadc;
113
+ --md-sys-color-surface-bright: #f8f9fb;
114
+ --md-sys-color-surface-container-lowest: #ffffff;
115
+ --md-sys-color-surface-container-low: #f2f4f5;
116
+ --md-sys-color-surface-container: #eceef0;
117
+ --md-sys-color-surface-container-high: #e7e8ea;
118
+ --md-sys-color-surface-container-highest: #e1e3e4
119
+ }
120
+ }
121
+ :root[data-theme="light"] {
122
+ --md-sys-color-primary: #006782;
123
+ --md-sys-color-on-primary: #ffffff;
124
+ --md-sys-color-primary-container: #baeaff;
125
+ --md-sys-color-on-primary-container: #001f29;
126
+ --md-sys-color-secondary: #4c616b;
127
+ --md-sys-color-on-secondary: #ffffff;
128
+ --md-sys-color-secondary-container: #cfe6f1;
129
+ --md-sys-color-on-secondary-container: #071e26;
130
+ --md-sys-color-tertiary: #5c5b7e;
131
+ --md-sys-color-on-tertiary: #ffffff;
132
+ --md-sys-color-tertiary-container: #e2dfff;
133
+ --md-sys-color-on-tertiary-container: #181837;
134
+ --md-sys-color-error: #ba1a1a;
135
+ --md-sys-color-on-error: #ffffff;
136
+ --md-sys-color-error-container: #ffdad6;
137
+ --md-sys-color-on-error-container: #410002;
138
+ --md-sys-color-background: #fbfcfe;
139
+ --md-sys-color-on-background: #191c1e;
140
+ --md-sys-color-surface: #fbfcfe;
141
+ --md-sys-color-on-surface: #191c1e;
142
+ --md-sys-color-surface-variant: #dce4e8;
143
+ --md-sys-color-on-surface-variant: #40484c;
144
+ --md-sys-color-outline: #70787d;
145
+ --md-sys-color-outline-variant: #c0c8cc;
146
+ --md-sys-color-shadow: #000000;
147
+ --md-sys-color-scrim: #000000;
148
+ --md-sys-color-inverse-surface: #2e3132;
149
+ --md-sys-color-inverse-on-surface: #eff1f3;
150
+ --md-sys-color-inverse-primary: #60d4fe;
151
+ --md-sys-color-surface-dim: #d8dadc;
152
+ --md-sys-color-surface-bright: #f8f9fb;
153
+ --md-sys-color-surface-container-lowest: #ffffff;
154
+ --md-sys-color-surface-container-low: #f2f4f5;
155
+ --md-sys-color-surface-container: #eceef0;
156
+ --md-sys-color-surface-container-high: #e7e8ea;
157
+ --md-sys-color-surface-container-highest: #e1e3e4
158
+ }
159
+ </style><link rel="stylesheet" href="../assets/material-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Kvaser CanKing GUI Extensions SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Kvaser CanKing GUI Extensions SDK</a></li><li><a href="../modules/controls.html">controls</a></li><li><a href="controls.useColumnItem.html">useColumnItem</a></li></ul><h1>Function useColumnItem</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Gets a ColumnItem object that can be used in calls to useColumnItems and as props to ColumnItemControl.</p>
160
+ </div><div class="tsd-comment tsd-typography"></div></section><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="useColumnItem" class="tsd-anchor"></a><span class="tsd-kind-call-signature">use<wbr/>Column<wbr/>Item</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ColumnItem</span><a href="#useColumnItem" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ColumnItem</span></h4><p>A ColumnItem object</p>
161
+ <div class="tsd-comment tsd-typography"></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Kvaser CanKing GUI Extensions SDK</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2024</p></footer><div class="overlay"></div><script>
162
+ try {
163
+ const generateLinkElement = document.querySelector(".tsd-generator a");
164
+ const link = document.createElement("a");
165
+ Object.assign(link, {
166
+ href: "https://github.com/dmnsgn/typedoc-material-theme",
167
+ target: "_blank",
168
+ rel: "noreferrer",
169
+ innerText: "typedoc-material-theme."
170
+ });
171
+ generateLinkElement.insertAdjacentElement("afterend", link);
172
+ generateLinkElement.insertAdjacentText("afterend", " with ");
173
+ } catch (error) {
174
+
175
+ }
176
+ </script></body></html>
package/doc/functions/controls.useColumnItems.html ADDED
@@ -0,0 +1,177 @@
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useColumnItems | Kvaser CanKing GUI Extensions SDK</title><meta name="description" content="Documentation for Kvaser CanKing GUI Extensions SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><style>
2
+ @media (prefers-color-scheme: dark) {
3
+ :root {
4
+ --md-sys-color-primary: #60d4fe;
5
+ --md-sys-color-on-primary: #003545;
6
+ --md-sys-color-primary-container: #004d62;
7
+ --md-sys-color-on-primary-container: #baeaff;
8
+ --md-sys-color-secondary: #b4cad5;
9
+ --md-sys-color-on-secondary: #1e333c;
10
+ --md-sys-color-secondary-container: #354a53;
11
+ --md-sys-color-on-secondary-container: #cfe6f1;
12
+ --md-sys-color-tertiary: #c4c3ea;
13
+ --md-sys-color-on-tertiary: #2d2d4d;
14
+ --md-sys-color-tertiary-container: #444465;
15
+ --md-sys-color-on-tertiary-container: #e2dfff;
16
+ --md-sys-color-error: #ffb4ab;
17
+ --md-sys-color-on-error: #690005;
18
+ --md-sys-color-error-container: #93000a;
19
+ --md-sys-color-on-error-container: #ffb4ab;
20
+ --md-sys-color-background: #191c1e;
21
+ --md-sys-color-on-background: #e1e3e4;
22
+ --md-sys-color-surface: #191c1e;
23
+ --md-sys-color-on-surface: #e1e3e4;
24
+ --md-sys-color-surface-variant: #40484c;
25
+ --md-sys-color-on-surface-variant: #c0c8cc;
26
+ --md-sys-color-outline: #8a9296;
27
+ --md-sys-color-outline-variant: #40484c;
28
+ --md-sys-color-shadow: #000000;
29
+ --md-sys-color-scrim: #000000;
30
+ --md-sys-color-inverse-surface: #e1e3e4;
31
+ --md-sys-color-inverse-on-surface: #2e3132;
32
+ --md-sys-color-inverse-primary: #006782;
33
+ --md-sys-color-surface-dim: #111415;
34
+ --md-sys-color-surface-bright: #373a3b;
35
+ --md-sys-color-surface-container-lowest: #0c0f10;
36
+ --md-sys-color-surface-container-low: #191c1e;
37
+ --md-sys-color-surface-container: #1d2022;
38
+ --md-sys-color-surface-container-high: #272a2c;
39
+ --md-sys-color-surface-container-highest: #323537
40
+ }
41
+ }
42
+ :root[data-theme="dark"] {
43
+ --md-sys-color-primary: #60d4fe;
44
+ --md-sys-color-on-primary: #003545;
45
+ --md-sys-color-primary-container: #004d62;
46
+ --md-sys-color-on-primary-container: #baeaff;
47
+ --md-sys-color-secondary: #b4cad5;
48
+ --md-sys-color-on-secondary: #1e333c;
49
+ --md-sys-color-secondary-container: #354a53;
50
+ --md-sys-color-on-secondary-container: #cfe6f1;
51
+ --md-sys-color-tertiary: #c4c3ea;
52
+ --md-sys-color-on-tertiary: #2d2d4d;
53
+ --md-sys-color-tertiary-container: #444465;
54
+ --md-sys-color-on-tertiary-container: #e2dfff;
55
+ --md-sys-color-error: #ffb4ab;
56
+ --md-sys-color-on-error: #690005;
57
+ --md-sys-color-error-container: #93000a;
58
+ --md-sys-color-on-error-container: #ffb4ab;
59
+ --md-sys-color-background: #191c1e;
60
+ --md-sys-color-on-background: #e1e3e4;
61
+ --md-sys-color-surface: #191c1e;
62
+ --md-sys-color-on-surface: #e1e3e4;
63
+ --md-sys-color-surface-variant: #40484c;
64
+ --md-sys-color-on-surface-variant: #c0c8cc;
65
+ --md-sys-color-outline: #8a9296;
66
+ --md-sys-color-outline-variant: #40484c;
67
+ --md-sys-color-shadow: #000000;
68
+ --md-sys-color-scrim: #000000;
69
+ --md-sys-color-inverse-surface: #e1e3e4;
70
+ --md-sys-color-inverse-on-surface: #2e3132;
71
+ --md-sys-color-inverse-primary: #006782;
72
+ --md-sys-color-surface-dim: #111415;
73
+ --md-sys-color-surface-bright: #373a3b;
74
+ --md-sys-color-surface-container-lowest: #0c0f10;
75
+ --md-sys-color-surface-container-low: #191c1e;
76
+ --md-sys-color-surface-container: #1d2022;
77
+ --md-sys-color-surface-container-high: #272a2c;
78
+ --md-sys-color-surface-container-highest: #323537
79
+ }
80
+
81
+ @media (prefers-color-scheme: light) {
82
+ :root {
83
+ --md-sys-color-primary: #006782;
84
+ --md-sys-color-on-primary: #ffffff;
85
+ --md-sys-color-primary-container: #baeaff;
86
+ --md-sys-color-on-primary-container: #001f29;
87
+ --md-sys-color-secondary: #4c616b;
88
+ --md-sys-color-on-secondary: #ffffff;
89
+ --md-sys-color-secondary-container: #cfe6f1;
90
+ --md-sys-color-on-secondary-container: #071e26;
91
+ --md-sys-color-tertiary: #5c5b7e;
92
+ --md-sys-color-on-tertiary: #ffffff;
93
+ --md-sys-color-tertiary-container: #e2dfff;
94
+ --md-sys-color-on-tertiary-container: #181837;
95
+ --md-sys-color-error: #ba1a1a;
96
+ --md-sys-color-on-error: #ffffff;
97
+ --md-sys-color-error-container: #ffdad6;
98
+ --md-sys-color-on-error-container: #410002;
99
+ --md-sys-color-background: #fbfcfe;
100
+ --md-sys-color-on-background: #191c1e;
101
+ --md-sys-color-surface: #fbfcfe;
102
+ --md-sys-color-on-surface: #191c1e;
103
+ --md-sys-color-surface-variant: #dce4e8;
104
+ --md-sys-color-on-surface-variant: #40484c;
105
+ --md-sys-color-outline: #70787d;
106
+ --md-sys-color-outline-variant: #c0c8cc;
107
+ --md-sys-color-shadow: #000000;
108
+ --md-sys-color-scrim: #000000;
109
+ --md-sys-color-inverse-surface: #2e3132;
110
+ --md-sys-color-inverse-on-surface: #eff1f3;
111
+ --md-sys-color-inverse-primary: #60d4fe;
112
+ --md-sys-color-surface-dim: #d8dadc;
113
+ --md-sys-color-surface-bright: #f8f9fb;
114
+ --md-sys-color-surface-container-lowest: #ffffff;
115
+ --md-sys-color-surface-container-low: #f2f4f5;
116
+ --md-sys-color-surface-container: #eceef0;
117
+ --md-sys-color-surface-container-high: #e7e8ea;
118
+ --md-sys-color-surface-container-highest: #e1e3e4
119
+ }
120
+ }
121
+ :root[data-theme="light"] {
122
+ --md-sys-color-primary: #006782;
123
+ --md-sys-color-on-primary: #ffffff;
124
+ --md-sys-color-primary-container: #baeaff;
125
+ --md-sys-color-on-primary-container: #001f29;
126
+ --md-sys-color-secondary: #4c616b;
127
+ --md-sys-color-on-secondary: #ffffff;
128
+ --md-sys-color-secondary-container: #cfe6f1;
129
+ --md-sys-color-on-secondary-container: #071e26;
130
+ --md-sys-color-tertiary: #5c5b7e;
131
+ --md-sys-color-on-tertiary: #ffffff;
132
+ --md-sys-color-tertiary-container: #e2dfff;
133
+ --md-sys-color-on-tertiary-container: #181837;
134
+ --md-sys-color-error: #ba1a1a;
135
+ --md-sys-color-on-error: #ffffff;
136
+ --md-sys-color-error-container: #ffdad6;
137
+ --md-sys-color-on-error-container: #410002;
138
+ --md-sys-color-background: #fbfcfe;
139
+ --md-sys-color-on-background: #191c1e;
140
+ --md-sys-color-surface: #fbfcfe;
141
+ --md-sys-color-on-surface: #191c1e;
142
+ --md-sys-color-surface-variant: #dce4e8;
143
+ --md-sys-color-on-surface-variant: #40484c;
144
+ --md-sys-color-outline: #70787d;
145
+ --md-sys-color-outline-variant: #c0c8cc;
146
+ --md-sys-color-shadow: #000000;
147
+ --md-sys-color-scrim: #000000;
148
+ --md-sys-color-inverse-surface: #2e3132;
149
+ --md-sys-color-inverse-on-surface: #eff1f3;
150
+ --md-sys-color-inverse-primary: #60d4fe;
151
+ --md-sys-color-surface-dim: #d8dadc;
152
+ --md-sys-color-surface-bright: #f8f9fb;
153
+ --md-sys-color-surface-container-lowest: #ffffff;
154
+ --md-sys-color-surface-container-low: #f2f4f5;
155
+ --md-sys-color-surface-container: #eceef0;
156
+ --md-sys-color-surface-container-high: #e7e8ea;
157
+ --md-sys-color-surface-container-highest: #e1e3e4
158
+ }
159
+ </style><link rel="stylesheet" href="../assets/material-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Kvaser CanKing GUI Extensions SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Kvaser CanKing GUI Extensions SDK</a></li><li><a href="../modules/controls.html">controls</a></li><li><a href="controls.useColumnItems.html">useColumnItems</a></li></ul><h1>Function useColumnItems</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Calculate max width from all specified column items as soon as all items have widths values.</p>
160
+ </div><div class="tsd-comment tsd-typography"></div></section><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="useColumnItems" class="tsd-anchor"></a><span class="tsd-kind-call-signature">use<wbr/>Column<wbr/>Items</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">columnItems</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#useColumnItems" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Rest</code><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">columnItems</span>: <span class="tsd-signature-type">ColumnItem</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>All column items to set width for.</p>
161
+ </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><p>The max width, the width to use</p>
162
+ <div class="tsd-comment tsd-typography"></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Kvaser CanKing GUI Extensions SDK</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2024</p></footer><div class="overlay"></div><script>
163
+ try {
164
+ const generateLinkElement = document.querySelector(".tsd-generator a");
165
+ const link = document.createElement("a");
166
+ Object.assign(link, {
167
+ href: "https://github.com/dmnsgn/typedoc-material-theme",
168
+ target: "_blank",
169
+ rel: "noreferrer",
170
+ innerText: "typedoc-material-theme."
171
+ });
172
+ generateLinkElement.insertAdjacentElement("afterend", link);
173
+ generateLinkElement.insertAdjacentText("afterend", " with ");
174
+ } catch (error) {
175
+
176
+ }
177
+ </script></body></html>
package/doc/index.html CHANGED
@@ -156,61 +156,101 @@
156
156
  --md-sys-color-surface-container-high: #e7e8ea;
157
157
  --md-sys-color-surface-container-highest: #e1e3e4
158
158
  }
159
- </style><link rel="stylesheet" href="assets/material-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Kvaser CanKing GUI Extensions SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Kvaser CanKing GUI Extensions SDK</h1></div><div class="tsd-panel tsd-typography"><a id="md:kvaser-canking-gui-extensions-sdk" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Kvaser CanKing GUI Extensions SDK<a href="#md:kvaser-canking-gui-extensions-sdk" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="md:prerequisites" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Prerequisites<a href="#md:prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Before creating a new CanKing GUI Extension project there are some softwares that need to be installed.</p>
160
- <a id="md:must-have" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Must have<a href="#md:must-have" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
159
+ </style><link rel="stylesheet" href="assets/material-style.css"/></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Kvaser CanKing GUI Extensions SDK</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>Kvaser CanKing GUI Extensions SDK</h1></div><div class="tsd-panel tsd-typography"><a id="md:kvaser-canking-gui-extensions-sdk" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Kvaser CanKing GUI Extensions SDK<a href="#md:kvaser-canking-gui-extensions-sdk" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="md:introduction" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Introduction<a href="#md:introduction" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The purpose with this package is to help developers to create user interface extensions for the Kvaser CanKing bus analysis tool.</p>
160
+ <p>Kvaser CanKing is a free of charge, general-purpose CAN and LIN bus analysis software that is compatible with all Kvaser CAN and LIN interfaces and the Kvaser virtual CAN bus. It's available on Windows (x64) and Linux (x64 and ARM).</p>
161
+ <p>There are a lot of functionality already included in the base version of CanKing, but it is also possible to extend the functionality and the user interface by creating extensions.</p>
162
+ <p>An extension is developed as a stand-alone <a href="https://react.dev/" target="_blank" class="external">React</a> web application. The web application will be hosted by an express web server inside CanKing and it will be mounted into the CanKing user interface using a webview element.</p>
163
+ <p>When an extension is mounted into CanKing, then a preload script will run to inject inter-process communication (IPC) functions. These functions will make it possible for the extension to communicate with CanKing to get information and to interact with the CAN/LIN bus.</p>
164
+ <p>The IPC functions are accessible by importing different modules from the @kvaser/canking-api package.</p>
165
+ <p>To get or subscribe on CanKing data there are different React hooks to be used. All these can be found in the hooks module.</p>
166
+ <pre><code>import { useUserSetting, useMeasurementSetup } from '@kvaser/canking-api/hooks';
167
+
168
+ ...
169
+
170
+ const userSettings = useUserSettings();
171
+ const measurementSetup = useMeasurementSetup();
172
+ </code></pre>
173
+ <p>To interact with CanKing there are different functions that can be imported from the ipc module.</p>
174
+ <pre><code>import { sendCanMessage } from '@kvaser/canking-api/ipc';
175
+
176
+ ...
177
+
178
+ sendCanMessage(channelId, frameId, data, flags);
179
+ </code></pre>
180
+ <p>The @kvaser/canking-api package also includes some React components that you can use, e.g. there is a component for selecting channel.</p>
181
+ <pre><code>import { CanChannelSelectControl } from '@kvaser/canking-api/controls';
182
+
183
+ ...
184
+
185
+ function WorkspaceView() {
186
+ const [channelId, setChannelId] = useState('');
187
+ return (
188
+ &lt;CanChannelSelectControl
189
+ channelIdentifier={channelId}
190
+ onChannelIdentifierChange={setChannelId}
191
+ hideSectionControl
192
+ /&gt;
193
+ );
194
+ }
195
+ </code></pre>
196
+ <a id="md:prerequisites" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Prerequisites<a href="#md:prerequisites" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Before creating a new CanKing Extension the following softwares need to be installed.</p>
197
+ <ul>
161
198
  <li>Node.js: <a href="https://nodejs.org/" target="_blank" class="external">https://nodejs.org/</a></li>
162
199
  <li>Kvaser CanKing: <a href="https://kvaser.com/canking/" target="_blank" class="external">https://kvaser.com/canking/</a></li>
163
200
  <li>Kvaser Drivers: <a href="https://resources.kvaser.com/7330130980013/latest/kvaser_drivers_setup.exe" target="_blank" class="external">https://resources.kvaser.com/7330130980013/latest/kvaser_drivers_setup.exe</a></li>
164
201
  </ul>
165
- <a id="md:preferred" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Preferred<a href="#md:preferred" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><ul>
166
- <li>nvm: <a href="https://github.com/coreybutler/nvm-windows/releases" target="_blank" class="external">https://github.com/coreybutler/nvm-windows/releases</a>
167
- <ul>
168
- <li>download latest version from assets</li>
169
- <li>install and do <code>nvm list</code> to display node.js versions</li>
170
- <li>install node.js version 22.9: <code>nvm install 22.9</code></li>
171
- <li>change node.js version to 22.9: <code>nvm use 22.9</code></li>
172
- <li><strong>NOTE:</strong>
202
+ <p>You will also need an IDE (Integrated Development Environment) to edit and debug your code. We recommende that you're using <a href="https://code.visualstudio.com/" target="_blank" class="external">Visual Studio Code</a>.</p>
203
+ <p>With Visual Studio Code you might also want to install these extensions to help you with code formatting and code analysing:</p>
173
204
  <ul>
174
- <li>If nvm keyword can't be found make sure environment path for nvm.exe is set.</li>
175
- <li>CanKing is coded with node version 22.9, so version 22.9 is recommended.</li>
176
- </ul>
177
- </li>
178
- </ul>
179
- </li>
205
+ <li>ESLint (dbaeumer.vscode-eslint)</li>
206
+ <li>Prettier - Code formatter (esbenp.prettier-vscode)</li>
207
+ <li>EditorConfig for VS Code (editorconfig.editorconfig)</li>
180
208
  </ul>
181
- <a id="md:generate-a-new-canking-gui-extension-project" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Generate a new CanKing GUI Extension project<a href="#md:generate-a-new-canking-gui-extension-project" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To create a new CanKing GUI Extension project the @kvaser/canking-api package is needed. The @kvaser/canking-api
182
- package is published to <a href="http://artifact.kvaser.se/artifactory/api/npm/libs-npm" target="_blank" class="external">http://artifact.kvaser.se/artifactory/api/npm/libs-npm</a>.</p>
183
- <p>The @kvaser/canking-api package includes a script that can be used for creating a new CanKing GUI Extension package.
184
- The script is used like this:</p>
185
- <pre><code>npx @kvaser/canking-api &lt;project-name&gt; [options]
186
-
187
- Arguments:
188
- project-name The project name. A new project folder with this name will be created in the current folder.
189
-
190
- Options:
191
- -V, --version output the version number
192
- --view-name &lt;string&gt; workspace view name (default: &quot;&quot;)
193
- --desc &lt;string&gt; project description (default: &quot;A CanKing GUI extension.&quot;)
194
- --author &lt;string&gt; project author (default: &quot;&quot;)
195
- --verbose print additional logs
196
- --force use installed script even if a newer version exists
197
- --show-doc opens the documentation
198
- -h, --help display help for command
209
+ <a id="md:generate-a-new-canking-extension-project" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Generate a new CanKing Extension project<a href="#md:generate-a-new-canking-extension-project" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The simplest way to create a new CanKing Extension project is to use the script that is included in the <a href="https://www.npmjs.com/package/@kvaser/create-canking-extension" target="_blank" class="external">@kvaser/create-canking-extension</a> package. The script is used like this:</p>
210
+ <pre><code>npm create @kvaser/canking-extension@latest
199
211
  </code></pre>
200
- <p>To create a new CanKing workspace view extension run these commands:</p>
201
- <pre><code>npm config set '@kvaser:registry' http://artifact.kvaser.se/artifactory/api/npm/libs-npm
202
- npx @kvaser/canking-api &lt;project-name&gt; --view-name &lt;view-name&gt; --desc &lt;description&gt; --author &lt;author&gt;
212
+ <p>Then follow the prompts.</p>
213
+ <p>You can also directly specify a project name via a command line argument.</p>
214
+ <pre><code>npm create @kvaser/canking-extension@latest my-ck-extension
203
215
  </code></pre>
204
- <p>The first command will point out the correct registry to be used for @kvaser packages and the second command will run the
205
- script to create the project.</p>
206
- <a id="md:develop-a-canking-gui-extension" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Develop a CanKing GUI Extension<a href="#md:develop-a-canking-gui-extension" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To match the CanKing look and feel, it's recommended to use Material UI components when applicable,
216
+ <p>This command will create a new project in a new folder with the same name as the specified project name.
217
+ You can use <code>.</code> for the project name to scaffold your project in the current directory.</p>
218
+ <p>The command above will create a folder structure like this:</p>
219
+ <pre><code>my-ck-extension
220
+ │ .gitignore
221
+ │ .prettierrc
222
+ │ eslint.config.mjs
223
+ │ index.html
224
+ │ package.json
225
+ │ tsconfig.app.json
226
+ │ tsconfig.json
227
+ │ tsconfig.node.json
228
+ │ vite.config.ts
229
+ │
230
+ ├───.vscode
231
+ │ launch.json
232
+ │
233
+ └───src
234
+ │ App.tsx
235
+ │ main.tsx
236
+ │ vite-env.d.ts
237
+ │
238
+ ├───assets
239
+ │ icon.png
240
+ │
241
+ └───WorkspaceView
242
+ index.tsx
243
+ </code></pre>
244
+ <p>The project follows a similar file structure as the one that is created for a <a href="https://vite.dev/" target="_blank" class="external">Vite</a> project created using the react-ts template. There are some extra information added to the package.json file that are needed for CanKing and the src files are modified to be used inside CanKing.</p>
245
+ <p>The my-ck-extension/src/WorkspaceView/index.tsx file is the file that includes the React component that will be mounted into CanKing, so this is the file you should implement to create your extension.</p>
246
+ <a id="md:develop-a-canking-extension" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Develop a CanKing Extension<a href="#md:develop-a-canking-extension" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To match the CanKing look and feel, it's recommended to use Material UI components when applicable,
207
247
  <a href="https://mui.com/material-ui/all-components/" target="_blank" class="external">https://mui.com/material-ui/all-components/</a>.</p>
208
248
  <p>The WorkspaceView React component (src/WorkspaceVew/index.tsx) will be displayed when the extension is loaded into CanKing,
209
249
  so this is the component that should be implemented to implement the extension.</p>
210
250
  <p>To run the extension from command line enter:</p>
211
251
  <pre><code>npm run start
212
252
  </code></pre>
213
- <p>To run the extension using VS Code debugger:</p>
253
+ <p>To run the extension using Visual Studio Code debugger:</p>
214
254
  <ul>
215
255
  <li>Select 'Run and Debug' or press Ctrl+Shift+D</li>
216
256
  <li>Select the configuration named 'Debug'</li>
@@ -219,14 +259,18 @@ so this is the component that should be implemented to implement the extension.<
219
259
  <p>To run a production build of the extension you can enter this command:</p>
220
260
  <pre><code>npm run startpreview
221
261
  </code></pre>
222
- <a id="md:package-and-install-a-canking-gui-extension" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Package and Install a CanKing GUI Extension<a href="#md:package-and-install-a-canking-gui-extension" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To package your extension for distribution you should run this command from the command line:</p>
262
+ <p>If you need more information and help about how to interact with CanKing then you can run this command:</p>
263
+ <pre><code>npx @kvaser/canking-api --help
264
+ </code></pre>
265
+ <p>This will open up a help file in your web browser.</p>
266
+ <a id="md:package-and-install-a-canking-extension" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Package and Install a CanKing Extension<a href="#md:package-and-install-a-canking-extension" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To package your extension for distribution you should run this command from the command line:</p>
223
267
  <pre><code>npm pack
224
268
  </code></pre>
225
269
  <p>This command will create a tarball file in the root folder of your project called:</p>
226
270
  <pre><code>&lt;project-name&gt;-&lt;version&gt;.tgz
227
271
  </code></pre>
228
272
  <p>This tarball can then be installed in CanKing using the head menu 'More'-&gt;'Extensions'-&gt;'Install'.</p>
229
- </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:kvaser-canking-gui-extensions-sdk"><span>Kvaser <wbr/>Can<wbr/>King GUI <wbr/>Extensions SDK</span></a><ul><li><a href="#md:prerequisites"><span>Prerequisites</span></a></li><li><ul><li><a href="#md:must-have"><span>Must have</span></a></li><li><a href="#md:preferred"><span>Preferred</span></a></li></ul></li><li><a href="#md:generate-a-new-canking-gui-extension-project"><span>Generate a new <wbr/>Can<wbr/>King GUI <wbr/>Extension project</span></a></li><li><a href="#md:develop-a-canking-gui-extension"><span>Develop a <wbr/>Can<wbr/>King GUI <wbr/>Extension</span></a></li><li><a href="#md:package-and-install-a-canking-gui-extension"><span>Package and <wbr/>Install a <wbr/>Can<wbr/>King GUI <wbr/>Extension</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Kvaser CanKing GUI Extensions SDK</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2024</p></footer><div class="overlay"></div><script>
273
+ </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:kvaser-canking-gui-extensions-sdk"><span>Kvaser <wbr/>Can<wbr/>King GUI <wbr/>Extensions SDK</span></a><ul><li><a href="#md:introduction"><span>Introduction</span></a></li><li><a href="#md:prerequisites"><span>Prerequisites</span></a></li><li><a href="#md:generate-a-new-canking-extension-project"><span>Generate a new <wbr/>Can<wbr/>King <wbr/>Extension project</span></a></li><li><a href="#md:develop-a-canking-extension"><span>Develop a <wbr/>Can<wbr/>King <wbr/>Extension</span></a></li><li><a href="#md:package-and-install-a-canking-extension"><span>Package and <wbr/>Install a <wbr/>Can<wbr/>King <wbr/>Extension</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>Kvaser CanKing GUI Extensions SDK</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2024</p></footer><div class="overlay"></div><script>
230
274
  try {
231
275
  const generateLinkElement = document.querySelector(".tsd-generator a");
232
276
  const link = document.createElement("a");