Skip to content

Commit 84a671f

Browse files
bradmartinbradmartin
committed
bindable color/width for the pen - added definition
1 parent 6f4efc3 commit 84a671f

18 files changed

+305
-94
lines changed

‎.npmignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55
*.sln
66
demo/
77
screens/
8-
*.gitattributes
8+
*.gitattributes
9+
*.ts
10+
!index.d.ts
11+
!drawingpad.d.ts
12+
tsconfig.json

‎demo/app/app.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
margin: 20;
55
}
66

7-
button {
8-
font-size: 18;
7+
Button {
98
horizontal-align: center;
10-
margin: 10;
119
}
1210

1311
.red {

‎demo/app/app.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/app.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import * as application from 'application';
2+
application.start({ moduleName: 'main-page' });

‎demo/app/main-page.js‎

Lines changed: 14 additions & 33 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/main-page.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { EventData } from 'data/observable';
2+
import { Page } from 'ui/page';
3+
import { isAndroid, device } from "platform";
4+
import { Color } from "color";
5+
import { android } from "application";
6+
import { HelloWorldModel } from './main-view-model';
7+
8+
// Event handler for Page "loaded" event attached in main-page.xml
9+
export function pageLoaded(args: EventData) {
10+
// Get the event sender
11+
var page = <Page>args.object;
12+
page.bindingContext = new HelloWorldModel(page);
13+
14+
if (isAndroid && device.sdkVersion >= "21") {
15+
let window = android.startActivity.getWindow();
16+
window.setStatusBarColor(new Color("#336699").android);
17+
}
18+
}

‎demo/app/main-page.xml‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:DrawingPad="nativescript-drawingpad" loaded="pageLoaded">
2-
<ActionBar title="NativeScript-DrawingPad" color="#fff" backgroundColor="#03A9F4" />
1+
<Page
2+
xmlns="http://schemas.nativescript.org/tns.xsd"
3+
xmlns:DrawingPad="nativescript-drawingpad" loaded="pageLoaded">
4+
<ActionBar title="NativeScript-DrawingPad" color="#fff" backgroundColor="#3489db" />
35
<ScrollView>
46
<StackLayout>
5-
6-
<DrawingPad:DrawingPad
7-
backgroundColor="#222"
8-
margin="10" height="400"
9-
id="drawingPad"
10-
penColor="#ff4081" penWidth="3" />
11-
7+
<DrawingPad:DrawingPad backgroundColor="#222" id="drawingPad" margin="10" height="280" penColor="{{ penColor }}" penWidth="{{ penWidth }}" />
128
<StackLayout orientation="horizontal">
13-
<Button text="Get Drawing" tap="getMyDrawing" />
14-
<Button text="Clear Drawing" tap="clearMyDrawing" />
9+
<Button text="Get Drawing" tap="{{ getMyDrawing }}" />
10+
<Button text="Clear" tap="{{ clearMyDrawing }}" />
11+
<Button text="Pick Color" tap="{{ openColorPicker }}" />
1512
</StackLayout>
16-
13+
<GridLayout padding="10" rows="*, *" columns="*, *">
14+
<Label text="Pen Width:" class="message" textWrap="true" row="0" col="0" />
15+
<Label text="{{ penWidth }}" class="message" textWrap="true" row="0" col="1" />
16+
</GridLayout>
17+
<Slider margin="10" backgroundColor="#ff4801" id="widthSlider" value="{{ penWidth }}" maxValue="20" minValue="1" />
1718
</StackLayout>
1819
</ScrollView>
1920
</Page>

‎demo/app/main-view-model.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Observable, EventData, PropertyChangeData } from 'data/observable';
2+
import { Page } from 'ui/page';
3+
import { Color } from 'color';
4+
import { Switch } from 'ui/switch';
5+
import { Slider } from "ui/slider";
6+
import { ColorPicker } from 'nativescript-color-picker';
7+
import { DrawingPad } from 'nativescript-drawingpad';
8+
9+
export class HelloWorldModel extends Observable {
10+
private _myDrawingPad: DrawingPad;
11+
private _widthSlider: Slider;
12+
private _colorPicker: ColorPicker;
13+
14+
public penWidth: string;
15+
public penColor: string;
16+
17+
constructor(mainPage: Page) {
18+
super();
19+
this._myDrawingPad = <DrawingPad>mainPage.getViewById('drawingPad');
20+
this._widthSlider = <Slider>mainPage.getViewById('widthSlider');
21+
this._widthSlider.on('propertyChange', (args: PropertyChangeData) => {
22+
this.set('penWidth', args.value);
23+
});
24+
25+
this.penWidth = '5';
26+
this.penColor = '#3489db';
27+
this._colorPicker = new ColorPicker();
28+
}
29+
30+
31+
public getMyDrawing() {
32+
this._myDrawingPad.getDrawing().then((res) => {
33+
console.log(res);
34+
});
35+
}
36+
37+
public clearMyDrawing() {
38+
this._myDrawingPad.clearDrawing();
39+
}
40+
41+
public changePenColor() {
42+
this.set('penColor', '#ff4801');
43+
}
44+
45+
46+
public openColorPicker() {
47+
this._colorPicker.show('#3489db', 'RGB').then((result) => {
48+
console.log('color int: ' + result);
49+
this.set('penColor', new Color(result).android);
50+
}).catch((err) => {
51+
console.log(err);
52+
})
53+
}
54+
55+
}

‎demo/app/package.json‎

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,105 @@
1-
{"name":"tns-template-hello-world","main":"app.js","version":"1.5.1","author":{"name":"Telerik","email":"[email protected]"},"description":"Nativescript hello-world project template","license":"Apache-2.0","keywords":["telerik","mobile","nativescript","{N}","tns","appbuilder","template"],"repository":{"type":"git","url":"git://github.com/NativeScript/template-hello-world.git"},"bugs":{"url":"https://github.com/NativeScript/template-hello-world/issues"},"homepage":"https://github.com/NativeScript/template-hello-world","android":{"v8Flags":"--expose_gc"},"readme":"ERROR: No README data found!","_id":"[email protected]","_from":"[email protected]"}
1+
{
2+
"name": "tns-template-hello-world-ts",
3+
"main": "app.js",
4+
"version": "1.6.0",
5+
"author": {
6+
"name": "Telerik",
7+
"email": "[email protected]"
8+
},
9+
"description": "Nativescript hello-world-ts project template",
10+
"license": "Apache-2.0",
11+
"keywords": [
12+
"telerik",
13+
"mobile",
14+
"nativescript",
15+
"{N}",
16+
"tns",
17+
"appbuilder",
18+
"template"
19+
],
20+
"repository": {
21+
"type": "git",
22+
"url": "git+ssh://[email protected]/NativeScript/template-hello-world-ts.git"
23+
},
24+
"bugs": {
25+
"url": "https://github.com/NativeScript/template-hello-world-ts/issues"
26+
},
27+
"homepage": "https://github.com/NativeScript/template-hello-world-ts",
28+
"android": {
29+
"v8Flags": "--expose_gc"
30+
},
31+
"devDependencies": {
32+
"nativescript-dev-typescript": "^0.3.0"
33+
},
34+
"_id": "[email protected]",
35+
"_shasum": "a567c2b9a56024818c06596dab9629d155c5b8a8",
36+
"_resolved": "https://registry.npmjs.org/tns-template-hello-world-ts/-/tns-template-hello-world-ts-1.6.0.tgz",
37+
"_from": "tns-template-hello-world-ts@latest",
38+
"scripts": {},
39+
"_npmVersion": "2.14.7",
40+
"_nodeVersion": "4.2.2",
41+
"_npmUser": {
42+
"name": "enchev",
43+
"email": "[email protected]"
44+
},
45+
"dist": {
46+
"shasum": "a567c2b9a56024818c06596dab9629d155c5b8a8",
47+
"tarball": "http://registry.npmjs.org/tns-template-hello-world-ts/-/tns-template-hello-world-ts-1.6.0.tgz"
48+
},
49+
"maintainers": [
50+
{
51+
"name": "enchev",
52+
"email": "[email protected]"
53+
},
54+
{
55+
"name": "erjangavalji",
56+
"email": "[email protected]"
57+
},
58+
{
59+
"name": "fatme",
60+
"email": "[email protected]"
61+
},
62+
{
63+
"name": "hdeshev",
64+
"email": "[email protected]"
65+
},
66+
{
67+
"name": "kerezov",
68+
"email": "[email protected]"
69+
},
70+
{
71+
"name": "ligaz",
72+
"email": "[email protected]"
73+
},
74+
{
75+
"name": "nsndeck",
76+
"email": "[email protected]"
77+
},
78+
{
79+
"name": "rosen-vladimirov",
80+
"email": "[email protected]"
81+
},
82+
{
83+
"name": "sdobrev",
84+
"email": "[email protected]"
85+
},
86+
{
87+
"name": "tailsu",
88+
"email": "[email protected]"
89+
},
90+
{
91+
"name": "teobugslayer",
92+
"email": "[email protected]"
93+
},
94+
{
95+
"name": "valio.stoychev",
96+
"email": "[email protected]"
97+
}
98+
],
99+
"_npmOperationalInternal": {
100+
"host": "packages-5-east.internal.npmjs.com",
101+
"tmp": "tmp/tns-template-hello-world-ts-1.6.0.tgz_1455717516189_0.6427943941671401"
102+
},
103+
"directories": {},
104+
"readme": "ERROR: No README data found!"
105+
}

‎demo/package.json‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
{
2-
"nativescript": {
3-
"id": "org.nativescript.signaturepad",
4-
"tns-ios": {
5-
"version": "2.0.0"
6-
},
7-
"tns-android": {
8-
"version": "2.0.0"
9-
}
10-
},
11-
"dependencies": {
12-
"nativescript-drawingpad": "file:..",
13-
"tns-core-modules": "latest"
14-
},
15-
"devDependencies": {
16-
"babel-traverse": "6.9.0",
17-
"babel-types": "6.9.0",
18-
"babylon": "6.8.0",
19-
"filewalker": "0.1.2",
20-
"lazy": "1.0.11"
21-
}
22-
}
2+
"nativescript": {
3+
"id": "org.nativescript.demo",
4+
"tns-ios": {
5+
"version": "2.0.0"
6+
},
7+
"tns-android": {
8+
"version": "2.1.1"
9+
}
10+
},
11+
"dependencies": {
12+
"nativescript-color-picker": "^1.1.0",
13+
"nativescript-drawingpad": "file:..",
14+
"tns-core-modules": "^2.0.0"
15+
},
16+
"devDependencies": {
17+
"babel-traverse": "6.7.6",
18+
"babel-types": "6.7.7",
19+
"babylon": "6.7.0",
20+
"filewalker": "0.1.2",
21+
"lazy": "1.0.11",
22+
"nativescript-dev-typescript": "^0.3.2",
23+
"typescript": "^1.8.10"
24+
}
25+
}

0 commit comments

Comments
 (0)