Need some advice with an Shoutcast app using intel XDK - javascript

I'm trying to develop an app that will just stream a shoutcast, the deal is I can't make it work, I'm testing my app on a android 4.2 and it seems to not work at all, I'm just doing the example from intel xdk documentation.
Here is the simple code i have made atm:
<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<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, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
var onDeviceReady=function(){
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function PlayMe() {
intel.xdk.player.startShoutcast("http://209.9.238.10:8008/",true);
}
</script>
</head>
<body>
<button onClick="PlayMe();">PLAY ME</button>
</body>
</html>

This issue is only seen on Android devices with version 3.0 and above. With the change of the Android web browser and WebView's rendering engine to Webkit, the intel.xdk.startShoutcast() can not successfully executed since it is an internal modification to the browser's engine.

Please use this format, it will just stream a shoutcast without errors,
Here is the simple format I have made:
http://209.9.238.10:8008/;strem.mp3
I have tested my app on an android 4.3 and it seems to work well.

Related

Webcomponents Polyfill not working

I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="css/site.css">
<!-- Components -->
<link rel="import" href="components/global/site-navigation.html">
</head>
<body>
<script>
(function () {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'js/webcomponents.js';
document.body.appendChild(e);
}
})();
</script>
<site-navigation></site-navigation>
</body>
</html>
What am I missing?
PS: Everything works fine in Chrome (with/without the polyfill)
You are using an old version of webcomponentsjs polyfill, which implements Custom Elements v0's document.registerElement() instead of v1's customElements.define().
You should use the new version 1.0 on github.
Just load the webomponents-lite.js script in the <head> part of your page:
<script src="webcomponents-lite.js"></script>
Update: Now polyfill version 2 was released. HTML Imports polyfill is not shipped any more, but can be used it separately, or you can still download v1 branch.

Zoom varies with leaflet in different browsers

I have been working on a site with leaflet, testing in Chrome in Windows. I've discovered that when I view it in other browsers (specifically Firefox or Chrome on MacOS, IE in Windows, Chrome on Android) the zoom is different: the effect is identical to zooming to 125%, making the zoom inside the map work differently but also making all text etc. appear slightly blurry. If I change the browser zoom to 75% on IE, it looks identical to the Chrome version. Here's a screenshot with side-by-side comparison.
Here's a simplified version of the code which is producing this problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script>
</script>
<link rel="stylesheet" href="styles_dark.css" />
</head>
<body>
<div id="mapdiv"></div>
<script>
// settings
var northWestCorner=L.latLng(53.85,-5.48),
southEastCorner=L.latLng(51.03,-2.44),
mapBounds=L.latLngBounds(northWestCorner,southEastCorner);
var mainMap = L.map('mapdiv', {
maxBounds:mapBounds,
minZoom:8,
maxZoom:13
}).setView([52.16, -3.65], 9);
// create map
L.tileLayer('http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
}).addTo(mainMap);
</script>
</body>
</html>
#mapdiv{top:0vh;left:0vw;height:100vh; width:100vw;vertical-align: top;}
body{margin:0px;padding:0px;}
#mapdiv{padding:1px;}
.text-center {padding:1px;}
::-webkit-scrollbar {
display: none;
}
Any idea why this might be happening?
Thanks very much in advance!

unable to load script HTML and javascript

So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.

Only one time welcome screen on android

i am making an html5/javascript application at Intel XDK and i would like to add a welcome screen which will be displayed only once ever.
any help is welcome.
thanks in advance!
You can use Cordova localStorage to save a value to detect first time or not.
Below is working sample:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
</head>
<body>
<h1>Hello World</h1>
<script src="cordova.js"></script>
<script>
function onDeviceReady() {
welcomeScreen();
}
document.addEventListener("deviceready", onDeviceReady, false);
function welcomeScreen(){
var welcome = window.localStorage.getItem("welcome");
if(!welcome){
window.localStorage.setItem("welcome", "1");
alert("Welcome Message"); // replace with welcome screen display
}
}
</script>
</body>
</html>

enquire.js not responsive in IE9

I'm running a very simple enquire.js test as per the enclosed and finding that it doesn't get a response from IE9. Several other browsers are responding fine (FF, Chrome, Safari). I've tested the test-suite from GITHUB in IE9 which runs fine - so I must be missing something. Any help appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>enquire.js test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="frame">hello</div>
<script src="js/libs/jquery.1.7.1.js"></script>
<script src="../dist/enquire.js"></script>
<script>
$(document).ready(function(){
enquire.listen(50);
enquire.register("screen and (max-width: 1000px)",
{
match : function(){
$("#frame").css("background-color","#f00");
},
unmatch : function(){
$("#frame").css("background-color","#0f0");
},
});
});
</script>
</body>
</html>
IE9 does not support the matchMedia API so you have to include a polyfill to get it to work. You can add the polyfill to the page however you like, providing it's loaded before enquire. Personally I use Modernizr to conditionally load polyfills, but that's personal preference.
Hope that helps

Categories