Layout for Skyboat application

This document goes over the layout of the Skyboat. Here you will find general information on how to use the application as well.

Overall Layout

Skyboat was developed with a mobile design layout first. So the application will work and run on a mobile device with only a few minor layout issues. The first image below is the full screen view of the application.

This is what the Skyboat looks like on a monitor in full screen.

Next will will look at how the page shifts and adjusts itself to address small screens.

This is what the Skyboat looks like on only half a monitor screen.

Navigation Bar

At the top of the page you will find the navigation bar. The navigation bar will stay at the top of the page at all times for easy access to it's contents.

This is the navigation bar when in full screen mode. From left to right you can see the Skyboat branding name with logo, then a "Documentation" dropdown link, in the middle you will find the application controls, and lastly the website branding with Skyboat.

When the screen becomes small enough, some of the navbar items will shift and change to better fit a small screen.

Image of the navbar of application at half screen width

This is the navigation bar when viewing the page on a smaller screen width. Only the Skyboat branding name with logo and the application controls are still present. A hamburger menu is now present to gain access to the "Documentation" dropdown link and the website branding with Skyboat.

The links and info is not missing, it is just hidding under the hamburger menu. Click on it to show the contents of the menu.

Image of the navbar of application at full screen widht fully extended

After you click on the hamburger menu on the right side of the page, the missing contents of the navbar are presented.

Documents Menu

A small list of documents and other links are provided for your convenience here.

Here is a look at the document dropdown menu when clicked.

Run Skyboat

This link will take you to the Skyboat application.

Instruction Set

This link will take you to the Skyboat instruction set. Its a list of assembly type code that is translated into opcodes.

Skyboat Layout

This link take you to this page. This page talks about the layout of the Skyboat application.

Video Overview

This link will take you to a page where a video will talk about the code and the Skyboat application.

About Skyboat

This link will take you to a page with random about information for Skyboat. What webpage/application does not have an about page?!?!?

Skyboat Controls

The Skyboat application comes with a small set of controls to interact with the code and page.

Image of the controls on the application

This is the controls that you will find in the navbar at the top of the page.

Compile

This button will take the pseudo-assembly code that is in the Editor window and convert it into opcode in the Code window.

Run

This button will start the application and run it until it reaches the end of execution, if you didn't code up an infinite loop.

Step Through

This button will step one line at a time through your code.

Reset

This button will reset the application to the initial start point. If the application is running, the application will still run, but just started at the beginning.

Pause

This button will pause the application when it is running. Once paused, you can step through the code if you like.

Editor Window

A simple editor text area window is provided to input and edit your pseudo-assembly code for the application to read.

A screen shot of the Editor Window with some code in it.

Code Window

The code window is only populated after you have clicked on the compile button. Once the code has been compiled, the table is populated with information about the code. First is the text line number where the code was found. Next is the opcode full instruction set. Third is just the opcode value. Finally the source code line for reference.

Here is the code window with the code from the editor window already compiled.

Registers Window

A registers window area is provided to keep track of the register values that are used in the application. The application is setup and designed to have a 63 registers that the user can use and access. Register 0 is reserved for system use (not used at this time) and is not available to the user. The user has access to 1-63. Registers are all treated the same. They are 32 bits and the user can use them in anyway they like to. The user will need to be careful to use the registers appropriately. They might store a float value into a register, then try to use it as an int. Float and Int bit layout are different and will return different results. Float bit order and format is based on teh IEEE-754-1985 standards. The register window comes with 6 tabs.
B is for Binary (default tab).
I is for signed integer.
U is for unsigned integer.
D is for decimal (float value).
H is for hex.
A is for ASCII.
These tabs will show the registers window with the values in that format.
When the application is running, The register window will highlight the last register to be updated and scroll the window to that section of the register so that the latest change is always visible at all times.

Here is the register window in the initial default state.

Memory Window

A memory window area is provided to keep track of the memory values as they are used during execution. The memory window comes with 4 tabs.
Binary to show the memory as binary values.
Integer to show the memory as integer values.
Hex to show the memory as hex values.
ASCII to show the memory as ASCII values.
Like the Registers Window, the Memroy window will highlight the last memory location that was updated. The window will also scroll to always keep the lates value update in view at all times.

Here is the memory window in the initial default state.

Output Window

An output window is provided. It does nothing at this time.

The output window that truly does nothing.