Tuesday, 19 May 2015

My Experiments with Truth, oops sorry, SignalR

So what have I been upto these days is a really cool library SignalR

Wanna know more about its where and how abouts? Visit this:


 


 So , after a little researching I got to know you can create two sorts of clients here: JavaScript and .NET clients.

If your mind is like: What Clients?
Dude, you have not gone through the video, eh? :P

Anyways, so Signal R actually facilitates real time conversation, the ones you see in chats like IRC (Internet Relay Chat) . So a message can be broadcasted simultaneously to multiple clients and you can make it possible to gather the responses from the client too.

I have not yet covered the thread safety and async-ness into consideration but overall my code goes somewhat like this:
You can create a broadcast server, that is essentially the hub.

The major files I have are these:
1. Hub Class: Right click your project and select add item>SignalR Hub Class v2

Make sure you are creating a web application in visual studio, prior to doing this otherwise this option may not come.
Also, this way it helps adding all relevant SignalR references to your project.
The hub class has simple code as:

public class BroadcastHub : Hub
  {
      
      public void Send(string input)
      {
          Clients.All.broadcastMessage(input);
      }
 
      public void Receive(string name, string output)
      {
          System.Diagnostics.Debug.WriteLine(name + " has given output:" + output);
      }
 
  }


2. Owin Startup Class: Right click the project name and select add item> OWIN startup class.

While I am still in a process to learn more about OWIN, the most I can tell you is :
"OWIN is a specification that defines an API for framework and servers to cooperation. The point of OWIN is to decouple server and application. For example, ASP.NET Identity uses OWIN security, SignalR self hosting uses OWIN hosting, and etc., the examples all use OWIN, therefore they all need to have a startup class, that is defined in "Startup.cs" file."

So inside your startup.cs owin class you would be having code like:
 
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
 
[assembly: OwinStartup(typeof(ServerBroadcast.Startup))] namespace ServerBroadcast
{     
public class Startup     
{         
public void Configuration(IAppBuilder app)         
{             
app.MapSignalR();         
}     
}
}

3. Client : I have javascript client so it was basically an html page. I named it FakeClient.
Major methods it uses:
<script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.broadcastHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (message) {
                // Html encode display name and message.
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong> ' + document.getElementById('displayname').value + ' received '
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Which process are you?', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                    $('#sendoutput').click(function () {
                  
                    chat.server.receive(document.getElementById('displayname').value, $('#output').val());
                    
                    $('#output').val('').focus();
                });
            });
        });
    </script>

From the code, it is evident that once we get connection from the hub in var chat, we can access the server and client part of it as, chat.server.receive, note that receive method is defined in my hub and chat.client.broadcastMessage , broadcastMessage has been a defined method for signalR client.
 
 
 


4. Broadcaster: Since I wanted to give a face to my hub too so I created one more html page and set hat as the start page.

It has simple code as:

<script type="text/javascript">
       $(function () {
           // Declare a proxy to reference the hub.
           var chat = $.connection.broadcastHub;
                   
           // Set initial focus to message input box.
           $('#message').focus();
           // Start the connection.
           $.connection.hub.start().done(function () {
               $('#sendmessage').click(function () {
 
                   // Call the Send method on the hub.
                   chat.server.send($('#message').val());
 
                   // Clear text box and reset focus for next comment.
                   $('#message').val('').focus();
               });
               $('#addclient').click(function () {
                   window.open('http://localhost:44621/FakeClient.html', '_blank');
                   window.focus();
 
 
               });
           });
       });
   </script>
 
 
 
So that's pretty much it and you are done, with signalR implementation.
 
Next we would be covering on how to do the same with .NET clients...
Till then see you!
 
Happy hacking!
 


 

Tuesday, 17 March 2015

Introduction to Clustering using R

We all have heard of Big Data a lot! Want to try basic clustering techniques on it?

Here we go. Before beginning into the coding , lets familiarize ourselves with some basic terms and platforms to do this thing.

1. What data are we studying?
For this purpose we would be studying Twitter, there are well equipped APIs to study the tweets that too in varied languages, eg, twitteR in R (stastical tool), tweetPy in python.

2. Tools we would be using: R
Get yourself quickly familiarized with R by following these links:

http://www.r-bloggers.com/how-to-learn-r-a-flow-chart/
http://tryr.codeschool.com/

And while searching for the relevant links, I have found this course for you, you may want to attend:

https://www.coursera.org/course/rprog


3. What we aim to do?
Collect the list of friends and followers for any one person's twitter account.
We would make use of user class of twitteR for the same.
It has following fields:
  • name:Name of the user
  • screenName:Screen name of the user
  • id:ID value for this user
  • lastStatus:Last status update for the user
  • description:User’s description
  • statusesCount:Number of status updates this user has had
  • followersCount:Number of followers for this user
  • favoritesCount:Number of favorites for this user
  • friendsCount:Number of followees for this user
  • url:A URL associated with this user
  • created:When this user was created
  • protected:Whether or not this user is protected
  • verified:Whether or not this user is verified
  • location:Location of the user
  • listedCount:The number of times this user appears in public lists
  • followRequestSent:If authenticated via OAuth, will be TRUE if you’ve sent a friend request to this user
  • profileImageUrl:URL of the user’s profile image, if one exists
and several methods. To look into what all things twitteR API offers, check out this: http://cran.r-project.org/web/packages/twitteR/twitteR.pdf 

So, what we intend to do on the basis of this information is quite simple (and not that useful :P ) but may serve as a good introduction to clustering.

We accumulate a set of users on twitter, by fetching a twitter user's friends and followers as User class objects . We take the union of these users. Now we plot a graph friends vs followers, where each dot is a 2 D / 3 D entity containing friends' count, followers' count and/ or statuses' count.

We use inbuilt K-means clustering algorithm in RStudio to do the clustering on this data.
Pondering what is K-means? Check : https://sites.google.com/site/dataclusteringalgorithms/k-means-clustering-algorithm
or several explanatory videos available online.

So basically, here we have a feature vector of 3 features per user:
1. friend's count
2. follower's count
3. statuses'  count

On the basis of similarity measure, we cluster the data points together on the basis of similarity wrt to these 3 features.

***Check out what similarity kmeans internally uses in R and answer in comments if you find one, I guess it is cosine similarity. ***

These clusters can be further colored to mark density.

Follow the code given in this link to do it by yourself:

http://rstudio-pubs-static.s3.amazonaws.com/5983_af66eca6775f4528a72b8e243a6ecf2d.html


I used and tweaked the code a bit to do kmeans clustering on "modi" as user and used 2 features : friends count and followers count for first and
3 features: friends count , followers count and statuses' count for the next, this is what we attained:

  
 2 Features

                                                 3 Features


PS: It is a 2D graph still but the clusters have been redefined, I put k=5 for this, where k stands as the number of clusters we wish to generate using the kmeans algorithm.


So that's it for now. I hope it would have been interesting and useful.
There exists lots of exciting relevant stuff online, keep checking!

See you in next post, till then
Keep Hacking! :)

Saturday, 14 March 2015

Diving Deep | Android

So here I am building my weather app on android studio, that would essentially fetch weather forecast for upcoming days. (covers lessons 1-3)

Check out:
https://github.com/udacity/Sunshine-Version-2

for more details on code we would be deliberating upon in this post. The post essentially doesn't deals with the whole details, it gives an idea on what kind of methods exist and their purpose and how it is all connected in an android app. Budding developers may find it a bit useful.

Since I have come a long distance till now, lets quickly sum up the way it is working as of now:






I have four main java classes till now:

1. MainActivity

2. Forecast Fragment

3. Detail Activity

4. Settings Activity

Let's peek into and see what these files are actually doing:

1. MainActivity: This extends ActionBarActivity
It has some basic overridden methods like:
(i) protected void onCreate(Bundle savedInstanceState)
It sets the content view to some layout XML using setContentView method.It sets the view to activity_main XML, it just has a framelayout component named container.

Then we have, onCreateOptionsMenu, this essentially inflates the main xml of menu. It has the xmls adding items like settings and refresh to it.

Then we also have one method named onOptionsItemSelected which deals with events related to selecting something from the menu bar. Comparisons like item.getItemId()==R.id.action_settings are done inside it.


2. ForecastFragment : One of the lengthiest.
It extends Fragment Class.
A Fragment is a piece of an application's user interface or behaviour that can be placed in an Activity.
In its core, it represents a particular operation or interface that is running within a larger Activity. A Fragment is closely tied to the Activity it is in, and can not be used apart from one. Though Fragment defines its own life cycle, that life cycle is dependent on its activity: if the activity is stopped, no fragments inside of it can be started; when the activity is destroyed, all fragments will be destroyed.

What does it particularly deals with?

Well, that is the list of weather forecasts we wanna display. To populate the list we need to have data in some form. To do the entire thong, we need to have ArrayAdapter

  Then we have all the overridden methods:
(i)  public void onCreate(Bundle savedInstanceState)
This just setOptionsMenu true so as to detect the presence of Menu Bar for the app.

(ii) public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
This inflates the menu view having refresh feature.

(iii) public boolean onOptionsItemSelected(MenuItem item)
It features the utility that is what will happen when refresh is clicked.
We used Shared Preferences and corresponding preference manager to generalize the input for city in which we need to check weather.
 We also created the object of async class FetchWeatherClass to fetch weather from the API in background.

(iv) public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState)
It inflates the required layouts and xmls
Creates array list and adds ArrayAdapter to it.
Components of ArrayAdapter :
1. The current context (this activity)
2. The name of the layout ID.
3. The ID of the textview to populate.
4. The array list i.e. weekForecast in this case.


We use listView object to display the list of weathers fetched. This list View is attached with the ArrayAdapter. A setOnItemClick listener is also attached to it so that on clicking any list item a different screen (activity) may come up using Intent.

Syntax for Intent is worth a deep glance:
Here it goes:

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                String forecast = mForecastAdapter.getItem(position);
                Intent intent = new Intent(getActivity(), DetailActivity.class)
                        .putExtra(Intent.EXTRA_TEXT, forecast);
                startActivity(intent);

            }
        });


We also have an inner class in this:
public class FetchWeatherTask extends AsyncTask<String, Void, String[]>
 This is essentially to retrieve and parse JSON data retrieved from the API into string array.
The doInBackground method essentially helps in URL construction and http connection to the API.
onPostExecute does the required add ons/ changes to the adapter to reflect the fetched data.

3. Detail Activity:
 Quite simple class. It extends ActionBarActivity too as the main activity does and also has an inner fragment class as a placeholder
The onCreate, onCreateOptionsMenu and onOptionsItemSelected methods have the same functionality as they are in the main activity apart from the required changes related to fragment.


The inner class  DetailFragment with the significant onCreateView method holds some significance , making canges to the displayed text view in accordance with the intent object it has received.

4. Settings Activity:
This extends the PreferenceActivity   class and implements the interface: Preference.OnPreferenceChangeListener
It makes use of xml file namely pref_general.
We do addPreferencesFromResource(R.xml.pref_general);
and  bindPreferenceSummaryToValue(findPreference(getString(R.string.pref_location_key)));

The second method Attaches a listener so the summary is always updated with the preference value. Also fires the listener once, to initialize the summary (so it shows up before the value is changed.)

Third method is : public boolean onPreferenceChange(Preference preference, Object value)
For list preferences, look up the correct display value in the preference's 'entries' list (since they have separate labels/values).
For other preferences, set the summary to the value's simple string representation.


Please note corresponding changes are being done in AndroidManifest file parallely.


So, that's all for now. Hope this post proves useful in some way. I just experimented on the ways an app's actual functionality can be understood from the point of view of a beginner.
Feel free to drop suggestions below.

Have a great day!

Keep hacking till then! :)




Saturday, 14 February 2015

Beginning with jQuery

As a demand of upcoming project and a desire to try my hands on some front-end tools, here is my first post on UI designing.

I would be experimenting with jQuery.

Oops my XAMPP is not installed, I remember the recent system crash I had.
Anyways, go to this site:

http://irishlightandcolour.blogspot.in/2013/10/install-xampp-for-linux-on-ubuntu-1204.html

Install XAMPP.
Give rights that is sudo chmod 577 to the executable file you just downloaded and then do sudo  ./<filename> as described in the link.

Once done, start the server.
Why did you do this?

Because to run php scripts we need a server, xampp help us create a local host where we can test our website/ scripts.


 Click on "Go to application". Open Google Chrome manually if some error comes.
You will see this screen:


Now what? Write a script, php one or may be some html page.

Cool. Now navigate to opt> lampp> htdocs > xampp
Code your first php script/ html page here.

I tried using simple jQuery draggable component.
Code this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<style>

#draggable { width: 250px; height: 250px; padding: 0.5em; background-image: url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/256/red-heart-icon.png); }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content" f>
<p> #Valentine's Day!</p>
</div>
</body>
</html>

#Source: http://jqueryui.com/draggable/

Play with this code now. And do the required changes. You are done with your first draggable user interface! This is how it looks like in my case:

 After dragging:



Kudos!

Keep hacking!




Tuesday, 16 December 2014

Listing the directory structure into CSV format | Python

In order to avoid complicated population of databases, by filename and containing folders, we can in turn switch to saving data in csv file formats.

The problem encountered was:

I had to create a database having 5 fields:

'object', 'category' , 'filename', 'source', 'date'

source was a fixed string and date can easily be found in python by importing the time lib as shown in code below.

Directories were in this order:

category<object<filename

Elaborating, in my root folder , I had several category folders, like Animals, Musical Instruments, Vehicles etc and inside them I had further sub-folders like in Animals, I had dog, cat etc and so on for other folders. Further in this subfolder I had .mp3 and .wav files . I need to have this directory structure presentable in csv format as discussed above.

Doing this manually for above 2000 files is a herculion job, here is the script to simplify it:


import os
import csv
import time

def list_files(dirpath):
    files = []
    for dirname, dirnames, filenames in os.walk(dirpath):
        files += [os.path.join(dirname, filename) for filename in filenames]
    return files

now = time.strftime("%c")
path = '/home/infinite/findsounds'

files=list_files(path)

with open('/tmp/final.csv', 'wb') as csvfile:
  writer = csv.writer(csvfile)
  writer.writerow(['object', 'category' , 'filename', 'source', 'date'])
  for file in files:
    if file:
     
      filestr=str(file)
     
      directories = filestr.split("/")
      writer.writerow([directories[5],directories[4],directories[6],'www.findsounds.com', now])

Please take care of the indentation while copying.

A view of CSV generated (Libre Office, comma separated view):


Small piece of code, hope it helps.

PS: Feel free to drop your suggestions/queries below.

Keep Scripting!

Monday, 15 December 2014

Creating websites using PHP embedded HTML| Incorporating MySQL database

So, in a process of developing this website, I will be jotting down all the prerequisites and the steps thereafter in order to make a php website live online.
Hope it will help the struggling newbies in this field.

Before moving on, let's understand:

I. What's PHP?

PHP, the term derived from "Hypertext Preprocessor", is a server-side, HTML embedded scripting language used to create dynamic Web pages.
As it's server-side related application it does not require any configuration at the client's/viewer's side since the code itself is executed on the server where it's residing.
All that is required is any Web browser currently existing, but that will not suffice to develop php websites, we need to set up a website development environment. (We will be looking after it a bit later. )
Having the PHP as an embedded implementation at the HTML pages within the special PHP tags at the server side no one would be able to access the code itself through the browser as being able with the plain HTML language.
It's syntax parts is borrowed from other languages as C, Java and Perl with some unique features thrown in.
The main goal of the PHP oriented language is to provide the easiest way of generating and developing dynamic Web pages to the developers or site designers.
The PHP language offers an reliable connectivity services to the various database services like MySql etc. The database management tool phpMyAdmin, most popular bullet in board interfaces like PHPBB or PHPNuke are related on the PHP language as well. Internet related connection services as e-mail, email via POP3 or IMAP, url encoding, cookies, redirections etc. are available through the PHP as it's web oriented.
[Source: http://www.oxxus.net/tutorials/php ]
So for this particular website we will be using MySQL for the database.
If you have heard the term "PHP" in your life for less than 7 times, you are recommended to view source of this website to understand what php enabled websites look like at the back end part.
Go to this website, right click and select "View Source", there are three PHP scripts running in the back end.  http://www.neil-kb.com/

II. TOOLS WE WOULD  BE NEEDING:

1. MySQL
2. XAMPP
3. PHPMyAdmin
4. Text Editor
5. Local Host settings....may be. 

Go to this link to dive deep:

Install XAMPP by following these steps:
http://computernetworkingnotes.com/ubuntu-12-04-tips-and-tricks/how-to-install-xampp-1-8-2-in-ubuntu.html

Have SQL installed and configured.
                      


III. Three main youtube videos that will get you started with dynamic websites are these:
What is actually happening?

Unlike the static html pages, this time we need the content to be displayed dynamically by running a php script.
So, the php script senses the argument passed and accordingly loads the corresponding page. PHP facilitates to interact with MySQL or other databases and get the content loaded from there.
This is briefly what is happening in the following videos, have a glance.
 
1. https://www.youtube.com/watch?v=G4DZW9IFQ_U


2. https://www.youtube.com/watch?v=HFZbW9eDRAM

3. https://www.youtube.com/watch?v=SETjgigQmBE

Also, this may help in the process of learning:

https://www.youtube.com/watch?v=IMuhWHO_T-0




So, hope the content and links would prove useful.

Keep hacking!





Wednesday, 16 July 2014

Removing dual boot when you have deleted ubuntu already

Hey folks!

It happens at times that you have two OS running on your laptop say Windows and Ubuntu and you have been successful in establishing dual boot for them back in time but now when you don't need one OS and deleted (say Ubuntu) forever, still dual boot option appears, do you want to get rid of that?

Here is a simple technique I discovered.
 Just run command prompt as administrator (right click cmd and select run as administrator).
Then typr these commands:

>bcdedit

This willl display a list of your boot options, now find the identifier for Ubuntu. It would be enclosed within curly braces.
Say your identifier is {GUID}. It can be a lengthy string too.
Now type:
>bcdedit /delete{GUID}

Operation successfully completed. This marks the end of dual boot.

Hope that helps!
Stay cheered. 

A secret love message ~

Hmm, so the trick of putting up a catchy seasonal title worked out, we got you here! Folks, we will be talking about a really cool tech...