Sony Arouje Blog

a programmer's log

VS2013 Multi-Device Hybrid Apps and Network Error in Windows8

leave a comment »

Last couple of days I was working on Node js REST service running in one of my Raspberry Pi. The idea is to do certain stuffs remotely via mobile devices. Later I will write a post explaining the project in detail. I completed Phase 1 of the application running in Raspberry pi. So next task was creating a mobile app, I decided to use Cordova with VS 2013 Multi Device Hybrid app template.

Yesterday night I started working on the Hybrid app in VS 2013 for Windows 8. First thing I wanted to test was the connectivity to the REST service running in Raspberry pi. I used Angular js $http to connect to the REST service. To my surprise what ever I do, the app is throwing error while doing http post with status 0. The same code works successfully if I run as a web app.

I spend a hell lot of time to figure out the issue but no success. Then I decided to use fiddler to test the traffic, when fiddler is running the app could able to communicate with the REST service. I got a hint, when we run Fiddler in Win8, it adds apps to AppContainer Loopback exemption. If I exempt my windows 8 app then http request starts failing. This stage I realized that, the error is because of some app configuration issue. Also in VS Java Script console I could see the error as shown below.

XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd.

All my google search return nothing. After a long hours of desperate research I came to know that to access private network I need to add Private Network capability to windows 8 app. But I didn’t know how to add it for Hybrid app as there is no Capabilities section in the config.xml. Some more search leads me to the Faq page of Multi device hybrid app template. As per the FAQ page we can override the default AppManifest.xml as shown below.

1. Create a Package.appxmanifest file under res/cert/windows8. Create a windows8 solution folder if not exist.

2. Open the project folder and go to bld/windows-AnyCpu/Debug and open AppxManifest.xml in notepad, copy the content and paste it in the above Package.appxmanifest file.

3. Double click on Package.appxmanifest file then goto Capabilities tab and choose ‘Private Networks (Client & Server)’.

4. Save it and run the app again, this time it worked I could connect to my Node js REST api.

 

Hope this will help some one to solve the XMLHttpRequest issue.

 

Happy Coding…

Written by Sony Arouje

October 29, 2014 at 3:50 pm

Chat application using SignalR 2.1

leave a comment »

Around two years ago I published a post about SignalR. Recently some readers requested an updated post using SignalR 2.1, here is the updated one.

For this post I created a very simple chat application that hosted in IIS, developed in .NET 4.5. Below is the project structure.

  • SignalrTracer.ChatServer: An empty ASP.NET Web Application which host the SignalR hub.
  • SignalrTracer.Publisher: A class library project that has SignalR hubs. I created this project just to isolate SignalR hubs from the ChatServer.
  • SignalrTracer.ChatClient: Another empty ASP.Net Web Application act as the client.

 

SignalrTracer.Publisher

As I mentioned above, this project contains the SignalR hubs. We can add SignalR framework using Nuget package manager.

Open Package Manager Console from Tools->Nuget Pacakger Manager and choose SignalrTracer.Published as the Default Project in the console window, then enter

PM> Install-Package Microsoft.AspNet.SignalR.Core

The command will add the SignalR and dependent frameworks. It’s time to create our chat hub.

ChatHub.cs

using Microsoft.AspNet.SignalR;
namespace SignalrTracer.Publisher
{
    public class ChatHub:Hub
    {
        public void Subscribe(string chatId)
        {
            Groups.Add(Context.ConnectionId, chatId);
        }

        public void Publish(string toChatId, string message)
        {
            Clients.Group(toChatId).flush(message);
        }
    }
}

 

SignalR 2.1 relies on OWIN to host it. For that we need to create a Startup class as shown below.

using Microsoft.Owin;
using Owin;
using Microsoft.AspNet.SignalR;
[assembly: OwinStartup(typeof(SignalrTracer.Publisher.Startup))]
namespace SignalrTracer.Publisher
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
            var hubConfig = new HubConfiguration();
            hubConfig.EnableDetailedErrors = true;
            hubConfig.EnableJSONP = true;
            app.MapSignalR("/chatserver", hubConfig);

            app.Run(async context =>
            {
                await context.Response.WriteAsync("Chat server started");
            });
        }
    }
}

That’s it we created our SignalR hub. Let’s host it in our ChatServer.

SignalrTracer.ChatServer

This project is a OWIN host, to do that we need to refer another Nuget package called Microsoft.Owin.Host.SystemWeb.

Open the Nuget Package Manager Console and set Default project as SignalrTracer.ChatServer, then enter

PM> Install-Package Microsoft.Owin.Host.SystemWeb

Once all the package installed, just refer SignalrTracer.Publisher project and run the project. If every thing is fine then you can see an Internet Explorer with a string Chat server started. This means SignalR hub is up and running and any clients can connect now.

 

SignalrTracer.ChatClient

I used Javascript to connect to SignalR server. Open Nuget Package Manager Console and enter

PM> Install-Package Microsoft.AspNet.SignalR.JS

It will install JQuery and JQuery extension of SignalR client. I created an index.html and added the code below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script type="text/javascript">
    $(function () {
        var connection = $.hubConnection('http://localhost:35144/chatserver');
        var proxy = connection.createHubProxy('ChatHub');
        connection.start()
                .done(function () {
                    $('#messages').append('<li>Connected to chat</li>');
                })
                .fail(function () { alert("Could not Connect!"); });

        proxy.on('flush', function (msg) {
            $('#messages').append('<li>' + msg + '</li>');
        });

        $("#send").click(function () {
            proxy.invoke('Publish', $("#sendTochatId").val(), $("#message").val());
        });

        $("#connect").click(function () {
            proxy.invoke('subscribe', $("#chatId").val());
            $('#messages').append('<li>subscribed to chat</li>');
        });
    });
    </script>

    <title></title>
</head>
<body>

    <label>Chat id</label> <input type="text" id="chatId" /><input type="button" id="connect" value="Connect" /><br />
    <label>Send To</label> <input type="text" id="sendTochatId" /><br />
    <label>Message</label> <input type="text" id="message" />
    <input type="button" id="send" value="Send"/>
    <div>
        <ul id="messages"></ul>
    </div>
</body>
</html>

 

You might need to change the url of hubConnection marked in bold.

Once the connection established messages section will get appended with ‘Connected to chat’ message.

Enter a unique Id in Chat Id text and click Connect, open multiple window and connect with different chat id’s.

 

As you can see it’s a very basic and simple chat system based on SignalR.

Source Code

Happy coding…

Written by Sony Arouje

September 18, 2014 at 12:49 am

Posted in .NET

Tagged with ,

Compile SQLite for WinRT with FTS4 unicode61 support

leave a comment »

I was experimenting with the FTS3/FTS4 feature of SQlite in a WinRT app. The default tokenizer ‘simple’ wont tokenize special character like $, @, etc. The solution is to use ‘unicode61’ tokenizer. Unfortunately the SQLite installer for WinRT8.1 comes without unicode61 tokenizer. I searched a lot to get a SQlite WinRT build that supports unicode61 but I was not lucky enough to get one, so I decided to build one myself.

Tim Heuer have a great post explaining about creating a build of SQLite for WinRT, I went through that and acquired all the tools to build, including the SQLite source code. I did exactly the same way Tim explained in the video, finally I got my build. But again it has the same issue, not supporting unicode61 tokenizer. I tried several builds and all these time I build with DSQLITE_ENABLE_FTS4_UNICODE61=1 and other flags I mentioned below.

After several attempt with so many permutations and combinations, I got it working. Tim’s video is a very good reference for building SQLite for WinRT. But if you want unicode61 support then follow the below steps, it’s same as Tim’s explained with some exclusion.

  1. mkdir c:\sqlite
  2. cd sqlite
  3. fossil clone http://www.sqlite.org/cgi/src sqlite3.fossil
  4. fossil open sqlite3.fossil
  5. fossil checkout winrt, never issue this command, it will never include unicode61
  6. Added this step to enable unicode61 tokenizer. Append the below config to Makefile.msc, you can see some config already existing append the below config to it.

    OPT_FEATURE_FLAGS = $(OPT_FEATURE_FLAGS) -DSQLITE_ENABLE_FTS4=1

    OPT_FEATURE_FLAGS = $(OPT_FEATURE_FLAGS) -DSQLITE_ENABLE_FTS3_PARENTHESIS=1

    OPT_FEATURE_FLAGS = $(OPT_FEATURE_FLAGS) -DSQLITE_ENABLE_FTS4_UNICODE61=1

  7. Compile the code by issuing nmake -f Makefile.msc sqlite3.dll FOR_WINRT=1

 

I could build X86 and X64 using VS2012 command prompt for X86 and X64. But when I tried to compile for ARM I was getting some errors, I was fortunate enough to find a solution in StackOverflow. Followed that solution and I got the SQLite builds for X86, X64 and ARM.

I don’t want to spend time in creating a vsix package and install it in my machine, instead I took the backup of SQLite for WinRT version 3.8.5, in my machine the installed path is C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\SQLite.WinRT81. Then went into each folder and replaced the lib and sqlite dll with the respective builds I created.

Leave your comments if you have any questions.

 

Happy coding…

Written by Sony Arouje

July 17, 2014 at 6:06 pm

Posted in .NET, WinRT

Tagged with , , , , , ,

WinRT TextBlock with HyperLinks

leave a comment »

I was doing some experiments with Window 8 app development. I wanted to show the text in a TextBlock with any URL as a clickable hyperlink, so that user can click on it and navigate to that webpage. We can do this easily via xaml as shown below. I googled a lot to find a way to do the same in MVVM approach. With no solution in hand I decided to come up with a solution using Attached Properties.

<TextBlock x:Name="textValue" TextWrapping="Wrap">
     <TextBlock.Inlines>
         <Run Text="This is an example of how Hyperlink can be used in a paragraph of text.
               It might be helpful for you look to"></Run>
         <Hyperlink NavigateUri="www.bing.com">bing</Hyperlink>
         <Run Text="for more answers in the future."></Run>
      </TextBlock.Inlines>
</TextBlock>

 

I am using Caliburn Micro to bind the text, so the above approach will not suit my requirement. The solution I come up with is Custom Attached Properties. In the Attached properties I applied the above logic but via code. Have a look at the code.

using System;
using System.Text;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;

namespace Test.App.AttachedProps
{
    public class HyperLinkedTextBlock
    {
        public static string GetText(TextBlock element)
        {
            if (element != null)
                return element.GetValue(ArticleContentProperty) as string;
            return string.Empty;
        }

        public static void SetText(TextBlock element, string value)
        {
            if (element != null)
                element.SetValue(ArticleContentProperty, value);
        }

        public static readonly DependencyProperty ArticleContentProperty =
            DependencyProperty.RegisterAttached(
                "Text",
                typeof(string),
                typeof(HyperLinkedTextBlock),
                new PropertyMetadata(null, OnInlineListPropertyChanged));

        private static void OnInlineListPropertyChanged(DependencyObject obj, 
             DependencyPropertyChangedEventArgs e)
        {
            var tb = obj as TextBlock;
            if (tb == null)
                return;
            string text = e.NewValue as string;
            tb.Inlines.Clear();

            if (text.ToLower().Contains("http:") || text.ToLower().Contains("www."))
                AddInlineControls(tb, SplitSpace(text));
            else
                tb.Inlines.Add(GetRunControl(text));
        }

        private static void AddInlineControls(TextBlock textBlock, string[] splittedString)
        {
            for (int i = 0; i < splittedString.Length; i++)
            {
                string tmp = splittedString[i];
                if (tmp.ToLower().StartsWith("http:") || tmp.ToLower().StartsWith("www."))
                    textBlock.Inlines.Add(GetHyperLink(tmp));
                else
                    textBlock.Inlines.Add(GetRunControl(tmp));
            }
        }

        private static Hyperlink GetHyperLink(string uri)
        {
            if (uri.ToLower().StartsWith("www."))
                uri = "http://" + uri;

            Hyperlink hyper = new Hyperlink();
            hyper.NavigateUri = new Uri(uri);
            hyper.Inlines.Add(GetRunControl(uri));
            return hyper;
        }

        private static Run GetRunControl(string text)
        {
            Run run = new Run();
            run.Text = text + " ";
            return run;
        }

        private static string[] SplitSpace(string val)
        {
            string[] splittedVal = val.Split(new string[] {" "}, StringSplitOptions.None);
            return splittedVal;
        }
    }
}

 

In the above code I analyze the text for urls after splitting it, you can also do it using RegEx. As this code is just for protyping, I didn’t pay much attention to the quality of it.

In the xaml page I refer this attached property as shown below.

xmlns:conv="using:Test.App.AttachedProps"

 

In the Textblock, bind the text via the attached property as shown below.

<TextBlock conv:HyperLinkedTextBlock.Text="{Binding TextVal}"/>

 

If the TextVal has any words that starts with ‘http:’ or ‘www.’ then the above Custom Attached Property will create a HyperLink other wise create a Run control and add it to the Inline collection of the TextBlock.

 

Happy coding…

Written by Sony Arouje

July 16, 2014 at 2:45 pm

Access Raspberry Pi via internet

leave a comment »

In this post I will explain how to access Raspberry pi via Internet. I am trying out a home automation system using Pi and I wanted to access a node.js service running in my Raspberry pi. Also I may wanted to SSH to the pi to restart or configure it while I am away from home.

Configuring the Router

In my home Raspberry Pi is connected to a Netgear R6300 router. The router is then connected to a DSL modem. In these kind of setup we might be dealing with four different IP’s

  1. External IP assigned to you by your ISP.
  2. IP Address of the modem
  3. IP Address of the Router assigned by the modem
  4. IP Address of the Raspberry Pi assigned by Router.

Prerequisite

  • Credentials to login to the Modem configuration.
  • Credentials to login to the router configuration.

External IP: you can get your external ip by visiting whatismyip.com

IP Address of the Modem and Router: As I am using Netgear modem, I login into Netgear genie app. And from the Internet section I could see the IP Address assigned  to my router as shown below.

image

As you could see  the IP address assigned to my router is 192.168.1.2. Also you can see the Gateway IP address 192.168.1.1, that IP will be the IP address of your modem.

IP address of the Raspberry pi: SSH to Raspberry PI and issue ‘ifconfig’ command and you can see some details and check wlan0 as shown below. Line in bold shows the ip address of the Pi.

wlan0     Link encap:Ethernet  HWaddr 04:a1:51:6a:fb:8d
              inet addr:10.0.0.10  Bcast:10.0.0.255  Mask:255.255.255.0
              UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
              RX packets:5543 errors:0 dropped:11 overruns:0 frame:0
              TX packets:1799 errors:0 dropped:0 overruns:0 carrier:0
              collisions:0 txqueuelen:1000
              RX bytes:1200798 (1.1 MiB)  TX bytes:192891 (188.3 KiB)

 

In my scenario I assigned a static IP to this Pi, other wise router’s DHCP server will assign ip and might change from time to time. So most router have configuration, to set static IP to the devices and will never change. At my house most of the devices like TV, Tabs and Raspberry PIs have static IP’s and the guest devices uses DHCP assigned IP’s.

Let’s configure SSH to the Pi from internet.

Router Port Forwarding

Excerpt from Genie help

Port forwarding is designed for FTP, Web server, or other server-based services. Once port forwarding is set up, requests from the Internet are forwarded to the proper server.

In the Genie app you can find Port forwarding in Advanced setup->Port forwarding/Port triggering, you might be able to find some thing similar in other modem’s configuration.

I clicked ‘Add Custom Service’ button and it will show the below screen to setup Port forwarding configuration. Here I am configuring SSH.

image

Here  22 is the port where SSH server in my PI is listening. Internal IP address is the IP address of the Raspberry Pi. Click apply and the changes will get saved.

We setup the port forwarding in the router. We need to do the similar configuration in Modem.

Modem Port Forwarding

Enter the IP address of the modem in the Chrome/IE, enter the user name and password if prompted.

Note: My DSL modem is pretty old one and may not be match with the interface of your modem configuration screen.

The port forwarding configuration in my Modem is located at Advanced Setup/NAT/Virtual servers. See the configuration below.

image

Here I setup the external port number as well as internal port number. You can have different external port number if you want, say for e.g. external port number 8090 can be mapped to internal port number 22. The server IP address should be the IP address of the router.

Check whether the port is opened by going to yougetsignal.com, if the port is still closed then you might need to do Port triggering in Modem as shown below.

image

 

We successfully configured SSH to Raspberry Pi from internet, you can check using a machine connected to a different network and connect to Pi using any SSH client like Putty. While connecting the IP address should be the external IP address and the port should be the one configured in Modem, here it’s 22.

Conclusion

The above approach will work, in case you want to open any port, I have a node.js service listening to 8090 in the same Raspberry pi. I did the above approach to access it via internet.

Leave your comments if you like this post or in case of any questions.

Written by Sony Arouje

June 25, 2014 at 3:33 pm

Pi Tracker–Code running in Raspberry Pi

with one comment

In my last post you can see the Tracker in action. This post I will explain the code running in Raspberry pi that controls the Tracker. I use Wiring Pi to control the  GPIO instead of the default RPI.GPIO. The intention of using Wiring pi is because Software PWM is easy to implement. Any way after the first run of the tracker I realized that my tracker is slow moving one and no need to control the speed, so I haven’t used Software PWM here.

Installing Wiring Pi for python

Command  prompt type the below commands

  1. sudo apt-get install python-dev python-pip
  2. sudo pip install wiringpi2

Let’s check whether wiringPi installed correctly

  1. sudo python
  2. import wiringpi2
  3. wiringpi2.piBoardRev()

if it returns a value then wiring Pi installed successfully.

Pi Tracker php code running in Raspberry pi

Motor.py

import wiringpi2 as io
from time import sleep
class Motor:
        def __init__(self, gpio_a, gpio_b):
                self.Gpio_a=gpio_a
                self.Gpio_b=gpio_b
                self.activeGpio=gpio_a
        def setup(self):
                io.wiringPiSetupGpio()
                io.pinMode(self.Gpio_a,1)
                io.pinMode(self.Gpio_b,1)
        def forward(self):
                self.stop()
                self.activeGpio=self.Gpio_a
        def reverse(self):
                self.stop()
                self.activeGpio=self.Gpio_b
    
        def acclerate(self,speed):
                io.digitalWrite(self.activeGpio,1)
                #speed param is not used here.
        def stop(self):
                io.digitalWrite(self.Gpio_a,0)
                io.digitalWrite(self.Gpio_b,0)

Engine.py

from Motor import Motor
class Engine:
        motor_a=Motor(17,27)
        motor_b=Motor(23,24)
        def __init__(self):
                Engine.motor_a.setup()
                Engine.motor_b.setup()
        def steer(self, command):
                direction,speed=command.split(",")
                if(direction=="CLOSE"):
                        self.stop()
                elif (direction=="U"):
                        self.forward()
                elif (direction=="L"):
                        self.left()
                elif(direction=="R"):
                        self.right()
                else:
                        self.reverse()
        def forward(self):
                Engine.motor_a.forward()
                Engine.motor_b.forward()
                self.acclerate()
        def reverse(self):
                Engine.motor_a.reverse()
                Engine.motor_b.reverse()
                self.acclerate()
        def right(self):
                Engine.motor_b.reverse()
                Engine.motor_a.forward()
                self.acclerate()
        def left(self):
                Engine.motor_a.reverse()
                Engine.motor_b.forward()
                self.acclerate()
        def acclerate(self):
                Engine.motor_a.acclerate(10)
                Engine.motor_b.acclerate(10)
        def stop(self):
                Engine.motor_a.stop()
                Engine.motor_b.stop()
                print "engine stopped"

trackerRemoteListener.py

import socket
from Engine import Engine
TCP_IP = '10.0.0.10'
TCP_PORT =5005
BUFFER_SIZE = 100
engine= Engine()
engine.stop()
s = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.bind((TCP_IP, TCP_PORT))
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.listen(1)
conn, addr = s.accept()
print 'Connection address:', addr
while True:
        try:
                data = conn.recv(BUFFER_SIZE)
                print "received data: ",data
                engine.steer(data)
                if not data:
                        engine.stop()
                        conn,addr=s.accept()
        except KeyboardInterrupt:
                conn.close()
                engine.stop()
                print "connection closing"
        except Exception as err:
                conn.close()
                s.listen(1)
                conn,addr=s.accept()
                #s.listen(1)
                print "error occured"
                pass
conn.close()

How it works

Motor.py class represent a motor in the Tracker. It accepts two parameters and it should be a valid GPIO pin to which the motor is connected. For e.g Motor_a is connected to GPIO 17 and 27. If we give write 1 to 17 and 0 to 27 then Motor_a will run forward, write 1 to 27 and 0 to 17 Motor_a run reverse.

Pi Tracker uses two motors to drive, Engine.py controls these two motors. As you can see in the code Engine.py creates two Motor instance. It also has functions to steer the tracker in different directions.

trackerRemoteListener.py is the socket program that listens to the command from external device to control the tracker. To control this tracker I used an Android tab that sends the command to this listener.

Hope the code is self explanatory, if not post your questions in the comment section.

 

Happy coding…

Written by Sony Arouje

June 24, 2014 at 11:55 am

Posted in Raspberry Pi

Tagged with , , ,

PI Tracker in action–video

with one comment

In my last post I gave an overview of a toy I created using Raspberry Pi and the components used for it. After that some of my friends wanted to see the toy in action and here is the video.

PI Tracker

Video Streaming

A new feature added to the tracker after the last post is the video streaming to the controlling device. In the modified tracker a USB camera is attached to the front of the tracker and connected to the Raspberry Pi. The RaspPi host a mjpg streamer and the video can be streamed to any device connected to the same network, including the Android device that controls the tracker. This helps my son to sit anywhere in the house and control the tracker.

 

Stay tuned for the next post with source code and more…

Edit: A new post added explaining the Source code running in Raspberry pi

Written by Sony Arouje

June 12, 2014 at 6:22 pm

Follow

Get every new post delivered to your Inbox.

Join 173 other followers

%d bloggers like this: