JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<p>Pivot Length: <input type="text" id="pivot-length" value="1250" size="5" /></p>
<p>
  Power:
  <select id="power">
    <option value="0">Off</option>
    <option value="1" selected="selected">Running</option>
    <option value="2">Idle</option>
    <option value="3">No Communication</option>
  </select>
</p>
<p>
  Min: <input type="number" id="min" value="180" size="3" min="-1" max="360" onchange="if(this.value == 360) this.value = 0; else if(this.value == -1) this.value = 359;" />
  Max: <input type="number" id="max" value="90" size="3" min="-1" max="360" onchange="if(this.value == 360) this.value = 0; else if(this.value == -1) this.value = 359;" />
</p>
<p>
  Angle: <input type="number" id="angle" value="281.6" size="3" min="-1" max="360" onchange="if(this.value == 360) this.value = 0; else if(this.value == -1) this.value = 359;" />
  Direction:
  <select id="direction">
    <option value="0">None</option>
    <option value="1" selected="selected">FWD</option>
    <option value="2">REV</option>
  </select>
</p>
<p>
  Pump: <input type="checkbox" id="pump" />
  Load C.:
  <select id="load-control">
    <option value="0">None</option>
    <option value="1" selected="selected">In effect</option>
    <option value="2">Within 24 hrs</option>
  </select>
</p>
<p>
  Tables:
  EG
  <input type="checkbox" id="eg-tbl" />
  AUX
  <input type="checkbox" id="aux-tbl" />
  RATE
  <input type="checkbox" id="speed-tbl" />
  FINFO
  <input type="checkbox" id="field-info" checked="checked" />
</p>
<p>
  Opacity: 
  <input type="number" id="global-opacity" value="100" min="0" max="100" />
</p>
<table style="width: 100%;">
  <tr>
    <td>Before</td>
    <td>After</td>
  </tr>
  <tr>
    <td style="vertical-align: top; width: 200px;">
      <img...

JavaScript

function draw_circle(serial, options)
{
	var opts = {
  	run_colors: [['#440000','#ff0000'],['#004400','#00ff00'],['#888888','#ffffff'],['#333333','#aaaaaa']],
    pump_color: '#0000ff',
    endgun_colors: ['#0000ff','#0055ff','#00aaff','#00ffff'],
    aux_colors: ['#ff5500','#ffaa00'],
    lc_colors: [null,['#ff0000','#ffffff'],['#ffff00','#000000']],
  	canvas_opacity: 1,
    global_opacity: 1,
    pump_opacity: 1,
    angle_opacity: 1,
    endgun_opacity: 1,
    aux_opacity: 1,
    speed_opacity: 1,
    default_table_line_width: 4,
    cur_speed: -1,
    lc_icon_scale: 1.2,
    radius: null
  };
  
  $.extend(opts, options);
  
  var overlay = overlays[serial];
  var canvas = overlay.canvas_;
  
  if(!isNaN(opts.canvas_opacity))
  {
  	$(canvas).css('opacity', opts.canvas_opacity);
  }
  
  var meters = opts.pivot_length * 0.3048;
  var mpx = Math.cos(opts.gps_lat * Math.PI / 180) * (40075017 / Math.pow(2, opts.zoom) / 256);
  var radius = meters / mpx;
  
  if(opts.radius != null) radius = opts.radius;
  
  var brad = 0;
  if(typeof opts.endguns === 'object' && (opts.show_table & 1) > 0 && options.zoom >= 13)
  {
  	for(var i in opts.endguns)
    {
      if(typeof opts.endguns[i] === 'object')
      {
      	brad += 10;
      }
    }
  }
  if(typeof opts.auxes === 'object' && (opts.show_table & 2) > 0 && options.zoom >= 13)
  {
  	for(var i in opts.auxes)
    {
      if(typeof opts.auxes[i] === 'object')
      {
      	brad += 10;
      }
    }
  }
  
  var context = canvas.getContext('2d');
  canvas.width = (2 * radius + 2 * (50 + brad));
  canvas.height = (2 * radius + 2 * (50 + brad));
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = overlay.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  //...