Fabric Thermometer

basic thermometer control rendered in fabric.js.

by brady houseknecht

HTML

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/sketchy/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand" />
<br/>
<div class="jumbotron">
<h2>Configuration</h2>
  <table width="100%">
    <tr>
      <td width="30%" rowspan="3">
        <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
          <div class="card-body">
            <canvas id="fiddle" width="150px" height="350px">
                            </canvas>
          </div>
        </div>
      </td>
      <td style="padding-left: 30px;">
        <label for="donationTxt">Title:</label>
        <input type="text" class="form-control" id="titleTxt" placeholder="2018 November">
      </td>
    </tr>
    <tr>
      <td style="padding-left: 30px;">
        <label for="donationTxt">Goal:</label>
        <input type="text" class="form-control" id="goalTxt" placeholder="50000">
      </td>
    </tr>
    <tr>
      <td style="padding-left: 30px;">
        <label for="donationTxt">Donations:</label>
        <input type="text" class="form-control" id="donationTxt" placeholder="30000">
      </td>
    </tr>
  </table>
</div>

<!-- GITHUB LINK -->
<script>
  document.write('<a id="githubLink" target="_blank" href="https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0063-FabricThermometer"' +
    ' target="_blank"><img style="z-index: 1000; position: absolute; top: 0; right: 0; border: 0;" ' + 'src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" ' +
    'alt="Fork me on GitHub"><\/a>');

</script>

JavaScript

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

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

  app.view = app.view || {

    header: '2018 November',
    goal: 50000,
    donations: 30000,
    deltaDonations: 0,
    lineColor: '#fff',
    textColor: '#fff',
    innerColor: 'hotpink',
    fontFamily: 'Cabin Sketch',
    canvas: null,
    renderThermometer: function () {

      this.canvas = this.canvas || new window.fabric.Canvas('fiddle');
      this.canvas.clear();
      var canvas = this.canvas,
        header = new fabric.Text(this.header, {
          fontFamily: this.fontFamily,
          left: 10,
          fill: this.textColor,
          top: 0,
          width: 150,
          fontSize: 50
        }),
        goalHeader = new fabric.Text('Goal: ' + this.formatDollarAmt(this.goal), {
          fontFamily: this.fontFamily,
          left: 10,
          top: 75,
          fill: this.textColor,
          width: 150,
          fontSize: 40
        }),
        manicusLevel = this.calcLevel(),
        manicusLabel = new fabric.Text(this.formatDollarAmt(this.deltaDonations), {
          fontFamily: this.fontFamily,
          left: 101.25,
          top: manicusLevel.top,
          fill: this.textColor,
          width: 150,
          fontSize: 40,
          id: 'manicusLabel'
        }),
        manicus = new fabric.Rect({
          top: manicusLevel.top,
          left: 29.500002,
          width: 31.75,
          height: manicusLevel.height,
          strokeDashoffset: 10,
          strokeMiterlimit: 10,
          strokeWidth: 10,
          strokeLinejoin: 'round',
          strokeLinecap: 'round',
          fill: this.innerColor,
          id: 'manicus'
        }),
        mercury = new fabric.Path('m81,474a35.5,35.5 0 1 1 -71,0a35.5,35.5 0 1 1 71,0z',
          {
            fill: this.innerColor,
            fillRule: 'nonzero',
            strokeDashoffset: 10,
            strokeMiterlimit: 10,
...