Codename One - Lock screen orientation in the Javascript port - codenameone

Assuming that my Codename One web-app is supposed to run on a mobile device, I tried to lock its orientation to portrait.
My problem is that the following build hint doesn't force the use of a web-app in portrait mode:
javascript.manifest.orientation=portrait
Am I missing something?
I also tried the following native interface, without success:
(function (exports) {
var o = {};
o.lockPortraitOrientation_ = function (callback) {
// Screen Orientation API, https://w3c.github.io/screen-orientation/#examples
screen.orientation.lock('portrait');
callback.complete();
};
o.isSupported_ = function (callback) {
callback.complete(true);
};
exports.cool_teammate_apps_frontend_NativeUtilities = o;
})(cn1_get_native_interfaces());

Is the browser you tested on within the compatibility table here?
Assuming it is try this syntax for the native code:
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (screen.lockOrientationUniversal("portrait-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
I'll check whether we can make our Display orientation calls map to these API's.

Related

how to disable text zoom effect on phone settings -ReactJS (web)

If the user has enlarged the font in the phone settings, how can I deactivate this setting?
I know one way for React Native. I need a web code like this:
//Here is React-Native example
if (Text.defaultProps) {
Text.defaultProps.allowFontScaling = false
} else {
Text.defaultProps = {}
Text.defaultProps.allowFontScaling = false
}
i couldn't find anything when I searched for a draft similar to this.
any idea?
thanks for your time.

How to achieve face detection using web camera

How should I create face detection web application which capture photo and save when face comes in-front of camera.
Which technology currently available to achieve this.
Please Help...
I've been using a wonderful solution called tracking.js (You can find it here). It's simple and wonderful.
Here's an example of how I use it in my code:
var trackerTask;
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackerTask = tracking.track('#vid', tracker, { camera: true })
tracker.on('track', function (event) {
// Do stuff when face was detected
});
// To stop tracking:
setTimeout(function () {
trackerTask.stop();
}, 500);
In the above example, replace #vid with your HTML5 <video> element.

Web bluetooth: How do I detect iBeacon?

I have been fiddling with the new web bluetooth functionality. I have one of these estimote beacons: http://developer.estimote.com/
I know the uuid for my beacon. Here is the code I am using(it is an angular app, hence $scope, $window):
$scope.runBT = runBT;
function runBT() {
let mobile = getMobileOperatingSystem();
if (mobile === 'Android' || mobile === 'iOS') {
$window.navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['b9407f30-f5f8-466e-aff9-25556b57fe6d']
})
.then(device => {
console.log('FOUND DEVICE: ', device);
device.watchAdvertisements();
device.addEventListener('advertisementreceived', interpretIBeacon);
})
.catch(error => { console.log(error); });
}
}
function interpretIBeacon(event) {
var rssi = event.rssi;
var appleData = event.manufacturerData.get(0x004C);
if (appleData.byteLength != 23 ||
appleData.getUint16(0, false) !== 0x0215) {
console.log({isBeacon: false});
}
var uuidArray = new Uint8Array(appleData.buffer, 2, 16);
var major = appleData.getUint16(18, false);
var minor = appleData.getUint16(20, false);
var txPowerAt1m = -appleData.getInt8(22);
console.log({
isBeacon: true,
uuidArray,
major,
minor,
pathLossVs1m: txPowerAt1m - rssi});
}
Sadly the watchAdvertisements method is not implemented yet. You may want to check the Implementation Status page at https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md to know when this method will be supported in Chrome and other browsers.
It's unclear what the problem is, but here are a few tips:
Understand that the web bluetooth APIs are a proposed set of standards under active development, and support is limited to certain builds of Google Chrome, and as a shim for the Noble.js bluetooth central module. If you are using Angular, you need to use the latter shim to make it work, which perhaps you already are. You can read more here: https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
If you are getting as far as the interpretIBeacon function, then it's just a matter of parsing the bytes out, which you seem well on your way to doing. You can see more about the byte layout of the beacon in my answer here: https://stackoverflow.com/a/19040616/1461050
You don't want to filter for the beacon UUID as a service, so you need to remove optionalServices: ['b9407f30-f5f8-466e-aff9-25556b57fe6d']. A beacon ProximityUUID is not the same as a GATT ServiceUUID even though they superficially have the same format. A beacon bluetooth advertisement of the type you are looking for a manufacturer advertisement and not a *GATT service** advertisement. The two advertisement types are different, but the APIs shown above should return results from both types.

Extjs - Generating a unique url for the tabs

I understand that ExtJS uses AJAX for all server side communication, and that ideally there would be only one page per application. But I am exploring the possibility of generating a unique url for a ExtJS tab which the user can then copy from the address bar for later use(traditional web application approach - making a page bookmarkable). Please let me know if anyone has done anything similar.
You can make use of the "hash". This is the portion of the URL which follows the "#" character.
If you only need to react to the hash at time of page load to support the bookmarking feature then you can get away with something like:
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
// Configure for use in viewport as needed.
listeners: {
tabchange: function( tabPanel, tab ) {
window.location.hash = '#'+ tab.itemId;
}
}
});
var token = window.location.hash.substr(1);
if ( token ) {
var tab = tabPanel.get(token);
if ( ! tab ) {
// Create tab or error as necessary.
tab = new Ext.Panel({
itemId: token,
title: 'Tab: '+ token
});
tabPanel.add(tab);
}
tabPanel.setActiveTab(tab);
}
});
You may also choose to go further and employ the hashchange event supported in recent versions of most browsers. This will allow you to react to the hash being changed by either user or programmatic means after the page has finished loading:
if ( 'onhashchange' in window ) {
window.onhashchange = function() {
var token = window.location.hash.substr(1);
// Handle tab creation and activation as above.
}
}
It is worth noting that the Ext.History singleton promises functionality similar to this. However, as of ExtJS 3.3.1 it has not been given support for the hashchange event and is instead wholly dependent on a polling interval and a hidden iframe hack. I was not satisfied with its performance in modern browsers - IE in particular - until I rewrote it to use hashchange where available.

WebClient issue

I am trying to get contents of http://www.yahoo.com using WebClient#DownloadStringAsync(). However as Silverlight doesn't allow cross domain calls i am getting TargetInvocationException. I know we have to put clientaccesspolicy.xml and crossdomain.xml in our web server root but that is possible only if i have control on my services. Currently Google is not under my control ;), so how do i handle it?
I've did a workaround by making a WCF service in my web application and then calling WebClient. This works perfectly but it is rather ineffecient. Is there any other better way than this?
Thanks in advance :)
Silverlight's cross domain restricitions cause many developers to implement workarounds. If you need to display the html page you get back you should look into Silverlight 4 (WebBrowser) control although this only seems to work when running out-of-browser mode.
If you need to parse through the content you can try some of the following:
For a managed code solution the proxy service you have already implemented is your best option.
Write a Java applet that returns this information. Silverlight can interopt to javascript which can interopt into Java applets. This also works in the reverse but a little difficult to setup. (If you need more info on this let me know).
Use javascript XmlHttpRequest to get the data you want from the source. This can be difficult when supporting multiple browsers. This link shows an example of how to do this (you will need to scroll down). Javascript get Html
Code:
var xmlHttpRequestHandler = new Object();
var requestObject;
xmlHttpRequestHandler.createXmlHttpRequest = function(){
var XmlHttpRequestObject;
if(typeof XMLHttpRequest != "undefined")
{
XmlHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
var tryPossibleVersions =["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp"];
for(i=0;i<tryPossibleVersions.length;i++)
{
try
{
XmlHttpRequestObject = new ActiveXObject(tryPossibleVersions[i]);
break;
}
catch(xmlHttpRequestObjectError)
{
// Ignore Exception
}
}
}
return XmlHttpRequestObject;}
function getHtml(){
var url = document.getElementById('url').value;
if(url.length > 0)
{
requestObject = xmlHttpRequestHandler.createXmlHttpRequest();
requestObject.onreadystatechange=onReadyStateChangeResponse;
requestObject.open("Get",url, true);
requestObject.send(null);
}}
function onReadyStateChangeResponse(){
var ready, status;
try
{
ready = requestObject.readyState;
status = requestObject.status;
}
catch(e) {}
if(ready == 4 && status == 200)
{
alert(requestObject.responseText);
}}

Resources