update main menu to use icons

This commit also implements a button getting function to automatically
create icon buttons.

init.lua

@@ -19,6 +19,7 @@ dofile(syspath..'load_configuration.lua')
 
 -- Load formspec functionality
 dofile(syspath..'formspec'..DIR_DELIM..'formspec_helpers.lua')
+dofile(syspath..'formspec'..DIR_DELIM..'main_menu.lua')
 dofile(syspath..'formspec'..DIR_DELIM..'real_time_universal.lua')
 dofile(syspath..'formspec'..DIR_DELIM..'formspec_creation.lua')
 

locale/mtimer.de.tr

@@ -18,11 +18,6 @@ Custom Timer=Individueller Timer
 Visibility=Sichtbarkeit
 mTimer Configuration=mTimer-Konfiguration
 
-# Main Menu
-Time Representation=Zeit-Repräsentation
-Timer Configuration=Timerkonfiguration
-Visuals=Aussehen
-
 # Settings
 Invisible=Unsichtbar
 Visible=Sichtbar

locale/mtimer.it.tr

@@ -14,11 +14,6 @@ Timezone Offset=Fascia oraria
 Visibility=Visibilità
 mTimer Configuration=mTimer-Configurazione
 
-# Main Menu
-Time Representation=Formato del tempo
-Timer Configuration=Conf. cronometro
-Visuals=Visualizzazioni
-
 # Settings
 Visible=Visibile
 Invisible=Invisibile

system/formspec/formspec_creation.lua

@@ -7,7 +7,6 @@
 -- Localise needed functions
 local m = mtimer
 local S = m.translator
-local build_frame = m.build_frame
 local fe = minetest.formspec_escape
 
 
@@ -15,54 +14,16 @@ local fe = minetest.formspec_escape
 -- correlates with the formspec to show. All of the names are self-explanatory
 -- and within the functions no logic is used.
 --
+-- The Main menu is a bit more complex and is generated seperately.
+--
 -- @see mtimer.show_formspec
 -- @see mtimer.get_times
 -- @see ./system/on_receive_fields.lua
 -- @see ./system/chat_command.lua
+-- @see ./system/formspec/main_menu.lua
 -- @see https://dev.minetest.net/formspec
 
 
-mtimer.dialog.main_menu = function (player_name)
-    mtimer.show_formspec('mtimer:main_menu', {
-        title = S('mTimer'),
-        width = 9.75,
-        height = 6,
-        prefix = '',
-        add_buttons = false,
-        show_to = player_name,
-        formspec = {
-            'container[0,0]',
-            'label[0,0;'..S('Visuals')..']',
-            'button[0,0.25;3,0.5;set_visibility;'..S('Visibility')..']',
-            'button[0,1;3,0.5;set_position;'..S('Position')..']',
-            'button[0,1.75;3,0.5;set_color;'..S('Color')..']',
-            'button[0,2.5;3,0.5;hud_element_size;'..S('HUD Element Size')..']',
-            'button[0,3.25;3,0.5;hud_element_offset;'..S('HUD Element Offset')..']',
-            'container_end[]',
-            'container[3.25,0]',
-            'label[0,0;'..S('Time Representation')..']',
-            'button[0,0.25;3,0.5;ingame_time_format;'..S('Ingame Time Format')..']',
-            'button[0,1;3,0.5;real_world_time_format;'..S('Real-World Time Format')..']',
-            'button[0,1.75;3,0.5;session_start_time_format;'..S('Session Start Time Format')..']',
-            'button[0,2.5;3,0.5;session_duration_format;'..S('Session Duration Format')..']',
-            'button[0,3.25;3,0.5;host_time_format;'..S('Host Time Format')..']',
-            'container_end[]',
-            'container[6.5,0]',
-            'label[0,0;'..S('Timer Configuration')..']',
-            'button[0,0.25;3,0.5;timer_format;'..S('Timer Format')..']',
-            'button[0,1;3,0.5;timezone_offset;'..S('Timezone Offset')..']',
-            'button[0,1.75;3,0.5;custom_timer;'..S('Custom Timer')..']',
-            'container_end[]',
-            'container[0,4.125]',
-            'box[0,0;+linewidth,0.04;#ffffff]',
-            'button[4.3,0.225;2.5,0.5;reset_everything;'..S('Reset Everything')..']',
-            'button_exit[7,0.225;2.5,0.5;exit;'..S('Exit')..']',
-            'container_end[]'
-        }
-    })
-end
-
-
 mtimer.dialog.set_visibility = function (player_name)
     mtimer.show_formspec('mtimer:set_visibility', {
         title = S('Visibility'),

system/formspec/formspec_helpers.lua

@@ -1,5 +1,78 @@
 local m = mtimer
 local S = m.translator
+local esc = minetest.formspec_escape
+
+
+-- Get a button with icon
+--
+-- This function returns a fully formatted button with icon.
+--
+-- The provided ID is set as the button’s ID as well as the button’s image.
+-- When set as image all colons are replaced with underscores and the id then
+-- is formatted: `mtimer_ID.png` where `ID` is the given ID.
+--
+-- The definition table sets up the button’s parameters and is fully optional
+-- even if it makes no sense.
+--
+-- definition = {
+--   label = 'My Cool Button label'     or '',
+--   width = 5,                         or 3,
+--   image_size = 1,                    or 0,5,
+--   container = { left = 1, top = 1}   or pos_container
+--   exit_button = true                 or false
+-- }
+--
+-- The container table is used to position the button. If the `container` sub
+-- table is unset, the following table is used, causing the button to be in the
+-- top left corner of the formspec if not contained in another container.
+--
+-- pos_container = {
+--   left = 0
+--   top = 0
+-- }
+--
+-- @param id The ID for the button
+-- @param definition The definition table as described
+-- @return string The created button as formspec code
+mtimer.get_icon_button = function (id, definition)
+    local def = definition or {}
+
+    -- Set button defaults
+    local b_width = def.width or 3
+    local i_size = def.image_size or 0.5
+    local c_left = (def.container or {}).left or 0
+    local c_top = (def.container or {}).top or 0
+
+    -- Calculate button parameters
+    local b_padding = i_size / 4
+    local b_height = (b_padding * 2) + i_size
+    local l_top_pos = i_size / 2
+    local l_left_pos = i_size + (i_size / 4)
+
+    -- Create/Return the button
+    return (table.concat({
+        'container[+containerLeft,+containerTop]',
+        '  container[+buttonPadding,+buttonPadding]',
+        '    image[0,0;+imageSize,+imageSize;+icon]',
+        '    label[+labelLeftPos,+labelTopPos;+label]',
+        '  container_end[]',
+        '  +buttonType[0,0;+buttonWidth,+buttonHeight;+id;]',
+        'container_end[]'
+    }, ' '):gsub('%+%w+', {
+        ['+containerLeft'] = c_left,
+        ['+containerTop'] = c_top,
+        ['+buttonType'] = def.exit_button == true and 'button_exit' or 'button',
+        ['+buttonWidth'] = b_width,
+        ['+buttonHeight'] = b_height,
+        ['+buttonPadding'] = b_padding,
+        ['+imageSize'] = i_size,
+        ['+icon'] = 'mtimer_'..id:gsub(':', '_')..'.png',
+        ['+labelLeftPos'] = l_left_pos,
+        ['+labelTopPos'] = l_top_pos,
+        ['+id'] = id,
+        ['+label'] = esc(def.label or '')
+    }))
+end
 
 
 -- Build the formspec frame
@@ -31,7 +104,7 @@ local S = m.translator
 -- formspec size will be reduced by the amout of units the buttons would
 -- have taken place.
 --
--- Some formspec elements do nbot properly start at 0,0 even if set so. The
+-- Some formspec elements do not properly start at 0,0 even if set so. The
 -- `content_offset` attribute offsets the content vertically by the given
 -- amount of units. Formspec height and button positions are fixed according
 -- to the given value.
@@ -104,7 +177,7 @@ mtimer.show_formspec = function (name, def)
         ['+height'] = height,
         ['+linewidth'] = width-0.25,
         ['+title'] = minetest.formspec_escape(prefix..def.title),
-        ['+icon'] = 'mtimer_icon_'..name:gsub('mtimer:', '')..'.png',
+        ['+icon'] = 'mtimer_'..name:gsub('mtimer:', '')..'.png',
         ['+content'] = 0.9 + content_offset,
         ['+buttons'] = height-1,
         ['+defbutton'] = 0.25,

system/formspec/main_menu.lua

@@ -0,0 +1,82 @@
+-- Localise needed functions
+local m = mtimer
+local S = m.translator
+local fe = minetest.formspec_escape
+
+
+-- Create buttons at the given position in the main menu formspec
+--
+-- This function takes a column and a row and translates that to values used
+-- by the icon button function. All buttons are 5 units wide and the image
+-- size is 0.5 units.
+--
+-- @param column The desired column, starting with 1
+-- @param row The desired row, starting with 1
+-- @param id The button’s ID
+-- @param label The button’s label
+-- @return string The parsed main menu button
+local button = function (column, row, id, label)
+    local b_width = 5
+    local i_size = 0.5
+
+    -- Calculations
+    local b_padding = i_size / 4
+    local b_height = (b_padding * 2) + i_size
+    local b_top_position = (row - 1) * b_height
+    local b_top_spacing = b_top_position == 0 and 0 or b_padding * 1.5
+    local c_position = (column - 1) * b_width
+    local c_spacing = c_position == 0 and 0 or b_padding * 3
+    local bc_top = b_top_position + (b_top_spacing * (row - 1))
+    local bc_left = c_position + (c_spacing * (column - 1))
+
+    return mtimer.get_icon_button(id, {
+        label = fe(label),
+        width = b_width,
+        image_size = i_size,
+        container = {
+            top = bc_top,
+            left = bc_left
+        }
+    })
+end
+
+
+-- Main Menu generation
+--
+-- @see mtimer.show_formspec
+-- @see https://dev.minetest.net/formspec
+mtimer.dialog.main_menu = function (player_name)
+    mtimer.show_formspec('mtimer:main_menu', {
+        title = S('mTimer'),
+        width = 16,
+        height = 6.9,
+        prefix = '',
+        add_buttons = false,
+        show_to = player_name,
+        formspec = {
+            -- Visuals
+            button(1, 1, 'set_visibility', S('Visibility')),
+            button(1, 2, 'set_position', S('Position')),
+            button(1, 3, 'set_color', S('Color')),
+            button(1, 4, 'hud_element_size', S('HUD Element Size')),
+            button(1, 5, 'hud_element_offset', S('HUD Element Offset')),
+            -- Time Representation
+            button(2, 1, 'ingame_time_format', S('Ingame Time Format')),
+            button(2, 2, 'real_world_time_format', S('Real-World Time Format')),
+            button(2, 3, 'session_start_time_format', S('Session Start Time Format')),
+            button(2, 4, 'session_duration_format', S('Session Duration Format')),
+            button(2, 5, 'host_time_format', S('Host Time Format')),
+            -- Timer configuration
+            button(3, 1, 'timer_format', S('Timer Format')),
+            button(3, 2, 'timezone_offset', S('Timezone Offset')),
+            button(3, 3, 'custom_timer', S('Custom Timer')),
+            'container[0,4.75]',
+            '  box[0,0;+linewidth,0.04;#ffffff]',
+            '  container[+linewidth,0]',
+                 mtimer.get_icon_button('exit', { label = S('Exit'), exit_button = true, container = { top = 0.25, left = -7.25 } }),
+                 mtimer.get_icon_button('reset_everything', { label = S('Reset Everything'), width = 4, container = { top = 0.25, left = -4 } }),
+            '  container_end[]',
+            'container_end[]'
+        }
+    })
+end