-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from Cloud-RF/noise-improvments
Noise improvments
- Loading branch information
Showing
2 changed files
with
189 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,193 @@ | ||
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | ||
| <script> | ||
|
|
||
| function bringTheNoise(){ | ||
| var noiseArray = $("#noiseValues").val().split("\n"); | ||
| var status = ""; | ||
|
|
||
| for(i=0;i<noiseArray.length;i++){ | ||
| var parts = noiseArray[i].split(","); | ||
| var lat = parts[0]; | ||
| var lon = parts[1]; | ||
| var frequency = parts[2]; | ||
| var noise = parts[3]; | ||
| var apikey = $("#apiKey").val(); | ||
| var requestBody = JSON.stringify({"latitude": lat, "longitude": lon, "frequency": frequency, "noise": noise}); | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Noise Import</title> | ||
|
|
||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | ||
| integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> | ||
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
| crossorigin="anonymous"></script> | ||
|
|
||
| <script> | ||
| let apiEndpoint = "https://api.cloudrf.com/noise/create"; | ||
|
|
||
| let requestData = [ | ||
| {'latitude': 50.1234, 'longitude': -2.1234, 'frequency': 446, 'noise': -99}, | ||
| ] | ||
|
|
||
| $(document).ready(() => { | ||
| $('#apiEndpoint').text(apiEndpoint); | ||
|
|
||
| buildExampleCurlCommand(); | ||
| buildRequestTable(); | ||
| }); | ||
|
|
||
| function buildExampleCurlCommand() { | ||
| let curlCommand = 'curl -d \'' + JSON.stringify(requestData) + '\' -H "Content-Type: application/json" -H "key: <YOUR_API_KEY_HERE>" -X POST ' + apiEndpoint; | ||
|
|
||
| $('#curlExampleCommand').text(curlCommand); | ||
| } | ||
|
|
||
| function buildRequestTable() { | ||
| let html = ''; | ||
|
|
||
| requestData.forEach((data, index) => { | ||
| html += `<tr id="requestTableRow${index}" oninput="updateRequestData(${index})">`; | ||
| html += `<td><input class="form-control" value="${data.latitude}"></td>`; | ||
| html += `<td><input class="form-control" value="${data.longitude}"></td>`; | ||
| html += `<td><input class="form-control" value="${data.frequency}"></td>`; | ||
| html += `<td><input class="form-control" value="${data.noise}"></td>`; | ||
| html += `<td><button type="button" class="btn btn-danger" onclick="removeRequestDataRow(${index})">Remove</button></td>`; | ||
| html += '</tr>'; | ||
| }); | ||
|
|
||
| $('#requestTable').html(html); | ||
| } | ||
|
|
||
| function updateRequestData(index) { | ||
| requestData[index].latitude = parseFloat($(`#requestTableRow${index} input`)[0].value); | ||
| requestData[index].longitude = parseFloat($(`#requestTableRow${index} input`)[1].value); | ||
| requestData[index].frequency = parseFloat($(`#requestTableRow${index} input`)[2].value); | ||
| requestData[index].noise = parseFloat($(`#requestTableRow${index} input`)[3].value); | ||
|
|
||
| buildExampleCurlCommand(); | ||
| } | ||
|
|
||
| function addRequestDataRow() { | ||
| requestData.push({'latitude': 0, 'longitude': 0, 'frequency': 0, 'noise': 0}); | ||
| buildRequestTable(); | ||
| buildExampleCurlCommand(); | ||
| } | ||
|
|
||
| function removeRequestDataRow(index) { | ||
| requestData.splice(index, 1); | ||
| buildRequestTable(); | ||
| buildExampleCurlCommand(); | ||
| } | ||
|
|
||
| function bringTheNoise() { | ||
| let apiKey = $("#apiKey").val(); | ||
|
|
||
| if(apiKey === '') { | ||
| $('#responseBox').text('Please enter your API key.'); | ||
| return; | ||
| } | ||
|
|
||
| $.ajax({ | ||
| type: "POST", | ||
| url: "https://api.cloudrf.com/noise/create", | ||
| headers: {"key": apikey}, | ||
| data: requestBody, | ||
| url: apiEndpoint, | ||
| headers: { "key": apiKey }, | ||
| data: JSON.stringify(requestData), | ||
| dataType: "json", | ||
| success: function(xhr,requestBody){ | ||
| status += requestBody+"\n"; | ||
| $("#status").html(status); | ||
| success: function (xhr, requestBody) { | ||
| $("#responseBox").html("Success: " + JSON.stringify(xhr)); | ||
| }, | ||
| error: function(xhr, msg) { | ||
| status += "FAIL"+": "+xhr.responseText+"\n"; | ||
| $("#status").html(status); | ||
| error: function (xhr, msg) { | ||
| $("#responseBox").html("FAIL: " + xhr.responseText); | ||
| } | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| .terminal { | ||
| background-color: #000; | ||
| color: #fff; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| font-family: monospace; | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
| <h1>Noise import client</h1> | ||
| <table> | ||
| <td> | ||
| API key:<input type="password" id="apiKey" value=""></input> | ||
| <h2>Request</h2> | ||
| <textarea id="noiseValues" rows="20" cols="40"> | ||
| </textarea> | ||
| <br> | ||
| <input type="submit" value="Bring the noise" onclick="bringTheNoise()"/> | ||
| <h2>Response</h2> | ||
| <textarea id="status" rows="20" cols="40"></textarea> | ||
| </td> | ||
| <td valign="top"> | ||
| <h2>API endpoint</h2> | ||
| https://api.cloudrf.com/noise/create | ||
| <h3>Parameters</h3> | ||
| <table border="1"> | ||
| <th>Value<th>Description</th> | ||
| <tr><td>latitude</td><td>Decimal degrees WGS84. Range: -90 to 90</td></tr> | ||
| <tr><td>longitude</td><td>Decimal degrees WGS84. Range: -180 to 180</td></tr> | ||
| <tr><td>frequency</td><td>Frequency in MHz. Range: 2 to 90,000MHz</td></tr> | ||
| <tr><td>noise</td><td>Measurement as dBm. Range: -150 to -40dBm</td></tr> | ||
| </table> | ||
| <h2>CURL example</h2> | ||
| <pre> | ||
| curl -d '{"latitude":"50.1234", "longitude":-2.1234, "frequency": 446, "noise": -99}' -H "Content-Type: application/json" -X POST https://api.cloudrf.com/noise/create | ||
| </pre> | ||
| <h2>Notes</h2> | ||
| Noise data is private to your account only.<br> | ||
| Duplicate values for the same location(s) will prioritise the latest data.<br> | ||
| Ensure your data matches the frequencies you are planning with. | ||
| </td> | ||
| </table> | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="p-4"> | ||
| <h1>Noise Import Client</h1> | ||
| <div class="d-flex justify-content-between align-items-center"> | ||
| <div class="w-100 p-2"> | ||
| <h2>API Endpoint</h2> | ||
| <p><code id="apiEndpoint"></code></p> | ||
|
|
||
| <hr> | ||
|
|
||
| <h2>API Parameters</h2> | ||
| <p>Please note that the <code>/noise/create</code> endpoint accepts an array of values. Each value has | ||
| the following parameters.</p> | ||
| <table class="table table-bordered"> | ||
| <thead> | ||
| <tr> | ||
| <th>Parameter</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><code>latitude</code></td> | ||
| <td>Decimal degrees WGS84. Range: -90 to 90</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>longitude</code></td> | ||
| <td>Decimal degrees WGS84. Range: -180 to 180</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>frequency</code></td> | ||
| <td>Frequency in MHz. Range: 2 to 90,000MHz</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>noise</code></td> | ||
| <td>Measurement as dBm. Range: -150 to -40dBm</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div class="w-100 p-2"> | ||
| API Key: | ||
| <input class="form-control" type="password" id="apiKey" placeholder="Enter your CloudRF API key here" value=""></input> | ||
| <hr> | ||
|
|
||
| <h2>Request</h2> | ||
| <p>Enter details for noise values you wish to submit to CloudRF here.</p> | ||
| <table class="table table-sm"> | ||
| <thead> | ||
| <tr> | ||
| <th>Latitude</th> | ||
| <th>Longitude</th> | ||
| <th>Frequency</th> | ||
| <th>Noise</th> | ||
| <th>Actions</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="requestTable"></tbody> | ||
| </table> | ||
|
|
||
| <button type="button" class="btn btn-success" onclick="addRequestDataRow()"">Add Row</button> | ||
| <button type="button" class="btn btn-primary" onclick="bringTheNoise()">Bring the Noise</button> | ||
|
|
||
| <hr> | ||
|
|
||
| <h2>Response</h2> | ||
| <div class="terminal" id="responseBox">Make a request first...</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2>cURL Example</h2> | ||
| <p>The below cURL command is an example of a request to the <code>/noise/create</code> API endpoint using the data you have added. As you create data to insert this will be automatically updated.</p> | ||
|
|
||
| <div class="terminal" id="curlExampleCommand"></div> | ||
|
|
||
| <hr> | ||
|
|
||
| <h2>Notes</h2> | ||
| <p class="m-0">Noise data is private to your account only.</p> | ||
| <p class="m-0">Duplicate values for the same location(s) will prioritise the latest data.</p> | ||
| <p class="m-0">Ensure your data matches the frequencies you are planning with.</p> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |