Nearwiki: Created page with " This JavaScript example show how to implement a gauge indicator adapted for mobile devices. The code implements a single gauge that shows in real time the ADC value in Port_0..."

2018-03-29T20:59:52Z

Created page with " This JavaScript example show how to implement a gauge indicator adapted for mobile devices. The code implements a single gauge that shows in real time the ADC value in Port_0..."

New page

This JavaScript example show how to implement a gauge indicator adapted for mobile devices. The code implements a single gauge that shows in real time the ADC value in Port_0 (Arduino A0). The output value is escalated by a thermistor's transfer function ( Grove Temperature Sensor [http://www.seeedstudio.com/wiki/Grove_-_Temperature_Sensor] ) used in this example (but any other sensor type could be used).

[[File:Mobile_gauge.png|160px]]

----

===JavaScript Code===
<br />

To try this example download the following file in you mobile device or computer and execute it. Double click onto the downloaded "html" file in order to run it on your default browser.

'''Download:''' NearGauge_v02.rar [http://www.nearbus.net/downloads/js_apps/NearGauge_v02.rar]

In order to run this example you should edit it (eg. notepad) and replace the following parameters:
var device_id = "NB100xxx"; // You NearBus Device ID
var user = "****"; // Your NearBus Web user
var pass = "****"; // Your NearBus Web password

<pre>
<!DOCTYPE html>












<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="./mscorlib.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="./PerfectWidgets.js" type="text/javascript"></script> 
<script type='text/javascript' src='http://nearbus.net/downloads/js_apps/nearapi_v05.js'></script> 

<script>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// To run this example you should replace the following parameters
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var device_id = "NB100xxx"; // You NearBus Device ID
var user = "****"; // Your NearBus Web user
var pass = "****"; // Your NearBus Web password
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////
// MAIN CONFIGURATION
//////////////////////////////////
var ret = 0;
var LOOP_DELAY = 1000;
var B = 3975; //B value of the thermistor

var slider;
window.onload = function ()
{
var jsonModel = {"Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Instrument","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":1,"Color":{"knownColor":35,"name":null,"state":1,"value":0},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Default","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Circle:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4293256677}},"JSBindingsText":"this.setCenter(new PerfectWidgets.Framework.DataObjects.Vector((this.getInstrument().getByName('Instrument') .getSize() .getWidth()\/2),(this.getInstrument().getByName('Instrument') .getSize() .getHeight()\/2)));\u000a","Name":"Circle1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":6,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Circle1","ToolTipValue":null,"Visible":true,"Center":{"Height":612.5,"Length":866.20580695352066,"Rotation":0.78539816339744828,"Width":612.5,"X":612.5,"Y":612.5},"Radius":603.125},{"__type":"Circle:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4293256677}},"JSBindingsText":"this.setCenter(this.getInstrument().getByName('Circle1') .getCenter());\u000a","Name":"Circle2","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":6,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Circle1","ToolTipValue":null,"Visible":true,"Center":{"Height":612.5,"Length":866.20580695352066,"Rotation":0.78539816339744828,"Width":612.5,"X":612.5,"Y":612.5},"Radius":568.75},{"__type":"Joint:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":"this.setCenter(this.getInstrument().getByName('Circle1') .getCenter());\u000a","Name":"Joint1","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Scale:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Scale1","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"Ticks:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":"this.setDistance(this.getInstrument().getByName('Joint1') .getRadius());\u000a","Name":"Ticks1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":7,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Ticks1","ToolTipValue":null,"Visible":true,"Colorizer":null,"Distance":387.5,"Dock":0,"MaxLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"MinLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"OriginWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"Padding":0,"Divisions":11,"StepWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"SubDivisions":5,"SubTicksPosition":0,"UseDescreteValues":false,"UseRoundValues":false,"Length":56.25,"SubLength":37.5},{"__type":"ScaleLabels:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":"this.setDistance((this.getInstrument().getByName('Joint1') .getRadius()+106.25));\u000a","Name":"ScaleLabels1","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"ScaleLabels1","ToolTipValue":null,"Visible":true,"Colorizer":null,"Distance":493.75,"Dock":0,"MaxLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":2,"Value":99},"MinLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"OriginWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"Padding":0,"Font":{"Bold":1,"FamilyName":"Arial","Italic":2,"Size":18,"Strikeout":2,"Underline":2},"Format":{"CurrencyNegativePattern":0,"CurrencyPositivePattern":0,"CurrencySymbol":"$","DateSeparator":".","DecimalPlaces":2,"DecimalSeparator":".","FormatMask":"","FormatStyle":0,"GroupSeparator":" ","NumberNegativePattern":0,"PercentNegativePattern":0,"PercentPositivePattern":0,"UseCultureSettings":true,"UseGroupSeparator":true},"Formula":"","ItemMargins":{},"OddLabelsDistance":0,"Position":1,"ShowSuperposableLabels":true,"TextAlignment":1,"TextAngle":90,"TextRotationMode":1,"Divisions":11,"StepWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"UseRoundValues":false},{"__type":"RangedLevel:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4286545791}},"JSBindingsText":"this.setDistance((this.getInstrument().getByName('Joint1') .getRadius()-93.75));\u000a","Name":"RangedLevel2","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"RangedLevel2","ToolTipValue":null,"Visible":true,"Colorizer":null,"Distance":293.75,"Dock":0,"MaxLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"MinLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"OriginWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"Padding":0,"ValueWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"Colors":[],"Divisions":0,"DivisionsStroke":null,"EndColor":{"knownColor":164,"name":null,"state":1,"value":0},"StartColor":{"knownColor":35,"name":null,"state":1,"value":0},"AlignmentMode":0,"EndWidth":62.5,"StartWidth":62.5},{"__type":"Slider:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":null,"JSBindingsText":null,"Name":"Slider1","RecalculateAll":false,"Smooth":true,"Stroke":null,"Style":"","ToolTipValue":null,"Visible":true,"Elements":[{"__type":"RangedLevel:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4288269823}},"JSBindingsText":"this.setDistance((this.getInstrument().getByName('Joint1') .getRadius()-90.625));\u000athis.setValue(this.getInstrument().getByName('Slider1').getAnimationValue());\u000a","Name":"RangedLevel1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":4,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Needle1","ToolTipValue":null,"Visible":true,"Colorizer":null,"Distance":296.875,"Dock":0,"MaxLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"MinLimitWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"OriginWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":0,"Value":0},"Padding":0,"ValueWrapper":{"__type":"SmartValueWrapper:#PerpetuumSoft.Instrumentation.Model","Kind":1,"Value":48.99466487115037},"Colors":[],"Divisions":0,"DivisionsStroke":null,"EndColor":{"knownColor":164,"name":null,"state":1,"value":0},"StartColor":{"knownColor":35,"name":null,"state":1,"value":0},"AlignmentMode":0,"EndWidth":56.25,"StartWidth":56.25},{"__type":"Needle:#PerpetuumSoft.Instrumentation.Model","Active":true,"BreakEventsBubbling":false,"CssClass":{},"Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4288269823}},"JSBindingsText":"this.setStartPoint(this.getInstrument().getByName(\"Slider1\").getPosition(0));\u000athis.setEndPoint(this.getInstrument().getByName(\"Slider1\").getPosition((this.getInstrument().getByName('Joint1') .getRadius()+50)));\u000a","Name":"Needle1","RecalculateAll":false,"Smooth":true,"Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":4,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1},"Style":"Needle1","ToolTipValue":null,"Visible":true,"EndPoint":{"Height":200.48791367725869,"Length":506.70371667123413,"Rotation":0.40679824770497075,"Width":465.35282631330648,"X":465.35282631330648,"Y":200.48791367725869},"StartPoint":{"Height":612.5,"Length":866.20580695352066,"Rotation":0.78539816339744828,"Width":612.5,"X":612.5,"Y":612.5},"EndWidth":0,"NeedlePoints":[],"ShowMode":0,"StartWidth":62.5}],"MaxLimit":{"Kind":0,"Value":0},"MinLimit":{"Kind":0,"Value":0},"Step":0,"Value":48.99466487115037}],"Colorizer":null,"Maximum":110,"Minimum":0,"Reverse":false}],"Margins":{},"Center":{"Height":612.5,"Length":866.20580695352066,"Rotation":0.78539816339744828,"Width":612.5,"X":612.5,"Y":612.5},"Dock":0,"Radius":387.5,"StartAngle":90,"TotalAngle":360}],"Enabled":true,"Focused":false,"GridStep":25,"IsFixed":false,"MeasureUnit":{},"Parameters":[],"ShowGrid":true,"Size":{"Height":1225,"Length":1732.4116139070413,"Rotation":0.78539816339744828,"Width":1225,"X":1225,"Y":1225},"SnapToGrid":true,"Styles":[{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":null,"Font":{"Bold":0,"FamilyName":"Microsoft Sans Serif","Italic":0,"Size":10,"Strikeout":0,"Underline":0},"Image":null,"Name":"Default","Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":1,"Color":{"knownColor":35,"name":null,"state":1,"value":0},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1}},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4293256677}},"Font":null,"Image":null,"Name":"Circle1","Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":6,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1}},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4286545791}},"Font":null,"Image":null,"Name":"RangedLevel2","Stroke":null},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":{"__type":"SolidFill:#PerpetuumSoft.Framework.Drawing","Color":{"knownColor":0,"name":null,"state":2,"value":4288269823}},"Font":null,"Image":null,"Name":"Needle1","Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":4,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1}},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":null,"Font":{"Bold":1,"FamilyName":"Arial","Italic":2,"Size":18,"Strikeout":2,"Underline":2},"Image":null,"Name":"ScaleLabels1","Stroke":null},{"__type":"Style:#PerpetuumSoft.Instrumentation.Styles","Fill":null,"Font":null,"Image":null,"Name":"Ticks1","Stroke":{"__type":"SimpleStroke:#PerpetuumSoft.Framework.Drawing","Width":7,"Color":{"knownColor":0,"name":null,"state":2,"value":4286545791},"DashLenght":5,"DotLenght":1,"SpaceLenght":2,"Style":1}}]}

var widget = new PerfectWidgets.Widget("root", jsonModel); //creating widget

slider = widget.getByName("Slider1"); //getting slider object

///////////////////////////////////
// Function: Main Loop
///////////////////////////////////
setInterval( function()
{
ret = NearAPIjs( "ADC_INPUT", device_id , 0, 0 );
if( ret != "WAIT" && ret != "DOWN" && ret != "ERROR" ) {
var resistance = (1023-ret) * 10000/ret; //get the resistance of the sensor;
var temperature = 1 / ( Math.log( resistance/10000)/B+1/298.15)-273.15; //convert to temperature via datasheet
slider.setValue( temperature );
}
}, LOOP_DELAY );
}

</script>
</head>

<body bgcolor="#000">
<br />
<p><div style="text-align:center; width:950px; font: bold 100px Arial; color:orange;">NEAR GAUGE</div></p>
<br />
<div id="root" style="width:950px;height:1320px; border:Opx solid #000"></div>
</body>
</html>

</pre>

Mobile Phone Gauge - Revision history

Nearwiki: Created page with " This JavaScript example show how to implement a gauge indicator adapted for mobile devices. The code implements a single gauge that shows in real time the ADC value in Port_0..."