Homemade DIY Mini Arcade (version 2)

Mini Arcade (version 2) 

First copy hot off the assembly line (I would go on to build 6 of them)

Mini Arcade (version 2) in action!

Christmas gifts ready to be shipped out (Dec 2014)

I've had a lot of fun building version 2 (version 1) of the mini-arcade series. It required combining a number of different skill sets..electronics, woodworking and design skills all come into play. During November and December of 2014 I built 4 of them for Christmas gifts and worked with my two daughters who each built one to give as gifts for a total of 6 builds.

My main goals for the second version were to reduce the cost and time to build by at least 50%. I believe I achieved these goals as this version comes in at around $50 (parts costs) which is 1/2 of the cost of my first mini-arcade. And I estimate that the time to build has been reduced from about 25 hours down to under 10. If you'd like to try building one for yourself, the plans and parts list are linked at the end of this article.

Additionally this version contains 10 games, 5 more then the first version.  I start with a Jakks Namco Arcade Classics plug and play Joystick video game box. 



They can be purchased on Ebay for around $15. This provides the joystick, buttons and video game portion of the mini-arcade which is the main reason the parts costs are able to be kept down under $50. When building version 1 I bought a pro-style joystick and arcade buttons which added to the cost and wiring it up was time consuming.



Initially I started with the same video game electronics from version 1 and built a prototype box out of cardboard to test fit everything. Once I was happy with the dimensions and sure everything would fit I started cutting out the wood for the arcade machine box. I used 1/4 inch plywood which I was able to find in 12" by 24" sizes at my local Ace hardware store. I used about one and a half sheets per arcade. Around about this time I found the 10 game Jakks Namco joystick and switched to using it going forward with the project.

 I would have loved to have the parts professionally cut out of plastic using a flat bed cutter but I decided to keep the costs down and simply use wood. Around about this time word putty and I became good friends. 

When I built version 1 it was a labor of love since I was building only one for myself. This time however I was building 6 of them so, lets just say lots of wood putty, sanding and paint can hide a lot of mistakes!

Initially I just placed the joystick on the bottom wood platform mainly to keep costs down but later on decided to build this encasement around it which I thought made things look much more like a real arcade machine. I basically take the joystick apart and discard the bottom. This also let me separate out the plate that houses the coin reset button and on/off switch into this casement. I later was able to electrically tap into the on/off switch so that this one switch controls the power to the video screen and audio amplifier in addition to the powering the video game.

After struggling to build a few of these encasements,I realized that I could cut them from one piece of wood and then score them on both sides of the plywood and gently bend them around into a half circle which took a lot less time and provided a much better fit.

 

The joystick operates on 6 volts (4 AA batteries). I decided then to look for a video screen and audio amplifier that could also work with this voltage so I could power it all with an inexpensive 6 volt adapter which I was able to find on Amazon for $3.99. I experimented a little with a 5 volt phone power bank which is used to recharge cell phones on the go. There are many of these available on Amazon and they are surprisingly inexpensive. The cool thing about them is that you can easily use them to make the mini-arcade portable. However I struggled a bit because the voltage isn't quite high enough when powering all 3 items (video game, video screen and audio amplifier) I actually got 2 of the mini-arcades to work in this way which is cool. They are completely portable and you simply recharge the power bank which provides about 5000 mah, enough power to operate it for many hours.

I needed a small audio amplifier which would run on 5-6 volts which I found at SparkFun for $7.95. You can wire up a potentiometer in order to adjust the volume, however since it only puts out 1.4 watts into an 8 ohm speaker I found that I could eliminate the volume control as the sound level was just about right. Every little bit helps when you're trying to keep costs down.

I decided to give them all one coat of primer, two coats of flat black and final coat of clear. I found inexpensive paint at Ace hardware for $3.99 a can. This is probably overkill. You could probably get by with just a few coats of paint especially if you sand in between coats with a fine grain sandpaper (220 perhaps).

I found these little one inch 8 ohm speakers on Amazon for $1.00 each. What a bargain!

As I mentioned earlier I was able to wire in power going into and out of the Joystick to take advantage of the on/off switch. So basically the 6 volt power adapter simply powers the joystick and then I tap off the switched ground and plus power to power the video screen and audio amplifier. To simplify all the wiring I use RCA plugs for the video and audio. Also I use dc power plugs for power. So it all comes together easily by simply plugging in all the appropriate plugs when everything is ready. And the advantage of using simple plugs like this is if you do have problems you can easily mix and match parts, especially in my case where I was building 6 of them and when something didn't work quite right I could easily swap out parts to identify what was broken.

Ready for the decals. This step can be a lot of fun as it involves a little design. Choosing which decals to place and where.

Google images is a great source for decals. Basically many of the original arcade machine design images can be found there. 

Finished Mini Arcade (version 2)

P.S. I'm now hard at work on version 3 which will utilize Emulation Station and RetroPie running on a Raspberry PI within the same size arcade machine box. The parts cost will go up slightly but I hope to keep it under $75. With Emulation Station and RetroPie I'll be able to emulate 1000's of games, basically any video game made from the 1970's through around 2000. Of course I'll first see if I can get any of the games I wrote for the Apple II running. I'm searching out the best joystick to use since I'll be emulating a number of different games which originally ran on many different joysticks.

Links 

Video screen- Amazon
Audio Amplifier- SparkFun
Jakks Namco Video game- Ebay
6 volt adapter- Amazon
Power plugs (male)- Amazon
Power plugs (female)- Amazon
Power jack socket- Amazon

Plans

OOP Concepts using C#

In this screencast we'll focus on Object Oriented Programming. Specifically we'll discuss the three pillars of OOP.

• Encapsulation
• Inheritance
• Polymorphism

We'll take a look at a poorly written C# application without any abstractions or encapsulation whatsoever. We'll discuss ways in which the application can be improved through the use of interfaces and delegation to achieve code reuse and flexibility.

Download the project code here.

Microsoft .Net Events and Delegates

In this screencast we'll talk Microsoft .Net delegates as the basis for how events work. We'll then talk about events specifically covering raising events and subscribing to them. Then we'll finish up with simplifying our event handler creation process by utilizing the power of Lambda statements.

Download the project code here.

WCF DataServices - Exposing an EF Data Model

In this screencast we'll talk about how you can use WCF Data Services to expose an Entity Framework data model via a REST service.

Download the project code here.

Entity Framework - Code First

In this screencast we'll talk about the Microsoft Entity Framework and specifically use the "Code First" approach. 

We'll create a simple client application along with a class we wish to persist using the Entity Framework. We'll have it then create a data schema based on the simple POCO class we create. Finally we'll create a DBContext and run queries against it.

Download the project code here.

Entity Framework - Database First

In this screencast we'll talk about the Microsoft Entity Framework and specifically use the "Database First" approach. 

We'll identify what it is, then import an existing database into the Entity Framework, spend some time with the Entity Data Modeler and create a DBContext and run queries against it.  

Download the project code here.

Using LINQ to query XML

In this screencast we'll talk about the Microsoft .NET component called Language Integrated Query (LINQ)

We'll specifically discuss how LINQ can be used to query XML.

Download the project code here.

Introduction to Microsoft LINQ

In this screencast we'll talk about the Microsoft .NET component called Language Integrated Query (LINQ)

We'll discuss some of the features that the System.LINQ namespace makes available to the ASP.NET programmer today. We'll look specifically at Comprehension Queries and also briefly discuss Extension Methods.

Download the project code here.

Create and access an Azure SQL Database

In this screencast we'll create an Azure SQL database and connect to it via ADO.NET using a DataReader.

This main focus here is to show you how to create a database in Azure and how you can manage it much in the same way you would manage a SQL database on premise.

We'll create the database, a server to host it, configure the IP addresses allowed to connect to it, then in SQL management studio we'll run a script to create some tables and populate them with some data. Then we'll create a simple console application which uses ADO.NET DataReader to retrieve data from the database.

In subsequent screen-casts we'll access the database using in other ways, such as LINQ to SQL and the Entity Framework which will allow us to compare and contrast some of the new different data access capabilities we have available to us today.

Download the project code here.

ASP.NET MVC 4 Hello World Application

In this screencast we'll create a simple Hello World application using the Microsoft MVC 4 framework. We'll discuss some of the merits of MVC and finish up talking about unit testing.

Part 1- Creating the "Hello World" app.

Part 2- Dissecting the "Hello World" app.

Jochumson.com Web Site Launched!

http://www.jochumson.com

February 2014
Web site launched in order to showcase my various web development skills as well as provide a launchpad for my blog, various web demos and screencasts.

Features:

• Fully responsive design
• Looks great on phone, tablet, medium and large screens
• Flat and simple design
• Retina display support
• Web site design- Malosanu

Tech:

• Bootstrap
• jQuery
• Mixitup
• Fastclick
• Smooth Scroll
• Less Prefixe

Browser Support:

• Firefox 5+
• Google Chrome 14+
• Internet Explorer 8+
• Opera 11
• Safari 5

HTML Geolocation API

Make your applications smarter by leveraging the power of the Geolocation API!

The Geolocation API is used to determine a user's geographical position. Since this can compromise a user's privacy they must give permission before your HTML application can gain access to a users location information.

Here's how Google's Chrome browser presents the Geolocation permission dialog.

Once the user has allowed it, the application can then make one of two different calls into the Geolocation API. The API will call back into your application when the position information is available.

• navigator.geolocation.getCurrentPosition(showPosition,showError)

• Produces a one time callback providing location information 

• navigator.geolocation.watchPosition(showPosition,showError)

• Produces continual callbacks as the users location changes

The video (above) starts with a slide deck introducing some of the key concepts, then it demonstrates the Geolocation capability within the browser and finally shows the JavaScript code.

Here's a link to the demo page where you can test it yourself and download the code if you like.

This is Part1 of a series of articles showcasing some of the new HTML5 application features. Follow-on articles will cover the App Cache which allows your applications to run offline, as well as Web Storage (local and session), an expansion on the cookie storage concept and finally I'll cover Web Workers which allow you to spin up separate threads in the browser to do work in the background freeing up the UI thread, making your applications much more responsive when doing real work.

I'm including the slide deck separately here in case you would like to go through it on your own.

REST using Microsoft's ASP.NET Web API

Today we'll be talking about REST and how using it can make your HTML applications more responsive.

First a little background about what REST is. REST stands for REpresentational State Transfer. It's basically a software architecture style for exposing server based resources.

• Uses HTTP methods (verbs) explicitly- GET, POST, PUT, DELETE
• It's stateless.
• It exposes directory structure-like URIs.
• Returns XML, JavaScript Object Notation (JSON), or both.

A typical REST call looks like this:

http://example.com/customer/34456

This URI represents a request for information about a customer with Id 34456.

In our screencast we'll be creating a RESTful application leveraging Microsoft's ASP.NET Web API. ASP.NET Web API is a Microsoft framework that makes it easy to build HTTP services that support a broad range of clients, including browsers and mobile devices.

Our HTML application will utilize JQuery's Ajax capabilities to request data from the server (in our case widget data) and place it into the page without forcing a full page refresh. This type of responsive UI is becoming common place today and is expected from users.

I hope you enjoy the screencast. I plan to do more projects in the future utilizing ASP.NET's Web API.

Here's a link to download the code.

3D in the Browser- using Three.js (Part 1)

I've been using Three.js for the past year couple of years now. Running your creations directly in the browser using JavaScript makes things very easy. Three.js abstracts away a lot of the mundane chores that usually makes 3D development time consuming. 

You might wonder if JavaScript would slow things down too much to be usable. The reality is that the Graphics Processing Unit (GPU) that's on board most computers today has incredible power and ends up doing 99% of the work. You can verify this by running any of the Three.js examples and checking your CPU performance. For instance, in the WebGL example below, I'm only utilizing 12% of the CPU. It's randomly drawing 2000 pieces of pasta and barely stressing the processor. (I also had a number of applications running and 5-6 browser windows open at the time, any of which could have been taking lots of processor cycles.)

http://alteredqualia.com/three/examples/webgl_pasta.html

Here's the screencast..part 1 one of an ongoing series I'm producing which demonstrates the incredible capabilities of Three.js. I hope you enjoy the series and find the time to try Three.js yourself. Note: Visit Threejs.org to learn more.

Three.js Examples

http://threejs.org/examples

ChromeExperiments

http://www.chromeexperiments.com/

Simple Data Binding (JQuery versus AngularJS)

I've been using AngularJS this past year and I'm impressed with it's capabilities. Here are some of the reasons why.

Data Binding:

I'm finding that the two-way data binding capabilities of AngularJS are saving me considerable amounts of coding time.  By eliminating lots of mundane "boilerplate" coding, I can focus on the specific application logic of the feature I'm developing.

Templates and Directives:

These extend what you can do in HTML so you're basically describing how the model should be projected into the view. When Angular compiles, it uses these rendering instructions called directives to set up the data binding in your application. And you can create your own..which lets you easily create custom components which are described simply within the HTML markup.

MVC:

AngularJS basically uses the MVC design pattern which promotes separation of concerns. Actually it's more like the Model-View-ViewModel pattern popularized by Microsoft.

Dependency Injection:

AngularJS has a dependency injection subsystem which reduces the chances that refactoring will cause code breakage. This allows your code to ask for it's dependencies instead of defining them. This abstraction allows those dependencies to be injected into the underlying code therefore making them easier to change without the risk of code breakage.

Data Binding Example:

Here's an extremely simple example of data binding AngularJS. First though we'll look at how this same data binding would be done in plain old JavaScript, JQuery and then finally we'll see how much simpler it gets done in AngularJS.

Homemade Mini-Arcade

This was an interesting project which required a number of different skills. I started with a Jakks Namco 5 In 1 Arcade Classics joystick which I found used on Ebay for $13.

These battery operated video game boxes were popular years ago. You plugged them directly into your T.V. via RCA jacks. They typically offered a few of the most popular video games from the 80's and 90's, Pacman being the most often featured game.

This provided me with the heart of the arcade machine... the buttons, joystick and video game capabilities. I couldn't find any templates for small video game cabinets so I ended up just sketching out my own cabinet design on poster paper and building a paper mock-up. This allowed me to confirm the sizing prior to starting the cabinet build. It was important to confirm that the monitor and controls would fit comfortably. I used a small 3.5 watt component audio amplifier ($8) which i found online. This turned out to be way too much power. A 1/2 watt amplifier would have been fine. I used a 4 inch video screen I found on Amazon new for $19. I was able to find lots of video cabinet art on google images and I printed them out using sticker printer paper. I opted to replace the buttons that came with the joystick and instead bought coin-op cabinet buttons for $3 on ebay.

All in all this project was lots of fun and most people that see it want one. Unfortunately it takes more than 10 hours to build one and due to the copyright issues trying to sell something like this commercially would be problematic. I do think we'll see more of these types of mashups in the future. If I build another one I'll probably use Raspberry Pi and M.A.M.E which would allow me to run any video game through emulation, even the old Apple II arcade games I wrote years ago.

Here's a video of the finished project.

Animals, Avatars and ASR

Here's a prototype I created last year which combines three technologies I'm interested in. Automatic Speech Recognition (ASR), Avatars and Computer Intelligence. To recognize speech, I used SRI International's EduSpeak Speech Recognition Technology. This version ran locally within Windows and was scriptable in the browser using Javascript. I've since worked with a team at GlobalEnglish which adapted this Speech Recognizer technology to run on the server and therefore didn't require a client install. We use Adobe Flash to record and stream the audio to the server where the recognition takes before returning the recognized speech text to the browser.

I used Avatar technology from SitePal. It's interesting to see people's reaction to this Avatar technology. Some people think it's very cool and others see it as "creepy", also known as the "uncanny valley" hypothesis. The uncanny valley hypothesis, in the field of human aesthetics, holds that when human features look and move almost, but not exactly, like natural human beings, it causes a response of revulsion among human observers.

I suspect that the human race over time and while subjected to more and more "avatars", robots', etc will eventually lose this aversion. Especially as human enhancement technologies become more widely adopted and the line between human and robot becomes blurred.

As for the logic of guessing which animal you are thinking about, I "borrowed" the logic from the website http://www.animalgame.com/ for this. I didn't hack into the site or copy their code or anything like that. I simply set up a little bit of server code to submit requests and "screen scrape" from their website the data I needed. This site didn't offer an api which would have let me more formally leverage their technology and I certainly wouldn't have done this for any production feature. However since this was simply a demonstration project, it seemed like a viable alternative to spending the time creating the game logic from scratch. And I figured that if this prototype ever moved into the production phase it would then be time to buy or develop a proprietary version of Animals.

I originally came across this "guess the animal" game in the 1980's when it was widely available for the early personal computers and typically written in basic. It especially intrigued me because it was my first encounter with Artificial Intelligence running on a personal computer. And provided the information it was given was accurate, it was capable of learning. Over time the program would progress to the point where it could guess any animal you were thinking about.

Unfortunately this prototype didn't support a continuous speech recognition capability. Therefore I had to click a button when I wanted to speak. Of course being able to simply speak to the avatar as you would any human would have been the most natural way to interact with it. 

One of the things I've learned while working with Speech Recognition over the years is the importance of good Speech Recognition UI. You've got to constrain the context such that the user knows the range of responses that are expected. To many, "I'm sorry, I didn't get that" responses can kill any great ASR project.

I look forward to creating more prototypes utilizing these technologies. Actually I have more prototypes to show and will write about them in future posts.

If you're interested in collaborating on a future prototype drop me a line.

Check out this new Text To Sing avatar page at SitePal. Wild!

Running Windows 7 inside Windows 7

Often these days installing shareware is a gamble. You're gambling that a piece of malware won't find it's way onto your system in the process. One reason I've found for this is that shareware authors are increasingly turning to these "piggyback" installs as a way to cover their development costs. The sad fact is that so few of us are paying for their software.

I'm not without fault myself as I don't typically pay for shareware unless it's something I end up using regularly and my built-in "guilt trip" mechanism takes over . If I use something one time or am just testing it out I'm not usually in a rush to click the donate button.

Lately, in order to mitigate the risk inherent in testing out shareware, I've start using virtualization in order to test out software before hand. If it passes the test, I'll then consider installing it on my main laptop. Before installing the application, I'll do a quick google search to see if there's any discussion about the particular software being a malware threat. Assuming it passes that test I'll open up a virtual machine (VM), I'll take a file and registry snapshot, install the software, then take a quick look at what's been installed.  Later, after I've taken it around the block a few times and am convinced it's safe, I'll add it to my main development machine. Because I've installed it into a virtual machine, I can simply roll back (undo) the changes made to the VM. There are lots of options when it comes to virtual machines. On the Windows side, Microsoft makes Virtual PC available for free. Also Windows 7 ships with a free copy of Windows XP (for backwards compatibility) so you don't to pay to activate another copy of the OS.

Here's a link to instructions for installing Windows 7 into an existing Windows 7 laptop.

So I'm effectively running Windows 7 inside Windows 7. Due to the ease of backing up a virtual machine (you basically copy a few files) I've often considered the idea of building out a laptop which had no applications other then Virtual PC on it. You can have Virtual PC run at start up and take over the full screen so in this scenario you really don't realize you are even running in a virtual environment. And with the hardware-assisted virtualization (HAV) built into most new pc's today, there's very little speed penalty. Should the OS ever get infected or become a victim of malware it's so very easy to simply undo the changes that affected it in the first place. Backing up the entire VM is really as easy as copying a few files.

Happy Virtualization!

Chris