Updated to latest code
This commit is contained in:
bartonstee
30
LICENSE
30
LICENSE
@@ -1,15 +1,15 @@
|
||||
The Apache License v2.0
|
||||
|
||||
Copyright 2020 Incentro Business Acceleration B.V.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
The Apache License v2.0
|
||||
|
||||
Copyright 2020 Incentro Business Acceleration B.V.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
50
README.md
50
README.md
@@ -1,25 +1,25 @@
|
||||
## BarcodeScanTorch
|
||||
Mendix Native Barcode scanner with torch functionality
|
||||
|
||||
## Usage
|
||||
For development:
|
||||
- Create customwidgets folder in root of project directory
|
||||
- Git clone this repo into customwidgets folder
|
||||
- Open command prompt in cloned folder
|
||||
- npm i
|
||||
- npm i react-native-camera
|
||||
- npm run dev / npm run build
|
||||
|
||||
Widget can now be used inside Mendix.
|
||||
|
||||
For plain usage:
|
||||
- Copy MPK file in releases to widgets directory.
|
||||
|
||||
## Demo project
|
||||
Not available yet.
|
||||
|
||||
## Issues, suggestions and feature requests
|
||||
https://github.com/IncentroBA/barcodescantorch/issues
|
||||
|
||||
## Development and contribution
|
||||
- Based on https://github.com/mendix/native-mobile-resources
|
||||
## BarcodeScanTorch
|
||||
Mendix Native Barcode scanner with torch functionality
|
||||
|
||||
## Usage
|
||||
For development:
|
||||
- Create customwidgets folder in root of project directory
|
||||
- Git clone this repo into customwidgets folder
|
||||
- Open command prompt in cloned folder
|
||||
- npm i
|
||||
- npm i react-native-camera
|
||||
- npm run dev / npm run build
|
||||
|
||||
Widget can now be used inside Mendix.
|
||||
|
||||
For plain usage:
|
||||
- Copy MPK file in releases to widgets directory.
|
||||
|
||||
## Demo project
|
||||
Not available yet.
|
||||
|
||||
## Issues, suggestions and feature requests
|
||||
https://github.com/IncentroBA/barcodescantorch/issues
|
||||
|
||||
## Development and contribution
|
||||
- Based on https://github.com/mendix/native-mobile-resources
|
||||
|
||||
BIN
dist/1.0.0/incentro.BarcodeScanTorch.mpk
vendored
BIN
dist/1.0.0/incentro.BarcodeScanTorch.mpk
vendored
Binary file not shown.
56
dist/tmp/widgets/BarcodeScanTorch.xml
vendored
56
dist/tmp/widgets/BarcodeScanTorch.xml
vendored
@@ -1,28 +1,28 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<widget id="incentro.barcodescantorch.BarcodeScanTorch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
|
||||
<name>Barcode scanner w/Torch</name>
|
||||
<description>Scan barcode and QR code values with added torch functionality.</description>
|
||||
<icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAElBMVEUAAABXV1dVVVVJsPhIsPdVVVWcEer3AAAABHRSTlMASeP9eof+WwAAAHJJREFUeAHtlzEKxTAMQ239r/tfuaHtFEpxIkog6C1e7AchixQXJsET5OQ2eIMo8LDNOQE7wegTOkEMspsAJGKE/iaBjDrlG7OAf6M89xdYYIEFBb4XtPF7n/sL1v2CWYoespSY56ysFw698uilS6995gADwwwpR7MpFwAAAABJRU5ErkJggg==</icon>
|
||||
<properties>
|
||||
<propertyGroup caption="General">
|
||||
<propertyGroup caption="Data source">
|
||||
<property key="barcode" type="attribute">
|
||||
<caption>Barcode</caption>
|
||||
<description>The attribute that will receive the scanned barcode value.</description>
|
||||
<attributeTypes>
|
||||
<attributeType name="String"/>
|
||||
</attributeTypes>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Events">
|
||||
<property key="onDetect" type="action" required="false">
|
||||
<caption>On detect</caption>
|
||||
<description/>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Common">
|
||||
<systemProperty key="Name"/>
|
||||
</propertyGroup>
|
||||
</propertyGroup>
|
||||
</properties>
|
||||
</widget>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<widget id="incentro.barcodescantorch.BarcodeScanTorch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
|
||||
<name>Barcode scanner w/Torch</name>
|
||||
<description>Scan barcode and QR code values with added torch functionality.</description>
|
||||
<icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAElBMVEUAAABXV1dVVVVJsPhIsPdVVVWcEer3AAAABHRSTlMASeP9eof+WwAAAHJJREFUeAHtlzEKxTAMQ239r/tfuaHtFEpxIkog6C1e7AchixQXJsET5OQ2eIMo8LDNOQE7wegTOkEMspsAJGKE/iaBjDrlG7OAf6M89xdYYIEFBb4XtPF7n/sL1v2CWYoespSY56ysFw698uilS6995gADwwwpR7MpFwAAAABJRU5ErkJggg==</icon>
|
||||
<properties>
|
||||
<propertyGroup caption="General">
|
||||
<propertyGroup caption="Data source">
|
||||
<property key="barcode" type="attribute">
|
||||
<caption>Barcode</caption>
|
||||
<description>The attribute that will receive the scanned barcode value.</description>
|
||||
<attributeTypes>
|
||||
<attributeType name="String"/>
|
||||
</attributeTypes>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Events">
|
||||
<property key="onDetect" type="action" required="false">
|
||||
<caption>On detect</caption>
|
||||
<description/>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Common">
|
||||
<systemProperty key="Name"/>
|
||||
</propertyGroup>
|
||||
</propertyGroup>
|
||||
</properties>
|
||||
</widget>
|
||||
|
||||
@@ -332,10 +332,10 @@ class BarcodeScanTorch extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
||||
return (Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.container },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"], { style: this.styles.preview, captureAudio: false, onBarCodeRead: this.onBarCodeReadHandler, flashMode: this.state.torchON ? react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.torch : react_native_camera__WEBPACK_IMPORTED_MODULE_2__["RNCamera"].Constants.FlashMode.off }),
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["View"], { style: this.styles.bottom },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? this.styles.switchOn : this.styles.switchOff },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? this.styles.textOn : this.styles.textOff },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleTorch, style: this.state.torchON ? this.styles.switchOff : this.styles.switchOn },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.torchON ? this.styles.textOff : this.styles.textOn },
|
||||
"\u21AF Lamp ",
|
||||
this.state.torchON ? "aan" : "uit")),
|
||||
this.state.torchON ? "uit" : "aan")),
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["TouchableOpacity"], { onPress: this.toggleAutoDetect, style: this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff },
|
||||
Object(react__WEBPACK_IMPORTED_MODULE_0__["createElement"])(react_native__WEBPACK_IMPORTED_MODULE_1__["Text"], { style: this.state.autoDetect ? this.styles.textOn : this.styles.textOff },
|
||||
"\u2551\u2588\u2551 Detectie ",
|
||||
|
||||
File diff suppressed because one or more lines are too long
22
dist/tmp/widgets/package.xml
vendored
22
dist/tmp/widgets/package.xml
vendored
@@ -1,11 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<package xmlns="http://www.mendix.com/package/1.0/">
|
||||
<clientModule name="BarcodeScanTorch" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
|
||||
<widgetFiles>
|
||||
<widgetFile path="BarcodeScanTorch.xml"/>
|
||||
</widgetFiles>
|
||||
<files>
|
||||
<file path="incentro/barcodescantorch"/>
|
||||
</files>
|
||||
</clientModule>
|
||||
</package>
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<package xmlns="http://www.mendix.com/package/1.0/">
|
||||
<clientModule name="BarcodeScanTorch" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
|
||||
<widgetFiles>
|
||||
<widgetFile path="BarcodeScanTorch.xml"/>
|
||||
</widgetFiles>
|
||||
<files>
|
||||
<file path="incentro/barcodescantorch"/>
|
||||
</files>
|
||||
</clientModule>
|
||||
</package>
|
||||
|
||||
41112
package-lock.json
generated
41112
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
66
package.json
66
package.json
@@ -1,33 +1,33 @@
|
||||
{
|
||||
"name": "barcodescantorch",
|
||||
"widgetName": "BarcodeScanTorch",
|
||||
"version": "1.0.0",
|
||||
"description": "Barcode scanner with torch functionality",
|
||||
"copyright": "2020 Incentro Business Acceleration B.V.",
|
||||
"author": "Bart Onstee",
|
||||
"config": {
|
||||
"projectPath": "../..//"
|
||||
},
|
||||
"packagePath": "incentro",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"build": "pluggable-widgets-tools build:native",
|
||||
"dev": "pluggable-widgets-tools start:native",
|
||||
"lint": "pluggable-widgets-tools lint",
|
||||
"lint:fix": "pluggable-widgets-tools lint:fix",
|
||||
"prerelease": "npm run lint",
|
||||
"release": "pluggable-widgets-tools release:native"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Bart Onstee/barcodescantorch/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mendix/pluggable-widgets-tools": "^8.12.0",
|
||||
"@types/big.js": "^4.0.5",
|
||||
"@types/react": "~16.9.0",
|
||||
"@types/react-native": "~0.61.23",
|
||||
"react-native-camera": "^3.40.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
{
|
||||
"name": "barcodescantorch",
|
||||
"widgetName": "BarcodeScanTorch",
|
||||
"version": "1.0.0",
|
||||
"description": "Barcode scanner with torch functionality",
|
||||
"copyright": "2020 Incentro Business Acceleration B.V.",
|
||||
"author": "Bart Onstee",
|
||||
"config": {
|
||||
"projectPath": "../..//"
|
||||
},
|
||||
"packagePath": "incentro",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"build": "pluggable-widgets-tools build:native",
|
||||
"dev": "pluggable-widgets-tools start:native",
|
||||
"lint": "pluggable-widgets-tools lint",
|
||||
"lint:fix": "pluggable-widgets-tools lint:fix",
|
||||
"prerelease": "npm run lint",
|
||||
"release": "pluggable-widgets-tools release:native"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Bart Onstee/barcodescantorch/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mendix/pluggable-widgets-tools": "^8.12.0",
|
||||
"@types/big.js": "^4.0.5",
|
||||
"@types/react": "~16.9.0",
|
||||
"@types/react-native": "~0.61.23",
|
||||
"react-native-camera": "^3.40.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
const base = require("@mendix/pluggable-widgets-tools/configs/prettier.base.json");
|
||||
|
||||
module.exports = {
|
||||
...base
|
||||
};
|
||||
const base = require("@mendix/pluggable-widgets-tools/configs/prettier.base.json");
|
||||
|
||||
module.exports = {
|
||||
...base
|
||||
};
|
||||
|
||||
@@ -1,183 +1,184 @@
|
||||
import { Component, createElement } from "react";
|
||||
import { View, TouchableOpacity, Text, TextInput, Vibration, ViewStyle, TextStyle } from "react-native";
|
||||
import { RNCamera } from "react-native-camera";
|
||||
import { ValueStatus } from "mendix";
|
||||
import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
|
||||
|
||||
export interface BarcodeScanTorchStyle extends Style {
|
||||
container: ViewStyle;
|
||||
preview: ViewStyle;
|
||||
bottom: ViewStyle;
|
||||
textBox: ViewStyle;
|
||||
textInput: TextStyle;
|
||||
switchOn: ViewStyle;
|
||||
switchOff: ViewStyle;
|
||||
textOn: TextStyle;
|
||||
textOff: TextStyle;
|
||||
textBarcode: TextStyle;
|
||||
|
||||
};
|
||||
|
||||
const defaultStyle: BarcodeScanTorchStyle = {
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'black'
|
||||
},
|
||||
preview: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
bottom: {
|
||||
justifyContent: 'flex-end',
|
||||
backgroundColor: 'white',
|
||||
alignItems: 'center',
|
||||
},
|
||||
textBox: {
|
||||
backgroundColor: 'white',
|
||||
alignItems: 'center',
|
||||
},
|
||||
textInput: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
width: 300,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#de712b',
|
||||
},
|
||||
switchOn: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#de712b',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '85%',
|
||||
},
|
||||
switchOff: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'white',
|
||||
borderWidth: 1,
|
||||
borderColor: '#de712b',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '85%',
|
||||
},
|
||||
textOn: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
margin: 50,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
textOff: {
|
||||
color: '#de712b',
|
||||
fontSize: 16,
|
||||
margin: 50,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
textBarcode: {
|
||||
color: '#de712b',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
};
|
||||
|
||||
import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
|
||||
|
||||
export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
|
||||
|
||||
interface State {
|
||||
torchON?: boolean;
|
||||
autoDetect?: boolean;
|
||||
textboxValue?: string;
|
||||
}
|
||||
|
||||
export class BarcodeScanTorch extends Component<Props, State> {
|
||||
onBarCodeReadHandler = this.onBarCodeRead.bind(this);
|
||||
manualBarcodeHandler = this.manualBarcode.bind(this);
|
||||
constructor(props: Props){
|
||||
super(props)
|
||||
this.toggleTorch = this.toggleTorch.bind(this)
|
||||
this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
|
||||
this.state = {
|
||||
torchON: false,
|
||||
autoDetect: true,
|
||||
textboxValue: '',
|
||||
}
|
||||
}
|
||||
|
||||
private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
|
||||
|
||||
toggleTorch(){
|
||||
this.setState({torchON: !this.state.torchON})
|
||||
}
|
||||
|
||||
toggleAutoDetect(){
|
||||
this.setState({autoDetect: !this.state.autoDetect})
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<View style={this.styles.container}>
|
||||
<RNCamera
|
||||
style={this.styles.preview}
|
||||
captureAudio={false}
|
||||
onBarCodeRead={this.onBarCodeReadHandler}
|
||||
flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
|
||||
/>
|
||||
<View style={this.styles.bottom}>
|
||||
<TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? this.styles.switchOn : this.styles.switchOff}>
|
||||
<Text style={this.state.torchON ? this.styles.textOn : this.styles.textOff}>↯ Lamp {this.state.torchON ? "aan" : "uit"}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff}>
|
||||
<Text style={this.state.autoDetect ? this.styles.textOn : this.styles.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
|
||||
</TouchableOpacity>
|
||||
{this.state.autoDetect ? <View></View> :
|
||||
<View style={this.styles.textBox}>
|
||||
<Text style={this.styles.textBarcode}>Barcode: </Text>
|
||||
<TextInput style={this.styles.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
|
||||
<TouchableOpacity onPress={this.manualBarcodeHandler} style={this.styles.switchOn}>
|
||||
<Text style={this.styles.textOn}>Naar machine</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
// Internal button for testing
|
||||
//<View style={this.styles.bottom}>
|
||||
//<TouchableOpacity onPress={this.toggleTorch} style={this.styles.switch}>
|
||||
//<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
|
||||
//</TouchableOpacity>
|
||||
//</View>
|
||||
//<Image style={this.styles.Image} source={this.state.torchOn ? flashon : flashoff} />
|
||||
|
||||
|
||||
private onBarCodeRead(event: { data: string }): void {
|
||||
if (this.state.autoDetect) {
|
||||
if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.barcode.setValue(event.data);
|
||||
|
||||
if (this.props.onDetect && this.props.onDetect.canExecute) {
|
||||
Vibration.vibrate(400);
|
||||
this.props.onDetect.execute();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.state.textboxValue !== event.data) {
|
||||
Vibration.vibrate(400);
|
||||
this.setState({textboxValue: event.data})
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private manualBarcode() {
|
||||
this.props.barcode.setValue(this.state.textboxValue);
|
||||
this.props.onDetect?.execute();
|
||||
}
|
||||
import { Component, createElement } from "react";
|
||||
import { View, TouchableOpacity, Text, TextInput, Vibration, ViewStyle, TextStyle } from "react-native";
|
||||
import { RNCamera } from "react-native-camera";
|
||||
import { ValueStatus } from "mendix";
|
||||
import { Style, mergeNativeStyles } from '@mendix/pluggable-widgets-tools';
|
||||
import { } from 'mendix';
|
||||
|
||||
export interface BarcodeScanTorchStyle extends Style {
|
||||
container: ViewStyle;
|
||||
preview: ViewStyle;
|
||||
bottom: ViewStyle;
|
||||
textBox: ViewStyle;
|
||||
textInput: TextStyle;
|
||||
switchOn: ViewStyle;
|
||||
switchOff: ViewStyle;
|
||||
textOn: TextStyle;
|
||||
textOff: TextStyle;
|
||||
textBarcode: TextStyle;
|
||||
|
||||
};
|
||||
|
||||
const defaultStyle: BarcodeScanTorchStyle = {
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'black'
|
||||
},
|
||||
preview: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
bottom: {
|
||||
justifyContent: 'flex-end',
|
||||
backgroundColor: 'white',
|
||||
alignItems: 'center',
|
||||
},
|
||||
textBox: {
|
||||
backgroundColor: 'white',
|
||||
alignItems: 'center',
|
||||
},
|
||||
textInput: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
width: 300,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#de712b',
|
||||
},
|
||||
switchOn: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#de712b',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '85%',
|
||||
},
|
||||
switchOff: {
|
||||
height: 45,
|
||||
margin: 5,
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'white',
|
||||
borderWidth: 1,
|
||||
borderColor: '#de712b',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '85%',
|
||||
},
|
||||
textOn: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
margin: 50,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
textOff: {
|
||||
color: '#de712b',
|
||||
fontSize: 16,
|
||||
margin: 50,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
textBarcode: {
|
||||
color: '#de712b',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
};
|
||||
|
||||
import { BarcodeScanTorchProps } from "../typings/BarcodeScanTorchProps";
|
||||
|
||||
export type Props = BarcodeScanTorchProps<BarcodeScanTorchStyle>;
|
||||
|
||||
interface State {
|
||||
torchON?: boolean;
|
||||
autoDetect?: boolean;
|
||||
textboxValue?: string;
|
||||
}
|
||||
|
||||
export class BarcodeScanTorch extends Component<Props, State> {
|
||||
onBarCodeReadHandler = this.onBarCodeRead.bind(this);
|
||||
manualBarcodeHandler = this.manualBarcode.bind(this);
|
||||
constructor(props: Props){
|
||||
super(props)
|
||||
this.toggleTorch = this.toggleTorch.bind(this)
|
||||
this.toggleAutoDetect = this.toggleAutoDetect.bind(this)
|
||||
this.state = {
|
||||
torchON: false,
|
||||
autoDetect: true,
|
||||
textboxValue: '',
|
||||
}
|
||||
}
|
||||
|
||||
private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);
|
||||
|
||||
toggleTorch(){
|
||||
this.setState({torchON: !this.state.torchON})
|
||||
}
|
||||
|
||||
toggleAutoDetect(){
|
||||
this.setState({autoDetect: !this.state.autoDetect})
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<View style={this.styles.container}>
|
||||
<RNCamera
|
||||
style={this.styles.preview}
|
||||
captureAudio={false}
|
||||
onBarCodeRead={this.onBarCodeReadHandler}
|
||||
flashMode={this.state.torchON ? RNCamera.Constants.FlashMode.torch: RNCamera.Constants.FlashMode.off}
|
||||
/>
|
||||
<View style={this.styles.bottom}>
|
||||
<TouchableOpacity onPress={this.toggleTorch} style={this.state.torchON ? this.styles.switchOff : this.styles.switchOn}>
|
||||
<Text style={this.state.torchON ? this.styles.textOff : this.styles.textOn}>↯ Lamp {this.state.torchON ? "uit" : "aan"}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this.toggleAutoDetect} style={this.state.autoDetect ? this.styles.switchOn : this.styles.switchOff}>
|
||||
<Text style={this.state.autoDetect ? this.styles.textOn : this.styles.textOff}>║█║ Detectie {this.state.autoDetect ? "aan" : "uit"}</Text>
|
||||
</TouchableOpacity>
|
||||
{this.state.autoDetect ? <View></View> :
|
||||
<View style={this.styles.textBox}>
|
||||
<Text style={this.styles.textBarcode}>Barcode: </Text>
|
||||
<TextInput style={this.styles.textInput} placeholder="Scan of vul handmatig" value={this.state.textboxValue} onChangeText={(text) => this.setState({textboxValue: text})}/>
|
||||
<TouchableOpacity onPress={this.manualBarcodeHandler} style={this.styles.switchOn}>
|
||||
<Text style={this.styles.textOn}>Naar machine</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
// Internal button for testing
|
||||
//<View style={this.styles.bottom}>
|
||||
//<TouchableOpacity onPress={this.toggleTorch} style={this.styles.switch}>
|
||||
//<Text style={{ color: 'white', fontSize: 16 }}>Zaklamp {this.state.torchON ? "uit" : "aan"}</Text>
|
||||
//</TouchableOpacity>
|
||||
//</View>
|
||||
//<Image style={this.styles.Image} source={this.state.torchOn ? flashon : flashoff} />
|
||||
|
||||
|
||||
private onBarCodeRead(event: { data: string }): void {
|
||||
if (this.state.autoDetect) {
|
||||
if (this.props.barcode.status !== ValueStatus.Available || event.data === this.props.barcode.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.barcode.setValue(event.data);
|
||||
|
||||
if (this.props.onDetect && this.props.onDetect.canExecute) {
|
||||
Vibration.vibrate(400);
|
||||
this.props.onDetect.execute();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.state.textboxValue !== event.data) {
|
||||
Vibration.vibrate(400);
|
||||
this.setState({textboxValue: event.data})
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private manualBarcode() {
|
||||
this.props.barcode.setValue(this.state.textboxValue);
|
||||
this.props.onDetect?.execute();
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,28 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<widget id="incentro.barcodescantorch.BarcodeScanTorch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
|
||||
<name>Barcode scanner w/Torch</name>
|
||||
<description>Scan barcode and QR code values with added torch functionality.</description>
|
||||
<icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAElBMVEUAAABXV1dVVVVJsPhIsPdVVVWcEer3AAAABHRSTlMASeP9eof+WwAAAHJJREFUeAHtlzEKxTAMQ239r/tfuaHtFEpxIkog6C1e7AchixQXJsET5OQ2eIMo8LDNOQE7wegTOkEMspsAJGKE/iaBjDrlG7OAf6M89xdYYIEFBb4XtPF7n/sL1v2CWYoespSY56ysFw698uilS6995gADwwwpR7MpFwAAAABJRU5ErkJggg==</icon>
|
||||
<properties>
|
||||
<propertyGroup caption="General">
|
||||
<propertyGroup caption="Data source">
|
||||
<property key="barcode" type="attribute">
|
||||
<caption>Barcode</caption>
|
||||
<description>The attribute that will receive the scanned barcode value.</description>
|
||||
<attributeTypes>
|
||||
<attributeType name="String"/>
|
||||
</attributeTypes>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Events">
|
||||
<property key="onDetect" type="action" required="false">
|
||||
<caption>On detect</caption>
|
||||
<description/>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Common">
|
||||
<systemProperty key="Name"/>
|
||||
</propertyGroup>
|
||||
</propertyGroup>
|
||||
</properties>
|
||||
</widget>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<widget id="incentro.barcodescantorch.BarcodeScanTorch" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
|
||||
<name>Barcode scanner w/Torch</name>
|
||||
<description>Scan barcode and QR code values with added torch functionality.</description>
|
||||
<icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAElBMVEUAAABXV1dVVVVJsPhIsPdVVVWcEer3AAAABHRSTlMASeP9eof+WwAAAHJJREFUeAHtlzEKxTAMQ239r/tfuaHtFEpxIkog6C1e7AchixQXJsET5OQ2eIMo8LDNOQE7wegTOkEMspsAJGKE/iaBjDrlG7OAf6M89xdYYIEFBb4XtPF7n/sL1v2CWYoespSY56ysFw698uilS6995gADwwwpR7MpFwAAAABJRU5ErkJggg==</icon>
|
||||
<properties>
|
||||
<propertyGroup caption="General">
|
||||
<propertyGroup caption="Data source">
|
||||
<property key="barcode" type="attribute">
|
||||
<caption>Barcode</caption>
|
||||
<description>The attribute that will receive the scanned barcode value.</description>
|
||||
<attributeTypes>
|
||||
<attributeType name="String"/>
|
||||
</attributeTypes>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Events">
|
||||
<property key="onDetect" type="action" required="false">
|
||||
<caption>On detect</caption>
|
||||
<description/>
|
||||
</property>
|
||||
</propertyGroup>
|
||||
<propertyGroup caption="Common">
|
||||
<systemProperty key="Name"/>
|
||||
</propertyGroup>
|
||||
</propertyGroup>
|
||||
</properties>
|
||||
</widget>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<package xmlns="http://www.mendix.com/package/1.0/">
|
||||
<clientModule name="BarcodeScanTorch" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
|
||||
<widgetFiles>
|
||||
<widgetFile path="BarcodeScanTorch.xml"/>
|
||||
</widgetFiles>
|
||||
<files>
|
||||
<file path="incentro/barcodescantorch"/>
|
||||
</files>
|
||||
</clientModule>
|
||||
</package>
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<package xmlns="http://www.mendix.com/package/1.0/">
|
||||
<clientModule name="BarcodeScanTorch" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
|
||||
<widgetFiles>
|
||||
<widgetFile path="BarcodeScanTorch.xml"/>
|
||||
</widgetFiles>
|
||||
<files>
|
||||
<file path="incentro/barcodescantorch"/>
|
||||
</files>
|
||||
</clientModule>
|
||||
</package>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"extends": "./node_modules/@mendix/pluggable-widgets-tools/configs/tsconfig.base.json"
|
||||
}
|
||||
{
|
||||
"extends": "./node_modules/@mendix/pluggable-widgets-tools/configs/tsconfig.base.json"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user