Personel Palettes Application

Atttibutions:

I have used Icons from TWG if you like them, they are available at: http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/

I have borrowed some HMI concepts from the "Palettes" Application within my colour editor, and I would like to thank R. Maddy for the use of those concepts.

Personel Palettes

A Color Palette Application that is practical and useful for each and every one of you.

Finally, a simple tool to pick the perfect colors for your bedroom wall, a curtain fabric or your fashion wardrobe.

The genesis of this application came from a friend wanting to transfer their seasonal fabric color swatch on their iPhone so they didn’t have to carry around a clumsy collection of fabric samples. Some research revealed that every fashion designer worth their salt had their own seasonal color swatches, and they change them every year, so I need to build a generic tool that can quickly import any color swatch.

Features:

Ø  As many colors as you want in a Color Palette without limit.

Ø  As many color Palettes as you want without limit

Ø  Preloaded with 4 seasonal color palettes

Ø  Fills your display with a selected color

Ø  Supports 5 color models. RGB,HSV,HSL,CMYK, and Gray scale.

Ø  Supports 3 different styles of color editor.

Ø  Supports choosing colors from an image, either from the camera or photo albums.

Ø  Emailing palettes to your friends and clients.

Ø  Designed for both iPhone and iPad.

It is not intended for designing new color palettes, it lacks the color blending tools for doing that efficiently, it is primarily for utilising an existing color palette.

If you form the opinion that it is a very simple and easy to use application, then I have achieved one of my goals.

Mission

My primary mission in writing Personnel Palettes was to flood your IPhone or IPad with a selected color, so that you can compare it fabrics and paints with it.

This is achieved by selecting a color and tapping in middle of your device, this will cause all the controls to disappear. Tapping a second time will bring them back.

Usage Scenarios

• You want to select a dress in a fabric from your seasonal color palette, you take your iPhone dress shopping, you find the prefect dress, use your iPhone to double check the color is in your seasonal Palette.
• You want a dress to match your shoes. Take a photo of the shoes, add the color to your favourite palette, and go dress find the prefect dress, use you iPhone to double check the color.
• You need to match the existing paint on the bedroom wall. Take a photo of the wall, add the color to your favourite palette, use the color editor to find the color components. Go the Hardware store and order a matching paint. Use the Iphone to check the color match once it is made.
• You are a fashion designer wanting to send a client a swatch of color options, you build a color palette from a image of the art work and email to your client who also has the application. They open the email attachment with the application, and they instantly have the color options on their iPhone/iPad.

Organization of Data.

The application is shamelessly modelled on the Mail application.  Individual colors have replaced email messages and Color Palettes have replaced email folders.

There are two tiers to the simple data model:

            1. Each color palette has a name, a description and a delete lock.

                Each color palette has a colletion of colors.

            2. Each color has a name attribute, and a color value

Application Opening

It opens with a view of the “Inbox” rename “My Palette”.

On an IPhone the application opens with a table view of the default palette, that I have called “My Palette”, there is nothing sacred about that name and you are free to rename it. By default “My Palette” contains three colors, Red, Green and Blue.

The three colors are just example colors as the application is more intuitive if you start with some colors in a palette.

Selecting a color in the TableView will navigate to a display of that color’s Detailed Color View. The detailed view just displays the color name and fills the background with the selected color.

The Detailed Color View has controls in a toolbar that lets you edit the Color, add a new color to the current Palette or delete the selected Color.

Tapping on the centre Detailed Color view will hid the controls and status bar. On an iPad this works best in Portrait view

On an IPad the application opens with a split view,

• in Landscape view, “My Palette” is displayed in a table view on the left, and on the right hand side  the selected color is used to populate a Detailed Color View .
• In Portrait view, the selected color is used to populate a Detailed Color View Detailed Color , with the “My Palette” table view being presented in a popover when the left navigation button is selected.

Email

The application allows the current palette to be emailed from the “Current Palette Table View” by using the “Mail” icon on the toolbar at the bottom of the table view.

You can also email a selection of palettes from the edit mode of the Palettes Table View by selecting the Palettes to be sent and using the “Mail” icon in the toolbar at the bottom of the table view.

The application can be opened with an email attachment, sent from another user of the application.

Detailed Color View.

The Detailed Color View is a very simple , it has a label which displays the color name, and displays the color value as the background color of the view.

The Detailed Color View provides the following controls

• Selecting the “Pencil” toolbar icon will open the color editor, pre-loaded with the selected color. edit the color and then save to update the selected color.
• Selecting the “Add” icon will open the color editor with no color selected. Set up a color and then save to insert it into the current Palette.
• Selecting the “Trash” toolbar icon will delete the currently selected color and select the first color in the palette to display. Has an are you sure alert.
• Tapping in the middle of the view toggles the display of the toolbar and status bar on and off. The edges of the display do not cause this behaviour to allow the edge of the device to be held without toggling the display.

Current Palette Table View

The current palette Table View displays the currently selected palette in a Table View.  The currently selected color is checked, on the IPhone the need for this is less as the Detailed Color View is not visible at the same time, but it does show what was recently looked at.

The Palette Table View has a toolbar at the bottom of the Table View which provide two icon controls:

• the “reply” icon that allows you to email the currently selected color palette, (depends upon the Mail application on your device being configured to work), and
• the “organise” icon displays a dialog/popover that allows the current sorting of the colors in the palette to be adjusted. This is a remembered setting that is applied to any display color palette.

The Palette Table View also has a Navigation Bar.

• The Palettte Table View’s navigation control will navigate you to the Palettes Table View.
• The edit button will enable/disable “edit mode”.

In edit mode the Table View becomes a multiple value selector, for a collection of controls displayed in the Edit Mode toolbar at the bottom of the table view. The controls are as follows

• “copyTo” button allows the selected colors to be copied to another palette. Uses the “Palettes Table View” for Selection.
• “moveTo” button allows the selected colors to be moved to another palette. Uses the “Palettes Table View” for Selection.
• “Compose” icon button allows the currently selected color to be edited. Only enabled when a single color is selected. Otherwise is identical to the “Compose” icon on the Detailed Color
• “Add” icon button allows a color to added to the current palette, it is identical to the “Add” icon on the Detailed Color View.
• “Trash” icon button allows a  one or multiple colors to deleted from the current palette, it is identical to the “Trash” icon on the Detailed Color View. It has an are you sure alert.

Palettes Table View  

The “Palettes” Table view displays all your color palettes in a table view. The currently selected palette is ticked.

This view is primarily a selector, selecting a palette will navigate you to the “Current Palette View” populated with the selected palette.

The cells of this table view show the name of the palette, the number of colors in the palette and the first 30 colors (based on current sorting).

The view has a Navigation Bar, the left button is a Navigation control back to the previous Current Palette Table View, the right Button is an

Edit button. This button toggles edit mode for the Table View.

In edit mode the Table View becomes a multiple value selector, for a collection of controls displayed in the Edit Mode toolbar at the bottom of the table view. The controls are as follows:

• “Backup” button allows the selected palettes to be backup to the Application document directory as XML files. They can be saved from there via ITunes. The Backup function has a side effect of cleaning up the applications documents folder, if used with no palettes selected it removes all the XML files from the directory
• “Mail” icon allows the selected palettes to be emailed, (depends upon the Mail application on your device being configured to work),
• “Pencil” icon button allows the currently selected palette to be edited. Only enabled when a single palete is selected.
• “Add” icon button allows a new palette to be added, initially an empty palette.
• “Trash” icon button allows a  one or multiple palettes to deleted. Has an are you sure alert.

On an iPad the Color Details View is also displayed when in Landscape mode. The effect of the controls on the Detail Color View change when this view is selected

• The “Pencil” icon is disabled.
• The “Add” icon is equivalent to the Add Icon on the Palettes Table View toolbar, except it also available in non-editing mode.
• The  “Trash” button is equivalent to the “Trash” icon on the toolbar, except it also available in non-editing mode.

Palette Editor View.

This is presented as a Modal Dialog on iPhone and as a popover on an iPad. It allows the Palette Name and a Palette Description to be edited.

Also a Palette has a delete lock that prevents a Palette from being inadvertently deleted.  This View also shows a palette Number which is a read

only attribute assigned sequentially as palettes are added. This attribute is not editable as it is used to select which palette is first displayed.

The “My Palette” palette is always number 1, so it is a good idea to keep it around to ensure you know what will displayed by default when the Application is started.

The Save and Cancel toolbar Buttons behave as expected.

Color Editor

The color editor is a Segmented Button controlled view and as is the most complex part of the application.  It started life in a class called the “Simple Color Editor”,how inappropriate that became. It provides 3 distinct color editors in a Tab controlled display.

It is displayed as modal dialog on the iPhone, a popover on the IPad.

The color editor has a toolbar showing “Cancel” and “Save” buttons as well as an Add icon button.

• The Cancel button will dismiss the Color Editor without changing the selected color (if any).
• The Save button will Save the selected color and color name.
• The Add icon button is only enabled when the Color editor is initiated to insert a new color, it is a short cut to allow multiple colors to be inserted from one invocation of the color editor. It behaves the same as the Save button, except it does not cause the editor to be dismissed. It was added primarily to allow a whole color palette to be entered in one go. The “click” depth of the application is rather deep once you have selected an image from a photo album, so the short cut was added to make life simpler, although it breaks the expected behaviour of a modal dialog by having an effect without being dismissed, it visual feedback is only a blinking of the “Add” icon.

There are three tabs: Picker, Sliders and Images.

• The Picker Tab displays a HSV color model touch activated picker in a Square format. This is the default Tab.
• The Sliders Tab displays a slider representation of the color in a selectable color model.
• The Images Tab allows a color to be selected from an Image. From either the camera or your photo albums.

You can edit the color name from any Tab.                                       

The three tabs are closely coupled, if you change a color in one tab it will update the color in all the Tabs. You can select a color from an image and then switch to the sliders tab to see its color component values.

The Picker Tab allows a color to be selected by dragging the cross hairs to select a Hue and Saturation, and then the Brightness I bar to select brightness. The Brightness bar shows the range of colors available given the currently selected Hue and Saturation.

The Sliders Tab allows a Color Model to be selected, and then sliders are presented to allow the components of the selected Color Model to be modified.

The value of each component of color is also displayed in a text box, which displays the value of the color component in the selected display style. The value may be entered via the text box if desired. Beneath each slider is a color gradient which shows the range of colors available with the slider, if the other components stay static.

Selecting the CMYK or Gray Scale color models and modifying the color will cause the color to be stored internally in that color model, otherwise an RGB color model used to store the color. When a new color model is selected a conversion between color models occurs to present the closest color in the selected color model. The “real” color is not modified unless the color is edited in the new Color Model.

The Images Tab presents a largely empty tab with two additional controls in the ToolBar, the Color Name and currently selected color ifany are displayed..

• The “Search” icon will launch a Image Picker that allows images to be selected from the Photo Album.
• The “Camera” icon will launch the Camera display version of an Image Picker.

The Image Pickers are displayed as a modal dialog on the iPhone, in a popover on the iPad

Once an image is selected, the Images Tab will calculate an average Pixel value over the middle ninth of the image. Think of the major squares in a Suduko puzzle, the application averages only over the middle major squre. The idea was that the edges of the image may contain odd pixels that would throw off the average, and calculating an average takes some computing resources and only using the middle ninth has a nine fold performance improvement.

Unless the image is of a single color which is the intended usage, this value not likely to be useful, but will be displayed as the “Selected” color initially

You can then scroll the image to select a pixel under the cross-hairs, and an exploded zoom view under the cross hairs shows a 5x5 Pixel display is also displayed a. Selecting the Pick button will selected the chosen color as the selected color.

You may select the “selected” color choosing between the average color or the picked color using a segmented control.

Restoring the Application.

The application has a few options for restoring itself, but they take some faith ! You have to delete all the palettes to activate them.

So you have broken the application, you have accidentally deleted your color palette.

Can you get it back ? Well if you have backed it up yes.

Simply delete all the color palettes, restart the application and it will restore any backed up color palettes.  Be careful with backup, it will backup the selected color palettes, butit will first delete all the previously backup color palettes. Emailing them to yourself is a valid alternative, that has no side effects  

If you did not back it up, well if you delete all the color palettes and restart the application it will restore the  default set of color palettes your had when you first started the application.

In passing, once you have deleted all the color palettes the application will only allow you to add a new palette or terminate the application.

4.3 Sdk Issues

The advent of 4.3  happened late in the development of this application for me and introduced one issue that are less than optimal.

The “use” button on the camera User Interface has a significant pause after its pressed, a spinner was added to the User Interface, but it is not 100% satisfactory.

Version 1.2 Known Issues

Unfortunately the cross hairs on the Image Picker was "crushed" ina late edit of that view, as is not visible. Will be Fixed in Version 1.3