npm - @kvaser/canking-api - Versions diffs - 7.2.0 → 7.3.0 - Mend

@kvaser/canking-api 7.2.0 → 7.3.0

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 (862) hide show

package/doc/variables/controls.TabsPanel.html ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>TabsPanel \| Kvaser CanKing GUI Extensions SDK - v7.3.0</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><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><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") \|\| "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Kvaser CanKing GUI Extensions SDK - v7.3.0</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/controls.html">controls</a></li><li><a href="" aria-current="page">TabsPanel</a></li></ul><h1>Variable TabsPanel<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">TabsPanel</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">StyledComponent</span><span class="tsd-signature-symbol"><</span><br/> <span class="tsd-signature-type">MUIStyledCommonProps</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">Theme</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-type">DetailedHTMLProps</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLAttributes</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">HTMLDivElement</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">HTMLDivElement</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">{}</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>A TabsPanel UI control.</p>
2	+ </div><div class="tsd-comment tsd-typography"></div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>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">Kvaser CanKing GUI Extensions SDK - v7.3.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2025</p></footer><div class="overlay"></div></body></html>

package/doc/variables/models.defaultUserSettings.html CHANGED Viewed

@@ -1,2 +1,2 @@
-<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>defaultUserSettings | Kvaser CanKing GUI Extensions SDK - v7.2.0</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><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><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></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"><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 - v7.2.0</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/models.html">models</a></li><li><a href="models.defaultUserSettings.html">defaultUserSettings</a></li></ul><h1>Variable defaultUserSettings<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">defaultUserSettings</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/models.IUserSettings.html" class="tsd-signature-type tsd-kind-interface">IUserSettings</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Default user setting values.</p>
-</div><div class="tsd-comment tsd-typography"></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></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Kvaser CanKing GUI Extensions SDK - v7.2.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2025</p></footer><div class="overlay"></div></body></html>
+<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>defaultUserSettings | Kvaser CanKing GUI Extensions SDK - v7.3.0</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><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><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Kvaser CanKing GUI Extensions SDK - v7.3.0</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/models.html">models</a></li><li><a href="" aria-current="page">defaultUserSettings</a></li></ul><h1>Variable defaultUserSettings<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">defaultUserSettings</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/models.IUserSettings.html" class="tsd-signature-type tsd-kind-interface">IUserSettings</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>Default user setting values.</p>
+</div><div class="tsd-comment tsd-typography"></div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>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">Kvaser CanKing GUI Extensions SDK - v7.3.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p>Copyright KVASER AB 2025</p></footer><div class="overlay"></div></body></html>

package/doc_md/README.md ADDED Viewed

@@ -0,0 +1,189 @@
+**Kvaser CanKing GUI Extensions SDK v7.3.0**
+***
+# Kvaser CanKing GUI Extensions SDK
+## Introduction
+The purpose with this package is to help developers to create user interface extensions for the Kvaser CanKing bus analysis tool.
+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).
+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.
+An extension is developed as a stand-alone [React](<https://react.dev/>) 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.
+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.
+The IPC functions are accessible by importing different modules from the @kvaser/canking-api package.
+To get or subscribe on CanKing data there are different React hooks to be used. All these can be found in the hooks module.
+```tsx
+import { useUserSetting, useMeasurementSetup } from '@kvaser/canking-api/hooks';
+...
+const userSettings = useUserSettings();
+const measurementSetup = useMeasurementSetup();
+```
+To interact with CanKing there are different functions that can be imported from the ipc module.
+```tsx
+import { sendCanMessage } from '@kvaser/canking-api/ipc';
+...
+sendCanMessage(channelId, frameId, data, flags);
+```
+The @kvaser/canking-api package also includes some React components that you can use, e.g. there is a component for selecting
+channel.
+```tsx
+import { CanChannelSelectControl } from '@kvaser/canking-api/controls';
+...
+function WorkspaceView() {
+  const [channelId, setChannelId] = useState('');
+  return (
+    <CanChannelSelectControl
+      channelIdentifier={channelId}
+      onChannelIdentifierChange={setChannelId}
+      hideSectionControl
+    />
+  );
+}
+```
+## Prerequisites
+Before creating a new CanKing Extension the following softwares need to be installed.
+- Node.js: <https://nodejs.org/>
+- Kvaser CanKing: <https://kvaser.com/canking/>
+- Kvaser Drivers: <https://resources.kvaser.com/7330130980013/latest/kvaser_drivers_setup.exe>
+You will also need an IDE (Integrated Development Environment) to edit and debug your code. We recommend that you're using
+[Visual Studio Code](https://code.visualstudio.com/).
+With Visual Studio Code you might also want to install these extensions to help you with code formatting and code analysing:
+- [ESLint (dbaeumer.vscode-eslint)](<https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>)
+- [Prettier - Code formatter (esbenp.prettier-vscode)](<https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>)
+- [EditorConfig for VS Code (editorconfig.editorconfig)](<https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig>)
+## Generate a new CanKing Extension project
+The simplest way to create a new CanKing Extension project is to use the script that is included in the
+[@kvaser/create-canking-extension](<https://www.npmjs.com/package/@kvaser/create-canking-extension>) package. The script is
+used like this:
+```bash
+npm create @kvaser/canking-extension@latest
+```
+Then follow the prompts.
+You can also specify a project name via a command line argument.
+```bash
+npm create @kvaser/canking-extension@latest my-ck-extension
+```
+This command will create a new project in a new folder with the same name as the specified project name (my-ck-extension).
+You can use `.` for the project name to scaffold your project in the current directory.
+The command above will create a folder structure like this:
+```text
+my-ck-extension
+│   .gitignore
+│   .prettierrc
+│   eslint.config.mjs
+│   index.html
+│   package.json
+│   tsconfig.app.json
+│   tsconfig.json
+│   tsconfig.node.json
+│   vite.config.ts
+│
+├───.vscode
+│       launch.json
+│
+└───src
+    │   App.tsx
+    │   main.tsx
+    │   vite-env.d.ts
+    │
+    ├───assets
+    │       icon.png
+    │
+    └───WorkspaceView
+            index.tsx
+```
+The project follows a similar file structure as the one that is created for a [Vite](<https://vite.dev/>) 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.
+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.
+## Develop a CanKing Extension
+To match the CanKing look and feel, it's recommended to use Material UI components when applicable,
+<https://mui.com/material-ui/all-components/>.
+The WorkspaceView React component (src/WorkspaceVew/index.tsx) will be displayed when the extension is loaded into CanKing,
+so this is the component that should be implemented to implement the extension.
+To run the extension from command line enter:
+```bash
+npm run start
+```
+To run the extension using Visual Studio Code debugger:
+- Select 'Run and Debug' or press Ctrl+Shift+D
+- Select the configuration named 'Debug'
+- Click on 'Start Debugging' or press F5
+To run a production build of the extension you can enter this command:
+```bash
+npm run startpreview
+```
+If you need more information and help about how to interact with CanKing then you can run this command:
+```bash
+npx @kvaser/canking-api --help
+```
+This will open up a help file in your web browser.
+## Package and Install a CanKing Extension
+To package your extension for distribution you should run this command from the command line:
+```bash
+npm pack
+```
+This command will create a tarball file in the root folder of your project called:
+```text
+<project-name>-<version>.tgz
+```
+This tarball can then be installed in CanKing using the head menu 'More'->'Extensions'->'Install'.

package/doc_md/assets/favicon.png ADDED Viewed

Binary file

package/doc_md/controls/README.md ADDED Viewed

@@ -0,0 +1,156 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../modules.md) / controls
+# controls
+This module includes UI controls implemented as React components.
+To be able to use these controls the CanKingDataProvider component must be present in the
+component tree above your component. Normally the CanKingDataProvider is added
+at the root of the component tree.
+## Example
+```tsx
+import { useSearchParams } from 'react-router-dom';
+import { useProjectData } from '@kvaser/canking-api/canking';
+import { CanChannelSelectControl, FillBox } from '@kvaser/canking-api/controls';
+// If any data should be stored in the project file then add it to this interface
+interface IProjectViewData {
+  // This is an example showing how to store the selected channel id to the project file
+  channelId: string;
+}
+// Define any default values for the project data that will be used when the component is created
+const defaultProjectViewData: IProjectViewData = {
+  channelId: '',
+};
+function WorkspaceView() {
+  // Get this view's unique id from search params
+  const [searchParams] = useSearchParams();
+  const idString = searchParams.get('id');
+  const id = idString !== null ? Number.parseInt(idString, 10) : -1;
+  // Use the useProjectData hook to serialize/deserialize your view data to the project
+  const [projectData, setProjectData] = useProjectData<IProjectViewData>(id, defaultProjectViewData);
+  // A callback that will get the new selected channel id and save it to the project data
+  const onChannelIdentifierChange = (channelId: string) => {
+    const data = { ...projectData };
+    data.channelId = channelId;
+    setProjectData(data);
+  };
+  return (
+    <FillBox component="form">
+      <div>Add your elements here!</div>
+      <div>This is an example how to use the CanChannelSelectControl:</div>
+      <CanChannelSelectControl
+        channelIdentifier={projectData.channelId}
+        onChannelIdentifierChange={onChannelIdentifierChange}
+        hideSectionControl
+      />
+    </FillBox>
+  );
+}
+export default WorkspaceView;
+```
+## Interfaces
+- [ButtonGroupProps](interfaces/ButtonGroupProps.md)
+- [ButtonProps](interfaces/ButtonProps.md)
+- [CanChannelSelectControlProps](interfaces/CanChannelSelectControlProps.md)
+- [CanIdentifierControlProps](interfaces/CanIdentifierControlProps.md)
+- [CanIdentifierFrameControlProps](interfaces/CanIdentifierFrameControlProps.md)
+- [CanIdentifierGeneratorControlProps](interfaces/CanIdentifierGeneratorControlProps.md)
+- [CanIdentifierGeneratorSettingsControlProps](interfaces/CanIdentifierGeneratorSettingsControlProps.md)
+- [CheckboxControlProps](interfaces/CheckboxControlProps.md)
+- [ContextMenuProps](interfaces/ContextMenuProps.md)
+- [DropdownButtonChildrenProps](interfaces/DropdownButtonChildrenProps.md)
+- [DropdownButtonProps](interfaces/DropdownButtonProps.md)
+- [DropdownButtonTextItemsProps](interfaces/DropdownButtonTextItemsProps.md)
+- [DropdownPanelProps](interfaces/DropdownPanelProps.md)
+- [FormControlRowProps](interfaces/FormControlRowProps.md)
+- [ILocalizedStrings](interfaces/ILocalizedStrings.md)
+- [IMessageDatabase](interfaces/IMessageDatabase.md)
+- [InlineEditorProps](interfaces/InlineEditorProps.md)
+- [LabelProps](interfaces/LabelProps.md)
+- [LinChannelSelectControlProps](interfaces/LinChannelSelectControlProps.md)
+- [LinIdentifierControlProps](interfaces/LinIdentifierControlProps.md)
+- [LinIdentifierFrameControlProps](interfaces/LinIdentifierFrameControlProps.md)
+- [LinIdentifierGeneratorControlProps](interfaces/LinIdentifierGeneratorControlProps.md)
+- [LinIdentifierGeneratorSettingsControlProps](interfaces/LinIdentifierGeneratorSettingsControlProps.md)
+- [NumberRangeControlProps](interfaces/NumberRangeControlProps.md)
+- [RadioControlProps](interfaces/RadioControlProps.md)
+- [RadioGroupControlProps](interfaces/RadioGroupControlProps.md)
+- [SectionControlProps](interfaces/SectionControlProps.md)
+- [SelectControlProps](interfaces/SelectControlProps.md)
+- [SelectMessageDialogProps](interfaces/SelectMessageDialogProps.md)
+- [SelectSignalDialogProps](interfaces/SelectSignalDialogProps.md)
+- [TableColumn](interfaces/TableColumn.md)
+- [TableControlProps](interfaces/TableControlProps.md)
+- [TextControlProps](interfaces/TextControlProps.md)
+- [ToggleButtonGroupProps](interfaces/ToggleButtonGroupProps.md)
+- [ToggleButtonProps](interfaces/ToggleButtonProps.md)
+- [ToolbarControlProps](interfaces/ToolbarControlProps.md)
+- [toolbarItem](interfaces/toolbarItem.md)
+- [ValidateableTextControlProps](interfaces/ValidateableTextControlProps.md)
+## Type Aliases
+- [canIdentifierGeneratorType](type-aliases/canIdentifierGeneratorType.md)
+- [canIdentifierType](type-aliases/canIdentifierType.md)
+- [ContextMenuOption](type-aliases/ContextMenuOption.md)
+- [linIdentifierGeneratorType](type-aliases/linIdentifierGeneratorType.md)
+- [SelectOption](type-aliases/SelectOption.md)
+- [StringsMap](type-aliases/StringsMap.md)
+## Variables
+- [FillBox](variables/FillBox.md)
+- [OneLineButton](variables/OneLineButton.md)
+- [SizedBox](variables/SizedBox.md)
+- [TabsPanel](variables/TabsPanel.md)
+## Functions
+- [CanChannelSelectControl](functions/CanChannelSelectControl.md)
+- [CanIdentifierControl](functions/CanIdentifierControl.md)
+- [CanIdentifierFrameControl](functions/CanIdentifierFrameControl.md)
+- [CanIdentifierGeneratorControl](functions/CanIdentifierGeneratorControl.md)
+- [CanIdentifierGeneratorSettingsControl](functions/CanIdentifierGeneratorSettingsControl.md)
+- [CanKingDataProvider](functions/CanKingDataProvider.md)
+- [CheckboxControl](functions/CheckboxControl.md)
+- [ColumnItemControl](functions/ColumnItemControl.md)
+- [ContextMenu](functions/ContextMenu.md)
+- [DropdownButton](functions/DropdownButton.md)
+- [DropdownButtonTextItems](functions/DropdownButtonTextItems.md)
+- [DropdownPanel](functions/DropdownPanel.md)
+- [FormControlRow](functions/FormControlRow.md)
+- [InlineEditor](functions/InlineEditor.md)
+- [LinChannelSelectControl](functions/LinChannelSelectControl.md)
+- [LinIdentifierControl](functions/LinIdentifierControl.md)
+- [LinIdentifierFrameControl](functions/LinIdentifierFrameControl.md)
+- [LinIdentifierGeneratorControl](functions/LinIdentifierGeneratorControl.md)
+- [LinIdentifierGeneratorSettingsControl](functions/LinIdentifierGeneratorSettingsControl.md)
+- [NumberRangeControl](functions/NumberRangeControl.md)
+- [RadioControl](functions/RadioControl.md)
+- [RadioGroupControl](functions/RadioGroupControl.md)
+- [SectionControl](functions/SectionControl.md)
+- [SelectControl](functions/SelectControl.md)
+- [SelectMessageDialog](functions/SelectMessageDialog.md)
+- [SelectSignalDialog](functions/SelectSignalDialog.md)
+- [TableControl](functions/TableControl.md)
+- [TextControl](functions/TextControl.md)
+- [ToolbarControl](functions/ToolbarControl.md)
+- [useColumnItem](functions/useColumnItem.md)
+- [useColumnItems](functions/useColumnItems.md)
+- [useMessageDatabases](functions/useMessageDatabases.md)
+- [ValidateableTextControl](functions/ValidateableTextControl.md)

package/doc_md/controls/functions/CanChannelSelectControl.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanChannelSelectControl
+# Function: CanChannelSelectControl()
+> **CanChannelSelectControl**(`props`): `Element`
+Creates an UI control for selecting a CAN channel from the current measurement setup.
+## Parameters
+### props
+[`CanChannelSelectControlProps`](../interfaces/CanChannelSelectControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CanChannelSelectControl React component.

package/doc_md/controls/functions/CanIdentifierControl.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanIdentifierControl
+# Function: CanIdentifierControl()
+> **CanIdentifierControl**(`props`): `Element`
+Creates an UI control for editing a CAN identifier.
+## Parameters
+### props
+[`CanIdentifierControlProps`](../interfaces/CanIdentifierControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CanIdentifierControl React component.

package/doc_md/controls/functions/CanIdentifierFrameControl.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanIdentifierFrameControl
+# Function: CanIdentifierFrameControl()
+> **CanIdentifierFrameControl**(`props`): `Element`
+Creates an UI control for editing a CAN identifier using a Frame as source.
+## Parameters
+### props
+[`CanIdentifierFrameControlProps`](../interfaces/CanIdentifierFrameControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CanIdentifierFrameControl React component.

package/doc_md/controls/functions/CanIdentifierGeneratorControl.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanIdentifierGeneratorControl
+# Function: CanIdentifierGeneratorControl()
+> **CanIdentifierGeneratorControl**(`props`): `Element`
+Creates an UI control for editing CAN identifier(s) used by a message generator.
+## Parameters
+### props
+[`CanIdentifierGeneratorControlProps`](../interfaces/CanIdentifierGeneratorControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CanIdentifierGeneratorControl React component.

package/doc_md/controls/functions/CanIdentifierGeneratorSettingsControl.md ADDED Viewed

@@ -0,0 +1,26 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanIdentifierGeneratorSettingsControl
+# Function: CanIdentifierGeneratorSettingsControl()
+> **CanIdentifierGeneratorSettingsControl**(`props`): `Element`
+Creates an UI control for editing CAN identifier(s) used by a message generator
+using a PeriodicTransmissionSettings as source.
+## Parameters
+### props
+[`CanIdentifierGeneratorSettingsControlProps`](../interfaces/CanIdentifierGeneratorSettingsControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CanIdentifierGeneratorSettingsControl React component.

package/doc_md/controls/functions/CanKingDataProvider.md ADDED Viewed

@@ -0,0 +1,47 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CanKingDataProvider
+# Function: CanKingDataProvider()
+> **CanKingDataProvider**(`props`): `Element`
+Creates a data provider to access CanKing data.
+The CanKingDataProvider component is needed to be at the root of the component tree to
+make it possible to use the CanKing UI Controls.
+## Parameters
+### props
+Component properties.
+#### children?
+`ReactNode` = `undefined`
+#### initialUserSettings?
+[`IUserSettings`](../../models/interfaces/IUserSettings.md) = `undefined`
+## Returns
+`Element`
+The CanKingDataProvider React component.
+## Example
+```tsx
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <CanKingDataProvider>
+      <App />
+    </CanKingDataProvider>
+  </React.StrictMode>,
+);
+```

package/doc_md/controls/functions/CheckboxControl.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / CheckboxControl
+# Function: CheckboxControl()
+> **CheckboxControl**(`props`): `Element`
+Creates a checkbox UI control.
+## Parameters
+### props
+[`CheckboxControlProps`](../interfaces/CheckboxControlProps.md)
+Component properties.
+## Returns
+`Element`
+The CheckboxControl React component.

package/doc_md/controls/functions/ColumnItemControl.md ADDED Viewed

@@ -0,0 +1,21 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / ColumnItemControl
+# Function: ColumnItemControl()
+> **ColumnItemControl**(`__namedParameters`): `Element`
+A react component to be used when different components should share the same width.
+## Parameters
+### \_\_namedParameters
+`ColumnItemControlProps`
+## Returns
+`Element`

package/doc_md/controls/functions/ContextMenu.md ADDED Viewed

@@ -0,0 +1,25 @@
+[**Kvaser CanKing GUI Extensions SDK v7.3.0**](../../README.md)
+***
+[Kvaser CanKing GUI Extensions SDK](../../modules.md) / [controls](../README.md) / ContextMenu
+# Function: ContextMenu()
+> **ContextMenu**(`props`): `Element`
+Creates a context menu UI control.
+## Parameters
+### props
+[`ContextMenuProps`](../interfaces/ContextMenuProps.md)
+Component properties.
+## Returns
+`Element`
+The ContextMenu React component.