asked on

Webpage is not working on phones/tablets without a mouse.

This webpage is not working on phones/tablets without a mouse:
https://www.barnwellmd.com/PainDiagram/Testdrawing.html
Note: I modified the above webpage for this question so it does not send anything to me. Otherwise it works the same as the real page.

The webpage displays ok (not great) on my phone and tablet but I cannot draw on the image with my finger without a mouse.

Any ideas on how to fix this?

Here is the code:

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<title>Pain Diagram</title>
	<style type="text/css">
		body {background-color:#CCFFFF;} 
		#container { position: relative; }
		#imageView { border: 1px solid #000; }
		
		.button {
		  background-color: #004A7F;
		  -webkit-border-radius: 10px;
		  border-radius: 10px;
		  border: none;
		  color: #FFFFFF;
		  cursor: pointer;
		  display: inline-block;
		  padding: 5px;
		  text-decoration: none;
		  -webkit-animation: glowing 1500ms infinite;
		  -moz-animation: glowing 1500ms infinite;
		  -o-animation: glowing 1500ms infinite;
		  animation: glowing 1500ms infinite;
		}
		@-webkit-keyframes glowing {
		  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
		  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
		  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
		}

		@-moz-keyframes glowing {
		  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
		  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
		  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
		}

		@-o-keyframes glowing {
		  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
		  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
		  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
		}

		@keyframes glowing {
		  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
		  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
		  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
		}
	</style>
		
	<script type="text/javascript">
	var color_value	= '#FF0000';
	function setBackColor(i, back_color)
	{
		clearBG();
		document.getElementById(i).style.backgroundColor='black';
		color_value = back_color
	}
	function clearBG()
	{
		for(var i = 1; i <=8; i++)
		{
			document.getElementById(i).style.backgroundColor='transparent';
		}
	}
	</script>
	<script type="text/javascript" src="PainDiagram.js"></script>
</head>

<body>
	<form name="form">
		<table id="mytable" style="width: 988px; height: 750 px; border-spacing: 0; border-style: none; padding: 0">
			<tbody><tr>
				<td></td>
				<td style="text-align: right; vertical-align:bottom; font-size: large;"><b>Name: <input size="18" maxlength="60" name="ptname" style="font-size: 12pt;" type="text"><br>Birthdate: </b><input size="10" maxlength="10" name="dob" style="font-size: 12pt;" type="text"></td>
				<td style="text-align: center; height: 50;"><span style="font-size: large;">
					<b>Click on the description(s) which best represents your pain and
					<br>hold your mouse button to draw on the affected area of the body.</span>
					<br><span style="font-size: 24px;">&#8665;</span><span style="font-size: large;"> Be sure to press &#34;Send to Dr Office&#34; when you're done drawing!
					<br></b></span>If you cannot see the drawing or cannot draw, you can complete the pain diagram at your first visit.
				</td>
			</tr>
			<tr>
				<td style=" width: 40"></td>
				<td class="button" style="vertical-align:bottom"><button style="font-size: large;" type="button" onclick="sendCanvas()">Send to Dr. office</button> <button type="button" onclick="saveCanvas()">Save Print</button></td>
				<td rowspan="11">
					<div id="container">
						<canvas id="imageView" width="700" height="643" style="background-color: rgb(205, 205, 205);">
							<p>Unfortunately, your browser does not support our pain diagram application.  <br>We are sorry for the inconvenience. <br>Please use one of the 
							supported browsers listed below, or <a href="http://www.barnwellmd.com/PainDiagram/PainDiagram.pdf">click here</a> to print out the pain diagram
							which you fill out and send to us via mail or fax.</p>
							<p>Supported browsers: the <b>latest version</b> of: 
							<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">Internet Explorer</a>, 
							<a href="http://www.mozilla.com">Firefox</a>, 
							<a href="https://www.google.com/chrome">Google Chrome</a>, 
							<a href="http://www.opera.com">Opera</a>, 
							<a href="http://www.apple.com/safari">Safari</a>, and 
							<a href="http://www.konqueror.org">Konqueror</a>.</p></canvas>
						
					</div>
				</td>					
			</tr>
			<tr>
				<td>
				</td>
				<td id="1" style="text-align: center; height: 60; width: 228; background-color: black;"><a href="#" onclick="setBackColor(1,'#FF0000')"><img src="burning.png" alt="Burning" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="2" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(2,'#FFFF00')"><img src="aching.png" alt="Aching" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="3" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(3,'#8080FF')"><img src="numbness.png" alt="Numbness" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="4" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(4,'#B26B00')"><img src="pins&amp;needles.png" alt="Pins &amp; needles" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="5" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(5,'#FF00FF')"><img src="stabbing.png" alt="Stabbing" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="6" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(6,'#59B200')"><img src="shooting.png" alt="Shooting pain" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td id="7" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(7,'#FF7F50')"><img src="referred.png" alt="Referred pain" style="border: 0;" height="56" width="224"></a></td>
				</tr>
			<tr>
				<td></td>
				<td style="text-align: center; height: 50; width: 228;"><div style="text-align: center;">Referred pain starts in one area <br>and causes pain elsewhere.</div></td>
				</tr>
			<tr>
				<td></td>
				<td id="9" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="clearCanvas()"><img src="clearall.png" alt="Clear All" style="border: 0;" height="56" width="224"></a></td>
			</tr>
			<tr>
				<td></td>
				<td id="8" style="text-align: center; height: 60; width: 228;"><a href="#" onclick="setBackColor(8,'#FFCC99')"><img src="eraser.png" alt="Eraser" style="border: 0;" height="56" width="224"></a></td>
				</tr>			
		</tbody></table> 
		
	</form>

</body>
</html>

Open in new window

Zakaria Acharki

on my phone and tablet but I cannot draw on the image with my finger without a mouse.

That because you've attached just the mouse events to the canvas, for the mobile devices you will need to attach the touch events like touchstart / touchmove / touchend to your canvas.

Inside the `PainDiagram.js` file at the end of the `init ()` function add the following lines :

// Attach the touchstart, touchmove and touchend event listeners.
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
canvas.addEventListener('touchend',   ev_canvas, false);

Open in new window

thenelson

ASKER

I added those lines but the touch still is not working:

	// Attach the mousedown, mousemove and mouseup event listeners.
	canvas.addEventListener('mousedown', ev_canvas, false);
	canvas.addEventListener('mousemove', ev_canvas, false);
	canvas.addEventListener('mouseup',   ev_canvas, false);
	// Attach the touchstart, touchmove and touchend event listeners.
	canvas.addEventListener('touchstart', ev_canvas, false);
	canvas.addEventListener('touchmove', ev_canvas, false);
	canvas.addEventListener('touchend',   ev_canvas, false);
	}

Open in new window

Thanks for the response.

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

thenelson

ASKER

I added that code:

	function ev_canvas (ev) {
		if (ev.offsetX || ev.offsetX == 0) { // Opera and WebKit
		ev._x = ev.offsetX;
		ev._y = ev.offsetY;
		} 
	else if (ev.layerX || ev.layerX == 0) { // Firefox
		ev._x = ev.layerX;
		ev._y = ev.layerY;
	} 
	if( ev.targetTouches ) {
		var rect = ev.target.getBoundingClientRect();
		
		ev._x = ev.targetTouches[0].pageX - rect.left;
		ev._y = ev.targetTouches[0].pageY - rect.top;
	}
	// Call the event handler of the tool.
	var func = tool[ev.type];
	if (func) {
		func(ev);
	}
	}

Open in new window

Still doesn't work on my phone.

The sample does work in both the desktop and phone (the numbers change with the mouse and touch).

thenelson

ASKER

I'm wondering if the problem the touch is not calling the mouseup, mousedown, and mousemove functions?

Zakaria Acharki

Inside the tool_pencil () functin try to adjust the three calls by adding the touch events types like :

this.mousedown = this.touchstart = function (ev) {
this.mousemove = this.touchmove = function (ev) {
this.mouseup = this.touchend = function (ev) {

Open in new window

Instead of :

this.mousedown = function (ev) {
this.mousemove = function (ev) {
this.mouseup = function (ev) {

Open in new window

(Hope this will be the last modification)

thenelson

ASKER

I changed those lines but still doesn't work on the phone.

Also tried:

this.mousedown = function (ev) or this.touchstart = function (ev){
this.mouseup = function (ev) or this.touchend = function (ev){
this.mousemove = function (ev) or this.touchmove = function (ev){

Open in new window

(just guessed on the format). That also didn't work.

I could give you the html and js files to play with but I assume you already have them from viewing page source.

Sure do appreciate your help!!

Zakaria Acharki

It works in my phone now try to clear the browser cache or open the page in private mode and recheck.

thenelson

ASKER

Yep, it worked when I refreshed my browser.
But the routine that deletes the marking not on the body image (clearGray()) is not working in the phone:
Here is the phone image:

Here is the laptop image:

Here is the clearGray() code:

function clearGray()
{
	var imageData2 = context.getImageData(0, 0, 700, 643);
	var newPixels = imageData2.data;
	for (var i = 0, il = pixels.length; i < il; i += 4) 
	{
		if((pixels[i] == 255 && pixels[i+1] == 204 && pixels[i+2] == 153) 
		|| (newPixels[i] > 235 && newPixels[i+1] < 150 && newPixels[i+2] > 75 && newPixels[i+2] < 110))
		{
		}
		else
		{
		   newPixels[i] = pixels[i];
		   newPixels[i+1] = pixels[i+1];
		   newPixels[i+2] = pixels[i+2];
		}
	}
	context.putImageData(imageData2, 0, 0);
	context.fillStyle  = "#CDCDCD";
	context.fillText("Referred pain",275,600);
}

Open in new window

thenelson

ASKER

I decided to close this question and open a new one for the next problem (https://www.experts-exchange.com/questions/29129644/Javascript-routine-works-on-PCs-but-not-on-touchscreen-phones-or-tablets.html) since you actually resolved the original problem.

THANKS FOR YOUR HELP!!!

Zakaria Acharki

Glad to help, I will take a look when I can.