{"id":34,"date":"2026-05-13T22:08:09","date_gmt":"2026-05-13T19:08:09","guid":{"rendered":"https:\/\/ynsmrenall.com.tr\/?page_id=34"},"modified":"2026-05-13T23:47:37","modified_gmt":"2026-05-13T20:47:37","slug":"canli-esp32-kontrol-sistemi","status":"publish","type":"page","link":"https:\/\/ynsmrenall.com.tr\/","title":{"rendered":"Canl\u0131 ESP32 Kontrol Sistemi"},"content":{"rendered":"\n<div style=\"max-width: 680px; margin: auto; padding: 25px; background: #121212; color: #eee; border-radius: 15px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,0.5);\">\n    <h2 style=\"color: #00d4ff; text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px;\">LED Matris Kontrol Paneli<\/h2>\n    \n    <div style=\"display: flex; flex-wrap: wrap; gap: 20px;\">\n        <div style=\"flex: 1; min-width: 280px;\">\n            <label style=\"font-weight: bold; display: block;\">Mesaj\u0131n\u0131z<\/label>\n            <input type=\"text\" id=\"matrixText\" maxlength=\"100\" placeholder=\"Mesaj\u0131n\u0131z\u0131 buraya yaz\u0131n...\" style=\"width: 100%; padding: 12px; margin: 8px 0 15px; border-radius: 8px; border: 1px solid #444; background: #222; color: white; box-sizing: border-box;\">\n            \n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px;\">\n                <div>\n                    <label style=\"font-weight: bold; display: block;\">Yaz\u0131 Rengi<\/label>\n                    <input type=\"color\" id=\"matrixColor\" value=\"#ff0000\" style=\"width: 100%; height: 45px; border: none; cursor: pointer; background: transparent; margin-top: 5px;\">\n                <\/div>\n                <div>\n                    <label style=\"font-weight: bold; display: block;\">Animasyon Tipi<\/label>\n                    <select id=\"matrixAnim\" style=\"width: 100%; padding: 10px; margin-top: 5px; border-radius: 8px; border: 1px solid #444; background: #222; color: white; box-sizing: border-box;\">\n                        <option value=\"0\">Sola Kayd\u0131r (Standart)<\/option>\n                        <option value=\"1\">Sabit Dur (Ortala)<\/option>\n                        <option value=\"2\">Yan\u0131p S\u00f6n (Blink)<\/option>\n                        <option value=\"3\">G\u00f6kku\u015fa\u011f\u0131 Dalgas\u0131<\/option>\n                        <option value=\"4\">A\u015fa\u011f\u0131dan Yukar\u0131 Kayd\u0131r<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <label style=\"font-weight: bold; display: block; margin-top: 15px;\">H\u0131z \/ Gecikme<\/label>\n            <input type=\"range\" id=\"matrixSpeed\" min=\"5\" max=\"150\" value=\"50\" style=\"width: 100%; margin-top: 10px; cursor: pointer;\">\n            <div style=\"display: flex; justify-content: space-between; font-size: 12px; color: #888;\">\n                <span>H\u0131zl\u0131<\/span>\n                <span>Yava\u015f<\/span>\n            <\/div>\n        <\/div>\n\n        <div style=\"width: 150px; flex-grow: 0; display: flex; flex-direction: column;\">\n            <label style=\"font-weight: bold; display: block; margin-bottom: 8px; text-align: center; color: #00d4ff;\">H\u0131zl\u0131 Emojiler<\/label>\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-grow: 1;\">\n                <button type=\"button\" onclick=\"addEmoji(' :) ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\ud83d\ude42<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' :( ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\ud83d\ude41<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' :D ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\ud83d\ude00<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' <3 ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">&lt;3<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' \u2605 ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\u2605<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' (!) ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">(!)<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' \u2713 ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\u2713<\/button>\n                <button type=\"button\" onclick=\"addEmoji(' \u26a1 ')\" style=\"padding: 8px; background: #222; color: #fff; border: 1px solid #444; border-radius: 6px; cursor: pointer; font-weight: bold;\">\u26a1<\/button>\n            <\/div>\n            <button type=\"button\" onclick=\"clearText()\" style=\"margin-top: 8px; padding: 5px; background: #550000; color: #ffaaaa; border: none; border-radius: 5px; font-size: 11px; cursor: pointer;\">Metni Temizle<\/button>\n        <\/div>\n    <\/div>\n\n    <button type=\"button\" onclick=\"updateMatrix()\" style=\"width: 100%; padding: 15px; background: linear-gradient(45deg, #00d4ff, #0055ff); color: white; font-weight: bold; border: none; border-radius: 8px; margin-top: 25px; cursor: pointer; transition: 0.3s; text-transform: uppercase;\">Ekrana G\u00f6nder<\/button>\n    \n    <p id=\"statusMsg\" style=\"text-align: center; margin-top: 15px; font-weight: bold;\"><\/p>\n<\/div>\n\n<script>\n\/\/ T\u0131klanan emojiyi yaz\u0131 kutusuna ekleyen ve imleci oraya odaklayan fonksiyon\nfunction addEmoji(emoji) {\n    const input = document.getElementById('matrixText');\n    input.value += emoji;\n    input.focus();\n}\n\n\/\/ Yaz\u0131 kutusunu tek t\u0131kla s\u0131f\u0131rlayan fonksiyon\nfunction clearText() {\n    const input = document.getElementById('matrixText');\n    input.value = '';\n    input.focus();\n}\n\nfunction updateMatrix() {\n    const text = document.getElementById('matrixText').value;\n    const color = document.getElementById('matrixColor').value;\n    const anim = document.getElementById('matrixAnim').value;\n    const speed = document.getElementById('matrixSpeed').value;\n    const status = document.getElementById('statusMsg');\n\n    status.innerText = \"Ba\u011flan\u0131yor...\";\n    status.style.color = \"yellow\";\n\n    const r = parseInt(color.substr(1,2), 16);\n    const g = parseInt(color.substr(3,2), 16);\n    const b = parseInt(color.substr(5,2), 16);\n\n    const payload = {\n        metin: text || \" \",\n        r: r, g: g, b: b,\n        hiz: parseInt(speed),\n        mod: parseInt(anim)\n    };\n\n    fetch('\/api\/ekran-kaydet.php', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify(payload)\n    })\n    .then(res => res.json())\n    .then(data => {\n        status.innerText = \"BA\u015eARIYLA G\u00d6NDER\u0130LD\u0130!\";\n        status.style.color = \"#00ffcc\";\n    })\n    .catch(err => {\n        status.innerText = \"HATA: Sunucuya ula\u015f\u0131lamad\u0131.\";\n        status.style.color = \"red\";\n    });\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>LED Matris Kontrol Paneli Mesaj\u0131n\u0131z Yaz\u0131 Rengi Animasyon Tipi Sola Kayd\u0131r (Standart)Sabit Dur (Ortala)Yan\u0131p S\u00f6n (Blink)G\u00f6kku\u015fa\u011f\u0131 Dalgas\u0131A\u015fa\u011f\u0131dan Yukar\u0131 Kayd\u0131r H\u0131z \/ Gecikme H\u0131zl\u0131 Yava\u015f H\u0131zl\u0131 Emojiler \ud83d\ude42 \ud83d\ude41 \ud83d\ude00 &lt;3 \u2605 (!) \u2713 \u26a1 Metni Temizle Ekrana G\u00f6nder<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":3,"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/ynsmrenall.com.tr\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}