This question is locked. New answers and comments are not allowed.
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>
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>
3 Answers, 1 is accepted
0
Hello,
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.
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 src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.1.min.js"></script> <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.
0
Rozen
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2013, 05:42 PM
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>
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>
0
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,
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.
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
TelerikYou'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.