Sony Arouje Blog

a programmer's log

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

PI TRACKER – Raspberry Pi based WiFi controlled toy

with 2 comments

I was always fascinated about software and hardware interaction. But with my limited knowledge in electronics, I kept the hardware part aside and was working only in software. After having some hands on experience with my first Raspberry Pi, I decided to build a toy for my son. I purchased my second pi and some other components and this is what I built. Yes it looks ugly but worth playing with it :).

fotor_(283)

Last couple of days I was refreshing my basic electronic skills and virtually designing the software and  hardware for the device. You can find so many similar RaspPi based toys and I am adding one more to it.

Yesterday evening I got the last piece of the puzzle, the rechargeable battery.  After that I spent the next 5 hrs to code the application running in the vehicle and the Remote control app for my Android tab, remote control app is based on the Acclerometer of the device. To control the toy I decided to use WiFi and use my Android tab as a steering wheel. I will go more details into the software part in a different post.

Future addition

  • Obstacle detection and avoidance system
  • Video feed to the remote control device

Components

Rest of the post will go through the components used in the tracker and how to acquire it. If you are in Bangalore then you can get all these items from OM Electronics in SP road or you can buy online. I bought it from OM Electronics.

 

image Motor

Qty: 2

Features

  • 300RPM 12V DC motors with Gearbox
  • 6mm shaft diameter with internal hole
  • 125gm weight
  • Same size motor available in various rpm
  • 2kgcm torque
  • No-load current = 60 mA(Max), Load current = 300 mA(Max)
image Chasis

Qty: 1

Features

Powder coated Metal chasis for robots. Easy to mount the motors on place by using normal motor mount nut. It can either be used in skid steel configuration (4 motors) or differential configuration (2 rear wheels + 1 front castor wheel). The body contains perforated holes for easy mounting of various size circuit boards and other mechanical components.

Length : 190mm

Width : 105mm

Height : 40mm

image Track wheels

Qty: 4

Features

  • 6.1 mm hole.
  • Diameter 90 mm
  • Made from high quality virgin Nylon.
  • Hole on shank for screw
  • Comes with screw to lock on standard motor shaft of 6 mm.
image

Track and Ribbit

Qty: 60

Features

High quality Plastic Track  Belt and Ribbit

Specification :

  • 30mm X 20mm
  • 10mm Width
l293d-h-bridge-motor-driver-module L293D Motor Driver controller

Qty: 1

Features

H Bridge to control the motors individually

image Jumber Wires

male to male jumber wires – 10 or more  pcs

male to female jumber wires – 10 or more pcs

female to female jumber wires – 10 or more pcs

3cell_lion_battery 12V Lithium-Ion Rechargeable Battery

12v rechargable battery + charger

Url: http://www.robosoftsystems.co.in/roboshop/index.php/12v-lithium-ion-rechargeable-battery.html

Charger: http://www.robosoftsystems.co.in/roboshop/index.php/electronics-batteries/batteries-chargers/11-1v-1000mah-15-25c-lipo-battery.html

 

Next part I will go through the software part of the system. Stay tuned.

Written by Sony Arouje

June 10, 2014 at 12:28 pm

Posted in Raspberry Pi

Tagged with , ,

Follow

Get every new post delivered to your Inbox.

Join 163 other followers

%d bloggers like this: