Flickr Fav Set: #1 Create new FavSet

/* Introduction */

This series is a tutorial for greasemonkey script Flickr Fav Set introduced in previous blog entry. In this tutorial, I’d like to explain about the overview of user interface, creating new FavSet and add your favorites to FavSet.

If you didn’t installed the script yet or don’t know about Flickr Fav Set, please see this entry first.

/* Tutorial */

1. Create new FavSet
2. Browsing FavSets (writing…)
3. Modifing & Deleting FavSets (writing…)
4. Works with AutoPagerize (writing…)
5. Using Photo Selector (writing…)
6. Backup & Restore FavSets (writing…)
7. UI localization (writing…)

/* Basic definitions & UI layout */

Before creating your first FavSet, I’d like to define some words using in this tutorial and show UI layout and name.

Favorites: “Favorites” means “Favorite photos in Flickr” in this tutorial. It’s the same as Flickr’s. In addition to, I say “faved” or “faving” sometime.

FavSet: “FavSet” is a virtual folder to categorize faved photos. However, there’s large difference between FavSet and real folder (of File System on Windows or Mac); you can put one faved photo to multiple FavSets. FavSet is similar to “Tag”. So you can use FavSet as Tag. For example, there are 3 FavSets; “Summer”, “Blue” and “Sky”. And you add Blue Sky photo took in last summer to 3 FavSets.

Here is the overview of UI layout.

/* Create new FavSet */

Switch to “Edit mode” from “View mode”

There are 2 mode in Flickr Fav Set; “Edit mode” for new/delete/modify FavSet and “View mode” for browsing FavSets. In default, Flickr Fav Set is in View mode. So you must click “EDIT” button located on the right most of toolbar to move Edit mode.

Click “NEW” button to create FavSet

After moving Edit mode, you’ll see “NEW” button in the toolbar. Click this button and create new FavSet.

Input FavSet name

Now we got blank FavSet. It doesn’t have name yet, so please input FavSet name you want. Flickr Fav Set supports multibyte character (i.e. Japanese, Chinese, …). You can’t use “Untitled” as FavSet name.

In this, I’ve named it “Flower”.

When you input FavSet name, click “SAVE” button to store your first FavSet. You also use Enter key instead of clicking “SAVE” button. If you press ESC key, unnamed FavSet will removed by Flickr Fav Set.

Well done!

/* Set cover photo */

FavSet also can hold cover photo like Flickr’s Set. I recommend you set it because it’s very easy and you get pretty good looks of FavSet Selector.

FavSet Selector show all FavSets, and also shows the mark (glowing blue) to indicate selected FavSet. If you didn’t touch Flickr Fav Set since last operation in previous section, now you select “Flower” FavSet. If “Flower” FavSet didn’t selected, please click “Flower” FavSet to select it.

OK, let’s set cover photo. You only drag photo from Deck in the right side and drop it to the slashed area on Info panel.

If the operation finished successfully, you’ll see like following screenshot.

/* Select Favorites */

Here is main tips. However, it’s easy to add Favorites to FavSet. After checking the FavSet selected, you only click photo on Deck to switch the selection status. Selected photo has the frame colored vivid pink. When you’ve set the cover photo, Flickr Fav Set adds it to “Flower” FavSet automatically. So now “Flower” FavSet has just one photo.

One more important thing. There is no save operation in FavSet. Flickr Fav Set stores data of FavSet automatically when you change the condition of FavSet. So you don’t need to do save operation explicitly. See next screenshot. When you select faved photos, the system serialize data and saves it to preference storage of Firefox. After this, you can click “Close” button on the toolbar and close Edit mode.

/* Conclusion */

Someone may say “Where are my other faved photos? I have many many favs!”. Yes, you’re right. I didn’t mention about “Photo Selector”. I’ll explain about advanced topic in later tutorial.

enjoy Flickr & FavSet!