Angular JS Training

Advertisements

Phonegap…the end to camera access

Finally after having resisted using phonegap for 2 weeks, i gave up and in an hr. got camera access in my sencha app using phonegap..

Here’s the simple code that i actually got from the sample code that comes when u download phonegap :

Gotchas :

1. Add the ref to the cordova.js in the main index.html
2. Don’t use HTML in sencha controls like the Panel/Container etc.
3. Add the above js in the handler of a sencha button 

Sencha packaging to android

Basically what i have is a app from sncha architect that i’m unable to package coz of infinite erros….

Now, this guy here http://ventusmoso.com/phonegap/sencha-touch-2/build-an-android-app-with-phonegap-2-and-sencha-touch-2-in-eclipse/ shows that if the app is created using sencha cmd then packaging it is a 1 step process…

So what i am trying now is to create a new app using sencha cmd and then copying my content into it :

1. run cmd

2. C:\MSDE\khematar\SOFTWARES\SenchaCompleteTrial-1.0.0.40-windows.exe\sencha-touch-2.1.0-gpl>sencha generate app MyNewApp ./my-app

3.

Following all the steps i found that the build was still failing due to compass not being installed and then a quick google said that sencha 2 onwards it tries to build compass too automatically…so the easy way to skip this is  :

It could be trying to do a sass build with the app build(2.1 does that now), you need compass installed for it to work, but sometimes even with it installed it doesn’t. I found the easiest way is to build the sass yourself and add this:
skip.sass=1
To the sencha.cfg file in touch\cmd.
Add it before the long dotted line, the first section.
THIS WORKED….

ANOTHER APPROACH THAT I WAS TRYING (AND LOOKED PROMISING ) WAS TO CREATE A NEW ANDROID PROJECT AND THEN TO COPY THE CONTENTS OF MY SENCHA APP INTO ITS ASSETS FOLDER AND THEN TO OPEN THE INDEX.HTML OF THE SENCHA APP IN THE WEB VIEW WHEN THE ANDROID APP IS LAUNCHED

Adding HTTP Header to the outgoing SOAP call from the SOAPExtension

Two ways that we can control is either via proxy calls or webrequestmodules.
From the proxy class you can include this method
protected override WebRequest GetWebRequest(Uri uri)
{
    // Assuming authValue is set from somewhere, such as the config file
    HttpWebRequest request = (HttpWebRequest)base.GetWebRequest(uri);
    request.Headers.Add(“Customheader”, “Customstring”);
    return request;
}
If you want to do via plugin kind of extension similar to SOAPExtension you can use webrequestModules
Build an assembly using the class
namespace HttpWebRequestTest
{
    public class CustomHttpRequestCreator : IWebRequestCreate
    {
        publicCustomHttpRequestCreator() { }
        public WebRequestCreate(Uri uri)
        {
            HttpWebRequest webRequest = Activator.CreateInstance(typeof(HttpWebRequest),
                                            BindingFlags.CreateInstance | BindingFlags.Public |
                                            BindingFlags.NonPublic | BindingFlags.Instance,
                                            null, new object[] { uri, null }, null) as HttpWebRequest;
            webRequest.Headers.Add(“MyHeader:MyValue”);
            return webRequest;
        }
    }
}
Add the file to GAC and register in web.config
  <system.net>
    <webRequestModules>
      <remove prefix=http:/>
      <remove prefix=https:/>
      <add prefix=http: type=HttpWebRequestTest.CustomHttpRequestCreator, HttpWebRequestTest, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2bc4ccb2cdedce53 />
      <add prefix=https: type=HttpWebRequestTest.CustomHttpRequestCreator, HttpWebRequestTest, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2bc4ccb2cdedce53 />
    </webRequestModules>
  </system.net>

Mobile Web Dev Part 2

Hi,

So today my aim was to :

A. Get the getusermedia working on the chrome for android browser
B. Create a basic UI using http://jqueryui.com/themeroller/

Now, 3 hrs into the dev., the issues i’ve overcome are :

in aim A.1. moving the project files from dextop to device :

One way of doing this is to package as apk and transfer to device using usb storage..this is not an option for me
Next, u can install it on the device using the ADT tools
Easiest i found was https://build.phonegap.comhttps://build.phonegap.com/apps/380104/builds

2. 2nd issue that i faced was Remote Chrome Debugging :
http://wesbos.com/remote-debugging-mobile-chrome-android/ and its video : http://www.youtube.com/watch?v=n_7Wyj6DciY

3. The biggest issue that i faced was that the same sample code that i got for getusermedia (https://github.com/tagawa/GumWrapper) was working on my chrome and on the device when i copied the source into its SD card and opened on chrome (using file:///storage/emulated/0/Downloads/…), it first was opening in a html viewer but on chrome beta when i browsed to it, then also it wasn’t working….
Finally i packaged the same as apk using 1. above only to learn that the browser shim that an android app opens is not chrome (or chrome beta which i made default using the settings-> manage apps -> clear defaults) but some html viewer…

Finally i thought that maybe the webrtc thing is not available on local html files and that hosting the project might make it work (as sample sites like http://www.html5rocks.com/en/tutorials/getusermedia/intro/ and http://shinydemos.com/photo-booth/ were working in chrome beta)

Now how to easily host ? thankfully i found out about git pages and after some effort and this ytv (http://www.youtube.com/watch?v=bNVU82qP1n4) hosted the same GumWrapper eg. on  http://tkhemani.github.io/getusermedia_tk/
Finally i accessed it using the chrome beta (26) and it worked 🙂
PS. If nothing else, Use this http://qrcode.kaywa.com/dashboard/ to convert url th QR and then open on device using goggles…

Finally i came across http://davidwalsh.name/browser-camera which once i hosted it on github, worked beautifully..(wanted to try http://www.html5rocks.com/en/tutorials/getusermedia/intro/ too but maybe later…)

Will definately do this later : http://davidwalsh.name/convert-canvas-image

in aim B.

Ok so now my aim is to create a beautiful 1 page UI for the app (using JQuery UI coz i’ve had enough of Sencha) and then integrate it with the above…

Off to http://jqueryui.com/themeroller/

Ok so not its 6 hrs later, and i had decided to move to sencha touch to make the UI dev easier..and it really was very easy..but when all was done and i tried to implement : A + B..the app is asking for access to camera on the browser but not opening …. the i tried to install it on device but the apk is not installing ..no error too….so just stuck …

TOMORROW :

COPY ALL THE CONTENT TO ECLIPSE PROJECT AND THEN BUILD USING ECLIPSE ONLY AND USE ADT TO INSTALL ON DEVICE\
http://localhost:9222/ for app debugging