Improved some Widgets

server/avnav_server.py

@@ -23,7 +23,7 @@
 #  DEALINGS IN THE SOFTWARE.
 #
 #  parts from this software (AIS decoding) are taken from the gpsd project
-#  so refer to this BSD licencse also (see ais.py) or omit ais.py 
+#  so refer to this BSD license also (see ais.py) or omit ais.py
 ###############################################################################
 import datetime
 import logging.handlers
@@ -307,9 +307,9 @@ def main(argv):
     AVNLog.error("Exception in main %s",traceback.format_exc())
   AVNLog.info("stopping")
   sighandler(None, None)
-   
+
 if __name__ == "__main__":
     main(sys.argv)
-    
-         
-  
+
+
+

viewer/components/CenterDisplayWidget.jsx

@@ -21,7 +21,7 @@ const CenterDisplayWidget = (props) => {
     }
     return (
         <WidgetFrame {...props} addClass="centerDisplayWidget" caption="Center" unit={undefined}>
-            {!small && <div className="widgetData">{Formatter.formatLonLats(props.centerPosition)}</div>}
+            {!small && <div className="widgetData Position">{Formatter.formatLonLats(props.centerPosition,props.positionFmt)}</div>}
             {(measurePosition !== undefined) &&
                 <div className="widgetData">
                     <div className="label measure"></div>
@@ -33,8 +33,8 @@ const CenterDisplayWidget = (props) => {
                         /
                     </div>
                     <div className="value">
-                        <span>{Formatter.formatDistance(measureValues.dts)}</span>
-                        <span className="unit">nm</span>
+                        <span>{Formatter.formatDistance(measureValues.dts,props.distanceUnit)}</span>
+                        <span className="unit">{props.distanceUnit}</span>
                     </div>
                 </div>
             }
@@ -48,8 +48,8 @@ const CenterDisplayWidget = (props) => {
                     /
                 </div>
                 <div className="value">
-                    <span>{Formatter.formatDistance(props.markerDistance)}</span>
-                    <span className="unit">nm</span>
+                    <span>{Formatter.formatDistance(props.markerDistance,props.distanceUnit)}</span>
+                    <span className="unit">{props.distanceUnit}</span>
                 </div>
             </div>
             <div className="widgetData">
@@ -62,9 +62,8 @@ const CenterDisplayWidget = (props) => {
                     /
                 </div>
                 <div className="value">
-                    <span>{Formatter.formatDistance(props.centerDistance)}</span>
-                    <span className="unit">nm</span>
-
+                    <span>{Formatter.formatDistance(props.centerDistance,props.distanceUnit)}</span>
+                    <span className="unit">{props.distanceUnit}</span>
                 </div>
             </div>
         </WidgetFrame>
@@ -94,4 +93,10 @@ CenterDisplayWidget.propTypes={
     style: PropTypes.object,
     mode: PropTypes.string
 };
-export default CenterDisplayWidget;
+
+CenterDisplayWidget.editableParameters={
+    positionFmt: Formatter.formatLonLats.parameters[0],
+    distanceUnit: Formatter.formatDistance.parameters[0],
+};
+
+export default CenterDisplayWidget;

viewer/components/SKWidgets.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Formatter from "../util/formatter";
 import PropTypes from "prop-types";
 import {WidgetFrame, WidgetProps} from "./WidgetBase";
+import {useKeyEventHandler} from "../util/GuiHelpers";
 
 const rad2deg=(rad,inDeg)=>{
     if (inDeg) return parseFloat(rad);
@@ -18,6 +19,7 @@ const DegreeFormatter = (value,inDeg)=> {
   };
 
 export const SKRollWidget=(props)=>{
+        useKeyEventHandler(props,"widget");
         let degreeArrow = "---";
         if (props.value !== undefined) {
             let value = DegreeFormatter(props.value, props.inDegree);
@@ -100,4 +102,4 @@ SKPitchWidget.editableParameters={
     inDegree:{type:'BOOLEAN',default:false,description:'set to true if input is in deg instead of rad'},
     criticalValue: {type: 'NUMBER', default: 45},
     caption: {type:'STRING',default:'Pitch'}
-}
+}

viewer/components/WidgetList.js

@@ -77,7 +77,7 @@ let widgetList=[
     },
     {
         name: 'Position',
-        default: "-------------",
+        default: "---",
         caption: 'BOAT',
         storeKeys:{
             value: keys.nav.gps.position,
@@ -150,55 +150,59 @@ let widgetList=[
         caption: 'Wind Angle',
         storeKeys:{
             windAngle:keys.nav.gps.windAngle,
+            windAngleTrue: keys.nav.gps.trueWindAngle,
             windDirectionTrue: keys.nav.gps.trueWindDirection,
-            windAngleTrue: keys.nav.gps.trueWindAngle
         },
         formatter: 'formatDirection',
         editableParameters: {
-            formatterParameters: false,
+            formatterParameters: true,
             value: false,
             caption: false,
+            unit: false,
             kind: {type:'SELECT',list:['auto','trueAngle','trueDirection','apparent'],default:'auto'}
         },
         translateFunction: (props)=>{
             const captions={
                 A:'AWA',
+                TA: 'TWA',
                 TD: 'TWD',
-                TA: 'TWA'
             };
             let wind=getWindData(props);
-            return {...props,value:wind.windAngle, caption:captions[wind.suffix] }
+            return {...props,
+              value:wind.windAngle,
+              caption:captions[wind.suffix]
+            }
         }
     },
     {
         name: 'WindSpeed',
         default: "---",
-        unit: "m/s",
+        unit: "kn",
         caption: 'Wind Speed',
         storeKeys:{
             windSpeed:keys.nav.gps.windSpeed,
             windSpeedTrue: keys.nav.gps.trueWindSpeed,
-            showKnots: keys.properties.windKnots
         },
         formatter: 'formatSpeed',
+        formatterParameters: ['kn'],
         editableParameters: {
-            formatterParameters: false,
+            formatterParameters: true,
             value: false,
             caption: false,
+            unit: false,
             kind: {type:'SELECT',list:['auto','true','apparent'],default:'auto'}
         },
         translateFunction: (props)=>{
             const captions={
                 A:'AWS',
+                TA: 'TWS',
                 TD: 'TWS',
-                TA: 'TWS'
             };
             let wind=getWindData(props);
             return {...props,
                 value:wind.windSpeed,
                 caption:captions[wind.suffix],
-                formatterParameters: props.showKnots?'k':'m',
-                unit: props.showKnots?'kn':'m/s'
+                unit: ((props.formatterParameters instanceof Array) && props.formatterParameters.length > 0) ? props.formatterParameters[0] : props.unit,
             }
         }
     },
@@ -319,29 +323,55 @@ let widgetList=[
         name: 'WindDisplay',
         caption: 'Wind',
         wclass: WindWidget,
-        storeKeys: WindWidget.storeKeys
+        storeKeys: WindWidget.storeKeys,
+        formatter: WindWidget.formatter,
+    },
+    {
+        name: 'WindGraphics',
+        wclass: WindGraphics,
+        storeKeys: WindGraphics.storeKeys,
+        formatter: WindGraphics.formatter,
     },
     {
         name: 'DepthDisplay',
         caption: 'DPT',
         unit: 'm',
         storeKeys:{
-            value:keys.nav.gps.depthBelowTransducer,
-            visible: keys.properties.showDepth
+            DBK: keys.nav.gps.depthBelowKeel,
+            DBS: keys.nav.gps.depthBelowWaterline,
+            DBT: keys.nav.gps.depthBelowTransducer,
+        },
+        formatter: 'formatDistance',
+        formatterParameters: ['m'],
+        translateFunction: (props)=>{
+            var kind=props.kind;
+            if(kind=='auto') {
+              kind='DBT';
+              if(props.DBK !== undefined) kind='DBK';
+              if(props.DBS !== undefined) kind='DBS';
+            }
+            if(kind=='DBT') var depth=props.DBT;
+            if(kind=='DBK') var depth=props.DBK;
+            if(kind=='DBS') var depth=props.DBS;
+            return {...props,
+              value: depth,
+              caption: kind,
+              unit: ((props.formatterParameters instanceof Array) && props.formatterParameters.length > 0) ? props.formatterParameters[0] : props.unit,
+            }
+        },
+        editableParameters:{
+            formatterParameters: true,
+            unit: false,
+            value: false,
+            caption: false,
+            kind: {type:'SELECT',list:['auto','DBT','DBK','DBS'],default:'auto'}
         },
-        formatter: 'formatDecimal',
-        formatterParameters: [3,1,true]
     },
     {
         name: 'XteDisplay',
         wclass: XteWidget,
         storeKeys: XteWidget.storeKeys
     },
-    {
-        name: 'WindGraphics',
-        wclass: WindGraphics,
-        storeKeys: WindGraphics.storeKeys
-    },
     {
         name: "DateTime",
         wclass: DateTimeWidget

viewer/components/WindGraphics.jsx

@@ -30,7 +30,6 @@ const nightColors={
 };
 const WindGraphics = (props) => {
     useKeyEventHandler(props, "widget");
-    const ddProps = useAvNavSortable(props.dragId);
     let canvas = undefined;
     const drawWind = () => {
         let current = getWindData(props);
@@ -79,7 +78,7 @@ const WindGraphics = (props) => {
         ctx.arc(width / 2, height / 2, radius * 0.97, 0, 2 * Math.PI);
         ctx.stroke();
         let start, end;
-        if (current.suffix === 'A') {
+        if (current.suffix.endsWith('A')) {
             // Write left partial circle
             ctx.beginPath();
             ctx.strokeStyle = colors.red; // red
@@ -119,10 +118,8 @@ const WindGraphics = (props) => {
         // Move the pointer from 0,0 to center position
         ctx.translate(width / 2, height / 2);
         ctx.font = fontSize + "px Arial";
-        if (!props.show360 && current.suffix !== 'TD') {
-            if (winddirection > 180) winddirection -= 360;
-        }
-        let txt = Formatter.formatDirection(winddirection).replace(/ /g, "0");
+        let a180 = !(props.show360 || current.suffix.endsWith('D'));
+        let txt = Formatter.formatDirection(winddirection,false,a180);
         let xFactor = -0.8;
         if (winddirection < 0) xFactor = -1.0;
         ctx.fillStyle = colors.text;
@@ -143,27 +140,18 @@ const WindGraphics = (props) => {
         setTimeout(drawWind, 0);
     }
     setTimeout(drawWind, 0);
-    let current = getWindData(props);
-    let windSpeed = "";
-    let showKnots = props.showKnots;
-    try {
-        windSpeed = parseFloat(current.windSpeed);
-        if (showKnots) {
-            windSpeed = windSpeed * 3600 / navcompute.NM;
-        }
-        if (windSpeed < 10) windSpeed = Formatter.formatDecimal(windSpeed, 1, 2);
-        else windSpeed = Formatter.formatDecimal(windSpeed, 3, 0);
-    } catch (e) {
-    }
+    let wind = getWindData(props);
+    var a180 = !(props.show360 || wind.suffix.endsWith('D'));
+    var angle = Formatter.formatDirection(wind.windAngle,false,a180);
+    var unit = ((props.formatterParameters instanceof Array) && props.formatterParameters.length > 0) ? props.formatterParameters[0] : 'kn';
+    var speed = Formatter.formatSpeed(wind.windSpeed,unit);
     return (
-        <WidgetFrame {...props} addClass="windGraphics" unit={showKnots ? "kn" : "m/s"} caption="Wind" resize={false}>
+        <WidgetFrame {...props} addClass="windGraphics" unit={unit} caption="Wind" resize={false}>
             <canvas className='widgetData' ref={canvasRef}></canvas>
-            <div className="windSpeed">{windSpeed}</div>
-            <div className="windReference">{current.suffix}</div>
+            <div className="windSpeed">{speed}</div>
+            <div className="windReference">{wind.suffix}</div>
         </WidgetFrame>
-
     );
-
 }
 
 WindGraphics.propTypes={
@@ -188,8 +176,10 @@ WindGraphics.storeKeys={
     showKnots:  keys.properties.windKnots,
     scaleAngle: keys.properties.windScaleAngle
 };
+WindGraphics.formatter='formatSpeed';
 WindGraphics.editableParameters={
+    formatterParameters: true,
     show360: {type:'BOOLEAN',default:false},
     kind: {type:'SELECT',list:['auto','trueAngle','trueDirection','apparent'],default:'auto'}
 }
-export default WindGraphics;
+export default WindGraphics;