Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
Customized Menupopup On Grid Header
5hiepgau172.71.211.10gig0j7May 4, 2024 5:33:29 AMlinkAnother new ZK fiddle
4hiepgau172.68.225.142gig0j7May 4, 2024 5:31:25 AMlinkAnother new ZK fiddle
3hiepgau172.71.218.113gig0j7May 3, 2024 11:46:46 PMlinkAnother new ZK fiddle
2hiepgau162.158.178.201gig0j7May 3, 2024 11:40:57 PMlinkAnother new ZK fiddle
1hiepgau162.158.179.103gig0j7May 3, 2024 10:49:45 PMlinkcustom menu on grid
7hiepgau172.71.214.52261rcaiMay 3, 2024 9:27:35 PMlinkcustom menu on grid
6hiepgau172.71.214.53261rcaiMay 3, 2024 9:26:52 PMlinkcustom menu on grid
5hiepgau172.71.214.53261rcaiMay 3, 2024 9:25:26 PMlinkcustom menu on grid
4hiepgau162.158.114.139261rcaiMay 3, 2024 9:20:17 PMlinkAnother new ZK fiddle
1guest172.70.80.2021nil9qsMay 3, 2024 2:07:26 PMlinkBarcodescanner use in Modal Window
6guest162.158.95.20235ck08dApr 25, 2024 10:24:03 AMlinkresources
index.zulzul<zk>
<script><![CDATA[
zk.afterLoad('zkmax.barscanner', function () {
/* can't use passed wgt in a function closure because the wgt in a function closre is always set to the first passed value, and if this specific onDetected event function is not redefined in the second call it was still referencing to the original wgt*/
var barcodescanner;
zkmax.barscanner.Barcodescanner._quaggaInit = function (wgt, video, canvas, target) {
//zkmax.barscanner.Barcodescanner.quaggaApp.init(wgt);
var readerType = [],
reader = wgt._QUAGGAReader;
barcodescanner = wgt;
wgt.debug = false;
reader._ready = false;
readerType = zkmax.barscanner.Barcodescanner._quaggaTypeFilter(wgt); //Before quagga.init, the video status should be 4, so it has videoWidth and videoHeight attribute to set the
//size of canvas
new Promise(function (resolve, reject) {
var waitVideo = setInterval(function () {
if (video.readyState == 4) {
clearInterval(waitVideo);
resolve();
}
}, 50, barcodescanner);
}).then(function () {
reader.init({
locate: true,
inputStream: {
name: 'Live',
type: 'LiveStream',
target: target,
// Or '#yourElement' (optional)
area: {
// defines rectangle of the detection/localization area
top: '0%',
// top offset
right: '0%',
// right offset
left: '0%',
// left offset
bottom: '0%' // bottom offset
}
},
frequency: 1000,
decoder: {
readers: readerType,
// List of active readers
debug: {
drawBoundingBox: false,
showFrequency: false,
drawScanline: false,
showPattern: false
},
multiple: false
},
locator: {
halfSample: false,
patchSize: 'medium',
// x-small, small, medium, large, x-large
debug: {
showCanvas: barcodescanner.debug,
showPatches: barcodescanner.debug,
showFoundPatches: barcodescanner.debug,
showSkeleton: barcodescanner.debug,
showLabels: barcodescanner.debug,
showPatchLabels: barcodescanner.debug,
showRemainingPatchLabels: barcodescanner.debug,
boxFromPatches: {
showTransformed: barcodescanner.debug,
showTransformedBox: barcodescanner.debug,
showBB: barcodescanner.debug
}
}
},
debug: barcodescanner.debug
}, function (err) {
if (err) {
zk.error(err);
return;
}
reader.canvas = jq.extend(true, {}, zkmax.barscanner.quagga.canvas);
reader._ready = true;
reader._reset = true;
reader._consistencyBuffer = [];
});
});
var onProcessedCallback = function (result) {
if (barcodescanner.$n() == null) {
reader.offProcessed(onProcessedCallback);
return;
}
var q = zkmax.barscanner.quagga,
drawingCanvas = barcodescanner.$n('canvas'),
drawingCtx = drawingCanvas.getContext('2d');
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute('width')), parseInt(drawingCanvas.getAttribute('height')));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
q.ImageDebug.drawPath(box, {
x: 0,
y: 1
}, drawingCtx, {
color: 'green',
lineWidth: 2
});
});
}
if (result.box) q.ImageDebug.drawPath(result.box, {
x: 0,
y: 1
}, drawingCtx, {
color: 'blue',
lineWidth: 2
});
if (result.codeResult && result.codeResult.code) q.ImageDebug.drawPath(result.line, {
x: 'x',
y: 'y'
}, drawingCtx, {
color: 'red',
lineWidth: 3
});
}
}
reader.onProcessed(onProcessedCallback);
reader.onDetected(function (result) {
if (result[0] != undefined) {
result = result[0];
}
var errors = result.codeResult.decodedCodes.filter(function (i) {
return i.error !== undefined;
}).map(function (i) {
return i.error;
}),
errorFactor = 0;
if (errors.length > 0) {
// ZK-4498: errors is empty in codabar
var errorSum = errors.reduce(function (prev, next) {
return prev + next;
});
errorFactor = errorSum / errors.length;
}
if (errorFactor <= barcodescanner._errorAcceptance) {
var format = result.codeResult.format.replace('_', ''),
value = result.codeResult.code,
buf = reader._consistencyBuffer;
buf.push(value);
if (buf.length > barcodescanner._consistencyBufferSize) buf.shift();
if (buf.filter(function (v) {
return v === value;
}).length >= barcodescanner._consistencyThreshold) {
reader._consistencyBuffer = [];
barcodescanner._doDetect(format, value);
reader.processing = false;
reader.pause();
}
}
});
};
zkmax.barscanner.Barcodescanner._initLibrary();
});//zk.afterLoad
]]>
</script>
<window border="normal" title="hello" use="pkg$.TestComposer">
</window>
</zk>
TestComposer.javajavaimport org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zkmax.zul.Barcodescanner;
import org.zkoss.zkmax.zul.event.DetectEvent;
import org.zkoss.zul.Button;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;
public class TestComposer extends Window {
private static final long serialVersionUID = 1L;
public void onCreate() {
Window comp = this;
Vbox hbox = new Vbox();
hbox.setHflex("1");
hbox.setVflex("1");
hbox.setParent(this);
Textbox textbox = new Textbox();
textbox.setMultiline(true);
textbox.setHeight("100px");
textbox.setParent(hbox);
Button button = new Button("1. Only first Barcode scan works");
button.addEventListener(Events.ON_CLICK, getEventListener(comp, textbox, "code128"));
button.setParent(hbox);
button = new Button("2. Combination 2d + 1d zk error after second use");
button.addEventListener(Events.ON_CLICK, getEventListener(comp, textbox, "qr"));
button.setParent(hbox);
Barcodescanner barcodeScanner = new Barcodescanner();
barcodeScanner.setType( "code128");
barcodeScanner.setContinuous(false);
barcodeScanner.setInterval(500);
barcodeScanner.setHflex("1");
barcodeScanner.setVflex("1");
barcodeScanner.setConstraintsString("{\r\n"
+ " \"video\": {\r\n"
+ " \"facingMode\": {\r\n"
+ " \"ideal\": \"environment\"\r\n"
+ " },\r\n"
+ " \"width\": {\r\n"
+ " \"min\": 1024,\r\n"
+ " \"ideal\": 1280,\r\n"
+ " \"max\": 1920\r\n"
+ " },\r\n"
+ " \"height\": {\r\n"
+ " \"min\": 576,\r\n"
+ " \"ideal\": 720,\r\n"
+ " \"max\": 1080\r\n"
+ " }\r\n"
+ " }\r\n"
+ "}");
barcodeScanner.addEventListener("onDetect", new EventListener<DetectEvent>() {
@Override
public void onEvent(DetectEvent arg0) throws Exception {
barcodeScanner.setEnable(false);
textbox.setValue(arg0.getResult() + "\r\n" + textbox.getValue());
}
});
barcodeScanner.setParent(hbox);
}
private EventListener<Event> getEventListener(Window comp, final Textbox textbox, String codeType) {
return new EventListener<Event>() {
@Override
public void onEvent(Event arg0) throws Exception {
Window window = new Window("Barcodescanner", "normal", true);
window.setWidth("300px");
window.setHeight("300px");
Hbox hbox = new Hbox();
hbox.setHflex("1");
hbox.setVflex("1");
hbox.setParent(window);
Barcodescanner barcodeScanner = new Barcodescanner();
barcodeScanner.setType(codeType);
barcodeScanner.setContinuous(false);
barcodeScanner.setInterval(500);
barcodeScanner.setHflex("1");
barcodeScanner.setVflex("1");
barcodeScanner.setConstraintsString("{\r\n"
+ " \"video\": {\r\n"
+ " \"facingMode\": {\r\n"
+ " \"ideal\": \"environment\"\r\n"
+ " },\r\n"
+ " \"width\": {\r\n"
+ " \"min\": 1024,\r\n"
+ " \"ideal\": 1280,\r\n"
+ " \"max\": 1920\r\n"
+ " },\r\n"
+ " \"height\": {\r\n"
+ " \"min\": 576,\r\n"
+ " \"ideal\": 720,\r\n"
+ " \"max\": 1080\r\n"
+ " }\r\n"
+ " }\r\n"
+ "}");
barcodeScanner.addEventListener("onDetect", new EventListener<DetectEvent>() {
@Override
public void onEvent(DetectEvent arg0) throws Exception {
barcodeScanner.setEnable(false);
textbox.setValue(arg0.getResult() + "\r\n" + textbox.getValue());
window.onClose();
}
});
barcodeScanner.setParent(hbox);
window.setParent(comp);
window.doModal();
}
};
}
}