canvas rectangle progress

canvas-rectangle-progress.markdown

canvas rectangle progress

A Pen by Berkay Oruç on CodePen.

License.

index.html

<div id="berkay" class="">
  <div id="ratioText"></div>
</div>
<canvas id="myCanvas" class=""> </canvas>
<div class="slidecontainer">
  <input id="myRange" type="range" min="0" max="100" value="0" />
  <p>Value: <span id="demo"></span></p>
</div>
<input type="checkbox" id="lg" name="lg" value="lg" />
<label for="lg">Large View</label>

script.js

var triangles = [
  {
    color: "#a8c736",
    min: 0,
    max: 10,
    width: [0.5, 0.25],
    height: [1, 1],
    quarter: 0
  },
  {
    color: "#A8C736",
    min: 10,
    max: 15,
    width: [0.25, 0],
    height: [1, 1],
    quarter: 0
  },
  {
    color: "#D0D84B",
    min: 15,
    max: 20,
    width: [0, 0],
    height: [1, 0.75],
    quarter: 1
  },
  {
    color: "#D0D84B",
    min: 20,
    max: 25,
    width: [0, 0],
    height: [0.75, 0.5],
    quarter: 1
  },
  {
    color: "#FCE559",
    min: 25,
    max: 30,
    width: [0, 0],
    height: [0.5, 0.25],
    quarter: 1
  },
  {
    color: "#FCE559",
    min: 30,
    max: 35,
    width: [0, 0],
    height: [0.25, 0],
    quarter: 1
  },
  {
    color: "#FFC028",
    min: 35,
    max: 40,
    width: [0, 0.25],
    height: [0, 0],
    quarter: 2
  },
  {
    color: "#FFC028",
    min: 40,
    max: 50,
    width: [0.25, 0.5],
    height: [0, 0],
    quarter: 2
  },
  {
    color: "#FF7A00",
    min: 50,
    max: 60,
    width: [0.5, 0.75],
    height: [0, 0],
    quarter: 2
  },
  {
    color: "#FF7A00",
    min: 60,
    max: 65,
    width: [0.75, 1],
    height: [0, 0],
    quarter: 2
  },
  {
    color: "#FF3E00",
    min: 65,
    max: 70,
    width: [1, 1],
    height: [0, 0.25],
    quarter: 3
  },
  {
    color: "#FF3E00",
    min: 70,
    max: 75,
    width: [1, 1],
    height: [0.25, 0.5],
    quarter: 3
  },
  {
    color: "#D80000",
    min: 75,
    max: 80,
    width: [1, 1],
    height: [0.5, 0.75],
    quarter: 3
  },

  {
    color: "#D80000",
    min: 80,
    max: 85,
    width: [1, 1],
    height: [0.75, 1],
    quarter: 3
  },
  {
    color: "#a00d04",
    min: 85,
    max: 90,
    width: [1, 0.75],
    height: [1, 1],
    quarter: 4
  },
  {
    color: "#9f0000",
    min: 90,
    max: 100,
    width: [0.75, 0.5],
    height: [1, 1],
    quarter: 4
  }
];

function beginDrawing(context, width, height, color) {
  context.beginPath();
  context.fillStyle = color;
  context.moveTo(width * 0.5, height * 0.5);
}

function completeDrawing(context) {
  context.closePath();
  context.fill();
}

function calculateInterval(mainValue, factors, max, min) {
  var interval =
    (factors[0] * mainValue - factors[1] * mainValue) / (max - min);
  if (interval < 0) {
    interval *= -1;
  }
  return interval;
}

function drawTrafficJam(ratio, triangles) {
  // ratio is a number between 0 and 100
  var ratioTextDiv = document.getElementById("ratioText");
  ratioTextDiv.innerHTML = ratio;
  if (ratio === 0 || ratio > 100 || ratio < 0) {
    return;
  }

  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var width = canvas.width;
  var height = canvas.height;
  context.clearRect(0, 0, width, height);

  for (var i = 0; i < triangles.length; i++) {
    var triangleProps = triangles[i];
    var max = triangleProps.max;
    var min = triangleProps.min;
    var color = triangleProps.color;
    var heights = triangleProps.height;
    var widths = triangleProps.width;
    var quarter = triangleProps.quarter;
    if (ratio > max) {
      beginDrawing(context, width, height, color);
      for (var k = 0; k < widths.length; k++) {
        context.lineTo(width * widths[k], height * heights[k]);
      }
      completeDrawing(context);
    } else if (ratio <= max && ratio > min) {
      beginDrawing(context, width, height, color);
      for (var k = 0; k < widths.length; k++) {
        if (k === widths.length - 1) {
          if (quarter === 0 || quarter === 4) {
            var interval = calculateInterval(width, widths, max, min);
            context.lineTo(
              width * widths[k] + interval * (max - ratio),
              height * heights[k]
            );
          } else if (quarter === 1) {
            var interval = calculateInterval(height, heights, max, min);
            context.lineTo(
              width * widths[k],
              height * heights[k] + interval * (max - ratio)
            );
          } else if (quarter === 2) {
            var interval = calculateInterval(width, widths, max, min);
            context.lineTo(
              width * widths[k] - interval * (max - ratio),
              height * heights[k]
            );
          } else if (quarter === 3) {
            var interval = calculateInterval(height, heights, max, min);
            context.lineTo(
              width * widths[k],
              height * heights[k] - interval * (max - ratio)
            );
          }
        } else {
          context.lineTo(width * widths[k], height * heights[k]);
        }
      }
      completeDrawing(context);
    } else {
      break;
    }
  }
}

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function () {
  output.innerHTML = this.value;
  drawTrafficJam(this.value, triangles);
};

var lgCheckbox = document.getElementById("lg");
lgCheckbox.onchange = function () {
  var canvas = document.getElementById("myCanvas");
  var berkay = document.getElementById("berkay");
  if (this.checked) {
    canvas.className = "lg";
    berkay.className = "lg";
  } else {
    canvas.className = "";
    berkay.className = "";
  }
};

style.css

body {
  background-color: rgb(232, 232, 232);
}

#myCanvas {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #d5edfb;
  filter: drop-shadow(0px 0px 8px rgba(35, 41, 47, 0.24));
  z-index: 1;
}

#myCanvas.lg {
  width: 440px;
  height: 440px;
  border-radius: 64px;
}

#berkay {
  z-index: 2;
  position: absolute;
  background-color: white;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #3da0a8;
  font-weight: bold;
  font-size: 15px;
}

#berkay.lg {
  top: 60px;
  left: 60px;
  width: 320px;
  height: 320px;
  font-size: 128px;
  border-radius: 64px;
}

.slidecontainer {
  margin-top: 100px;
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04aa6d;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04aa6d;
  cursor: pointer;
}