Connect a Dualshock 4 to Mac and play some games via Bluetooth

I struggled a bit today to get this combination working so I wanted to share my findings here. As you probably already know, it’s very easy to connect the PS4’s Dualshock controller to your Mac. All you have to do is:

  • Turn on Bluetooth on your Mac and go to Bluetooth preferences
  • If you have connected the Dualshock before, remove the Wireless Controller entry
  • Set the Dualshock to pairing mode by pressing the SHARE and PS-Button until the lightbar flashes white very fast
  • Click ‘Pair’ at the new Wireless Controller entry in the Bluetooth (the lightbar should change to a constant white light) – if you’re using an OSX version older than Mavericks, you might have to add the device manually

Unfortunately the controller mapping isn’t as easy at the moment; it doesn’t really work right out of the box. Apparently there are some plist files out there that make some games compatible but I didn’t have any of them to test it.

So to configure a custom mapping I used the really awesome app ControllerMate, where you can add keyboard mappings to the controller inputs. After you get used to some of the most important components it’s very straight forward to use und has a nice, clean interface.

To map the Dualshock 4, it’s very helpful to rename the default names of the buttons under ‘Controller Information’ -> ‘Wireless Controller (Game Pad)’ to a more fitting description in the ‘Custom Name’ column as you can see below. Here you can download my config file (not sure if it will work for you, would be very happy about some comments on this, ty!) Dualshock 4 ControllerMate config

Now switching back to ‘Programming Items’ takes you to the interface where you map the different elements of the controller to buttons on the keyboard. You might want to create a new Programming Page to save your mapping afterwards. Some of the most important components / Building Blocks (BB) I used yesterday for my Super Meat Boy setup were:

  • Button BB – Simple button press on the controller – used by dragging it from the palette window to the programming page – can be found quicker by just pressing the button on controller/keyboard
  • Hatswitch / Axis BB – D-Pad and vertical/horizontal stick events – output different values depending on direction of action – d-pad from 0-8 including all direction + diagonal and no press ‘8’ – sticks values from 0-255 (left/right or up/down)
  • Single Key BB – map action to a single key press (on the keyboard) – created in the context menu -> Create BB > Output > Single Key – to map a Button BB to this component just drag the bottom off/on switch to the top of the Single Key BB – when mapping Hatswitch or Axis we need another component between them and this one, because of the multiple values
  • Value Selector BB – select some values via checkboxes that activate the following mapping – created in the context menu -> Create BB > Calculations > Value Selector – used e.g. when mapping the D-Pad to connect all 3 actions of one direction to one of the arrow keys
  • Range BB – select a interval of values that activate the following mapping – created in the context menu -> Create BB > Calculations > Range – used e.g. when mapping the many values of a stick to one of the arrow keys – also very helpful to specify dead zones of the sticks where the mapped key shouldn’t be pressed (in my example dead zones of 115-145 worked pretty good)

My current setup for Super Meat Boy looks like this and can be downloaded here (again happy for feedback if sharing programming pages works proper):

Super Meat Boy Programming Page

To edit the configuration of the single BB, use the Properties Inspector Window (Window > Inspector Window > Properties / CMD + 1). For testing the current configuration you can just press the buttons of the controller and look for glowing ON switches to see if everything is working correctly.

The trial version of ControllerMate is limited to map 10 Single Key BB as far as I have seen, when adding another block, it looks like this.

ControllerMate Unregistered Warning

This is a very nice trial model imo as you can really test the functionality before buying it. It should also work for a good amount of games, where you don’t need more than 10 actions – remove the “duplicate” mapping of D-Pad AND sticks if you need more action button! If you want to map really complex controls or the whole controller you’ll have to register for the full version.

You can also save configurations of different games by exporting them (File -> Export Selection…) and delete the Programming Page in the App to get rid of the unregistered warning of other pages. This way you can store an infinite amount of configurations, even in the trial version.

For now only the touchpad click is supported in ControllerMate so you can’t really use it for navigation or anything, but maybe that will change in the future. Also I really hope Sony or someone else is coming up with an official driver or other piece of software, that makes this manual mapping obsolete. In the meantime I think this is a really nice way to enjoy some games with the Dualshock 4 on the Mac. Thanks for reading and as always, I’d be happy about any kind of feedback (especially on the config files ;))

[FIXED] OSX Mavericks doesn’t recognise Intel SSD – after update from Lion

Update: Summary added so you don’t have to read my extensive rambling about the problem 😉 For more details read here.

  • After working fine in OSX Lion, the Mavericks update & boot-stick menu didn’t see my Intel SSD (Model: SSDA2M080G2GC – Series: 310) while inside the main bay
  • Booting old Lion install in safe mode + installing 10.9 while SSD in usb hard drive case, worked fine

(My) solution

  • Installing the newest Intel firmware (2CV102HD -> 2CV102M3) from usb-stick to the SSD, while inside the SATA bay of a windows laptop -> SSD works fine again inside the Macbook

Complete original story:
Last week I tried to update my early 2011 Macbook Pro running OSX Lion (10.7) to Mavericks (10.9), the newest (free) update of Apple’s “desktop” OS. The main hard drive was exchanged 2 years ago for an Intel 80GB SSD – Model: SSDA2M080G2GC – Series: 310. As it took me over a week and 10+ hours of wondering to finally finish the whole process, I decided to write about it, in case anybody else out there has the same problem!

After trying to install the update over my current OSX version (by downloading the installer file via Appstore and executing it), my Macbook just kept hanging at the loading screen and didn’t do anything. After finding some info about the launch options on a mac I tried some of them. In verbose mode [Command+V] I could at least get a first hint of the problem, as it showed “Still waiting for root device” every few seconds in an infinite loop. This error was again present, when I inserted my prior with Diskmaker X prepared USB-stick and booted from it. In this boot menu you have some options like installing a clean version of Mavericks, accessing a terminal command line and even the well-known Disk Utility can be started. Unfortunately in neither of these options my SSD was found!

The very odd thing at that time was, that I could still boot to my old Lion install in safe mode [Shift] and everything was running just fine. Knowing that, I could at least eliminate the possibility of a hardware damage (after reading some posts about dead hard drive cables in Macbooks). After formatting the hard drive in 3 different ways using a windows laptop and my usb hard drive case, the hard drive still didn’t show up. I only found the next oddity, namely the SSD was detected on my mac perfectly fine while inside the hard drive case. This way at least I could install a fresh version of Mavericks and run it (whilst loosing much of the performance boost).

I’ve used this workaround for almost a week know, until yesterday when I found this post pushing me in the right direction! I found the most recent firmware update for Intel SSDs but I couldn’t get a bootable stick running with my mac (don’t ask me how the guy from Diskmaker X is doing it :). According to the discussion in this guide‘s comment section, it’s got something to do with the Intel Hardware and the Efi-Bios – I couldn’t figure out how to do it. What I could do, following that guide, was preparing my USB-stick (partition as MBR and Free Space) for the before mentioned windows laptop. Here I could launch the intel update tool just fine and tried to update the SSD in my usb case – no luck, it couldn’t find the hard drive. I’ve read before somewhere that a firmware upgrade requires the hard drive to be connected by a proper SATA connector, so I tried putting the SSD inside the windows laptop and that FINALLY did do the trick! I could update my firmware from version 2CV102HD to 2CV102M3.

After applying that upgrade, thankfully the SSD was found again when inside the main bay of the Macbook and I could use it the way it’s supposed to be again. Enjoying a clean Mavericks install and all it’s improvements right now! Don’t forget to enable trim (if your drive needs it), when upgrading your hard drive to an SSD of your choice – Trim Enabler is probably the easiest way to do that.

As always thanks for reading and any kind of feedback is appreciated! Especially if you know a way to keep the windows laptop out of this! 😉

Map tab key to indent and shift+tab to outdent in TinyMCE (in Wicket)

Today’s post is about changing the behavior of the TinyMCE implementation in the wicket stuff library. In this library TinyMCE functionality can be implemented by just adding the TinyMCEBehaviour to the wicket component TextArea and calling the behavior’s constructor with an instance of TinyMCESettings, where you can set all kind of parameters.

Generally very content with our implementation, our customer wanted a way to define pre-formatted text blocks to use in documents at a later point. For ease of use, pressing the tab key should indent the text and shift+tab should revert the effect = outdent the current line. Although the advanced edit settings showed indent/outdent buttons we also wanted it to work when the buttons aren’t shown, in forms where space is precious for example. After some google searches I found this post (cached google version), about how to execute TinyMCE functionality in javascript and this stackoverflow answer, about where to put this info.

The solution, which works pretty well for us, was to insert a method in our TinyMCE class, which just adds the following function to the settings instance.

public static TinyMCESettings addTabFunctionality(TinyMCESettings settings) {
settings.addCustomSetting("setup : function(ed) { " +
"ed.onKeyDown.add(function(ed, e) { " +
"if(e.keyCode == 9) {" +
"if(e.shiftKey) {" +
"ed.execCommand('Outdent');" +
"}else{" +
"ed.execCommand('Indent');" +
"}" +
"e.preventDefault();" +
"return false;" +
"}" +
"});" +
return settings;

The addCustomSetting() method adds code to the init() function created by the TinyMCE addon and in the javascript code we listen for keydown in the textarea. If keycode equals ‘9’ (tab) we check if shift is also pressed, if so an outdent action is performed using execCommand(‘Outdent’), if not, an indent is executed. By calling preventDefault() afterwards, the default action of the tab key is prevented – in our case it just was a 4 space-tab, which wasn’t written to the created html code. Calling the TinyMCE indent and outdent commands, padding is added to the affected line’s <p> tag (30px per tab) so the format can be saved to a database, without loosing the tabbed white-spaces.

Hope this helps someone, have a nice weekend! Until next time, feedback’s very welcome!

Running cron jobs on Raspberry Pi in Raspbmc

Here’s another little tutorial especially for people new to raspberry pi or linux in general (such as myself). Cron jobs are used to execute specific actions at pre-configured times. These actions can be executing scripts, writing data to a file, etc. (would be glad to hear of stuff you do with cron jobs in the comment section ;))

In my specific case I needed a script to map my changing external ip address at home to the domain I specified for my raspberry to have access to it when I’m away. Big thanks for all the help to my good friend Thomas for domain hosting and tipps on how to get this to work! Now let’s get to it!

  1. Activate cron jobs in Raspbmc
    Per default running cron jobs is deactivated in Raspbmc and there are two ways to activate them.
    – In the Raspbmc GUI under Programs -> Raspbmc Settings -> System Configuration -> Service Management -> Cronjob Scheduler
    – Via SSH/FTP by modifying sys.service.cron value to “true” the settings file under /home/<your_username>/.xbmc/userdata/addon_data/script.raspbmc.settings/settings.xml – for more infos on changing settings via SSH / FTP, check my latest blog post
  2. Configure your ‘crontab’
    All cron jobs are defined in this file and you can specify multiple of them, each on its own line – to edit  your crontab in your default text editor, type ~$ crontab -e in the console. By using ~$ crontab -l the content is shown.
  3. Write your cronjob
    The syntax isn’t too easy to understand in the beginning, but there are tools online, which can help you write your (first) cron jobs. In my case the cron job looks like this:
    20,40 * * * * sh /
    Every hour at minute xx:20 and xx:40 the script in the root directory of my raspberry is executed, which just calls a magic dns mapping domain via wget.
    Especially in the beginning it’s a good idea to add a test job, which executes every minute and only helps to see if your cron configuration is set up properly. I use the following:
    * * * * * echo “crontest $(date) $(whoami)” >> /tmp/crontest.txt
    This just writes the current date and the current user to the specified textfile.
    Below is a screenshot of my current crontab:
    Screen Shot 2013-04-05 at 11.48.22 PM
  4. Control the cron service
    In order to get your cron jobs to run, the cron service must be active. The following commands let you control the cron service:
    ~$ /etc/init.d/cron stop
    ~$ /etc/init.d/cron start
    ~$ /etc/init.d/cron restart
    These commands will probably need a leading ‘sudo‘ – just check your console output. To quickly repeat your last command with leading sudo type ‘sudo !!‘.
  5. Check if your cron jobs are running
    If you also specified a test cron job like the one above, you can test if it’s working by printing the latest contents of the text file to your console. This can be done by using the ‘tail’ command and the ‘-f‘ parameter updates the output as new content is added to the file. See below screenshot for example output:
    Screen Shot 2013-04-06 at 12.00.48 AM

And… That’s it! Thanks for reading, hope it helps someone, glad for every kind of feedback! Bye!

Update (10.11.2013): As jazz and CFWhitman pointed out in the comment section, you can also just use the commands /etc/init.d/cron status or service cron status to check if cron jobs are running. For output see screenshot below 🙂 Thanks!

Screenshot 2013-11-10 04.31.52

Change Audiooutput mode and other settings in Raspbmc via FTP / SSH / command line

As i couldn’t find a proper guide to editing the settings of the raspbmc os via command line/ssh or ftp, here are my findings about it. As I’m pretty new to linux, there may be some faster / more efficient ways to do this (e.g. editing the setting files via nano/vi or even writing scripts to change certain settings) but for me the following works pretty well as for now. If you have some addition / comment please share them in the section below or contact me elsewhere, tia!

If you’re new to raspbmc the FAQ in the official wiki are definitely worth checking out. Here you find the default logon information (user: pi – pw: raspberry), the commands to stop and start xbmc (used in this guide) and many other interesting infos.

  1. Connect to your raspberry pi via FTP and/or SSH (i use FileZilla and the Mac OSX Terminal to do this – any other ftp/ssh client will also do)
  2. Navigate to /home/<username (default ‘pi’)>/.xbmc/userdata/guisettings.xml and open or download it. As you can see in the screenshot, I use Filezilla’s context menu to ‘View/Edit’ the remote file in my default text editor.
    Screen Shot 2013-03-30 at 2.18.21 PM
  3.  Look for the <mode> tag inside <audiooutput> tag or any other setting you want to change and change it to the value you need. For switching audio modes see the screenshot below.
    Screen Shot 2013-03-30 at 2.20.20 PM
  4. Save the settings file. Filezilla automatically detects changes to the local file and offers to upload the changed file – you can also delete the local copy in the process.
    Screen Shot 2013-03-30 at 2.20.45 PM
  5. Restart xbmc via SSH to apply the changes to your running raspberry pi – using the commands found in the FAQ mentioned above.
    Screen Shot 2013-03-30 at 2.21.42 PM

This already concludes my little guide for changing settings in raspbmc. For preferences set in the raspbmc settings addon, access the file /home/<your_username>/.xbmc/userdata/addon_data/script.raspbmc.settings/settings.xml – other than that the process is the same. Hope this helps someone – I’d be happy about every kind of feedback. Have a nice day! 🙂

Update (28.06.2013):
Good news everyone! 🙂 Starting with the June Update of the Raspbmc System we are able to output audio both to HDMI AND the analog output! This is especially useful if you also want to use your raspberry (eg. play music via airplay like I do) when your TV/monitor is switched of. I’m glad the creator(s) of raspbmc made my guide obsolete 😛

So as a quick summary, we now have the following audio output modes (<mode>x</mode>):

  • 0 – analog
  • 2 – HDMI
  • 3 – All outputs

This is really great, thanks a lot to the raspbmc guy(s) for improving our experience even further! For more info about the june update of Raspbmc go here.

Building a custom FeedbackPanel in Wicket with Javascript

Today I’d like to present to you my first, very own tutorial about how to build a customized feedback-/notificationpanel in Wicket. I did this during my job a few weeks ago, because we were frustrated by the existing placement of our feedback panels. This one lets us show the notification anywhere on the page, while still using the Wicket built-in feedback system.

As far as the design goes, I managed to color the frame representing the most grave notification message (in our case just: info – warning – error) and color the distinct lines according to the level of feedback (blue for info, orange for warning, red for error). Sticking kinda to convention here 🙂

For every additional message the notification will stay half a second longer before fading out; this can be configured in the javascript function.



At first we will look at the java class of the notificationpanel, which extends FeedbackPanel to access all the built in methods of this class. If you want to know more details about the code please refer to the inline comments or just try it out, by copying it into your IDE.

import org.apache.wicket.AttributeModifier;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;

public class NotificationPanel extends FeedbackPanel {

	private static final long serialVersionUID = 1L;
	private final String cssClass = "notificationpanel";
	private String additionalCSSClass = "notificationpanel_top_right";

	// Create a notifcation panel with the default additional class, specified as a field variable
	public NotificationPanel(String id) {

		init(id, additionalCSSClass);

	// Create a notifcation panel with a custom additional class, overwriting the field variable
	public NotificationPanel(String id, String additionalCSSClass) {

		this.additionalCSSClass = additionalCSSClass;

		init(id, additionalCSSClass);

	private void init(String id, String additionalCSSClass) {
		// set custom markup id and ouput it, to find the component later on in the js function

		// Add the additional cssClass and hide the element by default
		add(new AttributeModifier("class", true, new Model<String>(cssClass + " " + additionalCSSClass)));
                add(new AttributeModifier("style", true, new Model<String>("opacity: 0;")));

	 * Method to refresh the notification panel
	 * if there are any feedback messages for the user, find the gravest level, 
	 * format the notification panel accordingly and show it
	 * @param target
	 *            AjaxRequestTarget to add panel and the calling javascript function
	public void refresh(AjaxRequestTarget target) {

		// any feedback at all in the current form?
		if (anyMessage()) {
			int highestFeedbackLevel = FeedbackMessage.INFO;

			// any feedback with the given level?
			if (anyMessage(FeedbackMessage.WARNING))
				highestFeedbackLevel = FeedbackMessage.WARNING;
			if (anyMessage(FeedbackMessage.ERROR))
				highestFeedbackLevel = FeedbackMessage.ERROR;

			// add the css classes to the notification panel, 
			// including the border css which represents the highest level of feedback
			add(new AttributeModifier("class", true,
                                 new Model<String>(cssClass
                                           + " " + additionalCSSClass
                                           + " notificationpanel_border_" + String.valueOf(highestFeedbackLevel))));

			// refresh the panel and call the js function with the panel markup id 
			// and the total count of messages
			target.appendJavascript("showNotification('" + getMarkupId() + "', "
					+ getCurrentMessages().size() + ");");

	 * Returns css class for the single rows of the panel
	 * @see org.apache.wicket.markup.html.panel.FeedbackPanel#getCSSClass(
	protected String getCSSClass(FeedbackMessage message) {
		return "notificationpanel_row_" + message.getLevelAsString();


The javascript function uses the jquery fading methods to show and hide the notification in a nice manor. Here you can configure the time intervals and the opacity of the fading effects.

function showNotification(componentId, messagecount){
	timeout = 5000 + (messagecount * 500);
	$('div#' + componentId).fadeTo('normal', 1.0);
	setTimeout("$('div#" + componentId + "').fadeTo('normal', 0.6)", timeout);
	timeout += 2000; 
	setTimeout("$('div#" + componentId + "').fadeOut('normal')", timeout);


The css classes used. The class notifcationpanel defines some standard properties like bg color, padding, rounded corners (css3 border-radius) and position: fixed to maintain an absolute position and don’t scroll with the content. .notificationpanel_xxx are the classes used to add as the additionalCSSClass to the NotificationPanel, here you can add your custmized css class. .notificationpanel_border/row_xxx defines the border and colors of the panel and the distinct messages, configure as you please.

.notificationpanel {
background-color: #fff;
padding: 3px;
position: fixed;

.notificationpanel_bottom_left {
bottom: 100px;
left: 30px;

.notificationpanel_bottom_detail_form {
top: 540px;
right: 30px;

.notificationpanel_bottom_right {
bottom: 100px;
right: 30px;

.notificationpanel_top_right {
top: 15px;
right: 30px;

/* info */
.notificationpanel_border_200 {
	border: 3px solid #0053a0;
	box-shadow: 0px 0px 5px #000;

.notificationpanel_row_INFO {
	color: #0053a0;

/* warning */
.notificationpanel_border_300 {
	border: 3px solid #FF9900;
	box-shadow: 0px 0px 6px #000;

.notificationpanel_row_WARNING {
	color: #FF9900;

/* error */
.notificationpanel_border_400 {
	border: 3px solid #CC3300;
	box-shadow: 0px 0px 7px #000;

.notificationpanel_row_ERROR {
	color: #CC3300;



To use the NotificationPanel just define a div container with a wicket:id of your choosing and watch the hierarchy to add it to the right component (works best inside a form).


After that you can create the notificationPanel in your java code, be sure to create the variable as global as you need it or pass it on as a parameter, to the parts where you want to use it.

//leave out second parameter if you like to create a panel which uses the additional css class defined in the NotificationPanel class variable
NotificationPanel notificationPanel = new NotificationPanel("notificationPanelId", "notificationpanel_bottom_detail_form");

When all is set up, you can use the panel quite like the standard Wicket FeedbackPanel. Just define your info/warning/error message and, here’s the small difference, instead of just adding the panel to the AjaxRequestTarget, call the refresh method of the panel. Here you go!

error("Random error message!!!");

I hope you’ve enjoyed my first tutorial and I hope I can help somebody, dealing with a similar problem as we have! If you like this post, please consider subscribing to my feed or following me in any other way; see Follow Me! on the right for your choice 😉

I’d be also very happy, if you drop me a line in the comments or contact me any other way, be it for criticism, a simple comment, thanks, suggestions for improvement, or else! Thank you for reading!

Update 10/21/2011: – Refactored the AttributeModifiers, which weren’t part of stock wicket. I tested it in another project with the current code, works now!

CSS Rolling Example with CSS3 and JQuery (Originally on

Recently I did some work with javascript in my job and as I have never worked with it before, right now I’m pretty interested in learning more about the capabilities of it. While doing some research for my work related problem, I stumbled over the awesome blog Queness. On this site you find many design related topics and tutorials for web designers. They really deserve the credit for the post here but as I found some errors in the tutorial and I added some comments to make the javascript part easier to understand, I’d like to provide my own version of their tutorial.

Click to see live demo


  • Download JQuery Easing Plugin (A minified version can be found here)
  • Create files index.html and main.css and put the downloaded/created javascript file (‘jquery.easing.min.js’) into the same folder
  • Optional: If you want to test the example offline, download the JQuery javascript file here, put it in the same folder as the files above and change the script tag in index.html

HTML / Javascript

Most of the action happens in the html page of the example (just copy this to your index.html file, for now use ‘view plain’ and copy code, I’m working on getting ‘copy to clipboard’ to work)

Via the js document ready function the on click behaviour is added to the later defined div containers. For a more detailed description of the javascript actions see the comments.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="
ajax/libs/jquery/1.6.2/jquery.min.js"></script> /* or src="jquery.min.js" */
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
		/* in 500 ms transform rectangle to square with 100px length */
		$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function()
			/* add class circle-label-rotate -> start spinning animation and repeat infinitely */
			/* add class circle -> transform to circle and set background to grey */
			/* write 'Bye' in circle */
			.html('<div class="innertext">Bye</div>')
			/* move circle 510px to the left and fade it out */
			/* move up the rest of the layout and remove placeholder of currently clicked element */
			/* 2.param = easing -> more info:*/

<title>CSS Sliding Example</title>
	<div class='rectangle'> 1</div>
	<div class='rectangle'> 2</div>
	<div class='rectangle'> 3</div>


Copy these css classes to your main.css class.

	border:dashed 1px #000;

	-webkit-animation-name: rotateThis;

@-webkit-keyframes rotateThis 
	from {-webkit-transform:scale(1) rotate(0deg);}
	to {-webkit-transform:scale(1) rotate(360deg);}

	border-radius: 50px; // Chrome & IE9
	-moz-border-radius: 50px; // Firefox
	-webkit-border-radius: 50px; // Safari 

	text-align: center;

Finally just run index.html in your favourite browser and click on the rectangles to see the effect. Thanks for reading and please share any thoughts 🙂

Welcome to

Welcome to wexoo’s organic pixel plant! On this site (sometime soon) you will find Java, Wicket, Android and Web Development snippets, which I personally find worth writing about and I come accross in my job or spare time and eventually info on some software I designed 🙂 Stay tuned!