CODEWITHSUNDEEP
javascripthtmlwebgoogle-apps-scriptgoogle-apps
kanu priya
kanu priya

Reputation: 108

Print output in WebApp with AppScript

function doGet() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}
function doPost() {
  return HtmlService.createHtmlOutputFromFile("vi");
  // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
  
}




// function from https://stackoverflow.com/a/9733420/3695983                     
function luminance(r, g, b) {
  var a = [r, g, b].map(function (v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
    : Math.pow( (v + 0.055) / 1.055, 2.4 );
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function calculateRatio(color1, color2) {

  // read the colors and transform them into rgb format
  // const color1 = document.querySelector("#color-1").value;
  // const color2 = document.querySelector("#color-2").value;
  const color1rgb = hexToRgb(color1);
  const color2rgb = hexToRgb(color2);

  // calculate the relative luminance
  const color1luminance = luminance(color1rgb.r, color1rgb.g, color1rgb.b);
  const color2luminance = luminance(color2rgb.r, color2rgb.g, color2rgb.b);

  // calculate the color contrast ratio
  const ratio = color1luminance > color2luminance 
  ? ((color2luminance + 0.05) / (color1luminance + 0.05))
  : ((color1luminance + 0.05) / (color2luminance + 0.05));
  

  return ratio;
  // Logger.log(ratio);
}
function hexToRgb(hex) {
  
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// document.querySelector("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label>Foreground Color:</label>  <input type="text" id="color-1"  />
    <label2>BackGround Color:</label2><input type="text" id="color-2"  />

<button id="btn">Calculate Color Contrast</button>

<div id="#result">
  <label>Result : </label>
</div>

<script>

document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
  var fcolor = document.getElementById("color-1").value;
  var bgcolor = document.getElementById("color-2").value;

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}



// document.getElementById("btn").addEventListener("click", function() {
//   const ratio = calculateRatio();
//   // show results depending on WCAG requirements
//   const result = `
// AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
// AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
// AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }
// `;
//   document.querySelector("#result").innerHTML = result;
// });
</script> 
  </body>
</html>

I am trying to make a google script web app that takes input from an HTML form and passes the input from script. Right now, the function is failing because the resulted value is not getting printed in html page. How can I fix this?

However when I run this from the deployment, I am not getting the expected output. When I am entering the values and clicking on button, nothing happening. The same is working with javascript though. Can someone help me in using this code in Google AppScript? that how can I print the resulted output with the help of AppScript?

Upvotes: 0

Views: 722

Answers (1)

Tanaike
Tanaike

Reputation: 201358

Modification points:

  • When you want to run the Google Apps Script from HTML side, please use google.script.run. When I saw your script, it seems that google.script.run is used as a comment line. In this case, in order to use the returned value from Google Apps Script, withSuccessHandler is used.

When above points are reflected to your script, it becomes as follows.

Modified script:

Please modify doStuff() as follows.

function doStuff(){
  var fcolor = document.getElementById("color-1").value;
  var bgcolor = document.getElementById("color-2").value;

  google.script.run.withSuccessHandler(ratio => {
    const result = `
    AA-level large text: ${ratio < 1/3 ? 'PASS' : 'FAIL' }<br>
    AA-level small text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level large text: ${ratio < 1/4.5 ? 'PASS' : 'FAIL' }<br>
    AAA-level small text: ${ratio < 1/7 ? 'PASS' : 'FAIL' }`;
    document.getElementById("#result").innerHTML = result;
  }).calculateRatio(fcolor, bgcolor);
}

Note:

  • In this case, your HTML&Javascript is required to be included in Google Apps Script project. Please be careful this.
  • In this modification, it supposes that your calculateRatio of Google Apps Script works fine and the correct values are returned.

Reference:

Upvotes: 1

Related Questions