MARKUP LANGUAGE AND OBJECT MODEL FOR VECTOR GRAPHICS
FIELD OF THE INVENTION
The invention relates generally to computer systems, and more particularly to the processing of graphical and other video information for display on computer systems.
BACKGROUND OF THE INVENTION
The limits of the traditional immediate mode model of accessing graphics on computer systems are being reached, in part because memory and bus speeds have not kept up with the advancements in main processors and/or graphics processors. In general, the current (e.g., WM_PAINT) model for preparing a frame requires too much data processing to keep up with the hardware refresh rate when complex graphics effects are desired. As a result, when complex graphics effects are attempted with conventional graphics models, instead of completing the changes that result in the perceived visual effects in time for the next frame, the changes may be added over different frames, causing results that are visually and noticeably undesirable.
A new model for controlling graphics output is described in United States Patent Application Serial Nos. 10/184,795, 10/184,796, 10/185,775, 10/401,717, 10/402,322 and 10/402,268, assigned to the assignee of the present invention and hereby incorporated by reference. This new model provides a number of significant improvements in graphics processing technology. For example, U.S. Serial No. 10/184,795 is generally directed towards a multiple-level graphics processing system and method, in which a higher-level component (e.g., of an operating system) performs computationally intensive aspects of building a scene graph, updating animation parameters and traversing the
scene graph's data structures, at a relatively low operating rate, in order to pass simplified data structures and/or graphics commands to a low-level component. Because the high-level processing greatly simplifies the data, the low-level component can operate at a faster rate, (relative to the high-level component), such as a rate that corresponds to the frame refresh rate of the graphics subsystem, to process the data into constant output data for the graphics subsystem. When animation is used, instead of having to redraw an entire scene with changes, the low-level processing may interpolate parameter intervals as necessary to obtain instantaneous values that when rendered provide a slightly changed scene for each frame, providing smooth animation.
U.S. Serial No. 10/184,796 describes a parameterized scene graph that provides mutable (animated) values and parameterized graph containers such that program code that wants to draw graphics (e.g., an application program or operating system component) can selectively change certain aspects of the scene graph description, while leaving other aspects intact. The program code can also reuse already-built portions of the scene graph, with possibly different parameters. As can be appreciated, the ability to easily change the appearance of displayed items via parameterization and/or the reuse of existing parts of a scene graph provide substantial gains in overall graphics processing efficiency.
U.S. Serial No. 10/185,775 generally describes a caching data structure and related mechanisms for storing visual information via objects and data in a scene graph. The data structure is generally associated with mechanisms that intelligently control how the visual information therein is populated and used. For example, unless specifically requested by the application program,
most of the information stored in the data structure has no external reference to it, which enables this information to be optimized or otherwise processed. As can be appreciated, this provides efficiency and conservation of resources, e.g., the data in the cache data structure can be processed into a different format that is more compact and/or reduces the need for subsequent, repeated processing, such as a bitmap or other post-processing result.
While the above improvements provide substantial benefits in graphics processing technology, there still needs to be a way for programs to effectively use this improved graphics model and its other related improvements in a straightforward manner. What is needed is a comprehensive yet straightforward model for programs to take advantage of the many features and graphics processing capabilities provided by the improved graphics model and thereby output complex graphics and audiovisual data in an efficient manner.
SUMMARY OF THE INVENTION
Briefly, the present invention provides an element object model and a vector graphics markup language for accessing that element object model in a manner that allows program code developers to consistently interface with a scene graph data structure to produce graphics. The vector graphics markup language comprises an interchange format for expressing vector graphics via the element object model. When interpreted, the markup is parsed into data including elements in an element tree that is translated into the objects of a scene graph data structure. At the element tree level, a property system and layout system are provided to provide rich programmability features, including inheritance characteristics and eventing, making it straightforward
for scene designers to design possibly complex scenes. In general, the vector graphics elements correspond to shape elements and other elements including image and video elements that correlate with scene graph objects of the scene graph object model. The properties and other resources of the vector graphics elements also correlate with similar properties and resources the scene graph object model.
The vector graphics system can thus program to an element level, in which each of the drawing shapes is represented as an element at the same level as the rest of the programmable elements in a page/screen, allowing interaction with the layout system, events and properties. The vector graphics system also provides a mechanism for programming to a resource level, by which scene designers can essentially shortcut the element tree and layout system and program directly to the visual API layer that interfaces with the scene graph data structure. This provides a more efficient and lightweight way to output the appropriate object, although losing of some of the programmability of the element level. In one implementation, when a fill of type "visual brush" is programmed, the parser can directly call the API layer with resource level data to create a corresponding visual paint object (which is also a correlation between the element object model and the scene graph object model). In this two-tiered system, element level vector graphics get parsed into created elements, which need later translation to the objects, while resource level vector graphics get parsed and directly stored in an efficient manner. At the same time, the resource level data or the objects created thereby can be referenced by elements and part of the element tree. To this end, elements including visual paint elements may be named. The scene designer thus has
the ability to balance efficiency against programmability as needed.
The element class hierarchy includes a shape class, an image class, a video class and a canvas class. Elements of the shape class include rectangle, polyline, polygon, path, line and ellipse. Each element may include or be associated with fill (property) data, stroke data, clipping data, transform data, filter effect data and mask data. Shapes correspond to geometry (of the scene graph object model) that is drawn with inherited and cascaded presentation properties that are used to construct the pen and the brush needed to draw the shapes. The image class is more specific than a shape and can include more raster graphical data, while the video class allows video (or similar multimedia) to be played within a displayed element. The canvas class may act as a container for shapes, to keep shapes lightweight.
In one implementation the markup code is interpreted by a parser / translator which generally adds element-level elements to an element tree / property system and attaches data to those elements. The layout system then takes the element tree with the attached presenters and translates the data to objects (via a builder) and calls to a visual API layer that interfaces with the scene graph and creates the scene graph objects.
The markup language provides distinct ways to describe an element, including a simple string format or a complex object notation (a complex property syntax). For a simple string format, the parser / translator and/or layout system uses a type converter for converting a string to an appropriate visual API object. When the fill attribute is too complex to fit into a single string, complex property syntax, which may be inline in the markup, is used to describe the property set.
Because the same rendering model is shared between the element level and the API level, many of the objects are the same, which makes parsing / translation highly efficient and provides other benefits. A resource instance also may be located elsewhere (e.g., in the markup or a file), and referenced by a name. In this manner, a scene designer can reuse an element in the element tree throughout a scene, including elements described by the complex property syntax.
Other benefits and advantages will become apparent from the following detailed description when taken in conjunction with the drawings, in which:
BRIEF DESCRIPTION OF THE DRAWINGS
FIGURE 1 is a block diagram representing an exemplary computer system into which the present invention may be incorporated;
FIG. 2 is a block diagram generally representing a graphics layer architecture into which the present invention may be incorporated;
FIG. 3 is a representation of a scene graph of visuals and associated components for processing the scene graph such as by traversing the scene graph to provide graphics commands and other data in accordance with an aspect of the present invention;
FIG. 4 is a representation of a scene graph of validation visuals, drawing visuals and associated Instruction Lists constructed in accordance with an aspect of the present invention;
FIG. 5 is a representation of a visual class, of an object model, in accordance with an aspect of the present invention;
FIG. 6 is a representation of various other objects of the object model, in accordance with an aspect of the present invention;
FIG. 7 is a representation of a transform class hierarchy, in accordance with an aspect of the present invention;
FIGS. 8 and 9 are representations of transformations of a visual's data in a geometry scale and a non-uniform scale, respectively, in accordance with an aspect of the present invention;
FIG. 10 is a representation of geometry classes of the object model, in accordance with an aspect of the present invention;
FIG. 11 is a representation of a PathGeometry structure, in accordance with an aspect of the present invention;
FIG. 12 is a representation of a scene graph of visuals and Instruction Lists showing example graphics produced by the primitives, in accordance with an aspect of the present invention;
FIG. 13 is a representation of brush classes of the object model, in accordance with an aspect of the present invention;
FIGS. 14 and 15 are representations of rendered graphics resulting from data in a linear gradient brush object, in accordance with an aspect of the present invention;
FIG. 16 is a representation of rendered graphics resulting from data in a radial gradient brush object, in accordance with an aspect of the present invention;
FIG. 17 is a representation of a rendered nine grid brush object in accordance with an aspect of the present invention.
FIG. 18 is a representation of rendered graphics resulting from having various stretch values, in accordance with an aspect of the present invention;
FIG. 19 is a representation of rendered graphics resulting from having various tile values, in accordance with an aspect of the present invention;
FIG. 20 is a representation of a grid and transformed grid, resulting from data in a visual brush object, in accordance with an aspect of the present invention;
FIG. 21 is a representation of the grid and transformed grid, with rendered graphics therein drawn from a visual, in accordance with an aspect of the present invention;
FIG. 22 is a representation of element classes of the element object model, in accordance with an aspect of the present invention;
FIG. 23 is a representation of components for interpreting markup language code to interface with the visual API layer, in accordance with an aspect of the present invention; and
FIG. 24 is a representation of clipping via a geometry path in accordance with an aspect of the present invention.
DETAILED DESCRIPTION
EXEMPLARY OPERATING ENVIRONMENT
FIGURE 1 illustrates an example of a suitable computing system environment 100 on which the invention may be implemented. The computing system environment 100 is only one example of a suitable computing environment and is not intended to suggest any limitation as to the scope of use or functionality of the invention. Neither should the computing environment 100 be interpreted as having any dependency or requirement relating to any one or combination of components illustrated in the exemplary operating environment 100.
The invention is operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the invention include, but are not limited to, personal computers, server computers, hand-held or laptop devices, tablet devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.
The invention may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, and so forth, which perform particular tasks or implement particular abstract data types. The invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
With reference to FIG. 1, an exemplary system for implementing the invention includes a general purpose computing device in the form of a computer 110. Components of the computer 110 may include, but are not limited to, a processing unit 120, a system memory 130, and a system bus 121 that couples various system components including the system memory to the processing unit 120. The system bus 121 may be any of several types of bus structures including a memory bus or memory controller, a peripheral bus, and a local bus using any
of a variety of bus architectures. By way of example, and not limitation, such architectures include Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MCA) bus, Enhanced ISA (EISA) bus, Video Electronics Standards Association (VESA) local bus, Accelerated Graphics Port (AGP) bus, and Peripheral Component Interconnect (PCI) bus also known as Mezzanine bus.
The computer 110 typically includes a variety of computer-readable media. Computer-readable media can be any available media that can be accessed by the computer 110 and includes both volatile and nonvolatile media, and removable and non-removable media. By way of example, and not limitation, computer-readable media may comprise computer storage media and communication media. Computer storage media includes both volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer-readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by the computer 110. Communication media typically embodies computer-readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. The term "modulated data signal" means a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wired media
such as a wired network or direct-wired connection, and wireless media such as acoustic, RF, infrared and other wireless media. Combinations of the any of the above should also be included within the scope of computer-readable media.
The system memory 130 includes computer storage media in the form of volatile and/or nonvolatile memory such as read only memory (ROM) 131 and random access memory (RAM) 132. A basic input/output system 133 (BIOS), containing the basic routines that help to transfer information between elements within computer 110, such as during start-up, is typically stored in ROM 131. RAM 132 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 120. By way of example, and not limitation, FIG. 1 illustrates operating system 134, application programs 135, other program modules 136 and program data 137.
The computer 110 may also include other removable/non-removable, volatile/nonvolatile computer storage media. By way of example only, FIG. 1 illustrates a hard disk drive 141 that reads from or writes to non-removable, nonvolatile magnetic media, a magnetic disk drive 151 that reads from or writes to a removable, nonvolatile magnetic disk 152, and an optical disk drive 155 that reads from or writes to a removable, nonvolatile optical disk 156 such as a CD ROM or other optical media. Other removable/non-removable, volatile/nonvolatile computer storage media that can be used in the exemplary operating environment include, but are not limited to, magnetic tape cassettes, flash memory cards, digital versatile disks, digital video tape, solid state RAM, solid state ROM, and the like. The hard disk drive 141 is typically connected to the system bus 121 through a non-removable memory interface such as
interface 140, and magnetic disk drive 151 and optical disk drive 155 are typically connected to the system bus 121 by a removable memory interface, such as interface 150.
The drives and their associated computer storage media, discussed above and illustrated in FIG. 1, provide storage of computer-readable instructions, data structures, program modules and other data for the computer 110. In FIG. 1, for example, hard disk drive 141 is illustrated as storing operating system 144, application programs 145, other program modules 146 and program data 147. Note that these components can either be the same as or different from operating system 134, application programs 135, other program modules 136, and program data 137. Operating system 144, application programs 145, other program modules 146, and program data 147 are given different numbers herein to illustrate that, at a minimum, they are different copies. A user may enter commands and information into the computer 110 through input devices such as a tablet (electronic digitizer) 164, a microphone 163, a keyboard 162 and pointing device 161, commonly referred to as mouse, trackball or touch pad. Other input devices (not shown) may include a joystick, game pad, satellite dish, scanner, or the like. These and other input devices are often connected to the processing unit 120 through a user input interface 160 that is coupled to the system bus, but may be connected by other interface and bus structures, such as a parallel port, game port or a universal serial bus (USB). A monitor 191 or other type of display device is also connected to the system bus 121 via an interface, such as a video interface 190. The monitor 191 may also be integrated with a touch-screen panel 193 or the like that can input digitized input such as handwriting into the computer system 110 via an

interface, such as a touch-screen interface 192. Note that the monitor and/or touch screen panel can be physically coupled to a housing in which the computing device 110 is incorporated, such as in a tablet-type personal computer, wherein the touch screen panel 193 essentially serves as the tablet 164. In addition, computers such as the computing device 110 may also include other peripheral output devices such as speakers 195 and printer 196, which may be connected through an output peripheral interface 194 or the like.
The computer 110 may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 180. The remote computer 180 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to the computer 110, although only a memory storage device 181 has been illustrated in FIG. 1. The logical connections depicted in FIG. 1 include a local area network (LAN) 171 and a wide area network (WAN) 173, but may also include other networks. Such networking environments are commonplace in offices, enterprise-wide computer networks, intranets and the Internet.
When used in a LAN networking environment, the computer 110 is connected to the LAN 171 through a network interface or adapter 170. When used in a WAN networking environment, the computer 110 typically includes a modem 172 or other means for establishing communications over the WAN 173, such as the Internet. The modem 172, which may be internal or external, may be connected to the system bus 121 via the user input interface 160 or other appropriate mechanism. In a networked environment, program modules depicted relative to the computer 110, or portions thereof, may be stored
in the remote memory storage device. By way of example, and not limitation, FIG. 1 illustrates remote application programs 185 as residing on memory device 181. It will be appreciated that the network connections shown are exemplary and other means of establishing a communications link between the computers may be used.
GRAPHICS ARCHITECTURE
One aspect of the present invention is generally directed to allowing program code, such as an application or operating system component, to communicate drawing instructions and other information (e.g., image bitmaps) to graphics components in order to render graphical output on the system display. To this end, the present invention provides a markup language along with a set of shape elements and other elements, a grouping and compositing system, and integration with a general property system in an object model to enable programs to populate a scene graph with data structures, drawing primitives (commands), and other graphics-related data. When processed, the scene graph results in graphics being displayed on the screen.
FIG. 2 represents a general, layered architecture 200 into which the present invention may be implemented. As represented in FIG. 2, program code 202 (e.g., an application program or operating system component or the like) may be developed to output graphics data in one or more various ways, including via imaging 204, via vector graphic elements 206, and/or via function / method calls placed directly to a visual application programming interface (API) layer 212. Direct interaction with the API layer is further described in the aforementioned copending patent application entitled "Visual and Scene Graph Interfaces."
In general, imaging 204 provides the program code 202 with a mechanism for loading, editing and saving images, e.g., bitmaps. These images may be used by other parts of the system, and there is also a way to use the primitive drawing code to draw to an image directly.
In accordance with an aspect of the present invention, vector graphics elements 206 provide another way to draw graphics, consistent with the rest of the object model (as described below). Vector graphic elements 206 may be created via a markup language, which an element / property system 208 and layout system 210 processes to make appropriate calls to the visual API layer 212. As described below, in general the vector graphic elements 206 are parsed into objects of the object model from which a scene graph is drawn, which may be provided to the scene graph via an element level via the element / property system 208 and layout system 210, or may be provided in a more efficient manner at a resource level, as also described below.
In one implementation, the graphics layer architecture 200 includes a high-level composition and animation engine 214, which includes or is otherwise associated with a caching data structure 216. The caching data structure 216 contains a scene graph comprising hierarchically-arranged objects that are managed according to a defined object model, as described below. In general, the visual API layer 212 provides the program code 202 (and the layout system 210) with an interface to the caching data structure 216, including the ability to create objects, open and close objects to provide data to them, and so forth. In other words, the high-level composition and animation engine 214 exposes a unified media API layer 212 by which developers may express intentions about graphics and media to display graphics information, and provide an underlying platform
with enough information such that the platform can optimize the use of the hardware for the program code. For example, the underlying platform will be responsible for caching, resource negotiation and media integration.
In one implementation, the high-level composition and animation engine 214 passes an instruction stream and possibly other data (e.g., pointers to bitmaps) to a fast, low-level compositing and animation engine 218. As used herein, the terms "high-level" and "low-level" are similar to those used in other computing scenarios, wherein in general, the lower a software component is relative to higher components, the closer that component is to the hardware. Thus, for example, graphics information sent from the high-level composition and animation engine 214 may be received at the low-level compositing and animation engine 218, where the information is used to send graphics data to the graphics subsystem including the hardware 222.
The high-level composition and animation engine 214 in conjunction with the program code 202 builds a scene graph to represent a graphics scene provided by the program code 202. For example, each item to be drawn may be loaded with drawing instructions, which the system can cache in the scene graph data structure 216. As will be described below, there are a number of various ways to specify this data structure 216, and what is drawn. Further, the high-level composition and animation engine 214 integrates with timing and animation systems 220 to provide declarative (or other) animation control (e.g., animation intervals) and timing control. Note that the animation system allows animate values to be passed essentially anywhere in the system, including, for example, at the element property level 208, inside of the visual API layer 212, and in any of the other resources.
The timing system is exposed at the element and visual levels.
The low-level compositing and animation engine 218 manages the composing, animating and rendering of the scene, which is then provided to the graphics subsystem 222. The low-level engine 218 composes the renderings for the scenes of multiple applications, and with rendering components, implements the actual rendering of graphics to the screen. Note, however, that at times it may be necessary and/or advantageous for some of the rendering to happen at higher levels. For example, while the lower layers service requests from multiple applications, the higher layers are instantiated on a per-application basis, whereby is possible via the imaging mechanisms 204 to perform time-consuming or application-specific rendering at higher levels, and pass references to a bitmap to the lower layers.
SCENE GRAPH OBJECT MODEL
As described below, the rendering model is shared by the higher-level, control-based vector graphics elements 206, and the lower-level objects created by the visual API layer 212 used in the scene graph data structure 216. This provides a significant amount of correlation between the higher-level elements of the present invention, and the lower-level objects. The following describes one implementation of the scene graph object model.
The present invention offers several layers of access to graphics and rendering services. At a top layer, Vector Graphics) provides a number of advantages common to XML-based graphics markup, including that it is straightforward to use with the object model of the present invention, it is readily reusable, and it is generally familiar to users of similar systems. Objects are available as markup elements, with properties exposed
either as attributes on those elements or as complex properties.
The present invention renders graphics content through the use of Visual objects. This underlying Visual layer is available in several ways. Programmers can access visuals directly in code; they can program using the object model; and, in accordance with an aspect of the present invention, they can use XML-based markup.
Predefined vector shapes are available in Vector Graphics, like the Polygon and Path elements, and are contained within a layout element, such as Canvas, Dock Panel, and Flow Panel. The Canvas element provides a means for absolutely positioning elements within a parent space. For the Canvas and its child shapes, the default unit of measurement for screen coordinates is the device independent pixel. DockPanel and FlowPanel provide a number of size and alignment properties, as well as control over borders.
Vector Graphics provides a number of defined vector graphics shapes that will be familiar to users of SVG. These elements inherit from the Shape class, and include Ellipse, Line, Path, Polygon, Polyline, and Rectangle. These elements inherit a number of common attributes from Shape, including Stroke and StrokeThickness, Fill, and data attributes to specify coordinates and vertices. Developers can also skew, rotate, translate, and scale shapes by applying transformations.
The Line element provides a convenient example. The following example specifies coordinates for the start and end points, a stroke color and width, and rounded capping on the ends of the line.

An Ellipse is created by defining the shape's center with the CenterX and CenterY properties. Instead of specifying foci, the bounds of the ellipse are set by setting the RadiusX and RadiusY properties. To draw a circle in Vector Graphics, the developer can specify an ellipse whose RadiusX and RadiusY values are equal.
The Path object provides the means to draw curves and complex shapes, whether open or closed. Path exposes the properties generally available on objects that inherit from the Shape class, but also enables developers to specify more complex parameters to describe curves. Developers can use paths in markup in various ways, including to specify path data using a special syntax in the Data, or specify individual path segments using the PathGeometry and PathGeometry objects.
The coordinate pairs and inline parameters provided for the Data attribute can specify line segments, Bezier curves, and a variety of other path specifications. The following example shows a Path element that defines two subpaths.

s

The Vector Graphics shapes expose various attributes of the Brush object to specify the color of their Stroke and Fill. The following example specifies these attributes on Canvas and Ellipse elements. Note that valid input for color properties can be either a keyword or hexadecimal color value.

Alternatively, a developer can use complex property syntax and the SolidColorBrush class to specify colors. Specifying properties using more complex syntax becomes necessary when reusing graphics markup with property sheets, or to animate shape properties like color.

This irregular polyline shape uses pre-defined color values for the Stroke and Fill properties. The FillOpacity property affects the fill color in this case by making!t slightly transparent (opacity of 0.8) so that it blends with any underlying color:

Just as when specifying solid color fills and backgrounds for shapes, gradients may be specified. The following example sets a horizontal gradient as the Fill
property of a Rectangle, with Blue as the start color and Red as the end color.

A developer can also specify gradients with complex property notation. This notation provides a greater degree of specificity in rendering the gradient and exposes additional properties. To animate a shape's fill with a gradient, for example, complex notation would be used. The following example uses the RadialGradientBrush object to set a gradient on a Rectangle. The RadialGradientBrush object provides access to the gradient's properties, like its radius and any transforms or animations that might be set on it; these properties are inherited from GradientBrush. The
GradientStopCollection collection enables the developer to specify multiple gradient stops and indicate their Offset (the location of the stop in the gradient):

The present invention provides standard
transformations for vector-drawn shapes. A developer can skew shapes, rotate them, change their scale, and translate (reposition) them either as static graphics or in animations. To use the Transform objects in markup, they need to be specified as children of the TransformDecorator.
The ScaleTransform transformation is the most straightforward of the available transformations, and is used by simply specifying a factor by which the element should be resized. The following example resizes a Polygon element by 150 percent along the y-axis of the coordinate system of the parent Canvas:

Note that if specifying further transformations in the same TransformDecorator object, the need to be enclosed in a TransformCollection. Also, the order in which each transformation is parsed and applied makes a difference in the final effect. For example, rotating an element before translating it to different screen coordinates may make a difference.
The following example shows a rotation and a translation applied to two polyline elements: