[Userscript] WK Dashboard Cockpit

release v0.5
Originally started to give a cockpit feel to the dashboard, I deem the script currently stable enough for release. Reasons for this script: see the ‘Short history’ section.
Pending items and release notes are below the script description.

The script relies on the open framework.
Download/install the WK Dashboard Cockpit script from GreasyFork location.

Short history

Since the dashboard updates of March 9, I’ve been triggered into looking more into user side scripting. The new lesson and review buttons were a little large for my taste, and I didn’t like the SRS progress bar being pushed off-screen (although now the search bar is hidden by default, it might just fit back in).
At the same time I figured I would try my hand at HTML5 drawings on canvas elements to add some graphical components to the dashboard. A cockpit idea with the SRS progress bar front and center was quickly born - and then took forever to get working properly. So this script is as much a playground as it is something functional.

As it turns out, canvas drawings and CSS do not mix. So the script now contains considerable amounts of style being applied to the drawings. Also, over time I had picked up quite a few scripts that hooked into the SRS progress bar - which I was busy replacing with something that cannot be referenced by element. And I figured I should include some of this functionality into the drawn SRS arc as well. Most of these scripts rely on analysing the same item data - something the the cockpit script can do in a single pass over the items.
So… the script has turned into something of a monster, borrowing heavily from other scripts by this wonderful community. I always knew I was going to post it someday, as it might interest other (aspiring) scripters (on what not to do), but after seeing expressed interest I decided to set myself a deadline and get the first version out.
Feel free to request updates and point out bugs. There are still a few things I want for this script (see pending items), but more ideas are welcome.

DESCRIPTION

My own main dashboard currently looks like this


The cockpit script supports/reimplements the following existing scripts:

1. seanblue's SRS and Leech Breakdown

Short description: shows the number of items in the individual Apprentice (I-IV) and Guru (I-II) stages.
Original script:
[Userscript] WaniKani Dashboard SRS and Leech Breakdown

2. rfindley's Golden Burn

Short description: turns the Burned section on the SRS arc golden in color.
Dashboad Cockpit does not affect golden burn colors on other items/pages!
Original script:
[Userscript]: Golden Burn

3. Pep95's Total Progress Bar

Short description: adds a progress bar indicating the percentage of total items in each of the main stages.
I originally had other plans for this, but had too many issues with getting it to display properly (without white vertical lines due to rounding issues). So I never got further than a meager version of the orginal. Might be taken out at some point unless I actually do something with it, because right now it adds next to nothing over the original (different placement and caching).
Original script:
[Userscript] Total Progress Bar (Allows Level Progress Removal)(aka 2Cool4Progress)

Not included in the cockpit but visible in the screenshot. These are panels updated by other scripts I have running:

A. Dashboard Level Progress Detail

See original script thread:
[Userscript] Dashboard Level Progress Detail. update to broken script

B. Review Forecast Clock Style

See original script thread:
[Userscript] WK Review Forecast Clock Style

But the cockpit has a few more display options…


The cockpit script supports/reimplements the following existing scripts:

4. Kumirei's Locked Count

Short description: show the count of locked items for current and future levels
Dashboard Cockpit version excludes lessons from the count (as it’s displayed right next to the lessons button)
Original script counted everything that wasn’t yet lessoned.
Original script:
[Userscript] Locked Count

5. seanblue's SRS and Leech Breakdown

Short description: leech counts per SRS stage. What qualifies as a leech? Check the original script post for details, but leeches are essentially items that are answered wrongly multiple times.
Dashboard Cockpit allows the SRS detail and Leech counts to be individually visible or invisible, Leech counts can be displayed in different brightness levels and the Leech threshold is configurable.
Leech threshold is a number from 1-4. The higher the threshold, the fewer items are considered as leeches. Originally any item that has enough errors to pass the leech threshold in either reading errors or meaning errors was counted as a leech. Starting with version v0.3, you can set a minimum nr of errors (reading/meaning combined) so that items you get wrong for the first time aren’t immediately counted as leeches. Allowed values are 1-10 with 1 being the default and making the script behave as it did prior to v0.3.
Starting with v0.2 leech counts can be displayed in bright mode or bright on hover mode. Starting with v0.3 leech counts can be displayed in inverted ellipse mode.
Original script:
[Userscript] WaniKani Dashboard SRS and Leech Breakdown

6. Kumirei's Level by SRS

Short description: for each SRS stage, the highest level for which 90% of the items have reached at least this stage is displayed. The 90% threshold is configurable.
Included as it needs to be displayed next to the SRS progress bar.
Original script:
[Userscript] Levels by SRS

So… does this script add anything itself? Well, apart from the obvious change in SRS progress bar, here are some features of the cockpit:

1. Locked Count in fuel gauge form

Essentially still Kumirei’s Locked Count script.
Short description: show the count of locked items for current and future levels
Dashboard Cockpit version excludes lessons from the count (as it’s displayed right next to the lessons button)
Original script counted everything that wasn’t yet lessoned.
Original script:
[Userscript] Locked Count

2. Smaller lessons and reviews buttons

But with the pictures intact. Starting with v0.4 the script integrates better with Kumirei’s Review Hover Details, keeping the hover information on the review button intact.

3. Level dials displaying each level's progress towards the burn status

Each item is awarded a score based on its progression towards the burned status.

Scoring details

An item scores points for the SRS stage it is in (1 for each of the four Apprentice Levels, 2 for each of the Guru levels and 4 for each of the remaining stages). Locked or unstarted items score 0.
An item also scores points based on how long it has spent in its current stage. For instance, an Apprentice II item (stage length 8 hours) that has spent 2 hours in Apprentice II already, will score 0.25 extra points (2/8). Each of the periods is worth the same number of points as reaching the stage itself.
So a Master item (4 points for the stage, stage length 30 days) that has spent 10 days in Master will score and additional 1.33 (4 * 10/30).
Points for stages are cumulative, so this gives every item a total maximum score of 36 (burned). The score for the level is the average of all the level’s items, and is expressed as a percentage from 0-100, with the dial anywhere from before Apprentice I (score 0) until the middle of Burned (score 100).
Completely unstarted levels and completely burned levels are not displayed.

For a more details overview of display options and hover/click popups see further down.

4. Front and center level indication

Starting with v0.4 the colors of the level indication can be chosen in the settings so the number is visible better regardless of light or dark mode WaniKani.

5. Ability to show/hide various panels

I’ve seen multiple other styles and scripts do the same, but they tend to provide a single combination of hidden panels. Since the cockpit messes with the layout so much, I figured I might as well include.

Caching previous status

This means the page is initially displayed with the information from your previous visit, after which you can see the dials/bars/numbers move upon update (borrowed from hitechbunny/BlazzBolt’s Dashboard Level Progress Detail script).

Smaller tooltips on the SRS arc

cockpit_popups_70p

Hovering over the level dials shows the level progress score. To prevent dials on top of each other,
a minimum separation between dials is configurable. The script will favor display of lower levels over higher ones, regardless of the sequence in which they appear.

Show all dials Minimum separation setting Less clutter
cockpit_dials_hover_70p318x166 cockpit_dial_setting_narrow_70p245x133 cockpit_dial_separation_70p298x160

Click the level dial for a breakdown of the items per SRS stage for that level:

cockpit_dial_clicktipv0.4_70p

Starting with v0.4, you can use the arrow buttons next to the level number to navigate to the next or previous level. All levels that aren’t unstarted or completely burnt can be viewed this way, regardless of whether their level dial is visible on the arc.

Then there are the position options. For instance, using Ultimate Timeline and Dashboard Progress Plus, the dashboard cockpit could look like this:

Settings accessible via the standard menu (click on your gravatar in the menu bar)

cockpit_settings_access_70p

There are three pages of settings currently:

SRS Progress Progress Details Panels
cockpit_settings_1v0.4_70p355x291 cockpit_settings_2_70p355x435 cockpit_settings_3_70p338x211

Pending items

  • Dark theme support
    The drawing aspect requires this be handled explicitly in the script. Have no idea what the cockpit currently looks like in a dark theme.
  • Mobile layouts
    I still need to look into how the whole -m thing works. Current layout will be much too wide.
  • Resizable main arc
    I’m fully aware that I replaced the oversized buttons with an even bigger SRS progress arc. The irony of this is not lost on me.
  • Level 60 goal panel and auto hiding of useless items
    At a certain point the progress panel and lessons button are fairly useless. I have some ideas for a new panel though.
  • Figuring out if I can split this script into some smaller single purpose scripts

Release notes
v0.5 (2020-10-28)
– fixed right margin and width display

v0.4 (2020-10-26)
– bugfix: popup on master category disappears behind header if arc in down orientation
– bugfix: popup on review button from Kumirei’s Review Hover Details script does not display
– extra long progress bar option
– color picker for level number
– added back/forward buttons on level dial popups so all levels can be viewed more easily

v0.3 (2020-08-23)
– altered the leech calculation - an item now needs a minimum of X wrong answers (configurable) to be identified as leech. This prevents items that you get wrong for the very first time from immediately being treated as leeches.
– fix to prevent the total progress bar from covering the top menubar upon scrolling
– fixed the initial display of the locked count
– total progress bar percentage uses a darker font in the burn section if golden burn
is enabled (increase readability)
– added inverted ellipse display option for leech counts

v0.2 (2020-05-07)
– Brightness of leech display is now configurable in the settings. Choose from dull (as it was), bright and “bright on hover”, which highlights the number when hovering the mouse over it.
– adjusted the fuel gauge dial (color, shape)

v0.1 (2020-05-06)
Many thanks to all scripters here. I borrowed generously from you.
First stable release.

52 Likes

That looks absolutely bonkers. Amazing job. :slight_smile:

1 Like

looks baller, gonna install it now

2 Likes

I see this right when I become 60…unbelievable. The UI looks sick!

4 Likes

Very nice.
It took me some time to understand the Levels by SRS stage, until I found @Kumirei’s description of the original script.
I have one question though: Why is the inner ring segment with the Levels by SRS stage or the Level dials shorter than the SRS ring itself?
image

2 Likes

Another small wish:
Could you make the Leech Breakdown numbers more readable, for example with a white number on a dark background? (I know that the original script looks the same, but there I get a more readable number by pointing at it with the mouse cursor.)
image

2 Likes

Good point. I didn’t explain any of the incorporated scripts. I should probably link them or put a subsection in the OP to explain (as there are some differences here and there). edit:done
For the Levels by SRS there is simply an inner ring along the entire arc and the level achieved (90% passed) for that stage is displayed in the ‘middle’ alongside the number of items in that stage.

The level dials work different. Having all items of a level in f.i Guru I needs to put the dial exactly in the middle of Guru I (that’s the most natural position in that case). This automatically means that a fully burnt level would have the dial in the middle of the Burned section (if it were displayed, which it isn’t for fully burnt levels). Hence the bar stops exactly there - no dial could ever pass beyond that point.

I guess it’s faster to state that ‘before Apprentice I’ is the 0% mark and ‘middle of Burned’ is the 100% mark. Pushing the 100% to the end of Burn might be an option - it’s unlike the other parts, but levels tend to huddle together at that point and some extra separation might not be a bad idea. I can try to figure out how to make this an option maybe.

Noted. I agree - it’s not very legible and there is indeed currently no hover behaviour for these. edit: available in v0.2

1 Like

FYI: After playing around with all the script settings, I ended up with the following layout which occupies the full height and about two thirds of the width of my screen with all the informations I want:

3 Likes

Very nice. This will be my look this season.

2 Likes

Lol. I did not test every browser - which one are you using?

You already saw before I edited.
Nevermind, it’s not you, it’s me :stuck_out_tongue:
It’s because of the screenshot feature in firefox. You need to scroll down do click the download button, but that puts the menu bar in the middle of the screenshot.

1 Like

Very cool

2 Likes

phew wipes forehead

It’s so very purrty!

I’m looking forward to the wheel filling up with colours. I don’t know how you got that rainbow effect on the level number in the middle but it’s lush.

Thanks for all this work and for sharing it. I could not find the settings on this one (must be blind).

2 Likes

Radial color gradients - one of the things I learned about while making this :slight_smile:

Just click on your gravatar image in the menu bar.

cockpit_settings_access_70p

1 Like

Merci! That’s what you meant by ‘the usual way’.
I guess I’m new enough to be forgiven :slight_smile:
CatFacePalm

4 Likes

Woah… that’s frickin amazing!

Approved for use by cool cats!

7 Likes

In version 0.2 the brightness of the leech display can be chosen in the settings

release0.2_leech_brightness_70p

2 Likes

This is some incredible work. Ever since the latest update I’ve been longing for a way to reuse the native review timeline space since the Ultimate Timeline has proved more useful to me, and this fits perfectly. I particularly love the settings and how well it interfaces with other scripts. Great stuff.

Now, to devise a way to utilize that leftover space under the dial…

4 Likes

Huh. Just installed. Not sure how I feel about being constantly reminded that I’m not even 25% of the way through this. :rofl: Obviously, I could work it out based on my level. But that gigantic 76.5% locked bar is :dizzy_face:

This is pretty awesome, though. Great job! I’m keeping it for the foreseeable future.

3 Likes