My first attempt to do this was to register a BroadcastReceiver that listens on WifiManager.SCAN_RESULTS_AVAILABLE_ACTION Events. This event is fired as soon as the Android OS completes a Wlan scan, which is done approximately every ten to twenty seconds. The program than checks whether a certain SSID is in the results and silences the phone if it is the case. Here is the short version of the code:

public class WifiStateReciever extends BroadcastReceiver {

	@Override
	public void onReceive(Context context, Intent intent) {
		// Proceed only if received action is a wlan scan result
		if (WifiManager.SCAN_RESULTS_AVAILABLE_ACTION.equals(intent.getAction())) {

			// get List of networks in reach
			WifiManager connManager = (WifiManager) context.getSystemService(Context.WIFI_SERVICE);
			List<ScanResult> scanResults = connManager.getScanResults();

			// get list of silenced networks from preferences
			for(int i=0;i<scanResults.size();i++) {
				// if network is in in preferences and is checked then silence the phone
				if( ... certain network is this network ...) {
					mAudio.setRingerMode(AudioManager.RINGER_MODE_VIBRATE);
					return;
				}
			}
		}
	}
}

Here is the corresponding manifest entry:

<receiver android:name="WifiStateReciever">
	<intent-filter>
		<action android:name="android.net.wifi.SCAN_RESULTS"></action>
	</intent-filter>
</receiver>

Problem:

The problem with this is that it stops working as soon as the phone goes into standby. My phone goes into standby 15 minutes after turning off the screen. CPU and Wifi is stopped during standby, only GSM is operating for incoming calls and a few other things. So my phone will not notice any new wireless network and hence not go into silent mode. So this way my app is missing the point.

Solution 1:

Fortunately there are ways to make this work. The simplest one is to prevent the phone from going into standby. (DO NOT DO THIS! Read on to see why and see the correct version below) This can be achieved using WakeLock and WifiLock. A WakeLock prevents the CPU, A WifiLock the Wlan from going into standby until they are released. Both are needed to get scan results from the phone all the time, even when it would be in standby. To hold these locks all the time you can use a service that is created as soon as the phone boots, acquire the locks in the onCreate() method and only release them in the onDestroy() method (the latter should only occur if the phone shuts down)

public class StartupReceiver extends BroadcastReceiver {

	@Override
	public void onReceive(Context context, Intent intent) {
		Intent serviceIntent = new Intent();
		serviceIntent.setAction("de.goltergaul.wlanSilence.WlanLockService");
		context.startService(serviceIntent);
	}

}

public class WlanLockService extends Service {

	private WifiLock wifiLock;
	private WakeLock wakeLock;

	@Override
	public IBinder onBind(Intent arg0) {
		return null;
	}

	@Override
	public void onCreate() {
		super.onCreate();

		WifiManager wm = (WifiManager) getSystemService(Context.WIFI_SERVICE);
		wifiLock = wm.createWifiLock(WifiManager.WIFI_MODE_FULL , "MyWifiLock");
		wifiLock.acquire();

		PowerManager powerManager = (PowerManager)getSystemService(Context.POWER_SERVICE);
		wakeLock = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "My Lock");
		wakeLock.acquire();
	}

	@Override
	public void onDestroy() {
		super.onDestroy();

		wifiLock.release();
		wakeLock.release();
	}
}

Here is the corresponding manifest entry:

<receiver android:name="StartupReceiver">
	<intent-filter>
		<action android:name="android.intent.action.BOOT_COMPLETED" />
		<category android:name="android.intent.category.HOME" />
	</intent-filter>
</receiver>
<service android:name="WlanLockService">
	<intent-filter>
		<action android:name="de.goltergaul.wlanSilence.WlanLockService" />
	</intent-filter>
</service>

The downside of this approach is that it consumes a huge amount of extra energy because you eliminate the standby mode completely. The figure on the right is showing the energy consumption of all processes. WlanSilncer is the application preventing the standby mode. Therefore this is not the way to do it!

Solution 2:

The second option is to use the Android AlarmManager. That is a service that can wake up the phone after a certain period of time, execute an PendingIntent (A block of code) and then go to sleep again. This way the the phone can go into standby and just wakes up to scan for new wireless networks and goes to sleep again right after that. This way is much more energy efficient. To implement this I wrote another BroadcastReceiver which receives events from the AlarmManager:

public class WlanScanner extends BroadcastReceiver {

	private AlarmManager alarmMgr;
	private PendingIntent pendingIntent;

	private static WifiLock wifiLock;
	private static WakeLock wakeLock;

	public static void lock() {
		try {
			wakeLock.acquire();
			wifiLock.acquire();
		} catch(Exception e) {
			Log.e("WlanSilencer", "Error getting Lock: "+e.getMessage());
		}
	}

	public static void unlock() {
		if(wakeLock.isHeld())
			wakeLock.release();
		if(wifiLock.isHeld())
			wifiLock.release();
	}

	public WlanScanner() {} // called by the AlarmManager

	// this constructor is invoked by WlanLockService (see next code snippet)
	public WlanScanner(Context context, int timeoutInSeconds){

		// initialise the locks
		wifiLock = ((WifiManager) context.getSystemService(Context.WIFI_SERVICE))
						.createWifiLock(WifiManager.WIFI_MODE_SCAN_ONLY , "WlanSilencerScanLock");
		wakeLock = ((PowerManager) context.getSystemService(Context.POWER_SERVICE))
						.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "WlanSilencerWakeLock");

        	alarmMgr = (AlarmManager)context.getSystemService(Context.ALARM_SERVICE);

		// use this class as the receiver
        	Intent intent = new Intent(context, WlanScanner.class);
        	// create a PendingIntent that can be passed to the AlarmManager
        	pendingIntent = PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);

        	// create a repeating alarm, that goes of every x seconds
        	// AlarmManager.ELAPSED_REALTIME_WAKEUP = wakes up the cpu only
       		alarmMgr.setRepeating(AlarmManager.ELAPSED_REALTIME_WAKEUP, SystemClock.elapsedRealtime(), timeoutInSeconds*1000, pendingIntent);
	}

	// stop the repeating alarm
	public void stop() {
		alarmMgr.cancel(pendingIntent);
	}

	@Override
	public void onReceive(Context context, Intent arg1) {
		Log.v("WlanSilencer", "Alarm received");
		WifiManager connManager = (WifiManager) context.getSystemService(Context.WIFI_SERVICE);
		if(connManager.isWifiEnabled()) {
			lock(); // lock wakeLock and wifiLock, then scan.
			// unlock() is then called at the end of the onReceive function of WifiStateReciever
			connManager.startScan();
		}
	}

}

public class WlanLockService extends Service {

	private WlanScanner scanner;

	@Override
	public IBinder onBind(Intent arg0) {
		return null;
	}

	@Override
	public void onCreate() {
		super.onCreate();
		scanner = new WlanScanner(this, 60);
	}

	@Override
	public void onDestroy() {
		super.onDestroy();

		scanner.stop();
		scanner = null;
	}
}

Summary:

The code has to do this in the right order:

1. After the device booted the WlanLockService has to be started
2. The WlanLockService has to initialize WlanScanner which sets a repeated Alarm using the AlarmManager
3. Once the alarm is received a WakeLock and a WifiLock should be acquired
4. A wlan scan can now be requested
5. The wlan scan result event is received and processed
6. Release the WakeLock and WifiLock

You can download the app here if you like. It’s not available through the app store.

Usually JavaScript MVC Frameworks are used to build desktop like single page applications. Single page applications are referred to as websites where all the content is available without reloading the page – every content is pulled in by AJAX and modifications to data are sent back to the server the same way. This is where models come in handy. But in our case we have a normal website with many different pages. We only use JavaScript to sort some lists or to have a interactive filter menu. In this article i will explain how we used the JavaScriptMVC Framework to realize this.

First of all, JavaScriptMVC is based on jQuery. This means it only works with jQuery. The advantage is, it is integrated in it’s functionalities. You’ll see why this is handy. It also ships with a integrated testsuite where one can write unittests etc. and an dependency solver called Steal. Steal can be used to require other JavaScript files which helps to easily organize your JavaScript code into as many files as you like. These files can later be compiled into one production file using the google closure compiler.

Because we have a multi page application, we only need parts of the framework, which is not a problem, because we can select only the parts of the framework that we really use. Only these parts are compiled into the production code, which is great We decided to use the controllers for our widgets. Such a controller can be mounted on a DOM element and then control everything that happens inside that element and its children. The following code shows a simple example of such a controller. (The JavaScriptMVC documentation can be found here)

$.Controller("Portfolio.Project", {
  init : function(el, options) {
    // do some stuff on initialisation
  },

  // this gets called when the child element with the id "read_more_link" is clicked
  "#read_more_link click": function(el, ev) {
    ev.preventDefault();
    // this.element is the element this controller is mounted on
    this.element.find(".long_description").show();
    this.element.find(".short_description").hide();
  }
});

The controller can then be mounted on a HTML element and it’s init() function gets called:

$("#project").portfolio_project();

This way widgets can be programmed easily To require this controller on application load, we require it in our main JavaScript file (portfolio.js) using Steal:

steal('../jquery/jquery')
  .plugins('jquery/dom/cookie','jquery/controller','portfolio/project', 'portfolio/other_widtgets...'');

Using the steal() function, you can require any JavaScript file you like. plugins() loads our widgets and parts of the framework like cookie support and the controller base class. In order for our widget to be found by Steal, it has to be in the right folders and follow the naming conventions for plugins. We used the following folder structure:

- public
  |-javascripts
     |-jquery << framework code
     |-steal << steal code
     |-portfolio
       |-profile
       | |- profile.js << profile widget
       |- portfolio.js << main File

This way the file profile.js in the profile folder is found by steal. To load the main file, the following code has to be included in the application layout:

Production mode:

<script type='text/javascript' src='/javascripts/steal/steal.production.js?portfolio'></script>

Development mode:

<script type='text/javascript' src='/javascripts/steal/steal.js?portfolio,development'></script>

In development mode all required files are synchronously loaded by Ajax, in production mode only one compressed JavaScript file is loaded.

Additional Steal requires can be put in any file you want. For example in a controller that needs JavaScript Views:

steal.plugins('jquery/view/ejs', 'jquery/view').then(function() {
    $.Controller("Portfolio.Person", {
        init : function(el, options) {
            ...
        },

        addPersonRow: function(json) {
            this.element.find(".persons").append("person_template", json);
        }
    });
});

First ‘jquery/view/ejs’ and ‘jquery/view’ are required by Steal and then, when these dependencies are loaded, the controller code inside the then() function is executed.
The addPersonRow() function in this example uses a view to generate HTML and appends it to the DOM. As you can see views are directly built into the jQuery append function (and others) which is very handy. A View is a piece of HTML code, that is included in the HTML that is generated by the server side application. This way styling and the HTML stucture are seperated from JavaScript, which is really good. The append() function now gets passed two parameters: The template id and a object containing the values that are used in the view. <%=something%> prints a value whereas any javascript code can be included in views when placed between <% (javascript here) %>:

<script id="person_template" type="text/ejs">
  <tr class="person" id="sort_<%=person.id%>">
    <td>
      ...
    </td>
    <td>
      Hello <%=person.name%>
    </td>
  </tr>
</script>

So $(”#some_element”).append(”person_template”, { person: { id: 1, name: ‘Jack’ } }); will generate the following HTML and append it to #some_element:

  <tr class="person" id="sort_1">
    <td>
      ...
    </td>
    <td>
      Hello Jack
    </td>
  </tr>

I hope this gave you a quick overview on how JavaScriptMVC can be used on a multi page apllication

Check it out at portfolio.mediacube.at

This project also includes a print magazine, for more informations on this click here.

Tech specs:

The portfolio was programmed in Ruby on Rails 3, the database backend is MySQL 5. To implement the JavaScript functionalities, we used JavaScriptMVC.

Front page showing the best projects

Uploading pictures, movie clips and downloads for a project

The project coverimage can be cropped online

Project page showing details and a video

One can browse all projects by studycourse and major

Search for persons and projects

Adding teammembers with their roles

Sprachen en>de YahooKE

JavaScriptMVC

The game was a great success: Many students had fun playing the game for over an hour

We used Adobe Flash to do the game and exported it as Adobe Air application because it has less restrictions for using the Keyboard in fullscreen mode than normal Flash.

You can download the game here: Snakes Air Application (You’ll need Adobe Air) I apologize for the awful sound effects

The sourcecode is hosted at Github. Please note that this is quick and dirty code.

What i wrote is a configurator. This means the user sees a 3D model of the unit he selected and then he can equip it with different weapons and armors. In this experiments i used no cool models, only primitives and some things i found on my hard disk. Here is a Video of the result. Sometimes I had to use configurator.something instead of this.something. I think this is wrong and I will soon check out some tutorials on Javascript Classes

var configurator = {
	engine: null,
	armor: null,
	active_unit_name: null,
	active_unit_index: null,
	is_initialized: false,
	units: {},
	unit_count: 0,
	onLoad_conf: {},
	scene: null,

	// changes the weapon. (sets the selected one visible)
	weapon: function(i) {
		var unit = this.activeUnit();

		if(unit.active_weapon)
			unit.active_weapon.Visible = false;

		if(typeof(i) == "undefined")
			return;

		unit.active_weapon = this.scene.getSceneNodeFromName(unit.weapons[i]);
		unit.active_weapon.Visible = true;
	},

	// changes armor
	armor: function(i) {
		var unit = this.activeUnit();

		if(unit.active_armor)
			unit.active_armor.Visible = false;

		if(typeof(i) == "undefined")
			return;

		unit.active_armor = this.scene.getSceneNodeFromName(unit.armors[i]);
		unit.active_armor.Visible = true;
	},

	// switch to next unit in left direction
	left: function() {
		this.active_unit_index--;

		if(this.active_unit_index < 0)
			this.active_unit_index = this.unit_count-1;

		this.reload();
	},

	// switch in right direction
	right: function() {
		this.active_unit_index++;

		if(this.active_unit_index > this.unit_count-1)
			this.active_unit_index = 0;

		this.reload();
	},

	// displayes unit with index active_unit_index
	reload: function() {
		var counter=0;
		for(var key in this.units) {
			if(counter == this.active_unit_index) {
				this.showUnit(key);
				break;
			}
			counter++;
		}
	},

	// shows unit by name
	showUnit: function(unitname) {

		if (!this.is_initialized) {
			this.initialize(unitname);
			return;
		}

		this.scene.getSceneNodeFromName(this.active_unit_name).Visible = false;
		this.weapon();
		this.armor();
		this.active_unit_name = unitname;

		this.scene.getSceneNodeFromName(this.active_unit_name).Visible = true;
		this.weapon(this.activeUnit().weapon_index);
		this.armor(this.activeUnit().armor_index);
	},

	// returns the unit that is currently displayed
	activeUnit: function() {
		return this.units[this.active_unit_name];
	},

	// initialize scene
	onLoaded: function()
	{
		configurator.scene = configurator.engine.getScene();
		if (configurator.scene)
		{
			// initialize active_unit
			var unit = configurator.scene.getSceneNodeFromName(configurator.active_unit_name);
			unit.Visible = true;

			// also, force the 3d engine to update the scene every frame
			configurator.scene.setRedrawMode(Scene.REDRAW_WHEN_SCENE_CHANGED);

			// rotate scene
			configurator.scene.getSceneNodeFromName('root').addAnimator(new AnimatorRotation(new Vect3d(0, 0.2, 0)));

			// load first weapon
			configurator.weapon(configurator.activeUnit().weapon_index);
			configurator.armor(configurator.activeUnit().armor_index);
		}
	},

	// preinitialize. create canvas to draw in and load scene
	initialize: function(default_unit) {
		this.is_initialized = true;
		jQuery("#canvasContainer").prepend('<canvas id="3darea" width="730" height="450" style="background-color:#ffffff"></canvas>');
		jQuery("#configurator").fadeIn();

		this.active_unit_name = default_unit;
		var index=0;
		for(var key in this.units) {
			if(key == default_unit) break;
			index++;
		}
		this.active_unit_index = index;
		this.engine = startCopperLichtFromFile('3darea', 'copperlichtdata/configurator.ccbjs');
		this.engine.OnLoadingComplete = this.onLoaded;
	},

	// add a unit and its preconfiguartion to the configurator.
	// the last two arguments specify which items should be displayed initially
	// nodenames are the names to reference the corresponding nodes in the scene. (same as in coppercube editor)
	addUnit: function(nodeName, weaponNodeNames, armorNodeNames, weapon_index, armor_index) {
		this.units[nodeName] = {
			weapons: weaponNodeNames,
			armors: armorNodeNames,
			weapon_index: weapon_index,
			armor_index: armor_index
		};
		this.unit_count++;
	},

	destroy: function() {
		jQuery("#configurator").fadeOut();
		jQuery("#3darea").remove();
		this.is_initialized = false;
	}

};

jQuery(document).ready(function(){
	// add units to configurator
	configurator.addUnit("bird",["weapon","weapon2"],["armor1","armor2"],1,0);
	configurator.addUnit("ghoul",["ghoul_weapon1","ghoul_weapon2"],["ghoul_armor1","ghoul_armor2"],0,0);
});

Results

The first video shows an original and an encrypted video in comparison.

The second video compares the same video using different GOP sizes (10 and 50)

Error Concealment

We found out that some codecs (e.g. DirectShow) do a very good error concealment. The picture on the left shows two different videos played in two different players. As one can see, the second player reconstructs a slightly good image.

How does it work?

We are parsing the byte stream for VideoObjectPlanes which have the start code 0×000001b6. If this code is followed by two bytes that are equal to 00 the we found an I-Frame. From here on we start overwriting thy byte stream until we reach the next start code 0×000001.

Code

#include <iostream>
#include <fstream>
using namespace std;

int main() {
	ifstream ifs("in.mp4", ios::in | ios::binary);
	ofstream ofs("output.mp4", ios::out | ios::binary);
	//initialize buffer to 0xffffffff
	unsigned char buffer[4] = {0xff, 0xff, 0xff, 0xff};
	bool write = false;
	int counter=0;
	unsigned long overallcount=0;
	unsigned long writecount=0;
	while(!ifs.eof())
	{
		//Shift to make space for new read.
		buffer[0] = buffer[1];
		buffer[1] = buffer[2];
		buffer[2] = buffer[3];

		//read next byte from file
		buffer[3] = ifs.get();

		//see if the current buffer contains the start code.
		if(buffer[0]==0x00 && buffer[1]==0x00 && buffer[2]==0x01) // 0x00 00 01 b6
		{
			write = false;
			if(buffer[3]==0xb6) {
				//cout << "VOP begin" <<endl;
				//vop start code found
				//Test for I-frame
				unsigned char ch = ifs.get();
				ofs << buffer[3];
				buffer[0] = buffer[1];
				buffer[1] = buffer[2];
				buffer[2] = buffer[3];

				//read next byte from file
				buffer[3] = ch;
				int vop_coding_type = (ch & 0xc0) >> 6;   //masks out the first 2 bits and shifts them to the least significant bits of the uchar
				if(vop_coding_type == 0)
				{
					//It is an I-frame (hell yeah (: )
					write = true;
					cout << ++counter << ". Iframe =)" << endl;
				}
			}
		}
		if(write) {
			ofs << (char)0x0d;
			writecount++;
		}
		else {
			ofs << buffer[3];
			overallcount++;
		}
	}

	cout << "Read : " << overallcount << endl;
	cout << "Write: " << writecount << endl;
	cout << "Percent overwritten: " << (float)writecount/(float)overallcount*100.0f << endl;

	return 0;
}

In order to get into Android programming we wanted to test how fluid a 4 megapixel image could be moved around the screen. To be able to move such an image we needed a thread to update the position and to redraw our Canvas view.

The first idea was to have a thread which updates the coordinates where the picture should be drawn on the screen and then call a redraw() function. We soon realized that a Canvas could only be forced to redraw itself by invalidating it. But there is a security feature of android that only allows Activities to invalidate Views if it is a children of the Activity. We had a Class UpdateThread which implements the Runnable interface: (Game extends Canvas and draws our Picture)

public class main extends Activity {

private Game game;

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        game = new Game(this);
        setContentView(game);

        Thread myThread = new Thread(new UpdateThread());
        myThread.start();

    }

public class UpdateThread implements Runnable {

    	@Override
    	public void run() {
    		//... code to manipulate position
            }
    	}

    }

}

If you now try to call game.invalidate() from this run() function Android will throw an exception because game is not a child of UpdateThread. The solution is to implement a handler which can communicate with our thread – it is building a interface between our thread and the main class. We insert the following in the main class:

    public Handler updateHandler = new Handler(){
    	/** Gets called on every message that is received */
        // @Override
        public void handleMessage(Message msg) {
        	game.update();
            game.invalidate();
            super.handleMessage(msg);
        }
    };

We fill our run() method with this code:

while(true){
    main.this.updateHandler.sendEmptyMessage(0);
}

Now each thime main.this.updateHandler.sendEmptyMessage(0) is called the handler reacts. The point is that our handler now can call game.invalidate() because game is a child of main.

Here is the full code:

main.java

package muhkuh.app;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

public class main extends Activity {

	private Game game;

    public Handler updateHandler = new Handler(){
    	/** Gets called on every message that is received */
        // @Override
        public void handleMessage(Message msg) {
        	game.update();
            game.invalidate();
            super.handleMessage(msg);
        }
    };

    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        game = new Game(this);
        setContentView(game);

        Thread myThread = new Thread(new UpdateThread());
        myThread.start();

    }

    public class UpdateThread implements Runnable {

    	@Override
    	public void run() {
    		 while(true){
                 main.this.updateHandler.sendEmptyMessage(0);
            }
    	}

    }

}

game.java

package muhkuh.app;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class Game extends View {

	private Bitmap image;
	private Paint paint;
	private int x=0;

	public Game(Context context) {
		super(context);
		image = Bitmap.createBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.test));
		paint = new Paint();
	}

	// called every Frame
	protected void onDraw(Canvas canvas) {
		canvas.drawBitmap(image, x, 0, paint);
	}

	// called by thread
	public void update() {
		if(x < 200)
    		x++;
    	else
    		x=0;
	}

}