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.
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.
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:
Weather Information:
Clicking on it leads to a detailed weather screen.
Temperature and Humidity History Curve:
Common Environmental Parameters:
Alarm Information:
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.
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.
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:
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.
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.
Code GitHub Repository: https://github.com/QuecPython/solution-Agriculture-Control-Panel.git
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.)._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.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.The application startup process is illustrated in the following diagram:
The block diagram for the smart agriculture control panel software is as follows:
As mentioned earlier, the interface switching is driven by the EventMesh event management framework.
The design framework of EventMesh is illustrated in the following diagram:
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.
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 thelv.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 toself.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.
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.
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.
This section will start drawing various modules on the home screen.
Left Dock Bar
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:
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.imgbtn
should be large enough for users to easily click, especially on touchscreen devices.imgbtn
component should support state switching so that users can see the response of the interface to their actions.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.imgbtn
is currently active or on the current screen, it should be displayed in a different visual style to indicate its active status.Top Information Display Bar
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:
label
component to display operator information. Choose a clear and readable font and size to ensure easy readability on different devices.label
component on the left side of the top information bar and set the appropriate alignment, usually left-aligned.label
component is used to display the time. You can set up a timer to ensure that the time is always updated.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.image
component to place the signal strength icons, positioning them on the right side of the top information bar.image
component for display. You can prepare a set of battery icons to reflect different battery states.Weather Module
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:
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.container
to ensure it can accommodate all sub-components without appearing crowded.label
component at the top of the container to display the current geographic location or farm name.label
can use a larger font size and bold effect for clear identification of location information.label
components for the current temperature and weather description. These should use a clear, readable font and an appropriate size for easy understanding.label
for the current temperature should be the most prominent, possibly using a larger font size and distinctive color.image
component to display an icon representing the current weather condition, such as sunny, cloudy, rainy, etc.label
for the current temperature, providing an intuitive visual representation of the weather.container
, use multiple label
and image
components to display the weather forecast for the next 5 days.image
component to show a weather icon, accompanied by a label
component displaying the date.container
size changes.Temperature and Humidity Historical Line Chart
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:
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.container
to fit the display requirements of the line chart while maintaining coordination with other interface elements.container
, add a chart
component to draw the historical data line chart for temperature.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.label
component to display the title, such as "Historical Line."container
and its components, including chart
and label
, can scale appropriately based on different screen sizes.Display of Common Environmental Parameters
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:
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.label
components, ensuring an aesthetically pleasing and coordinated overall layout.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.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.label
components to a data source and setting up a timer to update the values.Alarm Information Area
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:
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.label
component to display the title at the top of the container, such as "Alarm Information."container
, use the table
component to list specific alarm information. This can include columns for alarm time, type, status, and more.table
to ensure all information is clear and visible.table
component to align with the overall interface style.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.container
and its table
and label
components can scale appropriately on different screen sizes and resolutions.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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。