CN113867711A - Code block container, visual programming platform and method - Google Patents
Code block container, visual programming platform and method Download PDFInfo
- Publication number
- CN113867711A CN113867711A CN202111227630.9A CN202111227630A CN113867711A CN 113867711 A CN113867711 A CN 113867711A CN 202111227630 A CN202111227630 A CN 202111227630A CN 113867711 A CN113867711 A CN 113867711A
- Authority
- CN
- China
- Prior art keywords
- container
- code
- component
- code block
- chunk
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application relates to a code block container, a visual programming platform and a method, and belongs to the technical field of computers. The code block container includes: the scrolling view component is used for providing a visual area with a scrolling function, and correspondingly adjusting the actual area of the code block container displayed in the visual area by receiving an operation event; the container component is to determine an actual region of the code chunk container; the intermediate component adjusts the position of the code patch relative to the container component by adjusting its position so that the code patch can be displayed in the actual region determined by the container component. By designing a brand-new code block container, the actual area of the code block container can be infinitely expanded in 4 directions of upward direction, downward direction, left direction and right direction, so that the code blocks can be randomly placed and moved in the actual area of the code block container.
Description
Technical Field
The application belongs to the technical field of computers, and particularly relates to a code block container, a visual programming platform and a visual programming method.
Background
In a visual programming system, a code chunk container is a core function therein. The code block container is a visual area with horizontal and vertical scroll bars and can adjust the current display content through sliding. In a visualization programming system based on a Unity technology stack, when a Unity UI Toolkit technology is used for realizing a user UI (user interface) interface function. The aforementioned code chunk container may be implemented using a UI ToolKit component. The UI ToolKit is a UI system that organizes UI elements using a tree data structure. In the UI ToolKit component, the ScrollView component is a component that is relatively close to an infinitely expandable code chunk container. The code block container can dynamically adjust the size of the actual content area of the code block container according to the sizes and the positions of all code blocks in the code block container, so that the actual content area of the code block container does not encounter a boundary in any direction.
As shown in fig. 1, a ScrollView (Node0) is a visual area with a horizontal and vertical scroll bar, and the actual content area presented in the current visual area can be adjusted by dragging the scroll bar or dragging a slider in the visual area. By dragging the scroll bar or dragging and sliding in the viewable area of the ScrollView, the code blocks (Node1, Node2) with positive x and y coordinates in the ScrollView can be viewed, when the horizontal scroll bar slides to the leftmost end, the vertical scroll bar slides to the topmost end, and if the x or y coordinate of the code block is negative at the moment, the code block (Node3, Node4) can only be partially visible or invisible. Since the ScrollView component can only be expanded to the right and downward and can not be expanded to the left and upward, if the ScrollView component is taken as a container of code blocks, only the code blocks with positive x and y coordinates can be placed. This brings many inconveniences to the user in providing a free code block editing environment.
Disclosure of Invention
In view of the above, an object of the present application is to provide a code chunk container, a visual programming platform and a method thereof, so as to solve the problem that the existing code chunk editing environment cannot be expanded to the left and upwards.
The embodiment of the application is realized as follows:
in a first aspect, an embodiment of the present application provides a code chunk container, including: a scroll view component, a container component, and an intermediate component; the scroll view component is used for providing a visual area with a scroll function, and correspondingly adjusting the actual area of the code block container displayed in the visual area by receiving an operation event; the container component as a child of the rolling view component, the container component to determine an actual region of the code chunk container; the intermediate component is used as a parent node of the code block and as a child node of the container component, and adjusts the position of the code block relative to the container component by adjusting the position of the intermediate component, so that the code block can be displayed in the actual area determined by the container component. In the embodiment of the application, a brand-new code block container is designed, so that the code block container comprises a rolling view component, a container component and an intermediate component, wherein the rolling view component is used as a parent node of the container component, the container component is used as a parent node of the intermediate component, the intermediate component is used as a parent node of the code block, and the position of the code block relative to the container component is adjusted by adjusting the position of the intermediate component, so that the code block can be displayed in a practical area determined by the container component, and therefore, the practical content area supporting the code block container component can be infinitely expanded in 4 directions, namely upwards, downwards, leftwards and rightwards, and the code block can be randomly placed and moved in the practical area of the code block container.
With reference to a possible implementation manner of the embodiment of the first aspect, when the code chunk container receives at least one operation of adding a code chunk, removing a code chunk, editing a code chunk, and moving a code chunk, the container component dynamically adjusts a size of the code chunk container real area according to a bounding box containing all current code chunks. In the embodiment of the application, no matter a code block is newly added, a code block is removed, a code block is edited, or a code block is moved in a code block container, the container component dynamically adjusts the actual area of the code block container according to the operation, so that the size of the actual area is dynamically changed in real time along with the relevant operation on the code block.
With reference to a possible implementation manner of the embodiment of the first aspect, the container component is configured to determine a bounding box containing all code blocks according to positions and widths and heights of all code blocks in the code block container, and adjust the actual region according to the bounding box. In the embodiment of the application, when adjusting the size of the actual region, the container component determines a bounding box containing all code blocks according to the positions and widths and heights of all code blocks in the code block container, and then dynamically adjusts the actual region of the code block container according to the bounding box, so that the size of the actual region reflects the dynamic change of the code blocks in the code block container.
The width of the actual region is adjusted to be the sum of the width of the boundary frame and the width of the preset left margin and the width of the preset right margin, and the height of the actual region is adjusted to be the sum of the height of the boundary frame and the height of the preset upper margin and the height of the preset lower margin.
With reference to a possible implementation manner of the embodiment of the first aspect, the container component is configured to, when the actual area is adjusted according to the bounding box, adjust the width of the actual area to be a sum of the width of the bounding box and a width of a preset left margin and a width of a preset right margin, and adjust the height of the actual area to be a sum of the height of the bounding box and a height of a preset upper margin and a height of a preset lower margin. In the embodiment of the application, when the width of the actual region is adjusted, the width of the actual region is adjusted to be the width of the boundary frame and the width of the left margin, the sum of the widths of the right margin, the height of the actual region is adjusted to be the height of the boundary frame and the height of the left margin, the sum of the heights of the left margin and the right margin, the upper margin region, the lower margin region, the left margin region and the right margin region are preset, and therefore when the code block is displayed in the visible region, the code block cannot coincide with the boundary of the visible region, and the appearance is more attractive.
With reference to a possible implementation manner of the embodiment of the first aspect, both the value of the width of the preset left margin and the value of the width of the preset right margin are values of the width of the visible area, and both the value of the height of the preset upper margin and the value of the height of the preset lower margin are values of the height of the visible area. In the embodiment of the application, the value of the width of the preset left margin and the value of the width of the preset right margin are both set as the value of the width of the visible area, and the value of the height of the preset upper margin and the value of the height of the preset lower margin are both set as the value of the height of the visible area, so that when no code block is placed in the code block container, the width of the ScrollView (the width of the visible area) is half of the width of the container assembly (the width of the actual area), and the height of the ScrollView (the height of the visible area) is half of the height of the container assembly (the height of the actual area), and the container assembly is more attractive.
With reference to a possible implementation manner of the embodiment of the first aspect, when the code chunk container receives at least one operation of adding a code chunk, removing a code chunk, editing a code chunk, and moving a code chunk, the intermediate component dynamically adjusts its position according to a deviation between an upper left vertex of the bounding box and a content starting point of the actual region, so that all code chunks in the code chunk container are displayed in the actual region determined by the container component. In the embodiment of the application, whether a code block is newly added, removed, edited or moved in the code block container, the middle component dynamically adjusts the position of the middle component according to the deviation between the upper left vertex of the bounding box and the content starting point of the actual area, so that all the code blocks in the code block container are displayed in the actual area determined by the container component.
With reference to a possible implementation manner of the embodiment of the first aspect, the middle component is configured to adjust its position such that an upper left vertex of the bounding box coincides with a content starting point of the container component. In the embodiment of the application, the middle component enables the top left vertex of the boundary frame containing all the code blocks to coincide with the content starting point of the container component by adjusting the position of the middle component, so that all the code blocks in the code block container are displayed in the actual area determined by the container component, meanwhile, the code blocks can be better displayed in the visible area in a centered mode, and user experience is improved.
With reference to this embodiment, the display mode attribute outside the boundary of the middle component is set to be a visible mode. In the embodiment of the application, the out-of-boundary display mode attribute of the middle component is set to be the visible mode, so that the display of all code blocks under the middle component is not limited by the display range of the middle component.
With reference to a possible implementation manner of the embodiment of the first aspect, the out-of-boundary display mode attribute of the container component is set to a clipping mode, so that any content beyond the actual area of the code block container is clipped. In the embodiment of the present application, the out-of-border display mode (overflow) of the container component is set to the clip mode (clip), and when the intermediate component appears outside the actual area (display range of the container component) determined by the container component due to movement in some cases, the setting is such that the intermediate component outside the actual area can be clipped.
In a second aspect, an embodiment of the present application further provides a visual programming platform, including: the code chunk container provided in the above first aspect embodiment and/or in connection with any possible implementation manner of the first aspect embodiment, where the code chunk container is a component of the visual programming platform.
In a third aspect, an embodiment of the present application further provides a visual programming method, which is applied to an electronic device including the visual programming platform provided in the embodiment of the second aspect, where the method includes: acquiring configuration operation of a user for a code block in a code block container of the visual programming platform, wherein the configuration operation comprises at least one operation of adding the code block, removing the code block, editing the code block and moving the code block; in response to the configuration operation, adjusting a size of the actual region determined by the container component in the code chunk container, and adjusting a position of an intermediate component in the code chunk container to adjust a position of a code chunk in the code chunk container relative to the container component in the code chunk container, such that the code chunk is displayed in the actual region determined by the container component.
With reference to one possible implementation manner of the embodiment of the third aspect, adjusting the size of the actual area determined by the container component in the code chunk container includes: determining a boundary box containing all code blocks according to the width, height and position of all code blocks in the code block container, adjusting the width of the actual area to be the sum of the width of the boundary box and the width of a preset left margin and the width of a preset right margin, and adjusting the height of the actual area to be the sum of the height of the boundary box and the height of a preset upper margin and the height of a preset lower margin.
With reference to a possible implementation manner of the embodiment of the third aspect, adjusting a position of an intermediate component in the code chunk container includes: and dynamically adjusting the position of a middle component in the code block container according to the deviation of the upper left vertex of the boundary box and the content starting point of the actual area.
With reference to a possible implementation manner of the embodiment of the third aspect, dynamically adjusting a position of an intermediate component in the code block container according to a deviation between an upper left vertex of the bounding box and a content starting point of the actual region includes: after the adjustment of the size of the actual area is detected, the position of the middle component is adjusted, so that the top left vertex of the boundary box coincides with the content starting point of the container component.
Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by the practice of the embodiments of the application. The objectives and other advantages of the application may be realized and attained by the structure particularly pointed out in the written description and drawings.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts. The foregoing and other objects, features and advantages of the application will be apparent from the accompanying drawings. Like reference numerals refer to like parts throughout the drawings. The drawings are not necessarily to scale, emphasis instead being placed upon illustrating the subject matter of the present application.
Fig. 1 is a schematic view of visibility of a code block in a conventional ScrollView code block container.
Fig. 2 is a schematic diagram illustrating an infinitely expandable code chunk container provided in an embodiment of the present application.
Fig. 3 illustrates a relationship diagram of a scroll view component, a container component, an intermediate component, and a code chunk in a code chunk container provided by an embodiment of the present application.
Fig. 4 shows a schematic diagram of adding an intermediate component to a container component according to an embodiment of the present application.
Fig. 5 shows a schematic diagram of adding a code block under an intermediate component according to an embodiment of the present application.
Fig. 6 shows a schematic diagram of determining an overall bounding box of a code block according to an embodiment of the present application.
Fig. 7 shows a schematic diagram of the principle of adjusting the width and height of the container assembly provided by the embodiment of the present application.
Fig. 8 is a schematic diagram illustrating a principle that the code chunk container supports expanding the code chunks to the left and the upper by adjusting the middle component according to an embodiment of the present application.
Fig. 9 shows a schematic diagram of the principle provided by the embodiment of the present application, in which the intermediate component is adjusted so that blank areas can be cut out.
Fig. 10 shows an actual effect diagram of a code block container provided by an embodiment of the present application.
Fig. 11 is a schematic diagram illustrating a code block list displayed by clicking a "motion" tab according to an embodiment of the present application.
Fig. 12 shows a schematic diagram after a code chunk is newly added to a code chunk container according to an embodiment of the present application.
Fig. 13 shows a schematic diagram after two code chunks are newly added to a code chunk container according to an embodiment of the present application.
Fig. 14 shows a schematic diagram after three code chunks are newly added to a code chunk container according to an embodiment of the present application.
Fig. 15 shows a schematic diagram after moving a code block on the basis of fig. 14.
Fig. 16 shows a schematic diagram after editing a code block on the basis of fig. 14.
Fig. 17 shows a block diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, relational terms such as "first," "second," and the like may be used solely in the description herein to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
Further, the term "and/or" in the present application is only one kind of association relationship describing the associated object, and means that three kinds of relationships may exist, for example, a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone.
In view of the existing code block container such as ScrollView, only code blocks with positive x and y coordinates in ScrollView can be displayed, only the code blocks are supported to be expanded to the right and downwards in the code block container, and the code blocks cannot be expanded to the left and upwards, which brings great inconvenience to a user in providing a free code block editing environment. Therefore, the code block container capable of being infinitely expanded is provided in the embodiments of the present application, the actual content area of the code block container can be infinitely expanded in 4 directions of up, down, left, and right, and after a user operation action occurs, in response, the code block container can dynamically adjust the size of the actual area according to the width, height, and position of all code blocks inside the code block container, so that the code block container can realize the infinite expansion of the actual content area of the code block container as if no boundary is encountered in any direction, and the schematic diagram of the code block container is shown in fig. 2.
The code block container is realized based on a Unity UIToolkit component, and a brand-new UITookit container component (code block container) is designed by using a self-defined UI component function provided by the Unity UITookit. The code tile container includes a scroll view component (ScrollView), a container component, and an intermediate component. Wherein the container component and the middle component are subclasses of visual element components in the Unity UIToolkit component. The container component is a child node of the rolling view component, the intermediate component is a child node of the container component, and the intermediate component is used as a parent node of the code block. The relationship diagram of the scroll view component, the container component, the middle component and the code block is shown in FIG. 3. The intermediate Node in fig. 3 is an intermediate component, and Node1, Node2, Node3 are code blocks under the intermediate component. The coordinate system origin Os of the ScrollView in FIG. 3 coincides with the coordinate system origin O of the container assembly, and O' (x, y) is the coordinate system of the intermediate assembly.
In an embodiment, a visual element is added to a container component of a visual element inherited from Unity UITookit as an intermediate node, all code blocks are added to the intermediate node, and then the container component is used as a child node of the ScrollView, that is, the container component is added to the ScrollView, so that a complete code block container is formed. Or, a container component inheriting the visual element of Unity UITookit is added in the ScrollView as a child node, then a visual element is added under the child node as an intermediate node, and the code blocks are all added under the intermediate node, so that a complete code block container is formed.
The scroll view component (ScrollView) is configured to provide a visual area with a scroll function, and the position of the actual area in the visual area, that is, the actual area of the code tile container displayed in the visual area, may be adjusted by receiving the operation event. The visual area may carry a scroll bar that can be used to adjust the physical area of the code tile container presented in the visual area by sliding the scroll bar or dragging a slide over the visual area of the scroll view. The position of the scroll bar indicates the position of the real area presented in the visual area, so that the part of the real area of the code tile container presented in the visual area can be adjusted by sliding the scroll bar. Besides the two sliding modes, the adjustment of the actual area size can be realized through a mouse wheel and other modes.
The operation event may be an event of sliding a scroll bar, an event of dragging a slide on a visual area of a scroll view, and an event of sliding a cursor on the visual area of the scroll view through a mouse wheel. When dragging and sliding on the visual area of the scroll view, the mouse can be used for dragging and sliding, and the touch pad can also be used for dragging and sliding.
The size of the visual area is fixed, the size of the actual area is larger than or equal to the size of the visual area (the scroll bar may not be displayed when the actual area is equal), the length of the scroll bar represents the ratio of the visual area to the actual area, the larger the actual area, the shorter the length of the scroll bar, and the smaller the actual area, the longer the length of the scroll bar.
The container component serves as a child node of the rolling view component on the view organizational structure, and the container component is used to determine the actual region of the code chunk container. When at least one of adding a code chunk, removing a code chunk, editing a code chunk, and moving a code chunk is received at the code chunk container, the container component responds and dynamically adjusts the size of the code chunk container real area, e.g., the container component dynamically adjusts the size of the code chunk container real area according to a bounding box containing all code chunks currently in use.
It should be noted that, while the container component dynamically adjusts the actual area of the code chunk container, the scroll view component also correspondingly adjusts the ratio between the visible area and the actual area, that is, adjusts the length of the corresponding scroll bar.
In an alternative embodiment, when determining the actual region of the code chunk container, the container component may determine a Bounding Box (Bounding Box) containing all code chunks according to the width, height and position of each code chunk in the code chunk container, and adjust the actual region according to the Bounding Box, where the actual region contains the Bounding Box.
In one embodiment, when the container assembly adjusts the actual region according to the bounding box, the width of the adjusted actual region is the sum of the width of the bounding box and the width of the preset left margin and the width of the preset right margin, that is, the width of the actual region is the width of the bounding box + the width of the preset left margin + the width of the preset right margin; and adjusting the height of the actual area to be the sum of the height of the bounding box and the height of the preset upper margin and the height of the preset lower margin, namely the height of the actual area is equal to the height of the bounding box plus the height of the preset upper margin plus the height of the preset lower margin. It should be noted that, when the container assembly adjusts the actual area according to the bounding box, the method is not limited to the above-mentioned manner, for example, the width of the actual area is adjusted to be the sum of the width of the bounding box and the width of the preset left margin or the width of the preset right margin, and the height of the actual area is adjusted to be the sum of the height of the bounding box and the height of the preset upper margin or the height of the preset lower margin. The code blocks can not coincide with the boundary of the actual area when being displayed in the actual area through the upper, lower, left and right margin areas with certain preset widths, and further can not coincide with the boundary of the visual area, so that the code blocks are more attractive.
In an alternative embodiment, the width of the preset left margin is equal to the width of the preset right margin, and the height of the preset upper margin is equal to the height of the preset lower margin. As a preferred embodiment, the width of the preset left margin and the width of the preset right margin are both the width of the visible area; the height of the upper margin and the height of the lower margin are both the height of the visible area, so that when the horizontal scroll bar is positioned at the leftmost end and the vertical scroll bar is positioned at the topmost end, the coordinate system origin Os of the ScrollView and the coordinate system origin O of the container assembly coincide, the width of the ScrollView (the width of the visible area) is half of the width of the container assembly (the width of the actual area), and the height of the ScrollView (the height of the visible area) is half of the height of the container assembly (the height of the actual area). When no code block is placed in the code block container, the width of the actual region is equal to the width of the whole bounding box + the width of the preset left margin + the width of the preset right margin, and is equal to twice the width of the visible region; the height of the actual area is equal to the height of the upper margin + the height of the lower margin, and is equal to twice the height of the visible area.
The intermediate component is a child node of the container component, a parent node of the code block, in view organization. The method comprises the steps of setting an attribute mode (overflow) of a middle assembly as a visible mode (visible), enabling the position of a code block to be still displayed even outside the display range of the middle assembly, wherein the display range of the middle assembly is a rectangular area with the width and the height of 0. When at least one operation of adding a code block, removing the code block, editing the code block and moving the code block is received in the code block container, in addition to the fact that the container component dynamically adjusts the actual area of the code block container, the intermediate component also adjusts the position of the code block relative to the container component by adjusting the position of the intermediate component, so that the code block can be displayed in the actual area determined by the container component, and therefore all the code blocks can be displayed in the actual area determined by the container component.
When the intermediate assembly adjusts its position, the positions of all the code blocks therebelow are integrally adjusted, and when the intermediate assembly moves, the relative positions of the code blocks are kept unchanged.
And the middle component is used for dynamically adjusting the position of the middle component according to the deviation between the upper left vertex of the boundary box containing all the code blocks in the code block container and the content starting point of the actual area when the position of the middle component is adjusted. In other words, the middle component makes all the code blocks displayable in the actual area determined by the container component by adjusting its position such that the deviation between the upper left vertex of the bounding box and the content start point of the actual area is within a preset range. In an alternative embodiment, the position of the bounding box may be adjusted so that the upper left vertex of the bounding box coincides with (aligns with) the content starting point of the actual region, and at this time, the deviation between the upper left vertex of the bounding box and the content starting point of the actual region is zero.
When the origin of the intermediate Node coincides with the origin of the container component, if the coordinates of some code blocks are negative values, for example, the coordinates of the code block Node1 are negative values, at this time, Node1 crosses the boundary of the actual region of the code block or is outside the actual region of the code block, since the outside of the boundary of the container component shows that the mode attribute is the clipping mode, at this time, the code block Node1 that exceeds the actual region determined by the container component will be partially visible or invisible, and by adjusting the coordinates of the intermediate Node so that the coordinates of the code block relative to the container component are positive values, the Node1 can be displayed in the actual region of the container component, so that even if the coordinates of the code block in the coordinate system of the intermediate Node (i.e., the coordinate system of the code block in the container coordinate system of the code block) are negative values, the Node1 can be displayed.
When one code block is dragged to move towards the first direction of the visible area, the container component can firstly adjust the size of the actual area according to a new boundary box containing all the code blocks, and then the middle component can move towards the second direction of the visible area, so that the deviation between the top left vertex of the new boundary box and the content starting point of the actual area is within a preset range, the code block can be displayed in the actual area determined by the container component, and the directions of the first direction and the second direction are opposite. For example, when the code block is dragged to move towards the upper left of the visible area, the container component may first adjust the size of the actual area according to a new bounding box containing all the code blocks, and then the middle component may move towards the lower right of the visible area, so that the deviation between the upper left top point of the new bounding box and the content start point of the actual area is within a preset range, so that the code block is displayed in the actual area of the container component, and the actual area of the code block container is supported to be capable of expanding towards the upper left direction infinitely. Or, when the container component drags to the code block and moves towards the lower right of the visible area, the container component firstly adjusts the size of the actual area according to a new boundary box containing all the code blocks, and then the middle component moves towards the upper left of the visible area, so that the deviation between the upper left top point of the new boundary box and the content starting point of the actual area is within a preset range, the code block is displayed in the actual area of the container component, and the support code block can expand towards the lower right direction in the code block container infinitely.
If the code blocks are grouped together and the coordinates are far from the origin of coordinates, a large amount of blank space exists between the code blocks and the origin of coordinates, which results in a large range of real space and contains a large amount of blank space if a conventional code block container component (ScrollView) is used. Thus, when the concentrated code blocks need to be displayed in the visible area of the code block container, the code blocks need to be dragged and slid in the visible area of the code block container for a long time, and the positions of the code blocks are not easy to locate. In order to solve the problem, the calculation mode of redefining the size of the actual region is to add a reserved blank to a boundary box of all code blocks; and the intermediate node is used as a father node of the code block, namely, the local coordinate system of the intermediate node is used as the coordinate system of the code block container; and the out-of-bounds display mode attribute (overflow) of the container component is set to clip mode (clip), and the out-of-bounds display mode attribute (overflow) of the middle node is set to visible mode (visible). Therefore, when the code blocks are concentrated together and the distance of the coordinates relative to the origin of coordinates is far away, the size of the actual area of the code block container can be made to be close to the size of the range of the code block concentration, the code blocks are made to be displayed in the content area in the actual area determined by the container assembly by moving the position of the middle node, the code blocks are cut outside the boundary of the container assembly, and then a large amount of blank between the code blocks and the origin of coordinates is cut off, so that a user can quickly locate the position of the code block concentration, and the problem is solved.
For ease of understanding, the principles of the code block container shown in the present application will be described below with reference to examples. When creating the code block container, in an embodiment, a visual element (intermediate element) may be added to a container component of a visual element inherited from Unity UITookit as an intermediate node, an overflow mode of the container component is set to clip (clip), and an overflow mode of the intermediate node is set to visible (visible), which is schematically illustrated in fig. 4. And then, adding the container component as a child node of the ScrollView into the ScrollView so as to form a complete code block container.
When placing code blocks in the code block container, the code blocks are all added under this intermediate Node, for example, three code blocks, Node1, Node2, Node3 are placed in the code block container, and the schematic diagram is shown in fig. 5.
After the code blocks are placed, the container component determines an overall Bounding Box (Bounding Box) containing all the code blocks according to the width and height of each code block in the code block container, and a schematic diagram of the Bounding Box is shown in fig. 6. The rectangular area surrounded by the P1 and the P2 is a Bounding Box of the code blocks Node1, Node2 and Node 3. Then, the container assembly adjusts the width and height of itself, that is, adjusts the width and height of the actual region, for example, the width of the actual region is the sum of the width of the whole bounding box and the width of the preset left margin and the width of the preset right margin, and the height of the actual region is the sum of the height of the whole bounding box and the height of the preset upper margin and the height of the preset lower margin, which is schematically shown in fig. 7. Meanwhile, the middle component will adjust its position to make the point of the upper left vertex of the whole bounding box (e.g. P1) coincide with the content starting point of the container component (e.g. P3).
When the origin of the intermediate Node coincides with the origin of the container component, if the coordinates (relative to the container component) of some code blocks are negative, the position of the intermediate Node is adjusted so that the coordinates of the code blocks relative to the container component are positive, so that the code blocks can be displayed in the display range of the container component, and thus even if the coordinates of the code blocks in the coordinate system of the intermediate Node (i.e. the code block container coordinate system) are negative, the code blocks can be displayed, so that the code blocks can be expanded to the left and upwards infinitely, which is schematically shown in fig. 8, where Node0 in fig. 8 is the container component. By adjusting the position of the intermediate node, all the code blocks are displayed in the actual area of the container component, that is, by adjusting the position of the intermediate node, the coordinates of all the code blocks relative to the container component are positive values, so that the code blocks can be supported to expand to the left and upwards infinitely.
When code blocks are concentrated in the lower right corner and far from the origin O (0,0), more blank areas are left in the upper left corner, the size of the actual area is determined again by the container component, the middle Node is used as a parent Node of the code block, the external display mode attribute (overflow) of the container component is set to be a clipping mode (clip), the external display mode attribute (overflow) of the middle component is set to be a visible mode (visible), the position of the middle component is adjusted, so that the middle component is located outside the actual area of the container component, and all the code blocks in the code block container are located in the content area of the actual area of the container component, so that a large number of redundant blank areas between the code blocks and the coordinate origin can be clipped, the schematic diagram is shown in fig. 9, and the Node0 in fig. 9 is the container component.
The above-described principle will be explained below with reference to specific examples. Fig. 10 is an actual effect diagram of a code block container, where by dragging and sliding (sliding in 4 directions, up, down, left, and right) in a visible area of the code block container, any part of the actual area of the code block container can be viewed, and in addition, a scroll bar can be dragged to slide. The left labels such as "motion", "appearance", "sound", "event", "control", "detection", "operation", and "variable" are all code block labels, and by clicking a certain label, a code block list under the label is displayed, for example, by clicking the "motion" label, the schematic diagram shown in fig. 11 is displayed, and by dragging a code block from the code block list into a code block container, the code block can be placed in the code block container.
When a code block is added, moved, removed or edited, the code block container dynamically adjusts the size of the actual region (which can be presented through the length and position changes of the scroll bar), and cuts off redundant blank, so that a user can quickly locate the remaining code blocks in the code block container. Fig. 12 to 14 are examples of adding a code block in a code block container, and it can be seen that when the code block is added, the actual area of the code block container is changed by changing the length and position of the scroll bar between fig. 12, 13, and 14. Conversely, after removing the code blocks (in the order of fig. 14-12) from the code block container, the code block container also dynamically adjusts the size of the real area, and from the length and position of the scroll bar between fig. 12, 13, and 14, it can be seen that the real area of the code block container changes after removing the code blocks.
After the code block is moved, the size of the actual area is also dynamically adjusted by the code block container, and it can be clearly seen that, in combination with the length and position changes of the scroll bar shown in fig. 14 and 15, the actual area of the code block container changes after the code block is moved. When editing the code block, the code block container also dynamically adjusts the size of the actual area, for example, in combination with the length and position changes of the scroll bar in fig. 14 and 16, it is obvious that when editing the code block, the actual area of the code block container changes.
Based on the same inventive concept, the embodiment of the present application further provides a visual programming platform, where the visual programming platform includes the code chunk container described above, and the code chunk container is a component of the visual programming platform. The visual programming platform may be a Unity technology stack based visual programming platform.
The implementation principle and the generated technical effect of the visual programming platform provided by the embodiment of the present application are the same as those of the code block container embodiment, and for brief description, reference may be made to corresponding contents in the code block container embodiment where no mention is made in part of the visual programming platform embodiment.
Based on the same inventive concept, an embodiment of the present application further provides a visual programming method, which is applied to an electronic device including the visual programming platform described above, where the method includes: acquiring configuration operation of a user for a code block in a code block container of the visual programming platform, wherein the configuration operation comprises at least one operation of adding the code block, removing the code block, editing the code block and moving the code block; in response to the configuration operation, the size of the actual area of the container component in the code block container is adjusted, and the position of the intermediate component in the code block container is adjusted to adjust the position of the code block in the code block container relative to the container component in the code block container, so that the code block is displayed in the actual area determined by the container component.
Under one embodiment, adjusting the actual region size of container components in a code chunk container comprises: determining a boundary box containing all code blocks according to the width, height and position of each code block in the code block container, adjusting the width of the actual area to be the sum of the width of the boundary box and the width of a preset left margin and the width of a preset right margin, and adjusting the height of the actual area to be the sum of the height of the boundary box and the height of a preset upper margin and the height of a preset lower margin.
Under one embodiment, the method further comprises: and after the size adjustment of the actual area is detected, adjusting the length of a scroll bar of the code block container according to the size of the actual area, wherein the length of the scroll bar represents the proportion of a visible area and the actual area of the code block container.
Under one embodiment, adjusting the position of an intermediate component in the code patch container includes: and dynamically adjusting the position of a middle component in the code block container according to the deviation of the upper left vertex of the boundary box and the content starting point of the actual area.
Under one embodiment, dynamically adjusting the position of the middle component in the code block container according to the deviation between the top-left vertex of the bounding box and the content starting point of the real area includes: after the adjustment of the size of the actual area is detected, the position of the middle component is adjusted, so that the top left vertex of the boundary box coincides with the content starting point of the container component.
The implementation principle and the generated technical effect of the visual programming method provided by the embodiment of the present application are the same as those of the foregoing code block container embodiment, and for a brief description, where no part of the method embodiment is mentioned, reference may be made to corresponding contents in the foregoing code block container embodiment.
As shown in fig. 17, fig. 17 is a block diagram illustrating a structure of an electronic device 200 according to an embodiment of the present application. The electronic device 200 includes: a transceiver 210, a memory 220, a communication bus 230, and a processor 240. The electronic device is provided with the visual programming platform, and a user can program codes on the visual programming platform.
The elements of the transceiver 210, the memory 220, and the processor 240 are electrically connected to each other directly or indirectly to achieve data transmission or interaction. For example, the components may be electrically coupled to each other via one or more communication buses 230 or signal lines. The transceiver 210 is used for transceiving data. The memory 220 is used for storing a computer program including at least one software functional module which may be stored in the memory 220 in the form of software or firmware (firmware) or solidified in an Operating System (OS) of the electronic device 200. The processor 240 is configured to execute the executable modules or computer programs stored in the memory 220. For example, the processor 240 is configured to obtain a configuration operation of a user for a code chunk in a code chunk container of the visual programming platform, where the configuration operation includes at least one of adding a code chunk, removing a code chunk, editing a code chunk, and moving a code chunk; in response to the configuration operation, adjusting a size of the actual region determined by the container component in the code chunk container, and adjusting a position of an intermediate component in the code chunk container to adjust a position of a code chunk in the code chunk container relative to the container component in the code chunk container, such that the code chunk is displayed in the actual region determined by the container component.
The Memory 220 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like.
The processor 240 may be an integrated circuit chip having signal processing capabilities. The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor 240 may be any conventional processor or the like.
The electronic device 200 includes, but is not limited to, a computer.
The present embodiment also provides a non-volatile computer-readable storage medium (hereinafter, referred to as a storage medium), where the storage medium stores a computer program, and the computer program is executed by a computer such as the electronic device 200 described above to perform the above-described visual programming method.
It should be noted that, in the present specification, the embodiments are all described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments may be referred to each other.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented in other ways. The apparatus embodiments described above are merely illustrative, and for example, the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a notebook computer, a server, or an electronic device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
The above description is only for the specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A code tile container, comprising:
the scroll view component is used for providing a visual area with a scroll function, and correspondingly adjusting the actual area of the code block container displayed in the visual area by receiving an operation event;
a container component to determine an actual region of the code chunk container, the container component to be a child node of the rolling view component;
and the intermediate component is used as a parent node of the code block and as a child node of the container component, and adjusts the position of the code block relative to the container component by adjusting the position of the intermediate component, so that the code block can be displayed in the actual area determined by the container component.
2. The code chunk container of claim 1, wherein the container component dynamically resizes the code chunk container real area according to a bounding box containing all code chunks currently when the code chunk container receives at least one of a new code chunk, a removed code chunk, an edited code chunk, and a moved code chunk.
3. The code chunk container of claim 2, wherein the container component is configured to determine a bounding box containing all code chunks according to the width, height, and location of all code chunks in the code chunk container, and adjust the actual region according to the bounding box.
4. The code chunk container according to claim 3, wherein the container component is configured to, when the actual region is adjusted according to the bounding box, adjust the width of the actual region to be the sum of the width of the bounding box and the width of a preset left margin and the width of a preset right margin, and adjust the height of the actual region to be the sum of the height of the bounding box and the height of a preset upper margin and the height of a preset lower margin.
5. The code chunk container of claim 4, wherein when the code chunk container receives at least one of a new code chunk, a removed code chunk, an edited code chunk, and a moved code chunk, the intermediate component dynamically adjusts its position according to a deviation of an upper left vertex of the bounding box and a starting point of content of the real region such that all code chunks in the code chunk container are displayed in the real region determined by the container component.
6. The code patch container according to claim 5, wherein the middle component causes the top left vertex of the bounding box to coincide with the content start point of the container component by adjusting its position.
7. The code chunk container of claim 1 wherein the out-of-bounds display mode property of the middle component is set to a visible mode.
8. The code patch container according to any one of claims 1-7, wherein an out of bounds display mode attribute of the container component is set to a clipping mode such that any content beyond the actual area of the code patch container is clipped.
9. A visual programming platform, comprising: the code patch container of any one of claims 1-8, the code patch container being a component of the visual programming platform.
10. A visual programming method applied to an electronic device comprising the visual programming platform according to claim 9, the method comprising:
acquiring configuration operation of a user for a code block in a code block container of the visual programming platform, wherein the configuration operation comprises at least one operation of adding the code block, removing the code block, editing the code block and moving the code block;
in response to the configuration operation, adjusting a size of the actual region determined by the container component in the code chunk container, adjusting a position of an intermediate component in the code chunk container to adjust a position of a code chunk in the code chunk container relative to the container component in the code chunk container, causing the code chunk to be displayed in the actual region determined by the container component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111227630.9A CN113867711A (en) | 2021-10-21 | 2021-10-21 | Code block container, visual programming platform and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111227630.9A CN113867711A (en) | 2021-10-21 | 2021-10-21 | Code block container, visual programming platform and method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113867711A true CN113867711A (en) | 2021-12-31 |
Family
ID=78996992
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111227630.9A Pending CN113867711A (en) | 2021-10-21 | 2021-10-21 | Code block container, visual programming platform and method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113867711A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116009849A (en) * | 2023-03-20 | 2023-04-25 | 网易（杭州）网络有限公司 | Graphic interface display method and device based on visual programming platform |
-
2021
- 2021-10-21 CN CN202111227630.9A patent/CN113867711A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116009849A (en) * | 2023-03-20 | 2023-04-25 | 网易（杭州）网络有限公司 | Graphic interface display method and device based on visual programming platform |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10037593B2 (en) | Dynamic image presentation | |
| CN107015751B (en) | Optimal display and scaling of objects and text in a document | |
| US8239765B2 (en) | Displaying stacked bar charts in a limited display area | |
| US5561444A (en) | Method and apparatus for providing visual feedback during manipulation of text on a computer screen | |
| KR101031974B1 (en) | Scrollable and re-sizeable formula bar | |
| US7536410B2 (en) | Dynamic multi-dimensional scrolling | |
| US10339209B2 (en) | Webpage display method and device | |
| US9792268B2 (en) | Zoomable web-based wall with natural user interface | |
| CN105739843A (en) | Information display method and apparatus as well as electronic device | |
| WO2013044735A1 (en) | Browser and method for browsing web page | |
| JP2017504877A (en) | Method and apparatus for click object enlargement based on floating touch | |
| US20140281928A1 (en) | Content-driven layout | |
| CN110647272A (en) | Display control method and device | |
| US11640283B2 (en) | Control bar for element activation | |
| CN107977342B (en) | Document comparison method and device | |
| CN113867711A (en) | Code block container, visual programming platform and method | |
| CN107256116B (en) | Page switching processing method and device, user terminal and readable storage medium | |
| US20230123119A1 (en) | Terminal, control method therefor, and recording medium in which program for implementing method is recorded | |
| JP5959064B2 (en) | Computer, method and program for displaying document file | |
| CN113448478A (en) | Control method and device for scroll bar, electronic equipment and medium | |
| CN107025038B (en) | List operation method and device | |
| CN112578963A (en) | Menu processing method and device, storage medium and electronic equipment | |
| CN112817507B (en) | Control adaptation method, device, electronic equipment and storage medium | |
| CN113835610B (en) | Page display method and device for terminal application | |
| CN116774887A (en) | User interface display method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |