Local Folder

Local Folder started out as a proposed Firefox extension called Folder2Gallery. However, shortly after the mockups for F2G were made, it was realized that Firefox wasn't needed. So Folder2Gallery became a XUL Runner application. However, the name no longer fit. Hence, the name change to Local Folder. The mockups below (unless marked) are for the Firefox extension version. Mockups that show Local Folder as a stand-alone app are being made. Any such mockups that have been made will be marked below with a *. Mockups which aren't expected to change are makred with a †. Other Local Folder comments will be marked in red.

1. Why Folder 2 Gallery exists
2. A few samples of Folder 2 Gallery's output
3. The main Options dialog
   1. The Global section
      1. The General tab
      2. The Folder Preview tab
      3. The Item Layout tab
      4. The File Types Tab
      5. The Thumbnails tab
   2. The Themes section
   3. The Tools section
4. Options for previewing the contents of a specific folder
5. Options for where to get a thumbnail for a specifc folder or file
6. Selected files
7. Selecting a file in a group
8. New Local Folder stuff
   1. Toolbar buttons

First, we need to see what is available without F2G.  If you look at Figure 1, you will see how Firefox handles local folders now—poorly.  There are no previews of files even when Firefox supports the types of files listed.— You could use your OS-supplied file browser or something similar, but Figure 2 shows some of the drawbacks of Vista's Windows Explorer.  Explorer supports previewing as icons only a few types—and that is Vista.  Older versions supported even fewer options.  Vista's biggest advantage is that it can preview folders as 3d images showing two thumbnails.  Vista makes you select a text file to get a preview.  Files like SVG and XCF (GIMP) are never previewed.  Same with HTML files—never mind that most Windows installations have Internet explorer built in and it handles most of the drawing that Windows Explorer does.  (Explorer will actually open your browser if you attempt to open a HTML file.)  A Firefox extension to use Local Folder to render folders is still possible, but not a priority at this time.

So what about other file browsers? Many for Linux can preview as icons more file types.  In fact, Konqueror really is a Internet browser that does a halfway decent job of previewing local files.  However, they are commonly have poor navigation.  Windows Explorer in Vista can seem way more advanced in some regards.  In fact, if you look again at Figure 2, you will noticed some triangles between each folder name in the path. Those are actually menus.  If you click one, the menu will list subfolders of the item to the left of the triangle you clicked.  Of the various readily available file browsers for Mandriva, none have this.  In fact, as good as Konquerer is at previewing files, it's web browsing abilities work against it locally.

Now it is time to look at how Folder 2 Gallery handles some of these same folders. Figure 3 shows a basic folder with the default options. (While the entries might look like folders, those are actually icons and you are looking at indiviual icons. The icons showing the type of file are next to the text. Real folders are at the bottom.) Each image is previewed at 256x256. The full filename and an icon for the file type are included. As we will see later, you can select one, rename it, change the preview image, or open it.

Figure 4 shows the same folder, but now the images are grouped by filename (minus the extension).  You will note the file type icons (next to the filename) change to refect that multiple files are presented.  When grouping is turned on, F2G assumes that all files with the same filename (except for the extension) can be represented by the same thumbnail.  As such, it attempts to base the thumbnail on a PNG or JPG when those file types are included in the group.  Otherwise, it simply picks one of the files in the group at random and uses it.  As we will see later, you can click the group to see all the files in it.

Now let's look at a really complex folder.  Figure 5 shows just that.  Here, none of the images are the same size.  Now the images start to flow like text to fill the available space.  This allows F2G to minimize the amount of real estate required for the folder.  This means less scrolling on your part to reach the files you want.  Figure 5 also shows two optional borders.  One surrounds the entire element and helps when the name of the items run together.  The other border helps you see previews that are mainly transparent.

Now in addition to hiding the file name extension, you can opt to hide the file type icon.  When you hide both, F2G goes into a special version of grouping mode called title mode.  This is shown by Figure 6.  Title mode allows for the most compact displays that F2G can offer.  Title is mainly intended for something like your vaction photos.  However, you might well find other uses for it.

Ok.  Enough about how folders appear.  We need to see what options are availble.  Figure 7 shows window that would open if you click on Tools/Folder 2 Gallery Options in the menus.  The General section has five tabs.  General is shown.  There are two options outside the tabs.  The first controls whether F2G does anything at all.  With that option turned off, F2G will never appear or change how Firefox displays local folders.  It would be as though Folder 2 Gallery was not installed.  The other option prevents F2G from handling display of folders any differently from how the options below are set.  Normally, those are only defaults—not the actual settings.  The default options normally take effect only when there is no settings file (Folder 2 Gallery.xml) in the folder.  Please note that telling F2G to ignore those files does not delete any files.

The General tab

Next, examine the General tab inside the Default group.  The first option allows or prevents F2G from creating the local settings files.  If you choose not to create those files, F2G will always use the global settings if the local file (Folder 2 Gallery.xml) is missing.  Again, F2G won't delete any files just because you change this setting.  If you check this, you might want to check the option at the top of the dialog to ignore any existing local settings files.  The two options are completely independant.

Below that is the option to place a border around entire items and another to put a border around preview images.  Now be careful with the next item.  It will cause F2G to ignore all instances of Folder 2 Gallery.xml in subfolders of the current folder.  This causes the style of the current folder to also be used for the child folders.  This option can not be overriden in the subfolder.  If you turn it on, the only way to get rid of it is at the parent folder where you turned it on.  The button to show the folder options window will not be shown in the child folders.  (However, you can still set options for files.)

Moving on, we run into an option on how F2G handles graphics that are smaller than the thumbnail size you selected.  Turning this on will cause F2G to strech images to fit if they are smaller than the preview size.  Another option is how SVG and SVGZ files are previewed.  You have the choice of simply displaying the SVG using the <object> tag or generating a PNG (or JPG) of the SVG.  In the later case, the PNG or JPG will be used as the preview and stored depending on the options you select in the correct tab.

The final option in the General tab actually doesn't belong there or anywhere inside the Defaults group.  It was added there due to the lack of space elsewhere.  It lets you control how much space F2G can use for thumbnails in the Firefox profile folder.  This option has no effect on thumbnails stored in the same folder as the source image.  (Please expect the first option in the General tab to move as well.  It was placed where it is shown in the mockups by mistake.  It has no relevance in the context shown.  It is either that or it would only apply to subfolders aside from the default part.)

The Folder Preview tab

Time for the next tab: Folder Previews.  For that, look at Figure 8.  This tab has just two options.  You can tell F2G to use the first image found in a folder or any subfolder as the folder's preview.  Or, F2G can generate a 3d folder image with thumbnails inside it for a Vista look.  (This might not happen.)

The Item Layout tab

Moving on, look at Figure 9.  Here, you choose the layout for each item.  As noted, you can hide the file type icon and/or the file name extension.  F2G will show you what you selected on that tab.

The File Types Tab

Figure 10 shows the options you have with select file types that Firefox can't handle on its own.  In each case, you can tell F2G to use the type's plugin (if known) to generate the thumbnail.  You also have the option to simply show a large file type icon instead of a preview image.  Compressed file types like ZIP, RAR, and 7z have their own options.  F2G can either treat them as a folder (and let you browse them) or simply show the file type's icon as the preview.  To avoid making changes to compressed file types, F2G will never store settings (unless you make changes) or thumbnails in the compressed file.  All thumbnails will be stored in the Firefox profile.

The Thumbnails tab

The final tab, shown in Figure 11 inside the Defaults group in the Global section controls some of the details of thumbnail creation.  First, you can change the size of the thumbs here.  If you pick 100 pixels, then all thumbs must fit within a 100x100 box (not counting the file type icon or the file name).  Next, you have three options as to how F2G can cache the thumbnails it makes.  You can tell F2G not to bother.  This is the default for folders that are really some type of compressed file.  Another option would be to store the generated thumbnails in the Firefox Profile.  Finally, you can choose to store the thumbnails as hidden files in the same folder as the source image.  Note: If a image file exists in that folder with one of the filenames "tn_file.png", "tn_file.apng", "tn_file.jpg", "tn_file.jpeg", "file_tn.png", "file_tn.apng", "file_tn.jpg", or "file_tn.jpeg"; F2G will use that file as the thumb, resizing it as needed.  (That doesn't apply to folders.)  As such F2G might never check the Firefox profile cache even if you want thumbnails stored there or you don't want thumbnails stored at all.

If you choose to store the thumbnails in each folder with the source images, F2G will always have the correct thumbnail as long as the image doesn't change (which would trigger generation of a new thumbnail).  However, if you later uninstall F2G or Firefox, all the thumbnail files will still exist on your hard drive.  (There is a button in the Tools section of the Options dialog to delete those files.)  Now if you store thumbnails in the Firefox Profile, you don't have to worry about that.  However, F2G might have thumbnails cached for folders that you moved or deleted.  Of course you could turn caching off, but unless F2G finds a thumbnail as described above (created by you), it will constant have to recreate thumbs, slowing you down.

The final set of otions in the Thumbnail tab control the file type used when Firefox doesn't support the file type of the source file without help.  (Note: This might also apply to SVG and SVGZ files depending on the options in the General tab.)  This setting has no effect on any file that Firefox knows how to display.  Anytime F2G makes a thumbnail for those files, it will use the same type as the source image.  This means you don't have to worry about JPGs being thumbnailed as PNG or a PNG as a highly compressed JPG.  You can choose between PNG, APNG, MNG, and JPG.  Choosing APNG or MNG will cause F2G to use PNG if animation isn't needed.  (Animated thumbnails may or may not happen.)  The links would take the user to the Wikipedia page for that file type.  Hence, a user who doesn't know what APNG is can look it up.  Also, this option has an effect even if you choose not to cache thumbnails.

Finally, the right half of this tab is devoted to a sample image with the options you choose.  The outer box shows the maximum allowed size (256x256).  The image may change depending on the thumbnail type you choose (PNG or JPG).  However, this image will always be stock image; never an actual image from your drive.

The next section, see Figure 12, provides a way to change how Folder 2 Gallery displays each page.  F2G exposes most elements on the page as CSS classes and ID values.  Each theme is a CSS file.  Simply select a theme and F2G will always use it.  Use the install button to install a new theme that you downloaded.  A link or button to download new themes might be added to the actual extension.

Figure 13 shows the final section in the Options dialog: Tools.  Currently, there are just two things in here.  One option searches your hard drive for instances of Folder 2 Gallery.xml and deletes them.  The other searches for and deletes any cached thumbnails—even if you created them manually.  Depending on the options you chose elsewhere in the Options dialog, you might want to use one or both of these tools before you uinstall F2G or Firefox.  Either tool could take some time.  Please be patient while waiting on them.

Figure 14

Figure 15

Figure 16

Figure 17

Figure 18

Figure 19

Figure 20

These dialogs will look familar.  That is because the Defaults portion of Tools/Folder 2 Gallery Options/Global as discussed above.  Whether or not F2G will be able to reuse the actual XUL and JS is unknown.  However, that would be desirable.  In any case, you will note that an option (the cache size) vanished for previously noted reasons.  I also forgot that the first option in the General tab wouldn't apply.  So that option would be moved (and wouldn't appear here).  Otherwise, these are just a rehash of the stuff inside the Global section of the main Options dialog.  For more information on these options, see the appropriate comments above.

Figure 21 †

Figure 22 †

Figure 23 †

If you right click a file or folder in a F2G-generated list, F2G adds a properties context menu item.  Which of the dialogs in Figures 19 and 20 you see depends on if you selected a file or a folder.  The main difference is that F2G can't search "inside" a file for a thumbnail.  So that option would be disabled.  Regardless, the two large buttons act like checkboxes in that you click them and they stay down.  However, clicking one turns the other off.  Both get turned off if you click the Browse button.  The right side of the dialog is a preview of the actual image that will be used for previews.  The size reflects the size chosen for this folder.

Figure 21 shows how F2G would respond as you move the mouse over an item in a list. Figure 22 shows how F2G would display the same item selected without the mosue overhead. Figure 23 shows a file being renamed.  Remember, a renamed file can use characters that aren't allowed in filenames.  For instance, Figure 23 shows a '?' being added to the name.  Such characters aren't allowed in Windows filenames.  Note about renamed files and grouping mode: Grouping is done based on the display name.  If the user changes the name of a file, that name, not the real name, will be used to check for a group.

Figure 24, the last mockup made so far, shows what you would see if you clicked on one of the items, here "Songbird", in Figure 4.  This causes F2G to display the contents of the group in a special dialog.  Click anywhere outside the group to go back to the group's parent folder.  Click any item to view that item.

Local Folder has a few needs that we didn't need to worry about in as a Firefox extension.  Stuff like bookmarks and toolbars were taken care of for us.  This section will cover those tpoics as mockups are made.  The mockups after this point might be in SVG.  I am assuming everyone interesting in Local Folder at this point has a SVG cabable browser.

The plan is to require all toolbar buttons (and icons in general) to be drawn with SVG rather than PNG.  This allows for icons to be animated in various situations.  Plus one image can handle various states and sizes.  Figure 25 shows what the forward and back buttons might look like for some themes.  The sample is fully interactive.  You can change the size, split the button into two buttons, and more.  The button will change appearance with the size.