Add visual separators: inverted banner sections on receipts, dividers in navbar

ReceiptBuilder#invert (GS B) + #section_separator give the test page (and
future receipts) a full-width white-on-black banner between sections --
the closest a direct-thermal printer gets to a second color. Navbar gets
a vr divider between Home | Brother/Shipping labels/Receipts | Labels to
group the three logical clusters.

app.rb

@@ -132,31 +132,26 @@ helpers do
   def print_epson_test_page
     receipt = ReceiptBuilder.new
     receipt.align(:center).bold.size(:big).text("TM-T20II TEST\n").size(:normal).bold(false)
-    receipt.align(:left).text(('-' * 48) + "\n")
 
+    receipt.align(:left).section_separator('TEXT STYLES')
     receipt.text("Normal text\n")
     receipt.bold.text("Bold text\n").bold(false)
     receipt.underline.text("Underlined text\n").underline(false)
     receipt.size(:wide).text("Double width\n").size(:normal)
     receipt.size(:high).text("Double height\n").size(:normal)
     receipt.size(:big).text("Double both\n").size(:normal)
-    receipt.text(('-' * 48) + "\n")
 
-    receipt.align(:center)
-    receipt.text("EAN-13 barcode:\n")
-    receipt.ean13('2012345678902')
-    receipt.feed(1)
+    receipt.section_separator('BARCODE')
+    receipt.align(:center).ean13('2012345678902')
 
-    receipt.text("QR code:\n")
-    receipt.qr('https://git.priesol.net/randy/home-gitops')
-    receipt.feed(1)
+    receipt.section_separator('QR CODE')
+    receipt.align(:center).qr('https://git.priesol.net/randy/home-gitops')
 
-    receipt.text("Raster image:\n")
-    receipt.image(64, 64, checkerboard_bitmap)
-    receipt.feed(1)
+    receipt.section_separator('IMAGE')
+    receipt.align(:center).image(64, 64, checkerboard_bitmap)
 
-    receipt.align(:left).text(('-' * 48) + "\n")
-    receipt.text("Printed: #{Time.now.strftime('%Y-%m-%d %H:%M:%S')}\n")
+    receipt.section_separator
+    receipt.align(:left).text("Printed: #{Time.now.strftime('%Y-%m-%d %H:%M:%S')}\n")
     receipt.feed(3).cut
     receipt.print!(PRINTER_DEVICE_EPSON)
   end

lib/receipt_builder.rb

@@ -65,6 +65,19 @@ class ReceiptBuilder
     self
   end
 
+  # White-on-black reverse video (GS B n) -- the closest this direct-thermal
+  # printer gets to a second "color" for a separator/banner.
+  def invert(enable = true)
+    @buffer << (enable ? "\x1D\x42\x01" : "\x1D\x42\x00")
+    self
+  end
+
+  # A full-width inverted banner line, e.g. section_separator("SECTION").
+  def section_separator(label = '', width: 48)
+    padded = label.empty? ? (' ' * width) : " #{label} ".center(width)
+    feed(1).invert.text(padded[0, width]).invert(false).feed(1)
+  end
+
   def size(mode)
     @buffer << case mode
                when :big  then TXT_BIG

views/_navbar.erb

@@ -9,6 +9,7 @@
         <li class="nav-item">
           <a class="nav-link <%= 'active' if request.path == '/' %>" href="/">Home</a>
         </li>
+        <li class="nav-item"><div class="vr mx-2 my-2"></div></li>
         <li class="nav-item">
           <a class="nav-link <%= 'active' if request.path.start_with?('/brother') %>" href="/brother">Brother</a>
         </li>
@@ -18,6 +19,7 @@
         <li class="nav-item">
           <a class="nav-link <%= 'active' if request.path == '/epson' %>" href="/epson">Receipts</a>
         </li>
+        <li class="nav-item"><div class="vr mx-2 my-2"></div></li>
         <li class="nav-item">
           <a class="nav-link <%= 'active' if request.path.start_with?('/labels') %>" href="/labels">Labels</a>
         </li>