Commit d54f70d0 authored by Romain Courteaud's avatar Romain Courteaud

erp5_document_scanner: unify video and cropper rendering

erp5_document_scanner: try to bypass cropper resize issue

but doesn't seems good :/

erp5_document_scanner: patch cropperjs

Always render cropper when resizing

erp5_document_scanner: limit video/image height

erp5_document_scanner: add related less file

erp5_document_scanner: disable the black layer around the image

erp5_document_scanner: fix the image/video size

erp5_document_scanner: restore cropbox data when resizing

erp5_document_scanner: improve image review

erp5_document_scanner: ensure img height is controlled
parent a21e7dcf
...@@ -15,13 +15,9 @@ div[data-gadget-url$="gadget_document_scanner.html"] .camera-output, ...@@ -15,13 +15,9 @@ div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
div[data-gadget-url$="gadget_document_scanner.html"] .canvas { div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
max-width: 100%; max-width: 100%;
width: auto; width: auto;
max-height: 500px;
filter: brightness(1); filter: brightness(1);
text-align: center; text-align: center;
} }
div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
min-height: 360px;
}
div[data-gadget-url$="gadget_document_scanner.html"] .page-number { div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
display: inline; display: inline;
} }
...@@ -98,9 +94,23 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn { ...@@ -98,9 +94,23 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
width: calc(6em + 1px); width: calc(6em + 1px);
height: calc(6em + 1px); height: calc(6em + 1px);
} }
div[data-gadget-url$="gadget_document_scanner.html"] .img-container { div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container {
height: 70vh;
}
div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container img {
max-height: 100%;
}
div[data-gadget-url$="gadget_document_scanner.html"] .img-container,
div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
/* Never limit the container height here */ /* Never limit the container height here */
max-width: 100%; position: relative;
width: 100%;
}
div[data-gadget-url$="gadget_document_scanner.html"] .img-container img,
div[data-gadget-url$="gadget_document_scanner.html"] .camera-input img,
div[data-gadget-url$="gadget_document_scanner.html"] .img-container video,
div[data-gadget-url$="gadget_document_scanner.html"] .camera-input video {
height: 70vh;
} }
div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before { div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
color: #000; color: #000;
......
...@@ -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.61113.55569.43315</string> </value> <value> <string>983.1627.17749.2013</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>1585816780.79</float> <float>1586178991.43</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -186,14 +186,19 @@ ...@@ -186,14 +186,19 @@
// creating Cropper is asynchronous // creating Cropper is asynchronous
return new RSVP.Promise(function (resolve, reject) { return new RSVP.Promise(function (resolve, reject) {
cropper = new Cropper(element, { cropper = new Cropper(element, {
// restrict the minimum canvas size to fill fit the container // restrict the minimum canvas size to fit within the container
viewMode: 3, viewMode: 2,
guides: true,
center: true,
background: false,
minContainerWidth: 1,
minContainerHeight: 1,
responsive: true,
restore: true,
// Avoid any cropper calculation or guessing // Avoid any cropper calculation or guessing
scalable: false, scalable: false,
// Please, DON'T touch on rotatable and checkOrientation. Removing it, rotatable: false,
// we will not be able to fix orientation before crop. checkOrientation: false,
rotatable: true,
checkOrientation: true,
zoomable: false, zoomable: false,
movable: false, movable: false,
data: data, data: data,
...@@ -726,8 +731,8 @@ ...@@ -726,8 +731,8 @@
div = domsugar('div', {'class': 'camera'}, [ div = domsugar('div', {'class': 'camera'}, [
buildPageTitle(gadget, result_list[0][2]), buildPageTitle(gadget, result_list[0][2]),
domsugar('div', {'class': 'img-container'}, [ domsugar('div', {'class': 'review-img-container'}, [
domsugar('img', {src: gadget.state['blob_url_' + gadget.state.page]}) domsugar('img', {src: gadget.state['blob_url_' + gadget.state.display_index]})
]), ]),
// XXX TODO: why is the button rendering different from the other pages? // XXX TODO: why is the button rendering different from the other pages?
domsugar('div', {'class': 'edit-picture'}, button_list), domsugar('div', {'class': 'edit-picture'}, button_list),
......
...@@ -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.62865.31516.35805</string> </value> <value> <string>982.62866.16795.56132</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>1585921095.31</float> <float>1585922429.02</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -55,7 +55,8 @@ ...@@ -55,7 +55,8 @@
} }
.cropper-modal { .cropper-modal {
background-color: #000; /* Disable the black layer around the image
background-color: #000;*/
opacity: 0.5; opacity: 0.5;
} }
......
...@@ -1793,38 +1793,31 @@ ...@@ -1793,38 +1793,31 @@
var handlers = { var handlers = {
resize: function resize() { resize: function resize() {
// Always render fully
// Otherwise, there are some display issue when increasing the window size (part of the canvas is hidden)
var options = this.options, var options = this.options,
container = this.container, container = this.container,
containerData = this.containerData; containerData = this.containerData;
var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH; var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH;
var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT; var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT;
if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
return;
}
var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
if (ratio !== 1 || container.offsetHeight !== containerData.height) { var canvasData;
var canvasData; var cropBoxData;
var cropBoxData;
if (options.restore) { canvasData = this.getCanvasData();
canvasData = this.getCanvasData(); cropBoxData = this.getCropBoxData();
cropBoxData = this.getCropBoxData();
}
this.render(); this.render();
this.setCanvasData(forEach(canvasData, function (n, i) {
canvasData[i] = n * ratio;
}));
this.setCropBoxData(forEach(cropBoxData, function (n, i) {
cropBoxData[i] = n * ratio;
}));
if (options.restore) {
this.setCanvasData(forEach(canvasData, function (n, i) {
canvasData[i] = n * ratio;
}));
this.setCropBoxData(forEach(cropBoxData, function (n, i) {
cropBoxData[i] = n * ratio;
}));
}
}
}, },
dblclick: function dblclick() { dblclick: function dblclick() {
if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) { if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {
......
...@@ -13,15 +13,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] { ...@@ -13,15 +13,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
.photo, .video, .camera-output, .canvas { .photo, .video, .camera-output, .canvas {
max-width: 100%; max-width: 100%;
width: auto; width: auto;
max-height: 500px;
filter: brightness(1); filter: brightness(1);
text-align: center; text-align: center;
} }
.camera-input {
min-height: 360px;
}
.page-number { .page-number {
display: inline; display: inline;
} }
...@@ -99,9 +94,20 @@ div[data-gadget-url$="gadget_document_scanner.html"] { ...@@ -99,9 +94,20 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
height: calc(6em + 1px); height: calc(6em + 1px);
} }
.img-container { .review-img-container {
height: 70vh;
img {
max-height: 100%;
}
}
.img-container, .camera-input {
/* Never limit the container height here */ /* Never limit the container height here */
max-width: 100%; position: relative;
width: 100%;
img, video {
height: 70vh;
}
} }
.btn-thumbnail:before { .btn-thumbnail:before {
......
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