The latest articles on DEV Community by Wessel Wessels (@asorepos). https://dev.to/asorepos https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3365189%2Fc2b904ed-4119-436a-b38f-826af6e382fb.jpeg https://dev.to/asorepos en Wessel Wessels Sun, 20 Jul 2025 16:18:24 +0000 https://dev.to/asorepos/recreating-a-vintage-casio-calculator-with-java-javafx-5bed https://dev.to/asorepos/recreating-a-vintage-casio-calculator-with-java-javafx-5bed <p>In this project, I rebuilt my original Casio Personal M-1 calculator in JavaFX — not just the functionality, but the entire look and feel, down to the pixel. What started as a UI practice exercise turned into a full-blown retro replica.</p> <h2> 📐 The Inspiration </h2> <p>This is the actual calculator that started it all — the one I used as a kid:</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.amazonaws.com%2Fuploads%2Farticles%2Fud7gxspsxoffpfvbvmwm.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.amazonaws.com%2Fuploads%2Farticles%2Fud7gxspsxoffpfvbvmwm.png" alt=" " width="390" height="699"></a><br> ![Original Casio Calculator]</p> <p>And here’s my JavaFX recreation, built using Scene Builder and custom styling:</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.amazonaws.com%2Fuploads%2Farticles%2Fks75xpt6xbdvbnflhlpy.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.amazonaws.com%2Fuploads%2Farticles%2Fks75xpt6xbdvbnflhlpy.png" alt=" " width="390" height="699"></a><br> ![JavaFX Replica]</p> <p>From digit alignment to button layout, I wanted it to feel like the original — scratches and all.</p> <h2> 🛠️ What I Built </h2> <p><strong>ASO Calculator</strong> is a clean, desktop JavaFX app with:</p> <ul> <li>A glowing LED-style custom display using a handmade font </li> <li>CSS styling for realistic button shadows, presses, and bevels </li> <li>Custom layout with <code>StackPane</code> for glow overlays </li> <li>Packaged into an <code>.exe</code> installer via <code>jpackage</code> </li> </ul> <h2> 🔣 Font Creation </h2> <p>The calculator display font was redrawn by hand in CorelDRAW, then converted and spaced in FontForge. Decimal alignment required custom kerning to match the real LED layout.</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.amazonaws.com%2Fuploads%2Farticles%2Fco7307rr3wuedkz0uezt.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.amazonaws.com%2Fuploads%2Farticles%2Fco7307rr3wuedkz0uezt.png" alt=" " width="800" height="84"></a><br> ![Font Vector Preview]</p> <p>The display glow is achieved using two overlapping labels and a Gaussian drop shadow — pure JavaFX CSS.</p> <h2> 📚 What I Learned </h2> <p>This project helped solidify my understanding of:</p> <ul> <li>JavaFX layouts (<code>GridPane</code>, <code>VBox</code>, <code>StackPane</code>) </li> <li>CSS styling in JavaFX (hover effects, drop shadows) </li> <li>Scene Builder UI integration </li> <li>GitHub workflows and markdown formatting </li> <li>Packaging apps into <code>.exe</code> using <code>jpackage</code> </li> <li>Font creation using external tools and embedding them via JavaFX</li> </ul> <h2> 💡 Why This Matters </h2> <p>It’s more than a calculator.<br><br> It represents the bridge from:</p> <ul> <li> <strong>Theory → Application</strong> </li> <li> <strong>Tutorial → Original Project</strong> </li> <li><strong>Learning Java → Becoming a Java Developer</strong></li> </ul> <h2> 🚀 Try It Out </h2> <p>✅ You can download and test the final app directly from the GitHub Releases tab:</p> <p><strong>🔗 Download Installer</strong><br><br> ➡️ <a href="https://github.com/aso-repos/CalculatorJavaFX/releases/latest" rel="noopener noreferrer">ASO.Calculator-1.0.exe</a></p> <p>⚠️ May trigger antivirus warnings since it's unsigned. It’s safe to install.</p> <p><strong>🔗 GitHub Repo</strong><br><br> Browse the full source code, font files, styling, and instructions here:<br><br> 👉 <a href="https://github.com/aso-repos/CalculatorJavaFX" rel="noopener noreferrer">https://github.com/aso-repos/CalculatorJavaFX</a></p> <h2> 👋 About Me </h2> <p>Java &amp; JavaFX dev.<br><br> Caught the coding bug at 12 when I wrote my first program on a Commodore 64. Now actively pursuing my dream &amp; building desktop apps in Java. Certified in Java, Python, HTML and CSS. (See LinkedIn profile for full qualification list, learning institutions, and experience.)</p> <p>Let’s connect:<br><br> 🔗 <a href="https://www.linkedin.com/in/wessel-wessels-9113191a/" rel="noopener noreferrer">LinkedIn</a><br><br> 🔗 <a href="https://github.com/aso-repos" rel="noopener noreferrer">GitHub Profile</a></p>