nativescript-joystick - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

joystick.android.d.ts

@@ -8,3 +8,2 @@ import { JoyStickCommon } from './joystick.common';
     getAngle(): number;
-    getAngleDegrees(): number;
 }

joystick.android.js

 "use strict";
 var color_1 = require("color");
+//import {Owned} from "utils/utils";
 var joystick_common_1 = require('./joystick.common');
 var common = require("./joystick.common");
 global.moduleMerge(common, exports);
-var STARTING_ANGLE_DEGREES_VALUE = -57.29577951308232;
-var STARTING_ANGLE_VALUE = -1;
-var STARTING_POWER_VALUE = -1;
 var JoyStick = (function (_super) {
@@ -22,34 +20,34 @@ __extends(JoyStick, _super);
     JoyStick.prototype._createUI = function () {
-        var _this = this;
         this._android = new com.erz.joysticklibrary.JoyStick(this._context);
-        setInterval(function () {
-            _this.updateAngle(_this.getAngleDegrees());
-            _this.updatePower(_this.getPower());
-        }, 50);
+        /* Add onChange EventListener */
+        var ref = new WeakRef(this);
+        var joystick = this;
+        this._android.setListener(new com.erz.joysticklibrary.JoyStick.JoyStickListener(
+        // <Owned & com.erz.joysticklibrary.JoyStick.JoyStickListener>{
+        {
+            get owner() {
+                return ref.get();
+            },
+            onMove: function (nativeJoystick, angle, power) {
+                if (this.owner) {
+                    //get the angle in Degrees
+                    angle = nativeJoystick.getAngleDegrees();
+                    joystick.set("angle", angle);
+                    joystick.set("power", power);
+                }
+                else {
+                    console.log("else");
+                }
+            }
+        }));
     };
     JoyStick.prototype.getPower = function () {
-        var power = this._android.getPower();
-        // return 0 if the power returned is at the starting value, which is set before the widget is interacted with
-        return (power !== STARTING_POWER_VALUE) ? power : 0;
+        return this._android.getPower();
     };
     JoyStick.prototype.getAngle = function () {
-        var angle = this._android.getAngle();
-        // return 0 if the angle returned is at the starting value, which is set before the widget is interacted with
-        return (angle !== STARTING_ANGLE_VALUE) ? angle : 0;
+        return this._android.getAngleDegrees();
     };
-    JoyStick.prototype.getAngleDegrees = function () {
-        var angle = this._android.getAngleDegrees();
-        // return 0 if the angle returned is at the starting value, which is set before the widget is interacted with
-        return (angle !== STARTING_ANGLE_DEGREES_VALUE) ? angle : 0;
-    };
     return JoyStick;
 }(joystick_common_1.JoyStickCommon));
 exports.JoyStick = JoyStick;
-/*
-export class CustomJoyStickListener {
-    onMove(joyStick:JoyStick, angle:number, power:number) {
-        console.log("angle:" + angle);
-    }
-}
-*/
 //padColorProperty property
@@ -56,0 +54,0 @@ function onPadColorPropertyPropertyChanged(data) {

joystick.common.d.ts

@@ -5,3 +5,4 @@ import { Property } from "ui/core/dependency-observable";
 export declare class JoyStickCommon extends View {
-    message: string;
+    angle: number;
+    power: number;
     constructor();
@@ -12,8 +13,2 @@ static padColorProperty: Property;
     buttonColor: Color;
-    _angle: number;
-    angle: number;
-    updateAngle(val: number): void;
-    _power: number;
-    power: number;
-    updatePower(val: number): void;
 }

joystick.common.js

@@ -9,4 +9,4 @@ "use strict";
         _super.call(this);
-        this._angle = 0;
-        this._power = 0;
+        this.angle = 0;
+        this.power = 0;
     }
@@ -33,34 +33,2 @@ Object.defineProperty(JoyStickCommon.prototype, "padColor", {
     });
-    Object.defineProperty(JoyStickCommon.prototype, "angle", {
-        get: function () {
-            return this._angle;
-        },
-        set: function (val) {
-            this._angle = val;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    JoyStickCommon.prototype.updateAngle = function (val) {
-        if (val != this._angle) {
-            //   this.set("angle", Math.round(val));
-            this.set("angle", val);
-        }
-    };
-    Object.defineProperty(JoyStickCommon.prototype, "power", {
-        get: function () {
-            return this._power;
-        },
-        set: function (val) {
-            this._power = val;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    JoyStickCommon.prototype.updatePower = function (val) {
-        if (val != this._power) {
-            //   this.set("power", Math.round(val));
-            this.set("power", val);
-        }
-    };
     //padColor property
@@ -67,0 +35,0 @@ JoyStickCommon.padColorProperty = new dependency_observable_1.Property("padColor", "JoyStickCommon", new proxy_1.PropertyMetadata(false));

package.json

 {
   "name": "nativescript-joystick",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "NativeScript XML plugin to create native JoyStick widget.",
@@ -5,0 +5,0 @@ "main": "joystick.js",

README.md

 # NativeScript-JoyStick
 An Android UI component for NativeScript that provides Virtual JoyStick
+Hopefully I will be able to add iOS soon.
 
-## Getting started
+![Sample](screens/joystick.png)
+
+## Native Source
+
+This component is based on [JoyStick component from AndroidArsenal](https://android-arsenal.com/details/1/2712) created by [erz05](https://github.com/erz05)
+
+## Installation
+From your command prompt/termial go to your app's root folder and execute:
+`tns plugin add nativescript-joystick`
+
+## Usage
+#### XML:
+```XML
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
+  xmlns:js="nativescript-joystick">
+  <StackLayout>
+    <Label text="JoyStick"/>
+    
+    <Label text="{{'Angle:' + angle}}" textWrap="true" />
+    <Label text="{{'Power:' + power}}" textWrap="true" />
+
+    <js:JoyStick
+      padColor="green"
+      buttonColor="pink"
+      width="50%"
+      angle="{{angle}}"
+      power="{{power}}">
+    </js:JoyStick>
+  </StackLayout>
+</Page>
+```
+
+## Attributes
+**padColor - (color string)** - *optional*
+
+Attribute to specify the pad color to use.
+ 
+**buttonColor - (color string)** - *optional*
+
+Attribute to specify the button color to use.
+
+**angle - (number)** - *optional*
+
+Attribute to bind the button angle.
+Values range -180 to 180. Where 0: Left, 90: Up, 180 and -180: Right, -90: Down 
+
+**angle - (number)** - *optional*
+
+Attribute to bind the button power or how far it is from the centre.
+Values range 0 to 100. Where 0: centre, 100: at the edge.
+
+## Methods
+- **getPower()** - returns current Power value directly from the native component
+- **getAngle()** - returns current Angle value directly from the native component

No alert changes

Improved metrics

Total package byte prevSize

10336

increased by1.52%

Number of lines in readme file

58

increased by1060%

Worsened metrics

Lines of code

162

decreased by-19.8%

No dependency changes