Organise/Launch Items in a Tabbed Circular 2D Canvas

• Download source - 188 KB
• Download DesktopCircles_exe_in_folder - 27.7 KB

Introduction

We will discuss in this trick/tip DesktopCircles, my 2^nd WPF program that I wrote a long time ago. The main purposes of this little program are as follows:

• Do wild things with a simple WPF program (round window, chrome, place and resize icons on a 2D plane when dragging)
• A first little hands-on experiment to organise/launch hand picked items by arbitrary placing items on a tabbed 2D plane.

Note that wild things and first hand experiment do not imply design, polished user experience or quality programming.

First conclusion of the hands-on experiment:

• It is possible to organise a larger number of items on a 2D plane compared to the 1D list.
• I never used this experimental program.

It is known that a list is a very good way to present items; maybe I did not take enough time to get used to the "visual search paths" of this program. I introduced a list of functions of a Desktop as a discussion/brainstorm framework. For DesktopCircles, one possible improvement could be to support copies, not only short-cuts, of the dropped items to a special folder.

Additionally, I analysed my Android and Windows 10 experience from the perspective of the functions of the desktop. Two questions popped up:

1. What is best for a 2D ordering hand-picked items: the modern W10 Start Menu (continuous scrollable, grouped live tiles, different sizes, "Folders") versus a small number of discrete Android "desktops" with limited number of items.
2. Is it a good idea to introduce in Windows 10 a mouse "Swipe" element on the Taskbar to swipe with a mouse to different traditional Desktops with different icons.

I did not do much polishing on this little program but to be complete, a list of some possible improvements is given.

Background

The program originated for my interest in organising by hand and presenting items by variations in sizes and grouping, in combination with (hierarchical) search paths that can be discovered and remembered by the user.

An example of a visual search path is the W 10 menu start (in the beginning, people did not know where to start, so the text "Start" was used) or the new System Settings versus the familiar Control Panel.

See also here my article about the little ListLaucher utility to visually launch a limited number of hand picked items in a "1D" list.

Table of Contents

• Short description of DesktopCircles
• Functions of the Desktop as a discussion/brainstorm framework
• Possible Improvements for DesktopCircles and Conclusions
• Appendix. Short discussion of code

Short Description of Program DesktopCircles

DesktopCircles is a small utility (actually: first hands-on experiment) that uses (tabbed) 2D planes to visually organise your less frequent used short-cut /icons of applications, folders or documents using a 2D plane. If you like to keep a larger number of programs short-cuts that you rarely use on the desktop, use a short-cut in DesktopCircles to keep your desktop clean.

• The window can be dragged using the "drag me" ellipse or the dark blue circle. There is a minimize and close button.
• Drag (short-cuts of) applications, folders, drives, documents onto the window/circles.
• Rearrange and cluster the icons in the window/circles by dragging
• Double click on icons to launch the items. Program will minimize, unless shift key is pressed, for opening multiple folders or programs.
• Remove icons from the window/circle by dragging them to the waste bin or press delete key+left click mouse.
• Use the tilted list to select another group/plane/desktop screen. It is possible to rename a group.

Notes:

1. Use a folder and a short-cut to the DesktopCircles.exe on the desktop of to attach to the Taskbar, because the program will make some ini files in the .exe folder.
2. The program does not make a copy of the items but makes an internal short-cut of the original item. You never store or delete the original files. If the short-cut does not point any more to a valid file, an icon with a red cross will be displayed.
3. Short-cuts are resolved without any parameters, but this generally works. In most cases, you can drag a short-cut from a new installed program from the desktop to the circles screen and then delete the original short-cut from the desktop (test first to make sure).
4. Currently for the demo, we set 2 sizes and angles for the draggable icons dependent left, middle and right x position. From a practical viewpoint, constant values of Angle and Size are maybe preferable.

Functions of the Desktop as a Brainstorm Framework

I never used this experimental program much. As a discussion/brainstrom framework, I listed some functions of the desktop.

0. Show wall papers. Seems irrelevant, but important contribution to User Experience.
1. Empty space. For some gurus "You" are the empty space where all experiences and thoughts appear and are observed :=). For Windows, it is the space where the windows/full screens of running program or programs appear. More empty space is better. (My analysis stops here and I will not discuss filling the space optimal and switching).
2. Hand picked launch-able icons. Note that there is often a list of all programs and some hand picked ones. There are many other possibilities to launch programs that I will not discuss here.
3. Temporary storage of to do things: docs, links to Games, (code) downloads, etc. Given the limited capacity and to prevent too much clutter on the desktop, things must be handled or deleted.
4. "DashBoard". A dashboard gives live information including notifications, like the former desktop gadgets, in the W10 Menu Start live tiles or Android widgets.

Currently, DesktopCircles only supports 1. and 2. For me 3. is an important use of the desktop (well, we have OneNote and reading lists now). This means that my user experience could become a little better if a copy mode was introduced.

Additionally, I did another exploration and considered my personal experiences with an old Android tablet and Windows 10 from the projection/viewpoint of these functions. Although this discussion is rather immature and the ideas are not so structured, 2 interesting questions pop-up.

Android. On my old tablet, I have a number of discrete "Desktops" with wallpapers (0.) containing hand picked icons (2.) or widgets (4.) on a regular grid. The screens are limited in size, so the number of icons per page is limited and clear and the contents of each page can be memorized enough to find quickly the right page/desktop. By swiping left/right, I get another "desktop". By swiping up, I get the notifications and by swiping down, I get the AppDrawer with all Apps (see 2.). Since the display size is small (1.), I only use fullscreen Apps, no possibility to store temporary documents (3.) on a desktop. This interface is simple, but represented the dominant UI for the dominant mobile market.

Note that original W 8.0 did not support 0. (was later introduced), 1. (well..space was a design element) or 3. but introduced 4. with groups and different size live tiles. Note that in W10, multiple traditional desktops are supported, but there is only support option 1., 0. not supported per desktop and not 2.-4.. This limits the use of the multiple desktops to 1. and iff you can manage your daily open program windows on one desktop, it is of no use. In the W 10 Menu Start BOTH a (1D) list of all programs and a continuous scrollable dashboard with grouped live tiles, different sizes and "Folders" is used. Presenting BOTH is functional, but is it beautiful?

1. An interesting question pops up what is the best 2D organisation of launchable icons/tiles. Is a fixed number of "desktops" with limited number of icons (Android) or is a continuous scrollable plane preferable (menu start in W 10)? The first solution might be preferable because discrete steps and limited number of items per "desktop" helps visual recollection, the second might be more appealing design wise and possibly a larger number of items is directly visible.
2. Another question that pops up is it feasible to add to the Taskbar a mouse "swipe" element that can be dragged/swiped to 4 directions? This does not affect the rest of the desktop and may bridge the mouse/touch gab. By dragging this item, touch swipes can be mimicked. Left, right swipe for scroll through desktops, up (show all Apps), down (notifications). This seems not practical, left dragging dragging items on the Taskbar changes positions on the Taskbar and touch swipes are already defined.

A little program attached to the Taskbar could give some of this user experience with a Jumplist (jump to previous/next desktop, notifications and system settings) or by giving a preview of available desktops. I think it is possible to get and set desktop icons so it could be possible to swap icons and short-cuts (and possible small folders) to swap to/from the windows desktop to mimic multiple desktops with function 2. However, I do not intend to write such a program nor adding a "swipe" button to DesktopCircles.

Possible Improvements for DesktopCircles

I never considered another iteration for this program, but to be complete, here a small list of some possible improvements:

• Regular rectangular window more functional that supports snapped window (windows + arrow key)
• Currently, a number of small discrete planes is used. Experimentation with larger scrollable planes, grouping of items, etc. is possible.
• Use a canvas with AcrylicBrush, see the current W10 calculator UWP App.
• Support more drag/dropping types such as http
• Possibility to add links to UWP apps (showing live information of other Apps not possible for a UWP?)
• Support drag TO desktop/File Explorer instead of drag FROM desktop
• Drop items on the attached Taskbar icon (if that is possible) to an unsorted group
• Add a right click menu to set properties. Possibility to rename, change Icon, parameters etc.
• Introduce an associated file type, that contains all ini files, etc., when opened on the DestTop DesktopCircles will pop up
• Introduce Copy Mode. If item is dragged onto canvas, make a copy of it to a special folder.
• More support for groups/tabs/planes. Add, delete, drag and drop order of groups/tabs.
• Move items between groups by dropping item on grouplist or use right click item menu

Conclusions

• Little program hands-on experiment to organize and launch items on a 2D tabbed plane
• 2D Can hold larger number of items
• I did not used this program often.
• Introduced as discussion/brainstorm framework a list of the functions of desktop
• My personal Android, W 10 experiences were discussed from the perspective of these functions.
• For DesktopCircles, a copy mode could improve the user experience.
• An interesting discussion of the presentation of items in a 2D plane is if we want to have multiple discrete "desktops" with a limited number of items (Android") that can be remembered and found quickly or an infinite continuous scrolling plane (W10 Modern Start Menu) that is more visually appealing and more items are directly visible.
• My first impressions given some hands on experience (ListLauncher, DesktopCircles, PlayMyMusicFolders): Lists (1D) are very good for visual launching. If the number of items increases (visual) scrolling is needed and one large "desktop" or several "desktops" with limited number of items could be preferable for organising. If the number of items is quite large (but still can be hand-picked) the continuous scrollable plane like the W8/W10 Menu Start could be best for browsing.
• Another interesting question if it is feasible to add to the Taskbar a mouse "swipe" element or a regular program that could mimic multiple desktops that support function 2).
• Main improvements for DesktopCircles are to use a rectangular window that can be swapped (Win + Arrow key), an AcrylicBrush, and support a copy mode.

Appendix. Short Discussion of Code

Code is not the focus of this article, however to make the program a litle presentable for this trick/tip, I did a little refactoring. I added a ViewModel (used no MVVM in my first 2 WPF programs) but left some code behind in MainWindow.cs, changed the storage of groups, replaced images by thumbs for dragging and resizing during drag as I used here (removed right click menu).

The approach of the items is similar to ListLauncher but simpler because it is just a non modified drop on canvas. See image below.

The interface of the items (the notified properties are bound in the view to the "DesktopIcon1" control) is now:

public interface IMyItem
{
   BitmapSource Icon { get; set; }

   string FriendlyName { get; set; }

   // FullName is launchable string
   string FullName { get; set; }
   
   // 2D presentation of Icons in plane
   double X { get; set; }
   double Y { get; set; }
   
   // Angle and size for displaying at different angle and size
   // also during dragging
   double Angle { get; set; }
   double Size { get; set; }

   // Angle and size are computed from x,y position, 
   // for example by polynomial transformation of x,y
   double ComputeAngleFromXy();
   double ComputeSizeFromXy();
}

We added properties X,Y for the position on the canvas. We also added properties Angle and Size for adapting these values for placed and dragged icons on the canvas. A gradual non lineair 2D polygonal transformations can be implemented by changing ComputeAngleFromXy() and ComputeSizeFromXy() to suggest for example a 3D sphere.

In the ListLauncher, we defined some properties to indicate special GroupHeader items and to hide items when a group was folded. Since a larger number of short-cuts is possible, I did not want to test visibility of all items of all groups. I introduced in the ViewModel Groups, CurrentGroupNr and GroupItems, see interface of ViewModel below.

public interface IMainVm
{
   // Currently selected group
   int CurrentGroupNr { get; set; }

   // Names of Groups
   ObservableCollection<groupname> Groups { get; set; }

   // Only Items of CurrentGroupNr
   ObservableCollection<myitem> GroupItems { get; set; }
		       
   void LoadNotifiedGroups(ref int currentGroupNr, 
   ref ObservableCollection<groupname> groups, string fileName);
   void SaveNotifiedGroups();

   void InsertToGroupItems(string fullName, 
   string friendlyName = "", double x = 0, double y = 0);

   ICommand GroupChanged { get; }
   void OnGroupChanged(object p);
        
   ICommand Launch { get; }
   ICommand LaunchAndMinimize { get; }
   void OnLaunch(object x, bool minimize = false);

   WindowState CurWindowState { get; set; }

   // Placement of Items
   ICommand StartDragging { get; }
   void OnStartDragging(object x);

   bool DeleteKeyDown { get; set; }

   ICommand EndDragging { get; }
   void OnEndDragging(object x);

   bool MouseEnteredTrash {get;set;}
   void OnTrashHitTest(bool IsHit);
}

All short-cuts of group nr. X are stored in a file DeskTopCirclesX.ini, the names of the groups are stored in a file DesktopCirclesGroups.ini all in the .exe folder.

I refactored to thumbs to place and drag icons on the canvas (Control DesktopIcon1.xaml). When introducing the thumbs for variable angle and size during dragging the dropping on the trashcan broke. I did not bother to revert to images and introduce a MVVM drag and drop framework but did some hacking. To detect after drag Trashcan.IsMouseOver a zIndex=1 is needed, but the dragged/dropped icon now visually disappears below the Trashcan. An extra transparent TrashOverlay with zIndex=1 is introduced so the dragged icon stays visible.

The MouseEnter and MouseEnter events of the overlay are used to update MouseEnteredTrash, that is used to test if an item must be deleted after drag/drop.

I did not add the possibility to add and remove groups. It is possible to add an extra group with an empty groupname. If the (last) groupname gets a value in the notified property, add extra group. If a groupname becomes empty, ask to delete a group. The data structure/saves of the groups is maybe not best suited if groups are dragged and dropped.