This tutorial explains how to create a simple phonebook with a search function which will look similar to this:

The following things will be covered by this tutorial:

• creating a window with a drawer
• feeding a NSTableView with an NSArrayController
• search in the table using NSPredicate to filter the array

Getting Started

Creating the Interface

Start by – this should come as no surprise to you – creating a new Cocoa project and open the MainMenu.xib in IB. Remove the Window from the Document Window and instead drag in a “Window and Drawer” (Library->Cocoa->Application->Windows).

Click the new window twice to open it and drag a Toolbar(Library->Cocoa->Application->Toolbars) onto it.  In Library->Cocoa->Views & Cells->Inputs & Values which you can add to the toolbar(beforehand you need to click on the toolbar twice to open the configurator).

Remove everything unnecessary from the toolbar and add a “Image Toolbar Item”. When you select this item you can change its image in the attributes tab. Set it to “NSAddTemplate”. There you can also change the label.

Next, add a NSTableView to the window so that it fills the remaining space. Select the ScrollView surrounding the NSTableView and go to the Size tab where you should enable autosizing by clicking on the inner double arrows in the rectangle:

Now select the TableView and click on the Attributes tab here you can change the number of columns to 3. Resize the columns so that they look okay and rename them(click ‘em twice) to “First Name”, “Last Name”, “Phone Number”.

Click twice on the “Drawer Content View” in the Document Window so that it opens and add some labels and textfields so that it looks like this(altough I encourage you to make it look better):

Adding Outlets/Actions

Add an ArrayController(Library->Cocoa->Objects & Controllers->Controllers) and an Object(same place) to the Document Window. Change the “Class Name” of the Object to “WindowController”(Identity tab) in the same tab add the following things:

• 2 Actions:
  • addContactAction
  • updateFilterAction
• 6 Outlets:
  • arrayContacts(NSArrayController)
  • txtSearchField(NSSearchField)
  • tblContacts(NSTableView)
  • txtFirstName(NSTextField)
  • txtLastName(NSTextField)
  • txtPhoneNumber(NSTextField)

Finally go to File->Write Class Files.. while having the WindowController selected.

Click the toolbar twice, so that the configuration comes up and link the Add Contact button to the Drawer’s(in the Document Window) toggle action, so that it toggles the drawer’s state between in and out every time the button is clicked.

Now connect every Class Outlet and every Class Action that you created before(if you don’t know how to do that check out my other tutorials).

The Actual Implementation

Adding a property

Now we need to add a property for our contacts(If you want to learn more about properties see chapter 9 on this page). To add it open up WindowController.h and add a NSMutableArray contacts and a associated property “contacts”. Also specify the superclass of the WindowController which we choose to be NSWindowController:

@interface WindowController : NSWindowController {

    IBOutlet NSArrayController *arrayContacts;
    IBOutlet NSTableView *tblContacts;
    IBOutlet NSTextField *txtFirstName;
    IBOutlet NSTextField *txtLastName;
    IBOutlet NSTextField *txtPhoneNumber;
    IBOutlet NSSearchField *txtSearchField;

    NSMutableArray* contacts;
}

- (IBAction)addContactAction:(id)sender;
- (IBAction)updateFilterAction:(id)sender;

@property (copy) NSArray* contacts;

@end

In the WindowController.m add a corresponding synthesize statement:

...

@implementation WindowController

@synthesize contacts;

...

Loading the Contacts from a file

Whenever you run the application we want to the contacts to be read from a .plist and added to the table, so let’s add a awakeFromNib to the WindowController.m which is called when the interface finished loading.

...
@implementation WindowController

@synthesize contacts;

NSString *filePath;

...

- (void)awakeFromNib {
	//set up the path of the plist(which will reside in the Resource folder of our app
	filePath	= [[[NSBundle mainBundle] pathForResource:@"Contacts" ofType:@"plist"] retain];

	//initialize the contacts array
	contacts  = [[NSMutableArray alloc] init];

	//check if the file Contacts.plist exists
	if ([[NSFileManager defaultManager] fileExistsAtPath:filePath]) {

		//if it does read its contents into an array and add the contacts to the arrayController wich will then feed the table
		NSMutableArray *contactsFile = [[NSMutableArray alloc] initWithContentsOfFile:filePath];
		for (id contact in contactsFile) {
			[arrayContacts addObject:contact];
		}
	}
}
...

Connecting the ArrayController to the TableView

Now we need to connect the ArrayController to the property we created, so open up Interface Builder and go to the Bindings tab while having the ArrayController selected. There go to “Content Array” and bind it to the Window Controller. As the “Model Key Path” choose “contacts”(the name of our property).

Keep the Bindings tab open and select the “First Name” column of the table, go to “Value” and bind it to the arrayController use “arrangedObjects” as the Controller Key and “firstName” as the Model Key Path.

Repeat this procedure for the other two columns and choose “lastName” and “phoneNumber” as Model Key Path.

Now whenever a new entry is added to the arrayController the table is filled with the informations you just binded to it.

The First Contact

You could run this to see if it works if you already had a Contacts.plist. If you want to try it, copy this to “build/Debug/Phonebook.app/Contents/Resources/Contacts.plist”:

< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<dict>
		<key>firstName</key>
		<string>John</string>
		<key>lastName</key>
		<string>Doe</string>
		<key>phoneNumber</key>
		<string>0123456789</string>
	</dict>
</array>
</plist>

Note that this is not necessary and only serves the purpose of having some sense of achievement.

Adding Contacts

To be able to add new contacts all we have to do is to fill the body of the addContactAction:

- (IBAction)addContactAction:(id)sender {
	//create a new contact based on the input values
	NSDictionary *dict =[NSDictionary dictionaryWithObjectsAndKeys:
						 [txtFirstName stringValue], @"firstName",
						 [txtLastName stringValue], @"lastName",
						 [txtPhoneNumber stringValue], @"phoneNumber",
						 nil];

	//add it to the arrayController
	[arrayContacts addObject:dict];

	//save the changes to the plist
	if ( ![[NSFileManager defaultManager] fileExistsAtPath:filePath] || [[NSFileManager defaultManager] isWritableFileAtPath:filePath]) {
		[[arrayContacts arrangedObjects] writeToFile:filePath atomically:YES];
	}
}

Try it out! Also try to restart the application to see if your changes have been saved.

Making the Seach work

We’ll be using predicates to filter the TableView. To learn more about the NSPredicate class see the Mac OS X  Reference Library.  It’s pretty similar to SQL if you’ve been using that before.

Here is how it works: First we create a “template” which contains the query but no actual values. We’ll do that in the awakeFromNib method:

...
@implementation WindowController
...
NSPredicate *predicateTemplate;
...

- (void)awakeFromNib {
	//creating a predicate with the condition that either firstName, lastName or phoneNumber contains the searchString (case- and diacritic-insensitive)
	predicateTemplate = [[NSPredicate predicateWithFormat:@"(firstName contains[cd] $searchString) or (lastName contains[cd] $searchString) or (phoneNumber contains[cd] $searchString)"] retain];
...

Whenever the value in the seach field changes the updateFilterAction is called, so let’s put our search logic there:

- (IBAction)updateFilterAction:(id)sender {

	NSString *searchString = [txtSearchField stringValue];
	NSPredicate *predicate;

	//if the search field is empty do not search!
	if ([searchString isEqualToString:@""]) {
		predicate = nil;
	} else {
		//create a new dictionary with the search string
		NSMutableDictionary *bindVariables = [[NSMutableDictionary alloc] init];
		[bindVariables setObject:searchString forKey:@"searchString"];

		//and create a predicate from the template by replacing the variable with its actual value
		predicate = [predicateTemplate predicateWithSubstitutionVariables:bindVariables];
	}

	//apply the predicate to the array controller
	[arrayContacts setFilterPredicate:predicate];
}

That’s all that needed to be done to make the search field work. Check it out!

The Source

The final Xcode project can be download from here.

Have fun!

This tutorial will show you how you can combine a NSTextField and a NSStepper to create a control that can both be typed into and stepped up/down.

Getting Started

Create a new project and open the MainMenu.xib in IB. Drag a Text Field and a Stepper right next to it. (Both can be found in Library->Cocoa->Views & Cells->Inputs & Values) so that it looks like this:

Also drag an Object to the Document Window(Library->Cocoa->Objects & Controller->Object) and change the Class Identity(Identity tab) to WindowController. In the same tab add two outlets: “input” (NSTextField) and “stepper” (NSStepper) and one action “stepperAction”.

Go to File->Write Class Files.. to create the WindowController.m/h.

Open the WindowController.h in Xcode and set the superclass to NSWindowController. Then reload the classes files in IB and connect the textfield, the stepper and the window to the Window Controller. Also connect the stepper to the stepperAction of the WindowController.

Search for the Number Formatter (Library->Cocoa->Views & Cells->Formatters) and drag it right on the textfield. Set the standard value of the textfield to 0 by clicking on it twice.

Back to the WindowController.m:

#import "WindowController.h"

@implementation WindowController

- (IBAction)stepperAction:(id)sender {
	[input setIntValue: [stepper intValue]];
}

@end

This updates the textfield value whenever you click the stepper. Run it and give it a try.

But what happens when you change the number in the textfield and then click on the stepper? Right. It takes the old value and increases/decreases it.

To avoid that we’ll need to update the stepper value whenever the value in the textfield is changed. This only works via delegates. A look at the reference entry for NSTextfield gives us the name of our delegate: textDidChange. So open up the WindowController.m and add the following things:

- (void) awakeFromNib {
	[input setDelegate:self];
}

- (void)controlTextDidChange:(NSNotification *)aNotification {
	if ([[aNotification name] isEqualToString:@"NSControlTextDidChangeNotification"]) {

		if ( [aNotification object] == input ) {
			[stepper setIntValue:[input intValue]];
		}
	}
}

That should do it. Try it out!

Additional Informations

Just as a side note: The Number Formatter makes sure that only valid numbers can be entered into the textfield. If you enter invalid characters it will prevent you from clicking somewhere else until you made the input valid. (To try that you’d have to add any other controls that you could click on, as there is currently only one on our view)
If you’d want to change the interval or the increment rate you’ll have to change both the settings of the NSStepper and the Number Formatter. The formatter can be accessed by clicking onto the textfield and then on the symbol on the lower right.

I hope this helps someone.

Introduction

This tutorial is written in a way that it doesn’t require much knowledge of cocoa/objective-c, but since I’m not explaining most of the code, programming experiences will be helpful to understand what you are doing.

The following things will be covered by this tutorial:

• designing a user interface with buttons and a NSCollectionView
• designing a Subview which should be displayed in the CollectionView
• feeding the CollectionView using an ArrayController
• making the items in the CollectionView selectable

This is what the final application at the end of the tutorial will look like:

Getting Started

Let’s start off by creating a fresh project and opening up the MainMenu.nib. Next drag a Collection View from the Library to the main view. It can be found under Library->Cocoa->Views & Cells->Data Views->Collection View.

Do the same with 2 buttons which you can get from Library->Cocoa->Views & Cells->Buttons. Give them a label(“add” and “remove”) by clicking them twice.

Your window should now look similar to this:

Also we’ll be needing a Window Controller: To add it go to Library->Cocoa->Objects & Controllers->Controllers and drag an Object into the Document Window. While having it selected in the Document Window, go to the Identity tab of the Inspector and change the class name to something like “WindowController”.

Keep it selected and go to File->Write Class Files, accept to save the “WindowController.m” and to create a “WindowController.h”. Now you should be able to see those 2 files in Xcode. Open up the “WindowController.h” which should look like this:

#import < Cocoa /Cocoa.h>

@interface WindowController : /* Specify a superclass (eg: NSObject or NSView) */ {

}

@end

As you can see we’ll have to specify the superclass of our WindowController to do this replace the comment with NSWindowController, save and in the Interface Builder select File->Reload All Class Files.

Setting Up The Bindings

Now that we’re done with the basic interface, let’s connect the controls to our WindowController.

To do this select the WindowController and open the Identity tab in the Inspector.

Here add two class actions(addAction and removeAction) and one class outlet collectionView of the type NSCollectionView as seen on the left.

Finally, go to File->Write Class File and merge the changes.

Our WindowController should now look like this:

WindowController.h

#import < Cocoa /Cocoa.h>

@interface WindowController : NSWindowController {
    IBOutlet NSCollectionView *collectionView;
}
- (IBAction)addAction:(id)sender;
- (IBAction)removeAction:(id)sender;
@end

WindowController.m

#import "WindowController.h"

@implementation WindowController
- (IBAction)addAction:(id)sender {

}

- (IBAction)removeAction:(id)sender {

}
@end

Go back to the Interface Builder and hold the Ctrl-key while “drawing” a line from the add button to the WindowController(in the Document Window).

Release the mouse over the WindowController and select “addAction”. The function addAction is now being called whenever the add button is clicked. Repeat this for the remove button and its corresponding removeAction.

Now we’ll be doing the same just the other way around: Draw a line from the WindowController to the CollectionView and select “collectionView”. Do the same with the background of the window and connect it to “window”. This will make both the window and the CollectionView accessible from our WindowController.

If you would like to see what connections have been made you could right-click for example on the WindowController and should see this:

Designing the NSCollectionViewItem

Next up, we would like to design the interface of an item in our CollectionView. Therefore, go to Xcode and select File->New File->View XIB, name it however you like(f.e. collectionItem) and open it up in Interface Builder.

Make the View a little bit smaller – I chose 150×150(you can set that in the Size tab of the Inspector).

Drag a Label(Library->Cocoa->Views & Cells->Inputs & Values) and a Segmented Control(same place as the Label) onto the view. Change the text of the label to “Joe”, change the number of segments of the Segmented Control(Attributes tab of the Inspector) to ’2′ and change their labels to “male” and “female”. This it what you should have got:

Setting Up the Bindings of the CollectionViewItem

First change the Class Identity of the File’s Owner(in the Document Window) to “CollectionItem”(in the Identity tab of the Inspector). At the same place add a Class Action “updateGender” and two Class Outlets gender(NSSegmentedControl) and name(NSTextField):

Now you should go to File->Write Class Files. In the “CollectionViewItem.h” you’ll have to specify the superclass of the CollectionItem(remember the WindowController.h?) . This time we want to extend NSCollectionViewItem so you need to put that there instead of the comment:

CollectionItem.h

#import < Cocoa /Cocoa.h>

@interface CollectionItem : NSCollectionViewItem {
    IBOutlet NSSegmentedControl *gender;
    IBOutlet NSTextField *name;
}
- (IBAction)updateGender:(id)sender;
@end

CollectionItem.m

#import "CollectionItem.h"

@implementation CollectionItem
- (IBAction)updateGender:(id)sender {

}
@end

Now all that’s left for us to do in this view is to connect File’s owner with the text field(name) and with the seg-control(gender), the seg-control with the File’s owner(updateGender) and finally the File’s owner with the view itself(view – click in the background).

Make the CollectionItem load its Interface

Everytime we add a new CollectionItem to the CollectionView a new subinterface has to be loaded(the collectionItem.xib). To do this we’ll have to add the copyWithZone method to our CollectionItem:

CollectionItem.h

#import < Cocoa /Cocoa.h>

@interface CollectionItem : NSCollectionViewItem {
    IBOutlet NSSegmentedControl *gender;
    IBOutlet NSTextField *name;
}
- (IBAction)updateGender:(id)sender;
- (id)copyWithZone:(NSZone *)zone;
@end

CollectionItem.m

#import "CollectionItem.h"

@implementation CollectionItem
- (IBAction)updateGender:(id)sender {

}

-(id)copyWithZone:(NSZone *)zone
{
	id result = [super copyWithZone:zone];

	[NSBundle loadNibNamed:@"collectionItem" owner:result];

	return result;
}
@end

Where @”collectionItem” refers to the name of the “collectionItem.xib”.

Adding an ArrayController

To be able to feed the CollectionView with items we’ll need to add an ArrayController.
To do that go to our MainMenu.xib in Interface Builder and drag an ArrayController(Library->Cocoa->Objects & Controllers->Controllers) to the Document Window.

This might also be a good moment to change the Class Identity of the Collection View Item(which has been automatically created when we added the NSCollectionView)  from NSCollectionViewItem to “CollectionItem”.

In Xcode open the WindowController.h and add the outlet arrayController, the mutableArray collection and the property collection:

WindowController.h

#import < Cocoa /Cocoa.h>

@interface WindowController : NSWindowController {
    IBOutlet NSCollectionView *collectionView;
	IBOutlet NSArrayController *arrayController;

	NSMutableArray* collection;
}
- (IBAction)addAction:(id)sender;
- (IBAction)removeAction:(id)sender;

- (void) awakeFromNib;

@property (copy) NSArray* collection;

@end

In the CollectionItem.m the method awakeFromNib needs to implemented and a synthesize statement needs to be added:

WindowController.m

#import "WindowController.h"

@implementation WindowController

@synthesize collection;

- (IBAction)addAction:(id)sender {

}

- (IBAction)removeAction:(id)sender {

}

- (void) awakeFromNib {

	collection = [[NSMutableArray alloc] init];
	NSSize size = NSMakeSize(150, 150);
	[collectionView setMinItemSize:size];
	[collectionView setMaxItemSize:size];
}

@end

Save and switch to the Interface Builder where you should reload the class files(File->Reload All Class Files).
Select the ArrayController and in the Bindings Pane of the Inspector and under “Content Array” set “Bind to:” to “Window Controller” and the “Model Key Path” to controller(as we named the property earlier).

Hold Ctrl and draw a line from the WindowController to the ArrayController and bind it to “arrayController”.
We’re almost done all that’s left to do is to connect the CollectionView to the Array:
Click on the CollectionView multiple times and make sure it really is the CollectionView and not the ScrollView surrounding it. Go to the Bindings tab and bind “Content” to the ArrayController with arrangedObjects as the “Controller Key”. Also bind “Selection Indexes” to the ArrayController with the “Controller Key” set to “selectionIndexes”.

Finally: Adding items to the CollectionView

The time has come to implement the addAction in the WindowController and take our application for a test run.

Open up the WindowController.m in Xcode and copy over the body of the addAction method:

- (IBAction)addAction:(id)sender {
	int index = [[arrayController arrayController ">arrangedObjects] count];
	[arrayController insertObject: [NSDictionary dictionaryWithObjectsAndKeys:@"Jon", @"Name", @"Male", @"Gender",nil] atArrangedObjectIndex:index];
}

- (IBAction)removeAction:(id)sender {
 	int index = [[arrayController arrangedObjects] count];
	if ( index > 0) {
		index--;
		[arrayController removeObjectAtArrangedObjectIndex:index];
	}
}

Now you can finally start and play with it. Even though it doesn’t do much yet, I hope you can already see how much potential and how many use cases the CollectionView actually has. At least that’s what I thought when I played around with it for the first time.

Just for you to check if you did everything the way I described it(at least how I tried to):

Enuf with the Joes

Now we want to have other names than Joe.

We’ll start by adding a new class(File->New File->Objective-C class) and name it “Person.m”:

Person.h

#import < Cocoa /Cocoa.h>

@interface Person : NSObject {

}

+ (NSString*)getRandomMaleName;
+ (NSString*)getRandomFemaleName;
+ (NSString*)getRandomGender;

@end

Person.m

#import "Person.h"
#include < stdlib .h>

@implementation Person

+ (NSString*)getRandomMaleName {
	NSMutableArray *names = [NSMutableArray NSMutableArray ">arrayWithObjects:@"Jon", @"Steve", @"Benjamin", @"Chris", @"Andre", @"Tom", @"Paul", @"Peter", @"Ron", @"Robert", @"Matthew", @"Max", @"Alex", @"Sebastian", nil];

	int randIndex = arc4random() % [names count];
	return [names objectAtIndex:randIndex];
}

+ (NSString*)getRandomFemaleName {
	NSMutableArray *names = [NSMutableArray arrayWithObjects:@"Abbey", @"Alice", @"Cindy", @"Chrissy", @"Gina", @"Hannah", @"Lena", @"Lilli", @"Linda", @"Monica", @"Nadine", @"Nancy", @"Theresa", @"Tiffany", nil];

	int randIndex = arc4random() % [names count];
	return [names objectAtIndex:randIndex];
}

+ (NSString*)getRandomGender {
	NSMutableArray *genders = [NSMutableArray arrayWithObjects:@"male", @"female", nil];

	int randIndex = arc4random() % [genders count];
	return [genders objectAtIndex:randIndex];
}

@end

The class Person offers 3 static methods:

• getRandomMaleName: randomly returns a male’s first name
• getRandomFemaleName: randomly returns a female’s first name
• getRandomGender: randomly returns either @”male” or @”female”

Now we can slightly modify the addAction in the WindowController.m to generate a random name for a random gender when adding the item:

Add the following line at the top of the file:

#import "Person.h"

Add copy over the body of the addAction method:

- (IBAction)addAction:(id)sender {
	int index = [[arrayController arrayController ">arrangedObjects] count];
	NSString *gender = [Person getRandomGender];
	NSString *name;

	if ([gender isEqualToString:@"male"]) {
		name = [Person getRandomMaleName];
	} else {
		name = [Person getRandomFemaleName];
	}

	[arrayController	insertObject: [NSDictionary dictionaryWithObjectsAndKeys:
										name,		@"Name",
										gender,		@"Gender",
										nil]
						atArrangedObjectIndex:index];
}

But our CollectionItem doesn’t use the supplied informations yet, so we’ll add the method setRepresentedObject in CollectionItem. Also we’ll implement the updateGender method which gets called whenever you click on the segmented control:

CollectionItem.h

#import < Cocoa/ Cocoa.h>

@interface CollectionItem : NSCollectionViewItem {
    IBOutlet NSSegmentedControl *gender;
    IBOutlet NSTextField *name;
}
- (IBAction)updateGender:(id)sender;
- (id)copyWithZone:(NSZone *)zone;
- (void)setRepresentedObject:(id)object;

@end

CollectionItem.h

#import "CollectionItem.h"
#import "Person.h"

@implementation CollectionItem
- (IBAction)updateGender:(id)sender {
	NSString *newName;
    switch ([gender	selectedSegment]) {
		case 0:
			NSString ">newName = [Person getRandomMaleName];
			break;
		default:
			newName = [Person getRandomFemaleName];
			break;
	}

	[name setStringValue:newName];
}

-(id)copyWithZone:(NSZone *)zone
{
	id result = [super copyWithZone:zone];

	[NSBundle loadNibNamed:@"collectionItem" owner:result];

	return result;
}

- (void)setRepresentedObject:(id)object {
	[super setRepresentedObject:	object];

	if (object == nil)
		return;

	NSDictionary* data	= (NSDictionary*) [self representedObject];
	NSString* newName	= (NSString*)[data valueForKey:@"Name"];
	NSString* newGender	= (NSString*)[data valueForKey:@"Gender"];

	[name setStringValue:newName];

	if ([newGender isEqualToString:@"male"]) {
		[gender setSelectedSegment:0];
	} else {
		[gender setSelectedSegment:1];
	}
}

@end

You can now compile & run the application.

Making the Items Selectable

To make the items selectable open the main interface(mainMenu.xib) in Interface Builder and while having the CollectionView selected go to the Attributes tab and enable “Selectable”.

Now our items are selectable, but we don’t see when they are yet. We’ll have to change the background color when an item is being selected.

Here’s how:  Open the collectionItem.xib and select the View in the Document Window. Change its Class Identity(Identity tab) to NSBox.

Next add those two functions to the CollectionItem.m:

- (void)setSelected:(BOOL)flag {
	[super setSelected:	flag];

	NSBox *view	= (NSBox*) [self view];
	NSColor *color;
	NSColor *lineColor;

	if (flag) {
		color		= [NSColor selectedControlColor];
		lineColor	= [NSColor blackColor];
	} else {
		color		= [NSColor controlBackgroundColor];
		lineColor	= [NSColor controlBackgroundColor];
	}

	[view setBorderColor:lineColor];
	[view setFillColor:color];
}

- (void) awakeFromNib {
	NSBox *view	= (NSBox*) [self view];
	[view setTitlePosition:NSNoTitle];
	[view setBoxType:NSBoxCustom];
	[view setCornerRadius:8.0];
	[view setBorderType:NSLineBorder];
}

That’s it!

BTW: You can also use the arrow keys.

Conclusion

That’s all I wanted to show in this tutorial. I hope you enjoyed it, even though the final app doesn’t do anything useful. It’s main purpose was to show how the NSCollectionView works and what can be done with it. The cool thing about the CollectionView is that you can dynamically create a set of views that can be customized for its purpose and create a nice user experience.

The final source code can be downloaded here.

One last thing: If you want to know what item is currently selected use [collectionView selectionIndexes] which returns a NSIndexSet.

Feel free to leave suggestions or the like in the comments.