SmartFarmingUI – Overview

The SmartFarmingUI is a web-based interface that lets you monitor and manage sensors, plants, and Raspberry Pi nodes in your smart farming system.
The application is built with Blazor Server and makes heavy use of reusable components so the UI looks and behaves consistently across all pages.

Application structure

  • Startup & hostingx

    • The application starts in Program.cs and renders the main App component.
    • App.razor loads Routes.razor, which defines the routing (navigation between pages).
    • AuthorizeRouteView ensures that most pages are only visible to authenticated users.

  • Layout

    • MainLayout.razor defines the general layout of the screen:
      • Header with:
        • Breadcrumb (current page)
        • Search field (Searchbar)
        • Theme toggle (ThemeToggle) for light/dark mode
        • User menu (DropdownUser)
      • Sidebar on the left with navigation items:
        • Dashboard
        • My Plants
        • Plant Library
        • Nodes
        • Settings (Settings)
      • Main area in the center: this is where the content of the currently selected page is rendered (@Body).

  • Pages

    • Index.razor (@page "/"): immediately redirects to /dashboard.
    • Dashboard.razor (@page "/dashboard"): shows key metrics, nodes, sensors, and charts.
    • MyPlants.razor (@page "/my-plants"): shows your configured plants including current sensor data (soil moisture, humidity, temperature, CO₂).
    • PlantLibrary.razor (@page "/plant-library"): displays the plant library from the database with details and threshold values.
    • Nodes.razor (@page "/nodes"): overview of Raspberry Pi nodes.
    • Login.razor (@page "/login"): login page (Microsoft login via OpenID Connect).

  • UI components

    • The Components/UI folder contains many reusable building blocks, for example:
      • Button, Card, Table, Tabs, Tooltip
      • Layout elements like Sidebar, SidebarMenuItem, Header, Main
      • Domain-specific components like Plant, PlantDetail, MiniCard, TestChart
    • These components are used across pages to keep the UI consistent.

Using the UI as an end user

1. Sign-in

  • Open the application in your browser (the exact URL depends on the environment, e.g. Development or Staging).
  • If you try to access a protected page while not logged in, you will be redirected to /login.
  • On the login page:
    • Click “Sign in with Microsoft”.
    • Log in with your Microsoft account (Single Sign-On).
    • After successful authentication, you will be redirected to the Dashboard.

2. Everyday navigation

  • Sidebar (left column):

    • Use the Dashboard, My Plants, Plant Library, and Nodes entries to switch between sections.
    • The currently active menu item is visually highlighted.
    • Use the small arrow icon (SidebarToggle) to collapse or expand the sidebar.

  • Header (top):

    • On the left, you see the breadcrumb, which shows the current page.
    • In the middle, there is a search bar (depending on how it is wired up).
    • On the right, you can:
      • Switch the theme (light/dark).
      • Use the user menu to manage your account or log out (if implemented).

3. Dashboard

  • The dashboard gives you a compact overview:
    • MiniCards with key figures:
      • Number of plants
      • Number of sensors
      • Number of Raspberry Pi nodes
    • A table with all nodes (ID, UUID, Name, IP).
    • Charts (via TestChart), e.g. average values for temperature, humidity, and CO₂.
  • Use the dashboard for a quick health check of your system and data plausibility.

4. My Plants

  • On My Plants you see all your configured plants as cards:
    • Plant image
    • Name and category
    • Sensor values:
      • Soil moisture
      • Humidity
      • Temperature
      • CO₂
  • While data is still loading, Skeleton components (placeholders) are shown to keep the layout stable.
  • Typical flow:
    • Open the page → skeletons appear briefly → real plant data is loaded from the database → cards are filled with content.

5. Plant Library

  • The Plant Library shows a large collection of plants with threshold values and descriptions.
  • Each card includes for example:
    • Display name / scientific name
    • Category
    • Minimum and maximum values for:
      • Light (lux)
      • Temperature
      • Soil moisture
  • The code already contains logic to:
    • Search the plant library.
    • Assign plants from the library to a node and add them to your own collection.
  • As a user, you can use this section to find suitable plants and check their ideal growing conditions.

6. Nodes

  • The Nodes page lists your Raspberry Pi nodes (measurement stations).
  • It gives you an overview of which hardware is connected to the system.

How components work (for beginners)

Even if you have never worked with components before, you can understand the UI quite easily.
In Blazor, a component is:

  • a .razor file,
  • that combines markup (HTML) and C# code,
  • and can be reused, e.g. Button, Plant, SidebarMenuItem.

Basic idea: page vs. UI component

  • Pages:
    • Have a @page attribute, for example:
@page "/my-plants"
@attribute [Authorize]

  • They define what is rendered for a specific URL.

  • UI components:

    • Do not have a @page attribute.
    • Are used by pages or other components, for example:
<Button Variant="ButtonVariant.Secondary">
    Save
</Button>

Parameters (settings of a component)

Components usually expose parameters that control their behavior and appearance.
Example SidebarMenuItem:

<SidebarMenuItem Page="My Plants" Icon="Lucide.Leaf" />
  • Page:
    • Text that is shown (e.g. “My Plants”).
    • Also used to calculate the target URL:
      • "My Plants" → /my-plants (spaces replaced by -, lowercased).
  • Icon:
    • Defines which icon is displayed.

You don’t need to remember how SidebarMenuItem works internally – the important part is: you pass parameters, the component takes care of the rest.

How components work together

  • Example MainLayout.razor:
    • Header components build the top bar.
    • Sidebar components handle navigation and state (collapsed/expanded).
    • The Main area shows the currently active page.

In this way a complete UI is built from many small building blocks:

  • A Button knows how it should look (CSS classes).
  • A Plant card knows how to render image, name, and sensor data.
  • A Page (like MyPlants) combines several components into one complete view.

How to extend the UI (step by step)

If you want to add a new page or feature without deep Blazor knowledge, you can proceed in small steps:

  1. Create a new page

    • Copy for example Nodes.razor and adjust:
      • @page "/your-page"
      • PageTitle and content (e.g. heading, text, components).

  2. Add a link in the sidebar

    • Open MainLayout.razor.
    • Add a new entry in the SidebarMenu:
<SidebarMenuItem Page="Your Page" Icon="Lucide.Info" />
  1. Reuse existing components
    • Use components like Card, Table, Button, Plant, MiniCard to structure layout and content.

This way you can extend the UI in a predictable way, even without deep framework knowledge, because:

  • each page is clearly separated,
  • components have descriptive names,
  • and the layout stays consistent.

Summary

  • SmartFarmingUI consists of pages, a shared layout, and many reusable components.
  • As an end user, you navigate via sidebar and header to Dashboard, My Plants, Plant Library, and Nodes, and you sign in using Microsoft login.
  • As a developer without component experience you can:
    • read existing pages,
    • adjust component parameters,
    • create new pages and reuse existing components without fully understanding the entire framework.
Edit this page