GSoC 2018 - Beginner Mode and Tutorial Creation - Week 8

Posted 5 years ago

This is my weekly update on my Google Summer of Code project. There will be three parts of this blog post: what I did, what had issues, and what is next. Then, I will end it with a question that I need answered for part of the project.

What I did

  • Expanded the tour framework

    • Tours are now handled as classes. This allows them to hold much more information than the original list of strings they were. Mostly, it allows them to hold a certain mapping of widgets as described below.

  • Add widget focusing

    • Each message in the tour can now link to specific widgets on the screen. By adding custom named widgets, the tour can "highlight" different widgets for each message, allowing the user to focus their attention on the key components.

  • Fixed attachTour()

    • Before, attachTour was not properly firing the action after the tour ran. After some tests, I switched the event from MouseButtonPress to MouseButtonRelease and it works like a charm.

What had issues

  • Message Box Locations
    • Currently, I am trying to make the message box (which could be later updated to a custom box) appear near the target items. For the most part, its passable. However, it seems that the location will change some what randomly for no particular reason. For example, when accessing the note input toolbar, it will appear below the icons. However, it sometimes appears halfway up a toolbar even though the X, Y are the same. I'll need to look more into this.

What is next

  • Fix message box location
    • As explained above, the message boxes have a strange bug of placing themselves differently on the same coordinates.
  • Improve the highlighting
    • Currently, the highlighting simply makes a blue glow around the items. I'd like it to draw a box around all the important items instead. While this isn't the most important, creating the glow is currently conflicting with the message box location.

Question for the Week

How should the highlighting work? Currently, there is a blue glow as seen here:
picture1.png
However, I think a box around the important items would look better, like so:
picture2.png
Another option is to gray out the items that are not important:
picture3.png

What do you think? Should I improve upon the first method? Or do you like one of the other methods more?

Thanks,

Joshua Bonn
Github: JoshuaBonn1
Current Branch: startup-tour

Comments

• Jul 9, 2018 - 18:10

Nice work! My gut feel is the gray out approach is best - it seems familiar and also not misleading as the other approaches could potentially be (people might be expecting to actually see the highlight in real life, although admittedly this is not particularly reasonable).

Reply

• Jul 9, 2018 - 18:17

I would go for one of the last two options for highlighting. I personally prefer the last one. I would also, if possible and not too difficult to implement, add a kind of flashing to the highlighting for say three seconds to draw the user's eye to the right place. What I mean is something like this:

For 0.5 seconds, the screen should look like one of your two bottom images.
Then, for 0.5 seconds, the screen should look normal (or all grayed out if you choose the third option)
This process should repeat for say three times.
Then the highlighting should stay fixed on screen until you (edit: you as in the person creating the tour) remove it.

Reply