From 5982e24d57742812cb91ea989eaa44a36169e8d7 Mon Sep 17 00:00:00 2001
From: Hans-Werner Hilse <hwhilse@gmail.com>
Date: Wed, 22 Oct 2014 15:34:11 +0200
Subject: [PATCH] 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.
---
 frontend/apps/filemanager/filemanager.lua     |  3 +-
 frontend/apps/opdscatalog/opdscatalog.lua     |  3 +-
 .../apps/reader/modules/readercropping.lua    |  5 ++-
 frontend/apps/reader/modules/readerfooter.lua |  3 +-
 .../apps/reader/modules/readerscreenshot.lua  |  2 -
 frontend/apps/reader/modules/readerview.lua   | 13 ++++---
 frontend/ui/device/screen.lua                 | 13 ++++---
 frontend/ui/rendertext.lua                    |  4 +-
 frontend/ui/widget/button.lua                 | 17 +++++----
 frontend/ui/widget/buttondialog.lua           |  3 +-
 frontend/ui/widget/buttontable.lua            |  5 ++-
 frontend/ui/widget/configdialog.lua           | 21 ++++++-----
 frontend/ui/widget/confirmbox.lua             |  3 +-
 .../ui/widget/container/framecontainer.lua    |  3 +-
 .../widget/container/underlinecontainer.lua   |  4 +-
 frontend/ui/widget/dictquicklookup.lua        |  5 ++-
 frontend/ui/widget/infomessage.lua            |  3 +-
 frontend/ui/widget/inputdialog.lua            |  5 ++-
 frontend/ui/widget/inputtext.lua              |  9 +++--
 frontend/ui/widget/linewidget.lua             |  3 +-
 frontend/ui/widget/linkbox.lua                |  3 +-
 frontend/ui/widget/logindialog.lua            |  3 +-
 frontend/ui/widget/menu.lua                   | 11 +++---
 frontend/ui/widget/multiinputdialog.lua       |  3 +-
 frontend/ui/widget/notification.lua           |  3 +-
 frontend/ui/widget/progresswidget.lua         |  7 ++--
 frontend/ui/widget/scrolltextwidget.lua       |  3 +-
 frontend/ui/widget/textboxwidget.lua          |  2 +-
 frontend/ui/widget/textwidget.lua             |  3 +-
 frontend/ui/widget/toggleswitch.lua           | 25 ++++++++-----
 frontend/ui/widget/touchmenu.lua              |  7 ++--
 frontend/ui/widget/verticalscrollbar.lua      |  5 ++-
 frontend/ui/widget/virtualkeyboard.lua        |  5 ++-
 utils/wtest.lua                               | 37 ++++++++++---------
 34 files changed, 140 insertions(+), 104 deletions(-)

diff --git a/frontend/apps/filemanager/filemanager.lua b/frontend/apps/filemanager/filemanager.lua
index 1f11ab963..1f5986cb5 100644
--- 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,
     }
 
diff --git a/frontend/apps/opdscatalog/opdscatalog.lua b/frontend/apps/opdscatalog/opdscatalog.lua
index dd83823f4..a7adf0420 100644
--- 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,
     }
 
diff --git a/frontend/apps/reader/modules/readercropping.lua b/frontend/apps/reader/modules/readercropping.lua
index 8ad38c865..a95961d81 100644
--- 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
diff --git a/frontend/apps/reader/modules/readerfooter.lua b/frontend/apps/reader/modules/readerfooter.lua
index 3a57acd8a..5de2eb6f9 100644
--- 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,
             }
diff --git a/frontend/apps/reader/modules/readerscreenshot.lua b/frontend/apps/reader/modules/readerscreenshot.lua
index a615abf9f..7f151a5a3 100644
--- 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
diff --git a/frontend/apps/reader/modules/readerview.lua b/frontend/apps/reader/modules/readerview.lua
index 9ad1e7624..cd783d159 100644
--- 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
diff --git a/frontend/ui/device/screen.lua b/frontend/ui/device/screen.lua
index 30f848ba7..490b33ce1 100644
--- 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)
diff --git a/frontend/ui/rendertext.lua b/frontend/ui/rendertext.lua
index e059b0e95..1ad5886e3 100644
--- 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,
diff --git a/frontend/ui/widget/button.lua b/frontend/ui/widget/button.lua
index bd6f837b9..297a36f9d 100644
--- 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
diff --git a/frontend/ui/widget/buttondialog.lua b/frontend/ui/widget/buttondialog.lua
index bee07114d..ef355bcf5 100644
--- 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,
diff --git a/frontend/ui/widget/buttontable.lua b/frontend/ui/widget/buttontable.lua
index e431c1d56..9ab41ed66 100644
--- 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,
diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua
index 86e8e5cfe..bc680a08c 100644
--- 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,
diff --git a/frontend/ui/widget/confirmbox.lua b/frontend/ui/widget/confirmbox.lua
index 2423317d1..f21240d9b 100644
--- 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{
diff --git a/frontend/ui/widget/container/framecontainer.lua b/frontend/ui/widget/container/framecontainer.lua
index 958af1b40..6d8bae051 100644
--- 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,
diff --git a/frontend/ui/widget/container/underlinecontainer.lua b/frontend/ui/widget/container/underlinecontainer.lua
index 6cff80fcf..a3a152c62 100644
--- 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",
 }
 
diff --git a/frontend/ui/widget/dictquicklookup.lua b/frontend/ui/widget/dictquicklookup.lua
index 987379d21..275e0089b 100644
--- 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,
diff --git a/frontend/ui/widget/infomessage.lua b/frontend/ui/widget/infomessage.lua
index b3c545cd4..cc006c586 100644
--- 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,
diff --git a/frontend/ui/widget/inputdialog.lua b/frontend/ui/widget/inputdialog.lua
index e1ec01220..6e49f7251 100644
--- 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,
diff --git a/frontend/ui/widget/inputtext.lua b/frontend/ui/widget/inputtext.lua
index cc1d93e4f..2c4af2c7d 100644
--- 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()
diff --git a/frontend/ui/widget/linewidget.lua b/frontend/ui/widget/linewidget.lua
index e40c8b2f5..19b2a2e3e 100644
--- 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,
diff --git a/frontend/ui/widget/linkbox.lua b/frontend/ui/widget/linkbox.lua
index e3f3aa797..8a0173860 100644
--- 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,
 }
diff --git a/frontend/ui/widget/logindialog.lua b/frontend/ui/widget/logindialog.lua
index f414378d9..88348071c 100644
--- 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,
diff --git a/frontend/ui/widget/menu.lua b/frontend/ui/widget/menu.lua
index ceefe463a..cbfd2c1cc 100644
--- 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,
diff --git a/frontend/ui/widget/multiinputdialog.lua b/frontend/ui/widget/multiinputdialog.lua
index 99b20d4e9..ec81fd31c 100644
--- 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,
     }
 
diff --git a/frontend/ui/widget/notification.lua b/frontend/ui/widget/notification.lua
index 2389e5b5a..1d28af32d 100644
--- 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,
diff --git a/frontend/ui/widget/progresswidget.lua b/frontend/ui/widget/progresswidget.lua
index 09dc49cb7..8b31600fe 100644
--- 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,
diff --git a/frontend/ui/widget/scrolltextwidget.lua b/frontend/ui/widget/scrolltextwidget.lua
index 2df47bc59..3674c4f44 100644
--- 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),
diff --git a/frontend/ui/widget/textboxwidget.lua b/frontend/ui/widget/textboxwidget.lua
index 36dd7e904..dcab06d5f 100644
--- 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,
diff --git a/frontend/ui/widget/textwidget.lua b/frontend/ui/widget/textwidget.lua
index 7de33edcc..eea1aa5bc 100644
--- 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,
diff --git a/frontend/ui/widget/toggleswitch.lua b/frontend/ui/widget/toggleswitch.lua
index dd87c5a74..909333573 100644
--- 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
diff --git a/frontend/ui/widget/touchmenu.lua b/frontend/ui/widget/touchmenu.lua
index 1ea8a0b0f..837de2fb8 100644
--- 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,
diff --git a/frontend/ui/widget/verticalscrollbar.lua b/frontend/ui/widget/verticalscrollbar.lua
index 06b7b3a32..918117016 100644
--- 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()
diff --git a/frontend/ui/widget/virtualkeyboard.lua b/frontend/ui/widget/virtualkeyboard.lua
index d038d8e97..426c2bbad 100644
--- 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{
diff --git a/utils/wtest.lua b/utils/wtest.lua
index e9112f7fd..ff097ac08 100755
--- 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