Method and system for free layout of interface in low-code platform

Abstract

The invention discloses a method and system for free layout of an interface in a low-code platform, and the method comprises the following steps: 1, defining constraint conditions, ensuring that the arrangement of interface elements meets the expectation, considering the display requirements of different screen sizes, and keeping the proper sizes of the elements in the layout; step 2, solving an optimal layout scheme by using a CasSowary algorithm, and quickly finding a layout scheme meeting constraint conditions through an efficient algorithm; step 3, applying the optimal layout scheme to the webpage; 4, monitoring user input and element interaction events, updating the interface layout according to the events, and ensuring that the interface can be adjusted in real time according to user behaviors; and 5, solving constraint conflicts, and selecting a proper conflict solving strategy. According to the method and the device, a developer can easily and quickly create and adjust the interface layout, so that the development efficiency is improved, the cost is reduced, and the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer graphics and user interface design technology, and in particular to a method and system for free interface layout in a low-code platform. Background Art

[0002] Existing low-code platforms allow developers to use preset templates or configuration files to design the layout of the interface. This approach does make the development process simpler, but it also brings some problems. First, this approach lacks sufficient flexibility to meet complex and dynamic layout requirements. Just like building a house with prefabricated bricks, sometimes it cannot fully adapt to special needs. Secondly, the layout configuration is usually hard-coded, which means that the layout settings are predefined in the code. When the interface changes, such as adding new elements or adjusting the order of elements, developers need to manually modify the configuration file or template, which increases the cost and difficulty of maintenance. It's like every time you build a new house, you need to redesign and calculate the position of the bricks.

[0003] In addition, most existing low-code platforms do not consider the interactivity and dynamic changes of elements when dealing with layout issues. For example, when a button is clicked, how should the interface react? This results in the interface being unable to respond in a timely manner based on user input or other events. It is like a house that cannot automatically adjust to new needs after it is built.

[0004] In addition, although existing layout algorithms, such as CSS Flexbox and CSS Grid, can be used to solve simple layout problems, their performance and accuracy may be affected when faced with complex and dynamic layout problems. Moreover, these algorithms usually require developers to have certain professional knowledge to use them correctly, which increases the difficulty of development and the cost of maintenance. Summary of the invention

[0005] In view of this, the present invention proposes a method and system for free interface layout in a low-code platform to solve the problems of insufficient flexibility and interactivity of the low-code platform in the prior art.

[0006] The specific technical solutions of the present invention are as follows:

[0007] A method for free layout of an interface in a low-code platform comprises the following steps:

[0008] Step 1: Define constraints to ensure that the layout of interface elements meets expectations, taking into account the display requirements of different screen sizes and keeping the elements at the appropriate size in the layout;

[0009] Step 2: Use the Cassowary algorithm to solve the optimal layout solution, and quickly find a layout solution that meets the constraints through an efficient algorithm;

[0010] Step 3: Apply the optimal layout solution to the web page, taking into account the interactivity and dynamic changes of elements, to ensure that the web page can respond promptly to user input and other events;

[0011] Step 4: Monitor user input and element interaction events, and update the interface layout according to the events to ensure that the interface can be adjusted in real time according to user behavior;

[0012] Step 5, resolve constraint conflicts and select appropriate conflict resolution strategies to adjust the position, size, or shape of the element to meet more constraints.

[0013] Specifically, in step 1, the constraint conditions include width and height constraints, margin constraints, and alignment constraints.

[0014] Specifically, width and height constraints specify the minimum width and maximum height of an element, ensuring that the element can maintain the appropriate size in the layout.

[0015] Specifically, margin constraints control the distance between the edge of an element and the edge of its container, ensuring readability and clarity between elements.

[0016] Specifically, alignment constraints control the alignment between elements to ensure the neatness and consistency of the interface.

[0017] Specifically, in step 4, the interface update technology needs to ensure the correctness, real-time and interactivity of the update process, and seamlessly connect with the constraint definition technology and the Cassowary algorithm application technology.

[0018] Specifically, in step 4, the event monitoring and processing technology can identify multiple event types, including click, slide, and drag.

[0019] The present application also proposes a system for free interface layout in a low-code platform, including the following components:

[0020] The constraint definition module is used to define constraint conditions to ensure that the arrangement of interface elements meets expectations;

[0021] Cassowary algorithm module, used to solve the optimal layout solution;

[0022] The interface application module applies the optimal layout solution to the web page;

[0023] Event monitoring module, which monitors user input and element interaction events and updates the interface layout according to the events;

[0024] Conflict resolution module,resolves constraint conflicts and selects appropriate conflict resolution strategies.

[0025] The beneficial effects of the present invention are:

[0026] 1. Improved layout flexibility and dynamism: This means that developers can adjust and change elements on the interface more freely, and these elements can also be dynamically adjusted based on user behavior or input.

[0027] 2. Reduced development and maintenance costs: Using this technology, developers do not need to spend a lot of time and energy to learn and master professional layout knowledge, and can achieve complex layouts through simple operations.

[0028] 3. Improved real-time and accuracy of layout: This means that developers can see the effects of their changes on the interface more quickly, and these changes will be more accurately reflected in the final application. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0030] Figure 1 It is a schematic diagram of the interface of the width and height constraints of the present invention;

[0031] Figure 2 It is a schematic diagram of the interface of the margin constraint of the present invention;

[0032] Figure 3 A flowchart of a method for free interface layout in a low-code platform of the present invention. DETAILED DESCRIPTION

[0033] In order to make the technical problems, technical solutions and beneficial effects to be solved by the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0034] The present invention proposes a method for free interface layout in a low-code platform.

[0035] The free layout method of the present invention describes the layout of elements by defining constraints, just like we use rules to determine the position and size of each puzzle piece in a jigsaw puzzle. Developers can use these constraints to specify the position, size, direction and other attributes of elements, so that we can ensure that the elements are arranged in the way we want on the interface. Constraint definition technology is the core of realizing this free layout. We need to ensure the integrity, accuracy and flexibility of these constraints so as to meet our different layout requirements.

[0036] In order to solve the layout problem, the free layout method of the present invention uses a special algorithm called Cassowary algorithm. Cassowary algorithm can help us quickly find a layout solution that meets all constraints. Like a smart assistant, Cassowary algorithm can find the optimal layout solution, saving us time and energy. We need to protect the correctness, efficiency and scalability of this algorithm, and also ensure that it can be perfectly combined with constraint definition technology.

[0037] Once we find the optimal layout solution, we need to apply it to the interface. This requires the use of interface update technology. This technology can ensure that our layout solution is presented on the interface in real time and correctly, and users can interact with the interface. We need to protect the correctness, real-time and interactivity of the update process, and also ensure that it can be seamlessly connected with the constraint definition technology and Cassowary algorithm application technology.

[0038] Finally, the free layout method of the present invention also needs to monitor various events on the interface, such as user clicks, slides and other actions. Based on these events, we can update the layout in real time to provide a more dynamic and personalized user experience. This requires event monitoring and processing technology. We need to protect the integrity and accuracy of the event monitoring mechanism, and also ensure that it can work in conjunction with the constraint definition technology, Cassowary algorithm application technology and interface update technology.

[0039] In general, the free layout method of the present invention helps developers achieve more free, efficient and dynamic layout design through constraint definition technology, Cassowary algorithm application technology, interface update technology and event monitoring and processing technology. Just like a powerful toolbox, each technology is a tool, and we need to use and protect these tools correctly to create excellent interface design.

[0040] To do this, we can follow these steps:

[0041] First, constraints need to be defined. Constraints are very important factors in layout design. They can ensure that the arrangement of elements on the interface meets our expectations. For example, in the example of an e-commerce website, we can define the following constraints: 1. The height of the product image must not exceed one-third of the page height to ensure that the page does not appear too crowded due to the large product image. 2. The height of the text information must not exceed two-thirds of the page height to ensure that the text information does not block the product image or other important elements. 3. A certain distance needs to be maintained between each product image and text information to increase the readability and aesthetics of the interface. When the interface changes with the size of the user's device screen, we need to ensure that each image and text can adapt to the screen size and maintain the original proportions and spacing.

[0042] Next, we can use the Cassowary algorithm to find the optimal layout. The Cassowary algorithm is an efficient algorithm that can help us quickly find a layout that satisfies the constraints. We can use the constraints as input and use the Cassowary algorithm to find the optimal layout. The algorithm will return a layout that satisfies the constraints, where the position of each product image and text information has been determined.

[0043] Then, we need to apply the optimal layout solution to the web page. We can extract the location information of the product images and text information in the optimal layout solution, and then display the product images and text information on the web page according to this information. At the same time, we also need to consider the interactivity and dynamic changes of the elements to ensure that the web page can respond promptly to user input and other events.

[0044] Next, we need to listen for user input and element interaction events. We can listen for user input and other events, such as mouse click events, keyboard input events, etc. When an event occurs, we need to update the layout based on the event. For example, when a user clicks on a product image, we need to move the position of the product image to the position of the mouse click. At the same time, we also need to consider the priority and triggering conditions of the event to decide when to update the layout.

[0045] Finally, we need to consider the problem of resolving constraint conflicts. During the layout process, there may be constraint conflicts, that is, the current layout scheme cannot meet all constraints. At this time, we need to choose a suitable conflict resolution strategy to resolve it. According to the defined strategy, we can try to adjust the position, size or shape of the element to meet more constraints.

[0046] When resolving constraint conflicts, we need to follow these steps:

[0047] 1. Define conflict resolution strategies: First, we need to define a set of conflict resolution strategies to guide the resolution of constraint conflicts. These strategies can include giving priority to certain constraints, adjusting the relative positions between elements, increasing or decreasing the size of elements, etc.

[0048] 2. Detect constraint conflicts: During the layout process, we need to constantly detect whether there are constraint conflicts. This can be achieved by comparing the current layout plan with the constraints. If the current layout plan cannot meet all the constraints, there is a constraint conflict.

[0049] 3. Resolve constraint conflicts: When a constraint conflict is detected, we need to choose a suitable conflict resolution strategy to resolve it. Depending on the defined strategy, we can try to adjust the position, size, or shape of the element to meet more constraints.

[0050] In short, in order to meet the needs of users, we need to consider the rationality and aesthetics of the layout in web design. By defining constraints, using the Cassowary algorithm to solve the optimal layout solution, applying the optimal layout solution to the web page, monitoring user input and element interaction events, and resolving constraint conflicts, we can create a more friendly and beautiful web interface.

[0051] It should be noted that constraints are key considerations in layout design, which ensure that elements are arranged in an organized, effective and predictable manner on the interface. This patent mentions three main levels of constraints, which play different roles in layout design.

[0052] 1. Width and height constraints (first level constraints, such as Figure 1 shown):

[0053] Width and height constraints are one of the most basic constraints in layout design. They specify the minimum width and maximum height of an element to ensure that the element can maintain an appropriate size in the layout. In the example of an e-commerce website, product images and text information need to meet a certain aspect ratio to adapt to the display requirements of different screen sizes. Through width and height constraints, we can ensure that elements maintain an appropriate size in the layout, avoid being too large or too small, and improve the overall aesthetics of the interface.

[0054] 2. Margin constraints (second level constraints, such as Figure 2 shown):

[0055] Margin constraints are used to control the distance between the edge of an element and the edge of a container in layout design. In the example of an e-commerce website, a certain distance needs to be maintained between product images and text information to ensure readability and clarity between them. Through margin constraints, we can control the spacing between elements, ensure that they maintain appropriate spacing in the layout, and improve the readability and usability of the interface.

[0056] 3. Alignment constraints (third level constraints):

[0057] Alignment constraints are used to control the alignment of elements in layout design. In the example of an e-commerce website, product images and text information need to be aligned to maintain the neatness and consistency of the interface. By setting alignment constraints, we can control the alignment of elements to ensure that they maintain a consistent arrangement in the layout, improving the neatness and usability of the interface.

[0058] The three levels of constraints in this patent are important considerations in layout design. They ensure the consistency, readability and aesthetics of the interface by controlling the size, spacing and alignment of elements. At the same time, the application of the Cassowary algorithm can help us quickly find a layout solution that meets these constraints and improve the efficiency and quality of layout design.

[0059] In addition to the three main constraint levels mentioned above, the Cassowary algorithm also plays an important role in layout design. The algorithm defines a series of constraints and uses heuristic methods to find layout solutions that meet these conditions. In the example of an e-commerce website, we can use the Cassowary algorithm to automatically calculate layout solutions that meet constraints such as width, height, margins, and alignment, thereby providing users with a more friendly and beautiful interface experience.

[0060] The Cassowary algorithm is an algorithm used to solve layout problems. In computer graphics and user interface design, the layout problem refers to how to arrange the position and size of elements reasonably so that the interface looks beautiful and easy to use. The Cassowary algorithm constrains the position and size of elements by defining a series of constraints, such as the distance between elements, size ratio, etc. These constraints can help us ensure the correctness and beauty of the layout. Then, the Cassowary algorithm uses heuristic methods to find layout solutions that meet these constraints. This means that the algorithm will try different layout solutions and evaluate and adjust them according to the constraints until an optimal solution is found. Although the formula of the Cassowary algorithm is not public, we can use related software libraries to take advantage of this algorithm. These software libraries provide convenient interfaces and tools that allow us to easily use the Cassowary algorithm to solve various layout problems.

[0061] The present invention also proposes a system for free interface layout in a low-code platform, including: a constraint definition module, used to define constraint conditions to ensure that the arrangement of interface elements meets expectations; a Cassowary algorithm module, used to solve the optimal layout solution; an interface application module, which applies the optimal layout solution to the web page; an event monitoring module, which monitors user input and element interaction events, and updates the interface layout according to the events; a conflict resolution module, which resolves constraint conflicts and selects appropriate conflict resolution strategies.

[0062] In summary, the beneficial effects of this application are:

[0063] First, from a technical perspective, the free layout method based on the Cassowary algorithm is an innovative layout technology. It not only improves the flexibility and dynamism of the layout, but also reduces the cost of development and maintenance. This technology enables developers to create complex, dynamic, and interactive layouts more efficiently without having professional layout knowledge and experience.

[0064] Secondly, from the perspective of user experience, the free layout method of the present invention can improve the real-time and accuracy of the layout. This means that the interface can be displayed and interacted more smoothly, providing users with a better user experience. At the same time, this also makes the application more reliable and stable, reducing the possibility of errors and defects.

[0065] In addition, the advantages of the present invention are also reflected in the promotion of the industry. By using the free layout method based on the Cassowary algorithm, developers can develop various interfaces more efficiently, thereby promoting the development of the interface design field. At the same time, this technology also provides new ideas and methods for other related fields, promoting technological progress and innovation in the entire industry.

[0066] In summary, the advantages and effectiveness of the present invention are not only reflected in improving the flexibility and dynamics of the layout, reducing the development and maintenance costs, and improving the real-time and accuracy of the layout, but it also has a profound impact on the field of interface design and promotes the development and progress of the entire industry.

[0067] The above are only preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for free interface layout in a low-code platform, characterized in that: The following steps are involved: Step 1: Define constraints to ensure that the layout of interface elements meets expectations, taking into account the display requirements of different screen sizes and keeping the elements at the appropriate size in the layout; Step 2: Use the Cassowary algorithm to solve the optimal layout solution, and quickly find a layout solution that meets the constraints through an efficient algorithm; Step 3: Apply the optimal layout solution to the web page, taking into account the interactivity and dynamic changes of elements, to ensure that the web page can respond promptly to user input and other events; Step 4: Monitor user input and element interaction events, and update the interface layout according to the events to ensure that the interface can be adjusted in real time according to user behavior; Step 5, resolve constraint conflicts and select appropriate conflict resolution strategies to adjust the position, size, or shape of the element to meet more constraints.

2. The method for free interface layout in a low-code platform according to claim 1, characterized in that: In step 1, the constraints include width and height constraints, margin constraints, and alignment constraints.

3. The method for free interface layout in a low-code platform according to claim 2, characterized in that: The width and height constraints specify the minimum width and maximum height of an element, ensuring that the element can maintain the appropriate size in the layout.

4. The method for free interface layout in a low-code platform according to claim 2, characterized in that: The margin constraints control the distance between the edge of an element and the edge of a container, ensuring readability and clarity between elements.

5. The method for free interface layout in a low-code platform according to claim 2, characterized in that: The alignment constraints control the alignment between elements to ensure the neatness and consistency of the interface.

6. The method for free interface layout in a low-code platform according to claim 1, characterized in that: In step 4, the interface update technology needs to ensure the correctness, real-time and interactivity of the update process, and seamlessly connect with the constraint definition technology and the Cassowary algorithm application technology.

7. The method for free interface layout in a low-code platform according to claim 1, characterized in that: In step 4, the event monitoring and processing technology can identify multiple event types, including click, slide, and drag.

8. A system for free interface layout in a low-code platform, characterized in that: It includes the following components: Constraint definition module, which is used to define constraints to ensure that the arrangement of interface elements meets expectations; Cassowary algorithm module, used to solve the optimal layout solution; The interface application module applies the optimal layout solution to the web page; Event monitoring module, which monitors user input and element interaction events and updates the interface layout according to the events; Conflict resolution module,resolves constraint conflicts and selects appropriate conflict resolution strategies.

Images