[Userscript]: WaniKani Ultimate Timeline

I finally found this… I’m now wondering… change these values to what? However, making elements “opacity:0” earlier in the script seem to have been sufficient. Still have not yet found the section where I can change 24 hrs to 72. Probably done fiddling for today. The weird tiny burn arrows have stumped me for the moment.

It’s not that the black arrows are getting smaller… they’re getting clipped off the edge of the view. On the new script, white and black arrows each have their own row, so you can see both when they both happen on the same time slot. And since you’ve increased the arrow sizes, the black arrows got bumped down farther, and are being clipped.

To fix it, increase the height of the bottom portion of the graph, on line 43 (approximately):

        graph_height_bottom = 16,

You increased the arrow height by 3px, and there are 2 rows (white and black), so add 6 to the line above.

What? Really? That’s weird. Why aren’t they drawn from the same point (the top, directly under the bar? or the bottom, directly above that base line?)? I don’t understand why they were set differently. Hmm.
But thanks for that insight.

EDIT: finally found that. XD

Ah, seeing your edit, that reasoning makes sense. What about just making a half-white-half-black arrow for those instances? Or having one chosen/priority over the other?

That’s the way the old one did it… but people preferred seeing both. Half’n’half becomes too tiny if you zoom out to a longer period (which is also why the stroke was reduced to 0.5px)

Myself, I’d choose burns over current level, as I’m on team take it slow… (and that’s also why I’ve realized why I had extra arrows on your Ultimate Timeline compared to the old one - you include Vocabulary current level items for the arrows, and there are settings to change that, whereas the old one must’ve only done kanji and radicals or merely kanji - the current level items that account for you levelling up. I am enjoying knowing all the things that are current level, so whether I’m flexing my recent memory/lessons/reviews or not…)

[v6.3.4.4 (Basic Edition)]

  • I’ve shifted the black arrows to the same level as the white ones, unless both occur, then it stacks them vertically.
  • It also shows relative time now, in 12hr increments.
  • The grid labels still always show hours (no matter how many days out), but the slider shows days for anything > 72hrs.
1 Like

Thanks! I wonder how many things I’ve changed I’ll be re-changing. XD but at least I know where to look for the things I did. (I had finally found the slider thing for <72, lightened the grey to .3 opacity, among a few other things I don’t recall but by the looks of your screenshot won’t need to change anyhow… XD) I think I’ll do a Save As and compare…
Having updated: oh yeah! I got rid of the current bars, too… made the white opacity 0… I’ll find that again.

You need a ‘diff’ program (for comparing and merging files).
Maybe check out [kdiff3] or [winmerge].
I use [BeyondCompare4], but it’s a paid program (though it has a free trial).

Oh, I was just going to manually look, and make changes… two notepads open, side by side. How I looked up that other bit of code you posted earlier.
EDIT: Or I could email it to you? But that is probably not a necessary step. I’m sure I could find it again. I’ve probably already wasted a ton of your time on this today. (Sorry.)
EDIT 2: Oh shoot, I saved it in the same folder, I think it got wiped out completely when I re-installed to update…

This is why I like diff programs:

Also, no prob about time. I was killing some time while running ‘diff’ on several versions of Linux for a contract project… and it takes quite a while to compare the entire source code of Linux :slight_smile:

Yikes, I’d bet!

And it seems like I’ve lost that file… the folder must’ve been overwritten entirely.

EDIT: I’ve found and made most of the cosmetic changes again already. ^^ (font size .85em instead of .8, I’d tried actual font sizes initially but that didn’t work way back, a number of opacities have shifted lighter or to 0, the top height 20 to account for the larger font, etc.) Also found a new one, and made the beginning of the graph 20 instead of 28 (horizontal start). I like that.
EDIT 2: I believe I’ve found everything now. If you’d like to see it, I’ll send it your way? *shrugs* Really happy with it! Thanks so much for your patience with me… ^_^;

Yeah! Screenshot please :slight_smile:

Oh, that’s all? I meant the code. XD

I’m also fiddling with other stuff now, mostly to see what some things do… an unnecessary change of swapping the time to the other side of the bar (12 and 24 hrs) because one is close to the slider’s text, mainly. XD Wound up moving the title to the other side, which was dumb, and the 18 items to the inside of the graph instead of the outside, so far (which also didn’t look great). XD
I have the minor grid/graph at 0 opacity again (and the datelines, although I think you turned them off somewhere else, as they didn’t reappear in your update, even though they were on in the section where I knew they were)… although you’ve changed it to be just the middle (which is actually nice)… so I’ll have to remember to look for it at line 119 if ever I have lots of reviews again… right now for the next week the most I ever have at one time is only 18 though… so it’s cleaner without.

Oh, the miniaturized screencap reminds me that I forgot to unbold the text! (EDIT: wait, that doesn’t seem to be a thing, at least not where I made it .85em, unless the em stands for emphasis aka bold… in which case I hadn’t changed it before. Weird that WK is making it look bold in the small screencap.)

Sure, code too, and I can integrate it into GreasyFork. Email me.

You got it!
EDIT: Gmail - “blocked for security reasons!” … in red! I put in the HTML tags to change the text, but Discourse isn’t allowing it. BOO, Discourse, BOO!!!
Shall I save it as a .txt file? Or literally paste it into the email?

Text file would be slightly easier, but whatever works for you.

Okay!
Suddenly I’m unable to save it (at least as a .js) I think I’m experiencing memory issues (with my computer)… Weird Windows 7… I could do more with XP and it wouldn’t crap out. How much memory is Firefox using? O.o Well, I do have a streaming site in one of the tabs… but still.

SENT!

EDIT: Hey, changing this line from “start” to “end” almost did what I was attempting… to the point that I can mostly see the 36 hour marker again (and I now understand why it was missing… I didn’t put two and two together before. *rolls eyes at herself*).

'#timeline .label-x text {text-anchor:end;font-size:0.85em;}'+

Is there a better way? Or should I swap it back to “start” since it was functioning that way? Hm… (Swapped back for the time being.)

The (x,y) location of the text works together with the text-anchor:


    text-anchor:start                 *hello
    text-anchor:end              hello*

      * = the (x,y) location of the text

In reality, the ‘x’ is the location of the grid-line, and the text is located at (x+4,y).
In addition to changing the text-anchor to ‘end’, you want to move the text to (x-4,y), which moves the anchor to the left side of the grid-line.

So, on line 417:

before:  label_x += '<text class="'+tic_class+'" x="'+(x+4)+'" y="'+(graph_height_top-8)+'">'+label+'</text>';
after :  label_x += '<text class="'+tic_class+'" x="'+(x-4)+'" y="'+(graph_height_top-8)+'">'+label+'</text>';

    (x+4) and text-anchor:start               |  *hello
    (x-4) and text-anchor:end         hello*  |
                                              x
      * = our text coordinate
      | = gridline

EDIT: Also, on line 41, you reduced graph_width_left to 20px. If you get over 99 reviews, I think you won’t have room for a 3rd digit.