FruitKount - HTML Widget

In this section we will explore the API Endpoint that allow to get HTML widget

- Leaflet Map of the Interpolated Map HTML Widget - /sensors/html-widget-map/{id_sensor}/{date}/{variable}/

- Ecahrts Graph of the Interpolated Map HTML Widget - /sensors/html-widget-graph/{id_sensor}/{date}/{variable}/

- Leaflet Map of the Prescription Map HTML Widget - /sensors/html-widget-prescription-map/{id_sensor}/{date}/{automatic}/{zone}/{fertilizer}/{strategy}/{percentage}/

Leaflet Map - Interpolated Map

This endpoint allow to generate a Leaflet HTML Widget where within there is the Interpolated Map with legend of one date data acquisition.

In order to use this endpoint you have to provide three different API Parameters:

id_sensor, which is the sensor id of your device
date, which is the date of the acquisition that the device performed
variable, could be set as count, area, widht, height

Python

import requests
import webbrowser

# Set the token from the environment variable
token = "yourtoken"

# Set the domain
domain = "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint = "sensors/html-widget-map/"

# Set API parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
variable="count"

# Create the API URL
api_url = f"{domain}{endpoint}{id_sensor}/{date}/{variable}/"

# Make the GET request with Bearer Authentication
headers = {
    "Authorization": f"Bearer {token}"
}

# Make the GET Request
response = requests.get(api_url, headers=headers)

# Print out the status code of the GET request
print(response.status_code)

# Check the status of the response
if response.status_code == 200:
    # Save the content of the response to an HTML file
    with open("Response.html", "wb") as file:
        file.write(response.content)
    
    # Open the HTML file in your default browser
    webbrowser.open("Response.html")
else:
    print(f"The request was unsuccessful. Status code: {response.status_code}")

R

# load libraries
library(httr)
library(geojsonio)
library(mapview)

# Set the token from the environment variable
token <- Sys.getenv("token")

# Set the domain
domain <- "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint <- "sensors/html-widget-map/"

# Set the API Parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
variable="count"

# Create the API URL
api_url <- paste0(domain, endpoint, id_sensor, "/", date, "/", variable)

# Make the GET request

response <- GET(
  api_url,
  add_headers(Authorization = paste("Bearer", token))
)

# Get the status code of the response

print(response$status_code)

[1] 200

# Parse the response content
response_content <- content(response, as = "text")

# Write and show html file
writeLines(response_content,"leaflet_map_fruitkount.html")

Node.js

// load libraries
const express = require('express');
const axios = require('axios');
const fs = require('fs');

const app = express();
const PORT = process.env.PORT || 3000;

// Set domain
const apidomain = 'https://fruitkountbackend.automaticfarmsolutionwebapp.com/';

// Set API Endpoint
const endpoint = 'sensors/html-widget-map/';

// Set the user token
const token = 'XXXXXXXXXXXXX';

// Set the API Parameter
const id_sensor="1";
const date="2024-08-12T07:23:22Z";
const variable="count";

// API Url
const apiEndpoint = apidomain.concat(endpoint, id_sensor, "/", date, "/", variable, "/");

app.get('/', async (req, res) => {
  try {

    // Set up the authentication headers
    const authHeaders = {
      headers: {
        'Authorization': `Bearer ${token}`,
      },
    };

    // Perform the authenticated GET request
    const response = await axios.get(apiEndpoint, authHeaders);

    // Assuming the response data contains the HTML content
    const htmlContent = response.data;

    // Send the HTML content as the response
    res.send(htmlContent);
  } catch (error) {
    console.error('Error:', error);
    res.status(500).send('An error occurred');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Echarts Graph - Interpolated Map

This endpoint allow to generate a Echarts HTML Widget where within there is the data distribution of the variable of one date data acquisition

In order to use this endpoint you have to provide three different API Parameters:

id_sensor, which is the sensor id of your device
date, which is the date of the acquisition that the device performed
variable, could be set as count, area, widht, height

Python

import requests
import webbrowser

# Set the token from the environment variable
token = "yourtoken"

# Set the domain
domain = "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint = "sensors/html-widget-graph/"

# Set API parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
variable="count"

# Create the API URL
api_url = f"{domain}{endpoint}{id_sensor}/{date}/{variable}/"

# Make the GET request with Bearer Authentication
headers = {
    "Authorization": f"Bearer {token}"
}

# Make the GET Request
response = requests.get(api_url, headers=headers)

# Print out the status code of the GET request
print(response.status_code)

# Check the status of the response
if response.status_code == 200:
    # Save the content of the response to an HTML file
    with open("Response.html", "wb") as file:
        file.write(response.content)
    
    # Open the HTML file in your default browser
    webbrowser.open("Response.html")
else:
    print(f"The request was unsuccessful. Status code: {response.status_code}")

R

# load libraries
library(httr)
library(geojsonio)
library(mapview)

# Set the token from the environment variable
token <- Sys.getenv("token")

# Set the domain
domain <- "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint <- "sensors/html-widget-graph/"

# Set the API Parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
variable="count"

# Create the API URL
api_url <- paste0(domain, endpoint, id_sensor, "/", date, "/", variable)

# Make the GET request

response <- GET(
  api_url,
  add_headers(Authorization = paste("Bearer", token))
)

# Get the status code of the response

print(response$status_code)

[1] 200

# Parse the response content
response_content <- content(response, as = "text")

# Write and show html file
writeLines(response_content,"echarts_graph_fruitkount.html")

Node.js

// load libraries
const express = require('express');
const axios = require('axios');
const fs = require('fs');

const app = express();
const PORT = process.env.PORT || 3000;

// Set domain
const apidomain = 'https://fruitkountbackend.automaticfarmsolutionwebapp.com/';

// Set API Endpoint
const endpoint = 'sensors/html-widget-graph/';

// Set the user token
const token = 'XXXXXXXXXXXXX';

// Set the API Parameter
const id_sensor="1";
const date="2024-08-12T07:23:22Z";
const variable="count";

// API Url
const apiEndpoint = apidomain.concat(endpoint, id_sensor, "/", date, "/", variable, "/");

app.get('/', async (req, res) => {
  try {

    // Set up the authentication headers
    const authHeaders = {
      headers: {
        'Authorization': `Bearer ${token}`,
      },
    };

    // Perform the authenticated GET request
    const response = await axios.get(apiEndpoint, authHeaders);

    // Assuming the response data contains the HTML content
    const htmlContent = response.data;

    // Send the HTML content as the response
    res.send(htmlContent);
  } catch (error) {
    console.error('Error:', error);
    res.status(500).send('An error occurred');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Leaflet Map - Prescription Map

This endpoint allow to generate a Leaflet HTML Widget where within there is the Prescription Map.

In order to use this endpoint you have to provide seven different API Parameters:

id_sensor, which is the sensor id of your device
date, which is the date of the acquisition that the device performed
automatic, Must be set as True or False. If True means that number and position of zone management are setted automatically; If False means that number of zone management are setted by the user by definig the NumberZone parameter
zone, if AutoPrescription is setted False, here you can specify the number of zone
fertilizer, set the amount of agronomic input to provide on avarage to the field
strategy, can be set as highwherehigh or highwherelow. If highwherehigh means provide an higher amout of fertilizer where the vegetation indexes is higher. If highwherelow means provide an higher amout of fertilizer where the vegetation indexes is lower
percentage, Set the difference percentange of the dose that you want to apply between the zones. you can set a value between 0 to 100. if you set 0 an automatic process will define the difference of the dose based on vegetation index values.

Python

import requests
import webbrowser

# Set the token from the environment variable
token = "yourtoken"

# Set the domain
domain = "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint = "sensors/html-widget-prescription-map/"

# Set API parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
automatic="False"
zone="3"
fertilizer="180"
strategy="highwherehigh"
percentage="10"

# Create the API URL
api_url = f"{domain}{endpoint}{id_sensor}/{date}/{automatic}/{zone}/{fertilizer}/{strategy}/{percentage}/"

# Make the GET request with Bearer Authentication
headers = {
    "Authorization": f"Bearer {token}"
}

# Make the GET Request
response = requests.get(api_url, headers=headers)

# Print out the status code of the GET request
print(response.status_code)

# Check the status of the response
if response.status_code == 200:
    # Save the content of the response to an HTML file
    with open("Response.html", "wb") as file:
        file.write(response.content)
    
    # Open the HTML file in your default browser
    webbrowser.open("Response.html")
else:
    print(f"The request was unsuccessful. Status code: {response.status_code}")

R

# load libraries
library(httr)
library(geojsonio)
library(mapview)

# Set the token from the environment variable
token <- Sys.getenv("token")

# Set the domain
domain <- "https://fruitkountbackend.automaticfarmsolutionwebapp.com/"

# Set the endpoint
endpoint <- "sensors/html-widget-prescription-map/"

# Set the API Parameters
id_sensor="1"
date="2024-08-12T07:23:22Z"
automatic="False"
zone="3"
fertilizer="180"
strategy="highwherehigh"
percentage="10"

# Create the API URL
api_url <- paste0(domain, endpoint, id_sensor, "/", date, "/", automatic, "/", zone, "/", fertilizer, "/", strategy, "/", percentage)

# Make the GET request

response <- GET(
  api_url,
  add_headers(Authorization = paste("Bearer", token))
)

# Get the status code of the response

print(response$status_code)

[1] 200

# Parse the response content
response_content <- content(response, as = "text")

# Write and show html file
writeLines(response_content,"leaflet_map_prescription_map.html")

Node.js

// load libraries
const express = require('express');
const axios = require('axios');
const fs = require('fs');

const app = express();
const PORT = process.env.PORT || 3000;

// Set domain
const apidomain = 'https://fruitkountbackend.automaticfarmsolutionwebapp.com/';

// Set API Endpoint
const endpoint = 'sensors/html-widget-prescription-map/';

// Set the user token
const token = 'XXXXXXXXXXXXX';

// Set the API Parameter
const id_sensor="1";
const date="2024-08-12T07:23:22Z";
const automatic="False";
const zone="3";
const fertilizer="180";
const strategy="highwherehigh";
const percentage="10";

// API Url
const apiEndpoint = apidomain.concat(endpoint, id_sensor, "/", date, "/", automatic, "/", zone, "/", fertilizer, "/", strategy, "/", percentage, "/");

app.get('/', async (req, res) => {
  try {

    // Set up the authentication headers
    const authHeaders = {
      headers: {
        'Authorization': `Bearer ${token}`,
      },
    };

    // Perform the authenticated GET request
    const response = await axios.get(apiEndpoint, authHeaders);

    // Assuming the response data contains the HTML content
    const htmlContent = response.data;

    // Send the HTML content as the response
    res.send(htmlContent);
  } catch (error) {
    console.error('Error:', error);
    res.status(500).send('An error occurred');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});