diff --git a/frontend/ui/widget/numberpickerwidget.lua b/frontend/ui/widget/numberpickerwidget.lua new file mode 100644 index 000000000..f19567dcd --- /dev/null +++ b/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 + diff --git a/frontend/ui/widget/timewidget.lua b/frontend/ui/widget/timewidget.lua index 494fb7744..e71e8809d 100644 --- a/frontend/ui/widget/timewidget.lua +++ b/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)