Skip to content

Commit

Permalink
Feature/feet display (#193)
Browse files Browse the repository at this point in the history 
* Click on the units of depth will switch between imperial and metric units
* Fixed depth/heading hold not responding
  • Loading branch information
@gilborty @BrianAdams
gilborty authored and BrianAdams committed Jan 25, 2017
1 parent 763a6e2 commit 5636d9d
Show file tree
Hide file tree
Showing 4 changed files with 246 additions and 159 deletions.
14 changes: 7 additions & 7 deletions src/plugins/diveprofile/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class DiveProfile
this.depth = 0; // meters
this.pressure = 0; // kPa
this.temperature = 0; // celsius
this.waterType = "Freshwater";
this.waterType = "Fresh";

this.SyncSettings = new Periodic( 100, "timeout", function()
{
Expand Down Expand Up @@ -107,11 +107,11 @@ class DiveProfile
self.settings = settings.diveProfile;

// Set target water type
if( self.settings.waterType == "Freshwater" )
if( self.settings.waterType == "Fresh" )
{
self.targetWaterType = 0;
}
else if( self.settings.waterType == "Saltwater" )
else if( self.settings.waterType == "Salt" )
{
self.targetWaterType = 1;
}
Expand Down Expand Up @@ -153,11 +153,11 @@ class DiveProfile

if( self.mcuWaterType == 0 )
{
this.waterType = "Freshwater";
this.waterType = "Fresh";
}
else
{
this.waterType = "Saltwater";
this.waterType = "Salt";
}

self.cockpitBus.emit( "plugin.diveProfile.waterType", self.waterType );
Expand Down Expand Up @@ -239,8 +239,8 @@ class DiveProfile
'waterType': {
'type': 'string',
'enum': [
'Freshwater',
'Saltwater'
'Fresh',
'Salt'
],
'title': 'Water Type',
'default': 'Freshwater'
Expand Down
118 changes: 86 additions & 32 deletions src/plugins/new-ui/public/webcomponents/depth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
margin-top: -0.6vw;
}
#depth {
font-size: 1.8vw;
font-size: 1.85vw;
font-weight: bold;
text-align: center;
}
Expand All @@ -30,27 +30,32 @@
1px 1px 0 #fff;
}
#depthTarget {
font-size: 1vw;
font-size: 1.0vw;
font-weight: bold;
/*padding-top: 2px;*/
}
#depthTarget.hidden {
opacity: 0;
}
#depth-footer {
width: 100%;
margin-top: -20px;
margin-top: 0.75vw;

font-size: 0.9vw;
}
#water-type {
width: 35%;
float: left;
font-weight: bold;
}
#depth-unit {
width: 35%;
text-align: right;
float: right;

font-weight: bold;
}
#depth-unit:hover {
cursor: pointer;
}
.depth-line-container {
margin-top: 0.5vw;
}
.depth-line-container,
#depth-change-container {
position: relative;
display:table;
Expand All @@ -77,11 +82,12 @@
}
#depthLock {
text-align: right;
font-weight:bold;
right: 10px;
margin-top: -29px;
margin-top: -0.2vw;
}
#numberContainer {
margin-top: 10px;
margin-top: -0.5vw;
padding-bottom: 14px;
}
#depthLock.hidden { opacity: 0; }
Expand Down Expand Up @@ -114,11 +120,12 @@
display: inline-block;
max-width: 55px;
margin: auto;
font-size: 1.0vw;
font-size: 1.25vw;
vertical-align: middle;
}
#depth-change-unit {
margin-top: -6px;
font-size: 0.85vw;
}
.depth-change-indicator { width: 15px; height: 15px }
svg { width: 100%; }
Expand All @@ -132,12 +139,17 @@
<div id="depth" class="center text-center">
<span>{{formatDepth(depth)}}</span>
</div>
<div id="depthTarget" title="Depthhold target depth" class="center text-center hidden">{{target}}</div>
<div id="depthTarget" title="Depthhold target depth" class="center text-center hidden">
<span>{{__('LK: ')}}</span>
<span style="text-align:center">{{target}}</span>
</div>
</div>

</div>

<div id="depth-footer">
<div id="water-type" class="unit" title="Water type">{{__(waterType)}}</div>
<div id="depth-unit" class="unit">{{__('m')}}</div>
<span id="water-type">{{__(waterType)}}</span>
<span id="depth-unit"> {{depthUnit}} </span>
</div>

<div class="depth-line-container">
Expand All @@ -160,7 +172,7 @@
</div>
</div>

<div id="depth-change-unit" class="center text-center unit">{{__('m/s')}}</div>
<div id="depth-change-unit" class="center text-center unit">{{depthUnit}}{{__('/s')}}</div>

</div>
</template>
Expand All @@ -178,7 +190,11 @@
},
depth: {
type: Number,
value: 0
value: function(){return 0;}
},
depthUnit: {
type: String,
value: function(){return 'm';}
},
options: {
type: Object,
Expand All @@ -191,11 +207,11 @@
},
target: {
type: Number,
value: 0
value: function(){return 0;}
},
waterType: {
type: String,
value: 'salt'
value: function(){return 'Salt';}
}
},
behaviors: [namespace('behaviors').oROVStandard],
Expand All @@ -206,22 +222,34 @@
});

emitter.withHistory.on('plugin.rovpilot.depthHold.state', function (state) {
if(state.enabled){
self.target = Number(state.targetDepth).toFixed(1);
$(self.$.depth).addClass('inverted');
$(self.$.depthTarget).removeClass('hidden');
$(self.$.depthLock).removeClass('hidden');
} else{
self.target = 0;
$(self.$.depth).removeClass('inverted');
$(self.$.depthTarget).addClass('hidden');
$(self.$.depthLock).addClass('hidden');
}
if(state.enabled)
{
self.target = Number(state.targetDepth).toFixed(2);
//Format based on setting
if(self.depthUnit == "ft")
{
self.target = self.convertToFeet(state.targetDepth).toFixed(2);
}
$(self.$.depth).addClass('inverted');
$(self.$.depthTarget).removeClass('hidden');
$(self.$.depthLock).removeClass('hidden');

}
else
{
self.target = 0;
$(self.$.depth).removeClass('inverted');
$(self.$.depthTarget).addClass('hidden');
$(self.$.depthLock).addClass('hidden');
}
});
emitter.withHistory.on('plugin.diveProfile.waterType', function (waterType) {
self.waterType = waterType;
});
},
listeners: {
'depth-unit.tap': 'toggleDepthUnit',
},
attached: function(){
this._dataThrottleInterval=setInterval(function(){
if (newState == lastState){return;};
Expand Down Expand Up @@ -261,12 +289,15 @@
self.$.upPolygon.style.fill="black";
}


var changeText = '';

if (difference > 0) {
changeText = '+';
}
if(self.depthUnit == "ft")
{
difference = self.convertToFeet(difference);
}
changeText += difference.toFixed(2);
self.change = changeText;
oldDepth = currentDepth;
Expand All @@ -286,7 +317,30 @@
clearInterval(this._updateInterval);
},
formatDepth : function(depth){
return depth.toFixed(1);
var self = this;

//Format based on setting
if(self.depthUnit == "ft")
{
depth = self.convertToFeet(depth);
}
return depth.toFixed(2);
},
convertToFeet(numberIn) {
return Number(numberIn * 3.28);
},
toggleDepthUnit: function(e) {
var self = this;

if(self.depthUnit == "m")
{
self.set("depthUnit", "ft");
}
else
{
self.set("depthUnit", "m");
}

}
});
}());
Expand Down
Loading

0 comments on commit 5636d9d

Please sign in to comment.