Knockout SVG Image Binding not Working. Solution Found!

This post is about an issue I faced in Knockout to bind svg <image> and it was not showing the image inside the svg, even with correct binding with xlink:href

My first attempt was,


If you notice that, Image is not showing in the svg box.
Reason: Because xlink:href attribute needs to be there even with empty value to initialize the HTML svg image.

So, your image tag should be like this
<image height="500" id="img1" width="500" xlink:href=""
        data-bind="attr:{'xlink:href': image}"></image>


Solution, with empty xlink:href attribute


Hope this may help to somebody with the same problem!
Continue Reading...

Android Drag-Drop Button - A custom component for android developers

See on Github

This is an open source android drag button custom component. You can use it on your project to show a drag-able icon and perform any action after user dragged to the edge of the component.

drag drop button screenshot
screenshot

Import aar file on releases directory to your android project to include drag-drop button. Or you can download entire project and open from Android studio and compile to match with your sdk version, then you can import generated aar file to your real project.

Example usage of the drag-drop-button

This is a sample code for drag button inserting into ui and handling events.

xml code to put drag-drop button on the activity
<com.mili.dragdropbutton.DragButton
    android:id="@+id/dragBtn"
    android:layout_width="200dp"
    android:layout_height="200dp"
    custom:imageBtnSizePercentage="0.25"
    custom:dragEndThresholdPercentage="0.10"
    custom:arrowCount="4"
    custom:arrowColor="#42f46e"
    custom:iconFileName="icon2.png">
</com.mili.dragdropbutton.DragButton>

Note:
Needs to define custom namespace on parent tag as
xmlns:custom="http://schemas.android.com/apk/res-auto"

See activity_main.xml on test project for complete source code.


Java code to handle events
DragButton dragButton = (DragButton) findViewById(R.id.dragBtn);
dragButton.setOnDraggedListener(new DragButton.OnDraggedListener() {
    @Override    public void onDragged(DragButton view, MotionEvent e) {
        Log.i("DragBtn", "Dragged");
    }
});
dragButton.setOnDragStartedListener(new DragButton.OnDragStartedListener() {
    @Override    public void onDragStarted(DragButton view, MotionEvent e) {        
        Log.i("DragBtn", "Drag started");
    }
});
dragButton.setOnDragEndedListener(new DragButton.OnDragEndedListener() {
    @Override    public void onDragEnded(DragButton view, MotionEvent e) {
        Log.i("DragBtn", "Drag ended");
    }
});
See MainActivity.java on test project for complete source code.


Custom Attributes on xml

imageBtnSizePercentage
Size of the center icon to draw related to the size of the button. Example- 1 will draw the center icon on entire button, 0.5 will draw half of the size of the button. Any value between 0-1.

dragEndThresholdPercentage
Indicate the percentage area of the threshold to fire the dragged event. Any value between 0-1.


arrowCount
Number of arrow to show the drag direction. Any positive integer value

arrowColor
Color of the arrows in hex format. Example- #42f46e

iconFileName
Path to the image file for center icon on assert folder. 512x512 is the recommended size. 
Example- icon2.png
 
Continue Reading...

How to install Adobe Flash Player plug-in for Firefox on Ubuntu

Click here to check flash player on your browser

Adobe flash player is also a plug-in for for Mozilla Firefox to view flash videos (ex: youtube videos) and play flash on-line games, etc. Therefore flash player became essential plug-in for most of the web browsers until HTML 5 take place (because HTML 5 has new capabilities those can challenge to flash player such as video playing).

This article describe how to install Adobe Flash Player plug-in for Firefox on Ubuntu

You might be think, is this a very harder thing?

Yes, some times.

Because, Ubuntu software center and Synaptic package manager can use to install flash player plug-in for some Ubuntu versions and it will simply works. But some Ubuntu distribution such as Ubuntu 16.04 needs to follow following few steps to make it work correctly.

Step 1- Download latest Adobe Flash Player Plug-in form here.(Select download option as 'tar.gz for other Linux')

Step 2- Extract downloaded file into any directory. (extracted file should be .so format)

Step 3- Open terminal (Application --> Accessories --> Terminal or Ctrl+Alt+T)

Step 4- Type following command

sudo -i

Now it will prompt you the Password. Now enter the password and press enter  

Step 5- Goto directory that contain extracted .so file using cd command (Ex: cd Downlods)

Step 6- Copy that .so file into /usr/lib/mozilla/plugins directory. To copy that file use following command.

cp [fileName].so /usr/lib/firefox-addons/plugins

(Ex: cp libflashplayer.so /usr/lib/firefox-addons/plugins)

Step 7- Restart the system to make changes appear to Firefox.

It is better to close all the Firefox related windows before copy the .so file. Remember you should restart the system to make plug-in work correctly (Not only restart Firefox)

If this article helpful to some one please do not forget to comment about it.

See how to do this from videos!


Continue Reading...

Is flash player installed?

This page allows you to check whether your browser has flash player installed.
and detect the installed flash player version.
The check perfectly works on Firefox and Chrome.
Check how you can install flash, if it says NO!
Click here to read how to install, or watch following videos. Adobe flash player is also a plug-in for for Mozilla Firefox to view flash videos (ex: youtube videos) and play flash on-line games, etc. Therefore flash player became essential plug-in for most of the web browsers until HTML 5 take place (because HTML 5 has new capabilities those can challenge to flash player such as video playing). This article describe how to install Adobe Flash Player plug-in for Firefox on Ubuntu

YES!
Congratulations! Flash player has installed
NO!
Flash player has not installed or blocked by browser


This page allows you to check whether your browser has flash player installed. and detect the installed flash player version. The check perfectly works on Firefox and Chrome.

Check how you can install flash, if it says NO!


Click here to read how to install, or watch following videos





This page is using JavaScript Flash Detection Library (Flash Detect) by Carl S. Yestrau. So thanks for creating such a nice library!
Continue Reading...

Simple SignalR chat program

SignalR is a library which enables real-time web functionality and bi-directional communication between server and connected clients. That's mean SignalR server can force clients to get updated and/or client(s) can force server to get updated. Also SignalR supports web sockets.

Before start coding for SignalR let's clarify some keywords on SignalR.

SignalR Server
SignalR server is a .net program that runs on a server machine. This handles all the requests (or function calls) made by clients and responsible for updating corresponding clients also.

SignalR Client
SignalR client is either a .net program or a web app which run on client machine. These clients can connect or disconnect to a SignalR server.

SignalR Hub
SignalR hub is the intermediate party which handle communication between SignalR server and SignalR client(s). This hub is already implemented by the library itself, so we don't need to code for this!

Simple Idea...
Simply if you have a web SignalR client, SignalR server can directly call your javascript function. Also your web client can directly call SignalR server function.


Note - SignalR client can be either a web (HTML/Javascript) app or a .net desktop app.

First let's create SignalR server app now!


SignalR Server
SignalR server is a .net program that runs on a server machine. You can follow these steps to create SignalR server in Visual Studio.

Step 1
Create a new winform project in Visual Studio.



Step 2
Since SignalR is a library, we need to add set of dll files to our project as references. The easiest way to add references and its' dependencies is Nuget. Nuget is a smart library management tool in visual studio. Let's add relavant libraries for SignalR. First right click on project references and open Nuget package manager dialog box.

Step 3
Type "signalr self host" in search box and click on install on the first item of the search result. Make sure the id is equal to "Microsoft.AspNet.SignalR.SelfHost".

Step 4
Next search as "Owin Cors" and install the item which the id is "Microsoft.Owin.Cors".

Step 5
 Next search as "Microsoft AspNet SignalR Client" and install the item which the id is "Microsoft.AspNet.SignalR.Client".


Note- Step 3,4 and 5 will add several dll files and its' dependencies automatically.

Step 6
Now we are done with Nuget, next reference can be added using system references. Therefore close Nuget package manager and open Reference Manager dialog.

Step 7
Then add "System.Net.Http" reference and click on ok.

After these all the steps, you should be able to see all the references as on following image.


Step 8
Next let's create a class to manage signalR connection. Right click on the project and select "Add-->Class" then change the class name as SignalRServer and click ok. Since that project that we are going to do is a winform signalR server, let's create a server class as follows.
class SignalRServer
{
    private IDisposable SignalR { get; set; }
    public const string ServerURI = "http://localhost:8181";

    public bool StartServer()
    {
        try
        {
            SignalR = WebApp.Start(ServerURI);
        }
        catch (TargetInvocationException)
        {
            return false;
        }

        Console.WriteLine("Server started at " + ServerURI);
        return true;
    }

    public void StopServer()
    {
        if (SignalR != null)
            SignalR.Dispose();
    }
}

Code Explained...

private IDisposable SignalR { get; set; }
public const string ServerURI = "http://localhost:8181";
'SignalR' is the server instance of the class, and here it defines the server url for the server that we are going to run.

public bool StartServer()
{
    try
    {
        SignalR = WebApp.Start(ServerURI);
    }
    catch (TargetInvocationException)
    {
        return false;
    }
    Console.WriteLine("Server started at " + ServerURI);
    return true;
}
This method responsible for starting the server. Note that it is starting the server as a web app and accepting the server url which we defined already within the class.

public void StopServer()
{
    if (SignalR != null)
        SignalR.Dispose();
}
Here, it is just disposing the signalr server instance then it will allow to close the signalr connections.

All together, this is a simple signalr server class which handle simple basic signalr operations.

Next time I will discuss how to create singnalR client in both winform and web !

Continue Reading...