I'm trying to get touchmove events to register with a simple web app written using Google apps scripts html service so that I can make simple web apps that function on the iPad as well as on a desktop.
All I do is first load a web page, which works as expected:
function doGet() {
return HtmlService.createHtmlOutputFromFile('test page');
}
Then I created a simple canvas on the html page:
<html>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.fillStyle="black";
ctx.fillText("TEST",50,50);
canvas.addEventListener("touchmove",testme,false);
function testme(e) {
e.preventDefault();
alert("testme");
}
</script>
</html>
This is just the latest variant I have tried. Binding click or mousedown or mousemove all work fine in this example on a desktop. However, trying with touchstart or touchmove don't do anything on an iPad. I have tested with both Chrome and Safari on the iPad.
I have also tried adding something like:
document.addEventListener("touchmove",doPreventDefault,false);
And have a simple function that calls preventDefault(), but that didn't help either.
Am I doing something wrong, or do I have to do something different because it is google apps script html service?
I have now tried with jQuery (just read up on how to do it) but it still doesn't seem to work right on the iPad:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<p>Test</p>
<br><br>
</body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<script>
$(document).ready(function() {
$("#canvas").bind('touchstart',function(e) {
alert("Hello world!");
});
$("p").mousedown(stuff);
$('#canvas').touchmove(onMove);
});
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.fillStyle="black";
ctx.fillText("TEST",50,50);
function onMove(e) {
alert("testing");
}
function stuff(e) {
alert("Stuff");
}
</script>
</html>
The mousedown event works fine, and it event works with a touch - in fact, it seems mousedown and mouseup correlate work with touches on the iPad. But mousemove doesn't work and neither does touchmove or touchstart or touchend. I have tried with bind and more directly as seen above.
Is there something I'm doing wrong to make this work?
You can add a feature request on the Caja issue tracker to whitelist those events. They currently are not on the whitelist.
Read the htmlservice docs.
You cant manipulate the dom unless you use a caja-compatible way like jquery.
Related
Code works fine on desktop but for some reason not on mobile (iOS or Android).
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.12/fabric.min.js"></script>
</head>
<body>
<div class="canvas-container" style="width: 500px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="500" height="500" style="border: 1px solid rgb(170, 170, 170);"></canvas>
</div>
<button id="clear" type="button">Clear</button>
<script>
// Free draw
var canvas = new fabric.Canvas('c');
canvas.freeDrawingBrush.width = 5;
canvas.isDrawingMode = true;
// Clear canvas
document.getElementById('clear').addEventListener('click', function(){
canvas.clear();
})
</script>
</body>
</html>
Code is based on this example which does work on mobile http://jsfiddle.net/MartinThoma/B525t/
I can see the canvas and button on mobile but touching the screen just moves the page!
This is problem with Fabric.js build configurations, please check below documentation to enable gestures control in builder, as by default it's not added and Fabric.js does that by adding Event.js lib which depends on "Interaction" module.
Also do refer to this thread to get idea:
Fabric.js Mobile Touch Issue
And one more thing Fabric.js release the updated version with some additional touch screen issues fixed, please check with updating your lib.
Fabric.js Changelog Version 5.0.0
You can get the Fabric.js customized build from here as per your need:
Fabric Get Build
http://localhost:63342/untitled1exercise.1html/exercise1.html?_ijt=kk8leu22fhfgiu9fi47k34bc04
<!doctype html>
<html>
<head>
</title>Hello world I'm Nour Belhassen and I am in the process of making a game<title/>
</head>
<body>
</h1>Hello world I'm Nour Belhassen and I am in the process of making a game <h1/>
<canvas id="asteroids" width="400" height="400"></canvas>
<script>
var canvars = document.getElementById("asteroids")
var context = canvas.getContext("2d")
context.strokeStyle = 'dimegrey';
context.lineWidth = 5;
context.rect(75,75,250,250);
context.stroke();
// this is a comment, it has no effect!!!
</script>
</body>
</html>
Why don't you try pressing F5 on your keyboard to reload the page?
On Windows, you can also try CTRLr. On MacOS, it's CMDr.
You have a typo.
// canvars
var canvars = document.getElementById("asteroids")
// canvas without 'r'
var context = canvas.getContext("2d")
this is why your script fails
you can take a look at the DOM content loaded event in JS.
I wanted to create text box inside the canvas.
HTML
<canvas id="canvas" width="200" height="50"></canvas>
JavaScript
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
when I run the file HTML not have anything.
You just simply missed the libraries CanvasInput.min.js simply download from the here and add to your code.
Sample Code:
<html>
<title>sample</title>
<head>
<script src="CanvasInput.min.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
</script>
</body>
</html>
You cannot simply render a standard HTML input field inside a canvas, if that's what you wanted to achieve.
It looks like you were trying to utilize code from this developer page. But it seems you overlooked that there is a whole lot more Javascript required to simulate an input field as a canvas graphic element. Check out this Git repository to see the whole code.
I made a CodePen showing how to put a text input inside a canvas with this technique. For a quick demo add this script tag to your HTML code (you may want to host the code yourself later):
<script type="text/javascript" src="http://goldfirestudios.com/proj/canvasinput/CanvasInput.min.js?v=1.2.0"></script>
Does the HTML nodes in <iframe> support javascript in design mode? For the following code, dialog doesn't pop up when I click the <span>. My browser is FF 16.0.2. Is there any way to get an alert when clicking the span?
<html>
<body >
<iframe id="myeditor" style="width:500px; height:170px;"></iframe><br><br>
<script type="text/javascript">
editor = document.getElementById("myeditor").contentWindow;
editor.document.designMode="on";
editor.document.open();
editor.document.write('head <span onclick="alert(1)" style="border: solid 1px #666">click me</span> tail');
editor.document.close();
</script>
</body>
</html>
Thanks for reading here. :D
Event Handling Disabled
A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla 1.5) the events become active again.
From MDN.
With the advent of the new HTML5 Canvas, I was wondering if it's possible to draw a HTML section onto the canvas?
The idea is to take a piece of existing HTML code (from the same page, or defined elsewhere) and turn it into graphics.
Something like:
htContext.drawElement(document.getObjectByID("someObj"),0,0);
Firefox has proprietary method drawWindow. With it you can draw the whole document on the canvas. But only in Firefox unfortunately. And also due to security issues you need permissions from the user to do it. So it's suitable only for some kind of internal project.
Here is the sample test page:
<!DOCTYPE html>
<html>
<head>
<title>drawWindow</title>
<script>
window.onload = function(){
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
document.getElementById('canvas').getContext('2d').drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
}
</script>
</head>
<body>
<h1>Test</h1>
<canvas id="canvas"></canvas>
</body>
</html>