Internet of Things and Hardware Hacking (Part 2) -A Web Controlled Gameboy Console

Posted by: mistan

Preamable

After the success of the first project, RLM decided to hack into one of his childhood treasure -Gameboy Console.

The task of this project is to: 1) reverse engineer and hack Gameboy in order to control it with Arduino, 2) and remotely play it from web.

The Soldering and the Arduino Sketch Code

The Soldering

The biggest challenge is to reverse engineer the buttons of Gameboy and figure out a way to control them using Arduino. It turned out easier than what we visioned. There are four touch pads under each button, two high in voltage and two in low stage. Every time a button was pressed, the corresponding command was trigger by short-circuit the high-state pads. So all we need to do is to connect the high-state pad to a Arduino Pin and activate the button by switching it from High to Low.

The next challenge is to solder those tiny pads to a wire and hook it up to Arduino. A used hard drive ribbon and some hot glue served the purpose well. Following is the final setup.

The Arduino Sketch Code

//// Arduino -> GameBoy Pin Map

// 53 -> 1 -> B

// 52 -> 5 -> Select

// 51 -> 2 -> Up

// 50 -> 6 -> Down

// 49 -> 3 -> A

// 48 -> 7 -> Start

// 47 -> 4 -> Right

// 46 -> 8 -> Left

static int button_pin_START = 46;

static int button_pin_END = 53;

static int button_A = 52;

static int button_B = 53;

static int button_START = 50;

static int button_SELECT = 51;

static int button_UP = 49;

static int button_DOWN = 47;

static int button_RIGHT = 48;

static int button_LEFT = 46;

void init_button_pins(){

for(int i=button_pin_START; i<=button_pin_END; i++){

pinMode(i, OUTPUT);

// We use low voltage to "press" a gameboy button.

digitalWrite(i, HIGH);

}

// Opens serial port, sets data rate to 9600 bits per second.

Serial.begin(9600);

}

void press_button(int button_code){

digitalWrite(button_code, LOW);

delay(10);

digitalWrite(button_code, HIGH);

}

int incomingByte = 0; // for incoming serial data

void serial_press_query(){

// read from the serial port and directly press the button which

// corresponds to the byte. Input bits MUST be one of the defined

// button codes. No error checking is performed.

if (Serial.available() > 0) {

incomingByte = Serial.read();

press_button((int)incomingByte);

}

void setup() {init_button_pins();}

void loop() {serial_press_query();}

Python CGI -The Gateway between Arduino and Web Interface

Following Python CGI code is used to communicate with Arduino. Note: RLM use perl CGI to call python scripts. I am using a Pyhton CGI for shortcut.

#!/usr/bin/env python

import sys

import serial

import os

import time

import cgi

fs = cgi.FieldStorage()

btn = fs.getvalue("button_name")

# this needs to be printed first before anything else, or will gets malformed header and internal 500 errors

# not needed when called from perl NOT as a CGI script

print("Content-Type: text/html\n")

print('btn is:', btn)

ser = serial.Serial('/dev/ttyACM0', 9600)

time.sleep(1.5) # time needed for arduino reset

# print(sys.argv[1])

# button_code = int(sys.argv[1])

button_codes = {"A" : 52, "B" : 53,"S" : 50, "s" : 51, "u" : 49, "d" : 47, "r" : 48, "l" : 46}

button_code = button_codes[btn]

valid_button_code_START = 46

valid_button_code_END = 53

print('button_code is:',button_code)

if (46 <= button_code <= 53):

ser.write(str(chr(button_code)).encode())

# print('sys.argv[0] is:',sys.argv[0])

# print('sys.argv[1] is:',sys.argv[1])

else:

print("invalid code (need [46,53]):", button_code)

os.strerror(5)

Javascript for HTML and Paython Binding

Following jQuery javascript binds the interface elements to python CGI, and also jquery.hotkeys-0.7.9.min.js is needed for key stroke binding.

function key_press(button_name){

return function (){

$.post( "http://localhost/cgi-bin/python/serial-send-gameboy-cgi.py",

{button_name: button_name});

}}

function click_binding(id, button_name){

/* Enable an html element to control the gameboy via a keypress */

$(id).click(key_press(button_name));

}

function keyboard_binding(key_name, button_name){

$(document).bind('keydown', key_name, key_press(button_name));

}

/* establish controls for the gameboy, both on-screen and keyboard */

function bind_gb_button(div_name, key_name, button_name){

click_binding(div_name, button_name);

keyboard_binding(key_name, button_name);

}

$(document).ready(function(){

bind_gb_button("#right", 'right', "r");

bind_gb_button("#left", 'left', "l");

bind_gb_button("#up",'up', "u");

bind_gb_button("#down",'down', "d");

bind_gb_button("#start", 'space', "S");

bind_gb_button("#select",'enter', "s");

bind_gb_button("#a", 'z', "A");

bind_gb_button("#b", 'x', "B");

});

Website Interface

I tranformed both pages into bootstrap framework.

Simple Web Interface with 6 Buttons

<!DOCTYPE html>

<head>

<title>Arduino connectivity test</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.center-block

{float: none !important

display: block;

margin-left: auto;

margin-right: auto;

text-align: center; //required to center

}

</style>

</head>

<body>

<h1>Gameboy Console</h1>

</div>

</div>

</div>

</div>

</div>

<div class="button btn btn-danger col-sm-1 col-sm-push-5" id="start" data-toggle="tooltip" data-placement="right" title="click or press SPACE">START</div>

<div class="button btn btn-primary col-sm-1 col-sm-push-6" id="select" data-toggle="tooltip" data-placement="right" title="click or press Enter">SELECT</div>

</div>

</body>

</html>

Using a Gameboy Image Web GUI Interface

I went one step further, use a real image as following and slice it into image maps. Use mouse to click on the console to play and the key stroke bindings are the same.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

<html>

<head>

<title>Game_Boy_Color_Pokémon</title>

<style>

html, body {

height: 100%;

}

html {

display: table;

margin: auto;

}

body {

display: table-cell;

vertical-align: middle;

}

*:focus {

outline: none;

}

</style>

$(document).ready(function(){

$(".btn").click(function() {

$(this).find('img').stop().fadeTo(100,0.8).delay(10).fadeTo(100,1);

});

</script>

</head>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

</div>

</td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

</div>

</td>

</div>

</td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</body>

</html>

3
DEC

Blog