trmnl_preview 0.30.0 → 0.30.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20431d997e72a0c534f9945c0c8e23cf97dcfff3be5119cbbf2d7973b2c3af73
-  data.tar.gz: 4a96842d311255ad1cd618e36dab4ef4eaa0504c58efe394a609ee5ddc043dba
+  metadata.gz: 685a69fdb40d83171f2f8cb17d89b6954fae9c97f9f551d4210d228acbdb0690
+  data.tar.gz: e666f0a63344dc33447eb70cabf3202bab6c6030f967716e3b50954583e222e7
 SHA512:
-  metadata.gz: 6dcab087ef567886345b3ef14e90931af73c236680afb0555667357f277fd650eaed3c473fa7bb514196ca701cccbd3a68ee6f19e302e0be3d37a23bb5abcdb1
-  data.tar.gz: '070453995dac9d20fb77914c1a2adcfde9d01f2ccb34899f00b94cf238278b15a3afae3abfe33da9aae17dbacad5f842e34bd080c169ef256c58d144c449b9b5'
+  metadata.gz: a53e8130820062a99d94d25b2a140506baefccb9e2747c30c46d2cc7795a96c423c4c537c520514c3706a9aafacd1cb215957fdd3af6048b5145632ddb24058a
+  data.tar.gz: ebbaa2038fb76c066394dd98218a5305741d2b274763ddc2d41ad4151fc096763ec4593338f364d71807f032687264341e0585f17cf630684276101d757c6f78

data/CHANGELOG.md

@@ -1,6 +1,14 @@
 
 # Changelog
 
+## 0.30.2
+
+- `trmnlp serve`'s HTML preview of a device TRMNL scales runs the page's scripts at the CSS size too, then shows the page at the device's size and stops its timers, as the PNG and the device do. Before, a table showed 8 of 20 rows on a TRMNL X where the device shows 15.
+
+## 0.30.1
+
+- A screen on a device TRMNL scales, as the TRMNL X or a Kobo, runs its scripts at the CSS size and is scaled only for the picture, as TRMNL does. Before, the scripts measured the scaled page, so a table cut rows the device shows (7 of 14 on a TRMNL X) and clamped text kept lines the device cuts.
+
 ## 0.30.0
 
 - `trmnlp test` quits a Firefox that stopped answering before it starts a new one. The old geckodriver kept running until something killed it.

data/lib/trmnlp/app.rb

@@ -213,7 +213,7 @@ module TRMNLP
       end
 
       get "/render/#{view}.html" do
-        @renderer.render_full_page(view, params)
+        Screenshot.live_preview(@renderer.render_full_page(view, params))
       end
 
       get "/render/#{view}.png" do

data/lib/trmnlp/screen_generator.rb

@@ -24,8 +24,11 @@ module TRMNLP
       @requested_color_depth = opts[:color_depth]
     end
 
-    # The page as it is shown: chart libraries swapped for TRMNL's copies.
-    def html = CHART_LIBRARIES.reduce(@input) { |page, (from, to)| page.gsub(from, to) }
+    # The page as it is shown: chart libraries swapped for TRMNL's copies, laid out unscaled until the capture.
+    def html
+      CHART_LIBRARIES.reduce(@input) { |page, (from, to)| page.gsub(from, to) }
+                     .sub('</head>', "#{Screenshot::LAYOUT_PASS_STYLE}</head>")
+    end
 
     def process
       output = @screenshot.call(html:, width:, height:)

data/lib/trmnlp/screenshot.rb

@@ -34,6 +34,46 @@ module TRMNLP
       window.onresize = null;
     JS
 
+    # TRMNL lays out a device it scales (TRMNL X, most BYOD screens) at its CSS size while the page's scripts
+    # run, then scales the frozen page for the capture, so a script that measures sees what the device shows.
+    LAYOUT_PASS_STYLE = '<style id="trmnlp-layout-pass">.trmnl .screen { --pixel-ratio: 1 !important; }</style>'
+    APPLY_CAPTURE_SCALE = <<~JS
+      document.getElementById('trmnlp-layout-pass')?.remove();
+      document.documentElement.offsetHeight;
+    JS
+    # A map redraws its canvas at the capture scale before the timers it needs are frozen, for 8s at most.
+    REFRESH_MAPS = <<~JS
+      const done = arguments[arguments.length - 1];
+      if (typeof window.TRMNLMaps?.refresh !== 'function') return done(false);
+      const timeout = new Promise((resolve) => setTimeout(resolve, 8000));
+      Promise.race([window.TRMNLMaps.refresh(), timeout]).then(() => done(true), () => done(false));
+    JS
+
+    # The live preview settles in the page as a capture does, then stays still, as the device shows it.
+    SETTLE_LIVE_PREVIEW = <<~JS.freeze
+      (async () => {
+        const wait = window.setTimeout.bind(window);
+        const sleep = (ms) => new Promise((resolve) => wait(resolve, ms));
+        const ready = () => { #{READINESS_CHECK_SCRIPT} };
+        const readyBy = Date.now() + 1000 * %d;
+        while (!ready() && Date.now() < readyBy) await sleep(50);
+        if (document.fonts) await Promise.race([document.fonts.ready, sleep(#{FONTS_TIMEOUT_SECONDS * 1000})]);
+        if (typeof window.TRMNLMaps?.refresh !== 'function') {
+          #{FREEZE_TIMERS}
+          #{APPLY_CAPTURE_SCALE}
+          return;
+        }
+        #{APPLY_CAPTURE_SCALE}
+        await Promise.race([window.TRMNLMaps.refresh(), sleep(8000)]).catch(() => {});
+        #{FREEZE_TIMERS}
+      })();
+    JS
+
+    def self.live_preview(html)
+      timeout = html.match?(MAPS_DOCUMENT_PATTERN) ? READINESS_TIMEOUT_WITH_MAPS_SECONDS : READINESS_TIMEOUT_SECONDS
+      html.sub('</head>', "#{LAYOUT_PASS_STYLE}<script>#{format(SETTLE_LIVE_PREVIEW, timeout)}</script></head>")
+    end
+
     def initialize(pool:, viewport_timeout: 5, fonts_timeout: FONTS_TIMEOUT_SECONDS)
       @pool = pool
       @viewport_timeout = viewport_timeout
@@ -123,6 +163,14 @@ module TRMNLP
         document.documentElement.style.overflow = 'hidden';
         document.body.style.overflow = 'hidden';
       JS
+      freeze_at_capture_scale(driver, html)
+    end
+
+    def freeze_at_capture_scale(driver, html)
+      return driver.execute_script(FREEZE_TIMERS + APPLY_CAPTURE_SCALE) unless html.match?(MAPS_DOCUMENT_PATTERN)
+
+      driver.execute_script(APPLY_CAPTURE_SCALE)
+      driver.execute_async_script(REFRESH_MAPS)
       driver.execute_script(FREEZE_TIMERS)
     end
 

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.30.0'
+  VERSION = '0.30.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.30.0
+  version: 0.30.2
 platform: ruby
 authors:
 - Rockwell Schrock