Skip to content

Commit a60600f

Browse files
Tom-DynamsoftTom-Dynamsoft
committed
almost ready
1 parent b2bf4f5 commit a60600f

File tree

1 file changed

+53
-40
lines changed
  • 3.settings/0.all-settings/src/components

1 file changed

+53
-40
lines changed

‎3.settings/0.all-settings/src/components/SetUpUI.js‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ class SetUpUI extends React.Component {
99
constructor(props) {
1010
super(props);
1111
this.messageKeyBase = 300000;
12-
this.allBarcodes = 4263510015;//-31457281;
12+
this.allBarcodesFormats = 4263510015;//-31457281;
13+
this.allBarcodesFormats_2 = 32505859;
14+
1315
this.state = {
1416
showOneDItems: false,
1517
showDataBarItems: false,
@@ -53,7 +55,7 @@ class SetUpUI extends React.Component {
5355
nBarcodeFormatIds += parseInt(barcodeFormatInput.value);
5456
}
5557
if (!evt.target.checked)
56-
nBarcodeFormatIds = (this.allBarcodes - parseInt(evt.target.value)) & nBarcodeFormatIds;
58+
nBarcodeFormatIds = (this.allBarcodesFormats - parseInt(evt.target.value)) & nBarcodeFormatIds;
5759
this.updateBarcodeFormatsCheckStatus(nBarcodeFormatIds);
5860
}
5961
barcodeFormatsUpdate2 = evt => {
@@ -67,12 +69,12 @@ class SetUpUI extends React.Component {
6769
nBarcodeFormatIds += parseInt(barcodeFormatInput.value);
6870
}
6971
if (!evt.target.checked)
70-
nBarcodeFormatIds = (this.allBarcodes - parseInt(evt.target.value)) & nBarcodeFormatIds;
72+
nBarcodeFormatIds = (this.allBarcodesFormats_2 - parseInt(evt.target.value)) & nBarcodeFormatIds;
7173
if (parseInt(evt.target.value) === 0) {
7274
if (evt.target.checked)
7375
nBarcodeFormatIds = 0;
7476
else
75-
nBarcodeFormatIds = this.allBarcodes;
77+
nBarcodeFormatIds = this.allBarcodesFormats_2;
7678
}
7779
this.updateBarcodeFormatsCheckStatus2(nBarcodeFormatIds);
7880
}
@@ -109,10 +111,9 @@ class SetUpUI extends React.Component {
109111
if (nBarcodeFormatIds & parseInt(barcodeFormatInput.value))
110112
barcodeFormatInput.checked = true;
111113
}
112-
//////////////////////////////
113-
let newRTS = this.props.runtimeSettings;
114-
newRTS.region.
115-
this.props.updateRuntimeSettings(newRTS);
114+
let newRTS = this.props.runtimeSettings;
115+
newRTS.barcodeFormatIds = nBarcodeFormatIds;
116+
this.props.updateRuntimeSettings(newRTS);
116117
}
117118
updateBarcodeFormatsCheckStatus2 = nBarcodeFormatIds => {
118119
if (typeof (nBarcodeFormatIds) != "number") {
@@ -147,7 +148,9 @@ class SetUpUI extends React.Component {
147148
if (nBarcodeFormatIds & parseInt(barcodeFormatInput.value))
148149
barcodeFormatInput.checked = true;
149150
}
150-
this.updateSettings();
151+
let newRTS = this.props.runtimeSettings;
152+
newRTS.barcodeFormatIds_2 = nBarcodeFormatIds;
153+
this.props.updateRuntimeSettings(newRTS);
151154
}
152155
intermediateResultTypesUpdate = evt => {
153156
let elToUpdate = document.getElementById('ipt-runtimesettings-intermediateResultTypes');
@@ -163,34 +166,42 @@ class SetUpUI extends React.Component {
163166
intermediateResultTypesInput.checked = elToUpdate.value & parseInt(intermediateResultTypesInput.value);
164167
}
165168
}
166-
this.updateSettings();
169+
let newRTS = this.props.runtimeSettings;
170+
newRTS.intermediateResultTypes = parseInt(elToUpdate.value);
171+
this.props.updateRuntimeSettings(newRTS);
167172
}
168173
usePercentageOrNot = async evt => {
169174
let checkBox = evt.target;
175+
let reg = /^\d+$/;
170176
let parentElement = checkBox.parentElement;
171-
let oldText1 = parentElement.nextSibling.getAttribute("placeholder");
172-
let oldText2 = parentElement.nextSibling.nextSibling.getAttribute("placeholder");
173-
let oldText3 = parentElement.nextSibling.nextSibling.nextSibling.getAttribute("placeholder");
174-
let oldText4 = parentElement.nextSibling.nextSibling.nextSibling.nextSibling.getAttribute("placeholder");
177+
let regionParams = [];
178+
regionParams.push(parentElement.nextSibling);
179+
regionParams.push(parentElement.nextSibling.nextSibling);
180+
regionParams.push(parentElement.nextSibling.nextSibling.nextSibling);
181+
regionParams.push(parentElement.nextSibling.nextSibling.nextSibling.nextSibling);
175182
if (checkBox.checked) {
176-
if (oldText1.indexOf("%") === -1) {
177-
oldText1 = oldText1 + "(%)";
178-
oldText2 = oldText2 + "(%)";
179-
oldText3 = oldText3 + "(%)";
180-
oldText4 = oldText4 + "(%)";
183+
for (let param of regionParams) {
184+
if (param.getAttribute("placeholder").indexOf("%") === -1)
185+
param.placeholder = param.getAttribute("placeholder") + "(%)";
186+
if (reg.test(param.value)) { // Confirming it is a positive number
187+
if (parseInt(param.value) > 100)
188+
param.value = 100;
189+
} else { // If not a number, set it to 0
190+
param.value = param.value === "" ? "" : 0;
191+
}
181192
}
182193
} else {
183-
if (oldText1.indexOf("%") !== -1) {
184-
oldText1 = oldText1.substr(0, oldText1.length - 3);
185-
oldText2 = oldText2.substr(0, oldText2.length - 3);
186-
oldText3 = oldText3.substr(0, oldText3.length - 3);
187-
oldText4 = oldText4.substr(0, oldText4.length - 3);
194+
for (let param of regionParams) {
195+
if (param.getAttribute("placeholder").indexOf("%") !== -1)
196+
param.placeholder = param.getAttribute("placeholder").substr(0, param.getAttribute("placeholder").length - 3);
197+
if (reg.test(param.value)) { // Confirming it is a positive number
198+
if (parseInt(param.value) > 10000)
199+
param.value = 10000;
200+
} else { // If not a number, set it to 0
201+
param.value = param.value === "" ? "" : 0;
202+
}
188203
}
189204
}
190-
parentElement.nextSibling.placeholder = oldText1;
191-
parentElement.nextSibling.nextSibling.placeholder = oldText2;
192-
parentElement.nextSibling.nextSibling.nextSibling.placeholder = oldText3;
193-
parentElement.nextSibling.nextSibling.nextSibling.nextSibling.placeholder = oldText4;
194205
}
195206
updateRangeValue = evt => {
196207
evt.target.nextSibling.value = parseInt(evt.target.value) * parseInt(evt.target.getAttribute('factor'));
@@ -440,26 +451,27 @@ class SetUpUI extends React.Component {
440451
<div key={this.messageKeyBase + 1600 + key} className="div-runtimesettings-region-container" style={{ width: '100%' }}>
441452
<label>Region {key + 1} {key !== 0 && key === this.props.runtimeSettings.region.length - 1 ? <Button variant="light" onClick={this.removeRegion}>X</Button> : ""}</label>
442453
<label style={{ width: '100%', textAlign: 'center' }}>
443-
<input type="checkbox" onChange={this.updateSettings} id={"ipt-runtimesettings-regionMeasuredByPercentage_" + (key + 1).toString()} defaultChecked={value === null ? false : !!value.regionMeasuredByPercentage} onClick={this.usePercentageOrNot} />By Percentage
454+
<input type="checkbox" id={"ipt-runtimesettings-regionMeasuredByPercentage_" + (key + 1).toString()} defaultChecked={value === null ? false : !!value.regionMeasuredByPercentage} onClick={this.usePercentageOrNot} />By Percentage
444455
</label>
445-
<input type="kPercentage" onChange={this.updateSettings} id={"ipt-runtimesettings-regionTop_" + (key + 1).toString()} className="ipt-runtimesettings-regionTop" placeholder={value === null ? "top" : "top(%)"} defaultValue={value === null ? "" : value.regionTop} />
446-
<input type="kPercentage" onChange={this.updateSettings} id={"ipt-runtimesettings-regionLeft_" + (key + 1).toString()} className="ipt-runtimesettings-regionLeft" placeholder={value === null ? "left" : "left(%)"} defaultValue={value === null ? "" : value.regionLeft} />
447-
<input type="kPercentage" onChange={this.updateSettings} id={"ipt-runtimesettings-regionRight_" + (key + 1).toString()} className="ipt-runtimesettings-regionRight" placeholder={value === null ? "right" : "right(%)"} defaultValue={value === null ? "" : value.regionRight} />
448-
<input type="kPercentage" onChange={this.updateSettings} id={"ipt-runtimesettings-regionBottom_" + (key + 1).toString()} className="ipt-runtimesettings-regionBottom" placeholder={value === null ? "bottom" : "bottom(%)"} defaultValue={value === null ? "" : value.regionBottom} />
456+
<input type="kPercentage" id={"ipt-runtimesettings-regionTop_" + (key + 1).toString()} className="ipt-runtimesettings-regionTop" placeholder={value === null ? "top" : "top(%)"} defaultValue={value === null ? "" : value.regionTop} />
457+
<input type="kPercentage" id={"ipt-runtimesettings-regionLeft_" + (key + 1).toString()} className="ipt-runtimesettings-regionLeft" placeholder={value === null ? "left" : "left(%)"} defaultValue={value === null ? "" : value.regionLeft} />
458+
<input type="kPercentage" id={"ipt-runtimesettings-regionRight_" + (key + 1).toString()} className="ipt-runtimesettings-regionRight" placeholder={value === null ? "right" : "right(%)"} defaultValue={value === null ? "" : value.regionRight} />
459+
<input type="kPercentage" id={"ipt-runtimesettings-regionBottom_" + (key + 1).toString()} className="ipt-runtimesettings-regionBottom" placeholder={value === null ? "bottom" : "bottom(%)"} defaultValue={value === null ? "" : value.regionBottom} />
449460
</div>)}
450461
</>)
451462
:
452463
(<div className="div-runtimesettings-region-container" style={{ width: '100%' }}>
453464
<label>Region</label>
454465
<label style={{ width: '100%', textAlign: 'center' }}>
455-
<input type="checkbox" onChange={this.updateSettings} id="ipt-runtimesettings-regionMeasuredByPercentage_1" defaultChecked={!!this.props.runtimeSettings.region.regionMeasuredByPercentage} onClick={this.usePercentageOrNot} />By Percentage
466+
<input type="checkbox" id="ipt-runtimesettings-regionMeasuredByPercentage_1" defaultChecked={!!this.props.runtimeSettings.region.regionMeasuredByPercentage} onClick={this.usePercentageOrNot} />By Percentage
456467
</label>
457-
<input type="kPercentage" onChange={this.updateSettings} id="ipt-runtimesettings-regionTop_1" className="ipt-runtimesettings-regionTop" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "top(%)" : "top"} defaultValue={this.props.runtimeSettings.region.regionTop === 0 ? "" : this.props.runtimeSettings.region.regionTop} />
458-
<input type="kPercentage" onChange={this.updateSettings} id="ipt-runtimesettings-regionLeft_1" className="ipt-runtimesettings-regionLeft" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "left(%)" : "left"} defaultValue={this.props.runtimeSettings.region.regionLeft === 0 ? "" : this.props.runtimeSettings.region.regionLeft} />
459-
<input type="kPercentage" onChange={this.updateSettings} id="ipt-runtimesettings-regionRight_1" className="ipt-runtimesettings-regionRight" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "right(%)" : "right"} defaultValue={this.props.runtimeSettings.region.regionRight === 0 ? "" : this.props.runtimeSettings.region.regionRight} />
460-
<input type="kPercentage" onChange={this.updateSettings} id="ipt-runtimesettings-regionBottom_1" className="ipt-runtimesettings-regionBottom" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "bottom(%)" : "bottom"} defaultValue={this.props.runtimeSettings.region.regionBottom === 0 ? "" : this.props.runtimeSettings.region.regionBottom} />
468+
<input type="kPercentage" id="ipt-runtimesettings-regionTop_1" className="ipt-runtimesettings-regionTop" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "top(%)" : "top"} defaultValue={this.props.runtimeSettings.region.regionTop === 0 ? "" : this.props.runtimeSettings.region.regionTop} />
469+
<input type="kPercentage" id="ipt-runtimesettings-regionLeft_1" className="ipt-runtimesettings-regionLeft" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "left(%)" : "left"} defaultValue={this.props.runtimeSettings.region.regionLeft === 0 ? "" : this.props.runtimeSettings.region.regionLeft} />
470+
<input type="kPercentage" id="ipt-runtimesettings-regionRight_1" className="ipt-runtimesettings-regionRight" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "right(%)" : "right"} defaultValue={this.props.runtimeSettings.region.regionRight === 0 ? "" : this.props.runtimeSettings.region.regionRight} />
471+
<input type="kPercentage" id="ipt-runtimesettings-regionBottom_1" className="ipt-runtimesettings-regionBottom" placeholder={!!this.props.runtimeSettings.region.regionMeasuredByPercentage ? "bottom(%)" : "bottom"} defaultValue={this.props.runtimeSettings.region.regionBottom === 0 ? "" : this.props.runtimeSettings.region.regionBottom} />
461472
</div>)
462473
}
474+
<Button variant="primary" style={{ width: "80%", margin: "auto" }} onClick={this.updateSettings}>Set Region(s)</Button>
463475
</Card>
464476
<Card style={{ padding: '1vw', marginTop: '1vw' }} >
465477
<Card.Title style={{ width: '100%' }}>More Settings</Card.Title>
@@ -468,9 +480,10 @@ class SetUpUI extends React.Component {
468480
<input id="ipt-runtimesettings-barcodeFormatIds_2" onChange={this.updateBarcodeFormatsCheckStatus2} type="knumber" defaultValue={this.props.runtimeSettings.barcodeFormatIds_2} />
469481
<Card className="paddingOneVW allWidth">
470482
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} defaultValue="0" defaultChecked={this.props.runtimeSettings.barcodeFormatIds_2 === 0} id="null-barcodeFormatIds_2" />null</label>
471-
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} defaultValue="1" className="ipt-barcodeFormat-combo2" defaultChecked={(this.props.runtimeSettings.barcodeFormatIds_2 & 1) === 1} />NonStandard</label>
483+
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} defaultValue="1" className="ipt-barcodeFormat2" defaultChecked={(this.props.runtimeSettings.barcodeFormatIds_2 & 1) === 1} />NonStandard</label>
484+
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} defaultValue="2" className="ipt-barcodeFormat2" defaultChecked={(this.props.runtimeSettings.barcodeFormatIds_2 & 2) === 2} />Dot Code</label>
472485
<div className="div-PostalCodeFormat">
473-
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} className="ipt-barcodeFormat-combo2" defaultValue="0x01F00000" defaultChecked={(this.props.runtimeSettings.barcodeFormatIds_2 & 0x01F00000) === 0x01F00000} id="ipt-PostalCodeFormat" />Postal Codes</label>
486+
<label><input type="checkbox" onClick={this.barcodeFormatsUpdate2} className="ipt-barcodeFormat-combo2" defaultValue="0x1F00000" defaultChecked={(this.props.runtimeSettings.barcodeFormatIds_2 & 0x1F00000) === 0x1F00000} id="ipt-PostalCodeFormat" />Postal Codes</label>
474487
<Button variant="Light" id="btn-togglePostalCodes" className="btn-toggle" onClick={this.toggleShowPostalCodeItems}></Button>
475488
</div>
476489
<Card id="div-PostalCodeFormatContainer" className="div-1dFormatContainer" style={this.state.showPostalCodeItems ? style.show : style.hide}>

0 commit comments

Comments
 (0)