Jul 24 : [UPDT] Bug Fixed 'image_capture_upload_widget'

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',
         ],
     },

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.

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>

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",
+    async OnClickOpenCamera() {
-            res_model: 'image.capture',
+        // opening the camera for capture the image
-            views: [[false, "form"]],
+        var player = document.getElementById('player');
-            target: "new",
+        var captureButton = document.getElementById('capture');
-            context: {
+        var camera = document.getElementById('camera');
-                "default_record_id": id,
+        player.classList.remove('d-none');
-                "default_model_name": model,
+        captureButton.classList.remove('d-none');
-                "default_field_name": field,
+        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);

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();
-        })
-    }
-});

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"
+                            aria-label="Upload" id="camera"
-                            t-on-click="onFileCaptureImage">
+                            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>

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')
+    def action_save_image(self,  url):
-    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):
         """
         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({
+        return image[1]
-            data['field_name']: image[1]
-        })

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>