I need to setup a simple draw app in Vuforia studio. Is there any way that i can use tml text widget? I need to get a simple drawing app in vuforia without using the chalk widget.
For reference i have attached the html code for the drawing app i need in vuforia. Is there any way i can run this code in vuforia using tml text widget?
<html>
<body style='margin: 1;'>
<canvas id="canvas" style="display: block;">
Sorry, your browser is rubbish.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 5; //不要犯蠢,第一次竟然打成0,根本就不會有東西跑出來啊
var start = 0; //起始點
var end = Math.PI * 2; //結束點
var dragging = false;
canvas.width = window.innerWidth; //設定canvas的寬
canvas.height = window.innerHeight; //設定canvas的高
context.lineWidth = radius * 2; //試著改變參數,會發現裡頭有線連著
var putPoint = function(e){
if(dragging){
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
context.beginPath(); //請把這條beginPath到fill一起看
context.arc(e.offsetX, e.offsetY, radius, start, end);
context.fill(); //填滿它
context.beginPath();
context.moveTo(e.offsetX, e.offsetY);
}
}
var engage = function(e){
dragging = true;
putPoint(e);
}
var disengage = function(){
dragging = false;
context.beginPath();
}
canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);//當有人在canvas上mousedown時觸發putPoint
canvas.addEventListener('mouseup', disengage);
</script>
</body>
</html>
any suggestion to do it in any other way than using tml text widget is also welcome.
Solved! Go to Solution.
I'm not sure how it would work as a TML widget, but you can certainly include this kind of code in your home.js. You'd need to make a few changes to adapt it to the VS framework, such as:
$scope.canvas = document.querySelector("*[widget-id=XXX] div");
I've done an application similar to this, and using Javascript with the touch event listeners worked very nicely. One thing to note: this will not be like Chalk, in that the 2D notations will not "stick" to the 3D environment. This is just drawing on the screen, so what you draw stays in the same location on the screen even if you move around the AR environment. The "Freeze Camera" service helps with that aspect of it--the user can get the view they want, activate Freeze Camera, and then use their finger to add annotations to the screen.)
I'm not sure how it would work as a TML widget, but you can certainly include this kind of code in your home.js. You'd need to make a few changes to adapt it to the VS framework, such as:
$scope.canvas = document.querySelector("*[widget-id=XXX] div");
I've done an application similar to this, and using Javascript with the touch event listeners worked very nicely. One thing to note: this will not be like Chalk, in that the 2D notations will not "stick" to the 3D environment. This is just drawing on the screen, so what you draw stays in the same location on the screen even if you move around the AR environment. The "Freeze Camera" service helps with that aspect of it--the user can get the view they want, activate Freeze Camera, and then use their finger to add annotations to the screen.)
Thanks a lot @ClayHelberg . Your suggestions did help me get my requirement satisfied.