SVG

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

Svglogo.png

Scalable Vector Graphics (SVG) is an open standard language created and developed by the World Wide Web Consortium to address the need for a versatile, scriptable and all-purpose vector format for the web and otherwise. It is an XML-based vector image format for two-dimensional graphics, with support for interactivity and animation.

SVG images and their behaviors are defined in XML text files; this means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software, such as Inkscape, Adobe Illustrator, CorelDRAW etc.

SVG is a language for rich graphical content. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), multimedia (such as raster images, video, and audio), and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects.

SVG specification

The rendering engine of SpinetiX players is optimized for Scalable Vector Graphics content, conforming to the SVG Tiny 1.2 specification.

The baseline functionality of SVG Tiny 1.2 profile has been extended on SpinetiX players to support features from SVG 1.1 main profile, additional SVG elements, attributes, and uDOM API functions.

Features from SVG 2

Features from SVG 1.1 main profile

  • Support for the Opacity Attribute Module from the SVG Basic profile, i.e. "opacity" attribute may be applied to any element, including a <g>.
  • Support for the Basic Clip Module from the SVG Basic profile, i.e. a <clipPath> may only contain a single rect that defines the clipping path, with the additional restriction that only userSpaceOnUse coordinates are supported.
  • Support for elliptical arc path elements inside a path specifications (<path> element or animation path).
  • Support for the "style" attribute on any element, which may contain any of the supported SVG properties.
  • Support for the "href" attribute on <linearGradient> and <radialGradient> elements to reference the stop list of a previous element.
  • Limited support for SVG Filters Added in firmware 3.1.0.

Additions to SVG elements

The following SVG elements have been extended to support more features:

  • <svg> element supports the "dur" attribute to specify the time that should be retained as the "media duration" for this document.
  • <video> and <audio> elements may specify live streaming sources.
  • <animation> element may reference SVG files, besides video and image files.
  • <image> element may reference an SVG file. If the file is animated it will be displayed at document time 0 or, if defined, at the snapshot time.

auxCmd

The <auxCmd> element is used to trigger the execution of a command towards a specified target, which is a device connected to the HMP via the serial port. The specified command must be implemented into the serial port protocol file selected on the device.

The <auxCmd> element uses the following attributes:

  • target = ”target”
    Mandatory parameter representing the type of target to control. It must match the target of the protocol file.
  • command = ”command”
    Mandatory parameter representing the name of the command to execute. It must match command attribute of one of the <OnStart> elements within the protocol file.
  • param1 (to param9) = “parameters” (optional)
    Optional parameters passed with the command; each parameter could be a string, a number or a regular expression. The content of the parameter paramX is stored in $PARAMX (e.g., $PARAM1, $PARAM2 etc.) when executing the protocol file.
  • begin = "begin-value-list": (optional, =‟0‟ if not present)
    Optional parameter to control when the element should begin (i.e. become active). If not present, the default timing is '0'. See more information about the begin attribute.

For example, a PowerOn command can be triggered using: 

<auxCmd command="PowerOn" target="monitor"/>

The actual PowerOn command could be implemented inside a protocol file like this: 

<onStart command='PowerOn' goto='start'>
    <write data='&amp;#x8C;&amp;#xFF00;&amp;#xFF00;%c{2}%c{1}&amp;#x8F;'/>
</onStart>

Other serial port commands can be implemented in the same manner; first in the protocol file and then called from an SVG document using the <auxCmd>statement.

Note Note:
For the JavaScript equivalent of this element, see sendComPort() function.

iframe

Note  
This feature is available on HMP400, HMP400W, HMP300, and HMP350 devices, running firmware 4.0 and above.

The <iframe> tag specifies an inline web page frame to embed a web document within the current SVG document.

It can take the following attributes:

  • src (mandatory)
    URI of the web page to be rendered.
  • sandbox
    A string containing zero or more of the following options:
    • allow-top-navigation → user can change the top level page
    • allow-scripts → JavaScript code can be executed in the web page
    • allow-same-origin → allow local file to open remote URI and disable CORS.
  • frameWidth
    Width used to render the iframe, may be different from the actual display width. If not set, the display width is used.
  • scrollX, scrollY
    Position of the scroll in the page. Needed if the rendered page sizes are larger than the display sizes. Applies to HMP300 and HMP350.
  • zoom
    Zoom factor. This has been removed starting with release 4.5.0.
  • spx:customHeader
    Specify additional custom headers to be used by the player when fetching a web page.
  • spx:scrollbar
    Select between "auto", "hidden" (scrollbar hidden, but scrolling with mouse wheel is possible), and "disabled" (no scrollbar and no scrolling). Applies to HMP400 and HMP400W.
  • spx:userAgent
    specify a custom user agent to be used by the player when fetching the web page.
Note Note:
The zoom factor is now computed automatically based on the width and height of the layer. You can use frameWidth or frameHeight to force how the web page is rendered within that layer area. For instance, if you use frameWidth=1024, the content is rendered as in a browser window at 1024 pixels, regardless of the layer size - if you increase the layer size, the zoom also increases. As a general rule, use only frameWidth, as frameHeight is automatically calculated to match the layer size.

spx:multiScreen

This element belong to the SpinetiX namespace and is used to work with multi-screen scene.

The <spx:multiScreen> element contains a list of the positions of each rectangular screen inside the design space using <spx:screen> elements. There must be at most one <spx:multiScreen> element and it must be under the top <svg> element.

The <spx:screen> uses the following attributes:

  • viewBox = "x y w h", where:
    • x is the x-axis coordinate of the top-left point of this screen,
    • y is the y-axis coordinate of the top-left point of this screen,
    • w is the width of this screen,
    • h is the height of this screen,
  • xml:id is the screen identification name

Example: 

 <spx:multiScreen>
  <spx:screen viewBox="0 0 1280 720" xml:id="top"/>
  <spx:screen viewBox="0 720 1280 720" xml:id="bottom"/>
 </spx:multiScreen>

Additional SVG attributes

Note  
Most of these attributes can be set from Layer Properties > Advanced tab.

allow

Added in release 4.7.0.

This attribute can be set to "spx-api" in order to enable the Shared Variables JavaScript API and the JavaScript COM API in web page layers. These APIs are disabled by default.

audio-pan

The audio-pan attribute takes a numerical value which specifies the spatial position of the media in degrees (-180 to 180) relative to the front. A value of 180 will for example reverse the left and right channels of a stereo source.

spx:accounting

The spx:accounting attribute can take the value "open,close" to mark that a certain resource will be added to the accounting.log for accounting purposes.

spx:accounting="open,close"

spx:accounting-tag

This attribute refers to additional text that is put in the rightmost column in the accounting log for open or close entries referring to this media. It can be used to simplify the parsing of the accounting log by the user application.

spx:audioDelay

Additional attribute spx:audioDelay on animation and video elements to adjust the audio/video delay. Positive values delay the audio, while negative values will advance it in regard to the video. Meaningful values are between -200ms and 500ms.

spx:buffering

The spx:buffering attribute can be used on streaming media to increase or decrease the default stream buffering duration, which is chosen according to the source information (RTP or MPEG2 transport stream sources).

  • It can be specified on animation, video and audio elements as a duration (in seconds, if the time unit is not specified).
  • Starting with 4.0.2 release, negative values can also be used to reduce the streaming latency, but care should be taken to avoid buffer underflow when the latency is too low to handle network delay variations.
  • This attribute has no effect on non-streaming sources, such as files.

spx:cacheMaxAge

The spx:cacheMaxAge attribute can be used to overwrite the caching instructions returned by the server for a certain remote file. It can be added to image, video, audio, or animation elements and can take one of the following values:

  • 0 (i.e. zero)
    Instruct the HMP to not cache the media resource. This should be used with caution, since the file will be downloaded on every request.
    spx:cacheMaxAge="0"
  • a value grater than 0
    Instruct the HMP to revalidate the cache after the specified time(in seconds) by querying the server for updates; if the remote file has been updated on the server, the file will be downloaded.
    spx:cacheMaxAge="3600s"
  • indefinite
    Instruct the HMP to use the time specified by the server as maximum cashing time.
    spx:cacheMaxAge="indefinite"
  • disable (added in 3.0.6)
    Instruct the HMP to disable the cache usage for media resources requiring progressive download. Note that this should not be used for other media resources, as the player might freeze and reboot.
    spx:cacheMaxAge="disable"

spx:maxDemuxingBufferSize

Additional attribute spx:maxDemuxingBufferSize on animation, video and audio elements to control the maximum size (in bytes) of the audio/video demuxing buffer. The default is 3145728 for streaming sources and 1048576 for multimedia files. This should only be used when there are "Stream demuxing failed" errors within player.log.

spx:mask-href

Available from 4.1.0 release.

This attribute is used to display video with transparency, by specifying the mask href as a black and white video file, where black is fully transparent and white is fully opaque.

spx:multiScreenId

Additional conditional attribute spx:multiScreenId to switch on or off parts of the document based on the screen ID.

spx:overrideFPS

Available from 3.1 release.

Additional attribute to override the FPS value sent by a streaming source or read from a video file header in case the FPS is not correct. The attribute value is either an integer (e.g., "24") or a fraction in the form x/y where both x and y are integers (e.g., "30000/1001").

spx:packetization

Available from 4.1.0 release.

The spx:packetization attribute can be used on media elements to control the packet type for RTP/RTSP streaming. It can take one of the following values:

  • "any"
    This is the default value, which is safer for most cases.
  • "compliant"
    This means the RTP stream is strictly compliant with the relevant RFC for transport of MPEG2, MPEG4 or H.264 video over RTP and thus the HMP can skip some processing steps to find access units - this should enable a gain in latency of up to 1 frame for MPEG2 and MPEG4, and 2 frames for H.264, so typically 66ms at 30fps. When not in a low latency configuration or for other codecs, this parameter does not have any benefit and it is safer not to use it.

Note that this attribute has no effect if MPEG transport streams are used, even if it is over RTP.

spx:silent

Additional attribute spx:silent="true" on video elements to suppress the rotating-dots animation while connecting to a streaming source.

spx:start-at-random-time

Additional attribute spx:start-at-random-time="on" to be used for scheduled content in order to prevent executing scripts from the scheduled starting time of the document, which could trigger a player reboot (and eventually Safe mode).

Note that this attribute is added to the <svg> element and requires the spx namespace to be correctly specified. 

<svg [...] xmlns:spx="http://www.spinetix.com/namespace/1.0/spx" spx:start-at-random-time="on">

spx:syncVar

Available from 4.1.0 release.

The spx:syncVar attribute should be used on streaming elements (MPEG2-TS multicast over RTP or UDP only) to enable multiscreen synchronization of streaming video. Its value should be a Shared Variable (e.g., sync@spx-hmp-001d50200015.local) located on one of the players composing the multiscreen.

spx:transport

Additional attribute spx:transport on media elements to control what transport is used for RTP packets with RTSP streaming. It can take one of the following values:

  • "tcp": request RTP streaming interleaved within the RTSP TCP connection
    • this allows to do RTP / RTSP streaming over NAT routers and firewalls which do not have transparent RTP / RTSP support but has the disadvantages of TCP based streaming (i.e. head of line blocking and conflicting TCP rate control) causing uncontrolled delay under adverse network conditions.
  • "unicast": request unicast RTP streaming over UDP.
  • "multicast": request multicast RTP streaming (always UDP).
  • no value: use the server's default, typically unicast or multicast RTP over UDP.

Additions to SVG uDOM

See also the complete list of supported JavaScript APIs.

The HMP presents the following additions to the SVG Micro DOM (uDOM):

getElementsByTagName()

Added in 3.1.0 firmware release.

The getElementsByTagName() function returns a collection of all descendant Elements with a given tag name.

Note: For tree traversal, you can also use the standard getElementById() function or the ElementTraversal interface attributes (firstElementChild, lastElementChild, previousElementSibling and nextElementSibling), and the localName attribute of the Node interface to test if a certain node is the one you are looking for.

getURL()

The getURL method is not a new addition, but it was extended from the original definition (see SVGGlobal interface) to allow for an optional parameter called flags: 

 const unsigned short GETURL_CACHE_CONTENT = 1;
 const unsigned short GETURL_TRACK_CHANGES = 2;
 const unsigned short GETURL_ALWAYS_CHECK = 4;
 void getURL(in DOMString iri, in AsyncStatusCallback callback, in unsigned short flags);
  • The flags parameter can take the following values:
    • GETURL_CACHE_CONTENT
      saves the resource in the player cache.
    • GETURL_TRACK_CHANGES
      tracks / detects if the resource has been changed on the server and invokes the callback function when it has.
    • GETURL_ALWAYS_CHECK
      force the caching time to a very small value, regardless of the headers returned by the server. Using this flag will insure that content is check from the server for each request. This will increase the network bandwidth.
      This flag is available since 3.0.1
    • GETURL_CACHE_CONTENT|GETURL_TRACK_CHANGES
      does both actions from above. This is the recommended value.
Calling the getURL method without the flags parameter (e.g. getURL( iri, callback );) means no caching and no tracking.
  • getURL supports the http(s) protocol for remote resources and the file protocol to get local stored resources.

logAtLevel()

This method can be used to change the global logging level dynamically from the JavaScript code. 

void logAtLevel(in DOMString logLevel, in DOMString logText);

where logLevel can take one of the following values: LOG_LEVEL_TRACE, LOG_LEVEL_DEBUG, LOG_LEVEL_INFO, LOG_LEVEL_WARN or LOG_LEVEL_ERROR.

Example: 

logAtLevel( LOG_LEVEL_ERROR, "Houston, we have a problem." );

propFindURL()

The propFindURL method performs a WebDAV PROPFIND request on the given URL, which is used to query information on remote resources and to list the content of directories on a web server, provided the WebDAV extension to HTTP is enabled on the server.

Listing of directories in local content (using a relative or absolute path as the URL) is supported as well, which can be used for instance to build "automatic" playlists. 

void propFindURL( DOMString url, AsyncStatusCallback callback, optional unsigned short depth);
  • url - target url for the WebDAV propFind request;
  • callback - callback function;
  • depth - 0 to get the WebDAV properties of the target resource, 1 to query for the target resource and its immediate children. The default value is 1.

As in getURL, the callback is called both on error or success and is passed a single AsyncURLStatus status argument.

If status.success is true, then status.contentType is set to "application/json" and status.content will be an array of objects, whose properties are listed below:

  • filename - resource name;
  • href - absolute path to resource for local resources or full URL for remote resources;
  • creationdate - value of the DAV:creationdate property represented as a Date object, or null if no such property was returned by the server;
  • getcontentlength - value of the DAV:getcontentlength property or null if no such property was returned by the server;
  • getetag - value of the DAV:getetag property or null if no such property was returned by the server;
  • getlastmodified - value of the DAV:getlastmodified property represented as a Date object, or null if no such property was returned by the server;
  • resourcetype - value of the DAV:resourcetype property, which is always "collection" for directories and null otherwise.

sendComPort()

The sendComPort() function triggers the execution of a command towards a specified target, which is a device connected to the HMP via the serial port. The specified command must be implemented into the serial port protocol file selected on the device. Optional arguments for the command can be provided; their interpretation is command dependent. 

void sendComPort(in DOMString target, in DOMString command, [in DOMString arg1, in DOMString arg2, ...]);

For example, to send a "power on" command towards the monitor using a protocol file, use: 

sendComPort( "monitor", "PowerOn" );

The actual PowerOn command could be implemented inside a protocol file like this: 

<onStart command='PowerOn' goto='start'>
    <write data='&amp;#x8C;&amp;#xFF00;&amp;#xFF00;%c{2}%c{1}&amp;#x8F;'/>
</onStart>
Note Notes:

KeyboardEvent

The KeyboardEvent interface has been extended to include the key modifiers such as shift, alt, ctrl and meta: 

interface KeyboardEvent : UIEvent
{
  readonly attribute DOMString    keyIdentifier;
  readonly attribute boolean      ctrlKey;
  readonly attribute boolean      shiftKey;
  readonly attribute boolean      altKey;
  readonly attribute boolean      metaKey;
};

Not supported

Event attributes

SVG Tiny 1.2 does not support the event attributes ('onload', 'onclick', 'onactivate', etc.). Instead SVG Tiny 1.2 uses XML Events, through the inclusion of the 'listener' and 'handler' elements to provide the ability to specify the event listener separately from the graphical content.

<tref>

<tref> is not supported in SVG Tiny - to reference a block of text without duplicating the text content, you can either use:

  • JavaScript code to set the text content to the contents of a <tspan> (this will keep text and formatting from the <tspan> source) or
  • the <use> element, which can refer to <textArea> or <text> nodes.

Example: 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" dur="indefinite" height="100%" viewBox="0 0 1280
 720" viewport-fill="black" width="100%" id="svg">
 <title id="title">Use of textArea sample</title>
 <defs>
 <text id='text' font-size='48' font-family='Comic Sans MS'>Sample Text</text>
 <textArea id='textArea' font-size='48' font-family='Comic Sans MS' text-align='center' display-align='center' width='600' 
 height='100'>Sample Text Area</textArea>
 </defs>
 <use x='100' y='100' fill='#FFFFFF' xlink:href='#text' />
 <use x='100' y='200' fill='#FFFFC0' xlink:href='#text' />
 <use x='640' y='100' fill='#FFFFFF' xlink:href='#textArea' />
 <use x='640' y='200' fill='#C0FFFF' xlink:href='#textArea' />
 </svg>
Retrieved from "https://support.spinetix.com/w/index.php?title=SVG&oldid=18661"
This page was last modified on 30 January 2024, at 12:39.