Commit 0ef0a611 authored by Gabriel Monnerat's avatar Gabriel Monnerat

erp5_document_scanner: Improve Cropper renderization

parent c29ff42a
......@@ -2,6 +2,15 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
text-align: center;
}
@media only screen and (max-width: 750px) {
div[data-gadget-url$="gadget_document_scanner.html"] .camera {
max-width: 90%;
}
div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
min-width: 35%;
}
}
div[data-gadget-url$="gadget_document_scanner.html"] .photo,
div[data-gadget-url$="gadget_document_scanner.html"] .video,
div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
......@@ -81,9 +90,14 @@ div[data-gadget-url$="gadget_document_scanner.html"] .thumbnail-list > button {
}
div[data-gadget-url$="gadget_document_scanner.html"] .upload-error {
border: 3px solid red;
border: 3px solid red;
}
div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
font-size: 26pt;
font-size: 13pt;
display: inline-grid !important;
padding: 18pt;
margin-left: 0.2em;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
}
\ No newline at end of file
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>981.53994.46343.31095</string> </value>
<value> <string>981.57889.14448.17681</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1581629502.14</float>
<float>1581863137.03</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -142,9 +142,7 @@
var j,
device,
len = info_list.length;
for (j = len - 1; j >= 0; j -= 1) {
// trick to select back camera in mobile
for (j = 0; j < len; j += 1) {
device = info_list[j];
if (device.kind === 'videoinput') {
if ((!current_device_id) ||
......@@ -209,13 +207,13 @@
src: gadget.state['blob_url_' + i]})]));
}
}
return domsugar("div", {"class": "thumbnail-area"}, [
domsugar('button', {type: 'button',
// Do not allow to show again the current image
disabled: (len === gadget.state.page - 1),
'class': 'new-btn ui-btn-icon-left ui-icon-plus'}),
domsugar('ol', {"class": "thumbnail-list"}, thumbnail_dom_list)
]);
thumbnail_dom_list.push(domsugar('button', {type: 'button',
text: 'New Page',
// Do not allow to show again the current image
disabled: (len === gadget.state.page - 1),
class: 'new-btn ui-btn-icon-left ui-icon-plus'
}));
return domsugar('ol', {"class": "thumbnail-list"}, thumbnail_dom_list);
});
}
......@@ -305,17 +303,28 @@
return image_capture.takePhoto({imageWidth: capabilities.imageWidth.max});
})
.push(function (blob) {
return createImageBitmap(blob);
})
.push(function (bitmap) {
var canvas = domsugar('canvas', {'class': 'canvas'});
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
return canvas;
})
.push(function (canvas) {
var new_canvas;
gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) {
new_canvas = domsugar('canvas', {'class': 'canvas',
'width': canvas.width,
'height': canvas.height
});
return new RSVP.Queue()
.push(function () {
return jIO.util.readBlobAsDataURL(blob);
})
.push(function (result) {
var canvas = domsugar('canvas', {'class': 'canvas'});
return new Promise(function (resolve) {
// XXX the correct usage is `new Caman()` but the library does not support it
caman(canvas, result.target.result, function () {
caman(new_canvas, canvas.toDataURL(), function () {
if (settings.brightness && settings.brightness !== 0) {
this.brightness(settings.brightness);
}
......@@ -326,31 +335,27 @@
this.greyscale();
}
this.render(function () {
canvas.toBlob(function (blob) {
resolve(blob);
});
resolve(new_canvas);
});
});
});
});
}
return blob;
return canvas;
})
.push(function (blob) {
.push(function (canvas) {
return RSVP.all([
gadget.getTranslationList(["Delete", "Save"]),
createImageBitmap(blob),
new Promise(function (resolve) {
resolve(canvas);
}),
buildPreviousThumbnailDom(gadget)
]);
})
.push(function (result_list) {
var bitmap = result_list[1],
canvas = domsugar('canvas', {'class': 'canvas'}),
var canvas = result_list[1],
defer = RSVP.defer();
// Prepare the cropper canvas
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
div = domsugar('div', {'class': 'camera'}, [
domsugar('div', {'class': 'camera-header'}, [
......@@ -376,7 +381,6 @@
// XXX How to change the dom only when cropper is ready?
// For now, it needs to access dom element size
gadget.element.replaceChild(div, gadget.element.firstElementChild);
addDetachedPromise(gadget, 'cropper',
handleCropper(canvas,
gadget.state.preferred_cropped_canvas_data,
......@@ -519,7 +523,7 @@
// if display_step is not modified
return buildPreviousThumbnailDom(gadget)
.push(function (result) {
thumbnail_container = gadget.element.querySelector('.thumbnail-area');
thumbnail_container = gadget.element.querySelector('.thumbnail-list');
thumbnail_container.parentElement.replaceChild(
result,
thumbnail_container
......
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>981.54005.25628.18841</string> </value>
<value> <string>981.57848.5692.33382</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1581630274.1</float>
<float>1581860732.16</float>
<string>UTC</string>
</tuple>
</state>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment