[QRB Calculcator] Working version, with map and path.

application/controllers/Qrbcalc.php

@@ -1,25 +1,40 @@
 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
-
 /*
 
 	Data lookup functions used within Cloudlog
 
 */
-
 class Qrbcalc extends CI_Controller {
 
-
+	function __construct() {
-	function __construct()
-	{
 		parent::__construct();
 
 		$this->load->model('user_model');
 		if(!$this->user_model->authorize(2)) { $this->session->set_flashdata('notice', 'You\'re not allowed to do that!'); redirect('dashboard'); }
 	}
 
-	public function index()
+	public function index() {
-	{
+		$data['page_title'] = "QRB Calculator";
-		$data['page_title'] = "QRB Calculaltor";
 		$this->load->view('qrbcalc/index', $data);
 	}
-}
+
+	public function calculate() {
+		$locator1 = $this->input->post("locator1");
+		$locator2 = $this->input->post("locator2");
+
+		if ($this->session->userdata('user_measurement_base') == NULL) {
+			$measurement_base = $this->config->item('measurement_base');
+		}
+		else {
+			$measurement_base = $this->session->userdata('user_measurement_base');
+		}
+
+		$this->load->library('Qra');
+
+		$data['result'] = $this->qra->bearing($locator1, $locator2, $measurement_base);
+		$data['latlng1'] = $this->qra->qra2latlong($locator1);
+		$data['latlng2'] = $this->qra->qra2latlong($locator2);
+		header('Content-Type: application/json');
+		echo json_encode($data);
+	}
+}

application/models/Qrbcalc_model

@@ -1,7 +0,0 @@
-<?php
-
-class Qrbcalc_model extends CI_Model {
-
-}
-
-?>

application/views/interface_assets/footer.php

@@ -5,6 +5,8 @@
 <script src="<?php echo base_url(); ?>assets/js/bootstrap.bundle.js"></script>
 <script src="<?php echo base_url(); ?>assets/js/jquery.jclock.js"></script>
 <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/leaflet.js"></script>
+<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/L.Maidenhead.qrb.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic@2.5.5-0/dist/leaflet.geodesic.umd.min.js"></script>
 <script type="text/javascript" src="<?php echo base_url() ;?>assets/js/radiohelpers.js"></script>
 <script type="text/javascript" src="<?php echo base_url() ;?>assets/js/darkmodehelpers.js"></script>
 <script src="<?php echo base_url(); ?>assets/js/bootstrapdialog/js/bootstrap-dialog.min.js"></script>
@@ -451,6 +453,54 @@ function spawnQrbCalculator() {
 	});
 }
 
+function calculateQrb(form) {
+    $.ajax({
+		url: base_url+'index.php/qrbcalc/calculate',
+		type: 'post',
+		data: {'locator1': form.locator1.value,
+			    'locator2': form.locator2.value},
+		success: function (html) {
+			$(".qrbResult").append(html['result']);
+            newpath(html['latlng1'], html['latlng2']);
+		}
+	});
+}
+
+function newpath(locator1, locator2) {
+    // If map is already initialized
+    var container = L.DomUtil.get('mapqrb');
+
+    if(container != null){
+        container._leaflet_id = null;
+    }
+
+    const map = L.map('mapqrb').setView([30, 0], 1.5);
+
+    var maidenhead = L.maidenheadqrb().addTo(map);
+
+    L.tileLayer('https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+        maxZoom: 10,
+        noWrap: false,
+    }).addTo(map);
+
+    const multiplelines = [];
+    //$.each(locs, function(){
+		multiplelines.push(
+            new L.LatLng(locator1[0], locator1[1]),
+            new L.LatLng(locator2[0], locator2[1])
+        )
+        
+	//});
+
+    const geodesic = L.geodesic(multiplelines, {
+        weight: 1,
+        opacity: 1,
+        color: 'red',
+        wrap: false,
+        steps: 100
+    }).addTo(map);
+}
+
 // This displays the dialog with the form and it's where the resulttable is displayed
 function spawnLookupModal() {
 	$.ajax({

application/views/qrbcalc/index.php

@@ -1,25 +1,26 @@
+<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic@2.5.5-0/dist/leaflet.geodesic.umd.min.js"></script>
 <form class="form col-md-12" enctype="multipart/form-data">
             <div class="form-group row">
-            
                 <div class="col-md-2 control-label" for="input">Locator 1</div>
-                <div class="col-md-3">
+                <div class="col-md-4">
                     <input class="form-control input-group-sm" id="locator1" type="text" name="locator1" placeholder="" aria-label="locator1">  
                 </div>
             </div>
 
             <div class="form-group row">
-            
                 <div class="col-md-2 control-label" for="input">Locator 2</div>
-                <div class="col-md-3">
+                <div class="col-md-4">
                 <input class="form-control input-group-sm" id="locator2" type="text" name="locator2" placeholder="" aria-label="locator2">
                 </div>
             </div>
 
             <div class="form-group row">
                 <label class="col-md-2 control-label" for="button1id"></label>
-                <div class="col-md-9">
+                <div class="col-md-4">
                     <button id="button2id" type="reset" name="button2id" class="btn-sm btn-warning">Reset</button>
-                    <button id="button1id" type="submit" name="button1id" class="btn-sm btn-primary">Calculate</button>
+                    <button id="button1id" type="button" onclick="calculateQrb(this.form);" name="button1id" class="btn-sm btn-primary">Calculate</button>
                 </div>
             </div>
-    </form>
+    </form>
+    <div class="qrbResult"></div>
+    <div id="mapqrb" style="Height: 500px"></div>

assets/js/leaflet/L.Maidenhead.qrb.js

@@ -0,0 +1,189 @@
+/*
+ * L.Maidenhead displays a Maidenhead Locator of lines on the map.
+ */
+
+L.MaidenheadQrb = L.LayerGroup.extend({
+
+
+	options: {
+		// Line and label color
+		color: 'rgba(255, 0, 0, 0.4)',
+
+		// Redraw on move or moveend
+		redraw: 'move'
+	},
+
+	initialize: function (options) {
+		L.LayerGroup.prototype.initialize.call(this);
+		L.Util.setOptions(this, options);
+
+	},
+
+	onAdd: function (map) {
+		this._map = map;
+		var grid = this.redraw();
+		this._map.on('viewreset '+ this.options.redraw, function () {
+			grid.redraw();
+		});
+
+		this.eachLayer(map.addLayer, map);
+	},
+
+	onRemove: function (map) {
+		// remove layer listeners and elements
+		map.off('viewreset '+ this.options.redraw, this.map);
+		this.eachLayer(this.removeLayer, this);
+	},
+
+	redraw: function () {
+		var d3 = new Array(20, 10, 10, 1, 1, 1, 1, 1, 1, 1, 1 / 24, 1 / 24, 1 / 24, 1 / 24, 1 / 24, 1 / 240, 1 / 240, 1 / 240, 1 / 240, 1 / 240 / 24, 1 / 240 / 24);
+		var lat_cor = new Array(0, 8, 8, 8, 8, 1.7, 6, 8, 8, 8, 1.4, 2.5, 3, 3.5, 4, 4, 3.5, 3.5, 3, 1.8, 1.6);
+		var bounds = map.getBounds();
+		var zoom = map.getZoom();
+		var unit = d3[zoom];
+		var lcor = lat_cor[zoom];
+		var w = bounds.getWest();
+		var e = bounds.getEast();
+		var n = bounds.getNorth();
+		var s = bounds.getSouth();
+		if (zoom==1) {var c = 2;} else {var c = 0.1;}
+		if (n > 85) n = 85;
+		if (s < -85) s = -85;
+		var left = Math.floor(w/(unit*2))*(unit*2);
+		var right = Math.ceil(e/(unit*2))*(unit*2);
+		var top = Math.ceil(n/unit)*unit;
+		var bottom = Math.floor(s/unit)*unit;
+		this.eachLayer(this.removeLayer, this);
+
+		for (var lon = left; lon < right; lon += (unit*2)) {
+			for (var lat = bottom; lat < top; lat += unit) {
+			var bounds = [[lat,lon],[lat+unit,lon+(unit*2)]];
+
+			if (zoom < 2 || zoom > 4) {
+				this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
+			}
+			if (zoom < 3 ) {
+				this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
+			}
+			if (zoom < 3 || zoom > 5) {
+				this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
+			}
+
+			if (zoom < 3 || zoom > 5) {
+				this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
+			}
+
+			}
+		}
+		// Added this to print fields and field name, while still showing worked/confirmed gridsquares
+		if (zoom < 5 && zoom > 2) {
+			unit = 10;
+			var left = Math.floor(w / (unit * 2)) * (unit * 2);
+			var right = Math.ceil(e / (unit * 2)) * (unit * 2);
+			var top = Math.ceil(n / unit) * unit;
+			var bottom = Math.floor(s / unit) * unit;
+			for (var lon = left; lon < right; lon += (unit * 2)) {
+				for (var lat = bottom; lat < top; lat += unit) {
+					var bounds = [[lat, lon], [lat + unit, lon + (unit * 2)]];
+
+					this.addLayer(L.rectangle(bounds, {
+						className: 'grid-rectangle',
+						color: this.options.color,
+						weight: 1,
+						fill: false,
+						interactive: false
+					}));
+					this.addLayer(this._getLabel2(lon + unit - (unit / lcor), lat + (unit / 2) + (unit / lcor * c)));
+				}
+			}
+		}
+		return this;
+	},
+
+	_getLabel: function(lon,lat) {
+	  var title_size = new Array(0, 10, 14, 16, 6, 13, 14, 16, 24, 36, 12, 14, 20, 36, 60, 12, 20, 36, 60, 12, 24);
+	  var zoom = map.getZoom();
+	  var size = title_size[zoom]+'px';
+	  var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator(lon,lat) + '</font></span>';
+      var myIcon = L.divIcon({className: 'my-div-icon', html: title});
+      var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
+      return marker;
+	},
+
+	_getLocator: function(lon,lat) {
+	  var ydiv_arr=new Array(10, 1, 1/24, 1/240, 1/240/24);
+	  var d1 = "ABCDEFGHIJKLMNOPQR".split("");
+	  var d2 = "ABCDEFGHIJKLMNOPQRSTUVWX".split("");
+	  var d4 = new Array(0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5);
+      var locator = "";
+      var x = lon;
+      var y = lat;
+      var precision = d4[map.getZoom()];
+      while (x < -180) {x += 360;}
+      while (x > 180) {x -=360;}
+      x = x + 180;
+      y = y + 90;
+      locator = locator + d1[Math.floor(x/20)] + d1[Math.floor(y/10)];
+      for (var i=0; i<4; i=i+1) {
+		if (precision > i+1) {
+        rlon = x%(ydiv_arr[i]*2);
+        rlat = y%(ydiv_arr[i]);
+			if ((i%2)==0) {
+				locator += Math.floor(rlon/(ydiv_arr[i+1]*2)) +""+ Math.floor(rlat/(ydiv_arr[i+1]));
+			} else {
+				locator += d2[Math.floor(rlon/(ydiv_arr[i+1]*2))] +""+ d2[Math.floor(rlat/(ydiv_arr[i+1]))];
+			}
+		}
+	  }
+      return locator;
+	},
+
+	/*
+	Need this for the field printing, while showing worked/confirmed grids
+	 */
+	_getLabel2: function(lon,lat) {
+		var title_size = new Array(0, 10, 12, 16, 20, 26, 26, 16, 24, 36, 12, 14, 20, 36, 60, 12, 20, 36, 60, 12, 24);
+		var zoom = map.getZoom();
+		var size = title_size[zoom]+'px';
+		var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator2(lon,lat) + '</font></span>';
+		var myIcon = L.divIcon({className: 'my-div-icon', html: title});
+		var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
+		return marker;
+	},
+
+	/*
+	Need this for the field printing, while showing worked/confirmed grids
+ 	*/
+	_getLocator2: function(lon,lat) {
+		var ydiv_arr=new Array(10, 1, 1/24, 1/240, 1/240/24);
+		var d1 = "ABCDEFGHIJKLMNOPQR".split("");
+		var d2 = "ABCDEFGHIJKLMNOPQRSTUVWX".split("");
+		var d4 = new Array(0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5);
+		var locator = "";
+		var x = lon;
+		var y = lat;
+		var precision = d4[map.getZoom()];
+		while (x < -180) {x += 360;}
+		while (x > 180) {x -=360;}
+		x = x + 180;
+		y = y + 90;
+		locator = locator + d1[Math.floor(x/20)] + d1[Math.floor(y/10)];
+		for (var i=0; i<4; i=i+1) {
+			if (precision > i+1) {
+				rlon = x%(ydiv_arr[i]*2);
+				rlat = y%(ydiv_arr[i]);
+				if ((i%2)==0) {
+					locator += Math.floor(rlon/(ydiv_arr[i+1]*2)) +""+ Math.floor(rlat/(ydiv_arr[i+1]));
+				} else {
+					locator += d2[Math.floor(rlon/(ydiv_arr[i+1]*2))] +""+ d2[Math.floor(rlat/(ydiv_arr[i+1]))];
+				}
+			}
+		}
+		return locator;
+	},
+
+});
+
+L.maidenheadqrb = function (options) {
+	return new L.MaidenheadQrb(options);
+};