unify color specification

colors were a mixture of 4bpp integers (0=white, 15=black) and fractional blackness levels (0=white, 1.0=black) before. This is now unified to use the color specification of the Blitbuffer API.
2025-08-10 00:52:38 +00:00 · 2014-10-22 15:34:11 +02:00
parent 03ac887d46
commit 5982e24d57
34 changed files with 140 additions and 104 deletions
--- a/frontend/apps/filemanager/filemanager.lua
+++ b/frontend/apps/filemanager/filemanager.lua
@@ -18,6 +18,7 @@ local Event = require("ui/event")
 local DEBUG = require("dbg")
 local _ = require("gettext")
 local util = require("ffi/util")
+local Blitbuffer = require("ffi/blitbuffer")

 local FileManager = InputContainer:extend{
    title = _("FileManager"),
@@ -124,7 +125,7 @@ function FileManager:init()
    local fm_ui = FrameContainer:new{
        padding = 0,
        bordersize = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        self.layout,
    }

--- a/frontend/apps/opdscatalog/opdscatalog.lua
+++ b/frontend/apps/opdscatalog/opdscatalog.lua
@@ -16,6 +16,7 @@ local Event = require("ui/event")
 local DEBUG = require("dbg")
 local _ = require("gettext")
 local util = require("ffi/util")
+local Blitbuffer = require("ffi/blitbuffer")

 local OPDSCatalog = InputContainer:extend{
    title = _("OPDS Catalog"),
@@ -58,7 +59,7 @@ function OPDSCatalog:init()
    self[1] = FrameContainer:new{
        padding = 0,
        bordersize = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        opds_browser,
    }

--- a/frontend/apps/reader/modules/readercropping.lua
+++ b/frontend/apps/reader/modules/readercropping.lua
@@ -13,6 +13,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan")
 local Button = require("ui/widget/button")
 local Math = require("optmath")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")

 local PageCropDialog = VerticalGroup:new{
    ok_text = "OK",
@@ -57,7 +58,7 @@ function PageCropDialog:init()
    table.insert(horizontal_group, cancel_container)
    self[2] = FrameContainer:new{
        horizontal_group,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        bordersize = 0,
        padding = 0,
    }
@@ -72,7 +73,7 @@ function ReaderCropping:onPageCrop(mode)
    self.orig_view_dimen = Geom:new{w = self.view.dimen.w, h = self.view.dimen.h}
    -- backup original view bgcolor
    self.orig_view_bgcolor = self.view.outer_page_color
-    self.view.outer_page_color = 7 -- gray bgcolor
+    self.view.outer_page_color = Blitbuffer.gray(0.5) -- gray bgcolor
    -- backup original zoom mode as cropping use "page" zoom mode
    self.orig_zoom_mode = self.view.zoom_mode
    -- backup original page scroll
--- a/frontend/apps/reader/modules/readerfooter.lua
+++ b/frontend/apps/reader/modules/readerfooter.lua
@@ -14,6 +14,7 @@ local Geom = require("ui/geometry")
 local Event = require("ui/event")
 local Font = require("ui/font")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")

 local ReaderFooter = InputContainer:new{
    mode = 1,
@@ -99,7 +100,7 @@ function ReaderFooter:init()
            dimen = Geom:new{w = Screen:getWidth(), h = self.height*2},
            FrameContainer:new{
                horizontal_group,
-                background = 0,
+                background = Blitbuffer.COLOR_WHITE,
                bordersize = 0,
                padding = 0,
            }
--- a/frontend/apps/reader/modules/readerscreenshot.lua
+++ b/frontend/apps/reader/modules/readerscreenshot.lua
@@ -34,7 +34,6 @@ end

 function ReaderScreenshot:onScreenshot()
    if os.execute("screenshot") ~= 0 then
-        Screen.bb:invert()
        local screenshot_name = os.date("screenshots/Screenshot_%Y-%B-%d_%Hh%M.pam")
        UIManager:show(InfoMessage:new{
            text = _("Writing screen to ")..screenshot_name,
@@ -42,7 +41,6 @@ function ReaderScreenshot:onScreenshot()
        })
        Screen.bb:writePAM(screenshot_name)
        DEBUG(screenshot_name)
-        Screen.bb:invert()
    end
    UIManager.full_refresh = true
    return true
--- a/frontend/apps/reader/modules/readerview.lua
+++ b/frontend/apps/reader/modules/readerview.lua
@@ -7,6 +7,7 @@ local Screen = require("ui/screen")
 local Geom = require("ui/geometry")
 local Event = require("ui/event")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")
 local _ = require("gettext")

 local ReaderView = OverlapGroup:new{
@@ -22,10 +23,10 @@ local ReaderView = OverlapGroup:new{
        offset = nil,
        bbox = nil,
    },
-    outer_page_color = DOUTER_PAGE_COLOR,
+    outer_page_color = Blitbuffer.gray(DOUTER_PAGE_COLOR/15),
    -- hightlight with "lighten" or "underscore" or "invert"
    highlight = {
-        lighten_color = 0.2, -- color range [0.0, 1.0]
+        lighten_factor = 0.2,
        temp_drawer = "invert",
        temp = {},
        saved_drawer = "lighten",
@@ -34,13 +35,13 @@ local ReaderView = OverlapGroup:new{
    highlight_visible = true,
    -- PDF/DjVu continuous paging
    page_scroll = nil,
-    page_bgcolor = DBACKGROUND_COLOR,
+    page_bgcolor = Blitbuffer.gray(DBACKGROUND_COLOR/15),
    page_states = {},
    scroll_mode = "vertical",
    page_gap = {
        width = Screen:scaleByDPI(8),
        height = Screen:scaleByDPI(8),
-        color = 8,
+        color = Blitbuffer.gray(0.5),
    },
    -- DjVu page rendering mode (used in djvu.c:drawPage())
    render_mode = DRENDER_MODE, -- default to COLOR
@@ -431,12 +432,12 @@ function ReaderView:drawHighlightRect(bb, x, y, rect, drawer)

    if drawer == "underscore" then
        self.highlight.line_width = self.highlight.line_width or 2
-        self.highlight.line_color = self.highlight.line_color or 5
+        self.highlight.line_color = self.highlight.line_color or Blitbuffer.gray(0.33)
        bb:paintRect(x, y+h-1, w,
            self.highlight.line_width,
            self.highlight.line_color)
    elseif drawer == "lighten" then
-        bb:lightenRect(x, y, w, h, self.highlight.lighten_color)
+        bb:lightenRect(x, y, w, h, self.highlight.lighten_factor)
    elseif drawer == "invert" then
        bb:invertRect(x, y, w, h)
    end
--- a/frontend/ui/device/screen.lua
+++ b/frontend/ui/device/screen.lua
@@ -119,11 +119,14 @@ end
    -- For the Kobo Aura an offset is needed, because the bezel make the
    -- visible screen smaller.
 function Screen:PhoenixBezelCleaner()
-    -- bb.paintRect(x, y, w, h, color)
-    self.bb:paintRect(0,0, Screen:getWidth(), Screen:offsetY() , 0 )
-    self.bb:paintRect(0,0, Screen:offsetX(), Screen:getHeight(), 0 )
-    self.bb:paintRect(Screen:getWidth() + Screen:offsetX(), 0 , Screen:getWidth() - Screen:getWidth() - Screen:offsetX(), Screen:getHeight(), 0 )
-    self.bb:paintRect(0, Screen:getHeight() + Screen:offsetY(), Screen:offsetX(), Screen:getWidth(), 0 )
+    self.bb:paintRect(0,0, Screen:getWidth(), Screen:offsetY(), Blitbuffer.COLOR_WHITE)
+    self.bb:paintRect(0,0, Screen:offsetX(), Screen:getHeight(), Blitbuffer.COLOR_WHITE)
+    self.bb:paintRect(Screen:getWidth() + Screen:offsetX(), 0,
+        Screen:getWidth() - Screen:getWidth() - Screen:offsetX(), Screen:getHeight(),
+        Blitbuffer.COLOR_WHITE)
+    self.bb:paintRect(0, Screen:getHeight() + Screen:offsetY(),
+        Screen:offsetX(), Screen:getWidth(),
+        Blitbuffer.COLOR_WHITE)
 end

 function Screen:refresh(refresh_type, waveform_mode, x, y, w, h)
--- a/frontend/ui/rendertext.lua
+++ b/frontend/ui/rendertext.lua
@@ -149,9 +149,7 @@ function RenderText:renderUtf8Text(buffer, x, y, face, text, kerning, bold, fgco
    end

    if not fgcolor then
-        fgcolor = BlitBuffer.Color8(0xFF)
-    elseif type(fgcolor) == "number" then
-        fgcolor = BlitBuffer.Color8(fgcolor*0xFF)
+        fgcolor = BlitBuffer.COLOR_BLACK
    end

    -- may still need more adaptive pen placement when kerning,
--- a/frontend/ui/widget/button.lua
+++ b/frontend/ui/widget/button.lua
@@ -10,6 +10,7 @@ local UIManager = require("ui/uimanager")
 local Device = require("ui/device")
 local DEBUG = require("dbg")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 a button widget that shows text or a icon and handles callback when tapped
@@ -22,7 +23,7 @@ local Button = InputContainer:new{
    enabled = true,
    margin = 0,
    bordersize = 3,
-    background = 0,
+    background = Blitbuffer.COLOR_WHITE,
    radius = 15,
    padding = 2,
    width = nil,
@@ -34,7 +35,7 @@ function Button:init()
    if self.text then
        self.label_widget = TextWidget:new{
            text = self.text,
-            fgcolor = self.enabled and 1.0 or 0.5,
+            fgcolor = Blitbuffer.gray(self.enabled and 1.0 or 0.5),
            bold = true,
            face = Font:getFace(self.text_font_face, self.text_font_size)
        }
@@ -64,9 +65,9 @@ function Button:init()
        }
    }
    if self.preselect then
-        self.frame.color = 15
+        self.frame.color = Blitbuffer.COLOR_BLACK
    else
-        self.frame.color = 5
+        self.frame.color = Blitbuffer.gray(0.33)
    end
    self.dimen = self.frame:getSize()
    self[1] = self.frame
@@ -91,19 +92,19 @@ function Button:init()
 end

 function Button:onFocus()
-    self[1].color = 15
+    self[1].color = Blitbuffer.COLOR_BLACK
    return true
 end

 function Button:onUnfocus()
-    self[1].color = 5
+    self[1].color = Blitbuffer.gray(0.33)
    return true
 end

 function Button:enable()
    self.enabled = true
    if self.text then
-        self.label_widget.fgcolor = self.enabled and 1.0 or 0.5
+        self.label_widget.fgcolor = Blitbuffer.gray(self.enabled and 1.0 or 0.5)
    else
        self.label_widget.dim = not self.enabled
    end
@@ -112,7 +113,7 @@ end
 function Button:disable()
    self.enabled = false
    if self.text then
-        self.label_widget.fgcolor = self.enabled and 1.0 or 0.5
+        self.label_widget.fgcolor = Blitbuffer.gray(self.enabled and 1.0 or 0.5)
    else
        self.label_widget.dim = not self.enabled
    end
--- a/frontend/ui/widget/buttondialog.lua
+++ b/frontend/ui/widget/buttondialog.lua
@@ -9,6 +9,7 @@ local Input = require("ui/input")
 local Screen = require("ui/screen")
 local UIManager = require("ui/uimanager")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 local ButtonDialog = InputContainer:new{
    buttons = nil,
@@ -41,7 +42,7 @@ function ButtonDialog:init()
                buttons = self.buttons,
                show_parent = self,
            },
-            background = 0,
+            background = Blitbuffer.COLOR_WHITE,
            bordersize = 2,
            radius = 7,
            padding = 2,
--- a/frontend/ui/widget/buttontable.lua
+++ b/frontend/ui/widget/buttontable.lua
@@ -5,6 +5,7 @@ local LineWidget = require("ui/widget/linewidget")
 local Button = require("ui/widget/button")
 local Screen = require("ui/screen")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 local ButtonTable = VerticalGroup:new{
    width = Screen:getWidth(),
@@ -46,7 +47,7 @@ function ButtonTable:init()
            }
            local button_dim = button:getSize()
            local vertical_sep = LineWidget:new{
-                background = 8,
+                background = Blitbuffer.gray(0.5),
                dimen = Geom:new{
                    w = self.sep_width,
                    h = button_dim.h,
@@ -67,7 +68,7 @@ end
 function ButtonTable:addHorizontalSep()
    table.insert(self, VerticalSpan:new{ width = Screen:scaleByDPI(2) })
    table.insert(self, LineWidget:new{
-        background = 8,
+        background = Blitbuffer.gray(0.5),
        dimen = Geom:new{
            w = self.width,
            h = self.sep_width,
--- a/frontend/ui/widget/configdialog.lua
+++ b/frontend/ui/widget/configdialog.lua
@@ -24,6 +24,7 @@ local Screen = require("ui/screen")
 local Event = require("ui/event")
 local DEBUG = require("dbg")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 local MenuBarItem = InputContainer:new{}
 function MenuBarItem:init()
@@ -97,9 +98,9 @@ end

 function OptionTextItem:onTapSelect()
    for _, item in pairs(self.items) do
-        item[1].color = 0
+        item[1].color = Blitbuffer.COLOR_WHITE
    end
-    self[1].color = 15
+    self[1].color = Blitbuffer.COLOR_BLACK
    self.config:onConfigChoose(self.values, self.name,
                    self.event, self.args,
                    self.events, self.current_item)
@@ -148,10 +149,10 @@ end
 function OptionIconItem:onTapSelect()
    for _, item in pairs(self.items) do
        --item[1][1].invert = false
-        item[1].color = 0
+        item[1].color = Blitbuffer.COLOR_WHITE
    end
    --self[1][1].invert = true
-    self[1].color = 15
+    self[1].color = Blitbuffer.COLOR_BLACK
    self.config:onConfigChoose(self.values, self.name,
                    self.event, self.args,
                    self.events, self.current_item)
@@ -308,7 +309,7 @@ function ConfigOption:init()
                                face = Font:getFace(item_font_face, item_font_size[d]),
                            },
                            padding = 3,
-                            color = d == current_item and 15 or 0,
+                            color = d == current_item and Blitbuffer.COLOR_BLACK or Blitbuffer.COLOR_WHITE,
                        }
                    else
                        option_item = OptionTextItem:new{
@@ -317,7 +318,7 @@ function ConfigOption:init()
                                face = Font:getFace(item_font_face, item_font_size),
                            },
                            padding = -3,
-                            color = d == current_item and 15 or 0,
+                            color = d == current_item and Blitbuffer.COLOR_BLACK or Blitbuffer.COLOR_WHITE,
                        }
                    end
                    option_items[d] = option_item
@@ -355,7 +356,7 @@ function ConfigOption:init()
                            file = self.options[c].item_icons[d]
                        },
                        padding = -2,
-                        color = d == current_item and 15 or 0,
+                        color = d == current_item and Blitbuffer.COLOR_BLACK or Blitbuffer.COLOR_WHITE,
                    }
                    option_items[d] = option_item
                    option_item.items = option_items
@@ -403,7 +404,7 @@ function ConfigOption:init()
    self.dimen = vertical_group:getSize()
 end

-local ConfigPanel = FrameContainer:new{ background = 0, bordersize = 0, }
+local ConfigPanel = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, bordersize = 0, }
 function ConfigPanel:init()
    local config_options = self.config_dialog.config_options
    local default_option = config_options.default_options and config_options.default_options
@@ -416,7 +417,7 @@ function ConfigPanel:init()
    table.insert(self, panel)
 end

-local MenuBar = FrameContainer:new{ background = 0, }
+local MenuBar = FrameContainer:new{ background = Blitbuffer.COLOR_WHITE, }
 function MenuBar:init()
    local config_options = self.config_dialog.config_options
    local menu_items = {}
@@ -519,7 +520,7 @@ function ConfigDialog:update()
        config_dialog = self,
    }
    self.dialog_frame = FrameContainer:new{
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        VerticalGroup:new{
            self.config_panel,
            self.config_menubar,
--- a/frontend/ui/widget/confirmbox.lua
+++ b/frontend/ui/widget/confirmbox.lua
@@ -16,6 +16,7 @@ local Screen = require("ui/screen")
 local Font = require("ui/font")
 local DEBUG = require("dbg")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 -- screen

@@ -75,7 +76,7 @@ function ConfirmBox:init()
    self[1] = CenterContainer:new{
        dimen = Screen:getSize(),
        FrameContainer:new{
-            background = 0,
+            background = Blitbuffer.COLOR_WHITE,
            margin = self.margin,
            padding = self.padding,
            VerticalGroup:new{
--- a/frontend/ui/widget/container/framecontainer.lua
+++ b/frontend/ui/widget/container/framecontainer.lua
@@ -1,5 +1,6 @@
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 A FrameContainer is some graphics content (1 widget) that is surrounded by a
@@ -7,7 +8,7 @@ frame
 --]]
 local FrameContainer = WidgetContainer:new{
    background = nil,
-    color = 15,
+    color = Blitbuffer.COLOR_BLACK,
    margin = 0,
    radius = 0,
    bordersize = 2,
--- a/frontend/ui/widget/container/underlinecontainer.lua
+++ b/frontend/ui/widget/container/underlinecontainer.lua
@@ -1,5 +1,6 @@
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 an UnderlineContainer is a WidgetContainer that is able to paint
@@ -9,7 +10,8 @@ a line under its child node
 local UnderlineContainer = WidgetContainer:new{
    linesize = 2,
    padding = 1,
-    color = 0,
+    -- TODO: shouldn't this default to black instead?
+    color = Blitbuffer.COLOR_WHITE,
    vertical_align = "top",
 }

--- a/frontend/ui/widget/dictquicklookup.lua
+++ b/frontend/ui/widget/dictquicklookup.lua
@@ -22,6 +22,7 @@ local Event = require("ui/event")
 local Font = require("ui/font")
 local DEBUG = require("dbg")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 Display quick lookup word definition
@@ -198,7 +199,7 @@ function DictQuickLookup:update()
        show_parent = self,
    }
    local title_bar = LineWidget:new{
-        --background = 8,
+        --background = Blitbuffer.gray(0.5),
        dimen = Geom:new{
            w = button_table:getSize().w + self.button_padding,
            h = Screen:scaleByDPI(2),
@@ -215,7 +216,7 @@ function DictQuickLookup:update()
        bordersize = 3,
        padding = 0,
        margin = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        VerticalGroup:new{
            align = "left",
            self.dict_bar,
--- a/frontend/ui/widget/infomessage.lua
+++ b/frontend/ui/widget/infomessage.lua
@@ -13,6 +13,7 @@ local Geom = require("ui/geometry")
 local Input = require("ui/input")
 local Screen = require("ui/screen")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 Widget that displays an informational message
@@ -61,7 +62,7 @@ function InfoMessage:init()
        dimen = Screen:getSize(),
        FrameContainer:new{
            margin = 2,
-            background = 0,
+            background = Blitbuffer.COLOR_WHITE,
            HorizontalGroup:new{
                align = "center",
                image_widget,
--- a/frontend/ui/widget/inputdialog.lua
+++ b/frontend/ui/widget/inputdialog.lua
@@ -11,6 +11,7 @@ local UIManager = require("ui/uimanager")
 local Screen = require("ui/screen")
 local Geom = require("ui/geometry")
 local Font = require("ui/font")
+local Blitbuffer = require("ffi/blitbuffer")

 local InputDialog = InputContainer:new{
    title = "",
@@ -72,7 +73,7 @@ function InputDialog:init()
        show_parent = self,
    }
    self.title_bar = LineWidget:new{
-        --background = 8,
+        --background = Blitbuffer.gray(0.5),
        dimen = Geom:new{
            w = self.button_table:getSize().w + self.button_padding,
            h = Screen:scaleByDPI(2),
@@ -84,7 +85,7 @@ function InputDialog:init()
        bordersize = 3,
        padding = 0,
        margin = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        VerticalGroup:new{
            align = "left",
            self.title,
--- a/frontend/ui/widget/inputtext.lua
+++ b/frontend/ui/widget/inputtext.lua
@@ -11,6 +11,7 @@ local Screen = require("ui/screen")
 local Font = require("ui/font")
 local DEBUG = require("dbg")
 local util = require("ffi/util")
+local Blitbuffer = require("ffi/blitbuffer")

 local InputText = InputContainer:new{
    text = "",
@@ -51,7 +52,7 @@ end
 function InputText:initTextBox(text)
    self.text = text
    self:initCharlist(text)
-    local fgcolor = self.text == "" and 0.5 or 1.0
+    local fgcolor = Blitbuffer.gray(self.text == "" and 0.5 or 1.0)

    local text_widget = nil
    local show_text = self.text
@@ -82,7 +83,7 @@ function InputText:initTextBox(text)
        bordersize = self.bordersize,
        padding = self.padding,
        margin = self.margin,
-        color = self.focused and 15 or 8,
+        color = Blitbuffer.gray(self.focused and 1.0 or 0.5),
        text_widget,
    }
    self.dimen = self[1]:getSize()
@@ -125,12 +126,12 @@ end

 function InputText:unfocus()
    self.focused = false
-    self[1].color = 8
+    self[1].color = Blitbuffer.gray(0.5)
 end

 function InputText:focus()
    self.focused = true
-    self[1].color = 15
+    self[1].color = Blitbuffer.COLOR_BLACK
 end

 function InputText:onShowKeyboard()
--- a/frontend/ui/widget/linewidget.lua
+++ b/frontend/ui/widget/linewidget.lua
@@ -1,8 +1,9 @@
 local Widget = require("ui/widget/widget")
+local Blitbuffer = require("ffi/blitbuffer")

 local LineWidget = Widget:new{
    style = "solid",
-    background = 15,
+    background = Blitbuffer.COLOR_BLACK,
    dimen = nil,
    --@TODO replay dirty hack here  13.03 2013 (houqp)
    empty_segments = nil,
--- a/frontend/ui/widget/linkbox.lua
+++ b/frontend/ui/widget/linkbox.lua
@@ -4,10 +4,11 @@ local UIManager = require("ui/uimanager")
 local Screen = require("ui/screen")
 local Geom = require("ui/geometry")
 local Device = require("ui/device")
+local Blitbuffer = require("ffi/blitbuffer")

 local LinkBox = InputContainer:new{
    box = nil,
-    color = 8,
+    color = Blitbuffer.gray(0.5),
    radius = 0,
    bordersize = 2,
 }
--- a/frontend/ui/widget/logindialog.lua
+++ b/frontend/ui/widget/logindialog.lua
@@ -8,6 +8,7 @@ local Geom = require("ui/geometry")
 local Screen = require("ui/screen")
 local DEBUG = require("dbg")
 local _ = require("gettext")
+local Blitbuffer = require("ffi/blitbuffer")

 local LoginDialog = InputDialog:extend{
    username = "",
@@ -45,7 +46,7 @@ function LoginDialog:init()
        bordersize = 3,
        padding = 0,
        margin = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        VerticalGroup:new{
            align = "left",
            self.title,
--- a/frontend/ui/widget/menu.lua
+++ b/frontend/ui/widget/menu.lua
@@ -25,6 +25,7 @@ local UIManager = require("ui/uimanager")
 local RenderText = require("ui/rendertext")
 local InfoMessage = require("ui/widget/infomessage")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")
 local _ = require("gettext")

 --[[
@@ -44,11 +45,11 @@ function ItemShortCutIcon:init()
    end

    local radius = 0
-    local background = 0
+    local background = Blitbuffer.COLOR_WHITE
    if self.style == "rounded_corner" then
        radius = math.floor(self.width/2)
    elseif self.style == "grey_square" then
-        background = 3
+        background = Blitbuffer.gray(0.2)
    end

    --@TODO calculate font size by icon size  01.05 2012 (houqp)
@@ -252,13 +253,13 @@ function MenuItem:init()
 end

 function MenuItem:onFocus()
-    self._underline_container.color = 15
+    self._underline_container.color = Blitbuffer.COLOR_BLACK
    self.key_events = self.active_key_events
    return true
 end

 function MenuItem:onUnfocus()
-    self._underline_container.color = 0
+    self._underline_container.color = Blitbuffer.COLOR_WHITE
    self.key_events = {}
    return true
 end
@@ -497,7 +498,7 @@ function Menu:init()
    end

    self[1] = FrameContainer:new{
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        bordersize = self.is_borderless and 0 or 2,
        padding = 0,
        margin = 0,
--- a/frontend/ui/widget/multiinputdialog.lua
+++ b/frontend/ui/widget/multiinputdialog.lua
@@ -10,6 +10,7 @@ local Screen = require("ui/screen")
 local DEBUG = require("dbg")
 local _ = require("gettext")
 local util = require("ffi/util")
+local Blitbuffer = require("ffi/blitbuffer")

 local InfoMessage = require("ui/widget/infomessage")
 local input_field
@@ -65,7 +66,7 @@ function MultiInputDialog:init()
        bordersize = 3,
        padding = 0,
        margin = 0,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        VerticalGroupData,
    }

--- a/frontend/ui/widget/notification.lua
+++ b/frontend/ui/widget/notification.lua
@@ -9,6 +9,7 @@ local UIManager = require("ui/uimanager")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local Input = require("ui/input")
 local Screen = require("ui/screen")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 Widget that displays a tiny notification on top of screen
@@ -39,7 +40,7 @@ function Notification:init()
            h = Screen:getHeight()/10,
        },
        FrameContainer:new{
-            background = 0,
+            background = Blitbuffer.COLOR_WHITE,
            radius = 0,
            margin = self.margin,
            padding = self.padding,
--- a/frontend/ui/widget/progresswidget.lua
+++ b/frontend/ui/widget/progresswidget.lua
@@ -1,5 +1,6 @@
 local Widget = require("ui/widget/widget")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 ProgressWidget shows a progress bar
@@ -11,9 +12,9 @@ local ProgressWidget = Widget:new{
    margin_v = 1,
    radius = 2,
    bordersize = 1,
-    bordercolor = 15,
-    bgcolor = 0,
-    rectcolor = 10,
+    bordercolor = Blitbuffer.COLOR_BLACK,
+    bgcolor = Blitbuffer.COLOR_WHITE,
+    rectcolor = Blitbuffer.gray(0.7),
    percentage = nil,
    ticks = {},
    tick_width = 3,
--- a/frontend/ui/widget/scrolltextwidget.lua
+++ b/frontend/ui/widget/scrolltextwidget.lua
@@ -8,6 +8,7 @@ local Screen = require("ui/screen")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
 local Device = require("ui/device")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 Text widget with vertical scroll bar
@@ -15,7 +16,7 @@ Text widget with vertical scroll bar
 local ScrollTextWidget = InputContainer:new{
    text = nil,
    face = nil,
-    fgcolor = 1.0, -- [0.0, 1.0]
+    fgcolor = Blitbuffer.COLOR_BLACK,
    width = 400,
    height = 20,
    scroll_bar_width = Screen:scaleByDPI(6),
--- a/frontend/ui/widget/textboxwidget.lua
+++ b/frontend/ui/widget/textboxwidget.lua
@@ -13,7 +13,7 @@ local TextBoxWidget = Widget:new{
    text = nil,
    face = nil,
    bold = nil,
-    fgcolor = 1.0, -- [0.0, 1.0]
+    fgcolor = Blitbuffer.COLOR_BLACK,
    width = 400, -- in pixels
    height = nil,
    first_line = 1,
--- a/frontend/ui/widget/textwidget.lua
+++ b/frontend/ui/widget/textwidget.lua
@@ -2,6 +2,7 @@ local Widget = require("ui/widget/widget")
 local Screen = require("ui/screen")
 local RenderText = require("ui/rendertext")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 A TextWidget puts a string on a single line
@@ -10,7 +11,7 @@ local TextWidget = Widget:new{
    text = nil,
    face = nil,
    bold = nil,
-    fgcolor = 1.0, -- [0.0, 1.0]
+    fgcolor = Blitbuffer.COLOR_BLACK,
    _bb = nil,
    _length = 0,
    _height = 0,
--- a/frontend/ui/widget/toggleswitch.lua
+++ b/frontend/ui/widget/toggleswitch.lua
@@ -11,12 +11,13 @@ local Screen = require("ui/screen")
 local Device = require("ui/device")
 local GestureRange = require("ui/gesturerange")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")
 local _ = require("gettext")

 local ToggleLabel = TextWidget:new{
    bold = true,
-    bgcolor = 0,
-    fgcolor = 1,
+    bgcolor = Blitbuffer.COLOR_WHITE,
+    fgcolor = Blitbuffer.COLOR_BLACK,
 }

 function ToggleLabel:paintTo(bb, x, y)
@@ -26,8 +27,8 @@ end
 local ToggleSwitch = InputContainer:new{
    width = Screen:scaleByDPI(216),
    height = Screen:scaleByDPI(30),
-    bgcolor = 0, -- unfoused item color
-    fgcolor = 7, -- focused item color
+    bgcolor = Blitbuffer.COLOR_WHITE, -- unfoused item color
+    fgcolor = Blitbuffer.gray(0.5), -- focused item color
 }

 function ToggleSwitch:init()
@@ -37,7 +38,13 @@ function ToggleSwitch:init()
    local label_font_face = "cfont"
    local label_font_size = 16

-    self.toggle_frame = FrameContainer:new{background = 0, color = 7, radius = 7, bordersize = 1, padding = 2,}
+    self.toggle_frame = FrameContainer:new{
+        background = Blitbuffer.COLOR_WHITE,
+        color = Blitbuffer.gray(0.5),
+        radius = 7,
+        bordersize = 1,
+        padding = 2,
+    }
    self.toggle_content = HorizontalGroup:new{}

    for i=1,#self.toggle do
@@ -51,8 +58,8 @@ function ToggleSwitch:init()
            label,
        }
        local button = FrameContainer:new{
-            background = 0,
-            color = 7,
+            background = Blitbuffer.COLOR_WHITE,
+            color = Blitbuffer.gray(0.5),
            margin = 0,
            radius = 5,
            bordersize = 1,
@@ -91,11 +98,11 @@ function ToggleSwitch:update()
        if pos == i then
            self.toggle_content[i].color = self.fgcolor
            self.toggle_content[i].background = self.fgcolor
-            self.toggle_content[i][1][1].fgcolor = 0.0
+            self.toggle_content[i][1][1].fgcolor = Blitbuffer.COLOR_WHITE
        else
            self.toggle_content[i].color = self.bgcolor
            self.toggle_content[i].background = self.bgcolor
-            self.toggle_content[i][1][1].fgcolor = 1.0
+            self.toggle_content[i][1][1].fgcolor = Blitbuffer.COLOR_BLACK
        end
    end
 end
--- a/frontend/ui/widget/touchmenu.lua
+++ b/frontend/ui/widget/touchmenu.lua
@@ -21,6 +21,7 @@ local Font = require("ui/font")
 local DEBUG = require("dbg")
 local _ = require("gettext")
 local NetworkMgr = require("ui/networkmgr")
+local Blitbuffer = require("ffi/blitbuffer")

 --[[
 TouchMenuItem widget
@@ -71,7 +72,7 @@ function TouchMenuItem:init()
    self.item_frame = FrameContainer:new{
        width = self.dimen.w,
        bordersize = 0,
-        color = 15,
+        color = Blitbuffer.COLOR_BLACK,
        HorizontalGroup:new {
            align = "center",
            CenterContainer:new{
@@ -80,7 +81,7 @@ function TouchMenuItem:init()
            },
            TextWidget:new{
                text = self.item.text or self.item.text_func(),
-                fgcolor = item_enabled ~= false and 1.0 or 0.5,
+                fgcolor = Blitbuffer.gray(item_enabled ~= false and 1.0 or 0.5),
                face = self.face,
            },
        },
@@ -362,7 +363,7 @@ function TouchMenu:init()
    self[1] = FrameContainer:new{
        padding = self.padding,
        bordersize = self.bordersize,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        -- menubar and footer will be inserted in
        -- item_group in updateItems
        self.item_group,
--- a/frontend/ui/widget/verticalscrollbar.lua
+++ b/frontend/ui/widget/verticalscrollbar.lua
@@ -1,5 +1,6 @@
 local Widget = require("ui/widget/widget")
 local Geom = require("ui/geometry")
+local Blitbuffer = require("ffi/blitbuffer")

 local VerticalScrollBar = Widget:new{
    enable = true,
@@ -9,9 +10,9 @@ local VerticalScrollBar = Widget:new{
    width = 6,
    height = 50,
    bordersize = 1,
-    bordercolor = 15,
+    bordercolor = Blitbuffer.COLOR_BLACK,
    radius = 0,
-    rectcolor = 15,
+    rectcolor = Blitbuffer.COLOR_BLACK,
 }

 function VerticalScrollBar:getSize()
--- a/frontend/ui/widget/virtualkeyboard.lua
+++ b/frontend/ui/widget/virtualkeyboard.lua
@@ -15,6 +15,7 @@ local Device = require("ui/device")
 local GestureRange = require("ui/gesturerange")
 local UIManager = require("ui/uimanager")
 local DEBUG = require("dbg")
+local Blitbuffer = require("ffi/blitbuffer")

 local VirtualKey = InputContainer:new{
    key = nil,
@@ -60,7 +61,7 @@ function VirtualKey:init()
    self[1] = FrameContainer:new{
        margin = 0,
        bordersize = self.bordersize,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        radius = 5,
        padding = 0,
        CenterContainer:new{
@@ -266,7 +267,7 @@ function VirtualKeyboard:addKeys()
    local keyboard_frame = FrameContainer:new{
        margin = 0,
        bordersize = self.bordersize,
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        radius = 0,
        padding = self.padding,
        CenterContainer:new{
--- a/utils/wtest.lua
+++ b/utils/wtest.lua
@@ -37,6 +37,7 @@ local ReaderUI = require("apps/reader/readerui")
 local Dbg = require("dbg")
 local Device = require("ui/device")
 local Screen = require("ui/screen")
+local Blitbuffer = require("ffi/blitbuffer")

 -----------------------------------------------------
 -- widget that paints the grid on the background
@@ -50,12 +51,12 @@ function TestGrid:paintTo(bb)
    for i=1,h_line do
        y_num = i*50
        RenderText:renderUtf8Text(bb, 0, y_num+10, Font:getFace("ffont", 12), y_num, true)
-        bb:paintRect(0, y_num, bb:getWidth(), 1, 10)
+        bb:paintRect(0, y_num, bb:getWidth(), 1, Blitbuffer.gray(0.7))
    end
    for i=1,v_line do
        x_num = i*50
        RenderText:renderUtf8Text(bb, x_num, 10, Font:getFace("ffont", 12), x_num, true)
-        bb:paintRect(x_num, 0, 1, bb:getHeight(), 10)
+        bb:paintRect(x_num, 0, 1, bb:getHeight(), Blitbuffer.gray(0.7))
    end
 end

@@ -65,7 +66,7 @@ function TestVisible:paintTo(bb)
    v_line = math.floor(bb:getWidth() / 50)
    h_line = math.floor(bb:getHeight() / 50)
    -- Paint white background for higher contrast
-    bb:paintRect(0,0,bb:getWidth(),bb:getHeight() , 0)
+    bb:paintRect(0,0,bb:getWidth(),bb:getHeight(), Blitbuffer.COLOR_WHITE)
    -- Only render gridtext not lines at a more central postition, so it doesn't interfere with the
    for i=1,h_line do
        y_num = i*50
@@ -90,28 +91,28 @@ function TestVisible:paintTo(bb)
    RenderText:renderUtf8Text(bb, 100, 500, Font:getFace("ffont", 26), "Visible screen size :  "..(x_max-x_min).."x"..(y_max-y_min), true)

    -- Three parallel lines at the top
-    bb:paintRect(x_min,y_min, x_max, 1 , 10)
-    bb:paintRect(x_min,y_min + 3, x_max, 1 , 10)
-    bb:paintRect(x_min,y_min + 6, x_max, 1 , 10)
+    bb:paintRect(x_min,y_min, x_max, 1 , Blitbuffer.gray(0.7))
+    bb:paintRect(x_min,y_min + 3, x_max, 1 , Blitbuffer.gray(0.7))
+    bb:paintRect(x_min,y_min + 6, x_max, 1 , Blitbuffer.gray(0.7))

    -- Three parallel lines at the bottom
-    bb:paintRect(x_min,y_max, x_max, 1 , 10)
-    bb:paintRect(x_min,y_max - 3, x_max, 1 , 10)
-    bb:paintRect(x_min,y_max - 6, x_max, 1 , 10)
+    bb:paintRect(x_min,y_max, x_max, 1 , Blitbuffer.gray(0.7))
+    bb:paintRect(x_min,y_max - 3, x_max, 1 , Blitbuffer.gray(0.7))
+    bb:paintRect(x_min,y_max - 6, x_max, 1 , Blitbuffer.gray(0.7))

    -- Three parallel lines at the left
-    bb:paintRect(x_min,y_min, 1, y_max , 10)
-    bb:paintRect(x_min + 3,y_min, 1, y_max, 10)
-    bb:paintRect(x_min + 6,y_min, 1, y_max, 10)
+    bb:paintRect(x_min,y_min, 1, y_max , Blitbuffer.gray(0.7))
+    bb:paintRect(x_min + 3,y_min, 1, y_max, Blitbuffer.gray(0.7))
+    bb:paintRect(x_min + 6,y_min, 1, y_max, Blitbuffer.gray(0.7))

    -- Three parallel lines at the right
-    bb:paintRect(x_max,y_min, 1, y_max , 10)
-    bb:paintRect(x_max - 3,y_min, 1, y_max, 10)
-    bb:paintRect(x_max - 6,y_min, 1, y_max, 10)
+    bb:paintRect(x_max,y_min, 1, y_max , Blitbuffer.gray(0.7))
+    bb:paintRect(x_max - 3,y_min, 1, y_max, Blitbuffer.gray(0.7))
+    bb:paintRect(x_max - 6,y_min, 1, y_max, Blitbuffer.gray(0.7))

    --Two lines spaces 600 pixels
-    bb:paintRect(100,600, 1, 250 , 10)
-    bb:paintRect(700,600, 1, 250 , 10)
+    bb:paintRect(100,600, 1, 250 , Blitbuffer.gray(0.7))
+    bb:paintRect(700,600, 1, 250 , Blitbuffer.gray(0.7))
    RenderText:renderUtf8Text(bb, 150, 670, Font:getFace("ffont", 26), "Measure inches per 600 pixels", true)
    RenderText:renderUtf8Text(bb, 150, 770, Font:getFace("ffont", 22), "Kobo Aura: 600 pixels/ 2.82 \" = "..(600/2.82).." dpi", true)
 end
@@ -170,7 +171,7 @@ Clock = AlphaContainer:new{
    alpha = 0.7,

    FrameContainer:new{
-        background = 0,
+        background = Blitbuffer.COLOR_WHITE,
        bordersize = 1,
        margin = 0,
        padding = 1