Patent Publication Number: US-11397983-B2

Title: Method, system and storage medium for providing timeline-based graphical user interface

Description:
CROSS-REFERENCE TO RELATED APPLICATION 
     This non-provisional application claims priority under 35 U.S.C. § 119(e) on U.S. provisional Patent Application No. 62/940,202 filed on Nov. 25, 2019, the entire contents of which are hereby incorporated by reference. 
    
    
     BACKGROUND OF THE INVENTION 
     1. Field of the Invention 
     The present disclosure relates to methods and systems for providing a user interface, and in particular to a method and system for providing a graphical user interface capable of displaying information in specific ways. 
     2. Description of the Related Art 
     It is always an important technical issue about software-based enhancement and hardware-based enhancement to the efficiency of users&#39; operating graphical user interfaces. Depending on the intended applications, engineers devise various graphical user interface functions to be performed with electronic devices and adjust the interface operation mechanism and the information displaying process, so as to improve user experience. 
     For instance, the surveillance camera only performs a surveillance function. After taking images at different time points, the conventional surveillance camera is incapable of identifying and sorting images automatically, thereby imposing a burden on users under certain circumstances. For instance, although the conventional surveillance camera is effective in taking images of babies daily to record developmental milestones of the babies, parents have to take time sorting the images. In view of the aforesaid drawback of the prior art, it is important to provide a user interface capable of identifying, sorting and displaying images automatically, so as to greatly reduce users&#39; burden. 
     BRIEF SUMMARY OF THE INVENTION 
     It is an object of the present disclosure to provide a method, system and electronic device readable storage medium for providing a timeline-based graphical user interface to automatically identify, sort and display images, thereby significantly reducing users&#39; burden. 
     To achieve at least the above object, the present disclosure provides a method for providing a timeline-based graphical user interface, comprising the steps of: receiving a plurality of edited images; and displaying the edited images on a graphical user interface and arranging the edited images according to a timeline, each of the edited images comprising a specific feature, wherein the graphical user interface is substantially in a shape of a rectangle, and the edited images are arranged along a straight line, which is parallel to a long side of the rectangle and passes a center of the rectangle. 
     In an embodiment, one of the edited image, which is the closest to a pre-defined visual center of the graphical user interface, is larger than remaining ones of the edited images and is provided with a special effect or deprived of a special effect. 
     In an embodiment, the specific feature is a facial expression feature. The step of editing images to obtain the edited images comprises: determining a center position of a face area corresponding to a facial expression feature and cutting the images including the face area centered at the center position of the face area. 
     In an embodiment, the graphical user interface has a dialog box corresponding to the edited images. The dialog content is obtained from a dialog database in accordance with an attribute and displayed in the dialog box. The attribute comprises a date related to the edited images. 
     In an embodiment, when the edited image is located at a pre-defined visual center of the graphical user interface, the edited image is enlarged. 
     In an embodiment, the graphical user interface is substantially in a shape of a rectangle. The edited images are arranged along a straight line, which is parallel to a long side of the rectangle and passes a center of the rectangle. 
     In an embodiment, the graphical user interface displays a prompt message corresponding to the edited image. Upon the prompt message is selected and a preference tag is set, an advertisement information corresponding to the prompt message is displayed. When an advertisement information is selected, a product purchase process is started. 
     According to another aspect of the present disclosure, a system for providing a timeline-based graphical user interface comprises a processor, a display device and a storage device. The storage device stores a plurality of program commands, such that the processor performs, after executing the program commands, the steps of: receiving a plurality of edited images and arranging the edited images on a graphical user interface according to a timeline, each of the edited images comprising a specific feature. The graphical user interface is substantially in a shape of a rectangle. The edited images are arranged along a straight line, which is parallel to a long side of the rectangle and passes a center of the rectangle. 
     According to another aspect of the present disclosure, a non-transient storage medium stores a plurality of program commands. After executing the program commands, an electronic device performs the steps of: receiving a plurality of edited images and arranging the edited images on a graphical user interface according to a timeline, each of the edited images comprising a specific feature. The graphical user interface is substantially in a shape of a rectangle. The edited images are arranged along a straight line, which is parallel to a long side of the rectangle and passes a center of the rectangle. 
     Therefore, the present disclosure can automatically identify and edit images with a specific feature and display the edited images according to a timeline on a graphical user interface to greatly reduce the user&#39;s burden. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         FIG. 1  is a schematic view showing a system for providing a timeline-based graphical user interface according to an embodiment of the present disclosure. 
         FIG. 2  is a flowchart of a method for providing a timeline-based graphical user interface according to an embodiment of the present disclosure. 
         FIG. 3  is a schematic view showing how to obtain edited images according to an embodiment of the present disclosure. 
         FIG. 4A  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 4B  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 4C  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 4D  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 4E  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 4F  is a schematic view showing a graphical user interface according to embodiments of the present disclosure. 
         FIG. 5A  is a schematic view showing a dialog box displayed on the graphical user interface and contents of the dialog databases according to embodiments of the present disclosure. 
         FIG. 5B  is a schematic view showing a dialog box displayed on the graphical user interface and contents of the dialog databases according to embodiments of the present disclosure. 
         FIG. 5C  is a schematic view showing a dialog box displayed on the graphical user interface and contents of the dialog databases according to embodiments of the present disclosure. 
         FIG. 5D  is a schematic view showing a dialog box displayed on the graphical user interface and contents of the dialog databases according to embodiments of the present disclosure. 
         FIG. 5E  is a schematic view showing a dialog box displayed on the graphical user interface and contents of the dialog databases according to embodiments of the present disclosure. 
         FIG. 6  is a schematic view showing a prompt message and a preference tag displayed on the graphical user interface according to an embodiment of the present disclosure. 
         FIG. 7  is a schematic view showing an advertisement information displayed on the graphical user interface according to an embodiment of the present disclosure. 
         FIG. 8  is a schematic view illustrating the step of checking the taken images according to an embodiment of the present disclosure. 
     
    
    
     DETAILED DESCRIPTION OF THE INVENTION 
     To facilitate understanding of the object, characteristics and effects of this present disclosure, embodiments together with the attached drawings for the detailed description of the present disclosure are provided. 
     Referring to  FIG. 1 , a system  1  for providing a timeline-based graphical user interface according to an embodiment of the present disclosure comprises a processor  11 , a display device  12  and a storage device  13 . In this embodiment, the system  1  is operated on a mobile electronic device, for example, a smartphone or a tablet. The processor  11  is a main processor of a mobile electronic device. The display device  12  is a touchscreen for displaying a user interface and converting a user&#39;s touch into a control signal. The storage device  13  is a non-transient memory for an electronic device, such as flash memory or any other types of memory. The storage device  13  stores therein program commands executable by the processor  11 . After executing the program commands, the processor  11  of the system  1  performs related steps. 
     In a variant embodiment, the system  1  comprises a cloud server and a mobile electronic device. The cloud server and the mobile electronic device (such as a smartphone) are connected by a wireless telecommunication network to construct a connection to the Internet, so as to facilitate data transmission. The processor  11  comprises a processing unit of the cloud server and a main processor of the mobile electronic device. The display device  12  is disposed at the mobile electronic device. The storage device  13  comprises a disk drive array of the cloud server and a flash memory of the mobile electronic device. Given the aforesaid structure and computation such as recognizing and editing graphics, after being processed by the cloud server, the data are transmitted to the mobile electronic device by the Internet, so as to speed up the processing process and reduce the load of the mobile electronic device. 
     In this embodiment, the system  1  is in signal connection with a camera  2 . The camera  2  is externally connected to the mobile electronic device, is in wireless signal connection with the mobile electronic device, or is built in the mobile electronic device. The camera  2  takes images of a target  3 . The target  3  is not physically independent and thus must be looked after by others, and can be a baby, patient or elderly person who needs long-term care. The camera  2  is configured to take images of the target  3  regularly and automatically and transmit the images to the system  1 . Therefore, a user of the system  1  can monitor the target  3  with the images taken by the camera  2 . 
     The steps performed by the processor  11  of the system  1  upon execution of the program commands are described below. Referring to  FIG. 2 , after receiving one or more images taken by the camera  2 , the system  1  performs step  51  to determine whether the received images are satisfactory, for example, whether each image comprises a specific feature. In this embodiment, the specific feature is a specific facial expression feature of the target  3 , for example, smiling or crying. The program commands executable by the processor  11  include an artificial intelligence engine capable of searching the images for a specific facial expression feature or an analysis algorithm or program capable of determining whether the images comprises a specific facial expression feature. For instance, if the artificial intelligence engine confirms the eye and mouth positions in the images and confirms that the mouth&#39;s shape conforms with the smiling feature, it will be determined that the images comprises the specific feature, which is smiling. 
     If the image includes a specific feature (for example, a facial expression feature), the system  1  performs step  52  to determine a center position C of a face area corresponding to the facial expression feature. Referring to  FIG. 3 , in the image, after positions of the eyes E and mouth M have been confirmed, based on the three respective centers of the positions of the eyes E and mouth M, a center position C of the face area is determined. Then, the face area centered at the center position C is cut out and covered with a mask in a specific shape to attain a round edited image. For instance, a standard circle B, which has a center (i.e., the center position C) and passes through two eye E and one mouth M positions, is predetermined, and then enlarged circles L 1 , L 2 , L 3  which have radii 2 times, 2.5 times or 3 times greater and are centered at the center position C are determined. Next, the face area centered at one of the enlarged circles, such as L 2 , is cut out and covered with a round mask to attain an edited image. The radius of the round mask is a predefined value or is determined randomly or in accordance with the ratio of the standard circle to the image in size. The cutting and the mask-based covering may be carried out on different devices. For instance, the cutting may be carried out on a cloud server to lessen the computation load of the system  1 , whereas the mask-based covering may be carried out on a mobile electronic device such as a smartphone, with different containers. In addition to being round, the mask can be in any other shape or decorated with, for example, a border, as long as the mask can be changed in the container for the images to be processed by the system  1 . 
     After the images have been edited, the system  1  performs step  53  to provide a graphical user interface  15  and arrange the edited images according to a timeline and along a straight line  151  on the graphical user interface  15 . Referring to  FIG. 4A  and  FIG. 4B , the graphical user interface  15  is substantially in a shape of a rectangle, and the straight line  151  is parallel to a long side of the rectangle and passes a center of the rectangle. The edited images  152   a ,  152   b  and  152   c  are arranged according to the timeline in the time sequence at which they were taken. On the graphical user interface  15 , the edited images  152   a ,  152   b  and  152   c  move along the straight line  151  simultaneously. For instance, when a user selects the edited image  152   a  and moves the edited image  152   a  along the straight line  151  toward the top of the graphical user interface  15 , the edited images  152   a ,  152   b  and  152   c  move toward the top of the graphical user interface  15  simultaneously. 
     In this embodiment, when any one of the edited images  152   a ,  152   b ,  152   c  and  152   d  is located at a visual center VF of the graphical user interface  15 , the one located at a visual center VF looks different from the others. The visual center VF of the graphical user interface  15  is pre-defined and is, as shown in  FIG. 4A , a central area of the graphical user interface  15  or any pre-defined position or area in the graphical user interface  15 . Referring to  FIG. 4A , when the edited image  152   b  is the closest to the predefined visual center VF, the edited images  152   a  and  152   c  are scaled down, allowing the edited image  152   b  to look larger. For instance, as shown in  FIG. 4A , assuming that the edited image  152   b  is at 1.0× magnification, the edited images  152   a ,  152   c  are at the lower magnification than the edited image  152   b , i.e. less than 1.0× but equal to or more than 0.6×, such as 0.9×, 0.8×, 0.7×, or 0.6×. Referring to  FIG. 4A , the edited image  152   b  is the largest edited image and is at the highest magnification. Therefore, when a plurality of images are displayed, the user is attracted spontaneously to a specific image, i.e., the edited image  152   b.    
     Referring to  FIG. 4B , when the edited image  152   c  is moved to the visual center, the edited images  152   b  and  152   d  are scaled down. 
     Referring to  FIGS. 4C and 4D , in this embodiment, the sizes of the edited images  152   a ,  152   b ,  152   c  and  152   d  on the graphical user interface  15  remain unchanged. When the edited image  152   b  is located at the visual center VF, it has a special effect, for example, a special border  156  not found in the other edited images. Referring to  FIG. 4B , when the edited image  152   c  is moved to the visual center, the edited image  152   c  acquires the border  156 . In other words, the containers of the edited images change the sizes of the edited images or give special effects to the edited images to highlight the edited image which is the closest to the visual center VF. 
     Referring to  FIGS. 4E and 4F , in this embodiment, after the edited image has been moved to the visual center, its special effect, for example, a translucent filter  155 , is removed. In other words, on the graphical user interface  15 , the edited images are normally covered with the translucent filter  155 , but not covered with the translucent filter  155  when located at the visual center VF. 
     The system  1  further performs step  54  to provide a dialog box  153 , corresponding to the edited image, on the graphical user interface  15 . Referring to  FIG. 5A , if the edited image  152   b  located at the visual center meets an activation condition, the system  1  will obtain a dialog content from a dialog database  154  in accordance with an attribute, and the dialog content will be shown in the dialog box  153 . The attribute is a date related to the edited image located at the visual center, for example, the date on which the image was taken, the current date on which the user operates the system  1 , or the position of the system  1 . The activation condition is a specific date, a specific holiday, or a specific event related to the target  3 . 
     Referring to  FIG. 5B  through  FIG. 5E , when the edited image  152   b  located at the visual center meets an activation condition, for example, the date on which the image was taken being a birthday of the target  3 , the system  1  obtains a dialog content stored in the dialog database  154  and related to the birthday. The dialog database  154  stores various attributes and various dialog contents corresponding to the respective activation conditions. For example, as shown in  FIG. 5B , the dialog database  154  defines “roles” and stores parameters corresponding to the “roles”, respectively, for example, “father” and “mother”. The dialog content may include sentence structures of the parameters, such that the sentences shown in the dialog box  153  are diverse. For instance, as shown in  FIG. 5C , the dialog database contains four sentences available to the dialog content related to a birthday, and the system  1  chooses one of the four sentences at random to display it. The dialog database  154  also defines specific parameters whereby the dialog content is chosen. Referring to  FIGS. 5D  and  FIG. 5E , the dialog databases include the dialog contents about holidays and baby developmental milestones, respectively, and also include attributes of activation, structures of the dialog contents, and sentence examples. 
     Referring to  FIG. 6 , the system  1  further performs step  55  to display a prompt message  61 . In the case that an activation condition is met, for example, the current date is the day on which the target  3  must receive a vaccine, the system  1  displays a vaccination-related prompt message on the graphical user interface  15 . After selecting the prompt message, the user sets a preference tag  62  to the prompt message, for example, by giving a thumbs up to the prompt message to confirm that the prompt message is useful to the user. 
     Referring to  FIG. 7 , upon the prompt message is selected and the preference tag  62  is set, the system  1  performs step  56  to display an advertisement information  71  corresponding to the prompt message. For instance, if the current date is the day on which the target  3  becomes a potential user of a specific product, the system  1  will display a related prompt message on the graphical user interface  15 . If the user has set the preference tag  62  to the prompt message, the system  1  displays the advertisement information  71  pertaining to the product on the graphical user interface  15 . When the advertisement information is selected, the system  1  performs step  57  to start a product purchase process whereby the user purchases the product. 
     Persons skilled in the art can make various changes to the aforesaid embodiments without extending beyond the scope of the present disclosure. Referring to  FIG. 8 , in step  51 , it is determined whether the image is acceptable, wherein the system  1  determines whether the image has a specific feature (step  511 ) and also determines whether the image has at least two specific features (step  512 ), i.e., whether the image has at least two human faces. If the system  1  determines that the image has at least two specific features, the images will be ignored. Alternatively, the system  1  determines whether a specific feature lies within a safe area (step  513 ), for example, be separated from the edges of the image by a specific distance. This ensures that subsequently enlarged circle will not go beyond the edges of the image. 
     To take satisfactory images, the system  1  controllably instructs the camera  2  to take images of the target  3 , for example, every three minutes from 6 AM, every morning, and checks the taken images instantly for compliance with the aforesaid requirements, i.e., the taken image comprises only one specific feature and the specific feature lies within a safe area. If the taken image meets the requirements, the image-taking process ends. If the taken image fails to meet the requirements, the system  1  determines whether the current time has passed a predetermined ending time, for example, 9 AM, (step  514 ). If it is determined that he current time has not yet passed the predetermined ending time, the camera takes images every three minutes (step  515 ) until the taken image meets the requirements or until the predetermined ending time expires. Further, before taking images, the system  1  checks the status of the camera  2 , for example, to determine whether the camera  2  is operating in a night sight mode. 
     In the aforesaid embodiments, the present disclosure can automatically identify and edit an image having a specific feature and display the edited images according to a timeline on a user interface to greatly lessen the user&#39;s burden. 
     While the present disclosure has been described by means of specific embodiments, numerous modifications and variations could be made thereto by those skilled in the art without departing from the scope and spirit of the present disclosure set forth in the claims.