Mobile Phone Gauge

From Nearwiki
Jump to: navigation, search

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 [1] ) used in this example (but any other sensor type could be used).


Mobile gauge.png


JavaScript Code


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 [2]

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



<!DOCTYPE html>        
<!-- ****************************************************************************************************************************** -->  
<!-- * NEARBUS JAVASCRIPT EXAMPLE - www.nearbus.net                                                                               * --> 
<!-- * Description: 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 system is configured to work with a Grove Temperature Sensor (Thermistor)                                              * --> 
<!-- * Support: info@nearbus.net                                                                                                  * --> 
<!-- ****************************************************************************************************************************** -->  
<!-- * REVISION HISTORY                                                                                                           * -->
<!-- * v0.1 - 09-08-13 - Initial Release                                                                                          * --> 
<!-- * v0.2 - 24-10-13 - Upgrade to support nearapi_v05.js                                                                        * --> 
<!-- ****************************************************************************************************************************** --> 

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

<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>
Retrieved from "https://nearbus.xyz/mediawiki/index.php?title=Mobile_Phone_Gauge&oldid=136"