Skip to content

erp5
erp5
Commit c023adda authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

erp5_document_scanner: add an auto crop button

parent 73d63a91
Show whitespace changes
Inline Side-by-side
Showing with 86 additions and 50 deletions
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css
View file @ c023adda
......@@ -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"] .retry-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;
padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14);
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml
View file @ c023adda
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>982.60162.8290.29303</string> </value>
<value> <string>982.61113.55569.43315</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1585815950.8</float>
<float>1585816780.79</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.html
View file @ c023adda
......@@ -6,6 +6,7 @@
data-i18n=Delete
data-i18n=Save
data-i18n=Capture
data-i18n=1-click Capture
data-i18n=Saving
data-i18n=Error
data-i18n=Page
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.xml
View file @ c023adda
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>982.60143.18861.24029</string> </value>
<value> <string>982.62512.65384.20480</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1585757797.7</float>
<float>1585905603.07</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js
View file @ c023adda
......@@ -407,7 +407,7 @@
video.play();
return RSVP.all([
getVideoDeviceList(),
gadget.getTranslationList(["Capture", "Change Camera", "Page"]),
gadget.getTranslationList(["Capture", "Change Camera", "Page", "1-click Capture"]),
buildPreviousThumbnailDom(gadget)
]);
})
......@@ -429,6 +429,15 @@
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'}, [
domsugar('div', {'class': 'camera-header'}, [
domsugar('h4', [
......@@ -580,7 +589,7 @@
}
// Capture the media stream
function captureAndRenderPicture(gadget) {
function captureAndRenderPicture(gadget, is_auto_crop) {
var settings = gadget.state.preferred_image_settings_data,
btn = gadget.element.querySelector(".take-picture-btn"),
image_capture = new window.ImageCapture(
......@@ -625,7 +634,25 @@
var img = result_list[1],
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
div = domsugar('div', {'class': 'camera'}, [
......@@ -639,16 +666,7 @@
// DON'T remove img from a div img-container.
// DON'T replace img by canvas.
domsugar("div", {"class": "img-container"}, [img]),
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]
})
]),
edit_picture_element,
result_list[2]
]);
......@@ -717,6 +735,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
//////////////////////////////////////////////////
......@@ -745,7 +789,8 @@
display_step: 'display_video',
page: 1,
page_count: 0,
camera_list: []
camera_list: [],
is_cropper_size_confirmed: false
})
.declareMethod('render', function (options) {
// This method is called during the ERP5 form rendering
......@@ -795,6 +840,9 @@
if (display_step === 'crop_picture') {
return captureAndRenderPicture(gadget);
}
if (display_step === 'auto_crop_picture') {
return captureAndRenderPicture(gadget, true);
}
if (display_step === 'show_picture') {
return renderSubmittedPicture(gadget);
}
......@@ -839,12 +887,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) {
return gadget.changeState({
display_step: 'display_video'
......@@ -877,30 +919,22 @@
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) {
return new RSVP.Queue()
.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 cropPicture(gadget);
}
return gadget.changeState(state_dict);
if (evt.target.className.indexOf("auto-crop-btn") !== -1) {
return gadget.changeState({
display_step: 'auto_crop_picture'
})
.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');
return cropPicture(gadget);
});
}
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml
View file @ c023adda
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>982.61109.60561.44919</string> </value>
<value> <string>982.62635.64377.64716</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1585815745.95</float>
<float>1585917286.2</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt
View file @ c023adda
......@@ -45,7 +45,7 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
}
.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;
padding: 3pt;
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7