Various embodiments of the present disclosure relate generally to methods and systems for dynamic visualization presentation and, more particularly, to methods and systems for dynamic viewing based on screen display sizes.
There is increased variability in display sizes for documents such as, e.g., software applications. Users can use multiple devices with varying screen sizes, can resize screens on a single device, and/or one or more software programs can modify screen sizes (e.g., based on user preference, displayed content, etc.). It is cumbersome and inefficient to program different interfaces for different screen sizes. For example, a developer may program a first interface for a desktop application and a second interface for a mobile application. Additionally, such programming may not be conducive to a screen size that is not previously contemplated by the developer (e.g., a newly dimensioned mobile device).
The present disclosure is directed to overcoming one or more of these above-referenced challenges. The background description provided herein is for the purpose of generally presenting the context of the disclosure. Unless otherwise indicated herein, the materials described in this section are not prior art to the claims in this application and are not admitted to be prior art, or suggestions of the prior art, by inclusion in this section.
According to certain aspects of the disclosure, systems, methods, and computer-readable medium are disclosed for dynamically displaying containers. For instance, a method may include: receiving at least one container comprising content viewable via a document; receiving a minimum display size for the document; monitoring a display size of the document; determining that the display size of the document is less than the minimum display size, based on the monitoring; determining a visible section and a hidden section of the document based on the display size and based on determining that the display size of the document is less than the minimum display size, the hidden section comprising at least a portion of the at least one container; displaying the visible section of the document via a display; activating a scroll feature based on a hidden section size; receiving an indication to scroll the document in a scroll direction; updating the visible section to an updated visible section that includes at least a portion of the hidden section, based on the indication to scroll the document in the scroll direction; and displaying the updated visible section of the document via the display.
Furthermore, a system may include at least one memory storing instructions; and at least one processor executing the instructions to perform operations. The operations may include: receiving at least one container comprising content viewable via a document; receiving a minimum display size for the document; monitoring a display size of the document; determining that the display size of the document is less than the minimum display size, based on the monitoring; determining a visible section and a hidden section of the document based on the display size and based on determining that the display size of the document is less than the minimum display size, the hidden section comprising at least a portion of the at least one container; displaying the visible section of the document via a display; activating a scroll feature based on a hidden section size; receiving an indication to scroll the document in a scroll direction; updating the visible section to an updated visible section that includes at least a portion of the hidden section, based on the indication to scroll the document in the scroll direction; and displaying the updated visible section of the document via the display.
Moreover, a non-transitory computer-readable medium may store instructions that, when executed by a processor, cause the processor to perform operations. The operations may include: receiving at least one container comprising content viewable via a document; receiving a minimum display size for the document; monitoring a display size of the document; determining that the display size of the document is less than the minimum display size, based on the monitoring; determining a visible section and a hidden section of the document based on the display size and based on determining that the display size of the document is less than the minimum display size, the hidden section comprising at least a portion of the at least one container; displaying the visible section of the document via a display; activating a scroll feature based on a hidden section size; receiving an indication to scroll the document in a scroll direction; updating the visible section to an updated visible section that includes at least a portion of the hidden section, based on the indication to scroll the document in the scroll direction; and displaying the updated visible section of the document via the display.
Additional objects and advantages of the disclosed embodiments will be set forth in part in the description that follows, and in part will be apparent from the description, or may be learned by practice of the disclosed embodiments.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosed embodiments, as claimed.
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate various exemplary embodiments and together with the description, serve to explain the principles of the disclosed embodiments.
Various embodiments of the present disclosure relate generally to methods and systems for dynamic component visualization.
In general, the present disclosure is directed to improving display technology by dynamically displaying components based on screen properties (e.g., display size). The techniques disclosed herein reduce the number of iterations of a given document (e.g., a software application) needed by, e.g., removing the need for multiple iterations of content or designs for different screen properties (e.g., different screen sizes). The techniques disclosed herein also reduce network transmission requirements by minimizing the iterations of content (e.g., images) retrieved for a given document. For example, instead of having multiple different image resolutions of the same image stored in a database, such that different sized interfaces pull different image resolutions, a single pull may be sufficient. The single pull may obtain the content to be displayed via a document that can be different sizes. The document may be segregated into visible and hidden sections based on the document size, resulting in dynamic visibility of the content based on the document size. This configuration requires less instances of network access and pulls, thereby reducing the multiple network touches and associated inefficiencies. This configuration also prevents content congestion (e.g., overlapping content) in a given document.
Embodiments of the disclosed subject matter are directed to adjusting the amount of a given document displayed, based on the document's display size. An author may design a document (e.g., dossier, dashboard, software application, etc.) using an author portal. The document may be designed at a given display size (e.g., a resolution that presents the entire document on a single screen). The author or a machine learning model may determine a minimum display size based on the design of the document (e.g., based on the document layout). The minimum display size may be one that if a user views the document with a display size below the minimum display size, instead of congesting different containers on the document in limited space, the document extends to a hidden section and a scroll functionality is activated to scroll between different sections of the document. The hidden section changes based on a scroll amount.
The minimum display size is determined at a design stage and can ensure that a given document is displayed as designed by an author. Accordingly, a design stage based determination of a minimum display size may be preferable to a content-based display size threshold (e.g., based on a container size, image resolutions, etc.), because if a display size threshold is determined by content (e.g., for a web browser displaying a variety of websites with different content), then the container arrangements and the design of the document may unintentionally change.
As applied herein, a container may be any stand-alone or in-line item of content such as an image, a graphic, a video, a banner, a text, a visualization, an overlay, or the like, that can be displayed via a document. The container may be provided to a document from a memory or storage (e.g., a database) and/or may be fully or partially generated at the document. For example, a container may be generated based on code from a document compiler that calls for an image to be pulled from a database. The example container may be generated based on compiling the code and retrieving the image from the database. A container may be static or dynamic. A dynamic container may be updated based on a passing of time (e.g., a pre-determined amount of time) or a trigger condition (e.g., an event, update, etc.). The update may include retrieving updated content from a memory or database.
As applied herein, a display packet may be a grouping of containers for display via a document. The display packet may be stored in a given location (e.g., remote or local memory or database) and components (e.g., containers) of the display packet may be stored in different locations. The display packet may include all or a portion of the content that is displayed by a document at a given time. The display packet may also include relationships between two or more containers, as further disclosed herein. The relationships and/or metadata or other data associated with the containers included in a display packet may also be stored in the display packet or be associated with the display packet (e.g., via a separate file, via a header, etc.).
As applied herein, a document may be any dossier, dashboard, interface, display, output, or the like that can provide components (e.g., content) to a user. A document may be a webpage, an application (e.g. a software application, a mobile application, a proprietary application, etc.), a projection, a software or software implementation, a browser, or the like. The document may receive containers from one or more databases and may also receive or may be configured based on one or more display indications. The document display size of a document may be, at least in part, modifiable by a user (e.g., a resize, a snap to size, etc.). Alternatively, or in addition, the document display size may be determined based on a device (e.g., a screen size) or software application.
As applied herein, a display size may be the size of a display (e.g., a computer screen, laptop screen, monitor, mobile device screen, wearable device screen, projection, etc.) if the document is expanded a boundary of the display (e.g., if a mobile application occupies the entire screen of a mobile phone). Alternatively, the display size may be the size of a document. The side of the document may be the size that the document is displayed on the display by default, or by user selection. The size of the document may be modified (e.g., by a user, by a positioning tool, by a snap tool, or the like). As applied herein, the display size may be any applicable dimension. For example, the display size may be a resolution, a height, a width, a diagonal measurement, or the like. The display size may be measured in any applicable unit of measurement such as a number of pixels, inches, centimeters, or the like. A vertical display size and minimum display size is used throughout this disclosure as an example. It will be understood that although a vertical display size and vertical minimum display size are used as examples, any other display size (e.g., horizontal, diagonal, a resolution, etc.) may be used to perform the implementations disclosed herein.
As applied herein, a scroll feature may fluctuate between sections of a document such that a portion of the document is visible at a first time and a second portion of the document is visible at a second time after activation of the scroll feature. The scroll feature may be implemented using any applicable scroll input such as a mouse roller roll, a scroll gesture (e.g., using a touch response), a button press, a swipe, or the like. For example, a scroll function may provide the effect of moving a document up or down to pass through different sections of the document.
The embodiments disclosed herein reduce on screen congestion and reduce the need for larger displays. By applying the dynamic viewing for document sizes based on a minimum display size, a user may be provided a document as designed by an author without having to view the document on a screen that is as large as the document design screen.
A client 102 may be in communication with the user device and/or the server 125 via network 120. Network 120 may communicate with client 102 via a network interface 102A at client 102. An author portal, as disclosed herein, may be provided at client 102 such that one or more display indications are provided from client 102 (e.g., via input from a user) to a document at user device 101 or processor of user device 101.
Environment 100 may include one or more computer systems configured to gather, process, transmit, and/or receive data. In general, whenever environment 100 or components thereof is described as performing an operation of gathering, processing, transmitting, or receiving data, it is understood that such operation may be performed by a computer system thereof.
The display packet including the at least one container may be received based on a trigger. The trigger may be, for example, a document initiation, a user action, a preconfigured action, or the like. For example, a user may activate a software application on user device 101 and, based on the user activating the software application, the display packet including the at least one container may be retrieved from memory, cache, or from a database (e.g., server 125 via network 120). The display packet may receive the at least one container from memory, cache, or a database. Alternatively, or in addition, client 102 may provide all or a portion of the at least one container to be provided via the display packet.
At 204 of
The minimum display size may also include an indication of a dimension, orientation, and/or unit of measurement that the minimum display size corresponds to. The dimension, orientation, and/or unit of measurement may be incorporated into the minimum display size or may be provided in addition to the minimum display size (e.g., as metadata). As an example of a dimension, orientation, and/or unit of measurement may be included as digits of a binary sequence (e.g., 000101011101) where one or more digits indicate one or more of the dimension, orientation, and/or unit of measurement and one or more other digits indicate the actual minimum display size.
The minimum display size may be provided by client 102 and may be updated from time to time. Client 102 may generate the minimum display size using an author portal, as further discussed herein. An author may use the author portal to provide the minimum display size at client 102. Client 102 may then transmit the minimum display size over network 120 such that a user device 101 that displays the document can apply the minimum display size, as discussed herein.
At 206 of
The display size may be monitored by a document identifying its size. The document may report its size to an application, software, or to the user device 101 that applies the minimum display size based techniques disclosed herein, or may self-monitor its size to apply the minimum display size based techniques disclosed herein. A document's display size may be stored (e.g., in local cache). According to an implementation, a document's display size may be monitored based on periodic pings to determine a current display size at each ping. The frequency of the periodic pings may be predetermined or dynamically determined. A pre-determined frequency may be provided by an author via an author portal or may be provided by any applicable entity. A dynamically determined frequency may be determined by a machine learning algorithm. The machine learning algorithm may be trained based on, for example, previous monitoring of the document or similar documents and their respective changes in size, frequency of periodic pings, or the like. The machine learning model may output a frequency based on its training and inputs such as document properties, device(s) used to view the document, and/or the like.
The display size of a document may be monitored in pixels, widths, heights, another dimension, or the like. A given unit of measurement (e.g., pixels, inches, centimeters, etc.) may be converted to one or more other units before it is compared to a minimum display size, as discussed herein. The conversion may be conducted using any applicable processor at a user device 101 or another component.
The display size may be monitored by a user device 101 detecting the document size. A software code or program may determine the display size of a given document continuously or at predetermined or dynamically determined frequencies, as discussed above. Alternatively, or additionally, the display size of the document may be based on an amount of space that a document covers in relation to the amount of space one or more other documents cover on a display.
The display size of a document may change based on the orientation of user device 101 (e.g., landscape, portrait, etc.). Alternatively, the display size of a document may change based on a user action (e.g., a resize of a document screen, initiating or prioritizing another application, etc.). The display size of the document may be based on the portion of a display area (e.g., a screen, projection, etc.) that a document occupies.
At 208 of
At 210 of
For example, the minimum display size may be a height of 2000 pixels for a dashboard. Monitoring the display size of the dashboard may result in a determination that a current display size of the dashboard is 1100 pixels. Based on the determination that the minimum display size is larger than the current display size, a visible section and a hidden section may be determined. The visible section may correspond to the 1100/2000th percent (i.e., 55%) of the document and the hidden section may correspond to the 900/2000th percent (i.e., 45%) of the document. According to this example, the visible section may be the proportion of the minimum display size (i.e., 2000 pixels in this example) that corresponds to the display size (i.e., 1100 pixels in this example). Accordingly, the hidden section may be the remaining proportion of the minimum display size (i.e., 900/2000 pixels). Accordingly, based on this example, the visible section plus the hidden section may correspond to the minimum display size.
Although a direct proportion such that the visible section plus the hidden section corresponds to the minimum display size is provided in the example above, it will be understood that a different proportion may be used for the visible section and hidden section. For example, a machine learning model may be used to determine the size of the visible section and/or the hidden section based on the current display size, minimum display size, one or more other dimensions or the like. Accordingly, the visible section plus the hidden section may not add up to the minimum display size.
According to an implementation, the visible section and the hidden section may include at least a portion of the at least one container received at 202. For example, if a given document includes five containers, at least a part of one of the five containers may be part of the visible section and at least a part of one of the five containers may be part of the hidden section. In this example, the same container may be part of the visible section and the hidden section.
At 212, the visible section of the document may be provided via a display. The visible section may be provided such that a user using user device 101 is able to view the visible section of the document (e.g., via user device 101 screen, projection, etc.). The visible section may initially be displayed such that visible section includes the top most part of the document. Accordingly, the user may be able to view at least the portion of the at least one container received at 202, that is part of the visible section displayed at 212.
At 214, a scroll feature may be activated. The scroll feature may be activated by the document, user device 101, or by another component. The scroll feature may be activated based on the determination of the hidden section at 210. The scroll feature may be activated so that a user is provided access to view the hidden section when the display size is less than the minimum display size.
The scroll feature may be implemented using any applicable scroll input such as a mouse roller roll, a scroll gesture (e.g., using a touch response), a button press, a swipe, or the like. For example, a scroll function may provide the effect of moving a document up or down to pass through different sections of the document.
An indication that the scroll feature is activated may be provided to a user. The indication may be a visual indication, a haptic indication, or an auditory indication. For example, the user may be provided a scroll bar to indicate that a hidden section of the document is visible by using the scroll feature. As another example, an arrow or other visual indication may be provided near or overlaid on the document to indicate a hidden section. As another example, a sound may be output from a speaker to indicate to the user that a hidden section is available. As another example, a haptic response or vibration may be present to the user to indicate that a hidden section is available.
The scroll feature may be activated by the document, user device 101, or another applicable component. Activating the scroll feature may include modifying the visible section window of the document such that upon receipt of a scroll input (e.g., user input via a mouse, gesture, swipe, etc.), the portion of the document that corresponds to a visible section may be replaced by at least a portion of the document that corresponds to a hidden section before the scroll input.
At 216, the visible section of a document may be updated to an updated visible section that includes a portion of the hidden section determined at 210. The updated visible section may or may not include a portion of the original visible section, based on the extent of the scroll input. Generating the updated visible section (e.g., scrolling in a given direction) may result in generating an updated hidden section. If the original hidden section included a contiguous section, the updated hidden section may include two or more portions (e.g., one above the visible section and one below the visible section). If the original hidden section included separated sections, the updated hidden section may include two or more portions or may be a single contiguous section.
At 218, the updated visible section of the document may be displayed via the display. The updated visible section and the updated hidden section may be considered the visible section and hidden section such that further scroll input may result in a new updated visible section and new updated hidden section. Accordingly, a user may view the entire document by using the scroll function based on modifying the visible sections and hidden sections. The user may provide scroll input to replace an updated visible section with a previous visible section to review a previously visible section of the document.
After 218, a determination may be made that that the display size of the document is greater than or equal to the minimum display size, based on the continuous monitoring at 206. For example, the document may be resized by a user or a program, or the orientation of a user device 101 may be adjusted, or a different change may be made that causes a change in the size of the document. Upon determining that the display size of the document is greater than or equal to the minimum display size, the scroll feature activated at 214 may be deactivated. Accordingly, the entire document including all the components may be provided via a display.
According to an implementation of the disclosed subject matter, one or more containers received at 202 may be resized based on the display size of the document providing the one or more containers. The one or more containers may be resized based on a first rule or set of rules if the document is larger than the minimum display size, and may be resized based on a second rule or set of rules if the document is smaller than the minimum display size. For example, if the document is larger than the minimum display size, then the one or more containers may be resized such that the one or more containers proportionally fill the space created by the document. Continuing the example, if the document is smaller than the minimum display size, then the one or more containers may resize up to a certain proportion in one specific dimension (e.g., width).
The minimum display size disclosed herein may be document specific such that an author may designate a minimum display size for each document output by an author portal. The author may determine the minimum display size based on the document design. For example, the author may determine the minimum display size based on the containers included in the display packet of the document. However, it will be understood that the minimum display size is container agnostic such that the presence of one or more containers or a property of a given container may not result in a specific minimum display size. For example, the containers of a document may occupy 1900 pixels of height combined. However, an author or a machine learning model may determine that the minimum display size is 2000 pixels for optimal aesthetic display of the document that includes the containers.
According to an implementation, a minimum display size may be updated. The minimum display size may be updated by an author or a machine learning model. The minimum display size may be updated after a document has been published by a user device 101. Accordingly, a determination may be made that a given display size of the document after the minimum display size has been updated, is less than the updated minimum display size. Based on the determination, a new visible section and new hidden section of the document may be determined based on the updated display size. The new hidden section may include at least a portion of the at least one container of the document. A scroll feature may be activated based on the new hidden section size (i.e., the scroll feature may be different than the original scroll feature based on the original minimum display size). The new visible section of the document may be displayed via the display. An indication to scroll the document in a new scroll direction may be received. It will be understood that the new scroll direction may be the same as an original scroll direction or may be different from the original scroll direction. Based on the indication to scroll in the new scroll direction. The new visible section may be updated to a new visible section that includes a portion of the new hidden section. The updated new visible section of the document may be displayed via the display.
As disclosed, one or more implementations described herein include a machine learning model. A machine learning model disclosed herein may be trained using the data flow 300 of
The training data 312 and a training algorithm 320 may be provided to a training component 330 that may apply the training data 312 to the training algorithm 320 to generate a machine learning model. According to an implementation, the training component 330 may be provided comparison results 316 that compare a previous output of the corresponding machine learning model to apply the previous result to re-train the machine learning model. The comparison results 316 may be used by the training component 330 to update the corresponding machine learning model. The training algorithm 320 may utilize machine learning networks and/or models including, but not limited to a deep learning network such as Deep Neural Networks (DNN), Convolutional Neural Networks (CNN), Fully Convolutional Networks (FCN) and Recurrent Neural Networks (RCN), probabilistic models such as Bayesian Networks and Graphical Models, and/or discriminative models such as Decision Forests and maximum margin methods, or the like.
A minimum display size 402 may be provided by client 102 or may be determined by a machine learning model. The minimum display size 402 may be a pixel based minimum display size or a dimension based minimum display size. For example, the minimum display size may be a height of 800 pixels such that when the height of the document cross 800 pixels (e.g., go below 800 pixels), a visible section and a hidden section is determined. In the example provided in
As shown, as a result of the first hidden section 530A and second hidden section 530B, a part of container 502 is displayed (i.e., a portion of container 502 is within visible section 520), a part of container 502 is hidden (i.e., a portion of container 502 is within hidden section 530A), all of container 504 is displayed (i.e., all of container 504 is within the visible section 520), a part of container 506 is displayed (i.e., a portion of container 506 is within visible section 520), and a part of container 506 is hidden (i.e., a portion of container 506 is within hidden section 530B).
According to an implementation, the author may size the document canvas to a given size (e.g., display size 400A as shown in the example provided in
According to an implementation, the author may select detect display size button 612. Selection of the detect display size button 612 may result in author portal 600 detecting the current display size of the document canvas. The detected size may be provided to author and/or may be stored. The detected size may be designated as the minimum display size or may be modified by the user before being designated as the minimum display size.
As disclosed herein, an author may update the minimum display size of a document.
In general, any process or operation discussed in this disclosure that is understood to be computer-implementable, such as the process illustrated in
The general discussion of this disclosure provides a brief, general description of a suitable computing environment in which the present disclosure may be implemented. In one embodiment, any of the disclosed systems, methods, and/or graphical user interfaces may be executed by or implemented by a computing system consistent with or similar to that depicted and/or explained in this disclosure. Although not required, aspects of the present disclosure are described in the context of computer-executable instructions, such as routines executed by a data processing device, e.g., a server computer, wireless device, and/or personal computer. Those skilled in the relevant art will appreciate that aspects of the present disclosure can be practiced with other communications, data processing, or computer system configurations, including: Internet appliances, hand-held devices (including personal digital assistants (“PDAs”)), wearable computers, all manner of cellular or mobile phones (including Voice over IP (“VoIP”) phones), dumb terminals, media players, gaming devices, virtual reality devices, multi-processor systems, microprocessor-based or programmable consumer electronics, set-top boxes, network PCs, mini-computers, mainframe computers, and the like. Indeed, the terms “computer,” “server,” and the like, are generally used interchangeably herein, and refer to any of the above devices and systems, as well as any data processor.
Aspects of the present disclosure may be embodied in a special purpose computer and/or data processor that is specifically programmed, configured, and/or constructed to perform one or more of the computer-executable instructions explained in detail herein. While aspects of the present disclosure, such as certain functions, are described as being performed exclusively on a single device, the present disclosure may also be practiced in distributed environments where functions or modules are shared among disparate processing devices, which are linked through a communications network, such as a Local Area Network (“LAN”), Wide Area Network (“WAN”), and/or the Internet. Similarly, techniques presented herein as involving multiple devices may be implemented in a single device. In a distributed computing environment, program modules may be located in both local and/or remote memory storage devices.
Aspects of the present disclosure may be stored and/or distributed on non-transitory computer-readable media, including magnetically or optically readable computer discs, hard-wired or preprogrammed chips (e.g., EEPROM semiconductor chips), nanotechnology memory, biological memory, or other data storage media. Alternatively, computer implemented instructions, data structures, screen displays, and other data under aspects of the present disclosure may be distributed over the Internet and/or over other networks (including wireless networks), on a propagated signal on a propagation medium (e.g., an electromagnetic wave(s), a sound wave, etc.) over a period of time, and/or they may be provided on any analog or digital network (packet switched, circuit switched, or other scheme).
Program aspects of the technology may be thought of as “products” or “articles of manufacture” typically in the form of executable code and/or associated data that is carried on or embodied in a type of machine-readable medium. “Storage” type media include any or all of the tangible memory of the computers, processors or the like, or associated modules thereof, such as various semiconductor memories, tape drives, disk drives and the like, which may provide non-transitory storage at any time for the software programming. All or portions of the software may at times be communicated through the Internet or various other telecommunication networks. Such communications, for example, may enable loading of the software from one computer or processor into another, for example, from a management server or host computer of the mobile communication network into the computer platform of a server and/or from a server to the mobile device. Thus, another type of media that may bear the software elements includes optical, electrical and electromagnetic waves, such as used across physical interfaces between local devices, through wired and optical landline networks and over various air-links. The physical elements that carry such waves, such as wired or wireless links, optical links, or the like, also may be considered as media bearing the software. As used herein, unless restricted to non-transitory, tangible “storage” media, terms such as computer or machine “readable medium” refer to any medium that participates in providing instructions to a processor for execution.
The terminology used above may be interpreted in its broadest reasonable manner, even though it is being used in conjunction with a detailed description of certain specific examples of the present disclosure. Indeed, certain terms may even be emphasized above; however, any terminology intended to be interpreted in any restricted manner will be overtly and specifically defined as such in this Detailed Description section. Both the foregoing general description and the detailed description are exemplary and explanatory only and are not restrictive of the features, as claimed.
As used herein, the terms “comprises,” “comprising,” “having,” including,” or other variations thereof, are intended to cover a non-exclusive inclusion such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements, but may include other elements not expressly listed or inherent to such a process, method, article, or apparatus.
In this disclosure, relative terms, such as, for example, “about,” “substantially,” “generally,” and “approximately” are used to indicate a possible variation of ±10% in a stated value.
The term “exemplary” is used in the sense of “example” rather than “ideal.” As used herein, the singular forms “a,” “an,” and “the” include plural reference unless the context dictates otherwise.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the invention being indicated by the following claims.