FOLLOWUP: New BOINC Manager Design

valkyrie

Original post:
New BOINC Manager Design

Project:
BOINC Sentinels

Some time back, I started BOINC Sentinels as a platform to experiment with some ideas I had for new user interfaces and improvements to underlying technology for user interfaces.

I made a working prototype of the idea I posted in the original “New BOINC Manager Design” blog post.

It does not have all the functionality of BOINC Manager.  I am using Valkyrie and Hunter (BOINC Manager clone) to test out the underlying framework.

In all the cases I know about the new framework is faster and more efficient than the framework we are currently using.

Precompiled versions of the apps:
Valkyrie.zip
Hunter.zip

Just a waning, all of this is incomplete software.  I am mostly playing around with ideas and running performance tests.

—– Rom

New project name needed

So I have been working on a little side project on and off for a year or two.  Basically I wanted to experiment with different BOINC User Interfaces.

Anyway to make a long story short the project name I started using awhile back is BOINC Monitor.  I didn’t announce it or advertise it.  I just wanted to sit on it and work on it until I had something to show for it.

At the time I started it the only project that was close was called boincmon on SourceForge, but it was more or less abandoned.  Since then Igor Bushin has release a few versions of an application he has named BOINC Monitor.  Congrats to Igor!

So now I need to come up with something different.

Anybody have any ideas?

—– Rom

New BOINC Manager Design

BOINC Manager

I’ve been giving some thought recently to overhauling the BOINC Manager user interface.

The original GUI was a carry over from an MFC based version of BOINC Manager that was created even before I was hired on as an employee.  The original didn’t even have the buttons off on the left hand side, the user would have to have guessed that they could right-click on something to bring up a context menu.

So, here we are four years latter and we are talking about adding more tabs to an interface that is already overly complicated.

My goals were as follows:

  • Combine the simple and advanced GUIs.
  • Reduce information overload. (The less information somebody sees right off the bat the less they have to parse)
  • Use icon based buttons instead of words to describe actions. (Reduces required screen space and simplifies localization)
  • Use icons people are going to recognize. (VCR/DVD Player/CD Player/iPod)
  • Provide a way to drill down into the complicated information. (My grandmother wouldn’t ever need to worry about resetting short term and long term debts for instance)
  • Include context sensitive help in the interface.

Disclaimers:

  • I haven’t thought through the multi-host scenarios yet.
  • The graphics were generated in MS Paint, these would not be used in the actual manager should we ever implement this.
  • This might not go anywhere, David wasn’t to keen on the idea.  He wants to get a formal usability study of a few prototypes before investing in a new user interface.
  • This by no means should be thought of as a comprehensive specification, I think of this as a scratch pad.

If there is interest in the community to see something more formal I will go ahead and spec it out and submit it for review.

Initial Install

After a clean install, the client area should display a quick blurb that BOINC in and of itself is just a task execution engine and needs to be attached to a project/account manager before it can actually process work. 

At the bottom of the blurb should be an attach to project and attach to account manager link.

Working User Interface

Clicking on magglass would bring up a dialog specific to each section. 

In the mock-up on the right hand side the ‘News’ section would disappear unless there are new news items.  The news section is supposed to be a summary roll-up of various RSS feeds for each of the projects.  It would also contain messages generated in the messages area for things like disk space warnings and the like.  Another possible use for it would be the number of new messages for a thread you are watching in a projects forums.

Active Tasks, when expanded, would list the active tasks on the system in the format:

<Project Name>:<Task Name>:<Percent Complete>:Suspend:Resume:Abort

Active Transfers, when expanded, would list the active transfers on the system in the format:

<Project Name>:<Transfer Name>:<Percent Complete>:Suspend:Resume:Abort

Both <Task Name> and <Transfer Name> would be truncated and an ellipse (…) added in the case where the names are to long for the display area.

Projects, when expanded, would list the projects the client is attached too.

Each project, when expanded, would have a section for the following areas:

  • Tasks
  • Transfers
  • Messages
  • Statistics
  • Resource Usage

The main window should have a vertical scroll bar for when everything is expanded, but it should not have a horizontal scroll bar.

—– Rom

[Update 28/08/2008 9:37am]Apologies to Michael Tughan, while I can’t recall seeing his designs for a Mac specific GUI it doesn’t mean I didn’t. I don’t know how much overlap there is, but I thought I had drawn my inspiration from a combination of Outlook 98, MSN Messenger, and Yahoo Messenger.

FOLLOW-UP: BOINC Manager Skin Specifications posted

What about PNG alpha channel on skin elements? For example, transparent elements on the “workunit background” should let the main GUI background seen through.

We need to investigate what is going on their. I’ll let you all know as soon as we find something out.

I would like to modify an existing manager skin like the wcg. I would only like to change some of the background graphics to brand for my BOINC team “Team ACC – Arthur C Clarke” I don’t want to change any of the buttons, tabs, etc.
How can I get a complete skin including the graphic files? With that I could replace only the couple of pieces I need.

This actually turns out to be easier than it sounds.

First off the skin manager attempts to load whatever was defined in the skin.xml file, if it can’t find the file it defaults to the BOINC default image for whatever it was looking for. So that means for your skin.xml file all you would need to define is the background image tag like so:

<?xml version="1.0" encoding="UTF-8"?>
<skin>
  <en>
    <simple>
      <background_image>
        <!-- Background Image for the Simple GUI-->
        <!-- 410x540 -->
        <image>
          <imagesrc>graphic/simplegui_bg.png</imagesrc>
          <background_color>133:181:178</background_color>
        </image>
      </background_image>
    </simple>
  </en>
</skin>

So you could have a directory layout that looked like this:

+ BOINC
|
+----+ Skins
     |
     +----+ Team ACC
          |
          + skin.xml
          |
          + graphic
          |
          +---- simplegui_bg.png

World Community Grid’s skin files can be found here:
http://setiathome.berkeley.edu/cgi-bin/cvsweb.cgi/boinc/clientgui/skins/World%20Community%20Grid/

BOINC’s default skin template files can be found here:
http://setiathome.berkeley.edu/cgi-bin/cvsweb.cgi/boinc/clientgui/res/templates/skins/

I hope this helps.

—– Rom

wxWidgets: Transparent Static Text Controls

So all-in-all I’m really impressed with wxWidgets. Most of the time it is pretty straight forward and easy to figure out, but on Wednesday night through Thursday I was frustrated with the framework. The documentation made it sound easy, and in the end it was easy, but getting their wasn’t so easy.

I went through about 15 iterations before finding the right solution. My worst solution took 2 minutes to finish a re-paint, but it finally did paint everything the right way. During the 2 minutes though there was enough flicker it might have sent somebody into convulsions. I even attempted to use Google to see what others had done, most of the references were really old and stale, all of them didn’t seem to work anymore with 2.6. So I’m posting my solution for others to find and use.

Header File:

   1:  class CTransparentStaticText : public wxStaticText
   2:  { 
   3:      DECLARE_DYNAMIC_CLASS (CTransparentStaticText)
   4:
   5:  public:
   6:      CTransparentStaticText();
   7:      CTransparentStaticText(
   8:          wxWindow* parent,
   9:          wxWindowID id,
  10:          const wxString& label,
  11:          const wxPoint& pos = wxDefaultPosition,
  12:          const wxSize& size = wxDefaultSize,
  13:          long style = 0,
  14:          const wxString& name= wxStaticTextNameStr
  15:      );
  16:
  17:      bool Create(
  18:          wxWindow* parent,
  19:          wxWindowID id,
  20:          const wxString& label,
  21:          const wxPoint& pos = wxDefaultPosition,
  22:          const wxSize& size = wxDefaultSize,
  23:          long style = 0,
  24:          const wxString& name= wxStaticTextNameStr
  25:      );
  26:
  27:      virtual bool HasTransparentBackground() { return true; };
  28:
  29:      virtual void OnPaint(wxPaintEvent& event);
  30:
  31:      DECLARE_EVENT_TABLE()
  32:  };

Source File:

   1:  IMPLEMENT_DYNAMIC_CLASS (CTransparentStaticText, wxStaticText)
   2:
   3:  BEGIN_EVENT_TABLE(CTransparentStaticText, wxStaticText)
   4:      EVT_PAINT(CTransparentStaticText::OnPaint)
   5:  END_EVENT_TABLE()
   6:
   7:
   8:  CTransparentStaticText::CTransparentStaticText() {}
   9:
  10:  CTransparentStaticText::CTransparentStaticText(wxWindow* parent, wxWindowID id, const wxString& label,
         const wxPoint& pos, const wxSize& size, long style, const wxString& name ) {
  11:      Create(parent, id, label, pos, size, style, name);
  12:  }
  13:
  14:
  15:  bool CTransparentStaticText::Create(wxWindow* parent, wxWindowID id, const wxString& label,
         const wxPoint& pos, const wxSize& size, long style, const wxString& name ) {
  16:      bool bRetVal = wxStaticText::Create(parent, id, label, pos, size, style|wxTRANSPARENT_WINDOW, name);
  17:
  18:      SetBackgroundColour(parent->GetBackgroundColour());
  19:      SetBackgroundStyle(wxBG_STYLE_COLOUR);
  20:      SetForegroundColour(parent->GetForegroundColour());
  21:
  22:      return bRetVal;
  23:  }
  24:
  25:
  26:  void CTransparentStaticText::OnPaint(wxPaintEvent& /*event*/) {
  27:      wxPaintDC dc(this);
  28:      dc.SetFont(GetFont());
  29:      dc.DrawText(GetLabel(), 0, 0);
  30:  }

Thanks it. It took a while to find the fix and simple solution, I'm glad I finally figured it out.

My previous iterations were embarrassing.

----- Rom

BOINC Simple GUI Refresh, Part II

Hot off the presses with the latest and greatest look and feel of the simple GUI:

We are getting closer to getting these improvements to alpha and beta testing. The guys at World Community Grid are doing a fantastic job.

Hovering over each project icon, which each project can have it’s own icon, displays additional information:

Clicking on the project icon brings up a list of the project’s web site links that are currently displayed in the advanced GUI as buttons on the left hand side of the screen.

Some stuff still needs some more fine tuning, like the preferences dialog:

Ideally the do work between settings and connect to Internet between settings should have both a start and end time instead of just a start time. World Community Grid is in the process of tweaking their skin, so that is why the preferences dialog looks so different from the main window.

I’ll try and address some concerns brought up by this thread on the S@H forums.

1. The Simple GUI is being written in the wxWidget framework.  Although it looks like, at least for the first release, we’ll only have it enabled for Windows. There are some potential issues we will need to cook on a bit longer for Linux and Mac with regards to fonts, globalization, and localization which will take a bit longer to address.

2. While the simplified view of the clients activities is getting a face lift, we are going to add some more information to the advanced view:

  • Bring able to hide the task pane.
  • Context menus
  • Property pages for both projects and tasks. Property pages should be able to display LTD/STD information. Stuff like that.

This is getting pretty exciting.

—– Rom

BOINC Simplified GUI Efforts

Well the BOINC Default client is about to get a face lift.  David and I have been working with the guys at World Community Grid to come up with a simplier GUI than the one in use today.

The simple GUI will be skinable.  We will be releasing a specification for how to construct skins at a later date.

It is our hope that skins can be used by both projects and teams to present a better experience for everybody.

What we have nailed down so far is that the skin file will be XML, and it’ll contain references to BMPs, JPGs, PNGs, and GIFs.  The skin file will be stored in a subdirectory called ‘skins’.

Here is an example of what a skined BOINC Manager looks like:

%d bloggers like this: