diff --git a/docs/Haiku-doc.css b/docs/Haiku-doc.css index 4ba92ca6f0..4f62dca673 100644 --- a/docs/Haiku-doc.css +++ b/docs/Haiku-doc.css @@ -65,6 +65,7 @@ div.content { margin-left: 40px; margin-right: 40px; margin-bottom: 50px; + font-size: 0.9em; } /* heading and navigation */ diff --git a/docs/userguide/en/applications/apps-icon-o-matic.html b/docs/userguide/en/applications/apps-icon-o-matic.html index 83aff7ca2b..fd50985d8b 100644 --- a/docs/userguide/en/applications/apps-icon-o-matic.html +++ b/docs/userguide/en/applications/apps-icon-o-matic.html @@ -1,61 +1,366 @@ - + + "../../../../html-dtd/xhtml1-strict.dtd"> - - - - - Icon-O-Matic - + + + + Icon-O-Matic +
-

- Applications -     - Previous: Expander -     - Next: Installer -

+

+ Applications +     + Previous: Expander +     + Next: Installer +

-

icon-o-matic-icon_64.pngIcon-O-Matic

+ + + + +
Contents
BeOS bitmap vs. Haiku vector icons
+ Icons are attributes
+ Creating icons with Icon-O-Matic
+   Path
+   Shape
+   Style
+   Transformer
+   Saving an icon
+   Tips & Tricks
+ +

icon-o-matic-icon_64.pngIcon-O-Matic

+
Deskbar:Applications
Location:/boot/system/apps/Icon-O-Matic
Settings:~/config/settings/Icon-O-Matic
-

Documentation is still missing. If you want to work on it, please announce it on the Documentation mailing list to avoid duplication.

+ +


+ +

Before we come to the actual creating of icons in Icon-O-Matic, a few words to Haiku's icons in general.

+ +

+contents +BeOS bitmap vs. Haiku vector icons

+

Contrary to the BeOS, Haiku uses vector icons instead of bitmap icons. A special Haiku Vector Icon Format (HVIF) was developed that is highly optimized for small file sizes and fast rendering. That's why our icons are for the most part much smaller than either a bitmap or the widely used SVG format. Also, unlike BeOS' bitmap icons, Haiku isn't limited to an 8bit palette (256 colors).
+Take this icon of the Terminal, for example:

+ + + + +
BitmapSVGHVIF
i-o-m-terminal-bitmap32 i-o-m-terminal-bitmap16terminal-icon_32terminal-icon_32
1,024 byte
+ 256 byte
7,192 byte 768 byte
+

Note that the BeOS used two versions of an icon, one 16x16 and 32x32, to achieve good visuals in List and Icon View mode.

+

This trick isn't needed with vector icons. Besides only taking up a few hundred bytes in a file, vector icons also scale much better than bitmaps. (Note: BeOS offered only a 16x16 and 32x32 display.)

+ + + + + + + + + + + + + +
16x1632x3264x64128x128
Bitmapi-o-m-bitmap16i-o-m-bitmap32i-o-m-bitmap64i-o-m-bitmap128
Vectori-o-m-vector16i-o-m-vector32i-o-m-vector64i-o-m-vector128
+ +

+contents +Icons are attributes

+

Icons are stored as an attribute with their file. However, that doesn't mean that every file has to have this attribute to appear with an icon in a Tracker window: data files inherit their icon from their filetype. To globally change the filetype's icon you use the FileTypes preferences. If you only want to add a special icon to an individual file, you use the FileType Add-On on it instead. See topic Filetypes for more information.

+
Being an attribute, it follows that only filesystems supporting metadata can retain a file's individual icon. So, if you move files off your BFS volume, consider zipping them up so you don't lose icons or other attributes.
+ +

+contents +Creating icons with Icon-O-Matic

+

Icon-O-Matic is Haiku's icon editor that can save your work as HVIF, SVG or PNG. The icon can also be directly attached as attribute to an existing file or exported as a resource or source file used by developers. Since the application was tailored to the optimized HVIF format, its usage reflects the inner workings of this format.

+

Other than your normal vector graphics software, you don't deal with separate objects that each include all their specific properties like path, stroke width, stroke and fill color etc. Rather, you assemble your objects ("shapes") from shared paths and colors ("styles") and set certain properties. This re-using of elements is one secret of HVIF's efficiency. Although that imposes some constraints on the icon designer, there are a few advantages, too.
+For example, by re-using a path, several objects can be modified together by manipulating this one path. Think of an object and its shadow. Modifying their shared path will change the object itself and automatically its (maybe slightly distorted/translated) shadow.

+ +

Here's a quick overview of Icon-O-Matic's window:

+i-o-m-overview.png + +

To create any visible object on the canvas, you need a shape with a path and a style. Conveniently, you can create one, two or all three of those together from the Shape menu. Every kind of object (Paths, Shapes, Transformers, and Styles) has a menu above its list of elements, offering various commands. Every element has certain options that are set in the Property view.

+ + +

+contents +Path

+

A path consists of several points which are connected with lines or Bezier curves. To add or change points, make sure, the path is selected in the path list.

+ +

Simply clicking in the canvas will set the first point. While setting a point, you decide if the resulting line will be straight or curved: a simple click and release produces a straight line, holding down the mouse button and moving the mouse will drag out the handles for a Bezier curve. Of course, you can also change it all later on.

+ +i-o-m-path-ab + +

To get from "A" to "B", you have to transform some points from corner-points to curve-points. That's done by holding ALT while clicking on a point and dragging out the handles. This results in a symmetrical Bezier: the second handle follows the movement of the other. If you need to move the handles independently, again click&drag on a Bezier handle while holding ALT.
+Vice versa, to go from Bezier to a corner-point, hold ALT and click on a point.

+ +

To move a point, simply click&drag it. To select more than one point, hold down SHIFT and draw a selection rectangle. Selected points are marked with a red border instead of the usual black.
+To insert a point into a path you click on the connecting line between two points.
+Selected points are deleted by pressing DEL or by clicking on any point while holding CTRL.

+ +

The mouse pointer indicates the current mode:

+ + + + + + + + + + + + + + + + + +
i-o-m-pointer-move-pathi-o-m-pointer-inserti-o-m-pointer-addi-o-m-pointer-deletei-o-m-pointer-bezieri-o-m-pointer-select
Move point(s)Insert pointAdd pointDelete point
CTRL
Corner↔Bezier
ALT
Select points
SHIFT
+ +

Path Menu

+

The Path menu offers a few obvious entries to Add Rectangle and Add Circle or to Duplicate or Remove a path. Here are some that may need a bit more explaining:

+ + + + + +
ReverseIf your path isn't "closed" (see Path Properties below), a click into the canvas always creates a new point, connecting it with the last one. "Reverse" will reverse this order and your new point will connect to original start point instead.
Clean UpMost useful with imported SVGs, this function will remove redundant points.
Rotate Indicesnot yet implemented.
+ +

Path Properties

+

The Property at the bottom left of the window offers all available settings of the currently selected object. A path only has two: a Name and if it's Closed or not.

+ + +

+contents +Shape

+

A shape groups together one or more paths with a style. Practically, it's the object that you'll actually see on the canvas. The grouping is done with the checkboxes in front of the paths and styles: Just select your shape and tick off the desired path(s) and a style.

+

A shape defines how a path and style is applied, e.g. if the object is filled or only stroked (which is done by using Transformers on the shape, we'll get to that later). Also, a shape can be moved, rotated or resized without touching the used path. That way, you can re-use a single path and get different, but related, shapes.

+ +i-o-m-shape + +

When a shape is selected from the list, a rectangle is drawn around it. Depending on where exactly you grab it, the shape is moved, resized or rotated around a point in its center, which itself can be moved. Holding SHIFT will lock direction when moving, limit resizing to 45° angles and restrict the aspect ratio while resizing. The mouse pointer again indicates the current mode:

+ + + + + + + + + + + + + +
i-o-m- move-shapei-o-m-pointer-resizei-o-m-pointer-rotatei-o-m-pointer-move-rotation
MoveResizeRotateMove
rotation point
+ +

Shapes lie on top of each other, each is on its own layer, if you will. To reorder them you drag&drop their entry to a different position in the list.

+ +

Shape Menu

+

The Shape menu offers the before mentioned possibility to Add Empty, With Path/Style/Path&Style and to Duplicate or Remove a shape. Then, there is:

+ + + +
Reset TransformationReverts all the move, resize and rotate transformations you have applied to the shape.
Freeze TransformationWhen you transform a shape, its assigned path(s) stay in their original position. This may be intended; maybe more than one shape is using that path, maybe you intentionally used Options | Snap to Grid to set the points at precise pixel borders.
+If not, "Freeze Transformation" will apply the current shape transformation to the assigned path(s). A future "Reset Transformation" will then return to this new state.
+ +

Shape Properties

+

Besides a Name, the Property view for a shape has these options:

+ + + + + +
RoundingUnfinished feature. Once working correctly, it will do a kind of "hinting" for vector paths, rounding their coordinates to the next full pixel, giving it a crisper look.
Min LODMinimum Level of Detail
Max LODMaximum Level of Detail
+ +

Level of Detail (LOD)

+ + + + + + +
16x1632x3264x64
i-o-m-lod-icon_16i-o-m-lod-icon_32i-o-m-lod-icon_64
+

See how there are no numbers in the 16px version of the BeVexed icon? That's done with the "Level of Detail" setting of their shapes.
+With the LOD you control the visibility of a shape depending on its size. That way, you can leave away details of an icon that looks good on a bigger icon, but maybe not so much on its smaller version.

+

This is how it works: A LOD of 1.0 is defined as a 64px icon size. So, to get the LOD of a particular icon size you simply divide it by 64, e.g. a 16px icon has a LOD of 16/64 = 0,25. A shape won't be visible below its Min LOD and above its Max LOD.

+

So, if you set a shape's Min LOD to 0.0 and the Max LOD to 0.5, this means that the shape will only be visible for icon sizes smaller or equal to 32px. If you wanted to exclude the 32px icon size, you'd have to stay below 0.5, say 0.49.

+

The LOD is not only for leaving out detailing shapes, you can also use it to e.g. change the stroke width at different sizes, if you feel that's needed. Simply duplicate a shape, make your changes and set both of their LOD settings to show either one or the other. Here lies the only source of potential confusion, when you're unwittingly overlap LODs of shapes, and wonder why at some size both are visible...
+For example, if Shape 1 were to be shown below 48px and Shape 2 from 48px upward (LOD: 48/64 = 0.75):

+ + + + + + + + +
OKNot OK!
Shape 1Min LOD0.00Min LOD0.00
Max LOD0.74Max LOD0.75
Shape 2Min LOD0.75Min LOD0.75
Max LOD4.00Max LOD4.00
+ + +

+contents +Style

+

A style can either be a solid color or some type of gradient.
+Besides the predefined colors under Swatches, you can mix your own by clicking on the current color. Also, note the slider under the color spectrum which sets the alpha-channel (transparency).

+i-o-m-gradients +

You quickly create a new style by mixing your color and simply drag&dropping it into the list of styles.

+

If you go for a gradient, you set the type (Linear, Radial, Diamond, Cone) and then define the start and end colors. This is done with a drag&drop from a color bucket into the respective color indicator under the gradient.
+Of course you can move these indicators to change the gradient to your liking. You can also insert more indicators to add more colors by clicking into the gradient. Pressing DEL removes the selected indicator.

+

You can move, resize and rotate the representing box of a gradient on the canvas until it fits your needs. This works just like with shapes.

+ +

Style Menu

+

The Style menu offers the usual entries to Add, Duplicate or Remove a style and to Reset Transformation.

+ +

Style Properties

+

The Name is the only Property of a style.

+ + +

+contents +Transformer

+

A shape can have Transformers which change its appearance. The effects, however, are more subtle than a truck turning into a battle robot...

+ +

Transformer Add Menu

+ + + + + +
TransformationOffers the same move/resize/rotate options you have by manipulating a shape with your mouse directly.
Perspectivenot yet implemented
ContourAdds an outline to a shape.
StrokeStrokes the path of a shape instead of filling it with a style.
+ +

Depending on the kind of Transformer, you'll get a different set of properties.

+ +

Transformer Properties

+

Besides a Name and the actual Width for the transformer, the Property view has these (depending on its type slightly differing) options:

+ + + + + +
CapsStroke only. Defines the end caps of a line: Butt, Square or Round.
Detect Orient.Contour only. Makes sure the contour always extends outwards when you have self-intesecting paths.
JoinsDefines how lines are joint at a point: Miter, Round or Bevel.
Miter LimitOnly when the above Joins is set to "Miter" this setting influences the looks of the miter joint.
+ + +

+contents +Saving an icon

+

There's your usual menu bar at the top, File, Edit, Options. The usage is pretty much self-explaining, so we'll only look at how to save your work.

+

File | Save As... will save in a special Icon-O-Matic format that retains additional information like the names of paths, shapes and styles. These will be stripped from the actual icon once you export it to save space. It's a good idea to back-up your work like this, because without named objects everything's named "<path>/<shape>/<style>" which makes specific changes tedious.

+ +

File | Export As... opens a familiar save panel with a file format dropdown menu at the bottom, offering these choices:

+ + + + + + + + + +
HVIFHaiku Vector Icon Format
HVIF RDefSaves as resource used by programmers
HVIF Source CodeSaves as source code used by programmers
SVGSaves as SVG
PNGSaves as a 64px sized PNG
PNG SetSaves as 16, 32 and 64px sized PNGs
BEOS:ICON AttributeChoose a file and set its icon attribute directly
META:ICON AttributeChoose a file and attach the icon as mere meta data
+ + +

+contents +Tips & Tricks

+

A few things you should keep in mind when working with Icon-O-Matic and some general tips for its usage:

+ + + + + +
- + + + + + diff --git a/docs/userguide/en/preferences/prefs-keymap.html b/docs/userguide/en/preferences/prefs-keymap.html index 9839f09577..aa82e471b2 100644 --- a/docs/userguide/en/preferences/prefs-keymap.html +++ b/docs/userguide/en/preferences/prefs-keymap.html @@ -63,11 +63,11 @@ When you're done you can save the result from the menu File |

Advanced keymap manipulation

There's another method to customize your keymap besides the Keymap preference panel. It involves editing a text file containing loads of hex values, which may appear daunting on first sight, but isn't really that impossible to grasp.

You can dump the current keymap with a command in Terminal:

-

keymap -d > MyKeymap
+
keymap -d MyKeymap

The generated text file can then be opened in a text editor. Make sure to use a fixed font in that editor or you'll never grok that file...
At the beginning of that file, you'll find a legend of a stylized keyboard with the hex value corresponding to each key. Below that are the actual assignments of every value. You can do all the customizing that's also available from the Keymap preference panel, and then some. If you happen to have some special keys on your keyboard, you may be able to activate them. That is, use them as ordinary keys or like an option or control key. You won't be able to, for example, have your multimedia keys de/increase the volume or start some application. For this you can use e.g. SpicyKeys.

-

When you're finished, you'll save the file and have your system use the modified keymap with this command:

-
keymap -l < MyKeymap
+

When you're finished, you'll save the file and have your system load the modified keymap with this command:

+
keymap -l MyKeymap

This is the dumped file (the rightmost keys of the stylized keyboard are cut-off for a nicer display on this page):

#!/bin/keymap -l
diff --git a/docs/userguide/en/queries.html b/docs/userguide/en/queries.html
index cae6aaf9ff..b0056b1db2 100644
--- a/docs/userguide/en/queries.html
+++ b/docs/userguide/en/queries.html
@@ -40,7 +40,7 @@
 
 

The Find window

You start a query by invoking the Find... menu either from the Deskbar menu or any Tracker window or the Desktop (which is actually a fullscreen Tracker window). The shortcut is ALT F. You're presented with the Find window:

-basic-query.png +basic-query.png
  1. Select previous or saved queries or save the current query.

  2. Narrow down your search from "All files and folders" to specific file diff --git a/docs/userguide/images/apps-images/i-o-m-bitmap128.png b/docs/userguide/images/apps-images/i-o-m-bitmap128.png new file mode 100644 index 0000000000..bb067ea2a8 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-bitmap128.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-bitmap16.png b/docs/userguide/images/apps-images/i-o-m-bitmap16.png new file mode 100644 index 0000000000..68d2247a11 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-bitmap16.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-bitmap32.png b/docs/userguide/images/apps-images/i-o-m-bitmap32.png new file mode 100644 index 0000000000..748da41291 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-bitmap32.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-bitmap64.png b/docs/userguide/images/apps-images/i-o-m-bitmap64.png new file mode 100644 index 0000000000..90f2a37518 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-bitmap64.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-gradients.png b/docs/userguide/images/apps-images/i-o-m-gradients.png new file mode 100644 index 0000000000..58096bf676 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-gradients.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-lod-icon_16.png b/docs/userguide/images/apps-images/i-o-m-lod-icon_16.png new file mode 100644 index 0000000000..6b8f28619c Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-lod-icon_16.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-lod-icon_32.png b/docs/userguide/images/apps-images/i-o-m-lod-icon_32.png new file mode 100644 index 0000000000..33eadcc7fa Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-lod-icon_32.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-lod-icon_64.png b/docs/userguide/images/apps-images/i-o-m-lod-icon_64.png new file mode 100644 index 0000000000..1bee5e057d Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-lod-icon_64.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-overview.png b/docs/userguide/images/apps-images/i-o-m-overview.png new file mode 100644 index 0000000000..8f573ffed5 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-overview.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-path-ab.png b/docs/userguide/images/apps-images/i-o-m-path-ab.png new file mode 100644 index 0000000000..986b1b72c1 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-path-ab.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-add.png b/docs/userguide/images/apps-images/i-o-m-pointer-add.png new file mode 100644 index 0000000000..a0aae68cc5 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-add.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-bezier.png b/docs/userguide/images/apps-images/i-o-m-pointer-bezier.png new file mode 100644 index 0000000000..e0f82af78e Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-bezier.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-delete.png b/docs/userguide/images/apps-images/i-o-m-pointer-delete.png new file mode 100644 index 0000000000..d326267a51 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-delete.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-insert.png b/docs/userguide/images/apps-images/i-o-m-pointer-insert.png new file mode 100644 index 0000000000..17ac6ce55d Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-insert.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-move-path.png b/docs/userguide/images/apps-images/i-o-m-pointer-move-path.png new file mode 100644 index 0000000000..b101038c26 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-move-path.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-move-shape.png b/docs/userguide/images/apps-images/i-o-m-pointer-move-shape.png new file mode 100644 index 0000000000..5d2ecfe37b Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-move-shape.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-resize.png b/docs/userguide/images/apps-images/i-o-m-pointer-resize.png new file mode 100644 index 0000000000..e2d4e417eb Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-resize.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-rotate.png b/docs/userguide/images/apps-images/i-o-m-pointer-rotate.png new file mode 100644 index 0000000000..c4d8baa958 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-rotate.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-pointer-select.png b/docs/userguide/images/apps-images/i-o-m-pointer-select.png new file mode 100644 index 0000000000..91e20a21b1 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-pointer-select.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-shape.png b/docs/userguide/images/apps-images/i-o-m-shape.png new file mode 100644 index 0000000000..c1fd97f38b Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-shape.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-terminal-bitmap16.png b/docs/userguide/images/apps-images/i-o-m-terminal-bitmap16.png new file mode 100644 index 0000000000..58c6488f6b Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-terminal-bitmap16.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-terminal-bitmap32.png b/docs/userguide/images/apps-images/i-o-m-terminal-bitmap32.png new file mode 100644 index 0000000000..5bd36380e5 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-terminal-bitmap32.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-vector128.png b/docs/userguide/images/apps-images/i-o-m-vector128.png new file mode 100644 index 0000000000..ef97eed1fe Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-vector128.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-vector16.png b/docs/userguide/images/apps-images/i-o-m-vector16.png new file mode 100644 index 0000000000..cc234cf572 Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-vector16.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-vector32.png b/docs/userguide/images/apps-images/i-o-m-vector32.png new file mode 100644 index 0000000000..3858a139bd Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-vector32.png differ diff --git a/docs/userguide/images/apps-images/i-o-m-vector64.png b/docs/userguide/images/apps-images/i-o-m-vector64.png new file mode 100644 index 0000000000..05ad514a7b Binary files /dev/null and b/docs/userguide/images/apps-images/i-o-m-vector64.png differ diff --git a/docs/userguide/images/queries-images/basic-query.png b/docs/userguide/images/queries-images/basic-query.png index c4428c56fe..8aefe3140b 100644 Binary files a/docs/userguide/images/queries-images/basic-query.png and b/docs/userguide/images/queries-images/basic-query.png differ diff --git a/docs/userguide/images/up.png b/docs/userguide/images/up.png new file mode 100644 index 0000000000..3d88f85835 Binary files /dev/null and b/docs/userguide/images/up.png differ