<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 207studio</title>
    <description>The latest articles on DEV Community by 207studio (@207studio).</description>
    <link>https://dev.to/207studio</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4191314%2F2c6417cb-dee6-483a-a637-763580afa257.png</url>
      <title>DEV Community: 207studio</title>
      <link>https://dev.to/207studio</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/207studio"/>
    <language>en</language>
    <item>
      <title>Playing .pptx decks in the browser with their animations, no server</title>
      <dc:creator>207studio</dc:creator>
      <pubDate>Sun, 18 Oct 2026 06:58:05 +0000</pubDate>
      <link>https://dev.to/207studio/playing-pptx-decks-in-the-browser-with-their-animations-no-server-5con</link>
      <guid>https://dev.to/207studio/playing-pptx-decks-in-the-browser-with-their-animations-no-server-5con</guid>
      <description>&lt;p&gt;I'm an elementary school teacher in Korea, and most of my lessons live in PowerPoint files. I wanted those decks to play inside my own app, one click at a time, the way they do in a classroom. Converting to PDF or images loses the click sequence, and sending files to a conversion server wasn't an option for an offline classroom.&lt;/p&gt;

&lt;p&gt;This is getting more relevant. A recent post says ChatGPT's Space can now create slide decks and, in the web version, export them to PowerPoint, PDF or Google Slides (on Pro, Business and Enterprise plans). However the deck was made, by a person or an AI, the output is still a .pptx file that something has to display.&lt;/p&gt;

&lt;h2&gt;
  
  
  What "playing" a deck means
&lt;/h2&gt;

&lt;p&gt;A .pptx is a zip of XML parts: slide masters, layouts, shapes, text, images, and a timing tree that says what happens on each click. Showing a slide is a rendering problem. Playing it means also walking that timing tree:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Render the slide to HTML and SVG, keeping layout, text and images where PowerPoint put them.&lt;/li&gt;
&lt;li&gt;Group the animations by click, so each press of the arrow key runs the next group.&lt;/li&gt;
&lt;li&gt;Run entrance, exit and emphasis effects in order.&lt;/li&gt;
&lt;li&gt;Between slides, match shapes for morph transitions so a shape moves and resizes instead of cutting.&lt;/li&gt;
&lt;li&gt;Start and stop embedded audio and video at the right step.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Doing it all client-side
&lt;/h2&gt;

&lt;p&gt;I built this as a JavaScript engine that runs entirely in the browser. There is no server conversion and no Office install. Serve the player folder from any static web server and open it. The same folder also loads in a WebView, so on iOS, iPadOS and macOS it works inside a WKWebView, and Android and Electron WebViews work the same way. That is what made it usable offline in a classroom.&lt;/p&gt;

&lt;p&gt;The demo runs in three steps:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;python3 -m http.server 8000
open http://localhost:8000/demo.html
press → or Space to step through the deck
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Broken files
&lt;/h2&gt;

&lt;p&gt;Real decks are messy. A common case is a stray &amp;amp; character in the slide XML. The engine repairs that and plays the slide normally. If the XML is still broken, it renders what it can and reports an error instead of silently dropping the slide, so you know which slide needs a look.&lt;/p&gt;

&lt;h2&gt;
  
  
  Limits
&lt;/h2&gt;

&lt;p&gt;It does not promise full PowerPoint compatibility. Ordinary slide transitions fall back to a fade, and morph is the transition it really plays. Test your own decks before relying on it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Free options first
&lt;/h2&gt;

&lt;p&gt;If you only need to view slides, look at free projects such as @web-ppt/viewer-core or pptx-viewer first. I packaged mine as PPTX Player SDK for people who want one client-side engine with full source and no server. I made it, so take this as a maker's note rather than a review. One-time purchase.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://207studio.dev/products/pptx-player-sdk/" rel="noopener noreferrer"&gt;https://207studio.dev/products/pptx-player-sdk/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>showdev</category>
      <category>pptx</category>
    </item>
    <item>
      <title>Cropping scanned answer sheets with a QR code as the anchor (Python + OpenCV)</title>
      <dc:creator>207studio</dc:creator>
      <pubDate>Sun, 18 Oct 2026 01:28:04 +0000</pubDate>
      <link>https://dev.to/207studio/cropping-scanned-answer-sheets-with-a-qr-code-as-the-anchor-python-opencv-3i1</link>
      <guid>https://dev.to/207studio/cropping-scanned-answer-sheets-with-a-qr-code-as-the-anchor-python-opencv-3i1</guid>
      <description>&lt;p&gt;I'm an elementary school teacher in Korea and I build small tools for my own grading. The slowest part was never the grading itself. It was sorting a scanner batch where pages come out shuffled, rotated, and front and back mixed up.&lt;/p&gt;

&lt;p&gt;The fix that worked: print a small QR in the corner of every sheet. It carries the exam ID, the student number and the side. Then for each scanned page:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Find the QR at any rotation and read who and which side it is.&lt;/li&gt;
&lt;li&gt;Use the QR position plus the table border to rotate and deskew the page.&lt;/li&gt;
&lt;li&gt;Cut every answer cell into its own image, so a person or an OMR reader looks at one cell at a time.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In my test batch, 6 shuffled and rotated scans came out as 3 students with 13 clean cells each, fronts and backs paired automatically. It works offline at 150 dpi.&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the alignment step, which took the most trial and error.&lt;/p&gt;

&lt;p&gt;I made this into a small Python package with full source and a 3-command demo: &lt;a href="https://207studio.dev/products/qr-cropper/" rel="noopener noreferrer"&gt;https://207studio.dev/products/qr-cropper/&lt;/a&gt; One-time purchase.&lt;/p&gt;

</description>
      <category>python</category>
      <category>opencv</category>
      <category>education</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
