Layout and front-end improvements for version 0.3.0

Fixes #11

Author: SMerrony

docs/ConfigurationGuide.md

@@ -12,6 +12,7 @@ It makes use of all of the features currently implemented by the application.
 - [The `keys` Section](#the-keys-section)
   - [The `label` Item](#the-label-item)
   - [The `colspan` and `rowspan` Items](#the-colspan-and-rowspan-items)
+  - [The `bg` Item](#the-bg-item)
   - [The `send` Item](#the-send-item)
     - [Special Keys and Modifiers](#special-keys-and-modifiers)
       - [`Shift+`](#shift)
@@ -52,6 +53,7 @@ You add one `[[tab]]` section for each tab (page) of buttons you want to display
 There are a couple of compulsory config items for the tab itself, then a table of key definitions (see below).
 
 Every tab must contain a `label`, a `cols`, and a `keys` item.
+There is an optional `fontsize` option.
 
 The `label` item is a simple string displayed at the top of the tab of keys.
 
@@ -62,11 +64,15 @@ Eg.
 ```
 [[tab]]
 label = "French"
-cols = 3	
+cols = 3
+fontsize = "20pt"	
 ...
 ```
+The optional `fontsize` item is a string consisting of a number and unit-specifier.
 
-After these two items comes the meat of the config file: the ``keys`` defintions.
+Eg. `fontsize = "12pt"` or `fontsize = "22mm"`.
+
+Next comes the meat of the config file: the ``keys`` defintions.
 
 ## The `keys` Section
 This is where the keys are defined, in order, from left to right.

examples/keypad.toml

@@ -123,13 +123,14 @@ keys = [
 [[tab]]
 label = "LibreOffice" # Testing all the modifiers
 cols = 2
+fontsize = "20pt"
 keys = [
-   { label = "Help",      send = "F1" },
-   { label = "Options",   send = "Alt+F12" },
-   { label = "Spell",     send = "Shift+F7" },
-   { label = "Thes.",     send = "Ctrl+F7" },
-   { label = "Currency",  send = "Ctrl+Shift+4" },
-   { label = "Percent",   send = "Ctrl+Shift+5" },
-   { label = "Comment",   send = "Ctrl+Alt+C" },
-   { label = "PasteUnf",  send = "Ctrl+Alt+Shift+V" },
+   { label = "Help",           send = "F1" },
+   { label = "Options",        send = "Alt+F12" },
+   { label = "Spelling",       send = "Shift+F7" },
+   { label = "Thesaurus",      send = "Ctrl+F7" },
+   { label = "As Currency",    send = "Ctrl+Shift+4" },
+   { label = "As Percentage",  send = "Ctrl+Shift+5" },
+   { label = "Comment",        send = "Ctrl+Alt+C" },
+   { label = "Paste
Unformatted",  send = "Ctrl+Alt+Shift+V" },
 ]

src/config.adb

@@ -207,6 +207,11 @@ package body Config is
                   Tab := Item (Tabs_Array, T);
                   New_Tab.Label   := As_Unbounded_String (Get (Tab, "label"));
                   New_Tab.Columns := Natural (As_Integer (Get (Tab, "cols")));
+                  if Has (Tab, "fontsize") then
+                     New_Tab.Fontsize := As_Unbounded_String (Get (Tab, "fontsize"));
+                  else
+                     New_Tab.Fontsize := Null_Unbounded_String;
+                  end if;
                   --  Put_Line ("Tab defined:"  & Dump_As_String (Tab));
                   if Verbose then
                      Put_Line ("Tab: " & To_String (New_Tab.Label) &

src/config.ads

@@ -48,6 +48,7 @@ package Config is
    type Tab_T is record
       Label      : Unbounded_String;
       Columns    : Natural := 0;
+      Fontsize   : Unbounded_String := Null_Unbounded_String;
       Keys       : Key_Vectors.Vector;
    end record;
 

src/frontend.adb

@@ -60,63 +60,67 @@ package body Frontend is
          "xhr.send(); return false; }" &
          "</script>" &
          "</form></body></html>";
-      Main_Page_HTML : Unbounded_String := Null_Unbounded_String;
+      Main_HTML : Unbounded_String := Null_Unbounded_String;
    begin
-      Append (Main_Page_HTML, Header_HTML);
+      Append (Main_HTML, Header_HTML);
 
       --  first the tab headers or selector
       if Conf.Keypadder_Conf.Tabswitch = Tabs then
-         Append (Main_Page_HTML, "<div class=""kp-bar"">");
+         Append (Main_HTML, "<div class=""kp-bar"">");
          for Tab of Conf.Tabs loop
-            Append (Main_Page_HTML, "<button class=""kp-bar-item"" onclick=""openTab('" &
+            Append (Main_HTML, "<button class=""kp-bar-item"" onclick=""openTab('" &
                                     Tab.Label & "')"">" &
                                     Tab.Label & "</button>");
          end loop;
       else -- selector
-         Append (Main_Page_HTML, "<div><select class='kp-selector' id='kpselect' onChange='selectChange()'>");
+         Append (Main_HTML, "<div><select class='kp-selector' id='kpselect' onChange='selectChange()'>");
          for Tab of Conf.Tabs loop
-            Append (Main_Page_HTML, "<option value='" & Tab.Label & "'>");
-            Append (Main_Page_HTML, Tab.Label & "</option>");
+            Append (Main_HTML, "<option value='" & Tab.Label & "'>");
+            Append (Main_HTML, Tab.Label & "</option>");
          end loop;
-         Append (Main_Page_HTML, "</select>");
+         Append (Main_HTML, "</select>");
       end if;
-      Append (Main_Page_HTML, "</div>" & ASCII.LF);
+      Append (Main_HTML, "</div>" & ASCII.LF);
 
-      Append (Main_Page_HTML, "<form id=""kpForm"" onsubmit=""return ajaxget()"">" & ASCII.LF);
+      Append (Main_HTML, "<form id=""kpForm"" onsubmit=""return ajaxget()"">" & ASCII.LF);
       --  now each tab
       for T in Conf.Tabs.First_Index .. Conf.Tabs.Last_Index loop
-         Append (Main_Page_HTML, "<div id=""" & Conf.Tabs (T).Label & """ class=""kp-pad""");
+         Append (Main_HTML, "<div id=""" & Conf.Tabs (T).Label & """ class=""kp-pad""");
          if T /= Active_Tab then --  hide inactive Tabs
-            Append (Main_Page_HTML, " style=""display:none""");
+            Append (Main_HTML, " style=""display:none""");
          end if;
-         Append (Main_Page_HTML, ">" & ASCII.LF);
+         Append (Main_HTML, ">" & ASCII.LF);
 
          --  the main content of each tab - i.e. the keys
-         Append (Main_Page_HTML, "<div style=""margin: 0 auto; display: grid; gap: 1rem; align-content: stretch; " &
+         Append (Main_HTML, "<div style=""margin: 0 auto; display: grid; gap: 1rem; align-content: stretch; " &
                                  "position: fixed; top: 17mm; left: 0; right: 0; bottom: 2px; " &
                                  "overflow: scroll; " &
                                  "grid-template-columns: repeat(" & Conf.Tabs (T).Columns'Image & ", 1fr);"">");
          for K in Conf.Tabs (T).Keys.First_Index .. Conf.Tabs (T).Keys.Last_Index loop
-            Append (Main_Page_HTML, "<input type=""button"" onClick=""return ajaxget(" & T'Image & "," & K'Image & ")"" class=""kp-btn""");
+            Append (Main_HTML, "<input type=""button"" onClick=""return ajaxget(" & T'Image & "," &
+                                    K'Image & ")"" class=""kp-btn"" style=""");
             if Conf.Tabs (T).Keys (K).Colspan > 1 then
-               Append (Main_Page_HTML, " style=""grid-column: span" & Conf.Tabs (T).Keys (K).Colspan'Image & ";"" ");
+               Append (Main_HTML, " grid-column: span" & Conf.Tabs (T).Keys (K).Colspan'Image & "; ");
             end if;
             if Conf.Tabs (T).Keys (K).Rowspan > 1 then
-               Append (Main_Page_HTML, " style=""grid-row: span" & Conf.Tabs (T).Keys (K).Rowspan'Image & ";"" ");
+               Append (Main_HTML, " rid-row: span" & Conf.Tabs (T).Keys (K).Rowspan'Image & "; ");
             end if;
             if Conf.Tabs (T).Keys (K).Bg_Colour /= Null_Unbounded_String then
-               Append (Main_Page_HTML, " style=""background-color: " & Conf.Tabs (T).Keys (K).Bg_Colour & ";"" ");
+               Append (Main_HTML, " background-color: " & Conf.Tabs (T).Keys (K).Bg_Colour & "; ");
+            end if;
+            if Conf.Tabs (T).Fontsize /= Null_Unbounded_String then
+               Append (Main_HTML, " font-size: " & Conf.Tabs (T).Fontsize & "; ");
             end if;
             --  the key label
-            Append (Main_Page_HTML, " value=""" & Conf.Tabs (T).Keys (K).Label & """>" & ASCII.LF);
+            Append (Main_HTML, """ value=""" & Conf.Tabs (T).Keys (K).Label & """>" & ASCII.LF);
          end loop;
-         Append (Main_Page_HTML, "</div></div>");
+         Append (Main_HTML, "</div></div>");
       end loop;
 
       --  javascript to change displayed tab etc.
-      Append (Main_Page_HTML, Trailer_HTML);
+      Append (Main_HTML, Trailer_HTML);
 
-      return To_String (Main_Page_HTML);
+      return To_String (Main_HTML);
    end Build_Main_Page;
 
    procedure Decode_And_Send_Key (T, I : String; Tab : out Positive) is