cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

How can I setup a simple draw app using tml text widget?

Vatsal
7-Bedrock

How can I setup a simple draw app using tml text widget?

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.

1 ACCEPTED SOLUTION

Accepted Solutions

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:

 

  • Change the first line to get your canvas container from the VS 2D overlay. You could put a Panel widget in your center overlap panel, give it an ID ("XXX" in the example), and then use something like this:
    $scope.canvas = document.querySelector("*[widget-id=XXX] div");​
  • Instead of making things globals, set them as $scope members, e.g. $scope.putPoint = function(e)...
  • Rather than setting the size of the canvas object, let the framework handle that, just set it to fill the center panel.
  • You may need to change from mouse listeners to touch listeners to have it work the way you want on mobile devices. The biggest change there is that most mobile devices support multiple simultaneous touches (e.g. the pinch/zoom gesture), so you'd have to make sure you're just taking the one you want if there is more than one active touch. There are lots of good touch event handling guides on the web.

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.)

View solution in original post

2 REPLIES 2

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:

 

  • Change the first line to get your canvas container from the VS 2D overlay. You could put a Panel widget in your center overlap panel, give it an ID ("XXX" in the example), and then use something like this:
    $scope.canvas = document.querySelector("*[widget-id=XXX] div");​
  • Instead of making things globals, set them as $scope members, e.g. $scope.putPoint = function(e)...
  • Rather than setting the size of the canvas object, let the framework handle that, just set it to fill the center panel.
  • You may need to change from mouse listeners to touch listeners to have it work the way you want on mobile devices. The biggest change there is that most mobile devices support multiple simultaneous touches (e.g. the pinch/zoom gesture), so you'd have to make sure you're just taking the one you want if there is more than one active touch. There are lots of good touch event handling guides on the web.

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.

Top Tags