====Basic Standalone SVG File==== Digital signage SVG files use embedded Javascript code to make the SVG image respond to live data updates from ARDI. First, you prepare the image file in the vector image editor of your choice. For those with a limited budget, **Inkscape** produces SVG files that are extremely easy to work with and is free and open-source. Let's start with the basic SVG file... 0% This defines a simple red rectangle with white text inside, reading "0%". To make this respond to live data, we need to first import the Javascript libraries we depend on. In this example, we will be using the ARDI client library and JQuery. 0% Now that our dependencies are covered, we can actually add the script that responds to our incoming data. 0% In this code, var connection = new HMIPanel(); This creates a new instance of the [[HMIPanel]] class - the ARDI client class, used to subscribe to values. connection.Subscribe("22:24:measurement",function (val) { ... }); This line registers a new function to be called whenever there is a change to the [[ardi point code|point code]] for asset //22//, property //24//, node //measurement// using the [[Subscribe]] function. If you're uploading the SVG file to an ARDI asset, you can save yourself some time and effort by using [[embedding codes|embed codes]]. When data changes, your callback function wiill be run - the first parameter to the function is the new value. In the handler, we change the displayed SVG **text** value to match the updated value from ARDI (note that we add the measurement units - the value from ARDI is the raw number, without units). We also check the value - if it is less than 25%, we set the text //fill colour// to red. Otherwise, it is black. If you wanted, this is a great place to use JQuery or D3 animations to smooth out the transitions between numbers and/or colours. connection.ConnectTo("demo.optrix.com.au/s/pd"); This uses the [[ConnectTo]] function to connect to the 'ademo' server, asking for the //pd// database (which in this case, stands for Powergen Demo). ===Summary=== And that - apart from the actual code to update the HTML content - is how you can create images and/or web pages that respond to live data. Each time a new change comes through from ARDI, one or more of your **subscribed** functions are called, giving them the chance to update themselves with live data. This creates an SVG image that - when opened in a modern browser such as Chrome, Firefox or Edge - connects to ARDI and is immediately updated with live data. You can use this to place live displays in any part of your facility, or even create a view that you can email to others or open across a network without needing to install software. ===Making It Even Better=== You can make your job even easier by adding the SVG to the media of an asset, which allows you to use the [[Embedding Codes]].