Read barcodes from a photo or screenshot, for computers without a camera

.github/workflows/test.yml

@@ -16,9 +16,10 @@ jobs:
         with:
           node-version: 22
 
-      # The app has no package.json; install the test runner without creating one.
+      # The app has no package.json; install the test runner (and the barcode reader
+      # the photo-scan test serves locally) without creating one.
       - name: Install Playwright
-        run: npm install --no-save playwright@1.56.1
+        run: npm install --no-save playwright@1.56.1 @zxing/library@0.23.0
 
       - name: Install browsers
         run: npx playwright install --with-deps chromium webkit

CONTRIBUTING.md

@@ -22,7 +22,7 @@ The smoke tests in `tests/` drive the app in Playwright on Android, iPhone, iPad
 and desktop sizes. To run them locally in Chromium:
 
 ```bash
-npm install --no-save playwright@1.56.1 && npx playwright install chromium
+npm install --no-save playwright@1.56.1 @zxing/library@0.23.0 && npx playwright install chromium
 MT_BROWSERS=chromium npx playwright test -c tests/playwright.config.js
 ```
 

docs/barcode-scanner.html

@@ -425,7 +425,7 @@
         <p class="t-label">Feature Guide</p>
         <h1 class="t-display">Barcode Scanner</h1>
         <p class="t-lead">
-          Point your camera at a product barcode and Macrolog looks it up instantly. Results are cached, so foods you scan often appear in a flash.
+          Point your camera at a product barcode, or give Macrolog a photo of one, and it looks the product up instantly. Results are cached, so foods you scan often appear in a flash.
         </p>
       </div>
     </section>
@@ -451,37 +451,60 @@ <h2 id="ch01" class="t-display-sm">How scanning works.</h2>
       </div>
     </section>
 
-    <!-- ── Chapter 02 — Callout ── -->
+    <!-- ── Chapter 02 ── -->
     <section class="chapter" aria-labelledby="ch02">
       <div class="wrap">
         <div class="chapter-marker" aria-hidden="true">
-          <span class="chapter-marker__text">02 — Scanning Tips</span>
+          <span class="chapter-marker__text">02 — No Camera?</span>
+          <span class="chapter-marker__rule"></span>
+        </div>
+        <div class="chapter-body">
+          <h2 id="ch02" class="t-display-sm">No camera? Use a photo.</h2>
+          <p class="t-body">
+            Most laptops and desktops don’t have a camera you can point at a packet. Take a photo with your phone, or screenshot a barcode from a shopping site, and Macrolog reads the barcode from the image instead.
+          </p>
+          <ul class="doc-list">
+            <li>On the <strong>Scan</strong> tab, tap <strong>Barcode from Image</strong> and pick the photo.</li>
+            <li>On a computer, <strong>drag the photo</strong> onto the Log Food page, or copy a screenshot and <strong>paste</strong> it (Ctrl+V, or Cmd+V on a Mac).</li>
+            <li>Recipes work the same way: in an ingredient’s <strong>Scan</strong> dialog, use Barcode from Image or drop or paste the photo.</li>
+            <li>Sideways, upside-down and tilted barcodes are fine. A full-size phone photo works even when the barcode is small in it; a blurry one may not.</li>
+            <li>If a photo won’t read, type the <strong>number under the barcode</strong> into <strong>Search</strong>. The product comes up first, marked Barcode.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Chapter 03 — Callout ── -->
+    <section class="chapter" aria-labelledby="ch03">
+      <div class="wrap">
+        <div class="chapter-marker" aria-hidden="true">
+          <span class="chapter-marker__text">03 — Scanning Tips</span>
           <span class="chapter-marker__rule"></span>
         </div>
         <div class="callout">
           <span class="callout__tag" aria-hidden="true">Pro Tip</span>
-          <h2 id="ch02" class="t-display-sm">Scanning tips.</h2>
+          <h2 id="ch03" class="t-display-sm">Scanning tips.</h2>
           <p class="t-body">
             A clean, steady read is everything. If a code won’t catch, these adjustments almost always fix it.
           </p>
           <ul class="doc-list">
             <li>Hold <strong>steady</strong> — the scanner needs a sharp, well-lit barcode.</li>
             <li>Move <strong>closer or further</strong> if it doesn’t detect — <strong>15–25cm</strong> is usually ideal.</li>
-            <li>If the barcode won’t scan, try <strong>“Upload Label”</strong> or <strong>“Paste Text”</strong> instead.</li>
+            <li>If the barcode won’t scan, try <strong>“Barcode from Image”</strong>, <strong>“Upload Label”</strong> or <strong>“Paste Text”</strong> instead.</li>
           </ul>
         </div>
       </div>
     </section>
 
-    <!-- ── Chapter 03 ── -->
-    <section class="chapter" aria-labelledby="ch03">
+    <!-- ── Chapter 04 ── -->
+    <section class="chapter" aria-labelledby="ch04">
       <div class="wrap">
         <div class="chapter-marker" aria-hidden="true">
-          <span class="chapter-marker__text">03 — Product Not Found?</span>
+          <span class="chapter-marker__text">04 — Product Not Found?</span>
           <span class="chapter-marker__rule"></span>
         </div>
         <div class="chapter-body">
-          <h2 id="ch03" class="t-display-sm">Product not found?</h2>
+          <h2 id="ch04" class="t-display-sm">Product not found?</h2>
           <p class="t-body">
             Not every product is in the database yet — but a barcode you add once is yours forever, and instant on every future scan.
           </p>

docs/changelog.html

@@ -224,14 +224,39 @@ <h1>Macrolog</h1>
     <h1 class="page-title">Changelog</h1>
     <p class="page-subtitle">A history of every update to Macrolog.</p>
 
-    <!-- ── v2026-10-07.2 (Desktop layout) ── -->
+    <!-- ── v2026-10-07.4 (Barcode from a photo) ── -->
     <div class="release">
       <div class="release-dot latest"></div>
       <div class="release-header">
-        <span class="release-version">v2026-10-07.2</span>
+        <span class="release-version">v2026-10-07.4</span>
         <span class="release-date">7 October 2026</span>
         <span class="release-badge">Latest</span>
       </div>
+      <div class="release-body">
+        <div class="change-group">
+          <div class="change-group-label">New</div>
+          <ul class="changes">
+            <li><strong>Barcode from Image</strong> — on the Scan tab, and in a recipe's Scan ingredient dialog, pick a photo or screenshot and Macrolog reads the barcode from it, then looks the product up as if you had scanned it. Handles sideways, upside-down and tilted barcodes, and small barcodes in full-size phone photos</li>
+            <li><strong>Drop or paste a barcode image</strong> — on a computer, drag a photo onto the Log Food page or paste a screenshot (Ctrl/Cmd+V) to read its barcode, from any Log Food tab</li>
+            <li><strong>Type a barcode into Search</strong> — the 8 to 14 digit number printed under a barcode now finds that product directly, shown first with a Barcode tag</li>
+          </ul>
+        </div>
+        <div class="change-group">
+          <div class="change-group-label">Improved</div>
+          <ul class="changes">
+            <li><strong>No camera</strong> — on a device without a camera the Scan tab no longer shows an empty viewfinder and a permissions error. It says no camera was found and points to Barcode from Image</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── v2026-10-07.2 (Desktop layout) ── -->
+    <div class="release">
+      <div class="release-dot"></div>
+      <div class="release-header">
+        <span class="release-version">v2026-10-07.2</span>
+        <span class="release-date">7 October 2026</span>
+      </div>
       <div class="release-body">
         <div class="change-group">
           <div class="change-group-label">New</div>

docs/index.html

@@ -1230,14 +1230,14 @@ <h1 id="hero-heading" class="t-display">
 
         <div class="inner">
           <div class="whats-new__meta">
-            <div class="version-badge">v2026-10-07.2 &middot; 7 Oct 2026</div>
+            <div class="version-badge">v2026-10-07.4 &middot; 7 Oct 2026</div>
 
             <h2 id="whats-new-heading" class="t-display-sm">
               The latest update.
             </h2>
 
             <p class="t-body">
-              Every release is driven by real use. This one gives laptops and desktops a layout of their own, keeps your custom foods list to foods you added, makes the chart dates readable again, and helps new users set their own targets.
+              Every release is driven by real use. This one reads barcodes from photos and screenshots for computers without a camera, gives laptops and desktops a layout of their own, keeps your custom foods list to foods you added, makes the chart dates readable again, and helps new users set their own targets.
             </p>
 
             <a class="whats-new__changelog-link" href="changelog.html">
@@ -1246,6 +1246,27 @@ <h2 id="whats-new-heading" class="t-display-sm">
           </div>
 
           <div>
+            <article class="wipe-card" aria-label="New: Barcode from a photo">
+              <div class="wipe-card__icon" aria-hidden="true">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="3" y="3" width="18" height="18" rx="2"/>
+                  <path d="M7 7v10M10 7v10M14 7v10M17 7v10"/>
+                </svg>
+              </div>
+
+              <h3>Scan a barcode without a camera</h3>
+
+              <p class="t-body">
+                Tap <strong>Barcode from Image</strong> on the Scan tab and pick a photo or screenshot, and Macrolog reads the barcode and looks the product up. On a computer you can also drag a photo onto Log Food or paste a screenshot.
+              </p>
+
+              <div class="wipe-card__detail">
+                <p>
+                  It works in a recipe's Scan ingredient dialog too. If a photo won't read, type the number printed under the barcode into Search and the product comes up first.
+                </p>
+              </div>
+            </article>
+
             <article class="wipe-card" aria-label="New: Desktop layout">
               <div class="wipe-card__icon" aria-hidden="true">
                 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
@@ -1349,7 +1370,7 @@ <h3>Daily calorie and macro tracking</h3>
               </svg>
             </span>
             <h3>Barcode scanner</h3>
-            <p>Scan any food barcode to pull up nutrition data instantly — no manual entry needed.</p>
+            <p>Scan any food barcode with your camera, or from a photo or screenshot, to pull up nutrition data instantly — no manual entry needed.</p>
             <span class="feature-card__more" aria-hidden="true">View details &rarr;</span>
           </a>