signalk-server
Version:
An implementation of a [Signal K](http://signalk.org) server for boats.
33 lines (29 loc) • 14.1 kB
HTML
<html class="default" lang="en" data-base="../../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Custom Renderers for the Data Browser | Signal K</title><meta name="description" content="Documentation for Signal K"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/style.css?cache=1767726585343"/><link rel="stylesheet" href="../../assets/highlight.css?cache=1767726585343"/><script defer src="../../assets/main.js?cache=1767726585343"></script><script async src="../../assets/icons.js?cache=1767726585343" id="tsd-icons-script"></script><script async src="../../assets/search.js?cache=1767726585343" id="tsd-search-script"></script><script async src="../../assets/navigation.js?cache=1767726585343" id="tsd-nav-script"></script><script async src="../../assets/hierarchy.js?cache=1767726585343" id="tsd-hierarchy-script"></script><link rel="stylesheet" href="../../assets/theme.css"/></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"><img src="../../assets/logo.svg" alt="Signal K"/></a><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><span class="visible@s">Search</span></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><div id="tsd-toolbar-links"><a href="https://discord.gg/uuZrwz4dCS" target="_blank" rel="noopener" class="toolbar-icon visible@s" aria-label="Discord"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"></path></svg></a><a href="https://github.com/SignalK/signalk-server" target="_blank" rel="noopener" class="toolbar-icon visible@s" aria-label="Discord"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><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></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="../../Developing.html">Developing</a></li><li><a href="../Plugins.html">Plugins</a></li><li><a href="" aria-current="page">Custom Renderers for the Data Browser</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="custom-renderers" class="tsd-anchor-link">Custom Renderers<a href="#custom-renderers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>Signalk's Data Browser provides an easily navigated snapshot of the state of your Signalk system. Some paths like <code>navigation.gnss.satellitesInView</code> however are data intensive and difficult to make much sense out of in raw JSON form.</p>
<p>As of Signalk V 2.17.0, you'll notice that the path appears in the Data Browser as an easy to understand graphic:</p>
<img width="751" height="236" alt="Screenshot 2025-12-15 at 1 56 08 PM" src="https://github.com/user-attachments/assets/2514d3f7-9b6a-4f50-a6cf-d5e8868199a4" />
<p>This is a Custom Renderer. The code for it is embedded in the DataBrowser package. See: <a href="https://github.com/SignalK/signalk-server/blob/master/packages/server-admin-ui/src/views/DataBrowser/ValueRenderers.js">ValueRenderer.js</a>.</p>
<p>As of Signalk V 2.19.0, there are additional embedded Custom Renderers for Notifications, Attitude, Direction, Meters and Large Arrays.</p>
<p>Also as V 2.19.0, developers can create their own renderers and associate them with the path for display in the Data Browser or in any React App.</p>
<p>You can add renderers for existing paths, override existing hard-coded renderers, and create novel renderers for any novel paths that your plugin creates.</p>
<h2 id="creating-a-custom-renderer" class="tsd-anchor-link">Creating a Custom Renderer<a href="#creating-a-custom-renderer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>A Custom Renderer is any React Component that takes <code>value</code>, at a minimum, as an argument and renders that value in HTML.</p>
<p>Say, for example, you wanted to display a value in bold. You'd create a simple BoldRenderer that would look something like:</p>
<pre><code><span class="hl-1">const</span><span class="hl-0"> </span><span class="hl-8">BoldRenderer</span><span class="hl-0"> </span><span class="hl-1">=</span><span class="hl-0"> ({ </span><span class="hl-5">value</span><span class="hl-0"> }) </span><span class="hl-1">=></span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-1">return</span><span class="hl-0"> <</span><span class="hl-5">div</span><span class="hl-0"> </span><span class="hl-5">className</span><span class="hl-0">=</span><span class="hl-4">"text-primary"</span><span class="hl-0">><</span><span class="hl-5">b</span><span class="hl-0">>value</span><span class="hl-1"><</span><span class="hl-4">/b></</span><span class="hl-1">div</span><span class="hl-1">></span><span class="hl-0">;</span><br/><span class="hl-0">}</span>
</code><button>Copy</button></pre>
<p>There are more interesting examples in the ValueRenderer.js file.</p>
<h2 id="making-your-renderer-available-at-runtime" class="tsd-anchor-link">Making Your Renderer Available at Runtime<a href="#making-your-renderer-available-at-runtime" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
<li>Create a plugin</li>
<li>Add your Component in a separate file (usually under [plugin dir]/src/component)</li>
<li>Add webpack includes and scripts to your package.json</li>
<li>Add keyword "signalk-node-server-addon" to your package.json</li>
<li>Create a webpack.config.js (see any Plugin with their own configuration component) file that exports the renderer:</li>
</ul>
<pre><code><span class="hl-0"> </span><span class="hl-5">plugins</span><span class="hl-0">: [</span><br/><span class="hl-0"> </span><span class="hl-1">new</span><span class="hl-0"> </span><span class="hl-8">ModuleFederationPlugin</span><span class="hl-0">({</span><br/><span class="hl-0"> name: </span><span class="hl-4">"Sample renderer"</span><span class="hl-0">,</span><br/><span class="hl-0"> library: { type: </span><span class="hl-4">"var"</span><span class="hl-0">, name: packageJson.name.</span><span class="hl-8">replace</span><span class="hl-0">(</span><span class="hl-4">/</span><span class="hl-2">[-@/]</span><span class="hl-4">/</span><span class="hl-1">g</span><span class="hl-0">, </span><span class="hl-4">"_"</span><span class="hl-0">) },</span><br/><span class="hl-0"> filename: </span><span class="hl-4">"remoteEntry.js"</span><span class="hl-0">,</span><br/><span class="hl-0"> exposes: {</span><br/><span class="hl-0"> </span><span class="hl-4">"SampleRenderer"</span><span class="hl-0">: </span><span class="hl-4">"./src/components/SampleRenderer"</span><span class="hl-0">,</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> shared: [{ react: { singleton: </span><span class="hl-2">false</span><span class="hl-0">, strictVersion: </span><span class="hl-2">true</span><span class="hl-0"> } }],</span><br/><span class="hl-0"> }),</span><br/><span class="hl-1">...</span>
</code><button>Copy</button></pre>
<ul>
<li>Build your plugin (<code>npm run build</code>)</li>
</ul>
<h2 id="use-your-renderer" class="tsd-anchor-link">Use Your Renderer<a href="#use-your-renderer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To use the renderer, users need to assign the <code>renderer</code> property to the path's meta.</p>
<p>Example (for a renderer in a federated module):</p>
<pre><code><span class="hl-0"> </span><span class="hl-4">"context"</span><span class="hl-0">: </span><span class="hl-4">"vessels.self"</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-4">"updates"</span><span class="hl-0">: [</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">"meta"</span><span class="hl-0">: [</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">"path"</span><span class="hl-0">: </span><span class="hl-4">"sample.value"</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-4">"value"</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-4">"renderer"</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-4">"module"</span><span class="hl-0">: </span><span class="hl-4">"renderer-plugin"</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-4">"name"</span><span class="hl-0">: </span><span class="hl-4">"SampleRenderer"</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-4">"options"</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-4">"option-1"</span><span class="hl-0">: </span><span class="hl-4">"optional-value-1"</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> },</span><br/><span class="hl-1">...</span>
</code><button>Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-accordion tsd-page-navigation"><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>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#creating-a-custom-renderer"><span>Creating a <wbr/>Custom <wbr/>Renderer</span></a><a href="#making-your-renderer-available-at-runtime"><span>Making <wbr/>Your <wbr/>Renderer <wbr/>Available at <wbr/>Runtime</span></a><a href="#use-your-renderer"><span>Use <wbr/>Your <wbr/>Renderer</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../../modules.html">Signal K</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>