Merge pull request #1216 from chrox/auto_scale

auto scale icon button especially for screen with high DPI

frontend/device/kobo/device.lua

@@ -52,7 +52,7 @@ local KoboPhoenix = Kobo:new{
     model = "Kobo_phoenix",
     hasFrontlight = yes,
     touch_phoenix_protocol = true,
-    display_dpi = 212.8,
+    display_dpi = 212,
     -- the bezel covers 12 pixels at the bottom:
     viewport = Geom:new{x=0, y=0, w=758, h=1012},
 }

frontend/device/screen.lua

@@ -169,8 +169,11 @@ function Screen:setDPI(dpi)
 end
 
 function Screen:scaleByDPI(px)
+    local dpi = self:getDPI()
+    -- larger screen needs larger scale
+    local size_scale = math.min(self:getWidth(), self:getHeight())/dpi/3.6
     -- scaled positive px should also be positive
-    return math.ceil(px * self:getDPI()/167)
+    return math.ceil(px * size_scale * dpi/167)
 end
 
 function Screen:getRotationMode()

frontend/ui/widget/configdialog.lua

@@ -1,68 +1,30 @@
+local UnderlineContainer = require("ui/widget/container/underlinecontainer")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local CenterContainer = require("ui/widget/container/centercontainer")
 local RightContainer = require("ui/widget/container/rightcontainer")
 local FrameContainer = require("ui/widget/container/framecontainer")
 local BottomContainer = require("ui/widget/container/bottomcontainer")
-local UnderlineContainer = require("ui/widget/container/underlinecontainer")
-local ImageWidget = require("ui/widget/imagewidget")
-local TextWidget = require("ui/widget/textwidget")
+local HorizontalSpan = require("ui/widget/horizontalspan")
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local VerticalSpan = require("ui/widget/verticalspan")
+local VerticalGroup = require("ui/widget/verticalgroup")
 local FixedTextWidget = require("ui/widget/fixedtextwidget")
 local ProgressWidget = require("ui/widget/progresswidget")
 local ToggleSwitch = require("ui/widget/toggleswitch")
 local ConfirmBox = require("ui/widget/confirmbox")
-local Font = require("ui/font")
-local Device = require("device")
+local ImageWidget = require("ui/widget/imagewidget")
+local TextWidget = require("ui/widget/textwidget")
+local IconButton = require("ui/widget/iconbutton")
 local GestureRange = require("ui/gesturerange")
+local Blitbuffer = require("ffi/blitbuffer")
 local UIManager = require("ui/uimanager")
-local RectSpan = require("ui/widget/rectspan")
-local HorizontalSpan = require("ui/widget/horizontalspan")
-local HorizontalGroup = require("ui/widget/horizontalgroup")
-local VerticalSpan = require("ui/widget/verticalspan")
-local VerticalGroup = require("ui/widget/verticalgroup")
 local Geom = require("ui/geometry")
 local Screen = require("device").screen
 local Event = require("ui/event")
+local Device = require("device")
+local Font = require("ui/font")
 local DEBUG = require("dbg")
 local _ = require("gettext")
-local Blitbuffer = require("ffi/blitbuffer")
-
-local MenuBarItem = InputContainer:new{}
-function MenuBarItem:init()
-    self.dimen = self[1]:getSize()
-    -- we need this table per-instance, so we declare it here
-    if Device:isTouchDevice() then
-        self.ges_events = {
-            TapSelect = {
-                GestureRange:new{
-                    ges = "tap",
-                    range = self.dimen,
-                },
-                doc = "Select Menu Item",
-            },
-        }
-    else
-        self.active_key_events = {
-            Select = { {"Press"}, doc = "chose selected item" },
-        }
-    end
-end
-
-function MenuBarItem:onTapSelect()
-    UIManager:scheduleIn(0.0, function() self:invert(true) end)
-    UIManager:scheduleIn(0.1, function()
-        UIManager:sendEvent(Event:new("ShowConfigPanel", self.index))
-    end)
-    UIManager:scheduleIn(0.5, function() self:invert(false) end)
-    return true
-end
-
-function MenuBarItem:invert(invert)
-    self[1].invert = invert
-    UIManager.update_regions_func = function()
-        return {self[1].dimen}
-    end
-    UIManager:setDirty(self.config, "partial")
-end
 
 local OptionTextItem = InputContainer:new{}
 function OptionTextItem:init()
@@ -433,18 +395,18 @@ function MenuBar:init()
     local icons_width = 0
     local icons_height = 0
     for c = 1, #config_options do
-        local menu_icon = ImageWidget:new{
-            file = config_options[c].icon
+        local menu_icon = IconButton:new{
+            show_parent = self.config_dialog,
+            icon_file = config_options[c].icon,
+            callback = function()
+                self.config_dialog:handleEvent(Event:new("ShowConfigPanel", c))
+            end,
         }
         local icon_dimen = menu_icon:getSize()
         icons_width = icons_width + icon_dimen.w
         icons_height = icon_dimen.h > icons_height and icon_dimen.h or icons_height
 
-        menu_items[c] = MenuBarItem:new{
-            menu_icon,
-            index = c,
-            config = self.config_dialog,
-        }
+        menu_items[c] = menu_icon
     end
 
     local spacing = HorizontalSpan:new{

frontend/ui/widget/iconbutton.lua

@@ -11,12 +11,14 @@ local IconButton = InputContainer:new{
     dimen = nil,
     -- show_parent is used for UIManager:setDirty, so we can trigger repaint
     show_parent = nil,
+    autoscale = true,
     callback = function() end,
 }
 
 function IconButton:init()
     self.image = ImageWidget:new{
-        file = self.icon_file
+        file = self.icon_file,
+        autoscale = self.autoscale,
     }
 
     self.show_parent = self.show_parent or self

frontend/ui/widget/imagewidget.lua

@@ -1,4 +1,5 @@
 local Widget = require("ui/widget/widget")
+local Screen = require("device").screen
 local CacheItem = require("cacheitem")
 local Mupdf = require("ffi/mupdf")
 local Geom = require("ui/geometry")
@@ -34,6 +35,8 @@ local ImageWidget = Widget:new{
     -- if width or height is given, image will rescale to the given size
     width = nil,
     height = nil,
+    -- if autoscale is true image will be rescaled according to screen dpi
+    autoscale = false,
     _bb = nil
 }
 
@@ -73,9 +76,16 @@ function ImageWidget:_render()
     else
         error("cannot render image")
     end
-    local w, h = self._bb:getWidth(), self._bb:getHeight()
-    if (self.width and self.width ~= w) or (self.height and self.height ~= h) then
-        self._bb = self._bb:scale(self.width or w, self.height or h)
+    local native_w, native_h = self._bb:getWidth(), self._bb:getHeight()
+    local scaled_w, scaled_h = self.width, self.height
+    if self.autoscale then
+        local dpi_scale = Screen:getDPI() / 167
+        -- rounding off to power of 2 to avoid alias with pow(2, floor(log(x)/log(2))
+        local scale = math.pow(2, math.max(0, math.floor(math.log(dpi_scale)/0.69)))
+        scaled_w, scaled_h = scale * native_w, scale * native_h
+    end
+    if (scaled_w and scaled_w ~= native_w) or (scaled_h and scaled_h ~= native_h) then
+        self._bb = self._bb:scale(scaled_w or native_w, scaled_h or native_h)
     end
 end
 

frontend/ui/widget/touchmenu.lua

@@ -261,7 +261,6 @@ local TouchMenu = InputContainer:new{
     item_height = Screen:scaleByDPI(50),
     bordersize = Screen:scaleByDPI(2),
     padding = Screen:scaleByDPI(5),
-    footer_height = 48 + Screen:scaleByDPI(5),
     fface = Font:getFace("ffont", 20),
     width = nil,
     height = nil,
@@ -346,25 +345,26 @@ function TouchMenu:init()
     self.device_info = HorizontalGroup:new{
         self.time_info,
     }
+    local up_button = IconButton:new{
+        icon_file = "resources/icons/appbar.chevron.up.png",
+        show_parent = self.show_parent,
+        callback = function()
+            self:backToUpperMenu()
+        end,
+    }
     local footer_width = self.width - self.padding*2 - self.bordersize*2
+    local footer_height = up_button:getSize().h + Screen:scaleByDPI(2)
     self.footer = HorizontalGroup:new{
         LeftContainer:new{
-            dimen = Geom:new{ w = footer_width*0.33, h = self.footer_height},
-            IconButton:new{
-                invert = true,
-                icon_file = "resources/icons/appbar.chevron.up.png",
-                show_parent = self.show_parent,
-                callback = function()
-                    self:backToUpperMenu()
-                end,
-            },
+            dimen = Geom:new{ w = footer_width*0.33, h = footer_height},
+            up_button,
         },
         CenterContainer:new{
-            dimen = Geom:new{ w = footer_width*0.33, h = self.footer_height},
+            dimen = Geom:new{ w = footer_width*0.33, h = footer_height},
             self.page_info,
         },
         RightContainer:new{
-            dimen = Geom:new{ w = footer_width*0.33, h = self.footer_height},
+            dimen = Geom:new{ w = footer_width*0.33, h = footer_height},
             self.device_info,
         }
     }