Adding Google Hangouts to Blogger Easy as Ctrl+C and Ctrl+V

Hangouts on Google Plus has become a norm and I feel as Bloggers it will be nice to actually have a faster way to talk face to face with your followers and discuss in real time. I can already imagine blogging some awesome Android and Windows Phone tutorial and answering comments real time via live streaming. Google has made this very easy, by making it really simple to attach a hangouts button on your blog or web site with the following easy steps.

Copy the code below

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<g:hangout render="createhangout"></g:hangout>

Go to your blog

Edit template select html

and paste the code with-in a div in your desired I put mine with-in my Head Tag

And there you have it a  Google Hangout button at the top of your page

The return and entrance into the DECIMATION SERIES

My three weeks break turned into two months, there was more stress than I expected and we just launched GDG Bingham of which am an organiser. No more excuses, am going to be working on a series called the DECIMATION series, this series will not just drive at teaching how to accomplish things at the code end but will cover lots of the explanation, it will aim at creating full understanding of what we are working on. Text will be posted here on my blog while videos will be on my YouTube channel. Of course Android and Windows Phone 8.1. Hope to see you join in...

A Break

Hello everyone, i haven't posted anything in awhile and believe me i have lots of things in the works, android, wp8, git and also windows store, that's right, and unity3d pretty soon. I will be going a break for my youth service and laptops aren't allowed so no code. I believe it will last about three weeks and after that i will drop a double blast tutorial. Thanks

Parsing Json array-Windows phone

Looking forward on improving the GPS phone tutorial from last time, will be adding our pushpins and markers from a JSON(JavaScript Object Notation) array, so the first step will be to learn how to parse our array, this blog post will be short because this is not our main goal.

I will be using a PHP and WAMP server to locally host my the json data.
Requirements:

1. wamp server download HERE
2. Visual studio
3. Newtonsoft.json.dll download HERE or you can install directly to your project in visual studio follow these steps:

• click the project tab in visual studio
• click manage NuGet packages
• wait for it to load and select Json.NET click install, this will allow us import the Newtonsoft.json.dll library.

Let us begin by setting up our JSON data from our database through PHP. I am not going to explain the PHP code but the comments within the code should be really helpful.

I won't be going into database configuration either, if need help on that visit this website Kiwixcompo

If you can recall GPS phone was about finding restaurants on the map and call for a reservation or place an order. Our json encoded data has to fit this need.

This is the PHP script to encode our data.

This our db_connect.php file with our connection variables

<?php
define('DB_USER', "root");
define('DB_PASSWORD', "");
define('DB_DATABASE', "jsontest");
define('DB_SERVER', "localhost");
?>

This is our db_kinnect.php file which checks out database connection status and connects us to the database

<?php
 
/**
 * A class file to connect to database
 */
class DB_CONNECT {
 
    // constructor
    function __construct() {
        // connecting to database
        $this->connect();
    }
 
    // destructor
    function __destruct() {
        // closing db connection
        $this->close();
    }
 
    /**
     * Function to connect with database
     */
    function connect() {
        // import database connection variables
        require_once __DIR__ . '/db_connect.php';
 
        // Connecting to mysql database
        $con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD) or die(mysql_error());
 
        // Selecing database
        $db = mysql_select_db(DB_DATABASE) or die(mysql_error()) or die(mysql_error());
 
        // returning connection cursor
        return $con;
    }
 
    /**
     * Function to close db connection
     */
    function close() {
        // closing db connection
        mysql_close();
    }
 
}
 
?>

This is the file that wil spit out our JSON from the database for our mobile consumption

<?php
 
/*
 * Following code will list all the Restaurants
 */
 
// array for JSON response
$response = array();
 
// include db connect class
require_once __DIR__ . '/db_kinect.php';
 
// connecting to db
$db = new DB_CONNECT();
 restaurants") or die(mysql_error());
 
// check for empty result
if (mysql_num_rows($result) > 0) {
    // looping through all results
    // restaurants node
    $response["restaurants"] = array();
 
    while ($row = mysql_fetch_array($result)) {
        // temp user array
        $restaurants_array = array();
        $restaurants_array["pid"] = $row["pid"];
        $restaurants_array["longitude"] = $row["longitude"];
        $restaurants_array["latitude"] = $row["latitude"];
        $restaurants_array["created_at"] = $row["created_at"];
        $restaurants_array["updated_at"] = $row["updated_at"];
        
        // push single restaurant into final response array
        array_push($response["restaurants"], $restaurants_array);
    }
    // success
    $response["success"] = 1;
 
    // echoing JSON response
    echo json_encode($response);
} else {
    // no location found
    $response["success"] = 0;
    $response["message"] = "No location found";
 
    // echo no users JSON
    echo json_encode($response);
}
?>

The php code above should give us the required json we desire. see out put below

{"restaurants":[{"pid":"1","longitude":"46.8799000000","latitude":"35.8779000000","created_at":"2014-02-09 17:24:49","updated_at":"0000-00-00 00:00:00"},{"pid":"2","longitude":"25.5858660000","latitude":"62.8585850000","created_at":"2014-02-09 19:51:14","updated_at":"0000-00-00 00:00:00"},{"pid":"3","longitude":"9.3241082570","latitude":"9.1728899140","created_at":"2014-02-11 23:52:43","updated_at":"0000-00-00 00:00:00"},{"pid":"4","longitude":"8.8359202210","latitude":"7.4974748750","created_at":"2014-02-11 23:52:43","updated_at":"0000-00-00 00:00:00"}],"success":1}

That is all the PHP-ing we will be doing (thank God); copy the output json and goto Json2csharp.com paste the json output and click generate button you will get two csharp classes that looks like these ones below

public class Restaurant
{
    public string pid { get; set; }
    public string longitude { get; set; }
    public string latitude { get; set; }
    public string created_at { get; set; }
    public string updated_at { get; set; }
}

public class RootObject
{
    public List restaurants { get; set; }
    public int success { get; set; }
}

With that done we are ready start coding our windows phone app
create a windows phone app and add a ListBox as shown below

<ListBox  HorizontalAlignment="Left"  Name="dList" Height="391" Margin="10,43,0,0" VerticalAlignment="Top" Width="436">

That is all we need to add next we have to switch over to our C# file and start the real work, first we have to add our Newtonsoft.Json

using Newtonsoft.Json;

We then setup our WebClient call to our JSON API as follows

//Web client call to JSON API
            WebClient wClient = new WebClient();
            wClient.DownloadStringCompleted +=new DownloadStringCompletedEventHandler(wClient_Downloaded);
            wClient.DownloadStringAsync(new Uri("http://localhost/Police/get_all_locs.php"));

Paste the Restaurant and RootObject classes we got from json2csharp into the MainPage class; the next thing we have to is implement our DownLoadStringCompleted event argument in this case wClient_Downloaded

public void wClient_Downloaded(object sender, DownloadStringCompletedEventArgs e)
        {
            try 
            {
                var rootObj = JsonConvert.DeserializeObject(e.Result);
                foreach(var stationz in rootObj.location)
                {
                  dList.Items.Add(stationz.station_name);
                    
                    dList.Items.Add(stationz.longitude);

                    dList.Items.Add(stationz.latitude);
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show("Error>>>> "+ex);
            }
        }

You will notice will notice we had put the commands within the try, catch blocks to handle any exception and that is all you need to consume JSON.

Full C# code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using Microsoft.Phone.Tasks;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Device.Location;
using Microsoft.Phone.Controls.Maps;
using System.Windows.Media.Imaging;
using System.Windows.Controls.Primitives;
using System.ComponentModel;
using System.Collections;
using Newtonsoft.Json;

namespace PhoneApp4
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();


            //Web client call to JSON API
            WebClient wClient = new WebClient();
            wClient.DownloadStringCompleted +=new DownloadStringCompletedEventHandler(wClient_Downloaded);
            wClient.DownloadStringAsync(new Uri("http://localhost/Police/get_all_locs.php"));

        }

        

        public void wClient_Downloaded(object sender, DownloadStringCompletedEventArgs e)
        {
            try 
            {
                var rootObj = JsonConvert.DeserializeObject(e.Result);
                foreach(var stationz in rootObj.location)
                {
                   dList.Items.Add(stationz.station_name);
                    
                    dList.Items.Add(stationz.longitude);
                    dList.Items.Add(stationz.latitude);
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show("Error>>>> "+ex);
            }
        }

 
        public class Location
        {
            public string pid { get; set; }
            public string longitude { get; set; }
            public string latitude { get; set; }
            public string created_at { get; set; }
            public string updated_at { get; set; }
            public string station_name { get; set; }
        }

        public class RootObject
        {
            public List location { get; set; }
            public int success { get; set; }
        }
    }
}

OUTPUT:

Text to speech - Android

I remember back in school when i had little time to read and noticed that i had memorized lyrics of music i heard while sleeping lead me to download audio books but my lecture notes weren't audio books so i decided to write an app to read text for my then mytouch 3g slide, i just felt like visiting that memory once again with this tutorial.

Lets begin, create your android project and open the layout file (activity_main.xml), i left my default TextView but edited the output to something cooler and used it as my header, the main components you need to setup here are the EditText  and Button components which is shown in the code below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Have your text read" />
    
    <EditText 
        android:id="@+id/your_text"
        android:layout_below="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textMultiLine"
        android:gravity="center"
        />

    <Button 
        android:id="@+id/speak_btn"
        android:layout_below="@+id/your_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="please read my text"
        />
</RelativeLayout>

Now that we have painted the scene now it is time for action so switch to the MainActivity.java file for the main event (see what i did there :))
Okay we then declare our TextToSpeech, EditText and Button objects as follows:

        TextToSpeech textTS;
 Button speakBtn;
 EditText yourText;

you will a couple of errors, resolve by pressing ctrl+shift+o to import the necessary libraries and resolve the error.
Now you don't just name something and not bring it to life do you?
so we now initialize our objects in the onCreate() function so our objects are initialized when our application is started.

                //Initialize our objects
  textTS = new TextToSpeech(this, this);
  speakBtn = (Button)findViewById(R.id.speak_btn);
  yourText = (EditText)findViewById(R.id.your_text);

you will notice an error when initializing the textTS object you can resolve that by implementing this TextToSpeech.OnInitListener as follows:

public class MainActivity extends Activity implements TextToSpeech.OnInitListener

After doing the above you will have to implement a method to resolve the next error so just hover over the red line and select implement unimplemented method it will add a method (onInit)and resolve the problem.

Lets go back to our onCreate method and setup our onClickListener see the code below

//Hey when i click this button read my text
  speakBtn.setOnClickListener(new View.OnClickListener()
  {

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    readText();
   }
   
  });

We just called a method readText() which we will implement later on. For now let us code our onInit(), this is where we will set our language, and check if our input is readable by our textTS object. The default speech rate was kinda fast for me so i reduced it from the default 1 to 0.7.

 @Override
 public void onInit(int status) {
  // TODO Auto-generated method stub
  if(status == TextToSpeech.SUCCESS)
  {
   int result = textTS.setLanguage(Locale.UK);
   textTS.setSpeechRate((float) 0.7);
   //textTS.setPitch(1);
   //Make sure that the data is valid
   //we check if our data if invalid or if the language received is invalid
   if(result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED)
   {
    Log.e("!!ER!!", "What crap are you feeding me");
   }
   //if our data is good we then proceed with our reading process
   else
   {
    speakBtn.setEnabled(true);
    readText();
   }
  }
 }

You will notice we call readText() again when our input is good and readable, the time is here to set up our readText() and convert our text to speech. This is the code:

private void readText()
 {
  String toBeRead = yourText.getText().toString();
  textTS.speak(toBeRead, TextToSpeech.QUEUE_FLUSH, null);
 }

And this is the full code below, notice i added the onDestroy(), this is to turn off TextToSpeech when the app goes off and keep the android life cycle clean.

package com.example.retts;

import java.util.Locale;

import android.app.Activity;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity implements TextToSpeech.OnInitListener{

 //Declare our objects
 TextToSpeech textTS;
 Button speakBtn;
 EditText yourText;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //Initialize our objects
  textTS = new TextToSpeech(this, this);
  speakBtn = (Button)findViewById(R.id.speak_btn);
  yourText = (EditText)findViewById(R.id.your_text);
  
  //Hey when i click this button read my text
  speakBtn.setOnClickListener(new View.OnClickListener()
  {

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    readText();
   }
   
  });
 }
 //keeping the life cycle clean
 @Override
 protected void onDestroy() {
  // TODO Auto-generated method stub
  super.onDestroy();
  if(textTS != null)
  {
   textTS.stop();
   textTS.shutdown();
  }
 }


 
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 @Override
 public void onInit(int status) {
  // TODO Auto-generated method stub
  if(status == TextToSpeech.SUCCESS)
  {
   int result = textTS.setLanguage(Locale.UK);
   textTS.setSpeechRate((float) 0.7);
   //textTS.setPitch(1);
   //Make sure that the data is valid
   //we check if our data if invalid or if the language received is invalid
   if(result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED)
   {
    Log.e("!!ER!!", "What crap are you feeding me");
   }
   //if our data is good we then proceed with our reading process
   else
   {
    speakBtn.setEnabled(true);
    readText();
   }
  }
 }
 
 private void readText()
 {
  String toBeRead = yourText.getText().toString();
  textTS.speak(toBeRead, TextToSpeech.QUEUE_FLUSH, null);
 }

}

Android Accelerometer vs Windows Accelerometer part 2

We have accessed accelerometer readings on our android devices why don't we see how this is done on a windows phone development environment right quick and easy.

Create your windows phone project; NOTE this will work on a windows phone 7 device too so you can select the windows phone 7 emulator, as a matter of fact i will be running this on a wp7 emulator.

First we drag a TextBlock and name it readings(you can name it what ever) note i also changed my default text to 0.0, because i felt it way cooler...

<textblock horizontalalignment="Left" margin="79,106,0,0" name="reading" text="0.00" textwrapping="Wrap" verticalalignment="Top">
</textblock>

Next you need to add these references:

using Microsoft.Devices.Sensors;
using Microsoft.Xna.Framework;

If you can't find these references just right click references and select add references, you will get a list of references select those to.
We then have to create our Accelerometer variable

Accelerometer accelerometer;

with that setup the next thing we need to do is check if our device has an accelerometer sensor

if (!Accelerometer.IsSupported)
            {
                MessageBox.Show("No Accelerometer sensor found");
            }

now we have checked for our sensor and given the user a message if his device does not have an accelerometer, we then have to initialize our accelerometer variable, set the update/refresh time, create our event handler and then start our accelerometer see code below

if (accelerometer == null)
            {
                //initialize the accelerometer variable
                accelerometer = new Accelerometer();
                //set the update delay in milliseconds
                accelerometer.TimeBetweenUpdates = TimeSpan.FromMilliseconds(10);
                accelerometer.CurrentValueChanged += new EventHandler>(accelerometer_ValueChanged);
                //start our sensor
                accelerometer.Start();
            }

so if there is an accelerometer device and we are not getting any data (that is, if it is offline) then we do the above.
we then update our UI thread with the following code:

void accelerometer_ValueChanged(object sender, SensorReadingEventArgs e)
        {
            Dispatcher.BeginInvoke(() => UpdateUI(e.SensorReading));
        }

Great you have it this far, believe it or not we are getting our data from the accelerometer we for those with doubt why don't we display this data in our TextBlock through our UpdateUI method.

private void UpdateUI(AccelerometerReading accelerometerReading)
        {
            Vector3 acceleration = accelerometerReading.Acceleration;

            reading.Text = "X: " + acceleration.X.ToString() + "\nY:" + acceleration.Y.ToString() + "\nZ: " + acceleration.Z.ToString();
        }

You can now run and test the code in the emulator, if you don't know how this is done just run the code and click the double arrow button pointing towards the right you will see a new window with some tabs, select accelerometer tab and drag the orange circle in the middle of the virtual phone.
you should see your readings
Full Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Devices.Sensors;
using Microsoft.Xna.Framework;

namespace PhoneApp3
{
    public partial class MainPage : PhoneApplicationPage
    {
        Accelerometer accelerometer;
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
            if (!Accelerometer.IsSupported)
            {
                MessageBox.Show("No Accelerometer");
            }
            if (accelerometer == null)
            {
                accelerometer = new Accelerometer();
                accelerometer.TimeBetweenUpdates = TimeSpan.FromMilliseconds(10);
                accelerometer.CurrentValueChanged += new EventHandler>(accelerometer_ValueChanged);
                accelerometer.Start();
            }

            
        }

        void accelerometer_ValueChanged(object sender, SensorReadingEventArgs e)
        {
            Dispatcher.BeginInvoke(() => UpdateUI(e.SensorReading));
        }

        private void UpdateUI(AccelerometerReading accelerometerReading)
        {
            Vector3 acceleration = accelerometerReading.Acceleration;

            reading.Text = "X: " + acceleration.X.ToString() + "\nY:" + acceleration.Y.ToString() + "\nZ: " + acceleration.Z.ToString();
       
    }
}

Our output

Android Accelerometer vs Windows Accelerometer part 1

Hello guys i will like to show you how to get accelerometer readings from android and windows phone devices, as for this part we will focus on Android devices.
So we will be using a TextView to display the data.
Setup your project and open the activity_main.xml and edit the default Hello world text to:

<TextView
android:id="@+id/display_reading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

That is all we need to do to our activity_main.xml
Next we have to create a SensorManager and Sensor variable as follows

Sensor sensor;
//help us manage sensor components
SensorManager sm
TextView displayReading;

We then configure our service and select the type of service we wish to utilize in this case the sensor service, after that we then select a sensor (Accelerometer)

//setup a sensor service
sm = (SensorManager)getSystemService(SENSOR_SERVICE);
//select the sensor we wish to use
sensor = sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
	
sm.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
		
displayReading = (TextView)findViewById(R.id.display_reading);

you will notice we implemented a sensor manager listener to sm.registerListener after doing this you will get an error which can be resolved by implementing SensorEventListener. After doing this you will get another error which is resolved by implementing to methods; onSensorChanged() and onAccuracyChanged()

We are all done with setting things up now we have to get our readings, which we implement in the onSensorChanged() method:

@Override
	public void onSensorChanged(SensorEvent event) {
		// TODO Auto-generated method stub
		displayReading.setText("X"+event.values[0]+"\nY"+event.values[1]+"\nZ"+event.values[2]);
		
	}

The Full code

package com.example.accelerometer;

import android.app.Activity;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity implements SensorEventListener{

	//this class help select a particular sensor
	Sensor sensor;
	//help us manage sensor components
	SensorManager sm;
	
	TextView displayReading;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//setup a sensor service
		sm = (SensorManager)getSystemService(SENSOR_SERVICE);
		//select the sensor we wish to use
		sensor = sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
		
		sm.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
		
		displayReading = (TextView)findViewById(R.id.display_reading);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public void onAccuracyChanged(Sensor arg0, int arg1) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onSensorChanged(SensorEvent event) {
		// TODO Auto-generated method stub
		displayReading.setText("X"+event.values[0]+"\nY"+event.values[1]+"\nZ"+event.values[2]);
		
	}

}

With all that done you can now test "on a real device" since the emulator can not simulate accelerometer behavior, i will get a snapshot of it, thanks.