DYNAMIC IMAGE MAP AND GRAPHICS FOR RENDERING MOBILE WEB APPLICATION INTERFACES
A method and system of generating a graphic display. Initially, a background image is displayed. One or more image containers that specify areas overlaying the background image are defined. Images to be rendered in these image containers are requested from a server. The server dynamically generates the images and transmits them to the client device.
Latest Microsoft Patents:
- Host Virtual Machine Domain Name System (DNS) Cache Enabling DNS Resolution During Network Connectivity Issues
- HOSTED FILE SYNC WITH STATELESS SYNC NODES
- COLLABORATIVE VIDEO MESSAGING COMPONENT
- METHOD AND SYSTEM FOR IMPLEMENTING SAFE DEPLOYMENT OF FEATURES
- COMPUTER-BASED POSTURE ASSESSMENT AND CORRECTION
The Internet is fast becoming integral to the way corporations, consumers, and individuals conduct business, communicate, and access information on a daily basis. The Internet evolved by connecting personal computers, servers, and network devices together to effectively form a worldwide, publicly accessible series of interconnected data networks. Typically, a user accesses the Internet through a web browser. The web browser is a piece of software that displays a web page hosted on a website connected to the Internet. The web browser obtains information from the web site and generates the corresponding text, graphics, and video for display to the user. The web browser can also support audio as well. Typically, a web page contains hyperlinks to other web pages. This enables the user to quickly and easily access information provided on related web sites by traversing the hyperlinks.
The Internet has proven to be so popular and useful that wireless devices have been adapted and are now specially designed to be able to connect to the Internet. Cell phones, personal digital assistants, laptops, and all manner of mobile computing devices have built-in displays and web browsers. Users on-the-go can readily access the Internet through a myriad of wireless, mobile computing and communications devices.
Unfortunately, downloading web pages for display on a browser is bandwidth intensive. It may take a long time to download a web page on a wireless device because wireless transmissions typically have relatively slow data rates. The user may have to wait a while for the web page to complete its download.
Furthermore, mobile devices are characterized as being small, lightweight, and inexpensive. To meet these constraints, the processors are not as powerful, memory chips are smaller, and overall computing resources are less than those of traditional desktop PC's. Consequently, it may take some time to process and render a web page for display on a wireless device. Complicated, content-rich web pages can take an inordinate amount of time and computing power to render for display on the web browser. Furthermore, many web pages are interactive in that the user is invited to make inputs, selections, and invoke functions presented on the web page. The display is changed in response to user interaction. This puts a severe strain on a mobile device's rather limited computing resources. Moreover, because the display screen is small, it is imperative that each pixel is rendered accurately. Otherwise, the resulting image can become blurred and degraded in appearance. Further complicating matters is the fact that there exists many different standards and formats for displaying images on mobile devices. This adds complexity in rendering web pages accurately and quickly.
Another drawback is that because rendering web pages is so computing intensive, it can consume a great deal of the mobile device's battery life. A bigger, heavier, and more expensive battery is needed or else time between charges is shortened.
Together, these factors can make it frustrating and even impractical for users to surf the Internet and interact with web pages on their respective wireless, mobile devices.
SUMMARYThis Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used as an aid in determining the scope of the claimed subject matter.
Embodiments of the present disclosure pertain to a method and system for rendering a web application interface. First, a background image common to that web application is downloaded from a server for display. One or more image containers overlaying the background is used to divide the web page into separate sections. A source attribute is associated with each of these image containers. The source attributes identify particular images stored on the server. The client device (e.g., a cell phone) can request the appropriate image from the server by transmitting its source attribute. When the server receives an image request, it dynamically generates the image belonging to that particular source attribute. The image is then transmitted back to the client device and rendered for display in the appropriate image container. Furthermore, an image can contain one or more “hot-spot” areas that function as links which enable users to click on the hot-spots to obtain more information. Thereby, this approach provides a simpler, more elegant mechanism for generating a dynamic, interactive web application interface.
The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments of the invention and, together with the description, serve to explain the principles of the invention:
Reference will now be made in detail to embodiments of the claimed subject matter, examples of which are illustrated in the accompanying drawings. While the embodiments will be described, it will be understood that the description are not intended to limit the claimed subject matter to these embodiments. On the contrary, the claimed subject matter is intended to cover alternatives, modifications and equivalents, which may be included within the spirit and scope as defined by the appended claims. Furthermore, in the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the embodiments. However, it will be recognized by one of ordinary skill in the art that the embodiments may be practiced without these specific details. In other instances, well-known methods, procedures, components, and circuits have not been described in detail as not to unnecessarily obscure aspects of the embodiments.
A method and system for an application of dynamic image maps and graphics servers to render a mobile web application interface is disclosed. Mobile computing devices (e.g., cell phones, personal digital assistants, hand helds, etc.) generally have fewer computing resources than a laptop or desktop style computer in terms of CPU, memory, graphics resources, etc. This means that sending a complicated web page to a mobile device for rendering is often not practical. Embodiments of the present disclosure overcome this limitation by breaking up a complicated visual UI at the design stage into a common background image and separate image containers that define geometrical areas overlaying the background. The appropriate images are dynamically generated by a server and downloaded for display in each of the image containers according to source attributes associated with each of the image containers. An image can contain one or more “hot-spot” areas that function as links which enable users to click on the hot-spots to obtain more information. Thereby, this approach provides a mechanism for building a dynamic, interactive mobile web application in a way whereby user interfaces (UI's) with complicated layouts are rendered as easily as simple ones.
Referring now to
An example of how to make and use a mobile web application according to the above process is now described.
When the user first visits the web page, the client application requests the image background 201. The client application also requests 0.gif, 1.gif, and 2.gif to obtain the image containers 202-204 respectively. The 0.gif, 1.gif, and 2.gif are files that contain images in a Graphics Interchange Format (GIF) that correspond to the Thu, Fri, and Sat days of the week. It should be noted that other types of bit map image formats besides GIF can be used to render the background and/or image containers. Upon receipt of the request for 0.gif, the web server does not simply serve up a file from the server's hard disk. Instead, it starts assembling, in real time, an image with data for the logged-in user. The server can use widely available API's, such as Graphics Device Interface (GDI), to create the image. The 0.gif image corresponding to image container 202 or Thu, for example, can have a transparent background with a single square 207 for accepting and displaying text entered by the user. In one embodiment, the hot-spot areas (e.g., square 207) have a different background color or otherwise be highlighted in order to differentiate it from the conventional, non-interactive background. In this example, the user entered “dentist appointment” in the square covering 2:30 pm-6:00 pm on Thu.
The server renders the square at an offset within the larger image as depicted in
The web application associates the image map to the image using standard techniques. The web application also associates a java script function to handle clicks on shapes within the image. The script differentiates between clicks on a hot-spot (e.g., square 207) and clicks on a conventional non-interactive area (e.g., transparent areas 301 and 302).
Clicking on a hot-spot causes the application to change the source of one of the images. For example, if the user clicks on the right arrow, the client will change the source (SRC) attribute of the corresponding image containers.
When a client device first launches a mobile web application (step 506), the server transmits the background image and one or more image container information associated with that particular mobile web application to the client device, step 507. If the client device requests a new image, the image being requested is identified by a specific source attribute, step 508. Instead of transmitting a file containing the image information, the server actually generates the image having that specific source attribute and transmits the image to the client device, step 509. Steps 508 and 509 are repeated so that images are displayed in each of the image containers of the client device. If the user wishes to navigate or otherwise interact with the mobile web application, new images can be rendered by the server and displayed in the respective image containers in response to the user's input. This is accomplished by changing source attributes for the image containers and repeating steps 508 and 509. If the user clicks on a hot-spot area (step 510), the server receives a request for data corresponding to that hot-spot. The data can be any type of data (e.g., an image, text, video, graphics, audio, real-time data, streaming data, etc.). In one embodiment, the hot-spot data is personal data pertaining to the subject of that hot-spot. The server transmits the hot-spot data to the client device, step 511. Steps 510 and 511 are repeated each time a user clicks on a hot-spot area. Thereby, the server accepts requests from the client device and responsively transmits images and hot-spot data with minimal overhead and bandwidth. This allows the client device to display complex images while also providing user interactivity with minimal processing. The server continues to monitor client requests until the user chooses to close the mobile web application, step 512.
In one embodiment, an image can contain different areas. Some areas are for display only. Other areas, known as hot-spots, function as links. Clicking on a hot-spot, as determined by step 607, causes the server to serve up the information corresponding to that link. This information is then displayed on the client device's web browser, step 608. The hot-spot data can also be cached in local memory for faster subsequent accesses. Clicking on a hot-spot can also invoke or trigger other events. Thereby, steps 604-608 enable complex images to be displayed while also providing a great deal of user interactivity with minimal processing resources. These steps are repeated until the user closes the web application, step 609.
An exemplary client device system is depicted in 702. The client device typically includes a small display 713. A web browser or some other user interface is displayed. The user can navigate, enter commands and enter data through the web browser or user interface by means of keys 714, touch screen, or some other user input device. The web browser software 718 resides in memory 717. Memory 717 also stores the operating system 717 and the web application along with other types of software applications 719. Memory 717 can also optionally include a cache memory which is used to temporarily store the data (e.g., user data and/or image data) that had previously been received from server 701. The cache memory 721 improves performance and reduces the number of transmissions exchanged between client 702 and server 701. A transceiver 716 is used to transmit requests to server 701 and to received data from server 701.
An example of the operation of a mobile web application interface is now described in detail. In this example, the application is a web based calendar.
The source attribute associated with the center image container corresponds to an image having a hot-spot labeled as “Call Travel Agent.” The “Call Travel Agent” hot-spot area extends from 3:30 pm to 4:30 pm on Fri. And the source attribute associated with the right image container corresponds to an image having a hot-spot labeled as “Meet Friends.” The “Meet Friends” hot-spot area extends from 3:30 pm to 7:30 pm on Sat. Clicking on either the “Call Travel Agent” or “Meet Friends” hot spots will cause the corresponding user data to be loaded into area 803 of the web browser. Once all three images have been downloaded from the server, they are stored locally in the client device's cache memory.
The user can navigate the web calendar by clicking on either the left arrow button 801 or right arrow button 802. Clicking on the left arrow button 801 shifts the calendar one day forward.
Clicking on the right arrow button 802 at this time causes the calendar to shift backwards by one day. This results in Thu, Fri, and Sat being displayed again. As discussed above, clicking on a hot-spot loads the user data corresponding to that hot-spot.
Thus, a dynamic image map and graphics mechanism to render mobile web application interfaces has been disclosed. Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.
Claims
1. A method of generating a graphic display comprising:
- displaying a background image;
- defining one or more image containers that specify areas overlaying the background image;
- requesting images for each of the image containers from a server;
- displaying the images in their respective image containers.
2. The method of claim 1 further comprising:
- the server dynamically generating the image in response to a request from a client device.
3. The method of claim 2, wherein the area in the image is defined by an image map.
4. The method of claim 1 further comprising:
- defining at least one area in an image, which when selected by a user, causes user information to be displayed.
5. The method of claim 1 further comprising:
- caching the images in a local memory.
6. The method of claim 1 further comprising:
- associating a particular image with a particular image container by an identifier.
7. The method of claim 6, wherein the identifier comprises a source attribute and changing the source attribute of an image container results in a new image being displayed in that image container.
8. The method of claim 1, wherein the graphic display is rendered on a web browser running on a mobile client device.
9. A method of rendering a web page, comprising:
- dividing the web page into a plurality of sections, each of the plurality of sections having an identifier that specifies a particular image;
- requesting images from a server for the plurality of sections according to identifiers associated with the plurality of sections;
- changing an appearance of the graphic display by changing at least one of the identifiers for one of the sections in response to a user input.
10. The method of claim 9 further comprising:
- displaying a background image corresponding to an application corresponding to the web page.
11. The method of claim 9 further comprising:
- defining separate areas within an image, wherein a first area is inactive and a second area is responsive to user input.
12. The method of claim 11, wherein clicking on the second area causes the web page to display user information.
13. The method of claim 9 further comprising:
- dynamically generating the images when the images are to be rendered for display on the web page.
14. The method of claim 9 further comprising:
- reading an image from a local memory.
15. The method of claim 9, wherein the web page corresponds to a web based calendar application.
16. A mobile computing device, comprising:
- a display for displaying a user interface that comprises a background and a plurality of images overlaying designated sections of the background image;
- a processor coupled to the display that requests the plurality of images from a server device;
- a memory coupled to the processor that stores information identifying which image is to be displayed in which of the designated sections.
17. The mobile computing device of claim 16 further comprising:
- a user input device coupled to the processor, wherein a user can click on a highlighted area of an image to obtain user data.
18. The mobile computing device of claim 16, wherein the memory stores an image map that identifies the highlighted area.
19. The mobile computer device of claim 16 further comprising a cache memory coupled to the processor, the cache memory used to store images.
20. The mobile computing device of claim 16, wherein the requests cause a remote server device to dynamically generate the images on demand.
Type: Application
Filed: May 15, 2008
Publication Date: Nov 19, 2009
Applicant: MICROSOFT CORPORATION (Redmond, WA)
Inventor: Brian Tunning (Shanghai)
Application Number: 12/121,780
International Classification: G06F 3/048 (20060101); G06F 15/16 (20060101);