Fabric Thermometer +

Fabric.js based Charity Thermometer graphic with configurable icon / image manicus.

by brady houseknecht

HTML

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand navbar-dark bg-danger navbar-top">
  <div class="collapse navbar-collapse" id="navbarsExample02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" style="font-weight: 700; color: whitesmoke;" alt="Fork me on GitHub" target="_blank" href="https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0070-FabricThermometerAnimation">
                    Fork Me On Github
                </a>
      </li>
    </ul>
  </div>
</nav>
<!--./navbar-bottom -->
<div class="js-loader">
  <div class="container-fluid">
    <table class="table">
      <tr>
        <td id="frame" rowspan="5">
          <h4>Charity Thermometer</h4>
          <div class="card text-white mb-3">
            <div class="card-body">
              <canvas id="fiddle" width="190px" height="350px">
                            </canvas>
            </div>
            <div id="editModeMessage" class="card-footer text-info" style="display: none;">
              Scale the image to the required <br/> size and drag to the zero position.
            </div>
          </div>
        </td>
        <td>
          <label for="titleTxt">Title:</label>
          <input type="text" class="form-control" id="titleTxt" placeholder="2018 November">
        </td>
      </tr>
      <tr>
        <td>
          <label for="goalTxt">Goal:</label>
          <input type="text" class="form-control input-sm" id="goalTxt" placeholder="50000">
        </td>
      </tr>
      <tr>
        <td>
          <label for="donationTxt">Donations:</label>
          <input type="text" class="form-control input-sm" id="donationTxt" placeholder="30000">
        </td>
      </tr>
      <tr...

JavaScript

(function(app, $, undefined) {
  "use strict";

  class Level {
    constructor(top, height) {
      this.top = top;
      this.height = height;
    }
  }

  class Coordinates {
    constructor(scaleX, scaleY, top, left) {
      this.scaleX = scaleX;
      this.scaleY = scaleY;
      this.top = top;
      this.left = left;
    }
  }

  class Frame {
    constructor(level, coordinates, amount) {
      this.level = level;
      this.coordinates = coordinates;
      this.amount = amount;
    }
  }

  class Scene {

    constructor() {
      this.frames = [];
    }

    add(frame) {
      this.frames.push(frame);
    }

  }

  class Thermometer {
    static mercury(innerColor) {
      return new fabric.Path('m81,474a35.5,35.5 0 1 1 -71,0a35.5,35.5 0 1 1 71,0z', {
        fill: innerColor,
        fillRule: 'nonzero',
        strokeDashoffset: 10,
        strokeMiterlimit: 10,
        strokeWidth: 10,
        strokeLinecap: 'round',
        strokeLinejoin: 'round'
      })
    }

    static header(text, fontFamily, textColor) {
      return new fabric.Text(text, {
        fontFamily: fontFamily,
        left: 10,
        fill: '#000',
        top: 0,
        width: 150,
        fontSize: 50,
        fontWeight: 200
      });
    }

    static goalHeader(text, fontFamily, textColor) {
      return new fabric.Text('Goal: ' + text, {
        fontFamily: fontFamily,
        left: 10,
        top: 75,
        fill: textColor,
        width: 150,
        fontSize: 40,
        fontWeight: 200
      });
    }

    static manicus(top, height, innerColor) {
      return new fabric.Rect({
        top: top,
        left: 29.500002,
        width: 31.75,
        height: height,
        strokeDashoffset: 10,
        strokeMiterlimit: 10,
        strokeWidth: 10,
        strokeLinejoin: 'round',
        strokeLinecap: 'round',
        fill: innerColor,
        id: 'manicus'
      });
    }

    static manicusLabel(isEditMode, fontFamily, top, textColor, text) {
      if (isEditMode)...