waxml xy area
The HTML CustomElement is a two-dimensional interactive controller. It supports one or several handles to be moved within a circular or squared area. The handles can be set to restrict their movement to the x, y or both axis. Read more about the handles at waxml-xy-handle. The element can have the following attributes:
- background-color: CSS color for background color
- border settings: CSS border properties
- width: width in pixels
- height: height in pixels
- type: "square" or "circle"
- columns: number of columns
- rows: number of rows
- grid-color: CSS color for grid color
- catch: "true" or "false" (controls if the handle - if only one - shall jump to where the area is clicked/touched)
Ex.1
A simple, circular xy-area with one handle:
The HTML to generate the circular waxml-xy-area with one handle:
<waxml-xy-area width="300" height="300" type="circle" background-color="#ccf" border="3px solid #333">
<waxml-xy-handle></waxml-xy-handle>
</waxml-xy-area>Ex.2
An xy-area with separate handles for different audio files and the listener to preview spacial audio using ObjectBasedAudio elements:
The HTML to generate the waxml-xy-area with five handles
<waxml-xy-area
width="500"
height="500"
columns="40"
rows="40"
border="2px solid black"
background-color="#696">
<waxml-xy-handle direction="xy" x="0.25" y="0.25">bird1.mp3</waxml-xy-handle>
<waxml-xy-handle direction="xy" x="0.5" y="0.75">bird2.mp3</waxml-xy-handle>
<waxml-xy-handle direction="xy" x="0.25" y="0.25" >bird3.mp3</waxml-xy-handle>
<waxml-xy-handle direction="xy" x="0.75" y="0.25">footsteps.mp3</waxml-xy-handle>
<waxml-xy-handle icon="arrow-up-circle-fill" size="40px" x="0.5" y="0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"></path>
</svg>
</waxml-xy-handle>
</waxml-xy-area>