Skip to content

Commit 1a1221e

Browse files
msaelicesmsaelices
committed
Sample app which uses nativescript-ui-gauge. Not working yet. See nativescript-vue#293 
1 parent 014e812 commit 1a1221e

File tree

2 files changed

+143
-1
lines changed

2 files changed

+143
-1
lines changed

‎samples/app/app-with-gauge.js

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
const Vue = require('./nativescript-vue')
2+
const VueRouter = require('vue-router')
3+
const application = require('tns-core-modules/application')
4+
const observable_array = require('tns-core-modules/data/observable-array')
5+
6+
Vue.registerElement(
7+
'RadSideDrawer',
8+
() => require('nativescript-ui-sidedrawer').RadSideDrawer
9+
)
10+
11+
Vue.registerElement(
12+
'RadRadialGauge',
13+
() => require('nativescript-ui-gauge').RadRadialGauge
14+
)
15+
Vue.registerElement(
16+
'RadialScale',
17+
() => require('nativescript-ui-gauge').RadialScale
18+
)
19+
Vue.registerElement(
20+
'ScaleStyle',
21+
() => require('nativescript-ui-gauge').ScaleStyle
22+
)
23+
Vue.registerElement(
24+
'RadialBarIndicator',
25+
() => require('nativescript-ui-gauge').RadialBarIndicator
26+
)
27+
Vue.registerElement(
28+
'BarIndicatorStyle',
29+
() => require('nativescript-ui-gauge').BarIndicatorStyle
30+
)
31+
Vue.registerElement(
32+
'RadialNeedle',
33+
() => require('nativescript-ui-gauge').RadialNeedle
34+
)
35+
Vue.registerElement(
36+
'TitleStyle',
37+
() => require('nativescript-ui-gauge').TitleStyle
38+
)
39+
Vue.registerElement(
40+
'SubtitleStyle',
41+
() => require('nativescript-ui-gauge').SubtitleStyle
42+
)
43+
Vue.registerElement(
44+
'NeedleStyle',
45+
() => require('nativescript-ui-gauge').NeedleStyle
46+
)
47+
48+
Vue.directive('tkRadialGaugeScales', {
49+
inserted: function(el) {
50+
var scale = el._nativeView
51+
var gauge = el.parentNode._nativeView
52+
if (gauge.scales) {
53+
gauge.scales.push(scale)
54+
} else {
55+
gauge.scales = new observable_array.ObservableArray([scale])
56+
}
57+
}
58+
})
59+
Vue.directive('tkRadialScaleIndicators', {
60+
inserted: function(el) {
61+
var barIndicator = el._nativeView
62+
var scale = el.parentNode._nativeView
63+
if (scale.indicators) {
64+
scale.indicators.push(barIndicator)
65+
} else {
66+
scale.indicators = new observable_array.ObservableArray([barIndicator])
67+
}
68+
}
69+
})
70+
Vue.directive('tkRadialBarIndicatorStyle', {
71+
inserted: function(el) {
72+
el.parentNode._nativeView.indicatorStyle = el._nativeView
73+
}
74+
})
75+
Vue.directive('tkRadialGaugeTitleStyle', {
76+
inserted: function(el) {
77+
el.parentNode._nativeView.titleStyle = el._nativeView
78+
}
79+
})
80+
Vue.directive('tkRadialGaugeSubtitleStyle', {
81+
inserted: function(el) {
82+
el.parentNode._nativeView.subtitleStyle = el._nativeView
83+
}
84+
})
85+
Vue.directive('tkRadialNeedleStyle', {
86+
inserted: function(el) {
87+
el.parentNode._nativeView.needleStyle = el._nativeView
88+
}
89+
})
90+
Vue.directive('tkRadialScaleStyle', {
91+
inserted: function(el) {
92+
el.parentNode._nativeView.scaleStyle = el._nativeView
93+
}
94+
})
95+
96+
Vue.config.silent = false
97+
Vue.config.debug = true
98+
99+
new Vue({
100+
template: `
101+
<Frame>
102+
<Page>
103+
<ActionBar class="action-bar" title="Home" >
104+
<ActionItem text="Menu" @tap="$refs.drawer.nativeView.showDrawer()"/>
105+
</ActionBar>
106+
107+
<StackLayout>
108+
<RadRadialGauge>
109+
<RadialScale v-tkRadialGaugeScales minimum="0" maximum="6" radius="1.00">
110+
<ScaleStyle v-tkRadialScaleStyle majorTicksCount="7" majorTicksStrokeColor="#00ff00" majorTicksFillColor="#ffffff" majorTicksWidth="8" minorTicksCount="14" minorTicksFillColor="#ff00ff" lineThickness="0" labelsCount="7" ticksOffset="0" />
111+
<RadialBarIndicator v-tkRadialScaleIndicators minimum="0" maximum="1.2" location="0.92">
112+
<BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#ffffff" />
113+
</RadialBarIndicator>
114+
<RadialBarIndicator v-tkRadialScaleIndicators minimum="1.2" maximum="2.4" location="0.92">
115+
<BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#cccccc" />
116+
</RadialBarIndicator>
117+
<RadialBarIndicator v-tkRadialScaleIndicators minimum="2.4" maximum="3.6" location="0.92">
118+
<BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#aaaaaa" />
119+
</RadialBarIndicator>
120+
<RadialBarIndicator v-tkRadialScaleIndicators minimum="3.6" maximum="4.8" location="0.92">
121+
<BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#777777" />
122+
</RadialBarIndicator>
123+
<RadialBarIndicator v-tkRadialScaleIndicators minimum="4.8" maximum="6" location="0.92">
124+
<BarIndicatorStyle v-tkRadialBarIndicatorStyle fillColor="#444444" />
125+
</RadialBarIndicator>
126+
<RadialNeedle v-tkRadialScaleIndicators :value="gaugeValue" minimum="0" maximum="0.5">
127+
<NeedleStyle v-tkRadialNeedleStyle length="0.4" android:topWidth="4" ios:topWidth="3" android:bottomWidth="20" ios:bottomWidth="3" circleFillColor="#00ff00" circleInnerRadius="10" offset="-25" fillColor="#00ff00" />
128+
</RadialNeedle>
129+
</RadialScale>
130+
</RadRadialGauge>
131+
</StackLayout>
132+
</Page>
133+
</Frame>
134+
`,
135+
data() {
136+
return {
137+
gaugeValue: 0.2
138+
}
139+
},
140+
created() {}
141+
}).$start()

‎samples/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
"dependencies": {
1616
"nativescript-gradient": "^2.0.1",
1717
"nativescript-pager": "^7.1.3",
18-
"nativescript-ui-sidedrawer": "^4.1.1",
1918
"nativescript-theme-core": "^1.0.4",
19+
"nativescript-ui-sidedrawer": "^4.1.1",
20+
"nativescript-ui-gauge": "^3.6.0",
2021
"tns-core-modules": "4.0.0",
2122
"vue-router": "^3.0.1",
2223
"vuex": "^3.0.1"

0 commit comments

Comments
 (0)