Smart Agriculture Central Control Panel

QuecPython has introduced a GUI solution for a Smart Agriculture Central Control Panel based on the U-235 Development Board. The features include weather forecast, agricultural environmental data monitoring, real-time data display, historical data curves, agricultural equipment control, alarm and fault event notifications, system settings, and more.

The U-235 development board comes with the default onboard EC600U module and an externally connected 5-inch screen with a MIPI interface and a resolution of 854*480. Additionally, it features a variety of sensors and peripheral interfaces onboard. For more details, you can refer to the U-235 EVB User Guide.

The Smart Agriculture Central Control Panel uses LVGL to draw the graphical interface. LVGL is a lightweight, open-source embedded graphics library. QuecPython integrates LVGL and utilizes NXP's GUI Guider as a graphical interface design tool. It can automatically generate QuecPython code, significantly improving the efficiency of graphical interface design on embedded platforms.

Interface Introduction

The Smart Agriculture Central Control Panel offers multiple interfaces, including Home, Environmental Data Display, System Settings, Device Control, and Parameter Settings. These interfaces are designed for centralized monitoring and management of agricultural activities.

Home Screen

The Home Screen serves as the information center for agricultural management. It is designed with an intuitive and user-friendly approach, integrating various functions to support effective agricultural management.

Components:

1. Weather Information:

   • Current Weather Conditions: Includes temperature, weather conditions (clear, rainy, cloudy, etc.), wind speed, and direction.
   • Future Weather Forecast: Provides forecasts for the coming days or week, including temperature changes, precipitation probability, and more.

   Clicking on it leads to a detailed weather screen.

2. Temperature and Humidity History Curve:

   • Real-time updated temperature and humidity data presented in a curve graph, facilitating the observation of short-term and long-term trends.
   • May include data comparisons for day, week, month, or even year.

3. Common Environmental Parameters:

   • Soil Moisture: Displays the moisture levels of different soil areas.
   • Soil pH Value: Monitors the acidity and alkalinity of the soil.
   • O2 Concentration: Shows the current oxygen concentration in the environment.
   • CO2 Concentration: Critical for the growth of greenhouse crops.

4. Alarm Information:

   • The system monitors and alerts for any abnormal conditions, such as a sudden deviation of temperature or humidity from the normal range, unauthorized intrusion, equipment malfunctions, etc.
   • Alarm history records for easy retracing and analysis of past events.

Environmental Data Display Screen

The Environmental Data Display Screen provides real-time data for various environmental parameters in agriculture. It allows agricultural managers to quickly access and analyze key data, enabling them to make timely decisions to optimize the growing conditions for crops.

This screen includes real-time data display for temperature, humidity, illumination, soil temperature, oxygen concentration, carbon dioxide concentration, soil pH, and soil EC values.

Device Status Display Screen

The Device Status Display Screen is used to monitor and display the operational status of various devices and sensors. This enables the quick identification of any potential issues, allowing for timely measures to ensure the smooth operation and efficiency of agricultural activities. Through such a central control panel, agricultural managers can effectively monitor and maintain critical equipment and sensors on the farm, enhancing overall productivity and reliability.

This screen includes the status of common environmental sensors in agriculture. It covers temperature and humidity, illumination, soil pH, soil EC, carbon dioxide concentration, oxygen concentration, wind speed and direction, and soil temperature and humidity.

System Settings Screen

The System Settings Screen is a crucial part of user configuration and personalization for their agricultural management system. It allows users to adjust various system parameters to meet specific requirements and preferences. Through these settings, users can ensure the efficient operation of the system while aligning with their individual preferences and operational habits.

Interface Functions:

1. About This Device:
   • Provides basic information about the system, such as manufacturer, model, and operating system version.
   • Displays hardware configurations like processor type, memory size, and storage space.
2. Volume Settings:
   • Allows users to adjust the system's volume, including alert and notification sounds.
   • Offers a mute option, especially useful in environments where minimizing disturbance is necessary.
3. Check for Updates:
   • Used to check for updates to the system software, ensuring all features are up-to-date.
   • May include an option for automatic updates, allowing the system to download and install new versions automatically.
4. Low Power Mode:
   • This option can reduce the system's energy consumption, particularly useful in environments with limited power.
   • Low Power Mode may limit certain functions or decrease system performance.
5. Screen Timeout Settings:
   • Allows users to set the time for the screen to automatically turn off during inactivity, promoting energy efficiency.
   • Users can customize different time intervals as needed.
6. Mode Selection:
   • Users can choose different operation modes such as daily mode, energy-saving mode, night mode, etc.
   • Each mode may adjust settings like screen brightness, volume, and power usage.

Device Control Screen

The Device Control Screen is a crucial component for managing and operating various farm equipment. It provides intuitive control options and real-time feedback, ensuring users can effortlessly and efficiently manage key farm devices. Through this intelligent device control, farm managers can optimize production conditions, enhance efficiency, and reduce resource wastage.

This screen includes controls for common agricultural equipment, including ventilation devices, irrigation equipment, humidification devices, pest control devices, heating equipment, and alarm systems.

Parameter Settings Screen

The Parameter Settings Screen allows users to customize and adjust various environmental and equipment operation parameters. These settings help ensure that the agricultural production environment aligns with the needs of crops, optimizing growth conditions and enhancing production efficiency.

Users can set thresholds for various environmental parameters such as temperature, humidity, light intensity, soil moisture, carbon dioxide concentration, etc. When these parameters reach or exceed the set thresholds, the system can automatically adjust device operations or send alerts.

Through this screen, users can finely tune various aspects of agricultural operations based on specific situations and requirements, ensuring the system operates efficiently and provides optimal growth conditions for crops. This high level of customization is a key advantage of smart agriculture systems, allowing agricultural producers to flexibly adjust operational strategies according to changing environmental and market demands.

Introduction to Application Code

Code GitHub Repository: https://github.com/QuecPython/solution-Agriculture-Control-Panel.git

Code Directory Structure

The code directory structure is as follows:

.
|-- Agri_ui.py
|-- EventMesh.py
|-- about_screen.py
|-- alarm_screen.py
|-- dev1_screen.py
|-- dev2_screen.py
|-- img
|   |-- mp-1092957702.png
|   |-- mp-1113916345.png
|   |-- mp-1120889833.png
|   |-- (Some pictures are omitted here)
|   |-- mp807599128.png
|   |-- mp910426373.png
|   `-- mp996516799.png
|-- main.py
|-- main_screen.py
|-- monitor_screen.py
|-- screen.py
|-- setting1_screen.py
|-- setting2_screen.py
|-- weather_screen.py
`-- welcome_screen.py

• Agri_ui.py: This file handles all the initialization tasks for the smart agriculture control panel, including vlgl initialization and MIPI LCD initialization. It provides a screen object adder for the graphical interface and a GUI launcher. The screen object adder is used to add all possible screen objects that may need to be displayed in the application, and the GUI launcher is used to start the graphical interface functionality.
• screen.py: This file provides the base class class Screen() for screen objects. It includes common methods required by all screen objects, such as creating screens and displaying status bar information (operator name, signal strength, system time, battery level, etc.).
• All script files ending with _screen.py implement a class that inherits from class Screen(). These classes represent the code implementation of the screens that need to be displayed. The main content of the interface code is generated by the GUI Guider tool and then slightly modified, primarily in the object initialization method __init__() and control event handling callback functions (__xxx_event_cb()).
• EventMesh.py: This module is an event manager. When an event on a screen control is triggered, users only need to call the relevant interface to send the event. EventMesh will automatically handle the screen content switching.
• The img folder provides all the image resources required for the graphical interface.
• main.py: This script file serves as the application entry point. It calls the class class AgriUi() provided by Agri_ui.py to create the GUI object for the smart agriculture control panel. It then calls the screen object adder of this GUI object to add the necessary screen objects and finally calls the GUI launcher to start the graphical interface.

Application Startup Process

The application startup process is illustrated in the following diagram:

Software Design

Software Framework Design

Application Design

The block diagram for the smart agriculture control panel software is as follows:

Interface Switching Mechanism

EventMesh Event Management Framework

As mentioned earlier, the interface switching is driven by the EventMesh event management framework.

• EventMesh is an application framework based on the publish-subscribe mechanism. Users can subscribe to any topic, which represents an event.
• Along with subscribing to the topic, users need to register a callback function to handle the generated event.
• Users can publish the event from anywhere it is generated and can carry message content. At this point, the subscribed callback function is invoked, and the event is processed.

The design framework of EventMesh is illustrated in the following diagram:

Interface Switching Implementation Principle

In each screen interface script code that generates touch events with controls, the add_event_cb() method is called to register a callback function for the corresponding event. When lvgl detects an event, it will invoke the corresponding callback function. Here is an example code snippet:

class MainScreen(Screen):
    def __init__(self):
    	# Some code is omitted here
        self.name = "MainScreen"
        super().create_style()

    # Some code is omitted here

    def create(self):

    	# Some code is omitted here

        self.weather_btn.add_event_cb(lambda e: self.__weather_btn_event_cb(e), lv.EVENT.PRESSED, None)
        self.alarm_btn.add_event_cb(lambda e: self.__alarm_btn_event_cb(e), lv.EVENT.PRESSED, None)
        self.monitor_btn.add_event_cb(lambda e: self.__monitor_btn_event_cb(e), lv.EVENT.PRESSED, None)
        self.monitor_btn_2.add_event_cb(lambda e: self.__monitor_btn_event_cb(e), lv.EVENT.PRESSED, None)
        self.dev_btn.add_event_cb(lambda e: self.__dev_btn_event_cb(e), lv.EVENT.PRESSED, None)
        self.setting_btn.add_event_cb(lambda e: self.__setting_btn_event_cb(e), lv.EVENT.PRESSED, None)

    def __weather_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "WeatherScreen")

    def __monitor_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "MonitorScreen")

    def __alarm_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "AlarmScreen")

    def __dev_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "Dev1Screen")

    def __setting_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "SettingScreen")

From the above code, it can be seen that the implementation approach for each touch event's callback function is similar.

Taking the example of the weather widget's touch event, the code is as follows:

    def __weather_btn_event_cb(self,e):
        src = e.get_target()
        code = e.get_code()
        print("Click event occurs")
        EventMesh.publish("load_screen", "WeatherScreen")

The core statement in this code segment is EventMesh.publish("load_screen", "WeatherScreen"). This statement sends an event named "load_screen", indicating the loading of a new screen interface. The carried message is "WeatherScreen", which is the name of the screen interface, signifying the loading of the weather display screen.

GUI Startup

The "load_screen" event is subscribed to in the start() method of the class AgriUi(object) in the Agri_ui.py script file.

The code is as follows:

class AgriUi(object):

    # Some code is omitted here

    def __create(self):
        for screen in self.screens:
            screen.create()

    def start(self):
        self.__create()
        EventMesh.subscribe("load_screen", self.__route)
        EventMesh.publish("load_screen", "WelcomeScreen")
        utime.sleep(2)
        EventMesh.publish("load_screen", "MainScreen")

    def __route(self, topic, meta):
        for screen in self.screens:
            if screen.name == meta:
                lv.scr_load(screen.screen)

The start() method in the above code is used to launch the graphical interface of the smart agriculture control panel, and its workflow is as follows:

• Call the __create() method to create metadata for each screen interface.

• Call the EventMesh.subscribe() method to subscribe to the event named "load_screen". When this event occurs, call the __route() method to handle the event.

  The __route() method matches the corresponding interface object based on the message carried when the event is published, i.e., the name of the screen interface. It then calls the lv.scr_load() method from lvgl to load the new interface.

  Observant readers will notice that in the __init__() method of each class implemented in the screen interface script files, there is a statement similar to self.name = "MainScreen". This statement records the name of the screen interface.

• The statement EventMesh.publish("load_screen", "WelcomeScreen") is used to trigger the display of the first interface, the welcome screen. Then, wait for the welcome screen to display for 2 seconds, creating a pleasant visual experience.

• After the welcome screen, use the EventMesh.publish("load_screen", "MainScreen") statement to trigger the display of the main interface.

With this, the graphical interface of the smart agriculture control panel is launched, and the subsequent interface switches are controlled by user touch interactions.

Graphical Interface Design

As mentioned earlier, QuecPython uses NXP's GUI Guider as a graphical interface design tool. This tool not only facilitates interface layout design but also automatically generates QuecPython code. You can refer to the GUI Guider tutorial for more information.

The following section uses the example of the Home Screen of the smart agriculture control panel to illustrate the graphical interface design process.

Layout and Background Setting

Create a smart agriculture project, selecting a suitable layout template, and background design. In this stage, design will start from a blank layout by choosing a blank template with a resolution of 854*480.

Interface Drawing

This section will start drawing various modules on the home screen.

1. Left Dock Bar

   

   • Component: imgbtn.
   • Icons: Use easily recognizable icons as shortcuts for functions such as accessing the homepage, displaying data, settings, and controls.
   • Layout: Vertically align icons, place them on the left side of the interface for easy access.
   • Interactivity: Add a selected effect to icons to enhance the interactive experience.

   When using the imgbtn component in the GUI Guider software to create the left shortcut bar in the graphical interface of smart agriculture, you need to pay attention to several key design elements:

   1. Icon Selection:
      • Each imgbtn should have an intuitive icon representing its function, such as a house-shaped icon for the homepage or a gear-shaped icon for settings.
      • Icon design should be clear and straightforward for easy recognition by users.
   2. Size and Spacing:
      • The size of each imgbtn should be large enough for users to easily click, especially on touchscreen devices.
      • There should be appropriate spacing between shortcuts to prevent accidental touches and make the interface look tidy.
   3. Icon States:
      • Design icons for different states, such as default, hover, and click states. This provides visual feedback and enhances the user interaction experience.
      • The imgbtn component should support state switching so that users can see the response of the interface to their actions.
   4. Functionality:
      • Each imgbtn should be configured with the correct event handlers to ensure that the correct action is triggered when users click, navigating to the corresponding screen.
      • If the function represented by the imgbtn is currently active or on the current screen, it should be displayed in a different visual style to indicate its active status.

2. Top Information Display Bar

   

   • Components: label, image.
   • Operator Information: Display mobile operator or network status on the top left of the interface.
   • Time Display: Show the current time in the center of the top of the interface.
   • Signal Strength and Battery Indicators: Display icons for Wi-Fi or network signal strength and current battery level on the top right of the interface.

   When designing the top information display bar of the smart agriculture control panel using GUI Guider software, combine the label and image components to create an information-rich and visually recognizable status bar. Here are detailed steps on how to use these components to design the top information display bar:

   1. Operator Information (Label Component):
      • Use the label component to display operator information. Choose a clear and readable font and size to ensure easy readability on different devices.
      • Place the label component on the left side of the top information bar and set the appropriate alignment, usually left-aligned.
   2. Time Display (Label Component):
      • Another label component is used to display the time. You can set up a timer to ensure that the time is always updated.
      • The time label is typically positioned on the right side of the information bar and should be easily distinguishable, which can be achieved by increasing the font size and bolding.
   3. Signal Strength (Image Component):
      • Signal strength can be represented by a series of predefined signal icons. These icons can display different images based on varying signal strengths.
      • Use the image component to place the signal strength icons, positioning them on the right side of the top information bar.
   4. Battery Indication (Image Component):
      • Battery indication also uses the image component for display. You can prepare a set of battery icons to reflect different battery states.
      • Place the battery icons on the far right of the top information bar, adjacent to the signal strength icons.

3. Weather Module

   

   • Components: label, container, image.
   • Current Weather: Display the current weather condition and temperature.
   • Future Weather Forecast: Provide a horizontal scroll or small grid next to or below the current weather, displaying the weather forecast for the upcoming days.

   When designing the weather information module in the top left corner using GUI Guider, you can create an intuitive and information-rich weather display area by combining label, image, and container components. Here are the steps on how to use these components to design the weather information module:

   1. Basic Container Setup (Container Component):
      • Place a container component in the top-left corner of the interface as the foundation for the weather module. This container will contain all the weather-related sub-components.
      • Adjust the size of the container to ensure it can accommodate all sub-components without appearing crowded.
   2. Location Display (Label Component):
      • Use a label component at the top of the container to display the current geographic location or farm name.
      • This label can use a larger font size and bold effect for clear identification of location information.
   3. Current Temperature and Weather (Label Component):
      • Use two label components for the current temperature and weather description. These should use a clear, readable font and an appropriate size for easy understanding.
      • The label for the current temperature should be the most prominent, possibly using a larger font size and distinctive color.
   4. Weather Icons (Image Component):
      • Use the image component to display an icon representing the current weather condition, such as sunny, cloudy, rainy, etc.
      • The weather icon should be adjacent to the label for the current temperature, providing an intuitive visual representation of the weather.
   5. Daily Weather Forecast (Label and Image Components):
      • Below or next to the container, use multiple label and image components to display the weather forecast for the next 5 days.
      • Each day's forecast can use a small image component to show a weather icon, accompanied by a label component displaying the date.
   6. Adaptive Design:
      • Ensure that the weather information area can adapt to different screen sizes and resolutions, especially in responsive interfaces.
      • Sub-components should automatically adjust their size and position when the container size changes.

4. Temperature and Humidity Historical Line Chart

   

   • Components: container, chart, label.
   • Chart Style: Use a line chart to display the historical data trends of temperature and humidity.
   • Time Selection: Provide options to view data for different time periods, such as day, week, and month.
   • Interactivity: Allow users to hover or click on points on the chart to view specific data points.

   When using GUI Guider to design the temperature historical line chart in the bottom left corner of the smart agriculture graphical interface, layout the label, chart, and container components. These components will together form an area displaying the trend of temperature changes. Here are specific design instructions:

   1. Container Layout (Container Component):
      • Place a container component in the bottom left corner of the interface to serve as the background and framework for the temperature historical line chart. This container will contain the chart and relevant labels.
      • Set the width and height of the container to fit the display requirements of the line chart while maintaining coordination with other interface elements.
   2. Line Chart (Chart Component):
      • Inside the container, add a chart component to draw the historical data line chart for temperature.
      • Configure the chart component to display the time series of temperature data, such as setting the x-axis as the time axis and the y-axis as the temperature values, ensuring clear visibility of data points.
      • Define the style of the line, such as color, thickness, and whether to show markers for data points.
   3. Title Label (Label Component):
      • Above the line chart or at the top of the container, use a label component to display the title, such as "Historical Line."
      • Choose an appropriate font size and style to ensure the title is clear and consistent with the overall design style.
   4. Responsive Design:
      • For responsive interfaces, ensure that the container and its components, including chart and label, can scale appropriately based on different screen sizes.
      • Test the display of the chart on different resolutions and devices, ensuring that the data remains clear and visible.

5. Display of Common Environmental Parameters

   

   • Components: container, label.
   • Data Display Blocks: Display key parameters, such as soil pH value, soil temperature, oxygen, and carbon dioxide concentrations, as current readings in separate "blocks" or "cards."

   When designing the display of environmental parameters in the top right corner of the smart agriculture graphical interface using GUI Guider software, you can use label and container components to clearly show key information such as soil pH value, oxygen concentration, soil humidity, and carbon dioxide concentration. Here are detailed design steps:

   1. Environmental Parameters Container (Container Component):
      • Place a container component in the top right corner of the interface as a wrapping element for all environmental parameters. This container will help organize and separate different parameter displays.
      • Set the width and height of the container to accommodate the arrangement of internal label components, ensuring an aesthetically pleasing and coordinated overall layout.
   2. Parameter Labels (Label Components):
      • For each environmental parameter, use a separate label component to display the parameter name and value. For example, one label displays "Soil pH Value: 7.1," while another label displays "Oxygen Concentration: 50%" and so on.
      • The label for the parameter name can use a smaller font, while the label for the value can use a larger or bold font to highlight the numerical information.
   3. Parameter Update Mechanism:
      • If possible, design a data update mechanism to periodically refresh the displayed values of environmental parameters. This can be achieved by binding label components to a data source and setting up a timer to update the values.

6. Alarm Information Area

   

   • Components: container, label, table.
   • List View: Display recent alarms and warnings in the form of a list or log.
   • Priority Indication: Use color coding or icons to indicate the priority or severity of alarms.
   • Interactivity: Allow users to click on alarms to get more details or confirm and clear notifications.

   When designing the alarm information area in the bottom right corner of the smart agriculture graphical interface using GUI Guider software, you can use label, container, and table components to effectively display alarm titles and specific alarm information. This area will provide users with critical safety and system status updates. Here is the detailed design process:

   1. Alarm Information Container (Container Component):
      • Place a container component in the bottom right corner of the interface as the main framework for the alarm information area. This container will contain the title and specific content of alarm information.
      • Set the size of the container, ensuring enough space to display alarm information while maintaining coordination with other elements of the interface.
   2. Alarm Information Title (Label Component):
      • Use a label component to display the title at the top of the container, such as "Alarm Information."
      • Choose a prominent and easily readable font and size to ensure users can clearly identify the functionality of this area.
   3. Alarm Information Table (Table Component):
      • Below the container, use the table component to list specific alarm information. This can include columns for alarm time, type, status, and more.
      • Adjust the column width and row height of the table to ensure all information is clear and visible.
   4. Alarm Information Style:
      • Set appropriate background color, border color, and font color for the table component to align with the overall interface style.
      • Consider using different colors or icons to represent different levels of alarms, such as red for urgent alarms and yellow for warnings.
   5. Alarm Information Update Mechanism:
      • Design a data update mechanism to allow the table component to dynamically display the latest alarm information. This may involve binding the table component to a backend data source and setting up a timed refresh.
   6. Responsive Design:
      • Ensure that the container and its table and label components can scale appropriately on different screen sizes and resolutions.
      • On smaller screens, adjustments to the layout of the table may be necessary to ensure readability of information.

When placing these elements in GUI Guider, ensure that each component is positioned based on a grid or flexible layout system to adapt to different screen sizes and resolutions. The interface design should be clean, maintaining enough white space to avoid crowding. The color scheme used should highlight important information without being too glaring, and interactive elements should provide immediate feedback, such as changing appearance on hover or click. Additionally, it's important to test the design on different devices to ensure usability and performance.

If the system will be used in various lighting conditions, such as direct sunlight, adjustments to contrast and brightness should be possible to enhance visibility. Lastly, the interface design should be intuitive, allowing new users to navigate without extensive training, reflecting good User Experience (UX) design principles.