The latest articles on DEV Community by Daniel Postle (@xemorysystems). https://dev.to/xemorysystems 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%2F4185521%2Ff2051053-8c94-4c65-8b83-5e7a5d74f40a.png https://dev.to/xemorysystems en Daniel Postle Wed, 14 Oct 2026 21:17:30 +0000 https://dev.to/xemorysystems/build-a-three-expression-robot-face-with-html-and-javascript-4e1p https://dev.to/xemorysystems/build-a-three-expression-robot-face-with-html-and-javascript-4e1p <p>A robot character does not need a complicated animation system to show a little personality. Start with three still expressions and let a button switch between them. This small browser prototype helps you see whether the artwork fits your project before you spend time on a larger interface or physical display.</p> <p>This tutorial uses the <a href="https://thepostleeffect.itch.io/diy-robot-face-free-sample" rel="noopener noreferrer">free Mint sample from Xemory Systems</a>: Smile, Wink and Joy, supplied as three editable SVGs and three transparent 512 × 256 PNGs. The sample download also contains its README and license.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjrq9do5981qyoarevkzh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fjrq9do5981qyoarevkzh.png" alt="Smile expression from the Xemory free Mint robot face sample" width="512" height="256"></a></p> <h2> 1. Put the three PNGs beside your HTML file </h2> <p>Download and extract the free sample. Copy <code>smile-mint.png</code>, <code>wink-mint.png</code> and <code>joy-mint.png</code> into a folder. In the same folder, create a plain-text file named <code>index.html</code>. Keep the exact filenames; the example looks for those files beside the page.</p> <h2> 2. Paste this complete example </h2> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!doctype html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Three-expression robot face<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#111827</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="m">18px</span> <span class="n">system-ui</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span> <span class="p">}</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="n">min</span><span class="p">(</span><span class="m">100%</span><span class="p">,</span> <span class="m">512px</span><span class="p">);</span> <span class="nl">height</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1rem</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">.75rem</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">.25rem</span><span class="p">;</span> <span class="nl">font</span><span class="p">:</span> <span class="nb">inherit</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span><span class="nd">:focus-visible</span> <span class="p">{</span> <span class="nl">outline</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="m">#6ee7b7</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;h1&gt;</span>Give your robot an expression<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;img</span> <span class="na">id=</span><span class="s">"face"</span> <span class="na">src=</span><span class="s">"smile-mint.png"</span> <span class="na">width=</span><span class="s">"512"</span> <span class="na">height=</span><span class="s">"256"</span> <span class="na">alt=</span><span class="s">"Robot face: smile"</span><span class="nt">&gt;</span> <span class="nt">&lt;div&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-face=</span><span class="s">"smile"</span><span class="nt">&gt;</span>Smile<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-face=</span><span class="s">"wink"</span><span class="nt">&gt;</span>Wink<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-face=</span><span class="s">"joy"</span><span class="nt">&gt;</span>Joy<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"status"</span> <span class="na">aria-live=</span><span class="s">"polite"</span><span class="nt">&gt;</span>Expression: smile<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">const</span> <span class="nx">face</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#face</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">status</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#status</span><span class="dl">'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-face]</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">button</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">button</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">expression</span> <span class="o">=</span> <span class="nx">button</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">face</span><span class="p">;</span> <span class="nx">face</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">expression</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">-mint.png</span><span class="dl">'</span><span class="p">;</span> <span class="nx">face</span><span class="p">.</span><span class="nx">alt</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Robot face: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">expression</span><span class="p">;</span> <span class="nx">status</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Expression: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">expression</span><span class="p">;</span> <span class="p">});</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h2> 3. Open it and try the buttons </h2> <p>Save the file, then open <code>index.html</code> in a current desktop browser with JavaScript enabled. This example uses ordinary relative image paths: no API key, external JavaScript library or server request is needed for the expression switch.</p> <p>If an image is missing, check that the PNG is beside the HTML file and that the spelling and extension match. If the page displays the code as text, make sure the filename ends in <code>.html</code>, not <code>.html.txt</code>.</p> <h2> What the prototype demonstrates </h2> <p>The JavaScript changes the image filename and its descriptive text. It does not animate the artwork or control hardware. The real buttons also work with keyboard focus and Enter or Space, while the status line announces the selected expression to assistive technology.</p> <p>Once the layout feels right, you can connect the same expression choices to events in your own app. For a physical display, you still need the appropriate display driver, image conversion and hardware code. This browser example is a visual starting point.</p> <h2> More expressions or a custom visual idea? </h2> <p>The free sample can be used or modified in personal or commercial finished projects under its included license. Standalone asset resale or redistribution is not allowed.</p> <p>The optional <a href="https://payhip.com/b/0rFsq" rel="noopener noreferrer">full DIY Robot Face Pack costs US$1.99</a> and provides 12 expressions in three palettes, SVG/PNG artwork, monochrome PBM assets, a C header, a PDF guide and a browser motion preview. Artwork files are still images; hardware and firmware are not included.</p> <p>For an idea that needs different artwork, graphics, tutorial slides or presentation visuals, you can <a href="https://www.xemorysystems.com/creative-request" rel="noopener noreferrer">send Xemory Systems a custom creative request</a>. Scope and deliverables are agreed before production and payment.</p> javascript webdev tutorial