Tizen Developers

seems the jquery ui draggalbe don't support the touch device, and Tizen web application support the jquery mobile framework, but I don't find such possible in jquery mobile. Anyway, I've already raise a question on jquery mobile forum. I will update the feeback later. :)

Hi Marco Buettner,

This work fine,but when i cll the function addListeners().Then it prevent another button of page to click.

When i call the  addListeners() method then another button stop working. I call momomo() function body by onload,inside momomo() function the addListeners() function is called.

Please help me.My js file is

var startTime;
var checkTime;

//Initialize function
var init = function() {
    // TODO:: Do your initialization job
    console.log("init() called");
    
    // add eventListener for tizenhwkey
    document.addEventListener('tizenhwkey', function(e) {
        if (e.keyName == "back") {
            try {
                tizen.application.getCurrentApplication().exit();
            } catch (error) {
                console.error("getCurrentApplication(): " + error.message);
            }
        }
    });
};

window.onload = init;

function momo() {
    $('#slideit').css('background-image', 'url(image1.png)');
    $('#x').css('background-image', $('#y').css('background-image'));

}

//****************************************************************************

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

var random=getRandom(100,10);

var k;

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function addListeners() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

function momomo()
{
    
    var k=0;
    drawEx1();
    drawEx2();
    addListeners();
}

window.onload = function() {
    
    
    
}

//aspect ratio

var image1 = null;
var image2 = null;

function drawEx1() {
    image1 = new Image();
    path1 = sessionStorage.getItem("mohit");
   // alert(path1);
    image1.src =path1;
       // "css/images/mohit.jpeg";
    image1.addEventListener('load', drawImage1);
}

function drawImage1() {
    var canvas1  = document.getElementById("mycanvas");
    var context = canvas1.getContext("2d");
    var w=image1.width;
    var h=image1.height;
    context.drawImage(image1, 0, 0,w, h);
   // context.drawImage(image1, 0, 0,w*0.55, h*0.3);
}   

function drawEx2() {
    image2 = new Image();
    path2 = sessionStorage.getItem("mohit1");
   // alert(path1);
    image2.src =path2;
       // "css/images/mohit.jpeg";
    image2.addEventListener('load', drawImage2);
}

function drawImage2() {
    var canvas1  = document.getElementById("mycanvas1");
    var context = canvas1.getContext("2d");
    var w=canvas1.width;
    var h=canvas1.height;
    
    context.drawImage(image2, 0, 0,w,h);
}

//***************************************************************************************

$(document).ready(function() {
    $("#camera").click(function() {
    
        var appId = null,
            appControlReplyCallback = null,
            appControl = null;
        appId = 'tizen.camera';
        appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content", null, "image/jpeg", null);
        appControlReplyCallback = {
            onsuccess: function(data) {
                var picLink = "";
                for(var i=0;i<data.length;i++) {
                    if(data[i].key === "http://tizen.org/appcontrol/data/selected") {
                        
                        picLink = data[i].value[0];    
                                                     
                      image1 = new Image();
                   sessionStorage.setItem("mohit", picLink);
                  path1 = sessionStorage.getItem("mohit");
                  image1.src =path1;
                 location.reload();   
                    }
                }
                
                if ($.mobile.popup.active) {
                   $.mobile.popup.active.close();
                    
                }
                if (data.key === "http://tizen.org/appcontrol/data/selected") {
             //       picLink = data[0].value[0];
                    console.log("selected image := " + picLink);
                    alert(picLink);
                    //sessionStorage.setItem("mohit", picLink);
                     
                }
                
            },
            onfailure: function() {
                //console.log('The launch application control failed');
            }
        };
        function onSuccess() {
            //console.log("launch application control succeed");
        }
        function onError(err) {
            alert(err.message);
        }
        tizen.application.launchAppControl(appControl, appId, onSuccess, onError, appControlReplyCallback);
    });
    
    
    $("#camera1").click(function() {
    
        var appId = null,
            appControlReplyCallback = null,
            appControl = null;
        appId = 'tizen.camera';
        appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content", null, "image/jpeg", null);
        appControlReplyCallback = {
            onsuccess: function(data) {
                var picLink = "";
                for(var i=0;i<data.length;i++) {
                    if(data[i].key === "http://tizen.org/appcontrol/data/selected") {
                        
                        picLink = data[i].value[0];    
                                            
                   
                            image2 = new Image();
                            sessionStorage.setItem("mohit1", picLink);
                           path2 = sessionStorage.getItem("mohit1");
                           image1.src =path2;
                         location.reload();
                                                         
                        
                    }
                }
                
                if ($.mobile.popup.active) {
                   $.mobile.popup.active.close();
                    
                }
                if (data.key === "http://tizen.org/appcontrol/data/selected") {
             //       picLink = data[0].value[0];
                    console.log("selected image := " + picLink);
                    alert(picLink);
                    //sessionStorage.setItem("mohit", picLink);
                     
                }
                
            },
            onfailure: function() {
                //console.log('The launch application control failed');
            }
        };
        function onSuccess() {
            //console.log("launch application control succeed");
        }
        function onError(err) {
            alert(err.message);
        }
        tizen.application.launchAppControl(appControl, appId, onSuccess, onError, appControlReplyCallback);
    });
     
    $("#mohitku").click(function() {
        window.open("mohitfinal0.html");
    });
    
    
    $("#mohitku1").click(function() {
        window.open("mohitfinal1.html");
    });
    
    $("#mohitku2").click(function() {
        window.open("mohitfinal.html");
    });
    
    
    $("#mohitku3").click(function() {
        window.open("mohitfinal2.html");
    });
    
    $("#mohitku4").click(function() {
        window.open("mohitfinal3.html");
    });
    
    $("#mohitku5").click(function() {
        window.open("mohitfinal4.html");
    });
    
    
    
    $("#mohitku6").click(function() {
        window.open("mohitfinal5.html");
    });
    
    
    $("#mohitku7").click(function() {
        window.open("mohitfinal6.html");
    });
   
    $("#mohitku8").click(function() {
        window.open("mohitfinal7.html");
    });

    document.getElementById('im1').addEventListener("click", function() {
        try {
            var appControl = new tizen.ApplicationControl(
                "http://tizen.org/appcontrol/operation/pick",
                null,
                "image/*",
                null, [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["single"])]);

            var appControlReplyCallback = {
                onsuccess: function(reply) {
                    var path = reply[1].value[0];
                    path = "file://" + path;

                    document.getElementById('im1').setAttribute("src", path);

                    sessionStorage.setItem("mohit", path); //saves to the database, key/value
                                   
                },
                onfailure: function() {
                    console.log("The launch application control failed");
                }
            };

            tizen.application.launchAppControl(
                appControl,
                null,
                function() {
                    console.log("launch application control succeed");
                },
                function(e) {
                    console.log("launch application control failed. reason: " + e.message);
                },
                appControlReplyCallback
            );
        } catch (e) {
            alert("Error " + e.name + " : " + e.message);
        }

    });
   
    document.getElementById('im2').addEventListener("click", function() {
        try {
            var appControl = new tizen.ApplicationControl(
                "http://tizen.org/appcontrol/operation/pick",
                null,
                "image/*",
                null, [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["single"])]);

            var appControlReplyCallback = {
                onsuccess: function(reply) {
                    var path = reply[1].value[0];
                    path = "file://" + path;

                    document.getElementById('im2').setAttribute("src", path);   
                    sessionStorage.setItem("mohit1", path); //saves to the database, key/value
                },
                onfailure: function() {
                    console.log("The launch application control failed");
                }
            };

            tizen.application.launchAppControl(
                appControl,
                null,
                function() {
                    console.log("launch application control succeed");
                },
                function(e) {
                    console.log("launch application control failed. reason: " + e.message);
                },
                appControlReplyCallback
            );
        } catch (e) {
            alert("Error " + e.name + " : " + e.message);
        }
    });

    $("#im3").click(function() {

        window.open("frmcenter.html");

    });
      
});

Thanks and regards

Mohit Kumar

Hi,

Why you not reply for my question.The addListeners function work fine but it not allow me for click on button of the same page.

This solution solve the one problem and create another problem.

When i use this then button is not going to click

Please help me

Thanks and regards

Mohit Kumar

Sample code,

first, include the jquery and jcanvas file in head.

    <script type="text/javascript" src="./js/jquery-2.1.4.min.js" ></script>
    <script type="text/javascript" src="./js/jcanvas.js" ></script>

then, create a canvas in body

<canvas width="300" height="150" style="border:solid 1px red;width:98%"></canvas>

paste below code into the .html file or a .js file and include it in head

    $(document).ready(function(){
        $('canvas').drawArc({
              draggable: true,
              fillStyle: 'black',
              x: 100, y: 100,
              radius: 50
            });
        });

It's works in the web simulator

I've run sample code on real device - it works well too.

Hi colin,

This is not working on device.I there any other way please help me.

Thanks and regards

Mohit Kumar

Hello,

I've run the sample that colin Rao posted - it works on real device. 

But when TAU library is added, jCanvas don't work. Probably that is the point. 

Had some troubles with TAU library. Now it works. All is like in colin Rao's sample:

<canvas width="300" height="150" style="background-color: black;" id="canvas1"></canvas>

Do not forget to add TAU library and jCanvas plugin. 

And this is javascript code:

$("#canvas1").drawArc({
  draggable: true,
  fillStyle: 'green',
  x: 100, y: 100,
  radius: 50
});

Hi,

Where to find TAU library

please help me

Thanks and regards

mohit kumar

Hello,

TAU is the Tizen Advanced UI. It is the new version of Tizen web-uifw.

You can see the TAU codes  in the Tizen Web sample application. ex) TizenWinset or UI Component

If you are using the old Tizen SDK, you can see the tizen web-uifw instead of the TAU.

Hi,

Is there any another way, according to you i have to change all my application.It is not possible for me

Thanks and regards

Mohit kumar

Hi,

I am developing Web Application Programming, not

TIZEN web ui builder

thanks and regards

Mohit Kumar

Hi,

f.y.i )  It seems that below sample code is working fine without tau on z1 device..

<script type="text/javascript" src="./js/jcanvas.js" ></script>

<body> 
   <canvas width="300" height="150" style="border:solid 1px red;width:98%"></canvas>  
</body>

<script>
$(document).ready(function(){
    $('canvas').drawArc({
          draggable: true,
          fillStyle: 'black',
          x: 100, y: 100,
          radius: 50
        });
    });
</script>

Regards

That's interesting. It's powerful and easy. :)

I will consider create the web sample using the jCanvas in the SDK.