US20210056935A1 - Responsive layout system and server - Google Patents
Responsive layout system and server Download PDFInfo
- Publication number
- US20210056935A1 US20210056935A1 US16/999,889 US202016999889A US2021056935A1 US 20210056935 A1 US20210056935 A1 US 20210056935A1 US 202016999889 A US202016999889 A US 202016999889A US 2021056935 A1 US2021056935 A1 US 2021056935A1
- Authority
- US
- United States
- Prior art keywords
- panes
- content
- responsive
- display
- layout
- 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.)
- Abandoned
Links
Images
Classifications
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
- G09G5/36—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory
- G09G5/37—Details of the operation on graphic patterns
- G09G5/373—Details of the operation on graphic patterns for modifying the size of the graphic pattern
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
- G09G5/14—Display of multiple viewports
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- 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
-
- 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/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
- G09G5/003—Details of a display terminal, the details relating to the control arrangement of the display terminal and to the interfaces thereto
- G09G5/005—Adapting incoming signals to the display format of the display terminal
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
- G09G5/36—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of a graphic pattern, e.g. using an all-points-addressable [APA] memory
- G09G5/39—Control of the bit-mapped memory
- G09G5/391—Resolution modifying circuits, e.g. variable screen formats
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G2340/00—Aspects of display data processing
- G09G2340/04—Changes in size, position or resolution of an image
- G09G2340/045—Zooming at least part of an image, i.e. enlarging it or shrinking it
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G2340/00—Aspects of display data processing
- G09G2340/04—Changes in size, position or resolution of an image
- G09G2340/0464—Positioning
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G2354/00—Aspects of interface with display user
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G2370/00—Aspects of data communication
- G09G2370/02—Networking aspects
- G09G2370/027—Arrangements and methods specific for the display of internet documents
-
- G—PHYSICS
- G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
- G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
- G09G2370/00—Aspects of data communication
- G09G2370/04—Exchange of auxiliary data, i.e. other than image data, between monitor and graphics controller
Definitions
- the current layout system requires users to create and maintain different layouts on each device. While fixed layouts may work reasonably well when the display size is known, responsive layouts can work well on a much wider spectrum of layout sizes, as they allow content to be displayed and viewed on many different devices.
- Some embodiments of present disclosure provide various exemplary technically improved computer-implemented platforms, systems and methods, including methods for providing a seamless in-the-field responsive layout which allow the user to build one layout that can fit on all or virtually all device form factors (i.e., the size, shape, and/or physical arrangement of a computer and/or display).
- the system is configured to receive a request to access content through a computer.
- the system is configured to generate a responsive layout based on the size of a display coupled to the computer.
- the responsive layout includes a responsive layout editor pane.
- the responsive layout editor pane is configured to enable a user to create a custom responsive layout.
- the custom responsive layout enables the use to modify the location, size, orientation and/or content of one or more panes.
- the system is configured to display the content based on the responsive layout through on the display.
- the system includes a graphical user interface (GUI).
- GUI graphical user interface
- the GUI is configured to receive one or more inputs to select a modified responsive layout through the responsive layout editor pane.
- the system is configured to replace the responsive layout by the selected modified responsive layout based on the one or more inputs.
- the system is configured to display the content based on the selected modified responsive layout.
- the responsive layout editor pane includes one or more sections, the one or more sections including one or more of a responsive grid section, a resolution section, a device breakpoints section, a rotating section, a show-hidden panes section, a property grid section, an adding pane section, and a combination thereof.
- the responsive grid section includes one or more panes in the responsive layout.
- the layout is configured to be divided into a number of columns based on the one or more inputs.
- the device breakpoints section includes one or more breakpoints for the responsive layout. As used herein, “breakpoints” refer to the boundaries for each pane.
- the rotation section includes a landscape mode and a portrait mode.
- the system includes a responsive layout system configured to be in electronic communication with a plurality of users, the responsive layout system comprising one or more computers comprising one or more non-transitory computer-readable media storing processor executable instructions, and one or more processors configured to execute the instructions.
- the system is configured to receive a request to access content.
- the system in response to the request, is configured to generate a responsive layout based on the size of a display.
- the system is configured to fill the available display size with supplemental panes that include information other than what was specified in the request.
- the supplemental panes (as well as all panes) comprise one or more of data, charts, graphs, animations, diagrams, maps, text, alerts, color coding, and or any other information retrieved from a database (e.g., a historian database).
- a request may be a user request for information about the amperage for a pump.
- the system is configured to show a pane with the requested information according to some embodiments.
- the system is configured to automatically display additional information about one or more priorities in one or more supplemental panes.
- the system is configured to determine what is a priority.
- the system includes artificial intelligence and/or machine learning (collectively referred to as AI) to identify priorities to display in the supplemental panes.
- the priorities include: alerts, expected component lifetime, production and/or business trends, predictions, throughput, and/or any information the system has identified as needing corrective action and/or attention.
- the system is configured to automatically display additional information about items related to request (i.e., the pump) in one or more supplemental panes.
- the system is configured to automatically display additional information about items not related to request (e.g., drum rotation speed, statistical analysis for throughput, process flow overview, etc.)
- the responsive layout includes a responsive layout editor pane.
- the system is configured to display the content and/or arrange panes based on the responsive layout.
- the system is configured to receive an input to modify the responsive layout into a custom layout (i.e., modified responsive layout) through the responsive layout editor pane.
- the system is configured to replace the responsive layout by the selected modified responsive layout based on the input.
- the system is configured to display the content based on the selected modified responsive layout on the display.
- the responsive layout editor pane includes one or more pane sections, the one or more pane sections including one or more of a responsive grid section, a resolution section, a device breakpoints section, a rotating section, a show-hidden panes section, a property grid section, an adding pane section, and/or a combination thereof.
- one or more pane sections are configured to allow a user to customize the attributes of one or more panes.
- the responsive grid section includes one or more panes in the responsive layout, where the system is configured to allow a user to modify the attributes of one or more panes in the responsive layout.
- the responsive layout is configured to enable a user to organize the panes into a desired number of columns and/or rows based on the input.
- the device breakpoints section includes one or more breakpoints for the responsive layout.
- the device breakpoints section includes one or more commands that allows users to customize one or more breakpoint attributes.
- one or more breakpoint attributes include: the size of the pane, the size of one or more items in the pane, an overflow behavior, and/or any other feature that defines a size of the pane's content and/or the dimensions of the panes.
- overflow behavior includes what information is removed from the pane when a user zooms in on a portion of the pane or selects a portion of the pane. For example, a user may zoom in on a graph and the pane may show all items in the pane getting larger until they disappear outside the boundaries of the pane (i.e., similar to a conventional zoom into an area of a static picture).
- the rotation section includes a landscape mode and/or a portrait mode and is configured to rotate one or more panes and/or the entire responsive layout based on the rotation section selected mode.
- FIG. 1 illustrates a user's display according to some embodiments.
- FIG. 2 illustrates a high-level architecture diagram according to some embodiments.
- FIG. 3 illustrates a responsive layout editor according to some embodiments.
- FIG. 4 illustrates a responsive layout pane design time according to some embodiments.
- FIG. 5 illustrates a responsive layout editor according to some embodiments.
- FIG. 6 is a zoomed in perspective of features of the responsive layout editor of FIG. 5 according to some embodiments.
- FIG. 7 is a zoomed in perspective of features of the responsive layout editor of FIG. 5 according to some embodiments.
- FIG. 8 illustrates the Add Pane of FIG. 5 populated with charts from the Toolbox of FIG. 5 according to some embodiments.
- FIG. 9 depicts the Add Pane of FIG. 5 changed for display on a screen with a different resolution according to some embodiments.
- FIG. 10 shows changing the layout of the Add Pane to conform to a screen resolution according to some embodiments.
- FIG. 11 shows hiding panes according to some embodiments.
- FIG. 12 illustrates an exemplary computer system enabling or aspects of the system described herein.
- Some embodiments include a 3-dimensional (3D) model, equipment data specifications, maintenance records, related events, drawings and piping and instrumentation diagrams (P&IDs) integrated into a supervisory control and data acquisition (hereinafter “SCADA”) operator interface (i.e., a human machine interface (HMI) that presents information to an operator or user about the state of a process, and enables the operator's control instructions).
- SCADA supervisory control and data acquisition
- HMI human machine interface
- Some embodiments include an engineering information management system (Application NET) that is configured to be integrated into an operator interface such as InTouch operations management interface (OMI) that automatically presents content-based asset information to operators (also known as users), including a presentation of a 3D representation of where assets/equipment exists in context to other equipment, specific data specifications of the equipment, and/or the traditional SCADA real-time visualizations of operational data.
- OMI InTouch operations management interface
- the display is configured to adjust automatically to the changing context to show the user appropriate contextual information.
- the navigation includes zooming in to make the contents of one or more or more panes larger.
- the system is configured to zoom in and/or out on a particular pane while other panes are expanded in and/or out of the display while maintaining the same layout.
- responsive layouts are configured to allow the user to build one layout that can fit on all device form factors.
- the responsive layout is supported in both desktop and web product offerings.
- responsive layouts are configured to be built with a responsive layout editor.
- responsive layouts are configured to be used in different product offerings.
- current responsive layouts are configured to be supported in InTouch OMI and InTouch Web Client.
- the system is configured to use a grid system that includes a series of rows and columns of panes to achieve the responsive layout.
- the system is configured to be used in conjunction with a conventional grid system (e.g., Windows Presentation Foundation (WPF) grid system).
- WPF Windows Presentation Foundation
- responsive layout panes are configured to support one or more of the following properties: Column Span, Push, Pull, Offset, and/or IsVisible. In some embodiments, the properties are configured to determine how the content will be shown at runtime.
- the single layout is configured to run both in the on-premises Windows-based product and on the web. Some embodiments include, single editor for all device form factors, same editor for on-premises, and the web. In some embodiments, content in responsive layout is configured to be resized, moved, or hidden based on device form factors or other desired properties.
- the responsive layout including the editor and runtimes is configured to be based on or offer similar functionality to the Bootstrap grid system. Some embodiments are configured to use a series of containers, rows, and columns to layout and align content.
- the responsive layout editor is configured to allow a user to create a layout which is configured to respond and change based on the device on which the user is viewing the layout.
- the system is configured to enable users to place content on these layouts.
- responsive layouts are configured to be used with OMI View Applications.
- responsive layouts are configured to allow users to arrange their content based on the device a user is viewing the layout from. In some embodiments, this includes resizing, moving, and hiding content in the responsive layout.
- each responsive layout is configured to have panes and each pane is configured to have content associated with it. In some embodiments, a user can configure how much of the available display an individual pane can occupy on different device form factors.
- responsive layouts are configured to provide the same or similar functionality as a conventional Bootstrap Grid System. In some embodiments, the responsive layout is configured to be built using the responsive layout editor.
- the system includes an editor (e.g., a responsive layout editor) is configured to have a selector located on the display (e.g., at the top).
- the selector is configured to allow the user to switch between different pre-defined standard device form factors. In some embodiments, this shows the user, in real-time, what a preview of their content will be arranged like on that device. In some embodiments, the selector is configured to change the display view to a different pre-defined standard device form factor.
- the system is configured to display content on different devices such as phones, tablets and laptops. In some embodiments, each of these devices have a different display size which requires a custom layout to be created and maintained. In some embodiments, responsive layouts are configured to automatically arrange and size panes to fit all device displays. In some embodiments, this reduces costs because a user can select a single layout that is automatically adjusted based on the device the content is accessed from. In some embodiments, responsive layouts are configured to allow users to have a single editing experience for how their content will be arranged on all their devices. In some embodiments, the responsive layout editor is configured to allow a user to preview how their content will appear to a user on different device form factors. In some embodiment, this feature greatly improves user productivity.
- FIG. 1 illustrates a user's display according to some embodiments.
- the grid system is configured to split a user's display into multiple columns across the page (e.g., 2 to 12).
- the user groups the columns individually.
- the user groups the columns together to create wider columns.
- the grid's system is configured to be responsive.
- the columns are configured to rearrange depending on the screen size.
- the columns are configured to be on a big screen (e.g., >30′′ screen).
- the columns are configured to look better with the content organized in three columns.
- the columns are configured to be on a small screen (e.g., ⁇ 30′′ screen).
- the columns on a small screen are configured to look better if the content items are stacked on top of each other.
- the grid system is configured to have breakpoints.
- the grid system breakpoints consist one or more of: “XS” (extra-small; e.g., about ⁇ 10% of screen area), “SM” (small; e.g., between about 10.1% and 20% of screen area), “MD” (medium; e.g., e.g., between about 20.1% and 30% of screen area), “LG” (large; e.g., between about 30.1% and 50% of screen area), “XL” (extra-large; e.g., greater than about 50%).
- the term “about” as used in conjunction with breakpoints is ⁇ 0.1%).
- these breakpoints are configured to be based on a number of pixels in the display (e.g., total, width, length, diameter and/or a combination thereof). For example: XS ⁇ 576px ⁇ SM ⁇ 768 px ⁇ MD ⁇ 992px ⁇ LG ⁇ 1200px ⁇ XL.
- FIG. 2 illustrates a responsive layout editor overview according to some embodiments.
- a responsive layout is configured to be an option within the layout editor.
- a user makes a layout responsive with options.
- options include one or more of 1) IsResponsive property in the Layout Properties; and 2) when set to true (checked), the responsive layout editor appears.
- the toolbar button ( FIG. 2 : 201 ) is configured to be in the layout editor.
- the toolbar button is configured to be used to toggle between responsive and fixed layouts.
- FIG. 3 illustrates a responsive layout editor according to some embodiments.
- the responsive layout editor pane is configured to contain sections.
- the sections include one or more of: Section 301 : Responsive Grid, Section 302 : Resolution, Section 303 : Device Breakpoints, Section 304 : Rotate, Section 305 : Show Hidden Panes; Section 306 : Property Grid, Section 307 : Add Pane.
- section 301 is configured to contain panes (e.g., Pane 1 (default) 350 , Pane 2 , Pane 3 , etc.) that are in the responsive layout. In some embodiments, numbers 1 through 12 is found along the top. In some embodiments, the layout is configured to be divided into 1 to 12 columns. In some embodiments, the responsive grid is resized by height and width. In some embodiments, section 302 contains current width and height of the responsive grid of section 1 . In some embodiments, users enter values in the edit box and the responsive grid will respond.
- panes e.g., Pane 1 (default) 350 , Pane 2 , Pane 3 , etc.
- numbers 1 through 12 is found along the top.
- the layout is configured to be divided into 1 to 12 columns.
- the responsive grid is resized by height and width.
- section 302 contains current width and height of the responsive grid of section 1 . In some embodiments, users enter values in the edit box and the responsive grid will respond.
- section 303 contains buttons which represent different breakpoints (XS, SM, MD, LG, XL) available for the responsive grid.
- the responsive grid is configured to resize to match the size of the device.
- section 304 contains a button that is configured to allow a user to rotate between the landscape mode and the portrait mode. In some embodiments, the width and height are reversed.
- section 305 contains a button that is configured to allow a user to hide or show any panes which have been made hidden through the IsVisible property.
- section 306 contains all properties related to Layout, Panes, and Content.
- section 307 contains a button that is configured to be used to add a new pane to the layout.
- panes are configured to be added to the end of the list of layouts.
- FIG. 4 illustrates a responsive layout pane design time for Pane 1 350 according to some embodiments.
- the responsive layout pane design time is configured to include sections.
- the sections include one or more of: Section 401 : Pane Name, Section 402 : Context Menu, Section 403 : Column Span Controls, Section 404 : Visibility, and/or Section 405 : Delete Pane.
- section 401 is configured to show the pane name. In some embodiments, if the pane is the default pane, then “(default)” is appended to the name when not in edit mode. In some embodiments, the textbox is editable and is configured to allow a user to change pane name.
- the context menu 402 is configured to have the following items when no content is on the pane: “Rename Pane” which sets focus to Section 401 , and “Delete Pane” which deletes the selected pane.
- the following items are configured to be added: “Edit ⁇ Content Name>”, “Remove Content” and “Pane Properties/Content Properties”.
- section 403 contains controls to change the column span (ColSpan) of a selected pane.
- a dropdown is configured to list the numbers 1 through 12.
- a user selects the number.
- the ColSpan property is configured to update for the selected pane for the breakpoint that the responsive grid is currently in.
- the + and ⁇ buttons are configured to increment and decrement the ColSpan property for the selected pane at the current breakpoint of the responsive grid.
- section 404 contains a button that is configured to hide or show a selected pane at the current breakpoint of the responsive grid. In some embodiments, the property which it is configured to be bound to is IsVisible. In some embodiments, section 405 contains a button that is configured to delete a selected pane from the layout. In some embodiments, if there is only one pane in the layout, it cannot be deleted.
- sections 401 , 402 , 403 , 404 , and 405 are collectively referred to as pane controls 410 .
- responsive layout pane properties are configured to include one or more of: Column Span, Push, Pull, Offset, and/or IsVisible.
- the push property is configured to push panes to the right by the number of columns that are set. In some embodiments, when panes are pushed into other panes, they are configured to be hidden behind the pane to their right. In some embodiments, panes are configured to be partially or fully hidden. In some embodiments, panes are configured to be pushed partially or completely off the display. In some embodiments, the push property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- the pull property is configured to pull panes to the left by the number of columns that is set. In some embodiments, when panes are pulled into other panes, they are configured to overlap the pane to their left. In some embodiments, panes are configured to partially or fully overlap panes next to them. In some embodiments, panes are configured to be pushed partially or completely off the display. In some embodiments, the pull property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- the offset property is configured to push the pane to the right. In some embodiments, the offset property is configured to push the selected pane and all panes after it to the right by that many columns. In some embodiments, the offset property is not configured to cause panes to overlap by itself. In some embodiments, the offset property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- the IsVisible property is configured to determine whether a pane is shown or hidden at a certain breakpoint. In some embodiments, when the value of the IsVisible property is true, the pane is configured to be shown. In some embodiments, when the value of the IsVisible property is false, the pane is configured to be hidden. In some embodiments, the IsVisible property does not propagate. In some embodiments, when the IsVisible property does not propagate, the default value is configured to be true.
- Some embodiments include web client runtime behaviors. Some embodiments include Using Responsive Layout in Web Client and Web Client Runtime. In some embodiments, when using responsive layouts in the Web Client, current responsive layouts are configured to be used with OMI View Applications. In some embodiments, to see a responsive layout in the Web Client, a user must configure an OMI View Application with a responsive layout. In some embodiments, a user experience for using a responsive layout in an OMI View Application can be the same as using a fixed layout.
- Some embodiments include a web client runtime.
- the InTouch Web Client runtime is configured to support responsive layouts.
- the layouts it renders are configured to be HTML based and use libraries for their responsiveness.
- the layout is configured to respond based on the configuration.
- Some embodiments include OMI runtime behaviors.
- to use a responsive layout in the OMI runtime the user selects the layout in the View Application Editor.
- OMI View Applications are configured to support both fixed and responsive layouts.
- OMI view application runtime uses the Responsive Grid WPF control to render the layout. In some embodiments, this is the same control that is used at design time for the responsive layout editor. In some embodiments, the behavior in runtime and design time are configured to match exactly.
- FIG. 5 illustrates a responsive layout editor according to some embodiments.
- the responsive grid is set to a particular resolution 502 (best shown in FIG. 6 ) and a particular pane configuration 501 as selected in the responsive breakpoint menu 503 .
- pane configuration 501 is configured to be for a large monitor, a smart TV, or the like.
- pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within the pane configuration 501 .
- responsive layout editor comprises a toolbox 504 and pane selection window 505 (best shown in FIG. 7 )
- FIG. 8 illustrates the pane configuration 501 of FIG. 5 populated with charts from the pane selection window 505 according to some embodiments.
- pane configuration 501 is created by dragging panes from the pane selection window 505 into each pane.
- FIG. 9 depicts the pane configuration 501 of FIG. 5 changed to be displayed on screens of different resolutions according to some embodiments.
- the selection of screen resolution 911 causes a responsive layout change to a new pane configuration 901 .
- the selection of screen resolution 912 causes a responsive layout change to a new pane configuration 902 .
- pane configuration 902 is configured to be for a large monitor, a smart TV, a desktop monitor and/or the like.
- pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within the pane configurations 901 , 902 .
- FIG. 10 shows changing the layout of the pane configuration 501 to conform to a screen resolution according to some embodiments.
- the selection of screen resolution 1011 causes a responsive layout change to a new 4 pane configuration 1001 .
- pane configuration 1002 shows that the number of visible panes is altered by selecting the column span controls 1010 .
- the number of panes goes from a 4-pane configuration 1001 to a 12-pane configuration 1003 .
- the pane configuration is modified to show any number of panes.
- FIG. 11 shows hiding panes in a screen resolution according to some embodiments.
- pane configuration 1101 is obtained by selecting screen resolution 1111 .
- pane configuration 1101 is configured to be for a large monitor, a smart TV, a desktop monitor and/or the like.
- pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within the pane configuration 1101 .
- hiding panes comprises moving a pane to within the view of the display device.
- moving a pane comprises scrolling the screen of the display device.
- selecting the visibility button 1110 hides the pane as shown in step 1102 .
- hiding a pane, such as pane 13 results in the pane configuration 1103 where pane 13 is not shown.
- FIG. 12 illustrates a computer system enabling or operating the responsive layout system and server according to some embodiments.
- the responsive layout system and server are configured to be operatively coupled to the computer system 210 shown in FIG. 2 .
- the computer system 210 is configured to comprise the responsive layout system and server.
- the computer system 210 is configured to include and/or operate and/or process computer-executable code of one or more of the above-mentioned program logic, software modules, and/or systems. Further, in some embodiments, the computer system 210 is configured to operate and/or display information within one or more graphical user interfaces coupled to the responsive layout system and server.
- the computer system 210 comprises a cloud server and/or is configured to be coupled to one or more cloud-based server systems.
- the system 210 comprises at least one computer including at least one processor 232 .
- the at least one processor 232 includes a processor residing in, or coupled to, one or more server platforms.
- the system 210 includes a network interface 235 a and an application interface 235 b coupled to the least one processor 232 capable of processing at least one operating system 234 .
- the interfaces 235 a , 235 b coupled to at least one processor 232 is configured to process one or more of the software modules 238 (e.g., such as enterprise applications).
- the software modules 238 include server-based software, and operate to host at least one user account and/or at least one client account, and operate to transfer data between one or more of these accounts using the at least one processor 232 .
- the invention can employ various computer-implemented operations involving data stored in computer systems.
- the above-described databases and models described throughout can store analytical models and other data on computer-readable storage media within the system 210 and on computer-readable storage media coupled to the system 210 .
- the above-described applications of the system are configured to be stored on computer-readable storage media within the system 210 and/or on computer-readable storage media coupled to the system 210 . In some embodiment, these operations are those requiring physical manipulation of physical quantities.
- the system 210 comprises at least one computer readable medium 236 coupled to at least one data source 237 a , and/or at least one data storage device 237 b , and/or at least one input/output device 237 c.
- the invention is embodied as computer readable code on a computer readable medium 236 .
- the computer readable medium 236 is any data storage device that can store data, which can thereafter be read by a computer system (such as the system 210 ).
- the computer readable medium 236 is any physical or material medium that can be used to tangibly store the desired information or data or instructions and which can be accessed by a computer or processor 232 .
- the computer readable medium 236 includes hard drives, network attached storage (NAS), read-only memory, random-access memory, FLASH based memory, CD-ROMs, CD-Rs, CD-RWs, DVDs, magnetic tapes, other optical and non-optical data storage devices.
- various other forms of computer-readable media 236 transmit or carry instructions to a computer 240 and/or at least one user 231 , including a router, private or public network, or other transmission device or channel, both wired and wireless.
- the software modules 238 is configured to send and receive data from a database (e.g., from a computer readable medium 236 including data sources 237 a and data storage 237 b that comprises a database), and data is received by the software modules 238 from at least one other source.
- a database e.g., from a computer readable medium 236 including data sources 237 a and data storage 237 b that comprises a database
- data is received by the software modules 238 from at least one other source.
- at least one of the software modules 238 is configured within the system to output data to at least one user 231 via at least one graphical user interface rendered on at least one digital display.
- the computer readable medium 236 is distributed over a conventional computer network via the network interface 235 a where the system embodied by the computer readable code can be stored and executed in a distributed fashion.
- one or more components of the system 210 is configured to send and/or receive data through a local area network (“LAN”) 239 a and/or an internet coupled network 239 b (e.g., such as a wireless internet).
- LAN local area network
- internet coupled network 239 b e.g., such as a wireless internet
- the networks 239 a , 239 b are configured to include wide area networks (“WAN”), direct connections (e.g., through a universal serial bus port), and/or other forms of computer-readable media 236 , and/or any combination thereof
- components of the networks 239 a , 239 b include any number of user devices such as personal computers including for example desktop computers, and/or laptop computers, and/or any fixed, generally non-mobile internet appliances coupled through the LAN 239 a .
- some embodiments include personal computers 240 a coupled through the LAN 239 a that can be configured for any type of user including an administrator.
- Some embodiments include personal computers coupled through network 239 b .
- one or more components of the system 210 are coupled to send or receive data through an internet network (e.g., such as network 239 b ).
- some embodiments include at least one user 231 coupled wirelessly and accessing one or more software modules of the system including at least one enterprise application 238 via an input and output (“I/O”) device 237 c .
- the system 210 can enable at least one user 231 to be coupled to access enterprise applications 238 via an I/O device 237 c through LAN 239 a .
- the user 231 can comprise a user 231 a coupled to the system 210 using a desktop computer, laptop computers, and/or any fixed, generally non-mobile internet appliances coupled through the internet 239 b .
- the user 231 comprises a mobile user 231 b coupled to the system 210 .
- the user 231 b can use any mobile computer 231 c to wireless coupled to the system 210 , including, but not limited to, personal digital assistants, and/or cellular phones, mobile phones, or smart phones, and/or pagers, and/or digital tablets, and/or fixed or mobile internet appliances.
- any mobile computer 231 c to wireless coupled to the system 210 , including, but not limited to, personal digital assistants, and/or cellular phones, mobile phones, or smart phones, and/or pagers, and/or digital tablets, and/or fixed or mobile internet appliances.
- Applicant defines the use of and/or, in terms of “A and/or B,” to mean one option could be “A and B” and another option could be “A or B.” Such an interpretation is consistent with the USPTO Patent Trial and Appeals Board ruling in ex parte Gross, where the Board established that “and/or” means element A alone, element B alone, or elements A and B together.
- Some embodiments of the system are presented with specific values and/or setpoints. These values and setpoints are not intended to be limiting, and are merely examples of a higher configuration versus a lower configuration and are intended as an aid for those of ordinary skill to make and use the system.
- “substantially” and “approximately” when used in conjunction with a value encompass a difference of 10% or less of the same unit and scale of that being measured. In some embodiments, “substantially” and “approximately” are defined as presented in the specification.
Abstract
Description
- This application claims the benefit of and priority to U.S. Provisional Application No. 62/890,011, filed Aug. 21, 2019, entitled “Responsive Layout System and Server”, the entire contents of which are incorporated herein by reference.
- The current layout system requires users to create and maintain different layouts on each device. While fixed layouts may work reasonably well when the display size is known, responsive layouts can work well on a much wider spectrum of layout sizes, as they allow content to be displayed and viewed on many different devices.
- Accordingly, there is a need to provide a seamless in-the-field responsive layout which allows the user to build one layout that can fit on all or virtually all device form factors.
- Some embodiments of present disclosure provide various exemplary technically improved computer-implemented platforms, systems and methods, including methods for providing a seamless in-the-field responsive layout which allow the user to build one layout that can fit on all or virtually all device form factors (i.e., the size, shape, and/or physical arrangement of a computer and/or display). In some embodiments, the system is configured to receive a request to access content through a computer. In response to receiving the request, in some embodiments, the system is configured to generate a responsive layout based on the size of a display coupled to the computer. In some embodiments, the responsive layout includes a responsive layout editor pane. In some embodiments, the responsive layout editor pane is configured to enable a user to create a custom responsive layout. In some embodiments, the custom responsive layout enables the use to modify the location, size, orientation and/or content of one or more panes.
- In some embodiments, the system is configured to display the content based on the responsive layout through on the display. In some embodiments, the system includes a graphical user interface (GUI). In some embodiments, the GUI is configured to receive one or more inputs to select a modified responsive layout through the responsive layout editor pane. In some embodiments, the system is configured to replace the responsive layout by the selected modified responsive layout based on the one or more inputs. In some embodiments, the system is configured to display the content based on the selected modified responsive layout. In some embodiments, the responsive layout editor pane includes one or more sections, the one or more sections including one or more of a responsive grid section, a resolution section, a device breakpoints section, a rotating section, a show-hidden panes section, a property grid section, an adding pane section, and a combination thereof. In some embodiments, the responsive grid section includes one or more panes in the responsive layout. In some embodiments, the layout is configured to be divided into a number of columns based on the one or more inputs. In some embodiments, the device breakpoints section includes one or more breakpoints for the responsive layout. As used herein, “breakpoints” refer to the boundaries for each pane. In some embodiments, the rotation section includes a landscape mode and a portrait mode.
- In some embodiments, the system includes a responsive layout system configured to be in electronic communication with a plurality of users, the responsive layout system comprising one or more computers comprising one or more non-transitory computer-readable media storing processor executable instructions, and one or more processors configured to execute the instructions. In some embodiments, the system is configured to receive a request to access content. In some embodiments, in response to the request, the system is configured to generate a responsive layout based on the size of a display.
- In some embodiments, the system is configured to fill the available display size with supplemental panes that include information other than what was specified in the request. In some embodiments, the supplemental panes (as well as all panes) comprise one or more of data, charts, graphs, animations, diagrams, maps, text, alerts, color coding, and or any other information retrieved from a database (e.g., a historian database). For example, a request may be a user request for information about the amperage for a pump. In response, the system is configured to show a pane with the requested information according to some embodiments. In some embodiments, the system is configured to automatically display additional information about one or more priorities in one or more supplemental panes. In some embodiments, the system is configured to determine what is a priority. In some embodiments, the system includes artificial intelligence and/or machine learning (collectively referred to as AI) to identify priorities to display in the supplemental panes. In some embodiments, the priorities include: alerts, expected component lifetime, production and/or business trends, predictions, throughput, and/or any information the system has identified as needing corrective action and/or attention. However, in some embodiments, the system is configured to automatically display additional information about items related to request (i.e., the pump) in one or more supplemental panes. In some embodiments, the system is configured to automatically display additional information about items not related to request (e.g., drum rotation speed, statistical analysis for throughput, process flow overview, etc.)
- In some embodiments, the responsive layout includes a responsive layout editor pane. In some embodiments, the system is configured to display the content and/or arrange panes based on the responsive layout. In some embodiments, the system is configured to receive an input to modify the responsive layout into a custom layout (i.e., modified responsive layout) through the responsive layout editor pane. In some embodiments, the system is configured to replace the responsive layout by the selected modified responsive layout based on the input. In some embodiments, the system is configured to display the content based on the selected modified responsive layout on the display.
- In some embodiments, the responsive layout editor pane includes one or more pane sections, the one or more pane sections including one or more of a responsive grid section, a resolution section, a device breakpoints section, a rotating section, a show-hidden panes section, a property grid section, an adding pane section, and/or a combination thereof. In some embodiments, one or more pane sections are configured to allow a user to customize the attributes of one or more panes. In some embodiments, the responsive grid section includes one or more panes in the responsive layout, where the system is configured to allow a user to modify the attributes of one or more panes in the responsive layout. In some embodiments, the responsive layout is configured to enable a user to organize the panes into a desired number of columns and/or rows based on the input. In some embodiments, the device breakpoints section includes one or more breakpoints for the responsive layout. In some embodiments, the device breakpoints section includes one or more commands that allows users to customize one or more breakpoint attributes. In some embodiments, one or more breakpoint attributes include: the size of the pane, the size of one or more items in the pane, an overflow behavior, and/or any other feature that defines a size of the pane's content and/or the dimensions of the panes. In some embodiments, overflow behavior includes what information is removed from the pane when a user zooms in on a portion of the pane or selects a portion of the pane. For example, a user may zoom in on a graph and the pane may show all items in the pane getting larger until they disappear outside the boundaries of the pane (i.e., similar to a conventional zoom into an area of a static picture). In some embodiments, the rotation section includes a landscape mode and/or a portrait mode and is configured to rotate one or more panes and/or the entire responsive layout based on the rotation section selected mode.
-
FIG. 1 illustrates a user's display according to some embodiments. -
FIG. 2 illustrates a high-level architecture diagram according to some embodiments. -
FIG. 3 illustrates a responsive layout editor according to some embodiments. -
FIG. 4 illustrates a responsive layout pane design time according to some embodiments. -
FIG. 5 illustrates a responsive layout editor according to some embodiments. -
FIG. 6 is a zoomed in perspective of features of the responsive layout editor ofFIG. 5 according to some embodiments. -
FIG. 7 is a zoomed in perspective of features of the responsive layout editor ofFIG. 5 according to some embodiments. -
FIG. 8 illustrates the Add Pane ofFIG. 5 populated with charts from the Toolbox ofFIG. 5 according to some embodiments. -
FIG. 9 depicts the Add Pane ofFIG. 5 changed for display on a screen with a different resolution according to some embodiments. -
FIG. 10 shows changing the layout of the Add Pane to conform to a screen resolution according to some embodiments. -
FIG. 11 shows hiding panes according to some embodiments. -
FIG. 12 illustrates an exemplary computer system enabling or aspects of the system described herein. - Before any embodiments of the invention are explained in detail, it is to be understood that the invention is not limited in its application to the details of construction and the arrangement of components set forth in the following description or illustrated in the following drawings. Some embodiments of the system are configured to be combined with some other embodiments and all embodiments are capable of being practiced or of being carried out in various ways. Also, it is to be understood that the phraseology and terminology used herein is for the purpose of description and should not be regarded as limiting. The use of “including,” “comprising,” or “having” and variations thereof herein is meant to encompass the items listed thereafter and equivalents thereof as well as additional items. Unless specified or limited otherwise, the terms “mounted,” “connected,” “supported,” and “coupled” and variations thereof are used broadly and encompass both direct and indirect mountings, connections, supports, and couplings. Further, “connected” and “coupled” are not restricted to physical or mechanical connections or couplings.
- The following discussion is presented to enable a person skilled in the art to make and use the system. Various modifications to the illustrated embodiments will be readily apparent to those skilled in the art, and the generic principles recited according to some illustrated embodiments are configured to be applied to and/or combined with some other illustrated embodiments and applications without departing from embodiments of the invention. Thus, embodiments of the invention are not intended to be limited to embodiments shown, but are to be accorded the widest scope consistent with the principles and features disclosed herein. The following detailed description is to be read with reference to the figures, in which like elements in different figures have like reference numerals. The figures, which are not necessarily to scale, depict selected embodiments and are not intended to limit the scope of embodiments of the invention. Skilled artisans will recognize the examples provided herein have many useful alternatives and fall within the scope of embodiments of the invention.
- Some embodiments include a 3-dimensional (3D) model, equipment data specifications, maintenance records, related events, drawings and piping and instrumentation diagrams (P&IDs) integrated into a supervisory control and data acquisition (hereinafter “SCADA”) operator interface (i.e., a human machine interface (HMI) that presents information to an operator or user about the state of a process, and enables the operator's control instructions).
- Some embodiments include an engineering information management system (Application NET) that is configured to be integrated into an operator interface such as InTouch operations management interface (OMI) that automatically presents content-based asset information to operators (also known as users), including a presentation of a 3D representation of where assets/equipment exists in context to other equipment, specific data specifications of the equipment, and/or the traditional SCADA real-time visualizations of operational data. In some embodiments, as the user/operator navigates either the operational model (within the SCADA system) or the engineering model (within Application NET), the display is configured to adjust automatically to the changing context to show the user appropriate contextual information. In some embodiments, the navigation includes zooming in to make the contents of one or more or more panes larger. In some embodiments, the system is configured to zoom in and/or out on a particular pane while other panes are expanded in and/or out of the display while maintaining the same layout.
- In some embodiments, responsive layouts are configured to allow the user to build one layout that can fit on all device form factors. In some embodiments, the responsive layout is supported in both desktop and web product offerings. In some embodiments, responsive layouts are configured to be built with a responsive layout editor. In some embodiments, responsive layouts are configured to be used in different product offerings. In some embodiments, current responsive layouts are configured to be supported in InTouch OMI and InTouch Web Client. In some embodiments, the system is configured to use a grid system that includes a series of rows and columns of panes to achieve the responsive layout. In some embodiments, the system is configured to be used in conjunction with a conventional grid system (e.g., Windows Presentation Foundation (WPF) grid system).
- In some embodiments, responsive layout panes are configured to support one or more of the following properties: Column Span, Push, Pull, Offset, and/or IsVisible. In some embodiments, the properties are configured to determine how the content will be shown at runtime.
- In some embodiments, the single layout is configured to run both in the on-premises Windows-based product and on the web. Some embodiments include, single editor for all device form factors, same editor for on-premises, and the web. In some embodiments, content in responsive layout is configured to be resized, moved, or hidden based on device form factors or other desired properties.
- In some embodiments, the responsive layout including the editor and runtimes is configured to be based on or offer similar functionality to the Bootstrap grid system. Some embodiments are configured to use a series of containers, rows, and columns to layout and align content.
- In some embodiments, the responsive layout editor is configured to allow a user to create a layout which is configured to respond and change based on the device on which the user is viewing the layout. In some embodiments, the system is configured to enable users to place content on these layouts. In some embodiments, responsive layouts are configured to be used with OMI View Applications.
- In some embodiments, responsive layouts are configured to allow users to arrange their content based on the device a user is viewing the layout from. In some embodiments, this includes resizing, moving, and hiding content in the responsive layout. In some embodiments, each responsive layout is configured to have panes and each pane is configured to have content associated with it. In some embodiments, a user can configure how much of the available display an individual pane can occupy on different device form factors. In some embodiments, responsive layouts are configured to provide the same or similar functionality as a conventional Bootstrap Grid System. In some embodiments, the responsive layout is configured to be built using the responsive layout editor.
- In some embodiments, the system includes an editor (e.g., a responsive layout editor) is configured to have a selector located on the display (e.g., at the top). In some embodiments, the selector is configured to allow the user to switch between different pre-defined standard device form factors. In some embodiments, this shows the user, in real-time, what a preview of their content will be arranged like on that device. In some embodiments, the selector is configured to change the display view to a different pre-defined standard device form factor.
- In some embodiments, the system is configured to display content on different devices such as phones, tablets and laptops. In some embodiments, each of these devices have a different display size which requires a custom layout to be created and maintained. In some embodiments, responsive layouts are configured to automatically arrange and size panes to fit all device displays. In some embodiments, this reduces costs because a user can select a single layout that is automatically adjusted based on the device the content is accessed from. In some embodiments, responsive layouts are configured to allow users to have a single editing experience for how their content will be arranged on all their devices. In some embodiments, the responsive layout editor is configured to allow a user to preview how their content will appear to a user on different device form factors. In some embodiment, this feature greatly improves user productivity.
-
FIG. 1 illustrates a user's display according to some embodiments. In some embodiments, the grid system is configured to split a user's display into multiple columns across the page (e.g., 2 to 12). In some embodiments, the user groups the columns individually. In some embodiments, the user groups the columns together to create wider columns. - In some embodiments, the grid's system is configured to be responsive. In some embodiments, the columns are configured to rearrange depending on the screen size. In some embodiments, the columns are configured to be on a big screen (e.g., >30″ screen). In some embodiments, the columns are configured to look better with the content organized in three columns. In some embodiments, the columns are configured to be on a small screen (e.g., <30″ screen). In some embodiments, the columns on a small screen are configured to look better if the content items are stacked on top of each other.
- In some embodiments, the grid system is configured to have breakpoints. In some embodiments, the grid system breakpoints consist one or more of: “XS” (extra-small; e.g., about <10% of screen area), “SM” (small; e.g., between about 10.1% and 20% of screen area), “MD” (medium; e.g., e.g., between about 20.1% and 30% of screen area), “LG” (large; e.g., between about 30.1% and 50% of screen area), “XL” (extra-large; e.g., greater than about 50%). The term “about” as used in conjunction with breakpoints is ±0.1%). In some embodiments, these breakpoints are configured to be based on a number of pixels in the display (e.g., total, width, length, diameter and/or a combination thereof). For example: XS≤576px≤SM≤768 px≤MD≤992px≤LG≤1200px≤XL.
-
FIG. 2 illustrates a responsive layout editor overview according to some embodiments. In some embodiments, a responsive layout is configured to be an option within the layout editor. In some embodiments, a user makes a layout responsive with options. In some embodiments, options include one or more of 1) IsResponsive property in the Layout Properties; and 2) when set to true (checked), the responsive layout editor appears. In some embodiments, the toolbar button (FIG. 2 : 201) is configured to be in the layout editor. In some embodiments, the toolbar button is configured to be used to toggle between responsive and fixed layouts. -
FIG. 3 illustrates a responsive layout editor according to some embodiments. In some embodiments, the responsive layout editor pane is configured to contain sections. In some embodiments, the sections include one or more of: Section 301: Responsive Grid, Section 302: Resolution, Section 303: Device Breakpoints, Section 304: Rotate, Section 305: Show Hidden Panes; Section 306: Property Grid, Section 307: Add Pane. - In some embodiments,
section 301 is configured to contain panes (e.g., Pane 1 (default) 350,Pane 2,Pane 3, etc.) that are in the responsive layout. In some embodiments,numbers 1 through 12 is found along the top. In some embodiments, the layout is configured to be divided into 1 to 12 columns. In some embodiments, the responsive grid is resized by height and width. In some embodiments, section 302 contains current width and height of the responsive grid ofsection 1. In some embodiments, users enter values in the edit box and the responsive grid will respond. - In some embodiment,
section 303 contains buttons which represent different breakpoints (XS, SM, MD, LG, XL) available for the responsive grid. In some embodiments, when a breakpoint is selected, the responsive grid is configured to resize to match the size of the device. In some embodiments,section 304 contains a button that is configured to allow a user to rotate between the landscape mode and the portrait mode. In some embodiments, the width and height are reversed. - In some embodiments,
section 305 contains a button that is configured to allow a user to hide or show any panes which have been made hidden through the IsVisible property. - In some embodiments,
section 306 contains all properties related to Layout, Panes, and Content. In some embodiments,section 307 contains a button that is configured to be used to add a new pane to the layout. In some embodiments, panes are configured to be added to the end of the list of layouts. -
FIG. 4 illustrates a responsive layout pane design time forPane 1 350 according to some embodiments. In some embodiments, the responsive layout pane design time is configured to include sections. In some embodiments, the sections include one or more of: Section 401: Pane Name, Section 402: Context Menu, Section 403: Column Span Controls, Section 404: Visibility, and/or Section 405: Delete Pane. - In some embodiments,
section 401 is configured to show the pane name. In some embodiments, if the pane is the default pane, then “(default)” is appended to the name when not in edit mode. In some embodiments, the textbox is editable and is configured to allow a user to change pane name. - In some embodiments, the
context menu 402 is configured to have the following items when no content is on the pane: “Rename Pane” which sets focus toSection 401, and “Delete Pane” which deletes the selected pane. In some embodiments, when a pane has content, the following items are configured to be added: “Edit<Content Name>”, “Remove Content” and “Pane Properties/Content Properties”. - In some embodiments,
section 403 contains controls to change the column span (ColSpan) of a selected pane. In some embodiments, a dropdown is configured to list thenumbers 1 through 12. In some embodiments, a user selects the number. In some embodiments, the ColSpan property is configured to update for the selected pane for the breakpoint that the responsive grid is currently in. In some embodiments, the + and − buttons are configured to increment and decrement the ColSpan property for the selected pane at the current breakpoint of the responsive grid. - In some embodiments,
section 404 contains a button that is configured to hide or show a selected pane at the current breakpoint of the responsive grid. In some embodiments, the property which it is configured to be bound to is IsVisible. In some embodiments,section 405 contains a button that is configured to delete a selected pane from the layout. In some embodiments, if there is only one pane in the layout, it cannot be deleted. - In some embodiments,
sections - Some embodiments include responsive layout pane properties. In some embodiments, responsive layout pane properties are configured to include one or more of: Column Span, Push, Pull, Offset, and/or IsVisible.
- In some embodiments, the column span property is used to determine the number of columns that a pane is configured to occupy in the grid. In some embodiments, the column span property propagates from XS to XL, unless the property is set for one of those breakpoints. For example: a pane has the following column span property values: ColXS (Column XS)=12, ColSM=0, ColMD=6, ColLG=0, ColXL=3 (i.e., in this case ColSM is configured to be 12 as it gets its value from ColXS). In some embodiments, ColLG is configured to be 6 as it gets its value from ColMD. In some embodiments, the default value is configured to be 0, except for ColXS which is configured to be 12.
- In some embodiments, the push property is configured to push panes to the right by the number of columns that are set. In some embodiments, when panes are pushed into other panes, they are configured to be hidden behind the pane to their right. In some embodiments, panes are configured to be partially or fully hidden. In some embodiments, panes are configured to be pushed partially or completely off the display. In some embodiments, the push property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- In some embodiments, the pull property is configured to pull panes to the left by the number of columns that is set. In some embodiments, when panes are pulled into other panes, they are configured to overlap the pane to their left. In some embodiments, panes are configured to partially or fully overlap panes next to them. In some embodiments, panes are configured to be pushed partially or completely off the display. In some embodiments, the pull property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- In some embodiments, the offset property is configured to push the pane to the right. In some embodiments, the offset property is configured to push the selected pane and all panes after it to the right by that many columns. In some embodiments, the offset property is not configured to cause panes to overlap by itself. In some embodiments, the offset property is configured to propagate the same way that the Column span property does. In some embodiments, the default value is configured to be 0.
- In some embodiments, the IsVisible property is configured to determine whether a pane is shown or hidden at a certain breakpoint. In some embodiments, when the value of the IsVisible property is true, the pane is configured to be shown. In some embodiments, when the value of the IsVisible property is false, the pane is configured to be hidden. In some embodiments, the IsVisible property does not propagate. In some embodiments, when the IsVisible property does not propagate, the default value is configured to be true.
- Some embodiments include web client runtime behaviors. Some embodiments include Using Responsive Layout in Web Client and Web Client Runtime. In some embodiments, when using responsive layouts in the Web Client, current responsive layouts are configured to be used with OMI View Applications. In some embodiments, to see a responsive layout in the Web Client, a user must configure an OMI View Application with a responsive layout. In some embodiments, a user experience for using a responsive layout in an OMI View Application can be the same as using a fixed layout.
- Some embodiments include a web client runtime. In some embodiments, the InTouch Web Client runtime is configured to support responsive layouts. In some embodiment, the layouts it renders are configured to be HTML based and use libraries for their responsiveness. In some embodiments, as the browser is resized, the layout is configured to respond based on the configuration.
- Some embodiments include OMI runtime behaviors. In some embodiments, to use a responsive layout in the OMI runtime, the user selects the layout in the View Application Editor. In some embodiments, OMI View Applications are configured to support both fixed and responsive layouts.
- Some embodiments include OMI view application runtime. In some embodiments, the OMI View Application runtime uses the Responsive Grid WPF control to render the layout. In some embodiments, this is the same control that is used at design time for the responsive layout editor. In some embodiments, the behavior in runtime and design time are configured to match exactly.
-
FIG. 5 illustrates a responsive layout editor according to some embodiments. In some embodiments, the responsive grid is set to a particular resolution 502 (best shown inFIG. 6 ) and aparticular pane configuration 501 as selected in theresponsive breakpoint menu 503. In some embodiments,pane configuration 501 is configured to be for a large monitor, a smart TV, or the like. In some embodiments,pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within thepane configuration 501. In some embodiments, responsive layout editor comprises atoolbox 504 and pane selection window 505 (best shown inFIG. 7 ) -
FIG. 8 illustrates thepane configuration 501 ofFIG. 5 populated with charts from thepane selection window 505 according to some embodiments. According to some embodiments,pane configuration 501 is created by dragging panes from thepane selection window 505 into each pane. -
FIG. 9 depicts thepane configuration 501 ofFIG. 5 changed to be displayed on screens of different resolutions according to some embodiments. In some embodiments, the selection ofscreen resolution 911 causes a responsive layout change to anew pane configuration 901. In some embodiments, the selection ofscreen resolution 912 causes a responsive layout change to anew pane configuration 902. In some embodiments,pane configuration 902 is configured to be for a large monitor, a smart TV, a desktop monitor and/or the like. In some embodiments,pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within thepane configurations -
FIG. 10 shows changing the layout of thepane configuration 501 to conform to a screen resolution according to some embodiments. In some embodiments, the selection ofscreen resolution 1011 causes a responsive layout change to a new 4pane configuration 1001. In some embodiments,pane configuration 1002 shows that the number of visible panes is altered by selecting the column span controls 1010. In some embodiments, the number of panes goes from a 4-pane configuration 1001 to a 12-pane configuration 1003. In some embodiments, the pane configuration is modified to show any number of panes. -
FIG. 11 shows hiding panes in a screen resolution according to some embodiments. In some embodiments,pane configuration 1101 is obtained by selectingscreen resolution 1111. In some embodiments,pane configuration 1101 is configured to be for a large monitor, a smart TV, a desktop monitor and/or the like. In some embodiments,pane configuration 501 is configured to be a view selected in a virtual environment, a smart phone, or any display device that supports displaying images within thepane configuration 1101. In some embodiments, hiding panes comprises moving a pane to within the view of the display device. In some embodiments, moving a pane comprises scrolling the screen of the display device. In some embodiments, selecting thevisibility button 1110 hides the pane as shown instep 1102. In some embodiments, hiding a pane, such as pane 13, results in thepane configuration 1103 where pane 13 is not shown. -
FIG. 12 illustrates a computer system enabling or operating the responsive layout system and server according to some embodiments. In some embodiments, the responsive layout system and server are configured to be operatively coupled to thecomputer system 210 shown inFIG. 2 . In some embodiments, thecomputer system 210 is configured to comprise the responsive layout system and server. In some embodiments, thecomputer system 210 is configured to include and/or operate and/or process computer-executable code of one or more of the above-mentioned program logic, software modules, and/or systems. Further, in some embodiments, thecomputer system 210 is configured to operate and/or display information within one or more graphical user interfaces coupled to the responsive layout system and server. In some embodiments, thecomputer system 210 comprises a cloud server and/or is configured to be coupled to one or more cloud-based server systems. - In some embodiments, the
system 210 comprises at least one computer including at least oneprocessor 232. In some embodiments, the at least oneprocessor 232 includes a processor residing in, or coupled to, one or more server platforms. In some embodiments, thesystem 210 includes anetwork interface 235 a and anapplication interface 235 b coupled to the least oneprocessor 232 capable of processing at least oneoperating system 234. Further, in some embodiments, theinterfaces processor 232 is configured to process one or more of the software modules 238 (e.g., such as enterprise applications). In some embodiments, thesoftware modules 238 include server-based software, and operate to host at least one user account and/or at least one client account, and operate to transfer data between one or more of these accounts using the at least oneprocessor 232. - With the above embodiments in mind, it should be understood that the invention can employ various computer-implemented operations involving data stored in computer systems. Moreover, in some embodiments, the above-described databases and models described throughout can store analytical models and other data on computer-readable storage media within the
system 210 and on computer-readable storage media coupled to thesystem 210. In addition, in some embodiments, the above-described applications of the system are configured to be stored on computer-readable storage media within thesystem 210 and/or on computer-readable storage media coupled to thesystem 210. In some embodiment, these operations are those requiring physical manipulation of physical quantities. Usually, though not necessarily, in some embodiments, these quantities take the form of electrical, electromagnetic, or magnetic signals, optical or magneto-optical form capable of being stored, transferred, combined, compared and otherwise manipulated. In some embodiments, thesystem 210 comprises at least one computerreadable medium 236 coupled to at least onedata source 237 a, and/or at least onedata storage device 237 b, and/or at least one input/output device 237 c. - In some embodiments, the invention is embodied as computer readable code on a computer
readable medium 236. In some embodiments, the computerreadable medium 236 is any data storage device that can store data, which can thereafter be read by a computer system (such as the system 210). In some embodiments, the computerreadable medium 236 is any physical or material medium that can be used to tangibly store the desired information or data or instructions and which can be accessed by a computer orprocessor 232. - In some embodiments, the computer
readable medium 236 includes hard drives, network attached storage (NAS), read-only memory, random-access memory, FLASH based memory, CD-ROMs, CD-Rs, CD-RWs, DVDs, magnetic tapes, other optical and non-optical data storage devices. In some embodiments, various other forms of computer-readable media 236 transmit or carry instructions to acomputer 240 and/or at least oneuser 231, including a router, private or public network, or other transmission device or channel, both wired and wireless. In some embodiments, thesoftware modules 238 is configured to send and receive data from a database (e.g., from a computerreadable medium 236 includingdata sources 237 a anddata storage 237 b that comprises a database), and data is received by thesoftware modules 238 from at least one other source. In some embodiments, at least one of thesoftware modules 238 is configured within the system to output data to at least oneuser 231 via at least one graphical user interface rendered on at least one digital display. - In some embodiments, the computer
readable medium 236 is distributed over a conventional computer network via thenetwork interface 235 a where the system embodied by the computer readable code can be stored and executed in a distributed fashion. For example, in some embodiments, one or more components of thesystem 210 is configured to send and/or receive data through a local area network (“LAN”) 239 a and/or an internet couplednetwork 239 b (e.g., such as a wireless internet). In some further embodiments, thenetworks readable media 236, and/or any combination thereof - In some embodiments, components of the
networks LAN 239 a. For example, some embodiments include personal computers 240 a coupled through theLAN 239 a that can be configured for any type of user including an administrator. Some embodiments include personal computers coupled throughnetwork 239 b. In some further embodiments, one or more components of thesystem 210 are coupled to send or receive data through an internet network (e.g., such asnetwork 239 b). - For example, some embodiments include at least one
user 231 coupled wirelessly and accessing one or more software modules of the system including at least oneenterprise application 238 via an input and output (“I/O”)device 237 c. In some other embodiments, thesystem 210 can enable at least oneuser 231 to be coupled to accessenterprise applications 238 via an I/O device 237 c throughLAN 239 a. In some embodiments, theuser 231 can comprise auser 231 a coupled to thesystem 210 using a desktop computer, laptop computers, and/or any fixed, generally non-mobile internet appliances coupled through theinternet 239 b. In some further embodiments, theuser 231 comprises amobile user 231 b coupled to thesystem 210. In some embodiments, theuser 231 b can use anymobile computer 231 c to wireless coupled to thesystem 210, including, but not limited to, personal digital assistants, and/or cellular phones, mobile phones, or smart phones, and/or pagers, and/or digital tablets, and/or fixed or mobile internet appliances. - Acting as Applicant's own lexicographer, Applicant defines the use of and/or, in terms of “A and/or B,” to mean one option could be “A and B” and another option could be “A or B.” Such an interpretation is consistent with the USPTO Patent Trial and Appeals Board ruling in ex parte Gross, where the Board established that “and/or” means element A alone, element B alone, or elements A and B together.
- Some embodiments of the system are presented with specific values and/or setpoints. These values and setpoints are not intended to be limiting, and are merely examples of a higher configuration versus a lower configuration and are intended as an aid for those of ordinary skill to make and use the system. In addition, “substantially” and “approximately” when used in conjunction with a value encompass a difference of 10% or less of the same unit and scale of that being measured. In some embodiments, “substantially” and “approximately” are defined as presented in the specification.
- It is understood that the system is not limited in its application to the details of construction and the arrangement of components set forth in the previous description or illustrated in the drawings. The system and methods disclosed herein fall within the scope of numerous embodiments. The previous discussion is presented to enable a person skilled in the art to make and use embodiments of the system. Modifications to the illustrated embodiments and the generic principles herein can be applied to all embodiments and applications without departing from embodiments of the system. Also, it is understood that features from some embodiments presented herein are combinable with other features according to some embodiments. Thus, some embodiments of the system are not intended to be limited to what is illustrated but are to be accorded the widest scope consistent with all principles and features disclosed herein.
Claims (18)
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US16/999,889 US20210056935A1 (en) | 2019-08-21 | 2020-08-21 | Responsive layout system and server |
US17/688,256 US11823647B2 (en) | 2019-08-21 | 2022-03-07 | Responsive layout system and server |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US201962890011P | 2019-08-21 | 2019-08-21 | |
US16/999,889 US20210056935A1 (en) | 2019-08-21 | 2020-08-21 | Responsive layout system and server |
Related Child Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US17/688,256 Continuation US11823647B2 (en) | 2019-08-21 | 2022-03-07 | Responsive layout system and server |
Publications (1)
Publication Number | Publication Date |
---|---|
US20210056935A1 true US20210056935A1 (en) | 2021-02-25 |
Family
ID=74646336
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US16/999,889 Abandoned US20210056935A1 (en) | 2019-08-21 | 2020-08-21 | Responsive layout system and server |
US17/688,256 Active US11823647B2 (en) | 2019-08-21 | 2022-03-07 | Responsive layout system and server |
Family Applications After (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US17/688,256 Active US11823647B2 (en) | 2019-08-21 | 2022-03-07 | Responsive layout system and server |
Country Status (4)
Country | Link |
---|---|
US (2) | US20210056935A1 (en) |
EP (1) | EP4018352A4 (en) |
CN (1) | CN114365084A (en) |
WO (1) | WO2021035165A1 (en) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US11922110B2 (en) * | 2021-11-24 | 2024-03-05 | Adobe Inc. | Responsive document authoring |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116719597B (en) * | 2023-08-10 | 2024-01-26 | 北京冠群信息技术股份有限公司 | Self-adaptive view rendering method and creation method based on grid layout |
Family Cites Families (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8881039B2 (en) | 2009-03-13 | 2014-11-04 | Fisher-Rosemount Systems, Inc. | Scaling composite shapes for a graphical human-machine interface |
US20130305145A1 (en) | 2012-05-09 | 2013-11-14 | Ni Group Limited | A Method of Publishing Digital Content |
US20140258849A1 (en) * | 2013-03-06 | 2014-09-11 | Google Inc. | Automatic Alignment of a Multi-Dimensional Layout |
US9389759B2 (en) * | 2013-05-07 | 2016-07-12 | Axure Software Solutions, Inc. | Environment for responsive graphical designs |
CN110413925B (en) * | 2013-09-12 | 2023-12-12 | 维克斯网有限公司 | System and method for automatic transition between an interactive site and applications for supporting mobile devices and other display environments |
US9898255B2 (en) * | 2013-11-13 | 2018-02-20 | Sap Se | Grid designer for multiple contexts |
GB2523441A (en) | 2014-02-19 | 2015-08-26 | Sita Information Networking Computing Ireland Ltd | Reservation system and method therefor |
KR101509392B1 (en) * | 2014-03-10 | 2015-04-07 | 윤영조 | Method for making homepage on the world wide web therefor |
US10275142B2 (en) | 2014-10-29 | 2019-04-30 | International Business Machines Corporation | Managing content displayed on a touch screen enabled device |
US10209849B2 (en) * | 2015-01-21 | 2019-02-19 | Microsoft Technology Licensing, Llc | Adaptive user interface pane objects |
WO2017017664A1 (en) * | 2015-07-30 | 2017-02-02 | Wix.Com Ltd. | System integrating a mobile device application creation, editing and distribution system with a website design system |
CN105740315B (en) * | 2015-12-31 | 2019-10-11 | 南京焦点领动云计算技术有限公司 | The method of one kind of multiple screen response type page layout adjustment |
KR101760777B1 (en) * | 2016-01-09 | 2017-08-04 | 주식회사 넥스트비즈 | System of Building Responsive Website And Method there-of |
US20170322704A1 (en) | 2016-05-03 | 2017-11-09 | Google Inc. | Composition of a user interface through data binding |
MX2019001112A (en) * | 2016-07-27 | 2019-06-10 | Wix Com Ltd | System and method for implementing containers which extract and apply semantic page knowledge. |
CN106407261A (en) * | 2016-08-24 | 2017-02-15 | 上海斐讯数据通信技术有限公司 | Method for enabling page to be adaptive to screen and intelligent terminal |
KR101771473B1 (en) * | 2017-04-20 | 2017-08-25 | 주식회사 코코아스튜디오 | Method and apparatus for generating responsive webpage |
CN107193518B (en) * | 2017-05-23 | 2021-08-03 | 腾讯科技(深圳)有限公司 | Information display method and terminal equipment |
KR20190001894A (en) * | 2017-06-28 | 2019-01-07 | 주식회사 오리지널메이커스 | Method for creating web documents and Apparatus thereof |
US20190087069A1 (en) | 2017-09-21 | 2019-03-21 | Rockwell Automation Technologies, Inc. | Tiling content for presentation on different display sizes |
US10318629B2 (en) | 2017-11-01 | 2019-06-11 | Microsoft Technology Licensing, Llc | Adaptive content rendering for optimizing page layout |
-
2020
- 2020-08-21 CN CN202080063759.8A patent/CN114365084A/en active Pending
- 2020-08-21 WO PCT/US2020/047465 patent/WO2021035165A1/en unknown
- 2020-08-21 EP EP20854414.8A patent/EP4018352A4/en active Pending
- 2020-08-21 US US16/999,889 patent/US20210056935A1/en not_active Abandoned
-
2022
- 2022-03-07 US US17/688,256 patent/US11823647B2/en active Active
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US11922110B2 (en) * | 2021-11-24 | 2024-03-05 | Adobe Inc. | Responsive document authoring |
Also Published As
Publication number | Publication date |
---|---|
CN114365084A (en) | 2022-04-15 |
EP4018352A1 (en) | 2022-06-29 |
US11823647B2 (en) | 2023-11-21 |
EP4018352A4 (en) | 2023-09-13 |
US20230018841A1 (en) | 2023-01-19 |
WO2021035165A1 (en) | 2021-02-25 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10732803B2 (en) | Presentation and analysis of user interaction data | |
US11823647B2 (en) | Responsive layout system and server | |
US10331394B1 (en) | Manipulating shared screen content | |
US8402379B2 (en) | Dynamic content layout for a user interface display | |
US9256587B2 (en) | Editor for website and website menu | |
US8194099B2 (en) | Techniques for displaying digital images on a display | |
US8456488B2 (en) | Displaying digital images using groups, stacks, and version sets | |
US8448074B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
US7719548B2 (en) | Viewing digital images using a floating controller | |
US8689108B1 (en) | Presentation and analysis of user interaction data | |
CN112115390A (en) | Method, device and equipment for displaying topology structure diagram and storage medium | |
US20170131874A1 (en) | Software Design Tool For A User Interface And The Administration Of Proximity Responsive Information Displays In Augmented Reality Or Virtual Reality Environments | |
US9105094B2 (en) | Image layers navigation | |
US20190227701A1 (en) | Facilitating the prototyping and previewing of design element state transitions in a graphical design environment | |
US10467782B2 (en) | Interactive hierarchical bar chart | |
JP2023182690A (en) | Operator screen switching preview | |
WO2019039255A1 (en) | Terminal device, ui extension method, and ui extension program | |
JP5303534B2 (en) | Appearance information processing apparatus and method | |
US9489363B2 (en) | User configurable user interface | |
CN112162805A (en) | Screenshot method and device and electronic equipment | |
JP2016218538A (en) | Program, information processing method, image processor, and server | |
JP2012043297A (en) | Information processing unit, information processing method, and program thereof |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
AS | Assignment |
Owner name: AVEVA SOFTWARE, LLC, CALIFORNIA Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNORS:BECKMAN, ALLAN SCOTT;SINGH, MANORANJAN KUMAR;CHAU, CHUNGHO;AND OTHERS;SIGNING DATES FROM 20191011 TO 20191014;REEL/FRAME:053571/0436 |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: DOCKETED NEW CASE - READY FOR EXAMINATION |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: NON FINAL ACTION MAILED |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: RESPONSE TO NON-FINAL OFFICE ACTION ENTERED AND FORWARDED TO EXAMINER |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: FINAL REJECTION MAILED |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: ADVISORY ACTION MAILED |
|
STCB | Information on status: application discontinuation |
Free format text: ABANDONED -- FAILURE TO RESPOND TO AN OFFICE ACTION |