Commit b473603b authored by Romain Courteaud's avatar Romain Courteaud

erp5_document_scanner: add an auto crop button

parent e50a72e4
...@@ -50,7 +50,8 @@ div[data-gadget-url$="gadget_document_scanner.html"] .capture-btn, ...@@ -50,7 +50,8 @@ div[data-gadget-url$="gadget_document_scanner.html"] .capture-btn,
div[data-gadget-url$="gadget_document_scanner.html"] .delete-btn, div[data-gadget-url$="gadget_document_scanner.html"] .delete-btn,
div[data-gadget-url$="gadget_document_scanner.html"] .retry-btn, div[data-gadget-url$="gadget_document_scanner.html"] .retry-btn,
div[data-gadget-url$="gadget_document_scanner.html"] .change-camera-btn, div[data-gadget-url$="gadget_document_scanner.html"] .change-camera-btn,
div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn { div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn,
div[data-gadget-url$="gadget_document_scanner.html"] .auto-crop-btn {
color: #212529; color: #212529;
padding: 3pt; padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
......
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>982.60019.31334.2372</string> </value> <value> <string>982.61113.55569.43315</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1585753245.18</float> <float>1585816780.79</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
data-i18n=Delete data-i18n=Delete
data-i18n=Save data-i18n=Save
data-i18n=Capture data-i18n=Capture
data-i18n=1-click Capture
data-i18n=Saving data-i18n=Saving
data-i18n=Error data-i18n=Error
data-i18n=Page data-i18n=Page
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>982.60143.18861.24029</string> </value> <value> <string>982.62512.65384.20480</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1585757797.7</float> <float>1585905603.07</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -403,7 +403,7 @@ ...@@ -403,7 +403,7 @@
video.play(); video.play();
return RSVP.all([ return RSVP.all([
getVideoDeviceList(), getVideoDeviceList(),
gadget.getTranslationList(["Capture", "Change Camera", "Page"]), gadget.getTranslationList(["Capture", "Change Camera", "Page", "1-click Capture"]),
buildPreviousThumbnailDom(gadget) buildPreviousThumbnailDom(gadget)
]); ]);
}) })
...@@ -425,6 +425,15 @@ ...@@ -425,6 +425,15 @@
text: result_list[1][0] text: result_list[1][0]
})); }));
if (gadget.state.is_cropper_size_confirmed) {
button_list.push(
domsugar('button', {type: 'button',
'class': 'auto-crop-btn ui-icon-fast-forward ui-btn-icon-left',
text: result_list[1][3]
})
);
}
div = domsugar('div', {'class': 'camera'}, [ div = domsugar('div', {'class': 'camera'}, [
domsugar('div', {'class': 'camera-header'}, [ domsugar('div', {'class': 'camera-header'}, [
domsugar('h4', [ domsugar('h4', [
...@@ -576,7 +585,7 @@ ...@@ -576,7 +585,7 @@
} }
// Capture the media stream // Capture the media stream
function captureAndRenderPicture(gadget) { function captureAndRenderPicture(gadget, is_auto_crop) {
var settings = gadget.state.preferred_image_settings_data, var settings = gadget.state.preferred_image_settings_data,
btn = gadget.element.querySelector(".take-picture-btn"), btn = gadget.element.querySelector(".take-picture-btn"),
image_capture = new window.ImageCapture( image_capture = new window.ImageCapture(
...@@ -621,7 +630,25 @@ ...@@ -621,7 +630,25 @@
var img = result_list[1], var img = result_list[1],
div, div,
defer = RSVP.defer(); defer = RSVP.defer(),
edit_picture_element;
if (!is_auto_crop) {
edit_picture_element = domsugar('div', {'class': 'edit-picture'}, [
domsugar('button', {type: 'button',
'class': 'reset-btn ui-btn-icon-left ui-icon-times',
text: result_list[0][0]
}),
domsugar('button', {type: 'button',
'class': 'confirm-btn ui-btn-icon-left ui-icon-check',
text: result_list[0][1]
})
]);
} else {
// Keep the previous disabled button list
// in order to reduce the flickering
edit_picture_element = gadget.element.querySelector('.edit-picture');
}
// Prepare the cropper canvas // Prepare the cropper canvas
div = domsugar('div', {'class': 'camera'}, [ div = domsugar('div', {'class': 'camera'}, [
...@@ -635,16 +662,7 @@ ...@@ -635,16 +662,7 @@
// DON'T remove img from a div img-container. // DON'T remove img from a div img-container.
// DON'T replace img by canvas. // DON'T replace img by canvas.
domsugar("div", {"class": "img-container"}, [img]), domsugar("div", {"class": "img-container"}, [img]),
domsugar('div', {'class': 'edit-picture'}, [ edit_picture_element,
domsugar('button', {type: 'button',
'class': 'reset-btn ui-btn-icon-left ui-icon-times',
text: result_list[0][0]
}),
domsugar('button', {type: 'button',
'class': 'confirm-btn ui-btn-icon-left ui-icon-check',
text: result_list[0][1]
})
]),
result_list[2] result_list[2]
]); ]);
...@@ -713,6 +731,32 @@ ...@@ -713,6 +731,32 @@
}); });
} }
function cropPicture(gadget) {
var canvas = gadget.cropper.getCroppedCanvas(),
state_dict;
state_dict = {
preferred_cropped_canvas_data: gadget.cropper.getData(),
display_step: 'display_video',
page: gadget.state.page + 1,
page_count: gadget.state.page_count + 1,
is_cropper_size_confirmed: true
};
// Keep image date, as user may need to display it again
state_dict['blob_canvas_' + gadget.state.page_count] = canvas;
// state_dict['blob_url_' + gadget.state.page_count] = data_url;
state_dict['blob_state_' + gadget.state.page_count] = 'saving';
state_dict['blob_uuid_' + gadget.state.page_count] = null;
return gadget.changeState(state_dict)
.push(function () {
// XXX Ensure that you have the active process relative url
addDetachedPromise(gadget, 'ajax_' + (gadget.state.page_count - 1),
handleAsyncStore(gadget, gadget.state.page_count - 1));
gadget.detached_promise_dict.cropper.cancel('Not needed anymore, as cropped');
});
}
////////////////////////////////////////////////// //////////////////////////////////////////////////
// Gadget API // Gadget API
////////////////////////////////////////////////// //////////////////////////////////////////////////
...@@ -741,7 +785,8 @@ ...@@ -741,7 +785,8 @@
display_step: 'display_video', display_step: 'display_video',
page: 1, page: 1,
page_count: 0, page_count: 0,
camera_list: [] camera_list: [],
is_cropper_size_confirmed: false
}) })
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
// This method is called during the ERP5 form rendering // This method is called during the ERP5 form rendering
...@@ -791,6 +836,9 @@ ...@@ -791,6 +836,9 @@
if (display_step === 'crop_picture') { if (display_step === 'crop_picture') {
return captureAndRenderPicture(gadget); return captureAndRenderPicture(gadget);
} }
if (display_step === 'auto_crop_picture') {
return captureAndRenderPicture(gadget, true);
}
if (display_step === 'show_picture') { if (display_step === 'show_picture') {
return renderSubmittedPicture(gadget); return renderSubmittedPicture(gadget);
} }
...@@ -835,12 +883,6 @@ ...@@ -835,12 +883,6 @@
}); });
} }
if (evt.target.className.indexOf("take-picture-btn") !== -1) {
return gadget.changeState({
display_step: 'crop_picture'
});
}
if (evt.target.className.indexOf("reset-btn") !== -1) { if (evt.target.className.indexOf("reset-btn") !== -1) {
return gadget.changeState({ return gadget.changeState({
display_step: 'display_video' display_step: 'display_video'
...@@ -873,30 +915,22 @@ ...@@ -873,30 +915,22 @@
return gadget.changeState(state_dict); return gadget.changeState(state_dict);
} }
if (evt.target.className.indexOf("take-picture-btn") !== -1) {
return gadget.changeState({
display_step: 'crop_picture'
});
}
if (evt.target.className.indexOf("confirm-btn") !== -1) { if (evt.target.className.indexOf("confirm-btn") !== -1) {
return new RSVP.Queue() return cropPicture(gadget);
.push(function () { }
var canvas = gadget.cropper.getCroppedCanvas();
state_dict = {
preferred_cropped_canvas_data: gadget.cropper.getData(),
display_step: 'display_video',
page: gadget.state.page + 1,
page_count: gadget.state.page_count + 1
};
// Keep image date, as user may need to display it again
state_dict['blob_canvas_' + gadget.state.page_count] = canvas;
// state_dict['blob_url_' + gadget.state.page_count] = data_url;
state_dict['blob_state_' + gadget.state.page_count] = 'saving';
state_dict['blob_uuid_' + gadget.state.page_count] = null;
return gadget.changeState(state_dict);
})
.push(function () {
// XXX Ensure that you have the active process relative url
addDetachedPromise(gadget, 'ajax_' + (gadget.state.page_count - 1),
handleAsyncStore(gadget, gadget.state.page_count - 1));
gadget.detached_promise_dict.cropper.cancel('Not needed anymore, as cropped'); if (evt.target.className.indexOf("auto-crop-btn") !== -1) {
return gadget.changeState({
display_step: 'auto_crop_picture'
})
.push(function () {
return cropPicture(gadget);
}); });
} }
......
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>982.59651.45192.29798</string> </value> <value> <string>982.62635.64377.64716</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1585728228.5</float> <float>1585917286.2</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -44,7 +44,7 @@ div[data-gadget-url$="gadget_document_scanner.html"] { ...@@ -44,7 +44,7 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
} }
.reset-btn, .confirm-btn, .edit-btn, .take-picture-btn, .capture-btn, .reset-btn, .confirm-btn, .edit-btn, .take-picture-btn, .capture-btn,
.delete-btn, .retry-btn, .change-camera-btn, .confirm-btn { .delete-btn, .retry-btn, .change-camera-btn, .confirm-btn, .auto-crop-btn {
color: #212529; color: #212529;
padding: 3pt; padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
......
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