turck PD67-UNI Series, Инструкция по эксплуатации

Страница: 42 / 51

Setting
Adapting the RFID app
42
Hans Turck GmbH & Co. KG | T +49 208 4952-0 | F +49 208 4952-264 | more@turck.com | www.turck.com
8.5 Adapting the RFID app
The Turck RFID app can be adapted using JavaScript. The following features of the Turck RFID
app can be changed with JavaScript:
n
Color scheme
n
Position of the buttons on the user interface
n
Behavior of the programmable buttons on the housing
8.5.1 RFID app – Source code
// always do this first:
'use strict'
;
// declare a new subclass of turck.App, called DefaultApp.
turck.DefaultApp = class extends turck.App {
// create a constructor for your class. We will call this constructor at the
// end of the script to create your instance of the app.
constructor() {
super();
// don't forget to call super!
// the names of these variables are pretty self-explanatory. When assigning
// colors, you can either use a hexadecimal code (e.g. "#FF0000" is red), or
// one of the built-in colors like those being used below. A full list of
// built-in colors is shown in section 8.5.1
this
.themeColor =
"@color/turck_yellow"
;
this .textColorOnThemeColor = "@color/black" ;
this
.buttonColor =
"@color/turck_yellow_darker"
;
this .buttonPressedColor = "@color/black" ;
this
.textColorOnBackground =
"@color/black"
;
this .titleViewUseBackgroundBasedOnThemeColor = true ;
}
// onLaunch gets called when the app first starts up. This function should
// define the things to be shown on the gadget page ("gadget page" is the
// in-code name for the app's home screen).
onLaunch(launchAction, launchPath, launchParameters) {
// showPage() tells the app to show a page. In this case, we define an
// instance of the GadgetPage class. Other Page class instances are shown
// further down in the code.
app.showPage(
new
turck.ui.GadgetPage({
// Show dotted background and curves
backgroundImage:
"@drawable/bg_dots"
,
backgroundImageMode: "tile" ,
// Some more color variables with self-explanatory names
underStatusBarColor:
"@color/turck_yellow"
,
gradientTopColor: "@color/home_gradient_top" ,
gradientBottomColor:
"@color/home_gradient_bottom"
,
curveColor: "@color/home_circles_stroke" ,
belowBottomCircleColor:
"@color/bottom_circle_fill"
,
// Since this is a gadget page, we must provide a list of "gadgets."
gadgets:[
// The first gadget is a turck.ui.Image. This is the Turck logo that
// appears at the top of the app when it first starts up.
new
turck.ui.Image({
position: [{type: "parent" , ratio: 0.5 , at: "center" },
{type:
"parent"
, offset: 0 , at:
"top"
}],
image: "@drawable/logo_turck" ,
backgroundColor: "@color/turck_yellow" ,
padding: [- 1 , 10 , - 1 , 10 ]
}),
// The next gadget is the BL Ident logo, which shows up at the top,
// offset just a little bit below the Turck logo defined above.
new turck.ui.Image({
position: [{type: "parent" , ratio: 0.5 , at: "center" },
{type: "parent" , offset: 65 , at: "top" }],
image:
"@drawable/logo_blident"
}),
// This gadget is a StatusImage. This doesn't do anything for a PD67,
// but on a phone connected to a PD20, it will show the status of the
// connection.
new turck.ui.StatusImage({
position: [{type:
"parent"
, ratio: 1.0 , offset: - 10 , at:
"right"
},
{type: "parent" , offset: 48 , at: "top" }],
displayVersionInfoOnTouch:
true
}),
// This gadget is a TextAndImageButton. The variables that define
// its appearance should be pretty straightforward.
new
turck.ui.TextAndImageButton({