Added new slider widget to `devel/hello-world` #1363

realSquidCoder · 2025-01-01T17:36:47Z

Created devel/helloSlider.lua (a prototype for a new single-slider widget)

Created helloSlider.lua (a prototype for a new single-slider widget)

myk002 · 2025-01-01T19:32:57Z

devel/helloSlider.lua

+    init_table.frame = init_table.frame or {}
+    init_table.frame.h = init_table.frame.h or 1
+end
+
+function Slider:init()
+    if self.num_stops < 2 then error('too few Slider stops') end
+    self.is_dragging_target = nil -- 'left', 'right', or 'both'
+    self.is_dragging_idx = nil -- offset from leftmost dragged tile
+end
+
+local function Slider_get_width_per_idx(self)
+    return math.max(3, (self.frame_body.width-7) // (self.num_stops-1))
+end
+
+function Slider:onInput(keys)
+    if not keys._MOUSE_L then return false end
+    local x = self:getMousePos()
+    if not x then return false end
+    local left_idx = self.get_idx_fn()
+    local width_per_idx = Slider_get_width_per_idx(self)
+    local left_pos = width_per_idx*(left_idx-1)
+    local right_pos = width_per_idx*(left_idx-1) + 4
+    if x < left_pos then
+        self.on_change(self.get_idx_fn() - 1)
+    else
+        self.is_dragging_target = 'both'
+        self.is_dragging_idx = x - right_pos
+    end
+    return true
+end
+
+local function Slider_do_drag(self, width_per_idx)
+    local x = self.frame_body:localXY(dfhack.screen.getMousePos())
+    local cur_pos = x - self.is_dragging_idx
+    cur_pos = math.max(0, cur_pos)
+    cur_pos = math.min(width_per_idx*(self.num_stops-1)+7, cur_pos)
+    local offset = 1
+    local new_idx = math.max(0, cur_pos+offset)//width_per_idx + 1
+    if self.is_dragging_target == 'both' then
+        if new_idx > self.num_stops then
+            return
+        end
+    end
+    if new_idx and new_idx ~= self.get_idx_fn() then
+        self.on_change(new_idx)
+    end
+end
+
+local SLIDER_LEFT_END = to_pen{ch=198, fg=COLOR_GREY, bg=COLOR_BLACK}
+local SLIDER_TRACK = to_pen{ch=205, fg=COLOR_GREY, bg=COLOR_BLACK}
+local SLIDER_TRACK_SELECTED = to_pen{ch=205, fg=COLOR_LIGHTGREEN, bg=COLOR_BLACK}
+local SLIDER_TRACK_STOP = to_pen{ch=216, fg=COLOR_GREY, bg=COLOR_BLACK}
+local SLIDER_TRACK_STOP_SELECTED = to_pen{ch=216, fg=COLOR_LIGHTGREEN, bg=COLOR_BLACK}
+local SLIDER_RIGHT_END = to_pen{ch=181, fg=COLOR_GREY, bg=COLOR_BLACK}
+local SLIDER_TAB_LEFT = to_pen{ch=60, fg=COLOR_BLACK, bg=COLOR_YELLOW}
+local SLIDER_TAB_CENTER = to_pen{ch=9, fg=COLOR_BLACK, bg=COLOR_YELLOW}
+local SLIDER_TAB_RIGHT = to_pen{ch=62, fg=COLOR_BLACK, bg=COLOR_YELLOW}
+
+function Slider:onRenderBody(dc, rect)
+    local left_idx = self.get_idx_fn()
+    local width_per_idx = Slider_get_width_per_idx(self)
+    -- draw track
+    dc:seek(1,0)
+    dc:char(nil, SLIDER_LEFT_END)
+    dc:char(nil, SLIDER_TRACK)
+    for stop_idx=1,self.num_stops-1 do
+        local track_stop_pen = SLIDER_TRACK_STOP_SELECTED
+        local track_pen = SLIDER_TRACK_SELECTED
+        if left_idx ~= stop_idx then
+            track_stop_pen = SLIDER_TRACK_STOP
+            track_pen = SLIDER_TRACK
+        elseif left_idx == stop_idx then
+            track_pen = SLIDER_TRACK
+        end
+        dc:char(nil, track_stop_pen)
+        for i=2,width_per_idx do
+            dc:char(nil, track_pen)
+        end
+    end
+    if left_idx >= self.num_stops then
+        dc:char(nil, SLIDER_TRACK_STOP_SELECTED)
+    else
+        dc:char(nil, SLIDER_TRACK_STOP)
+    end
+    dc:char(nil, SLIDER_TRACK)
+    dc:char(nil, SLIDER_RIGHT_END)
+    -- draw tab
+    dc:seek(width_per_idx*(left_idx-1)+2)
+    dc:char(nil, SLIDER_TAB_LEFT)
+    dc:char(nil, SLIDER_TAB_CENTER)
+    dc:char(nil, SLIDER_TAB_RIGHT)
+    -- manage dragging
+    if self.is_dragging_target then
+        Slider_do_drag(self, width_per_idx)
+    end
+    if df.global.enabler.mouse_lbut_down == 0 then
+        self.is_dragging_target = nil
+        self.is_dragging_idx = nil
+    end
+end


This code should be added to https://github.com/DFHack/dfhack/blob/develop/library/lua/gui/widgets/range_slider.lua, with the class passed back in the final return statement, where it can be stored by https://github.com/DFHack/dfhack/blob/develop/library/lua/gui/widgets.lua#L29

Docs for the new widget should go near here: https://github.com/DFHack/dfhack/blob/develop/docs/dev/Lua%20API.rst?plain=1#L6419

myk002 · 2025-01-01T19:33:59Z

devel/helloSlider.lua

+    local LEVEL_OPTIONS = {
+        {label='Low', value=1},
+        {label='Medium', value=2},
+        {label='High', value=3},
+        {label='Pro', value=4},
+        {label='Insane', value=5},
+    }
+
+    self:addviews{
+        widgets.CycleHotkeyLabel{
+            view_id='level',
+            frame={l=1, t=0, w=16},
+            label='Level:',
+            label_below=true,
+            key_back='CUSTOM_SHIFT_C',
+            key='CUSTOM_SHIFT_V',
+            options=LEVEL_OPTIONS,
+            initial_option=LEVEL_OPTIONS[1].value,
+            on_change=function(val)
+                self.subviews.level:setOption(val)
+            end,
+        },
+        Slider{
+            frame={l=1, t=3},
+            num_stops=#LEVEL_OPTIONS,
+            get_idx_fn=function()
+                return self.subviews.level:getOptionValue()
+            end,
+            on_change=function(idx) self.subviews.level:setOption(idx) end,
+        },
+    }


this code should be added to https://github.com/DFHack/scripts/blob/master/devel/hello-world.lua, with frame sizes adjusted to accommodate.

Move Slider example into the hello world move the Slider widget away to its proper place (DFHack Repo).

myk002 · 2025-01-20T21:33:53Z

devel/hello-world.lua

@@ -32,6 +42,30 @@ function HelloWorldWindow:init()
            frame={w=10, h=5},
            frame_style=gui.INTERIOR_FRAME,
        },
+        widgets.Divider{


please set the properties to make it a flat divider instead of a connected divider:

frame={h=1}, frame_style_l=false, frame_style_r=false,

myk002 · 2025-01-20T21:34:32Z

devel/hello-world.lua

+        },
+        widgets.CycleHotkeyLabel{
+            view_id='level',
+            frame={l=0, t=3, w=16},


setting t properties in frames is not useful for autoarranged widgets

however, since 2 lines is way too many to put between the CycleHotkeyLabel and the Slider widget, maybe create a containing Panel that does not have autolayout properties.

myk002 · 2025-01-20T21:35:05Z

devel/hello-world.lua

+            view_id='level',
+            frame={l=0, t=3, w=16},
+            label='Level:',
+            label_below=true,


for a non-range slider, I think label_below would only waste space

myk002 · 2025-01-20T21:36:39Z

devel/hello-world.lua

+            on_change=function(val)
+                self.subviews.level:setOption(val)
+            end,


this widget should not be setting its own state in its own callback

myk002 · 2025-01-20T21:39:33Z

also needs a changelog entry

realSquidCoder added 2 commits January 1, 2025 11:34

Create helloSlider.lua

1b79147

Created helloSlider.lua (a prototype for a new single-slider widget)

Update helloSlider.lua to try and fix precommit EOF errors

9d68aca

realSquidCoder marked this pull request as ready for review January 1, 2025 17:38

myk002 reviewed Jan 1, 2025

View reviewed changes

realSquidCoder added 4 commits January 16, 2025 12:05

Merge branch 'master' into squid-slider-widget

bbac6c4

Move code to new files

81e5179

Clean up code

735f5d5

Move Slider example into the hello world move the Slider widget away to its proper place (DFHack Repo).

Clean up the code and add a divider

9055dc8

realSquidCoder changed the title ~~Add prototype for a new slider widget with only one slider.~~ Added new slider widget to devel/hello-world Jan 20, 2025

myk002 reviewed Jan 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added new slider widget to `devel/hello-world` #1363

Added new slider widget to `devel/hello-world` #1363

realSquidCoder commented Jan 1, 2025 •

edited

Loading

myk002 Jan 1, 2025

myk002 Jan 1, 2025

myk002 Jan 20, 2025

myk002 Jan 20, 2025

myk002 Jan 20, 2025

myk002 Jan 20, 2025

myk002 Jan 20, 2025

myk002 commented Jan 20, 2025

Added new slider widget to devel/hello-world #1363

Are you sure you want to change the base?

Added new slider widget to devel/hello-world #1363

Conversation

realSquidCoder commented Jan 1, 2025 • edited Loading

myk002 Jan 1, 2025

Choose a reason for hiding this comment

myk002 Jan 1, 2025

Choose a reason for hiding this comment

myk002 Jan 20, 2025

Choose a reason for hiding this comment

myk002 Jan 20, 2025

Choose a reason for hiding this comment

myk002 Jan 20, 2025

Choose a reason for hiding this comment

myk002 Jan 20, 2025

Choose a reason for hiding this comment

myk002 Jan 20, 2025

Choose a reason for hiding this comment

myk002 commented Jan 20, 2025

Added new slider widget to `devel/hello-world` #1363

Added new slider widget to `devel/hello-world` #1363

realSquidCoder commented Jan 1, 2025 •

edited

Loading