Rotating image viewer

By monitoring the orientation of mobile devices and responsively adjusting the image size, the problem of incomplete image display on mobile devices under different orientations was solved, achieving a viewport fill effect without black borders.

CN116368559BActive Publication Date: 2026-02-17SNAP INC
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202180064827.7
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Priority Date
2020-09-24
Filing Date
2021-09-20
Publication Date
2026-02-17
Estimated Expiration
2041-09-20

AI Technical Summary

Technical Problem

When viewing images on existing mobile devices, black bars often appear at the top, bottom, left, or right, failing to effectively fill the display's viewport.

Method used

By monitoring the orientation of the mobile device, the image viewer can zoom in or out in response to the device's orientation, ensuring that the viewport is always filled with the image and maintaining the image's aspect ratio.

Benefits of technology

It achieves image display without black borders under different orientations, ensuring that the image always fills the monitor viewport and providing a better user experience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN116368559B_ABST
    Figure CN116368559B_ABST
Patent Text Reader

Abstract

A rotating image viewer for viewing images on a mobile device having a display including a viewport is disclosed. The image viewer monitors the orientation of the mobile device and zooms in / out of an image in response to the orientation of the mobile device such that the viewport remains filled with at least a portion of the image (i.e., no top and bottom and left and right black bars within the viewport).
Need to check novelty before this filing date? Find Prior Art

Description

[0001] Cross-reference to related applications

[0002] This application claims priority to U.S. Patent Application Serial No. 17 / 031,353, filed on September 24, 2020, the contents of which are incorporated herein by reference in their entirety. Technical Field

[0003] This disclosure relates to a mobile device having a viewer for viewing images on a display. More specifically, this disclosure relates to a rotating image viewer that monitors the orientation of the mobile device and expands / collapses the image to fill the viewport of the display. Background Technology

[0004] Many types of mobile devices available today, such as smartphones, tablets, laptops, and handheld devices, include various cameras, sensors, wireless transceivers, input systems (e.g., touch-sensitive surfaces, indicators), peripherals, displays, and graphical user interfaces (GUIs) through which users interact with displayed content. The display of a mobile device allows users to view images (still or video images) captured by that mobile device or another device. Attached Figure Description

[0005] The features of the various examples described will be readily understood from the following detailed embodiments with reference to the accompanying drawings. In the specification and several views of the drawings, each element is represented by a reference numeral. When multiple similar elements exist, a single reference numeral may be assigned to the similar elements, using a lowercase letter to indicate the specific element. The lowercase letter may be omitted when such elements are mentioned together or when one or more non-specific elements are mentioned.

[0006] Unless otherwise noted, the various elements shown in the accompanying drawings are not drawn to scale. The dimensions of individual elements may be enlarged or reduced for clarity. Several figures depict one or more specific embodiments, which are presented as examples only and should not be construed as limiting. The following figures are included in the accompanying drawings:

[0007] Figure 1 is a graphical representation of an exemplary hardware configuration of a mobile device with a rotating image viewer;

[0008] Figure 2 is a schematic diagram of an image capture device (eye-worn device), a mobile device with a rotating image viewer, and a network device;

[0009] Figure 3A is an illustration of a vertically oriented mobile device with a rotating image viewer;

[0010] Figure 3B is an illustration of the mobile device of Figure 3A in a horizontal orientation.

[0011] Figure 4A is an illustration of a portion of an image filling the viewport of a vertically oriented mobile device;

[0012] Figure 4B is an illustration of a portion of the image filling the viewport of the mobile device in a horizontal orientation as shown in Figure 4A;

[0013] Figure 4C is an illustration of a portion of an image that fills the viewport of the mobile device in Figures 4A and 4B as the mobile device switches between vertical and horizontal orientation.

[0014] Figure 4D is an illustration of a portion of another image filling the viewport of another vertically oriented mobile device;

[0015] Figure 4E is an illustration of a portion of another image filling the viewport of another horizontally oriented mobile device;

[0016] Figures 5A, 5B, 5C, 5D, and 5E are flowcharts including steps for implementing a rotating image viewer. Detailed Implementation

[0017] Various specific implementations and details are described with reference to examples including a rotating image viewer for mobile devices (such as cellular phones). This rotating image viewer allows viewing an image on the mobile device within a viewport. The image viewer monitors the orientation of the mobile device and zooms in / out of the image in response to that orientation, such that the viewport remains filled with at least a portion of the image (i.e., there are no top / bottom or left / right black borders within the viewport).

[0018] The following detailed description includes systems, methods, techniques, instruction sequences, and computer program products illustrating the examples set forth in this disclosure. Numerous details and examples are included to provide a thorough understanding of the disclosed subject matter and its associated teachings. However, those skilled in the art will understand how the associated teachings can be applied without such details. Aspects of the disclosed subject matter are not limited to the specific devices, systems, and methods described, as the associated teachings can be applied or practiced in various ways. The terminology and naming used herein are for descriptive purposes only and are not intended to be limiting. Typically, well-known examples of instructions, protocols, structures, and techniques are not necessarily shown in detail.

[0019] As used herein, the terms “coupled” or “connected” refer to any logical, optical, physical, or electrical connection, including links, through which electrical or magnetic signals generated or provided by one system element are transmitted to another coupled or connected system element. Unless otherwise stated, coupled or connected elements or devices are not necessarily directly connected to each other and may be separated by intermediate components, elements, or communication media, one or more of which may modify, manipulate, or carry electrical signals. The term “on” means directly supported by an element or indirectly supported by an element through another element integrated into or supported by that element.

[0020] The term "proximal" is used to describe an object or part of an object that is located near, to the left of, or next to an object or person; or, relative to other parts of the object, those other parts can be described as "distal." For example, the end of an object closest to an object can be called the proximal end, while the roughly opposite end can be called the distal end.

[0021] For purposes of illustration and discussion, the orientation of eye-wearing devices, other mobile devices, associated components, and any other devices combined with, for example, a camera, an inertial measurement unit, or both, as shown in any of the accompanying figures are given by way of example only. In operation, the device may be oriented in any other direction suitable for the particular application of the device, such as up, down, sideways, or any other orientation. Furthermore, for the purposes of this document, any directional terms such as front, back, inside, outside, towards, left, right, sideways, longitudinal, up, down, high, low, top, bottom, side, horizontal, vertical, and diagonal are used by way of example only and do not limit the orientation or orientation of any camera or inertial measurement unit as constructed or otherwise described herein.

[0022] Other objects, advantages, and novel features of the example will be set forth in part in the detailed description below, and in part will become apparent to those skilled in the art upon examination of the following description and the accompanying drawings, or may be learned by production or operation of the example. The objects and advantages of this subject matter may be realized and achieved by means of the methods, means, and combinations particularly pointed out in the appended claims.

[0023] Now refer in detail to the accompanying drawings and the examples discussed below.

[0024] Figure 1 is a high-level functional block diagram of an exemplary mobile device 101 with a rotating image viewer. The mobile device 101 includes a flash memory 140A that stores programs to be executed by a CPU 130 to perform all or a subset of the functions described herein.

[0025] Mobile device 101 includes camera 170, which includes at least one visible light camera (e.g., a first visible light camera and a second visible light camera with overlapping fields of view). Flash memory 140A may also include multiple images or videos generated via camera 170 or received from another device via transceiver 110 / 120.

[0026] As shown in the figure, mobile device 101 includes an image display 180. Under the control of CPU 130, image display driver 182 and controller 184 control the display of images on image display 180. In the example of FIG1, image display 180 includes a user input layer 191 (e.g., a touchscreen) that is overlaid on top of the screen used by image display 180 or otherwise integrated into the screen. Image display driver 182 and controller 184 are coupled to CPU 130 to drive display 180.

[0027] Mobile devices can be touchscreen mobile devices. Examples of usable touchscreen mobile devices include (but are not limited to) smartphones, personal digital assistants (PDAs), tablet computers, laptop computers, or other portable devices. However, the structure and operation of touchscreen devices are provided by way of example; the subject matter described herein is not intended to be limited thereto. For the purposes of this discussion, FIG1 therefore provides a block diagram illustration of an exemplary mobile device 101 having a user interface including a touchscreen input layer 191 for receiving input (touch via hand, stylus, or other tool, multi-touch, or gestures, etc.) and an image display 180 for displaying content.

[0028] As shown in Figure 1, mobile device 101 includes at least one digital transceiver (XCVR) 110 for digital wireless communication via a wide-area wireless mobile communication network, shown as a WWAN XCVR. Mobile device 101 also includes additional digital or analog transceivers, such as those for communication via NFC, VLC, DECT, ZigBee, Bluetooth, etc. TM Or a short-range transceiver (XCVR) 120 for short-range network communication via WiFi. For example, the short-range XCVR 120 may take the form of any available bidirectional wireless local area network (WLAN) transceiver compatible with one or more standard communication protocols implemented in a wireless local area network, such as the WiFi standard compliant with IEEE 802.11.

[0029] The eye-worn device 200 includes one or more motion / orientation sensing components referred to as an orientation sensor (IMU) 172. The motion sensing component may be a microelectromechanical system (MEMS) with microscopic moving parts incorporated into a microchip. In some exemplary configurations, the orientation sensor 172 includes an accelerometer, a gyroscope, and a magnetometer. The accelerometer senses the linear acceleration (including acceleration due to gravity) of the device 101 relative to three orthogonal axes (x, y, z). The gyroscope senses the angular velocity of the device 101 about three rotational axes (pitch, roll, yaw). Together, the accelerometer and gyroscope can provide positioning, orientation, and motion data about the device relative to six axes (x, y, z, pitch, roll, yaw). If a magnetometer is present, it senses the heading of the device 101 relative to the magnetic north pole. The positioning of the device 101 may be determined by position sensors, such as a GPS unit, one or more transceivers for generating relative positioning coordinates, an altitude sensor or barometer, and other orientation sensors.

[0030] The orientation sensor 172 may include, or cooperate with, a digital motion processor or program that acquires raw data from the component and calculates multiple valid values ​​regarding the positioning, orientation, and motion of the device 101. For example, acceleration data acquired from an accelerometer may be integrated to obtain velocity relative to each axis (x, y, z); and integrated again to obtain the positioning of the device 101 (represented in linear coordinates x, y, and z). Angular velocity data from a gyroscope may be integrated to obtain the positioning of the device 101 (represented in spherical coordinates). The program used to calculate these valid values ​​may be stored in memory 140 and executed by CPU 130.

[0031] To generate location coordinates for locating mobile device 101, mobile device 101 may include a Global Positioning System (GPS) receiver. Alternatively or additionally, mobile device 101 may utilize either or both of a short-range XCVR 120 and a WWAN XCVR 110 to generate location coordinates for locating, for example, based on cellular networks, WiFi, or Bluetooth. TM The positioning systems can generate very accurate location coordinates, especially when used in combination. These location coordinates can be transmitted to the eye-wearing device via one or more network connections through the XCVR110, 120.

[0032] Transceivers 110 and 120 (i.e., network communication interfaces) conform to one or more of the various digital wireless communication standards utilized by modern mobile networks. Examples of WWAN transceivers 110 include (but are not limited to) transceivers configured to operate according to Code Division Multiple Access (CDMA) and 3rd Generation Partnership Project (3GPP) network technologies, including, for example, but not limited to, 3GPP Type 2 (or 3GPP2) and LTE, sometimes referred to as "4G". For example, transceivers 110 and 120 provide bidirectional wireless communication of information including digitized audio signals, still images and video signals, web page information for display and web-related input, and various types of mobile messaging communications to / from mobile device 101.

[0033] Mobile device 101 also includes a microprocessor that serves as a central processing unit (CPU); as shown by CPU 130 in Figure 1. A processor is a circuit having elements constructed and arranged to perform one or more processing functions, typically various data processing functions. Although discrete logic components can be used, these examples utilize components that form a programmable CPU. A microprocessor includes, for example, one or more integrated circuit (IC) chips that incorporate electronic elements that perform the functions of the CPU. For example, CPU 130 may be based on any known or available microprocessor architecture, such as Reduced Instruction Set Computing (RISC) using the ARM architecture, as is commonly used today in mobile devices and other portable electronic devices. Of course, other arrangements of the processor circuitry can be used to form CPU 130 or processor hardware in smartphones, laptops, and tablets.

[0034] By configuring the mobile device 101 to perform various operations, for example according to instructions or programs executable by the CPU 130, the CPU 130 serves as a programmable host controller for the mobile device 101. Exemplary operations include various general operations of the mobile device, as well as operations related to programs for applications on the mobile device 101.

[0035] Mobile device 101 includes a memory or storage system for storing programs and data. In this example, the memory system may include, as needed, flash memory 140A, random access memory (RAM) 140B, and other memory components 140C. RAM 140B serves as a short-term storage device for instructions and data processed by CPU 130, for example, as working data processing memory. Flash memory 140A typically provides long-term storage.

[0036] In the example of mobile device 101, flash memory 140A is used to store programs or instructions executed by CPU 130. Depending on the type of device, mobile device 101 stores and runs a mobile operating system, through which specific applications execute. Examples of mobile operating systems include Google Android, Apple iOS (for iPhone or iPad devices), Windows Mobile, Amazon Fire OS, RIM BlackBerry OS, etc.

[0037] The memory 140A includes an image detection utility 162, a display detection utility 164, a display orientation utility 166, an image scaling utility 168, and a touch detection utility 169. The image detection utility 162 identifies and detects parameters of an image for display. The display detection utility 164 identifies and detects parameters of the display on which the image will be displayed. The display orientation utility 166 detects the orientation / rotation of the display (e.g., based on input from an orientation sensor 172). The image scaling utility 168 scales the image in response to orientation / rotation to fill the viewport of the display. The touch detection utility 169 identifies and detects gestures on the display (e.g., finger presses, drags, or swipes) and adjusts portions of the image presented in the viewport of the display in response to these gestures.

[0038] Figure 2 is a functional block diagram of an exemplary rotating image viewer system 100, which includes a mobile device 101 (e.g., a cellular phone), another device (e.g., an eye-wearing device 200), and a network device 201 connected via various networks such as the Internet.

[0039] As shown in Figure 2, the eye-wearing device 200 includes a visible light camera 220 that captures still images, video images, or both. The camera 220 may have direct memory access (DMA) to high-speed circuitry within the eye-wearing device 200. The camera 220 can be used to capture red, green, and blue (RGB) imaging scenes. The eye-wearing device 200 also includes a processor 202 for processing images captured by the camera 220, and a transceiver 204 for transmitting images to a mobile device 101 or a server system 201 under the control of the processor 202.

[0040] Network device 201 may be one or more computing devices as part of a service or network computing system, such as a computing device including a processor, memory, and a network communication interface for communicating with mobile device 101 and another mobile device such as eye-wearing device 200 via a network. In one example, server system 201 receives images from eye-wearing device 200 or mobile device 101, optionally stores the received images, and sends the stored images to a requesting device such as mobile device 101 or eye-wearing device 200. Network device 201 may be a communication device such as a router or another device such as a server system that can be accessed via a network. Suitable routers and server systems will be understood by those skilled in the art from the description herein.

[0041] Mobile device 101 can communicate directly with eye-wearing device 200 (e.g., via Bluetooth). TM The two devices can communicate either directly via a Wi-Fi connection or indirectly via a wireless network device 201. In one example, the eye-wearing device 200 and the mobile device 101 initially establish a direct Bluetooth connection. If the eye-wearing device 200 or the mobile device 101 determines that a Wi-Fi connection is available and the bandwidth requirements exceed those available via Bluetooth, the eye-wearing device 200 and the mobile device 101 can switch to communicating via Wi-Fi. Otherwise, the eye-wearing device 200 and the mobile device 101 can continue to use the direct Bluetooth connection, which has lower power consumption and less bandwidth than Wi-Fi.

[0042] Figure 3A depicts an exemplary mobile device 101 in a horizontal orientation. The mobile device 101 includes a display 300 (e.g., display 180). The display 300 includes a viewport 302 for viewing images. In one example, the viewport 302 is defined by a driver 182 and a controller 184 of the display 180. The viewport 302 may cover the entire visible area of ​​the display 180 or a portion of the display 180, wherein an inner area 304 of the display 180 displays at least a portion of the image being presented in the viewport 302, and an outer area 306 of the display 180 may display one or more other images or different portions of the same image.

[0043] Figure 3B depicts an exemplary horizontally oriented mobile device 101. The viewport 312 of a horizontally oriented display 300 (e.g., display 180) may be the same as or different from the viewport 302 (Figure 3A) in a vertically oriented display. Viewport 312 may cover the entire visible area of ​​display 180 or a portion of display 180, wherein an inner region 314 of display 180 displays at least a portion of the image being presented in viewport 302, and an outer region 316 of display 180 may display one or more other images or different portions of the same image.

[0044] Figures 4A to 4E depict examples of images used to implement a rotating image viewer, illustrating the steps of Figures 5A to 5E, and their relationship to the viewport of the monitor. In the images and examples, the aspect ratio of the image and its orientation relative to the user are maintained regardless of the monitor orientation.

[0045] Figure 4A depicts an image 402 viewed in a viewport 404 of a mobile device in a first orientation (e.g., vertical / portrait orientation). The viewport 404 includes a pair of vertices on its edge—a first vertex 406a (designated by the letter A) and a second vertex 406b (designated by the letter B). In this example, the pair of vertices on the edge of the viewport 404 coincides with the edge of the image 402 when the image is magnified such that it fills the viewport 404 along one axis (e.g., the vertical axis) and extends beyond the viewport 404 on another axis perpendicular to that axis (e.g., the horizontal axis). In other words, the image is adapted to fit the height of the viewport 404 and preserves the aspect ratio of the image / media. In this orientation, certain portions of the image / media may be cut off from the view in a horizontal dimension.

[0046] Viewport 404 is enclosed within a circle 406c, which has an origin 406d located at the center of the display and a radius corresponding to the distance between the origin 406d and vertices 406a and b. The origin 406d can be determined by calculating the lines extending between the vertices at opposite ends of the viewport and identifying the intersections of the lines.

[0047] Figure 4B depicts an image 422 (e.g., the same or different from the image in Figure 4A) for viewing in a viewport 404' of a mobile device in a second orientation (e.g., vertical / horizontal orientation). The viewport 404' (which may have the same dimensions as the viewport 404) includes a pair of vertices 406a, b on the edge of the viewport 404'. In this example, the pair of vertices on the edge of the viewport 404' coincides with the same edge of the image 402 in Figure 4A when the image is magnified such that it fills the viewport along one axis (e.g., the horizontal axis) and extends beyond the viewport 404' on another axis perpendicular to that axis (e.g., the vertical axis). In other words, the image is adapted to fit the height of the viewport 404' and preserves the aspect ratio of the image / media. In this orientation, certain portions of the image / media may be cut off from the view in a vertical dimension.

[0048] Figure 4C depicts an image 442 (e.g., the same or different from the images in Figures 4A and 4B) viewed in a viewport 404” of a mobile device in an orientation between a first orientation (Figure 4A) and a second orientation (Figure 4B). As the display rotates, the rotating image viewer scales the image differently along the rotation angle to fill the viewport. In other words, a qualified viewport 704” is always filled with the image (e.g., there are no top and bottom black borders or left and right black borders). In this orientation, certain portions of the image / media may be cut off from the view in both the horizontal and vertical dimensions.

[0049] Figure 4D depicts an image 462 viewed in a viewport 464 of a mobile device 466 in a first orientation (e.g., vertical / portrait orientation). Figure 4E depicts an image 462 viewed in a viewport 464 of a mobile device 466 in a second orientation (e.g., vertical / landscape orientation) (e.g., the same image as in Figure 4D).

[0050] Figures 5A through 5E are flowcharts 500, 504, 506, 508, and 510, respectively, which illustrate the steps of an exemplary method for implementing a rotating image viewer. Although these steps are described with reference to mobile device 101, those skilled in the art will understand from the description herein that the described steps are for other specific implementations of other types of electronic devices. Furthermore, it is conceivable that one or more steps shown in Figures 5A through 5E and described herein may be omitted, performed simultaneously or sequentially, performed in a different order than shown and described, or performed in combination with additional steps.

[0051] Figure 5A depicts a flowchart 500 for viewing an image in the viewport of a display in response to the orientation of the display. At block 502, the mobile device receives an image. In the example, the processor 130 of the mobile device 101 retrieves the image from memory 140. The processor 130 may have previously captured the image, for example, using camera 170, and stored the image in memory 140. Alternatively, the processor may have received the image from another device, for example, via transceiver 110 / 120, and stored the image in memory 140.

[0052] At box 504, the mobile device detects parameters of the viewport. In one example, processor 130 detects the parameters by requesting the vertical and horizontal pixel heights of the viewport from driver 182 of display 180 (box 504a) and receiving the vertical and horizontal pixel heights from driver 182 (box 504b). Using the received vertical and horizontal pixel heights, the processor identifies the center origin of the viewport (box 504c), point 0,0. Processor 130 can determine the center origin by dividing the vertical and horizontal pixel heights by a factor of 2. Processor 130 then identifies the first and second adjacent vertices (e.g., vertices A and B; Figures 4A-4E) on the edge of the viewport (box 504d). Relative to the origin 0,0, the first vertex (vertices A) may be located at half the received pixel height and half the pixel width, and the second vertex (vertices B) may be located at half the received pixel height and negative half the pixel width. Processor 130 stores the vertical pixel height, horizontal pixel height, origin, and vertex in memory 140 (box 504e) for scaling calculations by the rotating image viewer.

[0053] At box 506, the mobile device detects the size of the image. In the example, processor 130 identifies the vertical and horizontal dimensions of the image (box 506a). Processor 130 can identify the dimensions by reading metadata associated with the image, including the dimensions. Processor 130 stores the image dimensions in memory 140 (box 506b) for scaling calculations by a rotating image viewer.

[0054] At box 508, the mobile device monitors the orientation of the display. In one example, processor 130 monitors the orientation by requesting orientation from IMU 172 (box 508a). Processor 130 then receives the orientation from IMU 172 in response to the request (box 508b). The processor periodically repeats the steps of boxes 508a and 508b (e.g., every 10 milliseconds based on an internally set timer) to scale and position the image within the viewport while reducing hysteresis.

[0055] At box 510, the mobile device scales the image in response to the orientation of the monitored display, such that at least a portion of the image fills the viewport regardless of the monitored orientation. In the example, at box 510a, processor 130 calculates a circle extending from the central origin to one of a first vertex and a second vertex (vertex A or vertex B). Then, in response to orientation information from IMU 172, processor 130 monitors the polar coordinates of the first and second vertices on the circle (box 510b). Processor 130 converts the polar coordinates to Cartesian coordinates (box 510c) for use with the image. Then, in response to the polar coordinates of the first and second vertices on the circle, processor 130 adjusts the image to fill the viewport using Cartesian coordinates (box 510d).

[0056] In the example, the image is initially centered within the viewport and is sized such that a first image edge of the image is adjacent to a first visible edge of the viewport, and a second image edge of the image extends beyond a second visible edge of the viewport. Additionally, the circle includes at least an outer portion extending beyond the first visible edge and an inner portion not extending beyond the first visible edge. To scale the image, the processor 130 zooms in on the image as a vertex moves from the inner portion of the circle to the outer portion, and zooms out on the image as a vertex reaches the inner portion of the circle to keep the vertex on the visible edge.

[0057] At box 512, the mobile device renders a scaled image. In the example, processor 130 renders the image by sending the image along with appropriate scaling information to image driver 182.

[0058] At box 514, optionally, the mobile device monitors touch / gestures on the display, movement of the display in dimensions other than those used to rotate the viewed image, or both. In one example, processor 130 monitors touch / gestures on user input layer 191. For example, a finger dragging to the left or a finger swiping to the left. In another example, processor 130 monitors movement of the display in other dimensions, such as around an axis perpendicular to the axis around which the rotated image view is used to scale the image. For example, a rotated image viewer may scale the image in response to rotation of the display about a first degree of freedom (e.g., the horizontal axis), and processor 130 may additionally track movement about a second degree of freedom (e.g., the vertical axis) to take another action.

[0059] At box 516, optionally, the mobile device presents different portions of a scaled image within a viewport on the touchscreen. In one example, the mobile device presents different portions in response to gestures on the display. In another example, the mobile device presents different portions in response to movement around a second degree of freedom. In the example, processor 130 presents the image by sending the image along with appropriate scaling information and the portion to be presented (e.g., by adjusting the center origin) to image driver 182. Rotating the display right / left about a vertical axis or dragging a finger right / left causes processor 130 to shift viewport 464 right / left along axis 468 (FIG. 4D). Similarly, rotating the display to the top / bottom about a horizontal axis perpendicular to the axis used by the rotating image viewer for scaling or dragging a finger to the top / bottom causes processor 130 to shift viewport 464 up / down along axis 470 (FIG. 4E).

[0060] According to this example, the processor scales the image in response to orientation in the first degree of freedom, and the processor is further configured to present different portions of the scaled image in the viewport in response to orientation in the second degree of freedom.

[0061] Table 1 depicts the pseudocode used for an exemplary rotating image viewer:

[0062]

[0063] Table 1

[0064] In this example, the processor tracks the movement of vertices A and B (see Figures 4A-E) of the rectangle inscribed in the circle (i.e., the viewport) based on the current rotation angle in polar coordinates and transforms them back to Cartesian coordinates to determine the minimum scale. Initially, the vertical dimension is considered to make the image / media fit precisely to the height of the viewport, and the media is cut off from the view in the horizontal dimension. Once the frame borders or masks begin to appear in the horizontal dimension to maintain the aspect ratio of the image, the horizontal dimension is considered to make the image / media fit precisely to the width of the viewport, and the media is cut off from the view in the vertical dimension. In other words, when the image / media no longer completely fills the viewport, such that it is typically displayed with top and bottom black borders (horizontal frame borders or masks) or left and right black borders (vertical frame borders or masks), the image / media is enlarged to fill the viewport in the dimensions where frame borders or masks are typically added (while maintaining the aspect ratio).

[0065] As described herein, any function of an electronic device (e.g., mobile device 101 or eye-wearing device 200) and network device 201 can be embodied in one or more computer software applications or sets of programming instructions. According to some examples, a “function,” “application,” “instruction,” or “program” is a program that performs the functions defined in the program. Various programming languages ​​can be used to develop one or more applications that are structured in various ways, such as object-oriented programming languages ​​(e.g., Objective-C, Java, or C++) or procedural programming languages ​​(e.g., C or assembly language). In a particular example, a third-party application (e.g., an entity other than a platform-specific vendor using Android) may be used. TM or iOS TM Applications developed using a Software Development Kit (SDK) can be included in mobile operating systems such as iOS. TM ANDROID TM , A mobile phone or mobile software running on another mobile operating system. In this example, a third-party application may invoke API calls provided by the operating system to facilitate the functionality described herein.

[0066] Therefore, machine-readable media can take many forms of tangible storage media. Non-volatile storage media include, for example, optical discs or disks, any storage device such as any computer device, such as client devices, media gateways, code converters, etc., that can be used to implement the figures shown. Volatile storage media include dynamic memory, such as the main memory of computer platforms. Tangible transmission media include coaxial cables; copper wires and optical fibers, including wires that form buses within a computer system. Carrier transmission media can take the form of electrical or electromagnetic signals, or sound or light waves, such as those generated during radio frequency (RF) and infrared (IR) data communications. Therefore, common forms of computer-readable media include, for example: floppy disks, floppy disks, hard disks, magnetic tapes, any other magnetic media, CD-ROMs, DVDs or DVD-ROMs, any other optical media, punched card tapes, any other physical storage media with a perforated pattern, RAM, PROMs and EPROMs, FLASH-EPROMs, any other memory chips or cartridges, carrier waves for transmitting data or instructions, cables or links for transmitting such carrier waves, or any other medium from which a computer can read program code or data. Many of these forms of computer-readable media can be used to carry one or more sequences of one or more instructions to a processor for execution.

[0067] In addition to what has just been stated above, whether or not it is stated in the claims, the stated or described content is not intended or should not be construed as causing any part, step, feature, object, benefit, advantage or equivalent to be offered to the public.

[0068] It should be understood that, unless otherwise specified herein, the terms and expressions used herein have the general meaning consistent with those in the corresponding fields of investigation and research. Relational terms such as “first” and “second” are used only to distinguish one entity or action from another, and do not necessarily require or imply any actual such relationship or order between these entities or actions. The terms “comprising,” “including,” “containing,” “having,” or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that includes or comprises a list of elements or steps includes not only those elements or steps, but may also include other elements or steps not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element prefixed with “a” or “an” does not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes that element.

[0069] Unless otherwise stated, any and all measurements, values, ratings, positions, quantities, dimensions, and other specifications set forth in this specification, including those in the appended claims, are approximate, not precise. Such quantities are intended to have a reasonable range consistent with the functions they relate to and the conventions in the fields to which they pertain. For example, unless otherwise expressly stated, parameter values, etc., can vary from said quantity or range by up to plus or minus ten percent.

[0070] Furthermore, as can be seen in the foregoing specific embodiments, various features have been combined in various examples for the purpose of simplifying this disclosure. The disclosed method should not be construed as reflecting an intention to require more features than expressly recited in each claim in the claimed examples. Rather, as reflected in the following claims, the claimed subject matter lies in fewer features than in any single disclosed example. Therefore, the following claims are hereby incorporated into the specific embodiments, wherein each claim exists independently as a separately claimed subject matter.

[0071] While examples considered to be best practices and other examples have been described above, it should be understood that various modifications may be made therein, and the subject matter disclosed herein can be implemented in various forms and examples, and is applicable to many applications, of which only some have been described herein. The appended claims are intended to claim protection for any and all modifications and variations falling within the true scope of the inventive concept.

Claims

1. A rotating image viewer, the rotating image viewer comprising: a display having a viewport and a display driver defining a vertical pixel height of the viewport and a horizontal pixel height of the viewport; an orientation sensor configured to monitor an orientation of the display; and a processor coupled to the display and the orientation sensor, the processor configured to: receive an image; detect parameters of the viewport by requesting the vertical pixel height and the horizontal pixel height from the display driver; identify a center origin of the viewport and first and second vertices of an edge of the viewport; detect a size of the image; monitor the orientation of the display; in response to the monitored orientation of the display, scale the image by calculating a circle extending from the center origin to one of the first and second vertices; monitor a positioning of the first and second vertices on the circle in polar coordinates; convert the polar coordinate positioning to Cartesian coordinate positioning; and in response to the polar coordinate positioning of the first and second vertices on the circle, scale the image by using the Cartesian coordinate positioning to adjust the image to fill the viewport so that at least a portion of the image fills the viewport regardless of the monitored orientation; and present the scaled image, wherein the parameters of the viewport include the vertical pixel height, the horizontal pixel height, the center origin, the first vertex, and the second vertex.

2. The viewer of claim 1, wherein the display is a touchscreen, and wherein the processor is further configured to present different portions of the scaled image on the touchscreen in response to gestures on the display.

3. The viewer of claim 1, wherein the orientation sensor is configured to monitor an orientation of the display in a first degree of freedom and a second degree of freedom, the processor scales the image in response to the orientation in the first degree of freedom, and the processor is further configured to present different portions of the scaled image in the viewport in response to the orientation in the second degree of freedom.

4. The viewer of claim 1, wherein the image is initially centered within the viewport and sized so that a first image edge of the image is adjacent to a first viewable edge of the viewport, a second image edge of the image extends beyond a second viewable edge of the viewport, and wherein the circle includes at least an outer portion that extends beyond the first viewable edge and an inner portion that does not extend beyond the first viewable edge.

5. The viewer of claim 4, wherein, To scale the image, the processor enlarges the image as the first vertex moves from the inner portion of the circle to the outer portion of the circle.

6. The viewer of claim 5, wherein, To scale the image, the processor reduces the image as the first vertex reaches the inner portion of the circle to keep the first vertex on the first viewable edge.

7. A method of rotating image viewing for use with an electronic device, the electronic device comprising a display having a viewport and an orientation sensor, the display comprising a display driver defining a vertical pixel height of the viewport and a horizontal pixel height of the viewport, the method comprising: receiving an image; detecting parameters of the viewport by requesting the vertical pixel height and the horizontal pixel height from the display driver, the parameters comprising the vertical pixel height, the horizontal pixel height, a center origin, a first vertex, and a second vertex; identifying the center origin of the viewport and the first vertex and the second vertex of an edge of the viewport; detecting a size of the image; monitoring the orientation of the display; responsive to the monitored orientation of the display, monitoring a location in polar coordinates of the first vertex and the second vertex on a circle extending from the center origin to one of the first vertex and the second vertex; converting the polar coordinate location to a Cartesian coordinate location; and responsive to the polar coordinate location of the first vertex and the second vertex on the circle, scaling the image by using the Cartesian coordinate location to adjust the image to fill the viewport so that at least a portion of the image fills the viewport regardless of the monitored orientation; and presenting the scaled image.

8. The method of claim 7, wherein the display is a touch screen, and wherein the method further comprises: monitoring gestures on the touch screen; and responsive to the gestures on the display, presenting different portions of the scaled image on the touch screen.

9. The method of claim 7, wherein the monitoring comprises monitoring the orientation of the display in a first degree of freedom and a second degree of freedom; wherein scaling the image comprises scaling the image responsive to the orientation in the first degree of freedom; and wherein the method further comprises presenting different portions of the scaled image in the viewport responsive to the orientation in the second degree of freedom.

10. The method of claim 7, wherein the image is initially centered within the viewport and sized so that a first image edge of the image is adjacent to a first viewable edge of the viewport, a second image edge of the image extends beyond a second viewable edge of the viewport, and wherein the circle comprises at least an outer portion that extends beyond the first viewable edge and an inner portion that does not extend beyond the first viewable edge.

11. The method of claim 10, wherein the scaling comprises: zooming in on the image as the first vertex moves from the inner portion of the circle closer to the outer portion of the circle.

12. The method of claim 11, wherein the scaling further comprises: zooming out on the image to keep the first vertex on the first viewable edge as the first vertex approaches the inner portion of the circle.

13. A non-transitory computer readable medium storing program code that, when executed on an electronic device comprising a display having a viewport, an orientation sensor, and a processor, operates to cause the processor to perform the following steps: receiving an image; detecting parameters of the viewport; detecting dimensions of the image; monitoring the orientation of the display; in response to the monitored orientation of the display, scaling the image by calculating a circle extending from a center origin of the display to a vertex on an edge of the viewport; monitoring the positioning of a first vertex and a second vertex on the circle in polar coordinates; converting the polar coordinate positioning to Cartesian coordinate positioning; and in response to the polar coordinate positioning of the first vertex and the second vertex on the circle, scaling the image by using the Cartesian coordinate positioning to adjust the image to fill the viewport so that at least a portion of the image fills the viewport regardless of the monitored orientation; and presenting the scaled image.

14. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

15. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

16. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

17. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

18. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

19. The non-transitory computer readable medium of claim 13, wherein the polar coordinate positioning is monitored by: monitoring the orientation of the display; monitoring the dimensions of the image; monitoring the dimensions of the viewport; and monitoring the dimensions of the display.

20. The non-transitory computer readable medium of claim

Citation Information

Patent Citations

  • Display method and display system for displaying interface of intelligent mobile terminal on intelligent television

    CN106020654A

  • Multifunctional Environment for Image Cropping

    US20130016122A1

  • Systems and methods for adaptive and responsive video

    US20170062012A1