bBOYQQ

bboyqq.markdown

bBOYQQ

A Pen by Kurt Aadnøy on CodePen.

License.

index.html

<button id="random">Randomize</button>
<button id="reset">Reset</button>
<button id="zero">Zero</button>
<button id="max">Max</button>

<div class="power-indicator">
  <canvas id="canvas"></canvas>

  <div class="text">
    <h1>22 kWh</h1>

    <ul>
      <li>Phase 1 : 24A of 32A</li>
      <li>Phase 2 : 16A of 32A</li>
      <li>Phase 3 : 32A of 32A</li>
    </ul>
  </div>
</div>

script.js

var random = document.getElementById('random');
random.addEventListener('click', function() {
  update(positions, [
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100)
  ]);
});

var reset = document.getElementById('reset');
reset.addEventListener('click', function() {
  update(positions, [75, 50, 100]);
});

var zero = document.getElementById('zero');
zero.addEventListener('click', function() {
  update(positions, [0, 0, 0]);
});

var max = document.getElementById('max');
max.addEventListener('click', function() {
  update(positions, [100, 100, 100]);
});


var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

canvas.width = 275;
canvas.height = 275;

var positions = [0, 0, 0],
  radii = [
    canvas.width / 2 - 15,
    canvas.width / 2 - 25,
    canvas.width / 2 - 35
  ];

update(positions, [75, 50, 100]);

function update(from, to, j) {
  if (!j) {
    j = 0;
    console.log('update', to);
  }

  from = from.slice();
  clear();

  to.forEach(function(val, idx) {
    positions[idx] = easeOutCubic(j, from[idx], to[idx] - from[idx], 40);
  });

  for (var i = 0; i < radii.length; i++) {
    drawPowerArq(radii[i], positions[i]);
  }

  var done = true;
  for (var i = 0; i < radii.length; i++) {
    if (positions[i] != to[i]) done = false;
  }

  if (!done && j <= 50) {
    requestAnimationFrame(function() {
      update(from, to, j + 1)
    });
  }
}

function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) {
  return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue;
}

function clear() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  radii.forEach(function(radius) {
    drawArq(radius, 100, function(ctx) {
      /*
      ctx.shadowBlur = 2;
      ctx.shadowColor = "#CD2C24";
      */

      ctx.lineWidth = 7;
      ctx.strokeStyle = '#f0f0f0';

      ctx.stroke();
    });
  });
}

function drawPowerArq(radius, percentage) {
  drawArq(radius, percentage, function(ctx) {
    ctx.lineWidth = 7;
    ctx.strokeStyle = '#F2836B';
    ctx.stroke();
  });
}

function drawArq(radius, percentage, colorize) {
  var x = canvas.width / 2;
  var y = canvas.height / 2;

  var start = 0.8;
  var end = 2.2;

  end = start + ((end - start) / 100 * percentage);

  var startAngle = start * Math.PI;
  var endAngle = end * Math.PI;
  var ccwise = false;

  ctx.beginPath();
  ctx.arc(x, y, radius, startAngle, endAngle, ccwise);

  colorize(ctx);
}

style.css

body {
  background-color: white;
}

.power-indicator {
  position: relative;
  width: 275px;
  height: 275px;
}

.power-indicator canvas {
  width: 100%;
  height: 100%;
}

.power-indicator div.text {
  position: absolute;
  top: 50px;
  width: 100%;
  text-align: center;
  color: #c7c7c7;
  font-family: "Gill Sans", sans-serif;
}

.power-indicator div.text h1 {
  margin: 30px 0 10px 0;
  padding: 0;
  font-size: 40px;
  font-weight: 300;
}

.power-indicator div.text ul {
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.power-indicator div.text li {
  margin: 0;
  padding: 0;
}