-
-
Save IntrovertedMage/d759ff214f799cfb5e1f8c85daab6cae to your computer and use it in GitHub Desktop.
local readerFooter = require("apps/reader/modules/readerfooter") | |
local ProgressWidget = require("ui/widget/progresswidget") | |
local BD = require("ui/bidi") | |
local Blitbuffer = require("ffi/blitbuffer") | |
local Geom = require("ui/geometry") | |
local Math = require("optmath") | |
local Screen = require("device").screen | |
-- Somewhat empirically chosen threshold to switch between the two designs ;o) | |
local INITIAL_MARKER_HEIGHT_THRESHOLD = Screen:scaleBySize(12) | |
local PROGRESS_FILL_COLOR = Blitbuffer.colorFromString("#4e77f4") -- Your color here | |
local PROGRESS_BORDER_COLOR = Blitbuffer.COLOR_BLACK -- Your color here (B/W only) | |
--[[ | |
COLOR OPTIONS (Lightest to darkest): | |
BB.COLOR_WHITE = Color8(0xFF) | |
BB.COLOR_GRAY_E = Color8(0xEE) | |
BB.COLOR_GRAY_D = Color8(0xDD) | |
BB.COLOR_LIGHT_GRAY = Color8(0xCC) | |
BB.COLOR_GRAY_B = Color8(0xBB) | |
BB.COLOR_GRAY = Color8(0xAA) | |
BB.COLOR_GRAY_9 = Color8(0x99) -- was COLOR_WEB_GRAY | |
BB.COLOR_DARK_GRAY = Color8(0x88) | |
BB.COLOR_GRAY_7 = Color8(0x77) | |
BB.COLOR_GRAY_6 = Color8(0x66) | |
BB.COLOR_GRAY_5 = Color8(0x55) -- was COLOR_DIM_GRAY | |
BB.COLOR_GRAY_4 = Color8(0x44) | |
BB.COLOR_GRAY_3 = Color8(0x33) | |
BB.COLOR_GRAY_2 = Color8(0x22) | |
BB.COLOR_GRAY_1 = Color8(0x11) | |
BB.COLOR_BLACK = Color8(0) | |
Biltbuffer.colorFromString("#233d68") | |
Blitbuffer.colorFromName("red") | |
Blitbuffer.colorFromName("orange") | |
Blitbuffer.colorFromName("yellow") | |
Blitbuffer.colorFromName("green") | |
Blitbuffer.colorFromName("olive") | |
Blitbuffer.colorFromName("cyan") | |
Blitbuffer.colorFromName("blue") | |
Blitbuffer.colorFromName("purple") | |
]]-- | |
local original_init = readerFooter.init | |
function readerFooter:init() | |
original_init(self) | |
self.progress_bar.fillcolor = PROGRESS_FILL_COLOR | |
self.progress_bar.bordercolor = PROGRESS_BORDER_COLOR | |
end | |
local orig_ProgressWidget_updateStyle = ProgressWidget.updateStyle | |
function ProgressWidget:updateStyle(thick, height) | |
orig_ProgressWidget_updateStyle(self, thick, height) | |
self.fillcolor = PROGRESS_FILL_COLOR | |
self.bordercolor = PROGRESS_BORDER_COLOR | |
end | |
function ProgressWidget:paintTo(bb, x, y) | |
local my_size = self:getSize() | |
if not self.dimen then | |
self.dimen = Geom:new{ | |
x = x, y = y, | |
w = my_size.w, | |
h = my_size.h | |
} | |
else | |
self.dimen.x = x | |
self.dimen.y = y | |
end | |
if self.dimen.w == 0 or self.dimen.h == 0 then return end | |
local _mirroredUI = BD.mirroredUILayout() | |
-- We'll draw every bar element in order, bottom to top. | |
local fill_width = my_size.w - 2*(self.margin_h + self.bordersize) | |
local fill_y = y + self.margin_v + self.bordersize | |
local fill_height = my_size.h - 2*(self.margin_v + self.bordersize) | |
if self.radius == 0 then | |
-- If we don't have rounded borders, we can start with a simple border colored rectangle. | |
bb:paintRect(x, y, my_size.w, my_size.h, self.bordercolor) | |
-- And a full background bar inside (i.e., on top) of that. | |
bb:paintRect(x + self.margin_h + self.bordersize, | |
fill_y, | |
math.ceil(fill_width), | |
math.ceil(fill_height), | |
self.bgcolor) | |
else | |
-- Otherwise, we have to start with the background. | |
bb:paintRoundedRect(x, y, my_size.w, my_size.h, self.bgcolor, self.radius) | |
-- Then the border around that. | |
bb:paintBorder(math.floor(x), math.floor(y), | |
my_size.w, my_size.h, | |
self.bordersize, self.bordercolor, self.radius) | |
end | |
-- Then we can just paint the fill rectangle(s) and tick(s) on top of that. | |
-- First the fill bar(s)... | |
-- Fill bar for alternate pages (e.g. non-linear flows). | |
if self.alt and self.alt[1] ~= nil then | |
for i=1, #self.alt do | |
local tick_x = fill_width * ((self.alt[i][1] - 1) / self.last) | |
local width = fill_width * (self.alt[i][2] / self.last) | |
if _mirroredUI then | |
tick_x = fill_width - tick_x - width | |
end | |
tick_x = math.floor(tick_x) | |
width = math.ceil(width) | |
bb:paintRectRGB32(x + self.margin_h + self.bordersize + tick_x, | |
fill_y, | |
width, | |
math.ceil(fill_height), | |
self.altcolor) | |
end | |
end | |
-- Main fill bar for the specified percentage. | |
if self.percentage >= 0 and self.percentage <= 1 then | |
local fill_x = x + self.margin_h + self.bordersize | |
if self.fill_from_right or (_mirroredUI and not self.fill_from_right) then | |
fill_x = fill_x + (fill_width * (1 - self.percentage)) | |
fill_x = math.floor(fill_x) | |
end | |
bb:paintRectRGB32(fill_x, | |
fill_y, | |
math.ceil(fill_width * self.percentage), | |
math.ceil(fill_height), | |
self.fillcolor) | |
-- Overlay the initial position marker on top of that | |
if self.initial_pos_marker and self.initial_percentage >= 0 then | |
if self.height <= INITIAL_MARKER_HEIGHT_THRESHOLD then | |
self.initial_pos_icon:paintTo(bb, Math.round(fill_x + math.ceil(fill_width * self.initial_percentage) - self.height / 4), y - Math.round(self.height / 6)) | |
else | |
self.initial_pos_icon:paintTo(bb, Math.round(fill_x + math.ceil(fill_width * self.initial_percentage) - self.height / 2), y) | |
end | |
end | |
end | |
-- ...then the tick(s). | |
if self.ticks and self.last and self.last > 0 then | |
for i, tick in ipairs(self.ticks) do | |
local tick_x = fill_width * (tick / self.last) | |
if _mirroredUI then | |
tick_x = fill_width - tick_x | |
end | |
tick_x = math.floor(tick_x) | |
bb:paintRect(x + self.margin_h + self.bordersize + tick_x, | |
fill_y, | |
self.tick_width, | |
math.ceil(fill_height), | |
self.bordercolor) | |
end | |
end | |
end | |
Great idea. I starred it.
There's a little bug though: The color won't persist when switching between thin and thick styles because
self.progress_bar:updateStyle()
is called, which resets the colors. here's the fix for that.
Thanks so much, I didn't notice that. I implemented the fix in my file with credit, is that fine?
No big deal if you don't. Fellow coders have to help each other, since we're always just one bug away from a crash. :)
I loved your idea so much I've extended it in a new version:
- I’ve added a menu to change the progress color depending on the progress bar style (either thick or thin).
- The setting is saved, and default values are inferred from the existing hardcoded ones.
- The menu entry is here: Settings 🞂 Status Bar 🞂 Progress Bar 🞂 Thickness, Height and Color 🞂 Progress Color.
- It also works with my other user patches: the thin chapter marks in the status bar and the ability to cycle through status bar presets.
Feel free to copy and modify it, or leave a comment on my gist: it's far from finished.
Thanks for adding RGB colors! I think you're missing an "l" at the start though.
Thanks for adding RGB colors! I think you're missing an "l" at the start though.
Sorry, must have missed a character while copy and pasting. Thanks for pointing it out
I tried it out and when I opened a document, koReader crashed (the "Don't Panic" and picture of a bomb, screen). Do I need to be running a specific version? I didn't change any of your code, as it is right now, and I'm not using any other patches.
I tried it out and when I opened a document, koReader crashed (the "Don't Panic" and picture of a bomb, screen). Do I need to be running a specific version? I didn't change any of your code, as it is right now, and I'm not using any other patches.
Oh that's because paintBorderRGB was a recent addition to koreader base repository and so is in recent nightly builds, I've edited that out now, so it should now work in the most recent stable release (atleast as far as I've tested it)
@IntrovertedMage I'm really sorry, but I've tried your latest code, and I've updated my software to the latest version and it's still not working! Do you think it would be worth it for me to update to the nightly build? and how would I do that?
No you don't need the last nightly build, if you replace here :
-- bb:paintBorderRGB32(x, y, my_size.w, my_size.h, self.bordercolor)
bb:paintRect(x, y, my_size.w, my_size.h, self.bordercolor)
If you want the latest nightly build with a lot more features, but that's sometimes less stable,
you can update through the KOReader top menu's ☰
tab and choose:
Update 🞂 Settings 🞂 Update channel 🞂 Development
Update 🞂 Check for update
It worked, thank you! Colour is pretty muted, but I think that's just because of how small the line is, and also how e-ink screens work, or because I don't know how colours work or something:
I had to make the following changes to the code as well:
-- And a full background bar inside (i.e., on top) of that.
bb:paintRect(x + self.margin_h + self.bordersize,
fill_y,
math.ceil(fill_width),
math.ceil(fill_height),
--self.bgcolor)
self.bordercolor)
--bb:paintRoundedRect(x, y, my_size.w, my_size.h, self.bgcolor, self.radius) -- also had to change this
bb:paintRoundedRect(x, y, my_size.w, my_size.h, self.bordercolor, self.radius)
And I ended up changing my "thin progress bar" from height 3 to height 5 (I'm not mad about it, I actually like this thickness)
I do not understand how to use this. I put it in my patches folder but I don't see any options for the colour of the progressbar. I'm using the latest stable Koreader version. Is there anything else I need to do?
I do not understand how to use this. I put it in my patches folder but I don't see any options for the colour of the progressbar. I'm using the latest stable Koreader version. Is there anything else I need to do?
Sorry this user patch isn't that user friendly, in the first few lines of the code you should be able to write in the color hex code that you want, I never really got round to implementing it into the UI
Most issues running this user patch seem to come from me accidentally leaving a paintborderRGB call while attempting to deal with compatibility issues with the most recent stable version, since I usually work with the most recent nightly version. This should be fixed now, at least it should work with the most recent stable build according to my testing.
I do not understand how to use this. I put it in my patches folder but I don't see any options for the colour of the progressbar. I'm using the latest stable Koreader version. Is there anything else I need to do?
Sorry this user patch isn't that user friendly, in the first few lines of the code you should be able to write in the color hex code that you want, I never really got round to implementing it into the UI
Ah, I see, I must've missed that. Thanks for the clearup. I downloaded it again, changed the hex code, but now it won't show the progress bar, only the background of the bar with the default grey colour (or the progress bar and the background show the same colour, who knows). Any ideas?
I do not understand how to use this. I put it in my patches folder but I don't see any options for the colour of the progressbar. I'm using the latest stable Koreader version. Is there anything else I need to do?
Sorry this user patch isn't that user friendly, in the first few lines of the code you should be able to write in the color hex code that you want, I never really got round to implementing it into the UI
Ah, I see, I must've missed that. Thanks for the clearup. I downloaded it again, changed the hex code, but now it won't show the progress bar, only the background of the bar with the default grey colour (or the progress bar and the background show the same colour, who knows). Any ideas?
Sorry you've been running into so many issues, I've actually made a much better version of this user patch with proper GUI integration (set the color in the menus) Hope this works better.
https://gist.github.com/IntrovertedMage/6ea38091292310241ba436f930ee0cb4
Nice. I‘ll give it a try. Thanks.
Great idea. I starred it.
There's a little bug though: The color won't persist when switching between thin and thick styles because
self.progress_bar:updateStyle()
is called, which resets the colors. here's the fix for that.