Gyroscope / Running Sample Projects
The previous chapter describes the user interface in abstract terms because
Gyroscope is a versatile visualization layer that applies to many industries.
A sample application helps put the abstract concepts in context.
The standard Gyroscope package comes with two code bases: "template" and
The template project is the bare minimum starting point. This folder is
usually copied as the initial deployment of a new Gyroscope project.
The sample project demonstrates the components of a property management
Each project folder contains a data subfolder, where a SQL dump file can be
found and imported. The connection string is defined in connect.php
Files in htdocs
can be directly copied to web folders. For example, to enable
Gyroscope for a website that's hosted in C:\Apache2\htdocs\helloworld, copy
the files to C:\Apache2\htdocs\helloworld\admin; then the site can be
accessed through http://localhost/helloworld/admin/.
A public demo is hosted at:
The default login is admin, and the password is demo
Set up the demo app in the sample
folder. Once signed in, click on each of
the icons on the top left. The sample app is based on a rental property
database where there's a collection of tenants, landlords, properties and
In database terms, landlord-property is a one-to-many (1-n) relationship. A
landlord can have multiple properties. This is implemented by having a
Landlord ID in the Properties table. This ID is called a "foreign key".
The relationship between tenants and properties are many-to-many (n-n). A
property could be occupied by multiple tenants, and a tenant could be renting
multiple places, although realistically not all at the same time.
Many-to-many relations are implemented with a "bridging table". In this
example, the Leases table bridges Tenants and Properties on two foreign
keys: Tenant ID and Property ID. In addition, the Leases table contains
additional fields such as the lease start and end date, rent amount, etc.
Clicking on the menu icons displays the records of each entity, i.e. list of
tenants, properties, landlords and leases. Click on a landlord record to see the
details in a tab.
The first section in the landlord view has information that's directly stored in
the Landlords table. The "Property Ownership" section lists out all the
properties that are owned by this landlord. Clicking on a property record will
pivot from the landlord view to the property view.
Record pivoting is a signature feature in Gyroscope.
The property view has a list of leases - another one-to-many relationship.
New leases can be created by clicking on the "add lease" button. Note how
the property and landlord information is carried over to the lease.
Click on the "start" field in the new lease tab. A calendar shows on the left.
Enter "2012" to switch the calendar to 2012. Enter "2010 7" to flip the
calendar to July, 2012. Click on a date on the calendar and observe how the
date is inserted in the form field.
Once a lease is created, tenants can be attached to the lease. You may want to
create a few tenant records first. Note how a list of cities shows up when the
city field in the new tenant form is in focus. The cities are populated from
existing tenant and landlord records. As you type in the field, the city list will
refine its result.
When the database has a few tenant records, you can attach them to a lease.
The tenant lookup works similarly to the city- or calendar lookup. However,
this is more than just inserting a text string. Clicking on the lookup result also
attaches the identity of the record to the form field.
Another common type of lookup is the search filter inside the left panel.
Click on the Leases menu icon. Start typing in the first few letters of a
landlord's name and see how the record list is filtered.
Now open a lease in a tab; then view the record of a tenant that's associated
to this lease in a different tab. Take note of the lease start date in the Leases
section in the tenant view. Go to the lease view and modify the end date of
the lease. Save the changes. Go to the tenant tab and see how the u pdate is
already reflected in the view.
By now, you've seen the core UI features of a Gyroscope application:
pivoting relational navigation with tabs, context-aware auto complete and tab