Is it possible to detect screen rotation? I'm woking on the touch screen driver on mac, so I want to know if the screen is rotated.
MacBooks (and Thinkpads) have an accelerometer used to detect sudden motion (i.e. being dropped) to prevent the HD head from crashing. The accelerometer data is exposed via webkit APIs.
Native APIs for accelerometer data are only exposed via private Apple-only interfaces, but Amit Singh has published his documentation for the sudden motion sensor API here.
Note that he's already published a free program that does what you're trying to do, called SMSRotateD. It'll rotate the MacBook screen as you flip the device. There's also a cool sample that has a "gyroscopic" window which will remain top-up as you tilt your device randomly.
Hope this HTML will be helpful (below and working version http://jsfiddle.net/b7Efq/)
Also, you can check SeisMac. They also provide a working library
<html>
<head>
<style>
.angle { height: 100px; }
#alpha { background-color: red; }
#beta { background-color: green; }
#gamma { background-color: blue; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var set_bar = function( id, value ) {
var max_width = $(window).width();
$( id ).width( value * max_width );
}
var normalize_angle = function( deg ) {
var x = ( (deg + 180) / 360 ) % 1.0;
return (x < 0) ? (x + 1.0) : x;
}
window.addEventListener("deviceorientation", function(event) {
set_bar( "#alpha", normalize_angle(event.alpha));
set_bar( "#beta", normalize_angle(event.beta + 180));
set_bar( "#gamma", normalize_angle(event.gamma));
}, true);
</script>
</head>
<body>
<div class="angle" id="alpha"> </div>
<div class="angle" id="beta"> </div>
<div class="angle" id="gamma"> </div>
</body>
</html>
Related
I am trying to achive a feature where the user will be able to drag a card component up or down for either extending the content and make the card cover the screen or close the card. The card is resting above a map.
I found this one svelte-gestures package with pan. It works like a sharm when the card sits on the top of the screen but when i put it at the bottom and try to get it to move up i run into all kind of diffcult models that doesnt work.
Here is the code that works with a card at the top extending its height downwards:
<script>
import { pan } from 'svelte-gestures';
let cardHeight = 100;
let initialY = 0;
let screenheight = window.innerHeight;
function handlePan(event) {
let delta = event.detail.y - initialY;
cardHeight += delta;
initialY = event.detail.y;
}
</script>
<div
use:pan="{{delay: 0}}"
on:pan="{handlePan}"
style="height: {cardHeight}px; background-color: lightblue; overflow: hidden; position: absolute; left: 0; right: 0;"
>
<!-- Card content here -->
<div style="height: {cardHeight}px;">
<h1>Card</h1>
<p>Extend and de-extend me!</p>
</div>
</div>
I tried using screenheight and inverting the logic but i just seem to run into very strange problems with the card lagging or flipping all over the place.
Any help would be appreciated!
Best Regards,
Rasmus
I'm implementing a game using a canvas as the renderer, and there are some points where there seem to be excessive "waits" between render frames and I have no idea what to think of this.
I've been working on this for the past few weeks and for the most part, there haven't really been issues. However, when there are a lot of things on screen there is a "wait" for some reason.
It takes about the same amount of time that the rendering code does before "composite layers" is called. I don't know if this is something that I can prevent or if it is just something that I have to live with. I'm only getting to the point where I'm going below 60 fps in extreme situations anyway.
Another example:
index.js
window.onload = () => {
const width = 1280;
const height = 720;
const canvas = document.getElementById("game-canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
function renderLoop() {
console.time("render");
// Do render and request next frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 13000; i++) {
// Not real code this is just to demonstrate the issue
ctx.fillRect(i % width, 10 * Math.floor(i / (width)), 10, 10);
}
console.timeEnd("render");
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 2px solid black;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<script src="./index.js"></script>
<canvas id="game-canvas"></canvas>
</body>
</html>
Improve HTML5 Canvas frame by frame JPG animation to fully cache before animating
The above code snippet is great. I'd like to be able to apply new widths with css/media queries to the canvas that holds the jpgs. Is there a way to add that to the above code?
when I tried it my jpg's became wildly oversized.
It appears in the above code that the height and width declared in js for the image and the height and width on the canvas tag need to match or things get wonky.
I want to dynamically call the image width with CSS and media queries.
thanks
<style type="text/css">
/*CSS for full screen animation.You may want to remove this*/
html,body {
height:100%;
width:100%;
padding:0;
margin:0;
}
/*ID for Canvas JPG Animation - Sets size, background image and loader*/
#anim {
background-image:url('images/icon_loading_75x75.gif'),url('images/t5.png');
/*Center=Loading GIF, Left Top= Placeholder Image*/
background-position: center, left top;
background-repeat: no-repeat;
height:500px;
width:660px;
}
</style>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('anim').getContext("2d");
var start = 1, stop = 121,cur=start,imgArr=[];
//Pre-loads Images
var loadLoop = function() {
var img = document.createElement("img");
img.onload = function() {
imgArr.push(this);
cur++;
if(cur > stop) {
// all images preloaded
animate();
}
else {
loadLoop();
}
}
//img.src = "jpg_80/t5_"+(cur)+".jpg";
img.src = "http://html5canvas.syntheticmedia.net/jpg_80/t5_"+(cur)+".jpg";
//jpg_80/t5_88.jpg
}
loadLoop();
//Canvas JPG Animation
function animate() {
var timer = setInterval(function() {
ctx.drawImage(imgArr.shift(), 0, 0 );
if(imgArr.length == 0) {
// no more frames
clearInterval(timer);
}
//Framerate # 24 Frames per Second
},1000/24);
}
}
</script>
<script src="modernizr-2.6.2.min.js" type="text/javascript">
</script>
<body>
<!-- HTML5 Canvas Animation-->
<canvas id="anim" width="660" height="500"></canvas>
<script>
//call after page loaded
window.onload = draw;
</script>
</body>
UPDATE: Got a jsfiddle up # http://jsfiddle.net/gacDy/7/ , however, I can't even seem to get this working correctly. I'll keep working on it, but hopefully it'll help.
I'm using Hammer.js for an app I'm working on. For now, I've got a demo that I got on the web somewhere that I'm using to figure out how to make this work. For the demo I have two images (I'll post screenshots below) that I'm trying to get to zoom independently with hammer.js.
As things are right now, both images zoom, but the second one zooms into the region where the first image is. (See screenshots below)
Pre-zoom image:
Post-zoom image:
Code for images:
<div id="zoom2">
<img src="Chrysanthemum.jpg" alt="" width="600" height="377" />
</div>
<div id="zoom">
<img src="waldo.jpg" alt="" width="600" height="377" />
</div>
Functions and such:
<div id="debug"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>
<script src="jquery.specialevent.hammer.js"></script>
<script>
var debug_el = $("#debug");
// disable the dragging of images on desktop browsers
$("img").bind("dragstart", function() {
return false;
});
$(function(){
var zoom = new ZoomView('#zoom','#zoom :first');
});
function ZoomView(container, element) {
container = $(container).hammer({
prevent_default: true,
scale_treshold: 0,
drag_min_distance: 0
});
element = $(element);
// prefixes
var vendorPrefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];
var displayWidth = container.width();
var displayHeight = container.height();
//These two constants specify the minimum and maximum zoom
var MIN_ZOOM = 1;
var MAX_ZOOM = 5;
var scaleFactor = 1;
var previousScaleFactor = 1;
//These two variables keep track of the X and Y coordinate of the finger when it first
//touches the screen
var startX = 0;
var startY = 0;
//These two variables keep track of the amount we need to translate the canvas along the X
//and the Y coordinate
var translateX = 0;
var translateY = 0;
//These two variables keep track of the amount we translated the X and Y coordinates, the last time we
//panned.
var previousTranslateX = 0;
var previousTranslateY = 0;
//Translate Origin variables
var tch1 = 0,
tch2 = 0,
tcX = 0,
tcY = 0,
toX = 0,
toY = 0,
cssOrigin;
var last_drag_event;
container.bind("transformstart", function(event){
//We save the initial midpoint of the first two touches to say where our transform origin is.
tch1 = [event.touches[0].x, event.touches[0].y];
tch2 = [event.touches[1].x, event.touches[1].y];
tcX = (tch1[0]+tch2[0])/2;
tcY = (tch1[1]+tch2[1])/2;
toX = tcX;
toY = tcY;
cssOrigin = toX +"px "+ toY +"px";
});
container.bind("transform", function(event) {
scaleFactor = previousScaleFactor * event.scale;
scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
transform(event);
});
container.bind("transformend", function(event) {
previousScaleFactor = scaleFactor;
});
container.bind("drag", function(event) {
cssOrigin = (toX + (toX-event.position.x) / scaleFactor) +"px " +
(toY + (toY-event.position.y) / scaleFactor) +"px";
transform(event);
last_drag_event = event;
});
container.bind("dragend", function(event) {
toX += ((toX - last_drag_event.position.x) / scaleFactor);
toY += ((toY - last_drag_event.position.y) / scaleFactor);
cssOrigin = toX +"px "+ toY +"px";
transform(event);
debug_el.text('TX: '+toX+' TY: '+toY);
});
function transform(event) {
//We're going to scale the X and Y coordinates by the same amount
var cssScale = "scale("+ scaleFactor +")";
var props = {};
$(vendorPrefixes).each(function(i, vendor) {
props[vendor +"transform"] = cssScale;
props[vendor +"transform-origin"] = cssOrigin;
});
element.css(props);
debug_el.text('TX: '+translateX+' TY: '+translateY+' '+element.css('-webkit-transform-origin'))
}
}
</script>
-- I duplicated the above code and changed any references to the first image to reference the second image in order to make the second image zoomable. But like I mentioned it's not working correctly. I've tried changing around all my variable names in case I missed a reference to the 1st image that could be causing this overlap but nothing has helped.
EDIT: This may also be pertinent:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
#zoom {
height: 377px;
width: 600px;
overflow: hidden;
position:relative;
background: #eee;
border: solid 1px #ccc;
}
</style>
<meta name="viewport2" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
#zoom2 {
height: 377px;
width: 600px;
overflow: hidden;
position:static;
background: #eee;
border: solid 1px #ccc;
}
</style>
I just need help figuring out how to keep the second image from disappearing into the 1st image when zooming. I'd appreciate any help I can get. Thanks all.
I want to use OpenStreetMap on a PhoneGap Application.
My Problem is that the click events are not fired on PhoneGap.
The code below works in a normal browser:
<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 18;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>
When this code in PhoneGap to display the map, the map is shown and the marker is displayed. However when I click on the marker nothing happens.
Does anyone know why this does not work. I am using the Android Emulator and am using Eclipse to create the PhoneGapApplication.
#Alexander, this is no definitive answer, just a tip, but have you tried Leaflet.js to see if it works? Never developed for PhoneGap, but I have a couple of mobile sites using Leaflet on Android/iOS devices with no troubles.