Adaptable Graphical User Interface for Dashboard Software

Abstract

This description refers to a graphical user interface (GUI) for a colorimetry software product, a computer-implemented method for generating the GUI, and a system for performing the method.

Description

The present disclosure relates to a graphical user interface (GUI) for a dashboard software product, e.g., a colorimetry software product, a computer-implemented method for generating the GUI, and a system for performing the method. BACKGROUND OF THE INVENTION On automotive coating lines, it is important to achieve identical color for the paint on bodies and related parts. To ensure batch and production consistency, and to guarantee that color specifications and colorimetric property tolerances are met, software tools have been developed to support quality management of the production process. One example is the ColorCARE® software developed by BASF Coatings, specifically the ColorCARE® tool layer. The software enables continuous monitoring of color matching between car bodies and complementary parts, such as rear doors, mirrors, or door handles. The software combines instrument-based colorimetry with analytical methods and converts this statistical data into graphs and indicates deviations. The software must generate graphical user interfaces (GUIs) that fit within a visual display of the computing device on which it runs to present information to the application user. Depending on the specific application and the information the user must view, a multitude of different and varied data objects must be displayed. A computer-implemented method and a computer system must be provided that allows the user to configure a GUI design with maximum flexibility for maximum usability. EP 2 930 613 A1 describes methods, systems, and computer program products for generating user interface designs. A computer-implemented method includes dividing an available vertical space associated with a graphical user interface into a plurality of allowable vertical space allocations based on a priority of a plurality of data display fields, calculating, by a computer, slack after each data display field expands to fill an allowable vertical space allocation associated with the data display fields, allocating the slack among the plurality of data display fields, recalculating, by a computer, slack after allocating the slack among the plurality of data display fields, and completing the display of the plurality of data display elements in the graphical user interface. US 6 874 128 B1 describes a mouse-controlled splitter program and algorithm. A method for splitting a display window comprises dragging a cursor from a start point in the display window to an end point in the display window; and splitting the display window into QQfcQ ίη / 77Π7 / Ε / ΥΙΛΙ two separate split display windows, each of said separate split display windows having a newly formed border substantially aligned with a line that would pass through the start and end points. A scrollable list box is provided associated with each of the split display windows, each list box containing one or more display options for display in the associated window; and one of the display options is selected for each of the split display windows; and a display associated with the selected display option is displayed in each of the split display windows. WO 02 / 25420 A1 describes a view management system having a computer display that provides a hideable view bar with pane splitting controls and a list of open views. By selecting specific pane splitting controls, a user of the system can configure the display to show any number and arrangement of tiled views. By simply selecting one of the open views from the list appearing in the view bar, the user can assign that view to the currently focused panel. The contents of panel pairs can be easily exchanged by a click, drag, and drop sequence of operations using a cursor-control pointing device. QQ-bQ ίη / ΖΖΠΖ / Ε / ΥΙΛΙ SUMMARY OF THE INVENTION The present disclosure relates to computer-implemented methods, computer-readable media, and computer systems for generating graphical user interface designs. A computer-implemented method, a computer-readable medium storing computer-readable instructions, and a system are provided as defined in claims 1, 14, and 15. Other embodiments are set forth in the dependent claims. BRIEF DESCRIPTION OF THE DRAWINGS Figure 1a is an example screenshot of a GUI generated using the method of the present disclosure; Figure 1 b is another example screenshot of a GUI generated with the method of the present disclosure; Figure 2 is a flowchart illustrating some of the steps in the method for generating user interface designs of the present disclosure. DETAILED DESCRIPTION The present disclosure provides a computer-implemented method for generating a graphical user interface (GUI) for a dashboard software product. The method comprises the following steps: a) receive input by selecting an available (sub)area on a screen associated with the GUI; b) receive a binary input consisting of a selection of whether the (sub)area should be divided horizontally or vertically; c) depending on the selection made in step b), divide the (sub)area horizontally or vertically into two sub-areas with a predefined area ratio; d) repeat steps a) to c) until the desired grid is obtained; e) assign at least one data object provided by the dashboard software to at least one subarea of ​​the grid obtained in step d); f) display the data objects in the assigned subareas.In the context of the present disclosure, a dashboard software product is a software program that needs to display and control a multitude of different and varied data objects. Examples include trading software applications, e.g., for trading stocks, bonds, options, currencies, commodities, etc.; healthcare software applications for monitoring a plurality of a patient's vital parameters such as pulse rate, blood pressure, respiratory rate, oxygen saturation, heart rate, brain waves, etc.; and tools for testing and / or monitoring machines, e.g., motors, that monitor and / or control output parameters, pressure, liquid flow, gas flow, voltages, currents, power, torque, temperature, rotational speed, etc.In a particular embodiment, the instruction board software is a colorimetry software product. In one embodiment of the method, input is received from a user via an input device, such as a keyboard, a computer mouse, a trackball, or a touch screen. The user selects an available (sub)area on a display associated with the GUI and whether the (sub)area will be divided horizontally or vertically. In one embodiment of the method, the (sub)area in step a) is selected by navigating to the (sub)area with a cursor. In a particular embodiment using a computer mouse or trackball as an input device, a cursor is moved within the (sub)area to select it. In another particular embodiment using a touchscreen as an input device, the (sub)area in step a) is selected by touching the touchscreen in the respective (sub)area. In a further embodiment, shortcuts may be used to navigate to the respective (sub)area. In step b) of the method, a binary input is received. The binary input consists of a selection of whether the (sub)area is to be divided horizontally or vertically. In other words, the binary input is a single piece of information that can only take one of two expressions: one meaning horizontal division, the other vertical division. The binary input does not include information about the position at which the (sub)area is to be divided. In other words, the binary input does not contain information about the exact position of the division. In one embodiment of the method, the selection in step b) is performed by navigating a cursor in the (sub)area as described above and generating a first predefined binary input for selecting the horizontal division of the (sub)area, or a second predefined binary input for QQfcQ Ln / Zznz / E / YIAI select the vertical division of the (sub)area. The predefined binary input is a programmed binary input, such as a mouse click, a touch screen gesture, a shortcut, or a combination thereof. In one example, the selection in step b) is performed by navigating the cursor in the (sub)area using a computer mouse (or a trackball) and performing a left mouse click to select the horizontal division of the (sub)area or a right mouse click to select the vertical division of the (sub)area. In another example, the selection in step b) is performed by navigating the cursor in the (sub)area using a computer mouse (or a trackball) and performing a left mouse click to select the horizontal division of the (sub)area or a right mouse click to select the vertical division of the (sub)area. In step c), the (sub)area is divided into two sub-areas with a predefined area ratio. The predefined area ratio can be any x:y ratio with 0 <x<1,0<y< 1 y x+y=1. En una forma de realización particular, la relación predefinida es 0,5:0,5, es decir, las dos subáreas obtenidas por la división son proporcionales. Steps a) through c) are repeated until a desired GUI grid is obtained. This allows a flexible GUI to be generated using a repetitive algorithm. This algorithm allows the user to divide the GUI vertically and / or horizontally as desired, making it possible to divide a display area into an arbitrarily grouped number of subareas and place arbitrary subwindows (e.g., graphs, tables, etc.) within these subareas. A click inserts a subarea, which in turn offers the possibility of placing two new subareas, and so on. As the user continues clicking (left / right), more subareas are created. The final grid is composed of a plurality of rectangular subareas. In one embodiment of the method, steps a) through c) can be undone or redone, as long as no data object has been assigned to the (sub)area. Undo or redo can be triggered by any predefined binary input (= back or forward), such as via mouse, touch, shortcut. In one embodiment, steps a) through c) can be undone or redone by scrolling on a mouse wheel of a computer mouse. This history function keeps track of the selections made by a user, e.g., left mouse clicks and right mouse clicks, and allows the user to undo any selection they are not satisfied with by scrolling back on the mouse wheel. If the user has gone too far back in the selection history, the steps can be redone by scrolling forward on the mouse wheel.However, once the user has assigned a data object to a (sub)area, the history function is no longer available; previous changes to the grid cannot be undone by scrolling the mouse wheel. This is because the grid generation is complete. After finalizing the grid, it is only possible to assign data object type(s) and / or change the area relationship. The GUI grid is intended to be as flexible as possible, and its generation requires minimal user input; the only information required is: start, horizontal / vertical split, and end. QQ+tQ ίη / ΖΖΩΖ / Ε / ΥΙΛΙ In one embodiment of the method, the boundaries of each subarea of ​​the grid obtained in step d) can be moved to modify the grid, i.e., the subareas of the (finished) grid are modifiable in width and length. In a particular embodiment, a boundary of a subarea is moved using a computer mouse (or a trackball) by pointing and clicking on the boundary to select it and then dragging the cursor to the desired position. After obtaining the desired grid in step d), the data object type(s) provided by the instruction board software are assigned to the subarea(s) of the grid obtained in step d). The data object types may be of the same or different data object types. More than one data object type may be assigned to a subarea. Furthermore, the same data object type may be assigned to more than one subarea. In one embodiment, at least one data object is assigned to each of the subareas of the grid obtained in step d). In another embodiment, each subarea of ​​the resulting grid is assigned at least one data object type provided by the dashboard software. Once the grid generation is complete, all subareas can be used to place data object types. Each subarea has a two-way information mechanism (having n+1 members in its chain, where n is the depth of the respective subarea) that allows the developer to aggregate all information about all subareas in one place and, on the other hand, send information to each of the subareas from any desired location. In one embodiment, an input button is provided in each subarea of ​​the grid for selecting the at least one data object type to be assigned and displayed in the respective subarea. The same data object type can be assigned and displayed in more than one subarea.Once a data object type has been assigned to a subarea, the subarea contains an instance of the respective assigned data object type. This allows you to assign data object types of the same type but with different content, or data object types with the same content, to the same or different subareas. In one embodiment of the method, the data object types are selected from the group consisting of numbers, text, symbols, tables, diagrams, and images. In a further embodiment, the data objects represent measured data obtained by the instrument panel software, for example, a colorimetry software product. In one embodiment of the method, an assigned data object can be freely moved from one subarea to another subarea, for example, by drag and drop. In a further embodiment, where more than one data object is assigned to a single subarea, the order of the data objects displayed in the respective subarea can be modified at will, for example, by a drag and drop mechanism, which moves the respective data object to a different position in the list of data objects assigned to the respective subarea. In one embodiment of the method, the finished grid is storable, i.e., it can be transferred to another GUI or reloaded. To this end, the input used to generate the grid is stored in a data storage medium and can be retrieved upon reloading the grid. The input used to generate the grid can be reduced by eliminating unnecessary inputs, such as QQfcQ ίΠ / ΖΖηΖ / Ε / ΥΙΛΙ redundant entries made during grid generation, in order to limit the number of entries that must be stored to an optimized minimum. This allows the amount of data that must be stored to transfer or reload the finished grid to be minimized. In another embodiment of the method, the finished grid is persistent. In one embodiment of the method it further involves g) group at least two of the data objects; and h) highlight the group of data objects with a common color and / or numbering. Grouping data objects allows you to display different data objects related to the same topic in different sub-areas. This provides a better overview of all the data available for a specific topic. In one embodiment, the GUI comprises, in addition to the grid of sub-areas, a quick-launch button bar that can be docked in an arbitrary position along an edge of the screen. In a particular embodiment, the quick-launch button bar can also float in and out of position when undocked. In another embodiment, buttons that activate different functions can be added and removed from the quick-launch button bar using drag-and-drop. In one embodiment, the GUI includes a standard header, a standard footer, and the two main components in terms of flexibility: a quick-launch button bar and a custom grid that includes views such as charts, tables, and reports (etc.). The grid addresses the need to design arbitrary rectangular sub-areas where different views can be positioned, and the size of the sub-areas is customizable. The present disclosure also provides a non-transitory, computer-readable medium that stores computer-readable instructions executable by a computer and operable to: a) receive an input by selecting an available (sub)area on a screen: b) receive a binary input defining that the (sub)area is to be split horizontally or defining that the (sub)area is to be split vertically; c) depending on the binary input received in step b), dividing the (sub)area horizontally or vertically into two sub-areas with a predefined area ratio; d) repeat steps a) to c) until receiving an input indicating that a desired grid has been obtained; e) receiving multiple inputs that map at least one data object present in a computer memory to at least one subarea of ​​the grid obtained in step d); f) display the data objects assigned in the subareas. Computer-readable media (transitory or non-transitory, as appropriate) suitable for storing computer program instructions and data include all forms of non-volatile memory, memory media and devices, including, for example, semiconductor memory devices, e.g., erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), and flash memory devices; magnetic disks, e.g., PObC ίη / ΖΖΠΖ / Ε / ΥΙΛΙ for example, internal hard drives or removable disks; magneto-optical disks; and CD-ROM, DVD+ / -R, DVD-RAM, and DVD-ROM disks. The memory may store a variety of objects or data, including caches, classes, frameworks, applications, backup data, jobs, web pages, web page templates, database tables, repositories that store business and / or dynamic information, as well as any other appropriate information, including parameters, variables, algorithms, instructions, rules, constraints, or references thereto. In addition, the memory may include any other appropriate data, such as logs, policies, security or access data, report files, among others. The processor and memory may be complemented or incorporated into special-purpose logic circuits. A computer program, computer program application, module, script, or code may be written in any form of programming language, including compiled or interpreted languages, or declarative or procedural languages, and may be implemented in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment. In one embodiment, the computer-executable instructions of the present disclosure are written in HTML, TS (typescript), and CSS (Cascading Style Sheets). They are particularly well-suited to driving Angular frameworks. A computer program may correspond, but need not correspond, to a file in a file system. A program may be stored in a portion of a file that contains other programs or data, for example, one or more scripts stored in a markup language document, in a single file dedicated to the program in question, or in multiple coordinated files, for example, files that store one or more modules, subprograms, or portions of code. A computer program may be implemented to run on one computer or on multiple computers located at a single site or distributed across multiple sites and interconnected by a communications network.While the program parts illustrated in the various figures are shown as individual modules that implement various features and functionality through various objects, methods, or other processes, programs may instead include a number of submodules, third-party services, components, libraries, etc. as appropriate. Instead, the features and functionality of various components may be combined into individual components as appropriate. The present description further provides a system comprising: 1) at least one input device; 2) at least one screen; 3) a memory; 4) at least one physical processor interoperably coupled with the at least one input device; the at least one display; and the memory, and configured to a) receive an input by selecting an available (sub)area on the screen; b) receive a binary input defining that the (sub)area is to be split horizontally or defining that the (sub)area is to be split vertically; QQfcQ ίη / ΖΖΠΖ / Ε / ΥΙΛΙ c) depending on the binary input received in step b), dividing the (sub)area horizontally or vertically into two sub-areas with a predefined area ratio; d) repeat steps a) to c) until receiving an input indicating that a desired grid has been obtained; e) receiving multiple inputs that map at least one data object present in memory to at least one subarea of ​​the grid obtained in step d); f) display the data objects assigned in the subareas. In one embodiment, the input device comprises a computer mouse or a trackball. In a further embodiment, the at least one input device comprises a computer keyboard. In one embodiment, the at least one display comprises a touch screen. The touch screen also acts as an input device. Suitable systems for executing the method of the present disclosure may be based on general-purpose or special-purpose microprocessors, both, or any other type of CPU. Typically, a CPU will receive instructions and data from a read-only memory (ROM) or a random-access memory (RAM), or both. Essential elements of the system are a CPU for performing or executing instructions and one or more memory devices for storing instructions and data. Generally, the system will also include, or be operatively coupled to, receiving data from or transferring data to, or both, one or more mass storage devices for storing data, for example, magnetic, magneto-optical, or optical disks. However, the system need not have such devices.In addition, the system can be integrated into another device, for example, a mobile phone, a personal digital assistant (PDA), a game console, or a portable storage device, for example, a universal serial bus (USB) flash drive, to name just a few. The disclosure generally describes computer-implemented methods, computer program products, and systems for generating user interface designs. The following description is presented to enable any person skilled in the art to make, use, and / or practice the disclosed subject matter, and is provided in the context of one or more particular implementations. Various modifications to the disclosed implementations will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other implementations and applications without departing from the scope of the disclosure. Therefore, the present disclosure is not intended to be limited to the implementations described and / or illustrated, but should be given the broadest scope consistent with the principles and features described in the present invention. Implementations of the subject matter and functional operations described in this specification may be implemented in digital electronic circuitry, in tangible computer programs or microprograms, in computer hardware, including the structures described in this specification and their structural equivalents, or in combinations of one or more thereof. Implementations of the subject matter described in this specification may be implemented as one or more computer programs, that is, one or more modules of computer program instructions encoded in a QQ+tQ ίη / ΖΖΠΖ / Ε / ΥΙΛΙ tangible, non-transitory computer storage medium for execution by, or for controlling the operation of, data processing apparatus. Alternatively or additionally, the program instructions may be encoded in an artificially generated propagated signal, e.g., a machine-generated electrical, optical, or electromagnetic signal that is generated to encode information for transmission to a suitable receiving apparatus for execution by a data processing apparatus. The computer storage medium may be a machine-readable storage device, a machine-readable storage substrate, a random-access or serial memory device, or a combination of one or more thereof. Details of one or more implementations of the subject matter of this specification are set forth in the accompanying drawings and description. Other features, aspects, and advantages of the subject matter will become apparent from the description, drawings, and claims. DETAILED DESCRIPTION OF THE DRAWINGS Figure 1a is a first example screenshot of a GUI 1100 generated using the method of the present disclosure. The GUI 100 comprises multiple sub-areas 110. Exactly one assigned data object is displayed in each sub-area 110. A link button 120 is provided in each sub-area 110 for selecting the data object to be displayed in the sub-area 110. In the embodiment shown in Figure 1a, an indicator 130 of the type of the assigned and displayed data object is provided in the sub-area 110. A quick-launch button bar 140 comprising multiple buttons 150 for activating different functions is positioned at the top edge of the GUI. In the example shown in Figure 1 a, the GUI comprises eight sub-areas arranged in four columns. While in this example, all sub-areas are proportional, this is not mandatory. Furthermore, the number of sub-areas may vary per row and / or column. Figure 1b is another example screenshot of a GUI 100 generated using the method of the present disclosure. The GUI 100 comprises multiple subareas 110. In the top left subarea, two assigned data objects are displayed. Also in the subarea directly below it, two assigned data objects are displayed, while only one assigned data object is displayed in each of the two right-hand subareas of the GUI 100. A link button 120 is provided in each subarea 110 for selecting the type(s) of data objects to be displayed in the subarea 110. An indicator 130 of the type of data object assigned and displayed is provided for each assigned data object in each of the subareas 110. In the example shown, the assigned data objects are grouped into two subgroups.Different colors (indicated by different textures in the drawing) and numbers are used to highlight the different subgroups in the GUI 100. The indicator 130 of each assigned data object displays a number 160 and is colored according to the subgroup to which the assigned data object belongs. Figure 2 is a flowchart 200 illustrating some of the steps in the method for generating graphical user interface (GUI) designs of the present disclosure. The flowchart 200 shows QQbQ ίη / ΖΖΠΖ / Ε / ΥΙΛΙ the repetitive part of the method. After the start 210, a check is made in step 220 whether or not there is an input indicating that the procedure has been completed. If such an input is detected, the process is terminated 260. Otherwise, upon detecting an additional input, for example, by clicking the mouse, a check is made 230, which option has been selected for the currently selected (sub)area. Upon detecting a right mouse click, the (sub)area is divided vertically 240, while upon detecting a left mouse click, the (sub)area is divided horizontally 250. In another embodiment not shown, the (sub)area is divided vertically 240 upon detecting a left mouse click, while the (sub)area is divided horizontally 250 upon detecting a right mouse click. The process then returns to step 220. LIST OF REFERENCE SIGNS 100 GUI 110 subarea 120 data object link button 130 data object type indicator 140 Quick Launch Button Bar 150 function button 160 subgroup number of the data object 200 flowchart 210 Home 220 Check the entry 230 Identify the entry 240 Divide (sub)area vertically 250 Divide (sub)area horizontally 260 Final

Claims

1. A computer-implemented method for generating a graphical user interface (100) (GUI) for a dashboard software program, characterized in that it comprises: a) receiving an input by selecting an available (sub)area (110) on a screen associated with the GUI (100); b) receiving a binary input consisting of a selection of whether the (sub)area (110) should be divided horizontally (250) or vertically (240); c) depending on the selection made in step b), dividing the (sub)area (110) horizontally (250) or vertically (240) into two sub-areas (110) with a predefined area ratio; d) repeating steps a) and ac) until a desired grid is obtained; e) assigning at least one data object type provided by the dashboard software program to at least one sub-area (110) of the grid obtained in step d); f) displaying the assigned data objects in the sub-areas (110). 2.The method of claim 1, characterized in that the (sub)area (110) in step a) is selected by navigating with a cursor in the (sub)area (110).

3. The method of claim 1 or 2, characterized in that the selection in step b) is made by navigating with a cursor in the (sub)area (110) using a computer mouse, and clicking with the left mouse button to select the horizontal division (250) of the (sub)area or clicking with the right mouse button to select the vertical division (240) of the (sub)area (110).

4. The method of claim 1 or 2, characterized in that the selection in step b) is made by navigating with a cursor in the (sub)area (110) using a computer mouse, and clicking the right mouse button to select the horizontal division (250) of the (sub)area or clicking the left mouse button to select the vertical division (240) of the (sub)area (110). 5.The method of any one of claims 1 to 4, characterized in that steps a) and ac) can be undone or redone, provided that no data object has been assigned to the (sub)area (110).

6. The method of any one of claims 1 to 5, characterized in that the data objects are selected from the group consisting of numbers, text, symbols, tables, diagrams, and images.

7. The method of any one of claims 1 to 6, characterized in that the data objects represent measured data obtained using the colorimetry software.

8. The method of any one of claims 1 to 7, characterized in that the boundaries of each subarea (110) of the grid obtained in step d) can be moved to modify the grid, wherein a boundary of a subarea (110) is moved using a computer mouse by pointing and clicking on the boundary to select it and then dragging the cursor to the desired position.

9. The method of any one of claims 1 to 8, characterized in that the grid is storable.

10. The method of any one of claims 1 to 9, characterized in that the GUI (100) comprises a quick launch button bar (120) that can be fixed in an arbitrary position on an edge of the screen.

11. The method of claim 10, characterized in that the quick launch button bar (120) can also float in and out of position when not fixed.

12. The method of claim 10 or 11, characterized in that the buttons (130) that activate different functions can be added to and removed from the quick launch button bar (120) by means of a drag-and-drop function.

13. The method of any one of claims 1 to 12, characterized in that it involves g) grouping at least two data objects; and h) highlighting the group of data objects with a common color and / or numbering.

14. A non-transient, computer-readable medium that stores computer-readable instructions executable by a computer and operable, characterized in that it is for: a) receiving an input selecting an available (sub)area (110) on a screen; b) receiving a binary input that defines that the (sub)area (110) is to be divided horizontally (250) or that defines that the (sub)area (110) is to be divided vertically (240); c) depending on the binary input received in step b), dividing the (sub)area (110) horizontally (250) or vertically (240) into two subareas (110) with a predefined area ratio; d) repeating steps a) and a) until receiving an input indicating that a desired grid has been obtained; e) receiving multiple inputs that assign at least one data object present in a computer memory to at least one subarea (110) of the grid obtained in step d); f) Display the data objects assigned in the subareas (110). 15.A system characterized in that it comprises: 1) at least one input device; 2) at least one screen; 3) a memory; 4) at least one physical processor interoperably coupled with at least one input device; at least one display; and memory, and configured to a) receive an input by selecting an available (sub)area (110) on the display; b) receive a binary input that defines that the (sub)area (110) is to be divided horizontally (250) or that defines that the (sub)area is to be divided vertically (240); c) depending on the binary input received in step b), divide the (sub)area horizontally (250) or vertically (240) into two subareas (110) with a predefined area ratio; d) repeat steps a) and ac) until receiving an input indicating that a desired grid has been obtained; QQfcQ ίη / ZZΖΠZ / E / YΙΛΙ e) receive multiple inputs that assign at least one data object present in memory to at least one subarea (110) of the grid obtained in step d); f) display the data objects assigned in the subareas (110).

Images