Refactor TimeWidget and add NumberPickerWidget (#3232)

frontend/ui/widget/numberpickerwidget.lua

@@ -0,0 +1,158 @@
+local Button = require("ui/widget/button")
+local CenterContainer = require("ui/widget/container/centercontainer")
+local Device = require("device")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local Geom = require("ui/geometry")
+local Font = require("ui/font")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local TextWidget = require("ui/widget/textboxwidget")
+local RenderText = require("ui/rendertext")
+local UIManager = require("ui/uimanager")
+local VerticalGroup = require("ui/widget/verticalgroup")
+local VerticalSpan = require("ui/widget/verticalspan")
+local _ = require("gettext")
+local Screen = Device.screen
+
+local NumberPickerWidget = InputContainer:new{
+    spinner_face = Font:getFace("x_smalltfont",24),
+    precision = "%02d",
+    width = nil,
+    height = nil,
+    value = 0,
+    value_min = 0,
+    value_max = 23,
+    value_step = 1,
+    value_hold_step = 4,
+    value_table = nil,
+}
+
+function NumberPickerWidget:init()
+    self.screen_width = Screen:getSize().w
+    self.screen_height = Screen:getSize().h
+    if self.width == nil then
+        self.width = self.screen_width * 0.2
+    end
+    if self.value_table then
+        self.value_index = 1
+        self.value = self.value_table[self.value_index]
+        self.step = 1
+        self.value_hold_step = 1
+    end
+    self:update()
+end
+
+function NumberPickerWidget:paintWidget()
+
+    local button_up = Button:new{
+        text = "▲",
+        bordersize = 2,
+        margin = 2,
+        radius = 0,
+        text_font_size = 24,
+        width = self.width,
+        show_parent = self.show_parent,
+        callback = function()
+            self.value = self:changeValue(self.value, self.value_step, self.value_max, self.value_min)
+            self:update()
+        end,
+        hold_callback = function()
+            self.value = self:changeValue(self.value, self.value_hold_step, self.value_max, self.value_min)
+            self:update()
+        end
+    }
+    local button_down = Button:new{
+        text = "▼",
+        bordersize = 2,
+        margin = 2,
+        radius = 0,
+        text_font_size = 24,
+        width = self.width,
+        show_parent = self.show_parent,
+        callback = function()
+            self.value = self:changeValue(self.value, self.value_step * -1, self.value_max, self.value_min)
+            self:update()
+        end,
+        hold_callback = function()
+            self.value = self:changeValue(self.value, self.value_hold_step * -1, self.value_max, self.value_min)
+            self:update()
+        end
+    }
+
+    local empty_space = VerticalSpan:new{
+        width = self.screen_height * 0.01
+    }
+    local value = self.value
+    if self.value_table then
+        local text_width = RenderText:sizeUtf8Text(0, self.width, self.spinner_face, self.value, true, true).x
+        if self.width < text_width then
+            value = RenderText:truncateTextByWidth(self.value, self.spinner_face, self.width,true, true)
+        end
+    else
+        value = string.format(self.precision, value)
+    end
+
+    local text_value = TextWidget:new{
+        text = value,
+        alignment = "center",
+        face = self.spinner_face,
+        bold = true,
+        width = self.width,
+    }
+    return VerticalGroup:new{
+        align = "center",
+        button_up,
+        empty_space,
+        text_value,
+        empty_space,
+        button_down,
+    }
+end
+
+function NumberPickerWidget:update()
+    local widget_spinner = self:paintWidget()
+    self.frame = FrameContainer:new{
+        bordersize = 0,
+        padding = Screen:scaleBySize(5),
+        CenterContainer:new{
+            align = "center",
+            dimen = Geom:new{
+                w = widget_spinner:getSize().w,
+                h = widget_spinner:getSize().h
+            },
+            widget_spinner
+        }
+    }
+    self.dimen = self.frame:getSize()
+    self[1] = self.frame
+    UIManager:setDirty(self.show_parent, function()
+        return "ui", self.dimen
+    end)
+end
+
+function NumberPickerWidget:changeValue(value, step, max, min)
+    if self.value_index then
+        self.value_index = self.value_index + step
+        if self.value_index > #self.value_table then
+            self.value_index = 1
+        elseif
+        self.value_index < 1 then
+            self.value_index = #self.value_table
+        end
+        value = self.value_table[self.value_index]
+    else
+        value = value + step
+        if value > max then
+            value = value - max + 1
+        elseif value < min then
+            value = max + 1 + value
+        end
+    end
+    return value
+end
+
+function NumberPickerWidget:getValue()
+    return self.value
+end
+
+return NumberPickerWidget
+

frontend/ui/widget/timewidget.lua

@@ -1,5 +1,4 @@
 local Blitbuffer = require("ffi/blitbuffer")
-local Button = require("ui/widget/button")
 local ButtonTable = require("ui/widget/buttontable")
 local CenterContainer = require("ui/widget/container/centercontainer")
 local CloseButton = require("ui/widget/closebutton")
@@ -9,15 +8,14 @@ local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local Font = require("ui/font")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
-local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
+local NumberPickerWidget = require("ui/widget/numberpickerwidget")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
-local VerticalSpan = require("ui/widget/verticalspan")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
 local _ = require("gettext")
 local Screen = Device.screen
@@ -49,7 +47,6 @@ function TimeWidget:init()
                 GestureRange:new{
                     ges = "tap",
                     range = Geom:new{
-                        x = 0, y = 0,
                         w = self.screen_width,
                         h = self.screen_height,
                     }
@@ -57,174 +54,44 @@ function TimeWidget:init()
             },
          }
     end
-
     self:update()
 end
 
-function TimeWidget:changeHours(hour, change)
-    hour = hour + change
-    if hour > 23 then
-        hour = hour - 24
-    elseif hour < 0 then
-        hour = 24 + hour
-    end
-    return hour
-end
-
-function TimeWidget:changeMin(min, change)
-    min = min + change
-    if min > 59 then
-        min = min - 60
-    elseif min < 0 then
-        min = 60 + min
-    end
-    return min
-end
-
-function TimeWidget:paintContainer()
-    local padding_span = VerticalSpan:new{ width = math.ceil(self.screen_height * 0.01) }
-    local padding_span_top_bottom = VerticalSpan:new{ width = math.ceil(self.screen_height * 0.20) }
-    local button_group_down = HorizontalGroup:new{ align = "center" }
-    local button_group_up = HorizontalGroup:new{ align = "center" }
-    local vertical_group = VerticalGroup:new{ align = "center" }
-
-    local button_up_hours = Button:new{
-        text = "▲",
-        bordersize = 2,
-        margin = 2,
-        radius = 0,
-        text_font_size = 24,
-        width = self.screen_width * 0.20,
+function TimeWidget:update()
+    local hour_widget = NumberPickerWidget:new{
         show_parent = self,
-        callback = function()
-            self.hour = self:changeHours(self.hour, 1)
-            self:update()
-        end,
-        hold_callback = function()
-            self.hour = self:changeHours(self.hour, 6)
-            self:update()
-        end
+        width = self.screen_width * 0.2,
+        height = nil,
+        value = self.hour,
+        value_min = 0,
+        value_max = 23,
+        value_step = 1,
+        value_hold_step = 4,
     }
-    local button_down_hours = Button:new{
-        text = "▼",
-        bordersize = 2,
-        margin = 2,
-        radius = 0,
-        text_font_size = 24,
-        width = self.screen_width * 0.20,
+    local min_widget = NumberPickerWidget:new{
         show_parent = self,
-        callback = function()
-            self.hour = self:changeHours(self.hour, -1)
-            self:update()
-        end,
-        hold_callback = function()
-            self.hour = self:changeHours(self.hour, -6)
-            self:update()
-        end
+        width = self.screen_width * 0.2,
+        height = nil,
+        value = self.min,
+        value_min = 0,
+        value_max = 59,
+        value_step = 1,
+        value_hold_step = 10,
     }
-
-    local button_up_minutes = Button:new{
-        text = "▲",
-        bordersize = 2,
-        margin = 2,
-        radius = 0,
-        text_font_size = 24,
-        width = self.screen_width * 0.20,
-        show_parent = self,
-        callback = function()
-            self.min = self:changeMin(self.min, 1)
-            self:update()
-        end,
-        hold_callback = function()
-            self.min = self:changeMin(self.min, 15)
-            self:update()
-        end
-    }
-    local button_down_minutes = Button:new{
-        text = "▼",
-        bordersize = 2,
-        margin = 2,
-        radius = 0,
-        text_font_size = 24,
-        width = self.screen_width * 0.20,
-        show_parent = self,
-        callback = function()
-            self.min = self:changeMin(self.min, -1)
-            self:update()
-        end,
-        hold_callback = function()
-            self.min = self:changeMin(self.min, -15)
-            self:update()
-        end
-    }
-    local empty_space = HorizontalSpan:new{
-        width = self.screen_width * 0.20
-    }
-
-    local text_hours = TextBoxWidget:new{
-        text = string.format("%02d", self.hour),
-        alignment = "center",
-        face = self.title_face,
-        text_font_size = 24,
-        bold = true,
-        width = self.screen_width * 0.20,
-    }
-    local text_minutes = TextBoxWidget:new{
-        text = string.format("%02d", self.min),
-        alignment = "center",
-        face = self.title_face,
-        text_font_size = 24,
-        bold = true,
-        width = self.screen_width * 0.20,
-    }
-
     local colon_space = TextBoxWidget:new{
         text = ":",
         alignment = "center",
         face = self.title_face,
         bold = true,
-        width = self.screen_width * 0.20 + 2 * button_up_hours.bordersize + 2 * button_up_minutes.bordersize
+        width = self.screen_width * 0.2,
     }
-
-    local button_table_up = HorizontalGroup:new{
+    local time_group = HorizontalGroup:new{
         align = "center",
-        button_up_hours,
-        empty_space,
-        button_up_minutes,
-    }
-    local time_text_table = HorizontalGroup:new{
-        align = "center",
-        text_hours,
+        hour_widget,
         colon_space,
-        text_minutes,
-    }
-    local button_table_down = HorizontalGroup:new{
-        align = "center",
-        button_down_hours,
-        empty_space,
-        button_down_minutes,
+        min_widget,
     }
 
-    table.insert(button_group_up, button_table_up)
-    table.insert(button_group_down, button_table_down)
-    table.insert(vertical_group, padding_span_top_bottom)
-    table.insert(vertical_group, button_group_up)
-    table.insert(vertical_group, padding_span)
-    table.insert(vertical_group, time_text_table)
-    table.insert(vertical_group, padding_span)
-    table.insert(vertical_group, button_group_down)
-    table.insert(vertical_group, padding_span_top_bottom)
-
-    return CenterContainer:new{
-        dimen = Geom:new{
-            w = self.screen_width * 0.95,
-            h = vertical_group:getSize().h
-        },
-        vertical_group
-    }
-end
-
-function TimeWidget:update()
     local time_title = FrameContainer:new{
         padding = Screen:scaleBySize(5),
         margin = Screen:scaleBySize(2),
@@ -236,12 +103,6 @@ function TimeWidget:update()
             width = self.screen_width * 0.95,
         },
     }
-    local time_container = FrameContainer:new{
-        padding = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
-        bordersize = 0,
-        self:paintContainer()
-    }
     local time_line = LineWidget:new{
         dimen = Geom:new{
             w = self.width,
@@ -268,6 +129,8 @@ function TimeWidget:update()
                 text = self.ok_text,
                 callback = function()
                     if self.callback then
+                        self.hour = hour_widget:getValue()
+                        self.min = min_widget:getValue()
                         self:callback(self)
                     end
                     self:onClose()
@@ -295,9 +158,9 @@ function TimeWidget:update()
             CenterContainer:new{
                 dimen = Geom:new{
                     w = self.screen_width * 0.95,
-                    h = self.screen_height * 0.25
+                    h = self.screen_height * 0.25,
                 },
-                time_container,
+                time_group
             },
             time_line,
             ok_cancel_buttons
@@ -316,7 +179,6 @@ function TimeWidget:update()
             self.time_frame,
         }
     }
-
     UIManager:setDirty(self, function()
         return "ui", self.time_frame.dimen
     end)