Tuesday, 30 August 2016

Part 2: Adding the first Instructions

Foreword

In the previous post we have setup the Android Studio development and create a very simple screen for our emulator.

This screen was just an empty shell with no code implement at all behind the buttons.

In this blog we are going to add a bit more meat to our application. In end of this blog our application should be able to execute a very simple 6502 machine language program.

But, before we start coding, I am just going to show how we can run our application on a real Android device, as promised in the previous post.

Running our app on a real Android device

In my previous blog we got our Android application to run within an emulator.

Let us now try to get this application to run on a real Android Device.

The instructions I am going to present will be again for a Linux based operating system.

Before we start, we need to enable adb debugging on the Android Device. On your device go to Settings/About device. One of the items in this screen is Build Number:

Tap this item 7 times. This will make a new menu item visible in the previous screen called Developer Options:





Select this option and on the screen that pops up, ensure that USB debugging is selected:

Next, we need to do some configuration on the Linux side. As a root user, create the following file: /etc/udev/rules.d/51-android.rules

The contents of this file should be as follows:

SUBSYSTEM=="usb",
ATTR{idVendor}=="04e8",
MODE="0666", GROUP="plugdev"

Just a note on the contents. The 04e8 is the USB vendor ID. This application ID is the USB vendor ID for a Samsung device. On the Android developer site is a list of the vendors which you can use to find your particular device.

With this file created, execute the following command, also as a root user:

chmod a+r /etc/udev/rules.d/51-android.rules

Finally, reboot your PC. Your installation of Android Studio will now work with your device.

There is just a small quirk you should be aware of. Start Android Studio with the following steps:
  • Ensure that your Android Device is unplugged
  • Start up Android Studio
  • Ensure that the screen of your android device is unlocked and the display visible (e.g. not in standby mode)
  • Now plug in your Android device
  • After some time there will be a popup on your Android device, showing a finger print value and whether you want to accept the device. Just tap on yes.
  • Within Android studio, your Android device now will be available as an online device.
With the above steps done, you can start the app as in the previous blog. You will just need to select your device instead of an emulator device.Here is a typical screenshot taken from an Android Device:


Adding Instructions

Up to this point in time our Emulator application is only an empty shell. It has buttons, but no code behind it.

In this section we will start to add some meat to our application.

For adding the meat I will follow the same approach as in my Javascript emulator, here. So, we start off by creating a Memory class and a CPU class.

First, we start with the Memory class:

package com.johan.emulator;

/**
 * Created by johan on 2016/08/18.
 */
public class Memory {
    private byte[] mainMem = {(byte) 0xa9, 0x20, (byte)0x85,0x8,0,0,0,0,0,0,0};

    public int readMem(int address) {
      return mainMem[address] & 0xff;
    }

    public void writeMem (int address, int value) {
        mainMem[address] = (byte) (value & 0xff);
    }

    public String getMemDump() {
        String result = "";
        byte[] temp = new byte[48];
        for (int i=0; i < mainMem.length; i++) {
            temp[i] = mainMem[i];
        }

        for (int i = 0; i < temp.length; i++) {
            if ((i % 16) == 0) {
                String numberStr = Integer.toHexString(i);
                numberStr = "0000" + numberStr;
                result = result + "\n" + numberStr.substring(numberStr.length() - 4);
            }
            String number = "0" + Integer.toHexString(temp[i] & 0xff);
            number = number.substring(number.length() - 2);
            result = result + " " + number;
        }
        return result;
    }

}

As seen from the package name, this class lives in the same package as our Android MainActivity class.

Let us go into the details of this class. You will see I have defined an array called mainMem. Within it I have actually defined a very small 6502 machine code program. More on this in a moment.

You will also notice that for some elements within the array I have preceded with (byte). The reason for this is that the byte primitive type in Java is a signed data type limiting the range to -128..127. The hexadecimal values a9 and 85 is outside this range, henge the casting to a byte. Obviously when you inspect the value of these locations, it will be presented as a negative value.

Just to avoid some confusion. To save space, we have defined the memory array as a byte array. Otherwise, when working with the content of a memory location, we work with integers. This is evident in the readMem and writeMem methods.

One thing you will also notice is that when we return the contents of a memory location with readMem we first AND the contents with ff. Reason for this is because of the signed nature of byte.

Finally, the getMemDump return the contents of the memory as a string. We will use this method to populate our Android screen.

Let us zoom into the machine language program stored in the array mainMem. If we convert this program to assembly language, it will look as follows:

LDA #$20
STA $08

It first load the CPU register accumulator with the value $20 and then store this value at memory location.

Of course we haven't implemented CPU functionality yet, so let us create another class callled Cpu:

package com.johan.emulator;

/**
 * Created by johan on 2016/08/18.
 */
public class Cpu {
    private Memory mem;
    private int acc = 0;
    private int xReg = 0;
    private int yReg = 0;
    private int pc = 0;
    private int zeroFlag;
    private int negativeFlag;

    public Cpu(Memory mem) {
        this.mem = mem;
    }

    public void step() {
        int opCode = mem.readMem(pc) & 0xff;
        int address;
        pc++;
        switch (opCode) {
            case 0xa9:
                acc = mem.readMem(pc);
                zeroFlag = (acc == 0) ? 1 : 0;
                negativeFlag = ((acc & 0x80) != 0) ? 1 : 0;
                pc++;
            break;
            case 0x85:
                address = mem.readMem(pc);
                mem.writeMem(address, acc);
                pc++;
            break;
        }
    }
}

This class contain some private variables storing the state of the Cpu. One of these variables, for instance is the Accumulator, which I mentioned just now that our machine code program uses.

The Cpu retrieves the machine code instructions from Main mem, so part of its contructor parameters is the Memory object.

The step method is where all the magic is happening. In effect our step button on the screen should be calling this method. As you can, we currently have implemented only two instructions, opcode A9 and opCode 85.

We will be adding more instructions in comming blog posts.

To keep focussed, I am not going to go into more details on what the step method does. If you wish to get more info please read part 1 of my JavaScript emulator series, here.

Next, we should wire the Cpu class and the Memory class to the Step button. Firstly, we need to we need to create a private variable for both within the MainActivity class:

package com.johan.emulator;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
...
    private Memory mem = new Memory();
    private Cpu myCpu = new Cpu(mem);
...
}

Now we need to define a click event for the step button, also within the MainActivity class:

package com.johan.emulator;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
...
    private void refreshControls() {
        TextView view = (TextView) findViewById(R.id.memoryDump);
        view.setText(mem.getMemDump());

    }

    public void onStepClick(View v) {
        myCpu.step();
        refreshControls();
    }

...
}




The onStepClick method calls the step method on the Cpu class, which executes one Cpu instruction. refreshControls then refresh the visual controls with the new contents of the memory.

Finally we need to assign the onStepClick method to the Step button. We do this within the layout xml file:

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="STEP"
            android:id="@+id/button2"
            android:layout_row="3"
            android:layout_column="0"
            android:onClick="onStepClick" />

The Test Run

With all the code changes let us give our emulator a test run. Currently we don't show the state of the CPU, but we do show the content of the memory after each instruction.

So, if we click the step button twice, we can expect the following output after each step:



In the second screenshot, I have highlighted the change we are expecting when STA executes.

So, we know that our simple machine language instruction works!

This conclude this blog post. I just would like to mention that I made available the source code for this blog on Github here. If you click ch2, you will be able to download the source code as a zip file.

I will try to follow this convention for each of the following blog posts.

In Summary

In this blog we added some meat to our Android emulator application. We ended off with a version capable of running a very simple 6502 program.

We also managed to get the application to run  on a real Android device.

In the next blog we will be exploring the NDK. This is ultimately where we want to head for. The NDK allows you to create a application running on the native instruction set of the physical hardware of your Android device. This will hopefully give us a performance boost.

Till next time!

Wednesday, 24 August 2016

Part 1: Installing Android Studio

Foreword

In this post we will start our journey on creating an C64 emulator that runs in Android.

I will start off providing instructions on how to get the Android development environment, Android Studio, installed.

We will then create our first first screen for our emulator. This will be a mock-up  showing a place holder for the memory dump and a step button.

In this post we will not be implementing any functionality to the buttons as yet.

You will realise that in this post and in the next post or two I will be focussing more on the Android enviroment than on actual C64 functionality. However, as we get the hang of the Android development enviroment, I will be focussing more and more on the C64 functionality.

Installing Android Studio

Before we can do any development, we need to install Android Studio.

Android Studio is available for Windows, Linux and OSX.

However, to keep focussed, I will only be giving installation instructions for Ubuntu Linux.

If you prefer installation instructions for another operating system, don't despair, there is ample resources on the internet available providing installation instructions for the other Operating Systems.

There is just one thing that might potentially be a pain when using the NDK on Windows for Android Studio. When using the NDK on Windows you need to install Cygwin. But, more on the NDK in a later post.

Before we continue, I just want to provide some general tips when installing on Linux:
  • During the installation process, probably a gig or two gets downloaded. So, have a decent Internet connection enabled during the installation.
  • 32-bit vs 64-bit Linux: Many resources on the Internet state that you can install Android Studio on 32-bit Linux. In personal experience, though, I encountered endless brick walls when trying to use Android Studio on 32-bit Linux. 64-bit Linux, however, worked with minimal issues. So, please opt to install Android Studio on a 64-bit Linux flavour.
  • Using 64-bit Linux, you still need to install a couple of 32-bit libraries. Within Ubuntu, you can install these libraries with the following commmand line: sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6

Lets start with the installation process.

First of all, ensure that you have a workable JDK installed, preferably version 1.8. With workable I mean that if if you type java --version on the command line, it will provide you with the jdk version number.

Next, let us download Android Studio. Go to the web page https://developer.android.com/studio/install.html and scroll towards the end. You will see a link for downloading a linux version of the install.

Having downloaded the zip file, unzip it to any folder. Then via a terminal session, change into the extracted folder, and then into the bin folder.

Then, within the bin folder, execute the following command: ./studio.sh

You will be presented with a setup wizard. Follow the prompts to install Android Studio. During the process additional packages will be downloaded, like the Android SDK. So, ensure that an Internet session is enabled during the installation.

Once the wizard, finishes, you will be presented with the welcome screen:


You will be presented with this screen each time that you start Android Studio.

Needless to say, each time to start up Android studio, you will need to issue ./studio.sh. So, it might be worthwhile to create a desktop shortcut for this command.

Creating a New Project

Let us create a new Android Studio project. This will be the beginning of our emulator's life.

On the welcome screen of Android Studio, select Start a new Android Studio project.

On the screen that pops up specify an Application name and a Company Domain. The Company Domain will be the prefix of the package structure.


Click next. On the next screen, the defaults will do:


On the next screen, select Empty Activity:

 

In the final wizard page, we will also leave the defaults selected:


When you click Finish, Android Studio will be busy a number of seconds to create the new project.

When the IDE has finally settled down, your screen will look similar to the following:


This wizard has just cretaed for you a sample Hello World app. To get an idea how the screen of this app is going to look like, expand the res folder and subsequently the layout folder and then double click on activity_main.xml.

With the design tab selected you will see a approxiamtion of how the screen will look like:


It is now time to design the first screen for our emulator. This screen will show the contents of the memory and show a button for single stepping.

First we need to get rid of the Hello World lable. Click on it and just hit delete.

We want to give our screen a terminal like feel, so first we need to change the background to black. Click on the white empty area and then select background in the properties panel. The screen that pops up allows you to choose a color.

Next, we need to add a gridlayout to the screen. The gridlayout will take care of lining up the visual components for us, so we don't need to do a lot of manual fiddling.

So, on the palette menu click on GridLayout and drag it to the RelativeLayout node in the component tree. Your screen will now look something like the following:


Two properties we need to specify for the GridLayout is the rowCount and columnCount. Specify these properties as follows:
  • rowCount: 6
  • columnCount: 2
We now need to add an edit box to the screen in which we will specify the address from which to display the memory contents.

The control we will use for this editbox will be an EditText control. Unfortunatley this component is not available within the pallette menu, so we need to add it manually in xml view.

Click on the Text tab which is next to the Design tab. Now, within the GridLayout tag add the tag <EditText />:


If you now switch back to Design View you will see an outline of the added edit box. A couple of additional properties need to be specified for this control:
  • row: 0
  • column: 0
  • hint: Adress
To be honest, the current look of our EditText component doesn't very interesting. We need to give it a border and some non-black background.

With other IDE environments, you can usually get hold of above mentioned properties quite easy. Within android studio, however, you need to jump through a couple of hoops to apply these properties.

To add these properties, start off by adding  a new file within the folder res/drawable called edittextstyle.xml. Type the following content for this file:

<?xml version="1.0" encoding="utf-8" ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:thickness="0dp"
    android:shape="rectangle">
    <stroke android:width="3dp"
        android:color="#4799E8"/>
    <corners android:radius="5dp" />
    <gradient
        android:startColor="#C8C8C8"
        android:endColor="#FFFFFF"
        android:type="linear"
        android:angle="270"/>
</shape>

Now, go to back to activity_main.xml in xml view and adjust as follows:

<?xml version="1.0" encoding="utf-8"?>
<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="com.johan.c64emulator.MainActivity"
    android:background="#000000">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="6">
      <EditText android:layout_row="0"
          android:layout_column="0"
          android:background="@drawable/edittextstyle"
          android:hint="Address" />
    </GridLayout>


</RelativeLayout>


With these changes, our edit text component looks better:

Next, select the botton component on the pallette menu and drag it next to edit box component. Switch again from design view to xml view and make sure the button properties is as follows:

<?xml version="1.0" encoding="utf-8"?>
<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="com.johan.c64emulator.MainActivity"
    android:background="#000000">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="6">
      <EditText android:layout_row="0"
          android:layout_column="0"
          android:background="@drawable/edittextstyle"
          android:hint="Address" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Refresh Dump"
            android:id="@+id/button"
            android:layout_row="0"
            android:layout_column="1" />
    </GridLayout>


</RelativeLayout>


One thing you might notice is that the button is much higher than the edit control, so lets fix that:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
    <GridLayout
...
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Refresh Dump"
            android:id="@+id/button"
            android:layout_row="0"
            android:minHeight="0dp"
            android:layout_column="1" />
    </GridLayout>


</RelativeLayout>



Next, view should add a component for showing the content of the memory. We do this by selecting the Large Text component from the pallette and dragging it to just under the address edit box.

You might release that this action moves the refresh button away from the edit box. We fix this by setting the layout:columnSpan property of the Large Text component to 2.

Currently our text component is displaying the Text Large Text. However, since we are displaying black text on a black background, we won't see anything. To fix, this let us change the color to green giving us a real terminal look. textColor is the property that will do this for us.

We obviously want something more exciting to display than Large Text. What will be more interesting, would be a a simulated dump of hexadecimal, that is a couple of lines starting with a four digit hexadecimal address, followed by 16 hexadecimal numbers. The design view editor won't allow us to add new lines to the text, so let us do it in xml view:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
    <GridLayout
...
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0000 11 22 33 44 55 ff 11 ee 11 22 33 44 55 ff 11 ee\n0010 ff ff ff 00 11 ff ff ff 00 11 11 ff ff ff 00 11"
            android:id="@+id/textView"
            android:layout_row="4"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:textColor="#00ff00" />
    </GridLayout>


</RelativeLayout>


This results into the following:


The Font we use is too big, so each hex line wraps to the next line. We fix this by setting the textSize property to 12dp:


Almost there, but not quite. The hex numbers doesn't align that well. We need to apply a monospace font. You do this by selecting monospace within the property typeface.

This time, everything looks better:


We are almost finished with our form layout. Just need to add one more button at the bottom of the hex view called 'STEP'.

Running our application

It is finally time for us to try and run our application.

It would be nice if we could run it directly on a mobile device. This would require some additional setup, which we will cover in the next post.

For now, we will invoke our application with one of the emulators of Android Studio.

In the top bar hit the play button. You will be provided with the following screen:


If it is a fresh installation of Android studio, the list will probably be empty. In that case click the Create New Emulator button and follow the steps of the wizard. This might involved a download to install the applicable emulator.

After the wizard, you will see an emualtor in the list of emulators, as in the screenshot above.

Click the emulator and then OK. Android Studio will then be busy for a couple of minutes, till an android emulator window opening up eventually simulating an Android starting up. Once started up,our application will show up:


We have just ran our first Android application!

In Summary

In this post we covered the installation of Android Studio.

We also created our first mock screen for our emulator and started it within an Android emulator.

In the next post we will be starting this application an a real Android device.

We will also be implementing two 6502 instructions in our emulator, and give it a spin with a small test program.

Till next time!

Tuesday, 23 August 2016

Introduction

Foreword

In a previous series of Blog posts, here, I detailed the writing of an Commodore 64 emulator in JavaScript, from scratch.

With the resulting emulator, I could run the classic game Dan Dare, at almost full frame rate on a desktop PC.

When I tried to run this JavaScript Emulator on a mobile browser, however, I wasn't so lucky. On a mobile browser, I got about a tenth of the expected frame rate. I tried a couple of things to try and improve the situation, but everything ended up fruitless.

This brickwall inspired the following challenge for me: Writing an emulator that runs at full speed on a mobile device. In the coming set of blog posts, I will be tackling this challenge.

In this series of blog posts, I will be limiting myself to the Android mobile operating system. So, in effect I will be developing an Android application.

Approach


In the coming series of blog posts, I will be following the same approach as I did in my series on writing a JavaScript emulator from scratch. This, following an incremental approach, adding functionality as needed, bit by bit.

The first screen we will be developing in Android, will be one that shows the contents of the memory and registers, so at least we can verify that the instructions we implement bit by bit are functioning as desired.

Early in this series I will try and utilise the Android NDK (Native Development Kit) for potential performance improvements.

During the course of these posts, I will also be utilising the test assembly programs I wrote in my JavaScript emulator series.

In Summary

In this post I gave a short summary on what the coming posts will be about. We will attempt to create an Android emulator that will run at full frame rate.

In the next post, we will install Android Studio and create a screen that will used to show the contents of the memory and registers during execution.

Till next time!