JS touch events in an .html file that I mail as an attachment to an iPhone5 (OS9.2), are never executed because a touch on the screen is intercepted by the Mail and interpreted as DONE. I'm new to this. Am I missing something obvious? The following code works in XCodeSimulator but not in a real phone. Is there a workaround? Are .html files unsupported in an attachment, for some reason?
Below is a typical test code I'm using. I prefer to work in vanilla JS, rather than JQuery, but I'd be grateful for any suggestions or advice, whatever.
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas{
position: absolute;
top:100px;
left:100px;
border:4px solid;
}
</style>
<script>
function init() {
var touchzone = document.getElementById("mycanvas");
touchzone.addEventListener("touchstart",draw,false);
}
function draw() {
var canvas = document.getElementById('mycanvas');
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(event.touches[0].pageX-100, event.touches[0].pageY-100,10,10);
}
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500">
Canvas element not supported.
</canvas>
<h2> Tap inside rectangle to leave a spot. Outside leaves nothing.</h2>
</body></html>
We realized that an .html e-mail attachment cannot work in iOS. Placing the file in Public folder on Dropbox gives it a web address that the phone can link. This works for us so far.
Related
I'm building a utility which will pull TIF files from blob storage and render them in html. Since it's just a utility, I will view them in Edge, which shows TIF files.
I can see the eighth example on this page renders fine. Meaning, this code works:
<img width=200 height=200
src="tiffdocument.tif" alt="">
However, my HTML, below, does not render anything:
<img src="https://atpblob.blob.core.windows.net/imagedata/94ae9802-4e42-4ba1-8955-11ac7c7e3509.tif" alt="" width="500" height="500">
If I go directly to the link in the source, it will download the image, so why won't it render?
Got it.
img does not work the way I was trying to use it. You have to explicitly use a GET request to pull the file.
For rendering the file cross-browser, I ended up using tiff.js.
The final html/js/css string I pushed to the browser ended up looking like this:
<!doctype html>
<html>
<head>
<title>TIF View</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.rawgit.com/seikichi/tiff.js/f03d7965/tiff.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'https://atpblob.blob.core.windows.net/imagedata/${blob}.tif');
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.appendChild(canvas);
};
xhr.send(null);
</script>
<style>
canvas {
min-height: 60px;
}
</style>
</body>
I'm trying to make a game with flash cs6 and createjs. When I test it locally (meaning, I click on the .html file in the output) it works just fine and as intended.
Then I uploaded it on Newgrounds and previewed it with my pc (windows 8.1, google chrome) and the game got stuck on a white screen - meaning the preloading function isn't working properly?
Then I previewed it on my iPad (always from Newgrounds), and it worked on Safari - even though there was no audio.
Then I tried reuploading it on Newgrounds - but this time I removed all the sound from the game - and it works even when previewed on my computer.
From all this, I've deduced that there must be some conflicting code that involves audio preloading when I try to start the game with my pc on Newgrounds. My questions are:
1) When I preview my game on Newgrounds, why won't it even load if there's audio in it and I use my pc? (Remember, it works if I preview it on newgrounds with my iPad, and it works even on my pc if I completely remove the sound files)
2) Why is it that the audio won't work on the Ipad? I added a onclick function at the very first frame of the game to start the sound, as suggested elsewhere; the function works but the sound won't start.
Thanks in advance for your help, please note that I have NO experience with Javascript (all I ever coded with is Actionscript) but I'm willing to learn and trying my best.
Here's the code I have in my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from testgame</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="testgame.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Bitmap10.png", id:"Bitmap10"},
{src:"images/Bitmap12.png", id:"Bitmap12"},
{src:"images/Bitmap13.png", id:"Bitmap13"},
{src:"images/Bitmap14.png", id:"Bitmap14"},
{src:"images/Bitmap15.png", id:"Bitmap15"},
{src:"images/Bitmap16.png", id:"Bitmap16"},
{src:"images/Bitmap17.png", id:"Bitmap17"},
{src:"images/Bitmap18.png", id:"Bitmap18"},
{src:"images/Bitmap19.png", id:"Bitmap19"},
{src:"images/Bitmap20.png", id:"Bitmap20"},
{src:"images/Bitmap21.png", id:"Bitmap21"},
{src:"images/Bitmap22.png", id:"Bitmap22"},
{src:"images/Bitmap23.png", id:"Bitmap23"},
{src:"images/Bitmap24.png", id:"Bitmap24"},
{src:"images/Bitmap30.png", id:"Bitmap30"},
{src:"images/Bitmap31.png", id:"Bitmap31"},
{src:"images/Bitmap32.png", id:"Bitmap32"},
{src:"images/Bitmap33.png", id:"Bitmap33"},
{src:"images/Bitmap34.png", id:"Bitmap34"},
{src:"images/Bitmap35.png", id:"Bitmap35"},
{src:"images/Bitmap36.png", id:"Bitmap36"},
{src:"images/Bitmap37.png", id:"Bitmap37"},
{src:"images/Bitmap38.png", id:"Bitmap38"},
{src:"images/Bitmap39.png", id:"Bitmap39"},
{src:"images/Bitmap4.png", id:"Bitmap4"},
{src:"images/Bitmap5.png", id:"Bitmap5"},
{src:"images/Bitmap6.png", id:"Bitmap6"},
{src:"images/Bitmap7.png", id:"Bitmap7"},
{src:"images/Bitmap8.png", id:"Bitmap8"},
{src:"images/Bitmap9.png", id:"Bitmap9"},
{src:"sounds/siglaintro.mp3", id:"siglaintro"},
{src:"sounds/siglaloop.mp3", id:"siglaloop"}
];
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.testgame();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="820" height="480" style="background-color:#ffff66"></canvas>
</body>
</html>
Issue solved. All I had to do was to use the most recent versions of the createjs tool in the html code, like this:
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
So, problem solved, please ignore me, just coding around
I recently discovered that mobile safari (on iOS 9.1 - though unsure about older safari versions) has an unfortunate problem with multiple connections and images. If you have six images when you load a page, it will delay XHR requests that loads after those six images by a huge lag time (order of 30s).
For example, I loaded the following using a standard NodeJS/Express server and saw giant delays before the alert showed up - despite the fact that all there images are just a couple of KB and I can visibly see that they are all loaded. The dev console also shows the images loaded but not the XHR request. The duration it took to download the file was very small but the latency was huge.
This is not a problem on any other browsers (mobile chrome, regular safari, etc).
Sample problem html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<img src="/static/images/general/check.png">
<script>
var url = '/static/test.html'
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
alert(url) //This takes forever
};
xhr.send();
</script>
</body>
</html>
An odd thing is if you ran the XHR request BEFORE there were 6 images, it would work perfectly. In fact, if you even did something like this one below, it was fine. I think this works because the background CSS image must retrieve the URL after the XHR is initiated.
Replace one of the img tags with a background css image and it works:
<!DOCTYPE html>
<html>
<head>
<style>
.test {
background-image: url("/static/images/home/check.png");
height: 400px;
}
</style>
</head>
<body>
<img src="/static/images/home/payment.png">
<img src="/static/images/home/couple-present-mobile.jpg">
<img src="/static/images/general/welcome.jpg">
<img src="/static/images/general/arrow-down.png">
<img src="/static/images/general/arrow-right.png">
<!--<img src="/static/images/general/check.png"> REMOVE THIS LINE and add the background image instead-->
<div class="test"></div>
<script>
var url = '/static/test.html;
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url) //NO DELAYS!
};
xhr.send();
</script>
</body>
</html>
Also I found out that just running 7 simultaneous XHR requests also does not cause this problem (such as the below):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var urls = ['/static/images/home/payment.png',
'/static/images/home/couple-present-mobile.jpg',
'/static/images/general/arrow-right.png',
'/static/images/general/arrow-down.png',
'/static/images/general/welcome.jpg',
'/static/images/general/check.png',
'/static/test.html'];
for(var i = 0, ii = urls.length; i < ii; i++){
(function(){
var url = urls[i];
var xhr = new XMLHttpRequest();
xhr.open('GET', encodeURI(url));
xhr.onload = function() {
console.log(url)
};
xhr.send();
})()
}
</script>
</body>
</html>
Has anyone come across this problem and figured out a way to deal with it without reducing the number of images or putting them in a sprite or something?
The hack I ultimately used to get around this was to load the images from a different host. For simplicity, if the browser detected that the host was www.domain.com, I would load images it from domain.com and vice versa. You can also just have all your images come from a certain host like images.domain.com and keep your api's and other stuff on another host.
Not the most ideal or elegant solution, but its super simple to implement and solves the problem.
am making a Createjs and html5 project in which I am drawing a shape(Red circle), when I click over the circle it gives alert. It works fine on all desktops and android phones. Except when I open this in a windows phone it works fine on the normal screen but when I zoom the screen it loses it working, an alert is shown when I click anywhere on the screen(maybe where the co-ordinates of the shape resides) but not when I click over the shape(Circle),,
Your help is appreciated
my demo.html
<!DOCTYPE html>
<html>
<head><title></title>
<script type="text/javascript" src="createjs-2013.12.12.min.js"></script>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
createjs.Touch.enable(stage);
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
circle.addEventListener("click", function(evt) { /*$("span#log").text(circle.x);*/ alert('clicked'); });
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<span id="log"></span>
<br>
<canvas id="demoCanvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>..
Here's the project
Not sure if this is relevant as haven't looked at sample code, but I think createjs.Touch.enable works on Stage instances rather than DisplayObjects
See here
I do alot of Research over this topic, and at the end i came to this point that this the
BUG in IE11 . Hope Microsoft helps to solve this.
Im trying to do a composite operation on layers using KineticJS.
Everything works fine in Chrome, but nothing shows for firefox, or IE10
The code runs through without any errors.
You can see the issue here:
http://clients.lilodesign.com/Lilo/Kinetic/
Chrome you should see a circle with a partial bit of the standard MS Blue Trees image showing through. In Firefox and IE10 you just get a blank screen.
You can view the code by viewing the source. Its all in-line and a very simple example to show the issue.
If you remove the following line:
ctx.globalCompositeOperation = "destination-atop";
Then you see the blue trees image with the ellipse on top of it as expected in all three browsers, so the code does "work".
Has anyone else experienced this and found a workaround?
I have searched and tried a couple of suggested solutions such as:
shape intersection with KineticJS
But all these still only seem to work in Chrome.
Any help or pointers would be appreciated.
Thanks
Tyrone.
We used to be able to cheat by grabbing the context of a layer, but now it’s unreliable (as you’ve discovered).
You can still get verrrrry hacky and do it like this: : http://jsfiddle.net/m1erickson/6fTQU/
But don’t ! (Even this hack doesn’t actually work on images with transparent pixels).
Instead, do it the official way by creating a Kinetic custom Shape Object.
Kinetic Shape gives you an official canvas and context to work with.
As a result, the globalCompositeOperation works fine (reliably!).
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LtxEe/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
body{ background-color: ivory; }
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
buildLayer(img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function buildLayer(img){
var myShape=new Kinetic.Shape({
drawFunc:function(canvas){
var ctx=canvas.getContext();
ctx.beginPath();
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-atop";
ctx.arc(150,150,60,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
canvas.fillStroke(this);
},
x:0,
y:0,
width:img.width,
height:img.height
});
layer.add(myShape);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>