How To:Set python virtual environment as python interpreter in eclipse

In this lesson we 'll set virtual env as default interpreter in pydev eclipse project.

1). In PyDev Package Explorer panel, right click on project name and select Properties, a new window will open.

2). Click PyDev - Interpreter/Grammar -> Click here to configure an interpreter not listed, a new window will open.

3). Click PyDev -> Interpreters -> Python Interpreter on left panel.

4). In Python Interpreters section click New -> Browse. 

5). Open virtual environment folder, move to Scripts folder, select python.exe file and click Open.

6). Enter venv in Interpreter Name: instead of default value and click Ok. You can choose name of your own choice.

7). Select newly added python interpreter in Python Interpreters section and click OK. 

8). Now select newly added python interpreter under Interpreter drop down list and click OK.

How To:Import python project in eclipse

In this lesson we 'll import python django project in pydev eclipse.
Copy these two files from some existing pydev eclipse project to root folder of new project which you want to import in eclipse.
.project
.pydevproject

Open .project file in notepad and change name to your_project_name.
If you don't have these files then you can create them yourself.

Open notepad, copy following text, click File -> Save As... -> Enter ".project" in File name: -> Select All Files from Save as type: drop down list.

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>your_project_name</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.python.pydev.PyDevBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.python.pydev.django.djangoNature</nature>
<nature>org.python.pydev.pythonNature</nature>
</natures>
</projectDescription>


Now again open notepad, copy following text, click File -> Save As... -> Enter ".pydevproject" in File name: -> Select All Files from Save as type: drop down list.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?eclipse-pydev version="1.0"?><pydev_project>
<pydev_variables_property name="org.python.pydev.PROJECT_VARIABLE_SUBSTITUTION">
<key>DJANGO_MANAGE_LOCATION</key>
<value>manage.py</value>
</pydev_variables_property>
<pydev_pathproperty name="org.python.pydev.PROJECT_SOURCE_PATH">
<path>/${PROJECT_DIR_NAME}</path>
</pydev_pathproperty>
<pydev_property name="org.python.pydev.PYTHON_PROJECT_VERSION">python 3.0</pydev_property>
<pydev_property name="org.python.pydev.PYTHON_PROJECT_INTERPRETER">Default</pydev_property>
</pydev_project>

Open eclipse, click File -> Import. New window will open. Now select 'Existing Projects into Workspace' under 'General' and click Next. On new window browse to project root directory and select root folder. Then click finish.

How To:Create virtual python environment and Install pypi packages in window env

In this lesson we 'll create virtual environment for our python project and install all necessary packages from pypi though cmd, which 'll used in our project.

1). Open directory where you want to create virtual environment.

2). Open cmd in same directory by clicking shift + mouse right key and then select 'open command window here'.

3). Install virtual environment by running following command in cmd. If virtual environment already installed then skip this step.

pip install virtualenv

4). Type following command in cmd and press enter. It will create virtual environment. 

virtualenv env

You can see a new folder is added with name env. You can change name of virtual environment to your own choice, just change the env to Your_Own_Name in later part of command.

5). Now type this command in cmd and press enter. Virtual environment will be activated.

env\scripts\activate

You can see (env) in start of line in cmd.

6). Now we 'll install all necessary package from pypi, which 'll be used in our project. Run following commands in cmd.

pip install django
pip install djangorestframework
pip install django-oauth-toolkit
pip install pymysql
pip install pythondbhelper


Now virtual environment is ready with all necessary pypi packages.

How To: Add Marker/Pin on Google Map

In this lesson we will learn how to add pin/market on google map at specific point (coordinates: latitude and longitude). Add following code to add google map in html page with basic map properties.

<html>
<head>
    <title>Google Map!</title>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var map = null;

        function initialize() {
            var latlng = new google.maps.LatLng(31.536648, 74.343443);
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_area"), myOptions);

        }

    </script>
</head>
<body onload="initialize()" style="width: 98%; height: 100%;">
    <div id="map_area" style="width: 100%; height: 520px;">
    </div>

</body>
</html>


Now create another java script function AddMarker() to add pin on google map, in this function we will set basic properties of pin like its position ( coordinate: latitude and longitude) and its title. Add following code in <script> </script> tag inside head section of web page.

        function AddMarker() {          
            var myLatlng = new google.maps.LatLng(31.5136648, 74.343443);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Lahore, Pakistan.'
            });
        }


Now create a new button in html and call this function on onclick event of button. Add following code immediately before </bode> tag.

<input type="submit" onclick="AddMarker()" name="button" title="Add marker" />


Complete code of all steps is

Add Marker/Pin on Google Map

This is all. You have done. Save file and view in browser.

How To: Add Google Map in Html Page

Adding google map to html page is very easy and a common practice now a days. In this tutorial we will learn how to add google map in web page step by step.
First create a basic structure of html page.
Open any text editor, paste following code there and save it as GoogleMap.html file.

<html>
<head>
    <title>Google Map!</title>

</head>
<body style="width: 98%; height: 100%;">
    <div id="map_area" style="width: 100%; height: 520px;">
    </div>
</body>
</html>


Now add following google api reference in page head section.

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


Now we will create a java script function to initialize google map.  We will set basic map properties in this function while initialization. Add following function in page head section inside <script> </script> tags.

<script type="text/javascript">
        var map = null;

        function initialize() {
            var latlng = new google.maps.LatLng(31.536648, 74.343443);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_area"), myOptions);

        }
    </script>


Now call this function on onload event of body of web page.

<body onload="initialize()" style="width: 98%; height: 100%;">
    <div id="map_canvas" style="width: 100%; height: 520px;">
    </div>
 
</body>


Complete code of all setps will look like:

Add Google Map in Html Page

This is all. You have done. Save file and view in browser.

How To: Call Java Script Function from Silverlight

In this tutorial we will learn, how to call java script function from silver light using C#. HtmlPage.Window.Invoke function is used invoke the java script method from silver light application.

Add following C# code, where you want to call java script function.

HtmlPage.Window.Invoke("SayHello");


Add following java script code in aspx or html page in silver light web project.

function SayHello()
{
alert('Hello! function called from silverlight');
}


Java script function with parameters:

To call java script function with multiple input parameters, add following C# code in .cs file.

HtmlPage.Window.Invoke("SayHello", "Waqas", "A");


Add following java script function in aspx or html page in silver light web project.

function SayHello(fname, lname)
{
alert('Hello! ' + fname + ' ' + lname +
' -function called from silverlight');
}


This is all. You have done.
Build project and view in browser.

How To: Integrate HTML Page in Silverlight Application

Integrating Html page in silver light application is little tricky at first. In this tutorial we will learn how to display html page in silver light application step by step.

Add following code in silver light  html page immediate before </form> tag.

<div id="BrowserDiv">
<div style="vertical-align:middle">
<img alt="Close" align="right" src="Images/Close.png" onclick="HideBrowser();" style="cursor:pointer;" />              
</div>
<div id="BrowserDiv_IFrame_Container" style="height:95%;width:100%;margin-top:37px;"></div>
</div>


Add following css code in page.

<style type="text/css">

#BrowserDiv
{
position:absolute;
background-color:#484848;
overflow:hidden;
left:0;
top:0;
height:100%;
width:100%;
display:none;
}

</style>


We need following javascript code to show and hide htm page.

<script type="text/javascript">

var slHost = null;
var BrowserDivContainer = null;
var BrowserDivIFrameContainer = null;
var jobPlanIFrameID = 'JobPlan_IFrame';

$(document).ready(function () {
slHost = $('#silverlightControlHost');
BrowserDivContainer = $('#BrowserDiv');
BrowserDivIFrameContainer = $('#BrowserDiv_IFrame_Container');
});

function ShowBrowserIFrame(url) {
BrowserDivContainer.css('display', 'block');
$('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" style="height:100%;width:100%;" />')
.appendTo(BrowserDivIFrameContainer);
slHost.css('width', '0%');
}

function HideBrowser() {
BrowserDivContainer.css('display', 'none');
$('#' + jobPlanIFrameID).remove();
slHost.css('width', '100%');
}

</script>

Add reference to following jquery file.

<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

We have done with html page. Now we will move to silver light user control and open html page on button click.

Add following code in user control (main.xaml).

<Button Content="Show Html Page" HorizontalAlignment="Left" Margin="164,140,0,0" VerticalAlignment="Top" Width="117" Click="Button_Click"/>

Now add following button click handler and a helper function in main.xaml.cs to open html page.

private void Button_Click(object sender, RoutedEventArgs e)

{

ShowBrowser();

}




public void ShowBrowser()

{

try

{

string url = "http://webdesignpluscode.blogspot.com/";

HtmlPage.Window.Invoke("ShowBrowserIFrame", url);

}

catch (Exception ex)

{

throw ex;

}

}

This is all, We have done with code. Now create new folder 'Images' and place an image there 'Close.png' for close button.

Now build project and view in browser.