adjusted ais data display

- consistent field names - units after value - formatting of data in target list
wellenvogel · Jan 2, 2025 · b44fe0a · b44fe0a
1 parent 6216ed6
commit b44fe0a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/viewer/gui/AisInfoPage.jsx b/viewer/gui/AisInfoPage.jsx
@@ -27,19 +27,19 @@ const displayItems = [
     {name: 'status', label: 'Status'},
     {name: 'destination', label: 'Destination'},
     {name: 'position', label: 'Position'},
-    {name: 'course', label: 'COG(°)'},
-    {name: 'speed', label: 'SOG(kn)'},
-    {name: 'heading', label: 'HDG(°)'},
-    {name: 'turn', label: 'ROT(°/min)'},
-    {name: 'headingTo', label: 'BRG(°)'},
-    {name: 'distance', label: 'Distance(nm)'},
-    {name: 'cpa', label: 'CPA(nm)'},
-    {name: 'tcpa', label: 'TCPA(h:min:sec)'},
+    {name: 'course', label: 'COG', unit: '°'},
+    {name: 'speed', label: 'SOG', unit: 'kn'},
+    {name: 'heading', label: 'HDG', unit: '°'},
+    {name: 'turn', label: 'ROT', unit: '°/min'},
+    {name: 'headingTo', label: 'BRG', unit: '°'},
+    {name: 'distance', label: 'DST', unit: 'nm'},
+    {name: 'cpa', label: 'DCPA', unit: 'nm'},
+    {name: 'tcpa', label: 'TCPA'},
     {name: 'passFront', label: 'we pass', addClass: 'aisFront'},
-    {name: 'length', label: 'Length(m)'},
-    {name: 'beam',label: 'Beam(m)'},
-    {name: 'draught',label: 'Draught(m)'},
-    {name: 'age',label: 'Age(s)'}
+    {name: 'length', label: 'Length', unit: 'm'},
+    {name: 'beam',label: 'Beam', unit: 'm'},
+    {name: 'draught',label: 'Draught', unit: 'm'},
+    {name: 'age',label: 'Age', unit: 's'}
 ];
 
 const createUpdateFunction=(config,mmsi)=>{
@@ -60,8 +60,8 @@ const createItem=(config,mmsi)=>{
         }
         return (
         <div className="aisInfoRow">
-            <div className='label '>{props.label}</div>
-            <div className={cl}>{AisFormatter.format(props.name, props.current)}</div>
+            <div className='label'>{props.label}</div>
+            <div className={cl}>{AisFormatter.format(props.name, props.current)}{props.unit && <span className='unit'>&thinsp;{props.unit}</span>}</div>
         </div>
         );
     },{

diff --git a/viewer/gui/AisPage.jsx b/viewer/gui/AisPage.jsx
@@ -20,31 +20,31 @@ import Dialogs from "../components/OverlayDialog.jsx";
 
 const aisInfos=[
     [
-        {name:'distance',label:'Dst ',unit:'nm',len:6},
-        {name:'cpa',label:'Cpa ',unit:'nm',len:6},
-        {name:'headingTo',label:'Brg ',unit:'°',len:3},
-        {name:'tcpa',label:'Tcpa',unit:'h',len:8}
+        {name:'shiptype',label:'Type'},
+        {name:'aid_type',label:'Type'},
+        {name:'callsign',label:'Call'},
+        {name:'destination',label:'Dest'},
     ],
     [
-        {name:'course',label:'Cog ',unit:'°',len:6},
-        {name:'speed',label:'Sog ',unit:'kn',len:6},
-        {name:'heading',label:'Hdg ',unit:'°',len:3}
+        {name:'status',label:'Status'},
+        {name:'age',label:'Age',len:3},
     ],
     [
-        {name:'length',label:'Len ',len:6},
-        {name:'beam',label:'Beam',len:6},
-        {name:'draught',label:'Drau',len:8}
+        {name:'headingTo',label:'BRG',unit:'°',len:3},
+        {name:'distance',label:'DST',unit:'nm',len:5},
+        {name:'cpa',label:'DCPA',unit:'nm',len:5},
+        {name:'tcpa',label:'TCPA',unit:'h',len:8},
     ],
     [
-        {name:'age',label:'Age ',len:6},
-        {name:'status',label:'Stat'}
+        {name:'course',label:'COG',unit:'°',len:3},
+        {name:'speed',label:'SOG',unit:'kn',len:5},
+        {name:'heading',label:'HDT',unit:'°',len:3},
     ],
     [
-        {name:'shiptype',label:'Type'},
-        {name:'aid_type',label:'Type'},
-        {name:'callsign',label:'Call'},
-        {name:'destination',label:'Dest'}
-    ]
+        {name:'length',label:'Length',len:3},
+        {name:'beam',label:'Beam',len:3},
+        {name:'draught',label:'Draught',len:3},
+    ],
 ];
 const reducedAisInfos=[
     aisInfos[0]
@@ -83,15 +83,13 @@ const aisSortCreator=(sortField)=>{
 };
 
 const formatFixed=(val,len)=>{
-    let str=new Array(len+1).join(' ')+val;
-    return str.substr(str.length-len);
-
+    let str = (''+val).trim();
+    str = ' '.repeat(Math.max(0,len-str.length)) + str;
+    console.log(val,len,str);
+    return str;
 }
 
 
-
-
-
 const sortDialog=(sortField)=>{
     let list=[
         {label:'CPA', value:'cpa'},
@@ -373,4 +371,4 @@ class AisPage extends React.Component{
     }
 }
 AisPage.propTypes= Page.pageProperties;
-export default AisPage;
+export default AisPage;
diff --git a/viewer/nav/aisdata.js b/viewer/nav/aisdata.js
@@ -131,7 +131,7 @@ AisData.prototype._computeAisTarget=function(boatPos,ais){
     }
     ais.passFront = cpadata.front;
     if (!ais.shipname) ais.shipname = "unknown";
-    if (!ais.callsign) ais.callsign = "????";
+    if (!ais.callsign) ais.callsign = "----";
 };
 /**
  * compute all the cpa data...
@@ -403,4 +403,4 @@ AisData.prototype.setTrackedTarget=function(mmsi){
     this.handleAisData();
 };
 
-export default AisData;
+export default AisData;
diff --git a/viewer/style/avnav_viewer_new.less b/viewer/style/avnav_viewer_new.less
@@ -1100,6 +1100,9 @@ span.valuePrefix{
         margin-left: 1em;
       }
     }
+    .unit {
+      font-weight: normal;
+    }
     .aisData {
       display: inline-block;
       text-align: left;