feature: Embed external HTML pages (#203)

Author: cmotelet

README.md

@@ -3,7 +3,7 @@ Signal K Instrument Panel
 Instrument panel implemented as a grid with draggable & resizable components. Components are added dynamically eg.
 when the panel receives data it hasn't seen before a new cell is added to the grid.
 
-![main-page](public/help/main-page.png)
+![instrumentpanel-demo](instrumentpanel-demo.gif)
 
 Online demo: [http://demo.signalk.org/@signalk/instrumentpanel](http://demo.signalk.org/@signalk/instrumentpanel)  
 InstrumentPanel help: [http://demo.signalk.org/@signalk/instrumentpanel#help](http://demo.signalk.org/@signalk/instrumentpanel#help)  

instrumentpanel-demo.gif

@@ -51,6 +51,7 @@ ___
                 - [2.3.1.5.2 Compass Widget](#2_3_1_5_2)  
                 - [2.3.1.5.3 Windmeter Widget](#2_3_1_5_3)  
                 - [2.3.1.5.4 Digital DateTime Widget](#2_3_1_5_4)  
+                - [2.3.1.5.5 Iframe Widget](#2_3_1_5_5)  
             - [2.3.1.6 Widget managed paths](#2_3_1_6)  
             - [2.3.1.7 Alarms Settings](#2_3_1_7)  
             - [2.3.1.8 Add or Delete Pages](#2_3_1_8)  
@@ -87,7 +88,7 @@ The cells are grouped into three columns:
 - everything else (electrical, propulsion etc)
 
 >
->![demo](./help/main-page.png#maxwidth)  
+>![main-page](./help/main-page2.png#maxwidth)  
 >
 <a id="0_help"></a>
 When the help page is displayed all buttons are disabled.  
@@ -393,7 +394,7 @@ Changes there take effect after server restart.
 Using an editor that validates the format is a great help !  
 
 For more information on zones see [the Signal K Specification](https://signalk.org/specification/1.5.0/doc/data_model_metadata.html#metadata-for-a-data-value)  
-and [Server FAQ](https://github.com/SignalK/signalk-server/wiki/FAQ:-Frequently-Asked-Questions#how-to-add-missing-units-in-instrumentpanel)  
+and [Server FAQ](https://github.com/SignalK/signalk-server/wiki/FAQ:-Frequently-Asked-Questions#how-to-add-missing-units-and-static-data)  
 
 <a id="2_3_1_5_2"></a>
 **2.3.1.5.2. Compass Widget** [Back to up menu](#2_3_1_5)  
@@ -426,6 +427,123 @@ In timezone list, **DST** means Daylight Saving Time and displays time automatic
 >![settings-digitaldatetime](./help/widget-settings-digitaldatetime.png#maxwidth)  
 >
   
+<a id="2_3_1_5_5"></a>
+**2.3.1.5.5. Iframe Widget:** [Back to up menu](#2_3_1_5)  
+___
+This widget can embed an external HTML page like Grafana, Signal K Auto-pilot,...  
+>
+>![widget-iframe-double](./help/widget-iframe-double.png#maxwidth)  
+>
+The configuration is manual and must be done only once on the Signal K server.  
+- Edit the `~/.signalk/baseDeltas.json` file on your Signal K server.  
+You can also look at this 
+[Server FAQ](https://github.com/SignalK/signalk-server/wiki/FAQ:-Frequently-Asked-Questions#if-you-have-a-signalkbasedeltasjson-file) 
+ on the format of this file.  
+- Locate the `updates/value` section:  
+```
+[
+  {
+    "context": "vessels.self",
+    "updates": [
+      {
+        "values": [
+```
+- Insert the bloc below to set the URL parameters  
+```
+{
+  "path": "external.iframe.XXXXX",
+  "value": {
+    "src": "",
+    "themeKey": "", // optional
+    "darkValue": "", // optional
+    "lightValue": "" // optional
+  }
+}
+```
+- Fill the value with the data of the HTML page you want to expose in the widget.  
+See the "Grafana example" below for details of the optional parameters and check the help
+ of the software that produces the URL you want to embed in the widget
+ to see if it supports dark mode via the URL parameters.  
+- Locate the `updates/meta` section  
+```
+  {
+    "context": "vessels.self",
+    "updates": [
+      {
+        "meta": [
+```
+- Insert the block below to set the display name  
+```
+{
+  "path": "external.iframe.XXXXX",
+  "value": {
+    "displayName": "my external page"
+  }
+}
+```
+- Fill the path value with the same value as in the `updates/value` section used above  
+- Fill the displayName key with a value of your choice  
+- Double check your json file with a json validator (if something wrong in your json file, your server will exclude the entire file)
+- Restart your Signal K server  
+- Launch InstrumentPanel  
+- Go in settings mode ![settings](./help/settings-icon.png)  
+- Locate the new widget and select `Show on grid`  
+>
+>![settings-iframe](./help/widget-settings-iframe.png#maxwidth)  
+>
+- Return in main view ![view](./help/view-icon.png)  
+- Unlock the grid ![lock](./help/button-lock.png) to adjust the widget size and position  
+  
+**Grafana example:**  
+- Edit you **grafana.ini**  
+- Enable embedding query by `allow_embedding = true`  
+- Optionally enable anonymous mode in section `[auth.anonymous]` to avoid authentication in the widget  
+- Restart your Grafana server  
+- Generate in Grafana GUI the iframe URL to embed in widget  
+>
+>![grafana-share](./help/grafana-share.png#maxwidth)  
+>
+>
+>![grafana-embed](./help/grafana-embed.png#maxwidth)  
+>
+- Fill the src key with value generated in Grafana GUI, keep only src value **without** iframe, width, height, frameborder.  
+- To follow the dark mode fill the key themeKey, darkValue and lightValue to inform Grafana when InstrumentPanel switch in dark mode.  
+Like this, the URL will be updated by adding at the end `&theme=dark` for dark mode and `&theme=light` for light mode.  
+```
+{
+  "path": "external.iframe.grafana",
+  "value": {
+    "src": "http://barco.local:4000/d-solo/7v5TG3Wnk/demo-dashboard?orgId=1&refresh=10s&panelId=2",
+    "themeKey": "theme",
+    "darkValue": "dark",
+    "lightValue": "light"
+  }
+}
+```
+- The result in the Iframe widget
+>
+>![widget-iframe](./help/widget-iframe.png#maxwidth)  
+>
+  
+**Signal K auto-pilot example:**  
+```
+updates/value section
+{
+  "path": "external.iframe.autopilot",
+  "value": {
+    "src": "http://my-signalk.local:3000/@signalk/signalk-autopilot"
+  }
+}
+...
+updates/meta section
+{
+  "path": "external.iframe.autopilot",
+  "value": {
+    "displayName": "autopilot"
+  }
+}
+```
+  
 <a id="2_3_1_6"></a>
 **2.3.1.6. Widget managed paths:** [Back to up menu](#2_3_1)  
 ___

lib/help/help.md

@@ -23,6 +23,10 @@ import Debug from 'debug';
 const debug = Debug('instrumentpanel:streambundle')
 import {Bus} from 'baconjs';
 
+import {
+  CS_BY_SKPATH
+} from './ui/settings/constants'
+
 function getSourceId(source) {
   if (!source) {
     return 'no_source';
@@ -70,7 +74,7 @@ StreamBundle.prototype.handleDelta = function(delta, instrumentPanel) {
           that.push(sourceId, pathValue);
         }
         try {
-          if ((pathValue.path === 'environment.mode') && instrumentPanel.isColorSchemeSetBySKPATH()) {
+          if ((pathValue.path === 'environment.mode') && instrumentPanel.colorSchemeSetBy === CS_BY_SKPATH) {
             const nightOn = pathValue.value.toString() === 'night';
             if (instrumentPanel.getDarkMode() !== nightOn) {
               instrumentPanel.setDarkMode(! instrumentPanel.getDarkMode());

lib/streambundle.js

@@ -33,6 +33,7 @@ import Digitaldatetime, {getIndexFromDateFormatLabel, getDateFormatLabels} from
 import Attitude from './widgets/attitude';
 import Notification from './widgets/notification';
 import Specifictext from './widgets/specifictext';
+import Iframe from './widgets/iframe';
 import {
   defaultLayoutName,
   CS_LIGHT,
@@ -60,7 +61,8 @@ var widgetModules = [
   Digitaldatetime,
   Attitude,
   Notification,
-  Specifictext
+  Specifictext,
+  Iframe
 ];
 
 var defaultNotificationColors = {
@@ -131,10 +133,7 @@ export default function InstrumentPanel(streamBundle) {
   this.preferredUnits = {};
   this.layoutName = defaultLayoutName;
   this.colorSchemeTool = null;
-  this.colorScheme = {
-    colorSchemeCurrent: CS_LIGHT,
-    colorSchemeSetBy: CS_BY_MAINBAR
-  }
+  this.colorSchemeSetBy = CS_BY_MAINBAR;
   this.widgetActiveMode = WA_BASE_DATA;
   this.signalkServer; // undefined if no signalkServer in URL
   this.loginStatus = {};
@@ -714,32 +713,15 @@ InstrumentPanel.prototype.getPages = function() {
 }
 
 InstrumentPanel.prototype.getDarkMode = function() {
-  return (this.colorScheme.colorSchemeCurrent === CS_DARK);
+  return (this.colorSchemeTool.scheme === CS_DARK);
 }
 
 InstrumentPanel.prototype.setDarkMode = function(darkModeOn) {
   this.colorSchemeTool.scheme = (darkModeOn) ? CS_DARK : CS_LIGHT;
-  this.colorScheme.colorSchemeCurrent = this.colorSchemeTool.scheme;
-}
-
-InstrumentPanel.prototype.getColorSchemeCurrent = function() {
-  return this.colorScheme.colorSchemeCurrent;
 }
 
 InstrumentPanel.prototype.setColorSchemeSetBy = function(newColorSchemeSetBy) {
-  this.colorScheme.colorSchemeSetBy = newColorSchemeSetBy;
-}
-
-InstrumentPanel.prototype.setColorSchemeSetByMAINBAR = function() {
-  this.colorScheme.colorSchemeSetBy = CS_BY_MAINBAR;
-}
-
-InstrumentPanel.prototype.isColorSchemeByOS = function() {
-  return (this.colorScheme.colorSchemeSetBy === CS_BY_OS);
-}
-
-InstrumentPanel.prototype.isColorSchemeSetBySKPATH = function() {
-  return (this.colorScheme.colorSchemeSetBy === CS_BY_SKPATH);
+  this.colorSchemeSetBy = newColorSchemeSetBy;
 }
 
 InstrumentPanel.prototype.getReloadParams = function() {

lib/ui/instrumentpanel.js

@@ -26,6 +26,7 @@ import {
 } from '../util/localstorage';
 import {
   CS_BY_OS,
+  CS_DARK,
   notificationPageId,
   backupSettingsKeyName
 } from './settings/constants';
@@ -57,6 +58,7 @@ class App extends React.Component {
     this.generateClickmeElement  = this.generateClickmeElement.bind(this);
     this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
     this.toggleWidgetFullScreen = this.toggleWidgetFullScreen.bind(this);
+    instrumentPanel.model = this.props.model;
     const initialColorScheme = retrieveColorScheme();
     if (initialColorScheme.colorSchemeSetBy !== CS_BY_OS) {
       instrumentPanel.colorSchemeTool.removeListener();
@@ -65,6 +67,13 @@ class App extends React.Component {
       }
     instrumentPanel.colorSchemeTool.scheme = initialColorScheme.colorSchemeCurrent;
     instrumentPanel.colorScheme = initialColorScheme;
+    instrumentPanel.colorSchemeTool.onChange = () => {
+      instrumentPanel.getActiveWidgets().forEach((widget)=>{
+        if (widget.reactWidget.props.functions && typeof widget.reactWidget.props.functions.setDarkMode === 'function') {
+          widget.reactWidget.props.functions.setDarkMode(instrumentPanel.colorSchemeTool.scheme === CS_DARK)
+        }
+      });
+    }
     instrumentPanel.version = this.props.version;
     this.lastUsedVersion = retrieveVersion();
     if (this.lastUsedVersion !== instrumentPanel.version) {

lib/ui/main.js

@@ -24,7 +24,8 @@ import {
   retrieveToken,
 } from '../util/localstorage';
 import {
-  notificationPageId
+  notificationPageId,
+  CS_BY_MAINBAR
 } from './settings/constants'
 
 var buttonClass = "navbar-btn";
@@ -315,9 +316,9 @@ export default class IpNavBar extends React.Component {
     this.showIpNavBar(event);
     var newColorSchemeToSave = retrieveColorScheme();
     this.props.instrumentPanel.setDarkMode(!this.props.instrumentPanel.getDarkMode());
-    newColorSchemeToSave.colorSchemeCurrent = this.props.instrumentPanel.getColorSchemeCurrent();
+    newColorSchemeToSave.colorSchemeCurrent = this.props.instrumentPanel.colorSchemeTool.scheme;
     storeColorScheme(newColorSchemeToSave);
-    this.props.instrumentPanel.setColorSchemeSetByMAINBAR();
+    this.props.instrumentPanel.setColorSchemeSetBy(CS_BY_MAINBAR);
   }
 
   toggleLocked(event) {

lib/ui/navbar.js

@@ -12,19 +12,20 @@ import {
   retrieveColorScheme,
   storeColorScheme
 } from '../../util/localstorage';
+import {
+  CS_BY_MAINBAR,
+  CS_BY_OS,
+  CS_BY_SKPATH,
+  CS_LIGHT,
+  CS_DARK,
+} from './constants'
 
 const menuSettings = {
   mainbar: {title: 'By main bar icon', help: 'The dark mode is set by icon in main bar'},
   os: {title: 'By OS settings', help: 'The dark mode follows your OS settings'},
   skpath: {title: 'By Signal K Mode', help: 'The dark mode follows the value of Signal K path: /vessels/self/environment/mode'}
 }
 
-export const CS_BY_MAINBAR = "mainbar";
-export const CS_BY_OS = "os";
-export const CS_BY_SKPATH = "skpath";
-export const CS_LIGHT = "light";
-export const CS_DARK = "dark";
-
 export default class ColorSchemeSettings extends React.Component {
   constructor(props) {
     super(props);
@@ -35,7 +36,7 @@ export default class ColorSchemeSettings extends React.Component {
   handleSelect(selectedKey) {
     var newColorSchemeToSave = this.state;
     newColorSchemeToSave.colorSchemeSetBy = selectedKey;
-    newColorSchemeToSave.colorSchemeCurrent = this.props.instrumentPanel.getColorSchemeCurrent();
+    newColorSchemeToSave.colorSchemeCurrent = this.props.instrumentPanel.colorSchemeTool.scheme;
     this.setState({colorSchemeSetBy: selectedKey});
     this.props.instrumentPanel.setColorSchemeSetBy(selectedKey);
     if (selectedKey === CS_BY_OS) this.props.instrumentPanel.setReloadRequired();

lib/ui/settings/colorschemesettings.js

@@ -114,7 +114,7 @@ export default class WidgetCell extends React.Component {
           {(this.state.showAllPaths)?this.getAdditionalPathList():null}
         </div>
         <div className='widget'>
-            {this.props.widget.getReactElement()}
+          {this.props.widget.getReactElement()}
         </div>
         <div className='widgetSettings'>
             {this.props.widget.getSettingsElement(this.pushCellChange)}
@@ -131,7 +131,7 @@ export default class WidgetCell extends React.Component {
           <Button className='headerEdit' bsSize="xsmall" onClick={() => this.props.changeWidgetInEdit(this.props.widget.id)}>Edit</Button>
         </div>
         <div className='widget'>
-            {this.props.widget.getReactElement()}
+          {this.props.widget.getReactElement()}
         </div>
       </div>
     );