{"id":2686,"date":"2023-08-19T16:18:04","date_gmt":"2023-08-19T19:18:04","guid":{"rendered":"https:\/\/bpapaart.com\/?page_id=2686"},"modified":"2024-07-29T09:24:50","modified_gmt":"2024-07-29T12:24:50","slug":"color-identifier","status":"publish","type":"page","link":"https:\/\/bpapaart.com\/pt\/color-identifier\/","title":{"rendered":"Color Identifier"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2686\" class=\"elementor elementor-2686\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-46fde78 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"46fde78\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-186a6b1\" data-id=\"186a6b1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8c53dbb elementor-hidden-desktop elementor-widget elementor-widget-heading\" data-id=\"8c53dbb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 20-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h5 class=\"elementor-heading-title elementor-size-small\">O Identificador de cores est\u00e1 apenas dispon\u00edvel para PC\/MAC no momento. \nEstamos trabalhando na vers\u00e3o mobile para ser lan\u00e7ada no futuro.<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-31e1aed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31e1aed\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d5b0a61\" data-id=\"d5b0a61\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7441847 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"7441847\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Upload de Imagem<\/title>\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.1.0\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        body {\r\n            background-color: #111111;\r\n            color: white;\r\n        }\r\n\r\n        #image-container {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            flex-direction: column;\r\n        }\r\n\r\n        #change-image-button, #loading, #confirmation-message {\r\n            display: none;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        #loading-text {\r\n            color: white;\r\n            font-size: 14px;\r\n        }\r\n\r\n        #cor-selecionada {\r\n            height: 100px;\r\n        }\r\n\r\n        #cor-hex {\r\n            color: #000000;\r\n        }\r\n\r\n        #loading-spinner {\r\n            width: 50px;\r\n            height: 50px;\r\n        }\r\n\r\n        img.img-fluid {\r\n            max-width: 100%;\r\n            height: auto;\r\n        }\r\n\r\n        #foto {\r\n            max-width: 1500px;\r\n            width: 100%;\r\n            height: auto;\r\n        }\r\n\r\n        #drop-area {\r\n            border: 2px dashed #ccc;\r\n            border-radius: 20px;\r\n            width: 100%;\r\n            max-width: 600px;\r\n            padding: 20px;\r\n            margin: 20px auto;\r\n            text-align: center;\r\n            color: white;\r\n            transition: border-color 0.3s ease-in-out;\r\n        }\r\n\r\n        #drop-area.highlight {\r\n            border-color: purple;\r\n        }\r\n\r\n        .progress {\r\n            width: 100%;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .progress-bar {\r\n            background-color: #28a745;\r\n        }\r\n\r\n        #cor-mistura {\r\n            color: #000000;\r\n            font-weight: bold;\r\n            list-style-type: disc;\r\n            margin-left: 20px;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #cor-selecionada {\r\n                height: 50px;\r\n            }\r\n\r\n            #loading-spinner {\r\n                width: 30px;\r\n                height: 30px;\r\n            }\r\n\r\n            #foto {\r\n                max-width: 100%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <main class=\"container mt-4\">\r\n        <section class=\"row justify-content-center\">\r\n            <div class=\"col-md-6\">\r\n                <div id=\"drop-area\" class=\"mb-3 text-center animate__animated animate__fadeIn\">\r\n                    <form class=\"my-form\" action=\"\">\r\n                        <p>Arraste e solte uma imagem aqui ou<\/p>\r\n                        <input type=\"file\" accept=\"image\/png, image\/jpeg\" id=\"imagem\" onchange=\"mostrarImagem(this)\" class=\"form-control\" style=\"display: none;\">\r\n                        <button type=\"button\" onclick=\"document.getElementById('imagem').click();\" class=\"btn btn-warning\" style=\"font-weight: bold;\">Carregar Imagem<\/button>\r\n                    <input type=\"hidden\" name=\"trp-form-language\" value=\"pt\"\/><\/form>\r\n                <\/div>\r\n                <div id=\"image-container\">\r\n                    <button id=\"change-image-button\" onclick=\"novaImagem()\" class=\"btn btn-danger mb-3\" style=\"font-weight: bold;\">Mudar Imagem<\/button>\r\n                    <div id=\"loading\" class=\"animate__animated animate__fadeIn\">\r\n                        <div id=\"loading-spinner\" class=\"spinner-border text-light\" role=\"status\">\r\n                            <span class=\"visually-hidden\">Carregando...<\/span>\r\n                        <\/div>\r\n                        <div id=\"loading-text\" class=\"mt-2\">Carregando imagem, por favor aguarde...<\/div>\r\n                        <div class=\"progress mt-2\">\r\n                            <div id=\"progress-bar\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div id=\"confirmation-message\" class=\"alert alert-success mt-3 animate__animated animate__fadeIn\">Imagem carregada com sucesso!<\/div>\r\n                    <img id=\"foto\" class=\"img-fluid mt-3 animate__animated animate__fadeIn\" style=\"display: none;\" alt=\"Imagem Carregada\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n    <\/main>\r\n\r\n    <!-- Modal -->\r\n    <div class=\"modal fade\" id=\"janelinha\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog modal-dialog-centered\">\r\n            <div class=\"modal-content\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\" id=\"exampleModalLabel\">Cor Selecionada<\/h5>\r\n                    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\r\n                <\/div>\r\n                <div class=\"modal-body\">\r\n                    <div id=\"cor-selecionada\" class=\"card-img-top\"><\/div>\r\n                    <div id=\"cor-hex\" class=\"card-body text-center\"><\/div>\r\n                    <ul id=\"cor-mistura\" class=\"card-body text-center mt-2\"><\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.1.0\/js\/bootstrap.bundle.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lottie-web\/5.7.13\/lottie.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/compressorjs@1.0.6\/dist\/compressor.min.js\"><\/script>\r\n    <script>\r\n        const loadingAnimation = lottie.loadAnimation({\r\n            container: document.getElementById('loading-animation'),\r\n            renderer: 'svg',\r\n            loop: true,\r\n            autoplay: false,\r\n            path: 'https:\/\/lottie.host\/f9697625-a71e-47d0-bc38-56a7603f6e49\/nslIa23ydn.json'\r\n        });\r\n\r\n        const dropArea = document.getElementById('drop-area');\r\n\r\n        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\r\n            dropArea.addEventListener(eventName, preventDefaults, false);\r\n        });\r\n\r\n        ['dragenter', 'dragover'].forEach(eventName => {\r\n            dropArea.addEventListener(eventName, highlight, false);\r\n        });\r\n\r\n        ['dragleave', 'drop'].forEach(eventName => {\r\n            dropArea.addEventListener(eventName, unhighlight, false);\r\n        });\r\n\r\n        dropArea.addEventListener('drop', handleDrop, false);\r\n\r\n        function preventDefaults(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n        }\r\n\r\n        function highlight() {\r\n            dropArea.classList.add('highlight');\r\n        }\r\n\r\n        function unhighlight() {\r\n            dropArea.classList.remove('highlight');\r\n        }\r\n\r\n        function handleDrop(e) {\r\n            const dt = e.dataTransfer;\r\n            const files = dt.files;\r\n            handleFiles(files);\r\n        }\r\n\r\n        function handleFiles(files) {\r\n            ([...files]).forEach(uploadFile);\r\n        }\r\n\r\n        function uploadFile(file) {\r\n            new Compressor(file, {\r\n                quality: 0.6,\r\n                success(result) {\r\n                    mostrarImagem({ files: [result] });\r\n                },\r\n                error(err) {\r\n                    mostrarErro(`Erro ao comprimir a imagem: ${err.message}`);\r\n                },\r\n            });\r\n        }\r\n\r\n        function mostrarImagem(input) {\r\n            const arquivo = input.files[0];\r\n            if (!arquivo) {\r\n                mostrarErro('Nenhum arquivo selecionado.');\r\n                return;\r\n            }\r\n\r\n            const leitor = new FileReader();\r\n            document.getElementById('loading').style.display = 'block';\r\n            document.getElementById('loading-text').style.display = 'block';\r\n            document.getElementById('loading-spinner').style.display = 'block';\r\n            loadingAnimation.play();\r\n\r\n            leitor.onprogress = function(e) {\r\n                if (e.lengthComputable) {\r\n                    const percentLoaded = Math.round((e.loaded \/ e.total) * 100);\r\n                    document.getElementById('progress-bar').style.width = `${percentLoaded}%`;\r\n                    document.getElementById('progress-bar').setAttribute('aria-valuenow', percentLoaded);\r\n                }\r\n            };\r\n\r\n            leitor.onload = function(e) {\r\n                setTimeout(() => {\r\n                    const img = document.getElementById('foto');\r\n                    img.src = e.target.result;\r\n                    img.style.display = 'block';\r\n                    document.getElementById('change-image-button').style.display = 'block';\r\n                    document.getElementById('drop-area').style.display = 'none';\r\n                    document.getElementById('loading').style.display = 'none';\r\n                    document.getElementById('loading-spinner').style.display = 'none';\r\n                    document.getElementById('loading-text').style.display = 'none';\r\n                    loadingAnimation.stop();\r\n                    document.getElementById('confirmation-message').style.display = 'block';\r\n                    setTimeout(() => {\r\n                        document.getElementById('confirmation-message').style.display = 'none';\r\n                    }, 3000);\r\n                    adicionarEventos();\r\n                }, 3000);\r\n            };\r\n\r\n            leitor.onerror = function() {\r\n                mostrarErro('Erro ao carregar a imagem.');\r\n                document.getElementById('loading').style.display = 'none';\r\n                document.getElementById('loading-spinner').style.display = 'none';\r\n                document.getElementById('loading-text').style.display = 'none';\r\n                loadingAnimation.stop();\r\n            };\r\n\r\n            leitor.readAsDataURL(arquivo);\r\n        }\r\n\r\n        function novaImagem() {\r\n            document.getElementById('imagem').value = null;\r\n            document.getElementById('foto').style.display = 'none';\r\n            document.getElementById('change-image-button').style.display = 'none';\r\n            document.getElementById('drop-area').style.display = 'block';\r\n            document.getElementById('confirmation-message').style.display = 'none';\r\n            document.getElementById('progress-bar').style.width = '0%';\r\n            document.getElementById('progress-bar').setAttribute('aria-valuenow', '0');\r\n        }\r\n\r\n        function pegarCor(event) {\r\n            const imagem = document.getElementById('foto');\r\n            const canvas = document.createElement('canvas');\r\n            canvas.width = imagem.naturalWidth;\r\n            canvas.height = imagem.naturalHeight;\r\n            const ctx = canvas.getContext('2d');\r\n            ctx.drawImage(imagem, 0, 0, imagem.naturalWidth, imagem.naturalHeight);\r\n\r\n            let x, y;\r\n            if (event.type.startsWith('touch')) {\r\n                const touch = event.touches[0] || event.changedTouches[0];\r\n                const rect = imagem.getBoundingClientRect();\r\n                x = touch.clientX - rect.left;\r\n                y = touch.clientY - rect.top;\r\n            } else {\r\n                x = event.offsetX;\r\n                y = event.offsetY;\r\n            }\r\n            \r\n            x = x * (imagem.naturalWidth \/ imagem.clientWidth);\r\n            y = y * (imagem.naturalHeight \/ imagem.clientHeight);\r\n            const pixel = ctx.getImageData(x, y, 1, 1).data;\r\n\r\n            const corHex = \"#\" + ((1 << 24) + (pixel[0] << 16) + (pixel[1] << 8) + pixel[2]).toString(16).slice(1);\r\n\r\n            document.getElementById('cor-selecionada').style.backgroundColor = corHex;\r\n            document.getElementById('cor-hex').textContent = corHex;\r\n\r\n            const rgb = [pixel[0], pixel[1], pixel[2]];\r\n            const tintaMistura = calcularMisturaTintas(rgb);\r\n\r\n            document.getElementById('cor-mistura').innerHTML = tintaMistura;\r\n\r\n            const myModal = new bootstrap.Modal(document.getElementById('janelinha'));\r\n            myModal.show();\r\n        }\r\n\r\n        function calcularMisturaTintas(rgb) {\r\n            const total = rgb[0] + rgb[1] + rgb[2];\r\n            \r\n            const vermelho = rgb[0] \/ total;\r\n            const amarelo = (rgb[0] + rgb[1]) \/ total; \/\/ Adiciona c\u00e1lculo para amarelo\r\n            const azul = rgb[2] \/ total;\r\n            const preto = (1 - (Math.max(rgb[0], rgb[1], rgb[2]) \/ 255));\r\n            const branco = (Math.min(rgb[0], rgb[1], rgb[2]) \/ 255);\r\n\r\n            const totalNormalized = vermelho + amarelo + azul + preto + branco;\r\n\r\n            const vermelhoPercent = (vermelho \/ totalNormalized) * 100;\r\n            const amareloPercent = (amarelo \/ totalNormalized) * 100; \/\/ Adiciona cor amarela\r\n            const azulPercent = (azul \/ totalNormalized) * 100;\r\n            const pretoPercent = (preto \/ totalNormalized) * 100;\r\n            const brancoPercent = (branco \/ totalNormalized) * 100;\r\n\r\n            const cores = [];\r\n            if (vermelhoPercent > 0) cores.push(`Vermelho: ${vermelhoPercent.toFixed(2)}%`);\r\n            if (amareloPercent > 0) cores.push(`Amarelo: ${amareloPercent.toFixed(2)}%`); \/\/ Adiciona cor amarela\r\n            if (azulPercent > 0) cores.push(`Azul: ${azulPercent.toFixed(2)}%`);\r\n            if (pretoPercent > 0) cores.push(`Preto: ${pretoPercent.toFixed(2)}%`);\r\n            if (brancoPercent > 0) cores.push(`Branco: ${brancoPercent.toFixed(2)}%`);\r\n\r\n            return cores.map(cor => `<li>${cor}<\/li>`).join('');\r\n        }\r\n\r\n        function mostrarErro(mensagem) {\r\n            const erroContainer = document.createElement('div');\r\n            erroContainer.className = 'alert alert-danger mt-3';\r\n            erroContainer.textContent = mensagem;\r\n            document.getElementById('image-container').appendChild(erroContainer);\r\n            setTimeout(() => {\r\n                erroContainer.remove();\r\n            }, 3000);\r\n        }\r\n\r\n        function adicionarEventos() {\r\n            const img = document.getElementById('foto');\r\n            img.addEventListener('click', pegarCor);\r\n            img.addEventListener('touchstart', pegarCor);\r\n            img.addEventListener('touchmove', pegarCor);\r\n            img.addEventListener('touchend', pegarCor);\r\n        }\r\n\r\n        function removerEventos() {\r\n            const img = document.getElementById('foto');\r\n            img.removeEventListener('click', pegarCor);\r\n            img.removeEventListener('touchstart', pegarCor);\r\n            img.removeEventListener('touchmove', pegarCor);\r\n            img.removeEventListener('touchend', pegarCor);\r\n        }\r\n\r\n        document.getElementById('janelinha').addEventListener('hidden.bs.modal', function () {\r\n            removerEventos();\r\n            adicionarEventos();\r\n        });\r\n\r\n        adicionarEventos();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>O Identificador de cores est\u00e1 apenas dispon\u00edvel para PC\/MAC no momento. Estamos trabalhando na vers\u00e3o mobile para ser lan\u00e7ada no futuro. Upload de Imagem Arraste e solte uma imagem aqui ou Carregar Imagem Mudar Imagem Carregando&#8230; Carregando imagem, por favor aguarde&#8230; Imagem carregada com sucesso! Cor Selecionada<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/pages\/2686"}],"collection":[{"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/comments?post=2686"}],"version-history":[{"count":293,"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/pages\/2686\/revisions"}],"predecessor-version":[{"id":3624,"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/pages\/2686\/revisions\/3624"}],"wp:attachment":[{"href":"https:\/\/bpapaart.com\/pt\/wp-json\/wp\/v2\/media?parent=2686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}