{"id":45765,"date":"2026-06-16T07:49:31","date_gmt":"2026-06-16T07:49:31","guid":{"rendered":"https:\/\/rjydisplay.com\/?page_id=45765"},"modified":"2026-06-16T07:52:32","modified_gmt":"2026-06-16T07:52:32","slug":"display-parameter-calculator","status":"publish","type":"page","link":"https:\/\/rjydisplay.com\/fr\/display-parameter-calculator\/","title":{"rendered":"Calculateur de param\u00e8tres"},"content":{"rendered":"<div class=\"rjy-display-calculator\" id=\"rjyDisplayCalculator\">\r\n        <div class=\"rjy-calc-header\">\r\n            <p class=\"rjy-calc-kicker\">Display Engineering Tool<\/p>\r\n            <h2>TFT LCD Screen Parameter Calculator<\/h2>\r\n            <p>\r\n                Calculate screen size, PPI, pixel pitch, aspect ratio, active area, and round LCD display parameters for embedded display projects.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"rjy-calc-grid\">\r\n            <div class=\"rjy-calc-panel\">\r\n                <h3>Input Display Parameters<\/h3>\r\n\r\n                <div class=\"rjy-field-group\">\r\n                    <label for=\"rjyDiagonal\">Screen Size \/ Diagonal<\/label>\r\n                    <div class=\"rjy-input-row\">\r\n                        <input type=\"number\" id=\"rjyDiagonal\" value=\"7\" min=\"0.1\" step=\"0.01\">\r\n                        <select id=\"rjyDiagonalUnit\">\r\n                            <option value=\"inch\" selected>pouce<\/option>\r\n                            <option value=\"mm\">mm<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"rjy-field-group\">\r\n                    <label for=\"rjyWidthPixels\">Resolution Width<\/label>\r\n                    <input type=\"number\" id=\"rjyWidthPixels\" value=\"1024\" min=\"1\" step=\"1\">\r\n                <\/div>\r\n\r\n                <div class=\"rjy-field-group\">\r\n                    <label for=\"rjyHeightPixels\">Resolution Height<\/label>\r\n                    <input type=\"number\" id=\"rjyHeightPixels\" value=\"600\" min=\"1\" step=\"1\">\r\n                <\/div>\r\n\r\n                <div class=\"rjy-field-group\">\r\n                    <label for=\"rjyDisplayShape\">Display Shape<\/label>\r\n                    <select id=\"rjyDisplayShape\">\r\n                        <option value=\"rectangular\" selected>Rectangular LCD \/ TFT Display<\/option>\r\n                        <option value=\"round\">Round LCD \/ Circular TFT Display<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <button type=\"button\" class=\"rjy-calc-button\" id=\"rjyCalculateBtn\">\r\n                    Calculate Display Parameters\r\n                <\/button>\r\n\r\n                <button type=\"button\" class=\"rjy-reset-button\" id=\"rjyResetBtn\">\r\n                    Reset Example\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div class=\"rjy-calc-panel rjy-result-panel\">\r\n                <h3>Calculated Results<\/h3>\r\n\r\n                <div class=\"rjy-result-list\">\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Aspect Ratio<\/span>\r\n                        <strong id=\"rjyAspectRatio\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Diagonal Size<\/span>\r\n                        <strong id=\"rjyDiagonalResult\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Active Area Width<\/span>\r\n                        <strong id=\"rjyActiveWidth\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Active Area Height<\/span>\r\n                        <strong id=\"rjyActiveHeight\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>PPI \/ Pixel Density<\/span>\r\n                        <strong id=\"rjyPpi\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Hauteur du pixel<\/span>\r\n                        <strong id=\"rjyPixelPitch\">-<\/strong>\r\n                    <\/div>\r\n\r\n                    <div class=\"rjy-result-item\">\r\n                        <span>Display Type Hint<\/span>\r\n                        <strong id=\"rjyDisplayHint\">-<\/strong>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"rjy-note-box\" id=\"rjyNoteBox\">\r\n                    Enter screen parameters to calculate display results.\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"rjy-calc-info\">\r\n            <h3>How These Parameters Help Display Selection<\/h3>\r\n\r\n            <div class=\"rjy-info-grid\">\r\n                <div>\r\n                    <h4>PPI<\/h4>\r\n                    <p>\r\n                        PPI helps estimate image sharpness. Higher PPI is useful for close viewing distance, compact HMI panels, handheld devices, and round smart interfaces.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4>Hauteur du pixel<\/h4>\r\n                    <p>\r\n                        Pixel pitch shows the physical distance between pixels. It is useful when evaluating readability, UI detail, and viewing distance.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4>Zone active<\/h4>\r\n                    <p>\r\n                        Active area helps mechanical engineers estimate the visible display width and height for enclosure design, lens design, and UI layout.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <h4>Aspect Ratio<\/h4>\r\n                    <p>\r\n                        Aspect ratio helps identify standard displays, wide displays, bar LCD modules, and stretched display formats for space-constrained products.\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"rjy-calc-cta\">\r\n            <div>\r\n                <h3>Need Help Selecting a TFT LCD Module?<\/h3>\r\n                <p>\r\n                    Share your display size, resolution, interface, touch type, brightness, operating environment, target application, prototype quantity, and project timeline.\r\n                <\/p>\r\n            <\/div>\r\n            <a href=\"\/contact\/\" class=\"rjy-calc-cta-button\">Talk to an RJY Engineer<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        .rjy-display-calculator,\r\n        .rjy-display-calculator * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .rjy-display-calculator {\r\n            width: 100%;\r\n            max-width: 1180px;\r\n            margin: 40px auto;\r\n            padding: 0;\r\n            font-family: inherit;\r\n            color: #1f2937;\r\n        }\r\n\r\n        .rjy-calc-header {\r\n            background: linear-gradient(135deg, #2c58ab 0%, #113163 100%);\r\n            color: #ffffff;\r\n            padding: 34px 36px;\r\n            border-radius: 18px;\r\n            margin-bottom: 24px;\r\n        }\r\n\r\n        .rjy-calc-header .rjy-calc-kicker {\r\n            margin: 0 0 8px;\r\n            font-size: 13px;\r\n            font-weight: 700;\r\n            letter-spacing: 0.08em;\r\n            text-transform: uppercase;\r\n            opacity: 0.86;\r\n        }\r\n\r\n        .rjy-calc-header h2 {\r\n            margin: 0 0 12px;\r\n            color: #ffffff;\r\n            font-size: 32px;\r\n            line-height: 1.2;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .rjy-calc-header p {\r\n            margin: 0;\r\n            max-width: 820px;\r\n            font-size: 16px;\r\n            line-height: 1.7;\r\n            color: rgba(255, 255, 255, 0.88);\r\n        }\r\n\r\n        .rjy-calc-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 24px;\r\n            align-items: stretch;\r\n        }\r\n\r\n        .rjy-calc-panel {\r\n            background: #ffffff;\r\n            border: 1px solid #e5e7eb;\r\n            border-radius: 18px;\r\n            padding: 28px;\r\n            box-shadow: 0 14px 35px rgba(17, 49, 99, 0.08);\r\n        }\r\n\r\n        .rjy-calc-panel h3 {\r\n            margin: 0 0 22px;\r\n            font-size: 22px;\r\n            line-height: 1.3;\r\n            color: #113163;\r\n        }\r\n\r\n        .rjy-field-group {\r\n            margin-bottom: 18px;\r\n        }\r\n\r\n        .rjy-field-group label {\r\n            display: block;\r\n            margin-bottom: 7px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            color: #374151;\r\n        }\r\n\r\n        .rjy-field-group input,\r\n        .rjy-field-group select {\r\n            width: 100%;\r\n            height: 46px;\r\n            border: 1px solid #d1d5db;\r\n            border-radius: 10px;\r\n            padding: 0 12px;\r\n            font-size: 15px;\r\n            color: #111827;\r\n            background: #ffffff;\r\n            outline: none;\r\n            transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n        }\r\n\r\n        .rjy-field-group input:focus,\r\n        .rjy-field-group select:focus {\r\n            border-color: #2c58ab;\r\n            box-shadow: 0 0 0 3px rgba(44, 88, 171, 0.14);\r\n        }\r\n\r\n        .rjy-input-row {\r\n            display: grid;\r\n            grid-template-columns: 1fr 110px;\r\n            gap: 10px;\r\n        }\r\n\r\n        .rjy-calc-button,\r\n        .rjy-reset-button {\r\n            width: 100%;\r\n            height: 48px;\r\n            border: 0;\r\n            border-radius: 12px;\r\n            font-size: 15px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: transform 0.18s ease, background 0.18s ease;\r\n        }\r\n\r\n        .rjy-calc-button {\r\n            margin-top: 8px;\r\n            background: #2c58ab;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .rjy-calc-button:hover {\r\n            background: #113163;\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        .rjy-reset-button {\r\n            margin-top: 12px;\r\n            background: #eef2ff;\r\n            color: #113163;\r\n        }\r\n\r\n        .rjy-reset-button:hover {\r\n            background: #dbe4ff;\r\n        }\r\n\r\n        .rjy-result-panel {\r\n            background: #f8fafc;\r\n        }\r\n\r\n        .rjy-result-list {\r\n            display: grid;\r\n            gap: 12px;\r\n        }\r\n\r\n        .rjy-result-item {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            gap: 16px;\r\n            align-items: center;\r\n            padding: 14px 16px;\r\n            background: #ffffff;\r\n            border: 1px solid #e5e7eb;\r\n            border-radius: 12px;\r\n        }\r\n\r\n        .rjy-result-item span {\r\n            color: #4b5563;\r\n            font-size: 14px;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        .rjy-result-item strong {\r\n            color: #113163;\r\n            font-size: 15px;\r\n            line-height: 1.4;\r\n            text-align: right;\r\n        }\r\n\r\n        .rjy-note-box {\r\n            margin-top: 18px;\r\n            padding: 16px;\r\n            border-left: 4px solid #2c58ab;\r\n            background: #ffffff;\r\n            border-radius: 10px;\r\n            font-size: 14px;\r\n            line-height: 1.7;\r\n            color: #374151;\r\n        }\r\n\r\n        .rjy-calc-info {\r\n            margin-top: 24px;\r\n            padding: 30px;\r\n            border-radius: 18px;\r\n            background: #ffffff;\r\n            border: 1px solid #e5e7eb;\r\n        }\r\n\r\n        .rjy-calc-info h3 {\r\n            margin: 0 0 20px;\r\n            color: #113163;\r\n            font-size: 24px;\r\n        }\r\n\r\n        .rjy-info-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 18px;\r\n        }\r\n\r\n        .rjy-info-grid div {\r\n            padding: 18px;\r\n            border-radius: 14px;\r\n            background: #f8fafc;\r\n            border: 1px solid #e5e7eb;\r\n        }\r\n\r\n        .rjy-info-grid h4 {\r\n            margin: 0 0 8px;\r\n            color: #2c58ab;\r\n            font-size: 16px;\r\n        }\r\n\r\n        .rjy-info-grid p {\r\n            margin: 0;\r\n            color: #4b5563;\r\n            font-size: 14px;\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .rjy-calc-cta {\r\n            margin-top: 24px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            gap: 24px;\r\n            align-items: center;\r\n            padding: 28px 30px;\r\n            border-radius: 18px;\r\n            background: #113163;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .rjy-calc-cta h3 {\r\n            margin: 0 0 8px;\r\n            color: #ffffff;\r\n            font-size: 22px;\r\n        }\r\n\r\n        .rjy-calc-cta p {\r\n            margin: 0;\r\n            color: rgba(255, 255, 255, 0.84);\r\n            line-height: 1.7;\r\n            font-size: 15px;\r\n        }\r\n\r\n        .rjy-calc-cta-button {\r\n            flex: 0 0 auto;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            min-height: 46px;\r\n            padding: 0 20px;\r\n            border-radius: 999px;\r\n            background: #ffffff;\r\n            color: #113163;\r\n            font-weight: 700;\r\n            text-decoration: none;\r\n            transition: transform 0.18s ease, opacity 0.18s ease;\r\n        }\r\n\r\n        .rjy-calc-cta-button:hover {\r\n            color: #113163;\r\n            opacity: 0.92;\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .rjy-calc-grid,\r\n            .rjy-info-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .rjy-calc-cta {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .rjy-display-calculator {\r\n                margin: 24px auto;\r\n            }\r\n\r\n            .rjy-calc-header,\r\n            .rjy-calc-panel,\r\n            .rjy-calc-info,\r\n            .rjy-calc-cta {\r\n                border-radius: 14px;\r\n                padding: 22px;\r\n            }\r\n\r\n            .rjy-calc-header h2 {\r\n                font-size: 26px;\r\n            }\r\n\r\n            .rjy-result-item {\r\n                align-items: flex-start;\r\n                flex-direction: column;\r\n                gap: 4px;\r\n            }\r\n\r\n            .rjy-result-item strong {\r\n                text-align: left;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            var calculator = document.getElementById('rjyDisplayCalculator');\r\n            if (!calculator) return;\r\n\r\n            var diagonalInput = document.getElementById('rjyDiagonal');\r\n            var diagonalUnit = document.getElementById('rjyDiagonalUnit');\r\n            var widthPixelsInput = document.getElementById('rjyWidthPixels');\r\n            var heightPixelsInput = document.getElementById('rjyHeightPixels');\r\n            var displayShapeInput = document.getElementById('rjyDisplayShape');\r\n\r\n            var aspectRatioOutput = document.getElementById('rjyAspectRatio');\r\n            var diagonalOutput = document.getElementById('rjyDiagonalResult');\r\n            var activeWidthOutput = document.getElementById('rjyActiveWidth');\r\n            var activeHeightOutput = document.getElementById('rjyActiveHeight');\r\n            var ppiOutput = document.getElementById('rjyPpi');\r\n            var pixelPitchOutput = document.getElementById('rjyPixelPitch');\r\n            var displayHintOutput = document.getElementById('rjyDisplayHint');\r\n            var noteBox = document.getElementById('rjyNoteBox');\r\n\r\n            var calculateBtn = document.getElementById('rjyCalculateBtn');\r\n            var resetBtn = document.getElementById('rjyResetBtn');\r\n\r\n            function gcd(a, b) {\r\n                a = Math.abs(a);\r\n                b = Math.abs(b);\r\n                while (b) {\r\n                    var temp = b;\r\n                    b = a % b;\r\n                    a = temp;\r\n                }\r\n                return a || 1;\r\n            }\r\n\r\n            function round(value, decimals) {\r\n                var factor = Math.pow(10, decimals);\r\n                return Math.round(value * factor) \/ factor;\r\n            }\r\n\r\n            function getDisplayHint(aspectW, aspectH, shape, widthPx, heightPx) {\r\n                var ratio = aspectW \/ aspectH;\r\n\r\n                if (shape === 'round') {\r\n                    if (widthPx === heightPx) {\r\n                        return 'Round LCD \/ circular TFT display';\r\n                    }\r\n                    return 'Round display input detected, but resolution is not square';\r\n                }\r\n\r\n                if (ratio >= 2.5) {\r\n                    return 'Bar LCD \/ stretched display format';\r\n                }\r\n\r\n                if (ratio > 1) {\r\n                    return 'Landscape TFT LCD display';\r\n                }\r\n\r\n                if (ratio < 1) {\r\n                    return 'Portrait TFT LCD display';\r\n                }\r\n\r\n                return 'Square display format';\r\n            }\r\n\r\n            function calculateDisplay() {\r\n                var diagonal = parseFloat(diagonalInput.value);\r\n                var widthPx = parseInt(widthPixelsInput.value, 10);\r\n                var heightPx = parseInt(heightPixelsInput.value, 10);\r\n                var unit = diagonalUnit.value;\r\n                var shape = displayShapeInput.value;\r\n\r\n                if (!diagonal || diagonal <= 0 || !widthPx || widthPx <= 0 || !heightPx || heightPx <= 0) {\r\n                    noteBox.innerHTML = 'Please enter valid screen size and resolution values.';\r\n                    return;\r\n                }\r\n\r\n                var diagonalInch = unit === 'mm' ? diagonal \/ 25.4 : diagonal;\r\n                var diagonalMm = diagonalInch * 25.4;\r\n\r\n                var divisor = gcd(widthPx, heightPx);\r\n                var aspectW = widthPx \/ divisor;\r\n                var aspectH = heightPx \/ divisor;\r\n\r\n                var pixelDiagonal = Math.sqrt((widthPx * widthPx) + (heightPx * heightPx));\r\n                var ppi = pixelDiagonal \/ diagonalInch;\r\n                var pixelPitch = 25.4 \/ ppi;\r\n\r\n                var activeWidthMm;\r\n                var activeHeightMm;\r\n\r\n                if (shape === 'round' && widthPx === heightPx) {\r\n                    activeWidthMm = diagonalMm;\r\n                    activeHeightMm = diagonalMm;\r\n                } else {\r\n                    activeWidthMm = diagonalMm * (aspectW \/ Math.sqrt((aspectW * aspectW) + (aspectH * aspectH)));\r\n                    activeHeightMm = diagonalMm * (aspectH \/ Math.sqrt((aspectW * aspectW) + (aspectH * aspectH)));\r\n                }\r\n\r\n                var displayHint = getDisplayHint(aspectW, aspectH, shape, widthPx, heightPx);\r\n\r\n                aspectRatioOutput.textContent = aspectW + ':' + aspectH;\r\n                diagonalOutput.textContent = round(diagonalInch, 2) + ' inch \/ ' + round(diagonalMm, 2) + ' mm';\r\n                activeWidthOutput.textContent = round(activeWidthMm, 2) + ' mm';\r\n                activeHeightOutput.textContent = round(activeHeightMm, 2) + ' mm';\r\n                ppiOutput.textContent = round(ppi, 2) + ' PPI';\r\n                pixelPitchOutput.textContent = round(pixelPitch, 4) + ' mm';\r\n                displayHintOutput.textContent = displayHint;\r\n\r\n                var note = '';\r\n\r\n                if (shape === 'round') {\r\n                    note = 'For round LCD displays, UI layout should consider the circular boundary and safe viewing area. Square resolution is common, but the actual visible area depends on the mechanical and cover lens design.';\r\n                } else if ((aspectW \/ aspectH) >= 2.5) {\r\n                    note = 'This result indicates a stretched or bar-type LCD format. Bar LCD modules are often used in industrial control panels, transportation displays, smart retail systems, and narrow-space interfaces.';\r\n                } else {\r\n                    note = 'These calculated values can help estimate display sharpness, mechanical active area, UI layout, and enclosure planning before selecting a TFT LCD module.';\r\n                }\r\n\r\n                noteBox.innerHTML = note;\r\n            }\r\n\r\n            function resetExample() {\r\n                diagonalInput.value = '7';\r\n                diagonalUnit.value = 'inch';\r\n                widthPixelsInput.value = '1024';\r\n                heightPixelsInput.value = '600';\r\n                displayShapeInput.value = 'rectangular';\r\n                calculateDisplay();\r\n            }\r\n\r\n            calculateBtn.addEventListener('click', calculateDisplay);\r\n            resetBtn.addEventListener('click', resetExample);\r\n\r\n            diagonalInput.addEventListener('input', calculateDisplay);\r\n            diagonalUnit.addEventListener('change', calculateDisplay);\r\n            widthPixelsInput.addEventListener('input', calculateDisplay);\r\n            heightPixelsInput.addEventListener('input', calculateDisplay);\r\n            displayShapeInput.addEventListener('change', calculateDisplay);\r\n\r\n            calculateDisplay();\r\n        });\r\n    <\/script>\r\n\r\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":45684,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45765","page","type-page","status-publish","has-post-thumbnail","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/pages\/45765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/comments?post=45765"}],"version-history":[{"count":1,"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/pages\/45765\/revisions"}],"predecessor-version":[{"id":45766,"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/pages\/45765\/revisions\/45766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/media\/45684"}],"wp:attachment":[{"href":"https:\/\/rjydisplay.com\/fr\/wp-json\/wp\/v2\/media?parent=45765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}