Drawing HTML Elements

• US 20130298005A1
• Filed: 05/04/2012
• Published: 11/07/2013
• Est. Priority Date: 05/04/2012
• Status: Abandoned Application

• Current Assignee: Google Technology Holdings LLC (Alphabet Inc.)
• Original Assignee: Motorola Mobility, Inc. (Lenovo Group Ltd.)
• Inventors: Mayhew, John C., Mowatt, Anthony C., Virgillito, Valerio
• Application Number:
  US13/464,012
• Publication Number:
  US 20130298005A1
• Time in Patent Office: Days
• US Class Current: 715/234
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
• CPC Class Codes: G06F 40/166 Editing, e.g. inserting or deleting

Abstract

In embodiments of drawing HTML elements, an HTML drawing application (108) can enable, via a drawing area interface (112), display of an HTML page (402) and one or more HTML elements in the HTML page. The HTML drawing application (108) can then receive a selection of an HTML element (404) in the HTML page (402), and initiate display of visual feedback (410) on a drawing surface (116) that overlays the HTML page (402) to indicate that the selected HTML element (404) is selected. In other embodiments, the HTML drawing application (108) can initiate display of visual feedback (508) on the drawing surface (116) that overlays an HTML page (502) to indicate that an HTML element (504) can be edited. In some embodiments, the drawing surface (116) is an HTML5 canvas element.

Claims

1. A method, comprising:

enabling, via a drawing area interface of an HTML drawing application, display of an HTML page and one or more HTML elements in the HTML page;

receiving a selection of an HTML element in the HTML page; and

initiating display of visual feedback on a drawing surface that overlays the HTML page to indicate that the selected HTML element is selected.

2. The method as recited in claim 1, wherein the drawing surface comprises an HTML5 canvas element.

3. The method as recited in claim 1, wherein initiating display of the visual feedback comprises drawing a selection outline on the drawing surface around the selected HTML element to indicate that the selected HTML element is selected.

4. The method as recited in claim 1, wherein the visual feedback distinguishes the selected HTML element from one or more unselected HTML elements in the HTML page.

5. The method as recited in claim 1, wherein initiating the display of the visual feedback further comprises displaying the visual feedback on the drawing surface without altering the selected HTML element.

6. The method as recited in claim 1, wherein the selected HTML element comprises any HTML element type or tag.

7. A method, comprising:

enabling, via a drawing area interface of an HTML drawing application, display of an HTML page and an HTML element in the HTML page; and

initiating display of visual feedback on a drawing surface that overlays the HTML page to indicate that the HTML element can be edited.

8. The method as recited in claim 7, wherein the drawing surface comprises an HTML5 canvas element.

9. The method as recited in claim 7, wherein initiating the display of the visual feedback comprises drawing one or more editing handles on the drawing surface around a border of the HTML element to indicate that the HTML element can be at least one of resized or moved.

10. The method as recited in claim 9, wherein initiating the display of the visual feedback further comprises one of:

drawing, when an editing handle is selected, one or more directional arrows on the drawing surface to indicate a direction in which the HTML element can be resized or moved;

or

changing the appearance of a cursor, that selects the editing handle, to the one or more directional arrows to indicate a direction in which the HTML element can be resized or moved.

11. The method as recited in claim 7, further comprising:

receiving, via the drawing area interface of the HTML drawing application, input to edit the HTML element;

initiating display of additional visual feedback on the drawing surface that overlays the HTML page as the input to edit the HTML element is received; and

editing the HTML element in the HTML page based on the input.

12. The method as recited in claim 11, wherein the input to edit the HTML element comprises input to at least one of resize or move the HTML element.

13. The method as recited in claim 7, wherein the HTML element comprises any HTML element type or tag.

14. The method as recited in claim 7, wherein initiating the display of the visual feedback further comprises displaying the visual feedback on the drawing surface without altering the HTML element.

15. An electronic device, comprising:

a display device configured to display a drawing area interface for editing one or more HTML elements in an HTML page, the drawing area interface including the HTML page and a drawing surface that overlays the HTML page;

a memory and a processor system to implement an HTML drawing application that is configured to;

receive a selection of an HTML element in the HTML page; and

initiate display of visual feedback on the drawing surface that overlays the HTML page to indicate that the selected HTML element is selected.

16. The electronic device as recited in claim 15, wherein the drawing surface comprises an HTML5 canvas element.

17. The electronic device as recited in claim 15, wherein the HTML drawing application is configured to initiate display of the visual feedback by drawing a selection outline on the drawing surface around the selected HTML element to indicate that the selected HTML element is selected.

18. The electronic device as recited in claim 15, wherein the drawing application is configured to initiate display of the visual feedback on the drawing surface without altering the selected HTML element.

19. The electronic device as recited in claim 15, wherein the HTML drawing application is configured to initiate display of the visual feedback on the drawing surface that overlays the HTML page to indicate that the selected HTML element can be edited.

20. The electronic device as recited in claim 19, wherein the HTML drawing application is further configured to:

receive, via the drawing area interface, input to edit the selected HTML element;

initiate display of additional visual feedback on the drawing surface that overlays the HTML page as the input to edit the selected HTML element is received; and

edit the selected HTML element in the HTML page based on the input.