wiki:ITERATION_11/Release/UserDocumentation/SophieAuthor/01_WorkingWithSophie/02_HalosAndHUDs
Last modified 16 years ago Last modified on 08/14/09 20:47:35

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

1.2. Halos and HUDs

Interacting with Sophie is done with halos and HUDs. Halos are little icons that show up around things in Sophie when you select them. They stay on the screen until you click somewhere else in Sophie. Generally, these halos can be clicked to open a HUD; a few work slightly differently. HUD is short for head-up display. It’s a little window that opens up showing you different things that you can do with whatever you have selected. You can drag a HUD around by clicking on its background and dragging.

Halos are context-specific, and selecting different things in Sophie reveals different kids of halos. Selecting a page reveals the page halos; selecting a frame reveals frame halos; selecting multiple frames reveals the multiple frames halos; and inserting a cursor in text reveals the text halo.

The halo and HUD functionality in this release of Sophie 2 is not complete: more halos and HUDs will appear in the finished version of the application, and many of them will be implemented in different ways. Some halos and HUDs can be seen, however. They are:

Page halos and HUDs

When the page itself is clicked, the page halos appear. They look like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/PageHalos.png

At the bottom right corner is the book resize handle; this can be dragged back and forth to change the size of the book page. (This can also be accomplished by choosing Edit > Set Page Dimensions from the menu bars.) At the top right corner are three halos: the border & fill halo, show template frames halo, and the save page as template halo.

The border & fill halo opens the page's border & fill HUD. It looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/BorderFillHUD.png

These controls allow you to set the page's border and fill properties. If you choose to Lock the border or Lock the background, you will not be able to edit those properties. If you check the Border template or Background template, the settings for the border or the background will be taken from the saved page template.

Clicking on the color squares next to Border color or Fill color will open up the color picker, allowing you to choose a color for the border or fill:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/ColorPicker.png

You can select a color by clicking somewhere on the color spectrum, or by entering a color value in hex or decimal. The A values are for alpha, which is image transparency; setting this to 0 makes the color completely transparent, while setting it to FF (hex) or 255 (decimal) makes the color completely opaque. If you click the Save button, the color you've selected will be saved in one of the ten squares beneath the color spectrum; you can used these saved colors by clicking on them anywhere you use the color picker.

Clicking on the square next to Gradient will let you set a gradient using the gradient picker:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/GradientPicker.png

Use the controls to select the sort of gradient you want.

Clicking on the image fill or pattern fill squares will prompt you to choose a location to use as your background. In image fill mode, the image is stretched to fit the size of the page; in pattern fill mode, it is repeated as many times as can fit in the page.

The page's Show template frames halo will show all the frames on the current page that are saved on the current page template. The Save page as template halo will save the current page as a page template. Page template functionality is not fully functional in this version of Sophie.

Frame halos

When a frame is added to a Sophie page and the frame is selected, frame halos are visible. They look like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/FrameHalosLabeled.png

Directly above the frame appears the frame title, which can be dragged to move the frame around the page. In the upper right corner is the delete halo. If you click the delete halo, you'll be asked if you're sure that you want to delete the frame.

Below the frame's bottom right corner appear three rotate handles. From left to right, they shift the frame 45 degrees counterclockwise, rotate the frame an arbitrary angle, and shift the frame 45 degrees clockwise. If you click the center rotate handle, a window will appear asking you to enter a rotation value:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/RotationHud.png

A value in degrees can be entered in the text field; selecting one of the points in the grid will change the center of rotation.

Nine halos appear directly above the frame's upper left corner. From left to right, these are the border & fill halo, the size & position halo, the margins & padding halo, margins and padding halo, the move forward button, the move backward button, the use template content button, the save frame as template button, and the link halo.

The border & fill halo opens the frame's border & fill HUD, which looks very similar to the page's border & fill HUD:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/BorderFillHUD.png

The frame border & fill HUD also includes a checkbox labeled Frame visible. This is checked by default; if this is unchecked, the frame will be hidden in preview mode and the reader application. In authoring mode, it will appear semi-transparent, but it can still be manipulated.

If you click on the frame size and position halo, the frame size and position HUD appears, which looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/SizeAndPositionHUD.png

The top settings allow you to set the width and height of the frame; the bottom settings allow you to set the position of the frame relative to the top left corner of the page. Note that currently all frames in Sophie start out at the same size, 360 x 240; this can be changed in the frame size and position HUD. If the template controls are checked, the values from the saved frame template will be used. If the lock controls are checked, the values will not be editable.

If you click on the margins & padding halo, the margins & padding HUD appears, which looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/FramesMarginsPaddingHUD.png

The top half of this HUD sets the margins values for the frame. Margins are extra space added around the frame so that text will wrap around it. The bottom half sets the padding values for the frame. Padding is extra space added inside the frame between the frame and any text within the frame. Margins and padding can be adjusted on any side of the frame. Margins and padding are visible when the user selects Outline Frames in the status bar of the book window. The template and lock controls work the same way the other frame HUD template and lock controls work.

The move forward and move backward buttons move the frame forward or backward relative to other frames on the page. For example, if a frame appears to be beneath another frame, you could select the first frame and click its move forward button to move it in front of the second frame.

The use template content button and the save frame as template buttons involve frame templates. Clicking use template content will use frame properties from whatever saved frame template the frame uses; clicking save frame as template will save the frame properties as a template. Template functionality is not complete in this version of Sophie.

Clicking the link halo will open the link HUD, which looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/LinkHUD.png

The link HUD allows you to set actions related to the frame - actions that will be performed when the frame is hidden or shown or when the reader's mouse clicks on it or moves over it. See the section on working with links for more details on how links in Sophie work.

Text halos

In this release of Sophie, a single text halo appears in the upper left corner of a frame when a text frame is inserted. This halo can be clicked on to reveal the text HUD, which looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/TextHUD.png

This HUD allows you to change the font, size, and font settings for all the text in the current frame. This is not the way this will work in the finished version of Sophie.

Text frames also have a chain halo at the bottom right corner of the frame. Clicking on it opens the chain HUD, which looks like this.

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/ChainHUD.png

The drop-down menu will allow you to select any frame on the page; when a frame is chained to another frame, text flows from the first frame to the second frame when there's no more room in the first frame. (In coming releases of Sophie, you'll be able to chain text frames that are on different pages; for now, this functionality is limited to frames on the same page.) When a frame is chained to another frame, the chain halo turns into the unchain halo:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/FullTextHalo.png

When this halo is clicked, the frame is unchained from the frame it was chained to; the chain HUD can be used to select another frame to chain.

Multiple frame HUDs

You can select more than one frame by clicking the first frame, then shift-clicking on another frame, or by dragging a rectangle around the frames that you want to select. Multiply selected frames have special halos that look like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/UngroupedFrames.png

At the top are the frames' title bar, just like the regular frame title bar; dragging this will drag all selected frames. On the left is the align halo; clicking on the align halo brings up the align HUD, which looks like this:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/AlignHud.png

Clicking any of these buttons will align the selected frames in that way.

To the right of the align halo is the grouping halo. If this is clicked, all selected frames will be grouped: clicking on any of them will select all the frames, and the individual frames can no longer be directly edited. Grouped frames have slightly different halos:

source:/branches/private/danvisel/sophie2-platform/doc/userdoc-images/RELEASE_11/GroupedFrames.png

The enter halo, on the left, allows you to enter the group: when this is set, you can edit the individual frames in the group without breaking the group. The ungroup halo, to the right, will ungroup the grouped frames, returning them to the way they were before they were grouped.