I've built a small HTML game which I plan to export to iOS and I want to lock the orientation to landscape. I've selected orientation to landscape under build settings but that doesn't seem to lock the orientation. I've tried experimenting with the following code:
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
intel.xdk.device.setRotateOrientation('landscape');
intel.xdk.device.hideSplashScreen();
}
</script>
however I'm not sure if it's correct or where to put it in my index.html file. Could someone help me by telling what code is correct and where it would fit into my index.html file?
My full code (without the above statement) can be seen below:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Bounce Bounce Bear</title>
<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />
<!-- Chrome for Android web app tags -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
<!-- All margins and padding must be zero for the canvas to fill the screen. -->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
background: #000;
color: #fff;
overflow: hidden;
touch-action: none;
-ms-touch-action: none;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div id="c2canvasdiv">
<!-- The canvas the project will render to. If you change its ID, don't forget to change the
ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
<canvas id="c2canvas" width="1024" height="768">
<!-- This text is displayed if the visitor's browser does not support HTML5.
You can change it, but it is a good idea to link to a description of a browser
and provide some links to download some popular HTML5-compatible browsers. -->
<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. What is a browser?
<br/><br/>Microsoft Internet Explorer<br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a <br/>
Google Chrome<br/>
Apple Safari<br/>
Google Chrome Frame for Internet Explorer<br/></h1>
</canvas>
</div>
<!-- Construct 2 exported games require jQuery. -->
<script src="jquery-2.1.1.min.js"></script>
<script src="cordova.js"></script>
<!-- The runtime script. You can rename it, but don't forget to rename the reference here as well.
This file will have been minified and obfuscated if you enabled "Minify script" during export. -->
<script src="c2runtime.js"></script>
<script>
jQuery(window).resize(function() {
cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
});
document.addEventListener("deviceready", function ()
{
window["c2iscordova"] = true;
// Create new runtime using the c2canvas
cr_createRuntime("c2canvas");
document.addEventListener("pause", function() {
cr_setSuspended(true);
}, false);
document.addEventListener("resume", function() {
cr_setSuspended(false);
}, false);
}, false);
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
Object blending is ON by default and you have to tap the button to turn off.
Most of the people using my AR will be first time users and won't know how to turn it off.
Is there a way to turn this off by default? I am not seeing a solution in the documentation.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I commented-out all the dialogs prompting for this and tested it on a phone that does not support it, because their code just automatically turns it off anyway. Same goes for that instant placement stuff which I think is just future-proofing by them for when the lidar devices (like Apple's) come out...
Here is the solution - add "&disable_occlusion=true" in the intent, e.g.:
Avocado;
I'm doing a bit of a POC for the WP8.1 application written in HTML5/JS that includes the maps in the webviews.
Scenario: I have 2 webviews with exactly the same HTML structure I'm referring the webviews to. In one webview I'm loading the bing.html that loads the bing maps. In other webview I'm loading the google maps map via the google.html.
bing.html and google.html have the same HTML structure and that is:
Bing.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="/pages/map/bing.js"></script>
</head>
<body onload="webContext.onLoad();" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapDiv" style="position: relative; width: 100%; height: 100%"></div>
</body>
</html>
google.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Google Maps API reference -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="/pages/map/map.js"></script>
</head>
<body onload="initialize()" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapdisplay" style="width:100%;height:100%; margin: 0 auto;"></div>
</body>
</html>
And the result is, that the Bing Map tiles appear to be blurred, not as sharp as on bing maps page itself. Google Maps look top notch.
However, when I open the bing.html itself from local file system, the map tiles are sharp.
Possibly this is a scaling issue. Whereas the Google code recognizes the display scaling to be greater than 100%, it loads so called retina or high-dpi or high-ppi images. The Bing map code has the option enableHighDpi to enable it manually:
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
credentials: "YourBingMapsKey",
center: new Microsoft.Maps.Location(37.769831,-122.447004),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12,
enableHighDpi: true,
});
source
It loads high dpi images then, which should be less blurry.
I don't know how good the Bing Maps code then detects high dpi devices (non-high-dpi devices shouldn't get high-dpi images to save data.). So feel free to also use the following code to detect the device pixel ratio using a CSS media query and only load high dpi images if necessary:
var isHighDpiDisplay = false;
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
if (mq && mq.matches || (window.devicePixelRatio > 1)) {
isHighDpiDisplay = true;
}
}
i want to try processing.js on an iOS application,
i have checked the projects on
http://procoding.audiocommander.de/ and
http://luckybite.com/iprocessing/
but none of them have an actual working example, so i went to create one...
SO... I have created a project and uploaded in
https://github.com/mako34/processing_iOS
my understanding is that all I need is just a wrapper for html5 canvas and js, for the
processing-1.4.1.js
to work??
my index.html works fine in a browser, not on the device!
my canvas works fine drawing a line on this test template
my js works fine on this test template
but doesnt work on the iphone actual web view,
So what is missing to make the sketch work?
thanks a lot!
here my index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.6.2.min.js"></script>
<script defer src="script.js"></script>
<script src="processing-1.4.1.js"></script>
</head>
<body id="body">
<div id="container">
<div id="main" role="main">
jQuery Alert<br />
Objective-C Alert<br />
Take a picture<br />
</div><!-- #main -->
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<img id="testImage" src="iphonebattery.jpeg" />
<canvas id="myCanvas" width="320" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</div><!-- #container -->
</body>
</html>
First off-- you don't want to have two canvas tags. I recommend checking out the actual ProcessingJS website for better implementation: http://processingjs.org/
I have some tutorials on setting up Processing to compile to iOS and preparing your iDevice:
http://ericmedine.com/processing-for-ios/
Hope this helps!
I am using the jquery mobile template from visual studio. In my Layout view I have the following markup
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
When my Browse view is rendered I want to change the data-fullscreen attibute to true. Here is the code I am attempting to use to do this..
<script type="text/javascript">
$("#indexPage").live('pageinit', function () {
alert("Code Engaged");
$("#div").attr("data-fullscreen", "true");
});
</script>
I cannot get this code to engage. Where do I place the code to engage it? The layout has several sections..
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#Page.Title</title>
<meta name="description" content="jQuery Mobile Site">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
#*<meta name="viewport" content="width=device-width, initial-scale=1.0">*#
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<!-- jQuery Mobile Latest Styles -->
<link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" />
#* // reference the minified version of our combined css based on whether we are in debug mode. *#
#if (jQueryMobileTemplate.MvcApplication.IsDebug)
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.css?v=2")" />
}
else
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.min.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" />
}
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<!-- We put these at the top because jquery mobile applies styles before the page finishes loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script> window.jQuery || document.write("<script src='#Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script>
<!-- Pre jQuery Mobile init scripts for overriding defaults -->
<script>
</script>
<!-- Load jQuery Mobile from jquery cdn, get latest builds -->
<script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>
#* <!-- Optionally, load from local site -->
<script src="#Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script>
*#
#RenderSection("HeadContent", false)
#*<script src="#Url.Content("~/js/libs/modernizr-2.0.min.js")"></script>
<script src="#Url.Content("~/js/libs/respond.min.js")"></script>*#
</head>
I tried it at the bottom of my "Browse" view as well but nothing. I just want the "Browse" view to execute this code.
The pageinit event has never properly worked for me either for some reason when I'm using asp.net-mvc. You can try using one of the page change events (pagebeforechange or pagechange) instead.