canvas object

Fri Jan 30, 2015 5:48 pm

hi,

I have a camera plugin that needs a canvas to work. It uses the following code for the camera preview

ok I have been able to generate the APK after meddling with it for sometime....now the question is how to display the output on a canvas?

It uses the following code to display the preview

document.addEventListener('deviceready', function () {

Code: Select all

 // have to call initialize function with canvas object 
 var objCanvas = document.getElementById("canvas"); 
 window.plugin.CanvasCamera.initialize(objCanvas); 

 // window.plugin.CanvasCamera is now available

}, false);

How do I create the canvas?

Thanks,
M&M

Mon Feb 02, 2015 7:24 am

M&M,

1) Please place a HTML component on a page
2) Set it to div
3) Click edit source
4) Click html tab
5) Place code<canvas id="canvas"></canvas>/code
6) Save

Thu Jul 09, 2015 12:00 am

I'm trying the same thing and it keeps coming up as width=0 and height=0, so no content is displayed.

From the web console, it looks like it is inheriting the width=0/height=0 from "element" which is an "inline" element in the CSS.

Thu Jul 09, 2015 12:01 am

The top image/plot is created another way ... the canvas plot (with chart.js) should be below it, but isn't visible since it is 0x0 in size

Sun Jul 12, 2015 4:48 pm

Hi John -

Could you please show us your HTML component properties in visual builder and what code you had placed inside it.

Mon Jul 13, 2015 1:04 pm

Hmm, I overwote the code already. I think the issue was with the chart library itself (Amchart or flotr?) ... you gave it a div region and it created a canvas element when it was called. I think the creation of the canvas element just didn't respect the size of the div-container.

I'm using Chartist now and it works fine.

Mon Oct 26, 2015 7:29 pm

Looking at this again ... I followed Evgene's suggestions (html element with just the canvas definition inside it), but it comes up width=0 height=0.

Even if I edit the HTML source to read:
pre
<canvas id='myChart' width='250px' height='250px'</canvas
/pre

When I look inside the browser developer window, it shows that it is being overwritten with width=0 and height=0.

Mon Oct 26, 2015 7:31 pm

The HTML element is set to "div"; the name is set to "thecanvasarea"; the "Visible" box is checked; "Dimension" is set to 275 x 275; "Margins" are all set to 8; the "Class name" field is blank

Tue Oct 27, 2015 6:08 am

you have to use chartist.js, same problem here.

an example of creating a chart :
code
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
</head>
<div class="ct-chart ct-perfect-fourth"><>
<script>
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};

var options = {
seriesBarDistance: 10
};

var responsiveOptions = [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];

new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
</script>
</html>
/code
Paste this into HTML and it will work perfectly

Tue Oct 27, 2015 1:42 pm

I was hoping that since Appery now has a tutorial on Chart.js that maybe they had worked this out (but the tutorial is for the AngularJS templates, not the jQuery template)