[Userscript] WK Dashboard Cockpit

hello,
after brand new option Extra Study Mode added to Wanikani, will there be a chance of update for this script, so it’ll be possible to use Dashboard Cockpit and at the same time have extra study mode visible?

btw I really love this script, thank you so much for making it :heart:

1 Like

Your timing is impeccable. Version v0.5.4 with support for the new panel is now out. If it doesn’t update automatically you can force the update in Tampermonkey.

edit: new position options for the panel available under the Settings > Panels tab
cockpit_settings_3v0.5.4_70p

2 Likes

haha
thanks for the quickest update I ever seen then :joy:

works great

1 Like

I debated whether I should have published tomorrow - I might be creating unrealistic expectations like this. It took a little longer than 7 mins to code and test all the new position options…:eyes:

5 Likes

don’t worry, I bet no one will expect updates that fast
also yeah, I know coding is not that easy, and it had to take more time to code whole update

2 Likes

Thank you for adding the position options! I’m now using your script alongside the brand-new [Userscript] WK Extra study mover (despite the cockpit taking precedence) for its minimal size setting.

Is there any way you could add an “above SRS progress arc” setting to the extra study positioning?

1 Like

Added to version 0.5.5
This looks particularly good when combining with a hidden review forecast… all the buttons on the top row!

2 Likes

Once I saw all the buttons on the top row, I wondered if I could get them all in the header! Now that Extra Study Mover lets me do this (and I can set Extra Study to none in this script already), it makes the cockpit wheel seem unnecessarily large.

Would it ever be a supported configuration to remove the lessons & reviews buttons and/or shrink the SRS wheel? To avoid messing with this script directly, here’s a demo script you can install that interferes with the cockpit to demonstrate:

Script Code
// ==UserScript==
// @name         Personal Styles
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       UInt2048
// @match        https://www.wanikani.com/
// @match        https://preview.wanikani.com/
// @match        https://www.wanikani.com/dashboard
// @match        https://preview.wanikani.com/dashboard
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    (function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    })('#db_cockpit_CSS').then(element => {
        $('head').append(
            `<style id="UInt2048_CSS">
                 #dbc_gas {
                     grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: auto; min-width:0px;
                 }
                 #dbc_currentLevel {
                     grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: auto;
                 }
                 #dbc_core {
                     grid-column-start: 2; grid-column-end: span 2; grid-row-start: 1; grid-row-end: auto; align: center; margin: 0 auto;
                 }
                 #dbc_bar60 {
                     grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; grid-row-end: auto;
                 }
                 #dbc_cruise {
                     grid-column-start: 4; grid-column-end: 4; grid-row-start: 1; grid-row-end: auto;
                 }
                 #dbc_forecast {
                     grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: auto;
                 }
             </style>`
        );
        $('#dbc_gas').detach();
        $('#dbc_cruise').detach();
        $("#speedometer").width(301).height(301);
    });
})();
Portion of screenshot with this script, etc. running

I know I’ve asked a lot of you recently and I’m aware that any new features requires a maintenance burden even with the code provided, so I understand if you decide not to implement this.

1 Like

shrinking the SRS wheel was on my ‘to do someday’ list already (edit: added in v0.6) -
the cockpit shrinks the buttons because they are so large yet isn’t exactly modest in size either. As you saw, pretty much the entire thing is already dependent on the initial canvas size, so this should be doable.
And the complete hiding of at least the lessons button (I don’t have any lessons f.i. edit: added in v0.6) is something I was already thinking of as well. With scripts that place the buttons in the header, a complete hiding makes sense. (edit: added in v0.6) I’ll see what I can do, but I’m a little busy this week. I’ll add these requests to the to do list for now, so I won’t forget.

1 Like

Hello! Wanted to start off by saying thanks for making this, it adds flair as well as more detailed breakdowns of my progress.

I can’t help but be driven slowly mad by one small things I’ve noticed recently: everyone seems to use their own distinct shade of gold for the burns. I have golden burn installed and assumed that that’s what everyone would be basing their implementation off of, but the colors are all slightly but noticably different. Here’s a screenshot of the hex codes side by side:

Left to right this is Golden Burn’s gold, Dashboard Cockpit’s gold part of the wheel, DC’s gold part of the progress bar, and Overall Progress Bars’s gold part of the progress bar.

Can I ask that you standardize at least the middle two since those are both part of this script? Ideally I’d love if you could just use the left color since that’s what I’ll be asking Kumirei to change his to.

3 Likes

Interesting side note: I got the color for Golden Burn from an actual photo of a gold bar, but that doesn’t mean much since a huge percentage of gold’s color is reflected from its surroundings. Probably all of those shades are legit in the right lighting.

2 Likes

Yeah I don’t mean to say that one or the other is the “correct” gold color. I just want consistency.

1 Like

Shockingly, Dashboard cockpit uses the exact colors from Golden Burn. I simply copied it.
The tricky part here is that both Golden Burn and the wheel part of the cockpit use a color gradient.
It runs from #faac05 to #fbc550 so when sampling, the result depends on which part of the area you sampled. The cockpit’s progress bar does not use a gradient, and simply uses one of the end values.
That I could probably change, so it looks more similar to the wheel. I’ll put it on the list.
edit: added in v0.6

3 Likes

Here you go. :slight_smile:

2 Likes

Thank you!

2 Likes

@Beyond_Sleepy I quoted the post in this thread which created that link. I’m surprised you didn’t notice that’s how it worked before as a Regular.

1 Like

Honestly, I’ve noticed it, understood it, utilized it, and I still failed to make the connection when I saw it there. A brain-fart moment:p

1 Like

Username checks out :stuck_out_tongue:

1 Like

More than you know :sweat_smile:

2 Likes

Version v0.6 is out

  • full integration with Extra Study Mover
  • three different arc sizes now available and (some) support for screen resizing
  • total progress bar uses color gradients like the arc
  • total progress bar location at top of screen
  • total progress bar percentage visibility based on screen real estate
  • added setting to hide main buttons
  • level60 feature: option to auto hide useless items
  • changed match rule to regexp include
  • added fire event on loaded
  • refactor and clean

Total progress bar now uses all the same color gradients as the main wheel. Long overdue!

Option included. Dashboard cockpit does not relocate them anywhere, so a separate script (or a tendency to scroll down so they pop up in the header) is required.

There are now 3 sizes available, I think you’ll want the smallest, which is still 20px larger than what you had configured locally. Shrinking the div itself scales the image, but not the hotspots for the hover information, and the fonts become somewhat blurry, so I went ahead and scaled the drawing itself, including the used fontsizes.

4 Likes