Browse Source

Jul 24 : [UPDT] Bug Fixed 'image_capture_upload_widget'

pull/267/head
AjmalCybro 2 years ago
parent
commit
1b4a01052c
  1. 4
      image_capture_upload_widget/__manifest__.py
  2. 6
      image_capture_upload_widget/doc/RELEASE_NOTES.md
  3. BIN
      image_capture_upload_widget/static/description/assets/screenshots/hero.gif
  4. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot-1.png
  5. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot-2.png
  6. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot-3.png
  7. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot_1.png
  8. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot_2.png
  9. BIN
      image_capture_upload_widget/static/description/assets/screenshots/screenshot_3.png
  10. 12
      image_capture_upload_widget/static/description/index.html
  11. 71
      image_capture_upload_widget/static/src/js/image_capture.js
  12. 51
      image_capture_upload_widget/static/src/js/image_upload.js
  13. 17
      image_capture_upload_widget/static/src/xml/image_capture_templates.xml
  14. 14
      image_capture_upload_widget/wizard/image_capture.py
  15. 43
      image_capture_upload_widget/wizard/image_capture_views.xml

4
image_capture_upload_widget/__manifest__.py

@ -38,13 +38,13 @@
'images': ['static/description/banner.jpg'],
'data': [
'security/ir.model.access.csv',
'wizard/image_capture_views.xml'
# 'wizard/image_capture_views.xml'
],
'assets': {
'web.assets_backend': [
'/image_capture_upload_widget/static/src/scss/image_capture.scss',
'/image_capture_upload_widget/static/src/js/image_capture.js',
'/image_capture_upload_widget/static/src/js/image_upload.js',
# '/image_capture_upload_widget/static/src/js/image_upload.js',
'/image_capture_upload_widget/static/src/xml/image_capture_templates.xml',
],
},

6
image_capture_upload_widget/doc/RELEASE_NOTES.md

@ -5,3 +5,9 @@
#### ADD
- Initial commit for Image Capture Widget
#### 12.07.2023
#### Version 16.0.1.1.0
#### Fix
- Bug fixes for the new records.

BIN
image_capture_upload_widget/static/description/assets/screenshots/hero.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 137 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot-3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot_1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot_2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

BIN
image_capture_upload_widget/static/description/assets/screenshots/screenshot_3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

12
image_capture_upload_widget/static/description/index.html

@ -148,20 +148,20 @@
<p>Add the 'capture_image' as the widget of an image field</p>
</div>
<div style="display: block; margin: 30px auto;">
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the camera button to open the wizard
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the camera button to open the camera
</h3>
<img src="assets/screenshots/screenshot-1.png" class="img-thumbnail">
<img src="assets/screenshots/screenshot_1.png" class="img-thumbnail">
</div>
<div style="display: block; margin: 30px auto;">
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the 'Open Camera' button to open the camera
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the 'Capture' button capture images.
</h3>
<img src="assets/screenshots/screenshot-2.png" class="img-thumbnail">
<img src="assets/screenshots/screenshot_2.png" class="img-thumbnail">
</div>
<div style="display: block; margin: 30px auto;">
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the capture button to take image and then click the save image butto for saving the image.
<h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Click the 'Save image' button saving the image.
</h3>
<img src="assets/screenshots/screenshot-3.png" class="img-thumbnail">
<img src="assets/screenshots/screenshot_3.png" class="img-thumbnail">
</div>
</div>

71
image_capture_upload_widget/static/src/js/image_capture.js

@ -6,7 +6,7 @@ import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { url } from "@web/core/utils/urls";
import { isBinarySize } from "@web/core/utils/binary";
import rpc from 'web.rpc';
import { FileUploader } from "@web/views/fields/file_handler";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
@ -100,17 +100,63 @@ export class ImageCapture extends Component {
var field = this.props.name;
var id = this.props.record.data.id;
var model = this.props.record.resModel;
this.env.services['action'].doAction({
type: "ir.actions.act_window",
res_model: 'image.capture',
views: [[false, "form"]],
target: "new",
context: {
"default_record_id": id,
"default_model_name": model,
"default_field_name": field,
},
});
}
async OnClickOpenCamera() {
// opening the camera for capture the image
var player = document.getElementById('player');
var captureButton = document.getElementById('capture');
var camera = document.getElementById('camera');
player.classList.remove('d-none');
captureButton.classList.remove('d-none');
camera.classList.add('d-none');
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
player.srcObject = stream;
}
async OnClickCaptureImage() {
// Capture the image from webcam and close the webcam
var context = snapshot.getContext('2d');
var canvas = document.getElementById('snapshot')
var save_image = document.getElementById('save_image')
var image = document.getElementById('image');
var video = document.getElementById('video')
var camera = document.getElementById('camera');
save_image.classList.remove('d-none');
context.drawImage(player, 0, 0, 320, 240);
image.value = context.canvas.toDataURL();
canvas.classList.remove('d-none');
this.url = context.canvas.toDataURL();
console.log(context.canvas.toDataURL());
console.log(context);
console.log(context.getImageData);
}
async OnClickSaveImage(){
// Saving the image to that field
var self = this;
rpc.query({
model: 'image.capture',
method: 'action_save_image',
args: [[], this.url],
}).then(function(results){
self.props.value = results
var data = {
data: results,
name : "ImageFile.png",
objectUrl: null,
size : 106252,
type: "image/png"
}
self.onFileUploaded(data)
})
var player = document.getElementById('player')
player.classList.add('d-none');
var snapshot = document.getElementById('snapshot')
snapshot.classList.add('d-none');
var capture = document.getElementById('capture')
capture.classList.add('d-none');
var save_image = document.getElementById('save_image')
save_image.classList.add('d-none');
var camera = document.getElementById('camera')
camera.classList.remove('d-none');
}
onLoadFailed() {
this.state.isValid = false;
@ -160,5 +206,4 @@ ImageCapture.extractProps = ({ attrs }) => {
: attrs.height,
};
};
registry.category("fields").add("capture_image", ImageCapture);

51
image_capture_upload_widget/static/src/js/image_upload.js

@ -1,51 +0,0 @@
/** @odoo-module */
import { registry } from '@web/core/registry';
import { formView } from '@web/views/form/form_view';
import { FormController } from '@web/views/form/form_controller';
import { FormRenderer } from '@web/views/form/form_renderer';
const { useListener } = require("@web/core/utils/hooks");
import rpc from 'web.rpc';
import { patch } from "@web/core/utils/patch";
patch(FormRenderer.prototype, 'FormRender',{
setup() {
this._super();
},
async OnClickOpenCamera() {
// opening the camera for capture the image
var player = document.getElementById('player');
var captureButton = document.getElementById('capture');
var camera = document.getElementById('camera');
player.classList.remove('d-none');
captureButton.classList.remove('d-none');
camera.classList.add('d-none');
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
player.srcObject = stream;
},
async OnClickCaptureImage() {
// Capture the image from webcam and close the webcam
var context = snapshot.getContext('2d');
var canvas = document.getElementById('snapshot')
var save_image = document.getElementById('save_image')
var image = document.getElementById('image');
var video = document.getElementById('video')
var camera = document.getElementById('camera');
save_image.classList.remove('d-none');
context.drawImage(player, 0, 0, 320, 240);
image.value = context.canvas.toDataURL();
canvas.classList.remove('d-none');
this.url = context.canvas.toDataURL()
},
async OnClickSaveImage(){
// Saving the image to that field
rpc.query({
model: 'image.capture',
method: 'action_save_image',
args: [[], this.props.record.data, this.url],
}).then(function(results){
location.reload();
})
}
});

17
image_capture_upload_widget/static/src/xml/image_capture_templates.xml

@ -30,10 +30,16 @@
<button
class="o_upload_image_button btn btn-light border-0 rounded-circle m-1 p-1"
data-tooltip="Upload"
aria-label="Upload"
t-on-click="onFileCaptureImage">
aria-label="Upload" id="camera"
t-on-click="OnClickOpenCamera">
<i class="fa fa-camera fa-fw"/>
</button>
<div id="capture" class="btn btn-primary d-none"
t-on-click="OnClickCaptureImage">Capture
</div>
<div id="save_image" class="btn btn-primary d-none"
t-on-click="OnClickSaveImage">Save Image
</div>
</t>
</div>
<img
@ -48,6 +54,13 @@
t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"/>
<video id="player" controls="true" class="d-none"
autoplay="true" style="width: 320px;padding: 20px;"/>
<canvas class="d-none" id="snapshot" width="320"
height="240" style="width: 320px;padding: 20px;"/>
<input type="hidden" name="image" id="image"/>
</div>
</t>
</templates>

14
image_capture_upload_widget/wizard/image_capture.py

@ -19,7 +19,7 @@
# If not, see <http://www.gnu.org/licenses/>.
#
################################################################################
from odoo import fields, models
from odoo import models
class ImageCapture(models.TransientModel):
@ -27,18 +27,10 @@ class ImageCapture(models.TransientModel):
_name = 'image.capture'
_description = 'Image Captures'
name = fields.Char(string='Name', help='Name of the image to capture')
model_name = fields.Char(string='Model Name', help="For getting the model name details")
record_id = fields.Char(string='Record ID', help="For getting the record ID details")
field_name = fields.Char(string='Field Name', help="Field name for uploading the image")
def action_save_image(self, data, url):
def action_save_image(self, url):
"""
Saving the images to corresponding models
:param dict data: dictionary representing the details of fields.
:param url: Image details.
"""
image = url.split(',')
self.env[data['model_name']].browse(int(data['record_id'])).sudo().write({
data['field_name']: image[1]
})
return image[1]

43
image_capture_upload_widget/wizard/image_capture_views.xml

@ -1,43 +0,0 @@
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<!--Image Capture view and action-->
<record id="image_capture_action" model="ir.actions.act_window">
<field name="name">Image Capture</field>
<field name="res_model">image.capture</field>
<field name="view_mode">form</field>
</record>
<record id="image_capture_view_form" model="ir.ui.view">
<field name="name">image.capture.view.form</field>
<field name="model">image.capture</field>
<field name="arch" type="xml">
<form>
<sheet>
<group>
<field name="model_name" invisible="True"/>
<field name="record_id" invisible="True"/>
<field name="field_name" invisible="True"/>
</group>
<video id="player" controls="true" class="d-none"
autoplay="true" style="width: 320px;padding: 20px;"/>
<canvas class="d-none" id="snapshot" width="320"
height="240" style="width: 320px;padding: 20px;"/>
<input type="hidden" name="image" id="image"/>
</sheet>
<footer>
<div id="camera" class="btn btn-primary"
t-on-click="OnClickOpenCamera">Open Camera
</div>
<div id="capture" class="btn btn-primary d-none"
t-on-click="OnClickCaptureImage">Capture
</div>
<div id="save_image" class="btn btn-primary d-none"
t-on-click="OnClickSaveImage">Save Image
</div>
<button string="Cancel" class="btn btn-default"
special="cancel"/>
</footer>
</form>
</field>
</record>
</odoo>
Loading…
Cancel
Save