Canvas doesn't work on iphone live simulator

4 posts, 0 answers
  1. Rozen
    Rozen avatar
    13 posts
    Member since:
    Aug 2013

    Posted 23 Sep 2013 Link to this post

    Hi,
    I am trying to use HTML5 canvas to do drag and drop functionality. it works fine in the webpages but when i am trying to implement this in icenium live iphone simulator it  doesn'twork. I have attach the file that currently work in webpage. Is it because icenium doesn't support canvas?

    I am using this    http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js        to do Html .
    please help..

    code

    <!DOCTYPE HTML>
    <html>
      <head>
        <style>
          body {
            margin: 0px;
            padding: 0px;
          }
        </style>
      </head>
      <body>
        <div id="container" >   </div>
        <script src="kinetic-v4.7.0.min.js"></script>
        <script defer="defer">
         function drawImage(imageObj) { 
            var stage = new Kinetic.Stage({

              container: "container",
              width: 800,
              height: 800
     
            });
            var layer = new Kinetic.Layer();

            // darth vader
            var darthVaderImg = new Kinetic.Image({
              image: imageObj,
              x: stage.getWidth() / 2 - 200 / 2,
              y: stage.getHeight() / 2 - 137 / 2,
              width: 200,
              height: 137,
              draggable: true
            });

            // add cursor styling
            darthVaderImg.on('mouseover', function() {
              document.body.style.cursor = 'pointer';
            });
            darthVaderImg.on('mouseout', function() {
              document.body.style.cursor = 'default';
            });

            layer.add(darthVaderImg);
            stage.add(layer);
          }
          var imageObj = new Image();
          imageObj.onload = function() {
            drawImage(this);
          };
          imageObj.src = 'fridge.png';

        </script>
      </body>
    </html>
  2. Kristina
    Admin
    Kristina avatar
    57 posts

    Posted 24 Sep 2013 Link to this post

    Hello,

    As you probably know Icenium is using Apache Cordova framework to enable developers to use their existing skills in Html and JavaScript. So the first thing that you should do is to add reference in your index.html to cordova.js file. Next you should take advantage of the Cordova Lifecycle events, the most valuable of which is the deviceready event. You should execute you logic after the deviceready event has fired. We have prepared an example code, based on the one that you have provided.

    <!DOCTYPE HTML>
    <html>
        <head>
            <style>
                body
                {
                    margin: 0px;
                    padding: 0px;
                }
            </style>
        </head>
        <body>
            <div id="container" > </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script>
                 
                document.addEventListener('deviceready', function() {
                    var imageObj = new Image();
                    imageObj.onload = function() {
                        drawImage(this);
                    };
                    imageObj.src = 'fridge.png';
                } , false);
                 
                function drawImage(imageObj) {
                    var stage = new Kinetic.Stage({
                         
                        container: "container",
                        width: 800,
                        height: 800
                     
                    });
                    var layer = new Kinetic.Layer();
                     
                    // darth vader
                    var darthVaderImg = new Kinetic.Image({
                        image: imageObj,
                        x: stage.getWidth() / 2 - 200 / 2,
                        y: stage.getHeight() / 2 - 137 / 2,
                        width: 200,
                        height: 137,
                        draggable: true
                    });
                     
                    // add cursor styling
                    darthVaderImg.on('mouseover', function() {
                        document.body.style.cursor = 'pointer';
                    });
                    darthVaderImg.on('mouseout', function() {
                        document.body.style.cursor = 'default';
                    });
                     
                    layer.add(darthVaderImg);
                    stage.add(layer);
                }
             
            </script>
        </body>
    </html>

    If you have any other questions, do not hesitate to ask !

    Best Regards,
    Kristina
    Telerik

    Big news for mobile app and .NET developers! Hear about it at our Release Keynote. Thursday, September 26th, 11AM EDT
    Do you enjoy Icenium? Vote for it in Windows IT Pro Community Choice Awards as Best Cloud Computing Product or Service (Category 5).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Rozen
    Rozen avatar
    13 posts
    Member since:
    Aug 2013

    Posted 29 Sep 2013 Link to this post

    Hi Kristina,
    Thanks for your feedback it helped me a lot. But i am having one more problem when using camera functionality with in this code.
    // the below is the code am currently working on. This code overlay an image on background image. It works fine in iphone online simulator. But i want that background image to be the camera picture image when we first click the camera or more advance way, is it possible to use the camera live view as a background? and the image overlaying on top of that?. I tried different way but still couldn't figure it out why its not working. At the end of code i have called upload function where i passed the background (image + overlay image) to save the image. When i tried to run this code it doesn't even show the HTML file. Please help!

    Thanks
    Rojan

    <!DOCTYPE HTML>
    <html>
        <head>
            
            <meta charset="utf-8" />
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        

            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            
            <script type="text/javascript" src="scripts/kinetic-v4.7.0.min.js"></script>
            <script type="text/javascript" src="cordova.js"></script>

            <style>
                body
                {
                    margin: 0px;
                    padding: 0px;
                }
            </style>
            
        </head>
        
            
            
                  
            <script>
                // These Script are for the camera
            
                function captureImage() {
                    // Launch device camera application,
                    // allowing user to capture up to 2 images
                    navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 2});
                }
            
                 function captureSuccess(imageData) {
                        //var i, len;
                        //for (i = 0, len = imageData.length; i < len; i += 1) {
                          //  uploadFile(imageData[i]);
                    
                        var div = document.getElementById("container");
                    
                        div.style.backgroundImage = "data:image/jpeg;base64," + imageData;
                
                        div.style.backgroundRepeat = "no-repeat";
                    }       
           
            </script>
            
            <script>
                 
                document.addEventListener('deviceready', function() {
                    var imageObj = new Image();
                    imageObj.onload = function() {
                        drawImage(this);
                    };
                    imageObj.src = 'styles/images/logo.png';
                } , false);
                 
                function drawImage(imageObj) {
                    var stage = new Kinetic.Stage({
                         
                        container: "container",
                        width: 640,
                        height: 960
                     
                    });
                    var layer = new Kinetic.Layer();
                     
                    // Appliance
                    var ApplianceImg = new Kinetic.Image({
                        image: imageObj,
                        x: stage.getWidth() / 2 - 200 / 2,
                        y: stage.getHeight() / 2 - 137 / 2,
                        width: 200,
                        height: 137,
                        draggable: true
                    });
                     
                    // add cursor styling
                    ApplianceImg.on('mouseover', function() {
                        document.body.style.cursor = 'pointer';
                    });
                    ApplianceImg.on('mouseout', function() {
                        document.body.style.cursor = 'default';
                    });
                     
                    layer.add(ApplianceImg);
                    var combineImg = stage.add(layer);
                    
                    uploadFile(combineImg); // passing as an argument to uploadfile function
                    
                }
             
            </script>
            
            <script>
            
                    // Upload files to server
                function uploadFile(combineImg)
                {
                    var ft = new FileTransfer(),
                    path = combineImg.fullPath,
                    name = combineImg.name;

                    ft.upload(path,
                    "http://my.domain.com/upload.php",
                    function(result) {
                        console.log('Upload success: ' + result.responseCode);
                        console.log(result.bytesSent + ' bytes sent');
                    },
                    function(error) {
                        console.log('Error uploading file ' + path + ': ' + error.code);
                    },
                    { fileName: name });   
                }
                
            </script>
        
        
         <body>
            <div id="container">
                <a class="nav-button2"  data-align="right"  data-role="button" data-icon="camera" onclick="captureImage();">Camera</a>
            </div>
            <div id="container">
                <a class="nav-button2"  data-align="right"  data-role="button"  onclick="uploadFile();">Save to phone</a>
            </div>  
            
        </body>
    </html>
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 01 Oct 2013 Link to this post

    Hello Rozen,

    I'm not familiar with such functionality in Cordova and editing an image with the Cordova API as a whole is very basic. Most likely you would have to resort to native functionality for the platform you need by creating a custom Cordova plugin.

    Regards,
    Kristina
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top