Menu

Problems with custom editor

2016-10-15
2016-10-15
  • Carlson W. Filho

    Hi folks,
    I needed to create a custom editor to capture user webcam image and store his photo on the database.
    I based my work on imageEditor.jsp.
    I created a file called webcamImageEditor.jsp exactly like imageEditor.jsp, but calling another action (instead of ImageEditor.changeImage, I am calling WebcamImageEditor.changeImage).
    WebcamImageEditor.changeImage is almost the same as the original ImageEditor.changeImage, only calling other controllers and another view, webcamChangeImage.jsp.

    When I open the view to change the image and closes it (the close method is calling the original close method from image editor), my previous view works OK. I created a button that capture user's webcam with javascript, using this code:

    openxava.addEditorInitFunction(function() {
    
        var canvas = $('.ox-webcam-canvas')
        if (canvas.length == 0)
            return;
        canvas = canvas[0]
        context = canvas.getContext("2d")
        video = $('.ox-webcam-video')
        if (video.length == 0)
            return;
        video = video[0];
        videoObj = {
            "video" : true
        }, errBack = function(error) {
            console.log("Video capture error: ", error.code);
        };
        if (navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia(videoObj, function(stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.mozGetUserMedia) {
            navigator.mozGetUserMedia(videoObj, function(stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
        $("#snap").on("click", function(){
            canvas.getContext("2d").drawImage(video, 0, 0, 300, 215);
            document.getElementById("ox-webcam-imagem").value = canvas.toDataURL("image/jpeg", 1);
    
        });
    });
    

    and if I capture an image and call the custom LoadImageAction, everything works fine, and the image is stored correctly on my previous view.
    The problem is that the second time I try to change the image, it doesn't matter if I capture a new image or if I just close the dialog, my view become blank. If I navigate to another module and then back, the view is back to normal and the image will be the last one that I captured.
    I tried a lot to dig on OX source and still didn't figure out what is going on. The interesting thing is that if I open the view to change the picture, call this javascript and then call again the close method (plain org.openxava.actions.CancelAction), my view is blank the second time. It looks like my JS code is breaking something with openxava but I really don't understand what exactly. Can someone with some experience developing custom views help me?
    Thanks!

     
  • Carlson W. Filho

    Post awaiting moderation.
  • Shankar

    Shankar - 2017-02-25

    Hi Carlson

    I was trying use webcam editor in my application . I download the components from
    https://github.com/carlsonwf/openxava-webcameditor

    I follwed the instruction in the readme to install.

    When I use it in my application I able to get to the capture screen. When I click on the camera Icon no action is preformed. Not sure what is the problem

    Hope you are OK with using your code in my applicaiton

    Thanks

    Shankar

     
  • Shankar

    Shankar - 2017-02-25

    Screen shot

     
  • Federico Alcantara

    Hi Carlson:

    The dialog is not closing properly. There are more than one cancel action in OX, and in the case of file or image uploads, the normal cancel action will not behave as expected. Find within the defaultControllers the actions used for closing upload dialogs and the ones for closing custom views. Try with those and check which one behaves properly.
    I am away from my computer, so I can't precisely tell you which action is the one that you need.

    Anyway, I hope this helps,

    Federico

     
  • Shankar

    Shankar - 2017-02-27

    Hi Carlson

    I got it working had placed the java script in the wrong place.

    Just a suggestion

    It would be good in the webcam editor to provide an option to load the image from a file also like PHOTO stero type.

    This way user has option to capture the video or load from file.

    Thanks for the webcamp editor you have contributed awsome

    Thanks

    Shankar

     

Log in to post a comment.