audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[MIG] web_widget_image_webcam: Migration to 16.0

Browse Source
This commit is contained in:
emlafza
2022-11-29 15:49:12 +01:00
committed by OCA-git-bot
parent fceed2bfc0
commit 0752d33f03
5 changed files with 117 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
web_widget_image_webcam/static/src/js/webcam_widget.js
View File

@@ -9,19 +9,19 @@ odoo.define("web_widget_image_webcam.webcam_widget", function (require) {
var core = require("web.core");
var rpc = require("web.rpc");
var Dialog = require("web.Dialog");
var FieldBinaryImage = require("web.basic_fields").FieldBinaryImage;
const {patch} = require("@web/core/utils/patch");
const {ImageField} = require("@web/views/fields/image/image_field");
var _t = core._t;
var QWeb = core.qweb;
FieldBinaryImage.include({
_render: function () {
this._super();
var self = this,
WebCamDialog = $(QWeb.render("WebCamDialog")),
img_data = false;
const getWebcamFlashFallbackModeConfig = rpc.query({
model: "ir.config_parameter",
method: "get_webcam_flash_fallback_mode_config",
});
patch(ImageField.prototype, "web_widget_image_webcam", {
async _setWebcamParams() {
// ::webcamjs:: < https://github.com/jhuckaby/webcamjs >
// Webcam: Set Custom Parameters
Webcam.set({
@@ -31,107 +31,94 @@ odoo.define("web_widget_image_webcam.webcam_widget", function (require) {
dest_height: 240,
image_format: "jpeg",
jpeg_quality: 90,
force_flash: false,
force_flash: (await getWebcamFlashFallbackModeConfig) === "1",
fps: 45,
swfURL: "/web_widget_image_webcam/static/src/lib/webcam.swf",
});
},
rpc.query({
model: "ir.config_parameter",
method: "get_webcam_flash_fallback_mode_config",
}).then(function (default_flash_fallback_mode) {
if (default_flash_fallback_mode === 1) {
Webcam.set({
/*
:: Important Note about Chrome 47+ :: < https://github.com/jhuckaby/webcamjs#important-note-for-chrome-47 >
Setting "force_flash" to "true" will always run in Adobe Flash fallback mode on Chrome, but it is not desirable.
*/
force_flash: true,
});
}
onWebcamClicked() {
var self = this,
WebCamDialog = $(QWeb.render("WebCamDialog")),
img_data = false;
self._setWebcamParams();
var dialog = new Dialog(self, {
size: "large",
dialogClass: "o_act_window",
title: _t("WebCam Booth"),
$content: WebCamDialog,
buttons: [
{
text: _t("Take Snapshot"),
classes: "btn-primary take_snap_btn",
click: function () {
Webcam.snap(function (data) {
img_data = data;
// Display Snap besides Live WebCam Preview
WebCamDialog.find("#webcam_result").html(
'<img src="' + img_data + '"/>'
);
});
if (Webcam.live) {
// Remove "disabled" attr from "Save & Close" button
$(".save_close_btn").removeAttr("disabled");
}
},
},
{
text: _t("Save & Close"),
classes: "btn-primary save_close_btn",
close: true,
click: function () {
var img_data_base64 = img_data.split(",")[1];
/*
Size in base64 is approx 33% overhead the original data size.
Source: -> http://stackoverflow.com/questions/11402329/base64-encoded-image-size
-> http://stackoverflow.com/questions/6793575/estimating-the-size-of-binary-data-encoded-as-a-b64-string-in-python
-> https://en.wikipedia.org/wiki/Base64
[ The ratio of output bytes to input bytes is 4:3 (33% overhead).
Specifically, given an input of n bytes, the output will be "4[n/3]" bytes long in base64,
including padding characters. ]
*/
// From the above info, we doing the opposite stuff to find the approx size of Image in bytes.
var approx_img_size =
3 * (img_data_base64.length / 4) -
(img_data_base64.match(/[=]+$/g) || []).length;
// Like... "3[n/4]"
// Upload image in Binary Field
self.onFileUploaded({
size: approx_img_size,
name: "web-cam-preview.jpeg",
type: "image/jpeg",
data: img_data_base64,
});
},
},
{
text: _t("Close"),
close: true,
},
],
}).open();
dialog.opened().then(function () {
Webcam.attach("#live_webcam");
// At time of Init "Save & Close" button is disabled
$(".save_close_btn").attr("disabled", "disabled");
// Placeholder Image in the div "webcam_result"
WebCamDialog.find("#webcam_result").html(
'<img src="/web_widget_image_webcam/static/src/img/webcam_placeholder.png"/>'
);
});
self.$el
.find(".o_form_binary_file_web_cam")
.off()
.on("click", function () {
// Init Webcam
var dialog = new Dialog(self, {
size: "large",
dialogClass: "o_act_window",
title: _t("WebCam Booth"),
$content: WebCamDialog,
buttons: [
{
text: _t("Take Snapshot"),
classes: "btn-primary take_snap_btn",
click: function () {
Webcam.snap(function (data) {
img_data = data;
// Display Snap besides Live WebCam Preview
WebCamDialog.find("#webcam_result").html(
'<img src="' + img_data + '"/>'
);
});
if (Webcam.live) {
// Remove "disabled" attr from "Save & Close" button
$(".save_close_btn").removeAttr("disabled");
}
},
},
{
text: _t("Save & Close"),
classes: "btn-primary save_close_btn",
close: true,
click: function () {
var img_data_base64 = img_data.split(",")[1];
/*
Size in base64 is approx 33% overhead the original data size.
Source: -> http://stackoverflow.com/questions/11402329/base64-encoded-image-size
-> http://stackoverflow.com/questions/6793575/estimating-the-size-of-binary-data-encoded-as-a-b64-string-in-python
-> https://en.wikipedia.org/wiki/Base64
[ The ratio of output bytes to input bytes is 4:3 (33% overhead).
Specifically, given an input of n bytes, the output will be "4[n/3]" bytes long in base64,
including padding characters. ]
*/
// From the above info, we doing the opposite stuff to find the approx size of Image in bytes.
var approx_img_size =
3 * (img_data_base64.length / 4) -
(img_data_base64.match(/[=]+$/g) || []).length;
// Like... "3[n/4]"
// Upload image in Binary Field
self.on_file_uploaded(
approx_img_size,
"web-cam-preview.jpeg",
"image/jpeg",
img_data_base64
);
},
},
{
text: _t("Close"),
close: true,
},
],
}).open();
dialog.opened().then(function () {
Webcam.attach("#live_webcam");
// At time of Init "Save & Close" button is disabled
$(".save_close_btn").attr("disabled", "disabled");
// Placeholder Image in the div "webcam_result"
WebCamDialog.find("#webcam_result").html(
'<img src="/web_widget_image_webcam/static/src/img/webcam_placeholder.png"/>'
);
});
});
},
});

21
web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml
View File

@@ -2,11 +2,22 @@
<!-- Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@gmail.com>
Copyright 2019-Today: Druidoo (<https://www.druidoo.io>)
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
<template id="template" xml:space="preserve">
<t t-extend="FieldBinaryImage">
<t t-jquery=".o_select_file_button" t-operation="after">
<span class="fa fa-eye o_form_binary_file_web_cam" title="WebCam" />
</t>
<template>
<t
t-name="web_widget_image_webcam.ImageField"
t-inherit="web.ImageField"
t-inherit-mode="extension"
owl="1"
>
<xpath expr="//button[hasclass('o_clear_file_button')]" position="before">
<button
class="o_form_binary_file_web_cam btn btn-light border-0 rounded-circle m-1 p-1"
data-tooltip="WebCam"
aria-label="WebCam"
>
<i class="fa fa-eye" t-on-click="onWebcamClicked" />
</button>
</xpath>
</t>
<div t-name="WebCamDialog" id="WebCamModal">
<div class="container-fluid">