Color Picker to generate QR codes working!

Ask the community
,
1

Page Code:

import wixData from 'wix-data'; 
import wixUsers from 'wix-users'; 
import { generateQRcode } from 'backend/qrCode'; 

const dataCollectionName = "PublicMembersData"; 
let receivedQRcolor; 
let receivedQRbgcolor; 

$w.onReady(function () { 
  wixData.get(dataCollectionName, wixUsers.currentUser.id)
   .then((results) => {
      const item = results; 
      if (item.webQRcodeSvg) { 
        $w("#vectorQR").src = item.webQRcodeSvg; 
        $w("#tboxQRcodeSVG").value = item.webQRcodeSvg; 
      } 
      if (item.website) { 
        $w("#iptWebtoQR").value = item.website;
      }
    }) 
}); 

export function btnQRgenerate_click(event) { 
  if ($w("#iptWebtoQR").valid) { 
    const dataToEncode = $w("#iptWebtoQR").value;
    
    generateQRcode({ 
            toEncode: dataToEncode, 
            color: receivedQRcolor, 
            bgcolor: receivedQRbgcolor
        })
        .then(res => { 
            $w("#vectorQR").src = res; 
            $w("#tboxQRcodeSVG").value = res; 
            
            wixData.get(dataCollectionName, wixUsers.currentUser.id)
             .then((results) => { 
                 let item = results; 
                 item.website = dataToEncode; 
                 item.webQRcodeSvg = res; 
                 wixData.update(dataCollectionName, item);
              }); 
          });
  } else { 
      $w("#iptWebtoQR").focus(); 
      $w("#iptWebtoQR").scrollTo(); 
  } 
} 

export function htmlQRbgcolor_message(event) { 
  receivedQRbgcolor = event.data; 
} 

export function htmlQRcolor_message(event) { 
  receivedQRcolor = event.data; 
}

HTML Element for Color Picker A // $w(“#htmlQRcolor”) for QR Color dark (data)

<html>
 <head>
  <script type="text/javascript">
   var colorElement;
   window.addEventListener("load", startup, false); 
   
   function startup() { 
     colorElement = document.querySelector("input");
     colorElement.value = "#000000"; 
     colorElement.addEventListener("input", updateValue, false); 
     colorElement.addEventListener("change", updateValue, false); 
     colorElement.select(); 
   } 
   
   function updateValue(event) {
     window.parent.postMessage(event.target.value, "*"); 
   } 
  </script>
 </head> 
 <body>
   <label for="dark">Select color for data:</label>
   <input type="color" value="#000000" id="dark" name="dark">
 </body>
</html>

HTML Element for Color Picker B // $w(“#htmlQRbgcolor”) for QR Color ligth (bg)

<html>
 <head>
  <script type="text/javascript">
   var colorElement;
   window.addEventListener("load", startup, false); 
   
   function startup() { 
     colorElement = document.querySelector("input");
     colorElement.value = "#FFFFFF"; 
     colorElement.addEventListener("input", updateValue, false); 
     colorElement.addEventListener("change", updateValue, false); 
     colorElement.select(); 
   } 
   
   function updateValue(event) {
     window.parent.postMessage(event.target.value, "*"); 
   } 
  </script>
 </head> 
 <body>
   <label for="ligth">Select color for background:</label>
   <input type="color" value="#FFFFFF" id="ligth" name="ligth">
 </body>
</html>

Before, with the WIX Package Manager at the Editor, you need to install the qrcode NPM Package.

backend/qrCode.jsw (web module)

import QRCode from 'qrcode'; 

export function generateQRcode({ toEncode, color = '#000000', bgcolor = '#FFFFFF' }) {
   const opts = { 
       errorCorrectionLevel: 'L', 
       margin: 1, 
       type: 'svg', 
       color: { 
           dark: color, 
           light: bgcolor 
       } 
    }; 
    
    return QRCode.toString(toEncode, opts, function (err, string) { 
        if (err) throw err; 
        return string;
    }) 
}

Hope this helps you!

3 Likes