adapt HUD element offset dialog to new style

addresses https://gitlab.com/4w/mtimer/-/issues/16

locale/mtimer.de.tr

@@ -7,7 +7,6 @@ Real-World Time Format=Realzeit-Format
 Host Time Format=Hostzeit-Format
 Reset Everything=Alles zurücksetzen
 HUD Element Size=Anzeigegröße
-HUD Element Offset=Anzeigeversatz
 Session Duration Format=Sitzungsdauer-Format
 Session Start Time Format=Sitzungsstartzeit-Format
 Timer Format=Timerformat
@@ -47,6 +46,11 @@ Current server time: @1=Aktuelle Serverseitige Zeit: @1
 Calculated local time: @1=Errechnete lokale Zeit: @1
 Please note that daylight saving time (DST) is ignored entirely due to minimizing implementation complexity. You need to manually adjust the time zone in order to adapt to any DST changes. This messes up the visual representation a bit (but it’s not very accurate anyways …).=Die Sommerzeit wird aus Gründen der Komplexität der Implementierung vollständig ignoriert. Um der Sommerzeit Rechnung zu tragen muss die Zeitzone angepasst werden. Dies bringt zwar die grafische Darstellung durcheinander, aber die ist eh nicht ganz genau.
 
+# Dialog: HUD Element Offset
+HUD Element Offset=Anzeigeversatz
+Vertical=Vertikal
+Horizontal=Horizontal
+Control the HUD element offset using the input on the right side and use the screenshot and markings as orientation for what is changed. The result is shown in the HUD in real time, so check for the actual timner position using the timer HUD element itself.=Anzeigeversatz des HUD-Elements über die Eingaben an der rechten Seite konfigurieren und dafür die Markierungen zur Orientierung verwenden. Das Ergebnis wir direkt übernommen. Die getätigen Änderungen können anhand des HUD-Elements sofort überprüft werden.
 
 # Named Times
 ISO 8601 Date=Datum nach ISO 8601
@@ -69,15 +73,6 @@ Month=Monat
 Seconds=Sekunden
 Year=Jahr
 
-# HUD Element Scaling Information
-If set to 1 the HUD element is unscaled.=Mit 1 als Wert wird die Anzeige nicht vergrößert.
-All values larger than 1 scale the element up.=Alle Werte über 1 vergrößern die Anzeige.
-Clicking the +/- button changes the size by 1.=Ein Klick auf +/- verändert die Größe um 1.
-
-# HUD Element Offset Information
-HUD element offset is used like a border/padding.=Der Anzeigeversatz wird wie ein Rahmen (Umrandung) benutzt.
-Timer format can’t be set here. Go to the timer format dialog for that.=Das Timerformat kann nur im Timerformat-Dialog eingestellt werden.
-
 # Timer Format Variables
 In-Game Time=Spielzeit
 Real-World Date=Reale Zeit

system/formspecs/formspec_creation.lua

@@ -148,46 +148,6 @@ mtimer.dialog.hud_element_size = function (player_name)
 end
 
 
-mtimer.dialog.hud_element_offset = function (player_name)
-    local player = minetest.get_player_by_name(player_name)
-    local timer_data = esc(mtimer.get_timer_data(player_name).format)
-
-    local information = table.concat({
-        S('HUD element offset is used like a border/padding.'),
-        S('Timer format can’t be set here. Go to the timer format dialog for that.')
-    }, '\n')
-
-    -- Get current offset values or 0 for use in formspec
-    local key = m.meta.hud_element_offset.key
-    local offset = minetest.deserialize(player:get_meta():get_string(key))
-    offset.x = offset.x and offset.x or 0
-    offset.y = offset.y and offset.y or 0
-
-    mtimer.show_formspec('mtimer:hud_element_offset', {
-        title = S('HUD Element Offset'),
-        show_to = player_name,
-        height = 4.75,
-        formspec = {
-            'field_close_on_enter[x_offset;false]',
-            'field_close_on_enter[y_offset;false]',
-            'box[0,0;5,2.25;#ffffff33]',
-            'textarea[0,0;5,2.25;;;'..timer_data..']',
-            'container[0,2.5]',
-            '  button[0,0;0.5,0.5;x_substract_1;'..S('-')..']',
-            '  field[0.75,0;0.75,0.5;x_offset;;'..offset.x..']',
-            '  button[1.75,0;0.5,0.5;x_add_1;'..S('+')..']',
-            'container_end[]',
-            'container[5.25,0]',
-            '  button[0,0;0.5,0.5;y_add_1;'..S('+')..']',
-            '  field[0,0.75;0.75,0.5;y_offset;;'..offset.y..']',
-            '  button[0,1.5;0.5,0.5;y_substract_1;'..S('-')..']',
-            'container_end[]',
-            'label[0.025,3.5;'..information..']',
-        }
-    })
-end
-
-
 mtimer.dialog.timer_format = function (player_name)
     local td = mtimer.get_timer_data(player_name)
 

system/formspecs/hud_element_offset.lua

@@ -0,0 +1,115 @@
+-- Localise needed functions
+local m = mtimer
+local S = m.translator
+local esc = minetest.formspec_escape
+
+
+local draw_scale = function(orientation, length, thickness, color)
+    local startX, startY, startWidth, startHeight
+    local ruleX, ruleY, ruleWidth, ruleHeight
+    local endX, endY, endWidth, endHeight
+
+    if orientation == 'horizontal' then
+        startX = 0
+        startY = 0
+        startWidth = thickness
+        startHeight = thickness * 3
+        ruleX = 0 + (thickness / 4)
+        ruleY = thickness
+        ruleWidth = length - (2 * (thickness / 4))
+        ruleHeight = thickness
+        endX = length - thickness
+        endY = 0
+        endWidth = thickness
+        endHeight = thickness * 3
+    end
+
+    if orientation == 'vertical' then
+        startX = 0
+        startY = 0
+        startWidth = thickness * 3
+        startHeight = thickness
+        ruleX = thickness
+        ruleY = 0 + (thickness / 4)
+        ruleWidth = thickness
+        ruleHeight = length - (2 * (thickness / 4))
+        endX = 0
+        endY = length - thickness
+        endWidth = thickness * 3
+        endHeight = thickness
+    end
+
+    return (table.concat({
+        'box[+startX,+startY;+startWidth,+startHeight;+color]',
+        'box[+ruleX,+ruleY;+ruleWidth,+ruleHeight;+color]',
+        'box[+endX,+endY;+endWidth,+endHeight;+color]',
+    }, ' ')):gsub('%+%w+', {
+        ['+startX'] = startX,
+        ['+startY'] = startY,
+        ['+startWidth'] = startWidth,
+        ['+startHeight'] = startHeight,
+        ['+ruleX'] = ruleX,
+        ['+ruleY'] = ruleY,
+        ['+ruleWidth'] = ruleWidth,
+        ['+ruleHeight'] = ruleHeight,
+        ['+endX'] = endX,
+        ['+endY'] = endY,
+        ['+endWidth'] = endWidth,
+        ['+endHeight'] = endHeight,
+        ['+color'] = color..'FF'
+    })
+
+end
+
+
+mtimer.dialog.hud_element_offset = function (player_name)
+    local player = minetest.get_player_by_name(player_name)
+    local timer_data = esc(mtimer.get_timer_data(player_name).format)
+    local h_color = '#a40000'
+    local v_color = '#4e9a06'
+
+    -- Get current offset values or 0 for use in formspec
+    local key = m.meta.hud_element_offset.key
+    local offset = minetest.deserialize(player:get_meta():get_string(key))
+    offset.x = offset.x and offset.x or 0
+    offset.y = offset.y and offset.y or 0
+
+
+    local infotext = S('Control the HUD element offset using the input on the right side and use the screenshot and markings as orientation for what is changed. The result is shown in the HUD in real time, so check for the actual timner position using the timer HUD element itself.')
+
+    mtimer.show_formspec('mtimer:hud_element_offset', {
+        title = S('HUD Element Offset'),
+        show_to = player_name,
+        width = 11,
+        height = 7.5,
+        formspec = {
+            'field_close_on_enter[x_offset;false]',
+            'field_close_on_enter[y_offset;false]',
+            'container[0,0]',
+            '  container[0,0]',
+                 draw_scale('vertical', 4.8, 0.1, v_color),
+            '  container_end[]',
+            '  image[0.5,0;8,4.8;mtimer_positions_orientation.png]',
+            '  textarea[0,5.7;8.5,1.85;;;'..esc(infotext)..']',
+            '  box[8.75,0;0.01,7.5;#ffffff]',
+            '  container[0.5,5.05]',
+                 draw_scale('horizontal', 8, 0.1, h_color),
+            '  container_end[]',
+            'container_end[]',
+            'container[9.5,0.4]',
+            '  label[-0.5,-0.25;'..esc(S('Vertical'))..']',
+            '  box[-0.5,0.1;0.3,0.3;'..v_color..'FF]',
+            '  field[0,0;0.75,0.5;y_offset;;'..offset.y..']',
+            '  button[0.8,0;0.5,0.26;y_add_1;'..S('+')..']',
+            '  button[0.8,0.26;0.5,0.26;y_substract_1;'..S('-')..']',
+            'container_end[]',
+            'container[9.5,1.75]',
+            '  label[-0.5,-0.25;'..esc(S('Horizontal'))..']',
+            '  box[-0.5,0.1;0.3,0.3;'..h_color..'FF]',
+            '  field[0,0;0.75,0.5;x_offset;;'..offset.x..']',
+            '  button[0.8,0;0.25,0.51;x_substract_1;'..S('-')..']',
+            '  button[1.05,0;0.25,0.51;x_add_1;'..S('+')..']',
+            'container_end[]'
+       }
+    })
+end