SVG Controller User Guide

Transcription

1 COMPONENTS FOR XCELSIUS SVG Controller User Guide Version Inovista Copyright 2010 All Rights Reserved Page 1

2 Table of Contents Introduction... 3 More Information... 8 System Requirements for Installation... 8 Installing Inovista Add-ons... 9 Using the Properties Sheet Main Property Editors Spreadsheet Binding Optional Spreadsheet Binding or Manual Data Entry Color Properties Effect Property Editors The General Tab The SVG Files Sub Tab The Image Setup Sub Tab Path Shape Options Group Options Text Options Tooltip Options The Cell I/O Sub Tab The Options Sub Tab The Appearance Tab The Tool Tips Sub Tab Available HTML Tags when Using HTML Text The Border Sub Tab The SVG Image Tab The Behavior Tab The General Sub Tab The Visibility Sub Tab The Effects Sub Tab The External Bind Sub Tab Inovista Copyright 2010 All Rights Reserved Page 2

3 INTRODUCTION The Inovista SVG Controller takes Scalable Vector Graphics (SVG) files and converts them to a component that can be used in Xclesius. SVG images are resolution independent, so that the image can scale up or down to fit proportionally any size display. A vast range of SVG files, depicting everything from specialist maps to product images are available on the web. Equally, you can create SVG files manually or generate them from popular software products such as Adobe Illustrator, Microsoft Visio or Inkscape. An Xcelsius designer can make use of the SVG Controller to access this reservoir of images to greatly enhance the functionality and style of the dashboard delivered to an end user. Once in Xcelsius, a designer can use the SVG Controller to define hotspots on any part or parts of the image. Hotspots are used to drive other values in the dashboard. A mouse rollover, click or double click on the hotspot can update the dashboard. Examples of this would include a click on a region in a map, a room in a building plan or a seat in a training room. You can also manage alerting and highlighting by changing colors, transparencies and text values based on external data. You can define dynamic tooltips, update their values as source data changes and even update their fonts, colors and backgrounds based on that underlying data. The presentation of visual layers, as seen in products such as Adobe Photoshop, can be simulated using group options. In this way, you can make whole parts of the image visible, invisible or set a level of transparency. Up to 10 different images can be included in a single SVG Controller component, allowing users to drill down through images, select a different view of the application or present a new application. The main features of the SVG Controller include: A powerful SVG Parser that successfully converts most SVG files to an Xcelsius component. The ability to create image hotspots driven by a mouse rollover, single or double click. Alerting or highlighting options that change colors, transparencies and text in parts of the image based on a user action or change of source data. The simulation of image layers so that a user action or a change of source data can add or remove (or change the transparency) of a whole section of the image. The generation of dynamic tooltips with a customizable look and feel. The storage of up to 10 different SVG images in a single component. A user action or change of source data can replace the current image with another. Resizing of the image while keeping the original resolution. The ability to move the image around using a mouse drag. Setting the visibility of the image based on values in the dashboard. The use of effects such as zoom, dissolve and blur which occur on some action on the image. Actions may include initialization, hiding, showing, mouse activity or adding the image. Inovista Copyright 2010 All Rights Reserved Page 3

4 The SVG Controller is driven by a powerful parser that converts raw SVG files into a component that can be deployed in Xcelsius. To see a more detailed description of its capabilities and limitations (including a download of sample files with examples of successful and failed parses), read the related document, SVGParserIssues.pdf. By accessing the available on-line resources or creating your own illustration, just about any type of image that can be included in the application. Import Many types of SVG Image To create hotspots, text manipulation or alerting, the SVG Controller needs parts of the SVG file to contain unique IDs that represent the image or text that it will manage. Some existing SVG images will be functional with no need for amendment. For others, you can use an SVG editor, for example, an open source product like Inkscape ( or a commercially available product like Adobe Illustrator. At this point you have a number of options. You can edit the image; grouping together related parts or adding new items. Then give these items a unique ID. Inovista Copyright 2010 All Rights Reserved Page 4

5 See the related document, PrepareWithInkscape.pdf for examples of preparing an SVG document using Inkscape. The SVG Controller will import these IDs which can then be accessed from within the Xcelsius property sheet. In the Xcelsius property sheet, you can define what happens when a user clicks a section of the image or moves the mouse over it. You also use these IDs to define colors and transparency levels of sections of the image. Mouse Actions Driving Tooltips and Chart Updates The SVG Controller can store up to 10 different SVG files. The different files are loaded and presented to a user by matching a value in the Xcelsius spreadsheet with a value defined in the property sheet for each of the SVG images. This can be used to present a user with a drill down effect, for example, by loading one the images when a value is changed in the dashboard or when a section of an image is clicked. It can also be deployed to depict a completely different dimension of the underlying data in the dashboard. Textual items in images can also be updated. The values of the text, the font sizes and the text color can all be set based on values in the underlying data. The image below shows an example of a click on one image opening another image. The values in the second images are derived from the values pertaining to the original click. Inovista Copyright 2010 All Rights Reserved Page 5

6 Clicking on an SVG Image Section Opens another SVG Image While the SVG specification does not provide a layer facility that is common in products like Photoshop, it can be simulated using groups. Basically, items that are used to create a layer (paths, circles, rectangles, text etc) are placed under a single group. Once a group containing those items has been created, you can set generic values for that group. This includes setting visibility levels. A visibility level of 0 will hide all values for that group, whereas a visibility level of 1 will completely show all the items. There is also the possibility of setting a value of between 0 and 1. The nearer the value is to 0 the more transparent the layer will be, the nearer to 1, the more opaque. Providing you have given these groups/layers a unique ID, the SVG Controller allows you to set the visibility level of the group. If the visibility level is bound to a spreadsheet value, this value can be updated at runtime, thus giving the impression of a layer becoming visible as the spreadsheet value changes. Inovista Copyright 2010 All Rights Reserved Page 6

7 There are many potential uses for layering. For example, a success (or fail) icon becoming visible when data values reach a certain point; a map overlay presented to provide more information or removal of detail in order to see certain parts of an image more clearly. The image below shows a map of California which shows or hides its counties when a button is clicked. County Layer Hidden County Layer Visible You can popup a tool tip for all items in the SVG image. Tool tips can be fixed text or generated dynamically using spreadsheet formulae. They can be styled using standard or HTML text with backgrounds, background transparencies and fonts all fully customizable. NOTE: For other documents including a tutorial, please see the next section. Inovista Copyright 2010 All Rights Reserved Page 7

8 MORE INFORMATION The SVG Controller demo pack is available at: The demo pack includes a tutorial, sample XLFs, SWFs, an overview of using Inkscape to prepare SVG files and an overview of the capabilities and limitations of the SVG parser. For more information about all Inovista products please go to: Check in the Samples and Tutorial tabs for examples and videos that can be downloaded. To ask a question about this document or any Inovista product, please contact Inovista with either of the following addresses: support@inovista.com info@inovista.com SYSTEM REQUIREMENTS FOR INSTALLATION Xcelsius 2008 Service Pack 1 or later Flash Player 9 or greater At least 2 Gigabytes or RAM is recommended Inovista Copyright 2010 All Rights Reserved Page 8

9 Text & Shapes Suite User Guide INSTALLING INOVISTA ADD-ONS 1. Open Xcelsius and select the File menu option. On the menu drop down, select Manage Add- Ons On the window that pops up, click on the Install Add-On button and locate the downloaded.xlx in the file system. 3. Close the pop up window and restart Xcelsius. On restart, the component should be available in the Xcelsius components box. Inovista Copyright 2010 All Rights Reserved Page 9

10 Text & Shapes Suite User Guide To use the component, once installed, simply drag the required component from the Component tab to the Xcelsius canvas. Inovista Copyright 2010 All Rights Reserved Page 10

11 Text & Shapes Suite User Guide USING THE PROPERTIES SHEET In addition to the standard property editors that are in common usage throughout Xcelsius; for example, the textual editors that allow a user to define font and font families, Inovista provides a range of specialist component editors. MAIN PROPERTY EDITORS SPREADSHEET BINDING To use data from the spreadsheet, use the bind editor property. Click on the button on the right hand side to present a popup dialog box which allows the selection of a spreadsheet data range. Depending on the property, the data to select may be contained in a row or column of data. Multiple rows and columns may also be selected if that is relevant to the property. OPTIONAL SPREADSHEET BINDING OR MANUAL DATA ENTRY Some properties offer the ability to select either a spreadsheet range or the manual entry of data. To manually enter a value, enter the required value into the text field and then click on the check button. To use a spreadsheet range or single cell value, use the range selector button. Inovista Copyright 2010 All Rights Reserved Page 11

12 Text & Shapes Suite User Guide COLOR PROPERTIES The color editors generally provide a standard and advanced color picker. To select a standard color or a color that has been recently used, click on the standard color picker option. Then select the required color from the options available. To use the advanced color picker, click on the rainbow button color dialog.. This will present the advanced Use the slider to the right of the spectrum to set a base color range, and then click on the color on the main panel in order to select a color for the property. When finished, click on the Done button. The actual hexadecimal value of the color can be entered into the text field at the top right of the dialog. Hue, Saturation and Luminance values can be entered at the bottom of the dialog as can decimal Red, Green and Blue values. Inovista Copyright 2010 All Rights Reserved Page 12

13 Text & Shapes Suite User Guide TIP In the standard color picker, type or paste the hexadecimal value into the field at the top and hit enter to use that color. EFFECT PROPERTY EDITORS You can create an effect that occurs when an action happens to an SVG image. You can add an effect for one of the following actions: Creation Complete (on initializing the image) Roll Over (when a mouse pointer is moved over the image) Roll Out (when a mouse pointer is moved away from the image) Mouse Down (on mouse click) Added (when a new image is added or made visible) Hide (when an image is hidden) Show (when an image is made visible) Inovista Copyright 2010 All Rights Reserved Page 13

14 Text & Shapes Suite User Guide These effects are defined in the effect editor. A full range of effects are available and include: Blur Dissolve Fade Glow Move Resize Rotate Wipe Down Wipe Left Wipe Right Wipe Up Zoom Select the required effect (or None) from the Effect drop down. Select the duration of the effect. Valid options are from 0 milliseconds to 10,000 milliseconds or 10 seconds. Select the required Easing Function Select the required Easing Method Inovista Copyright 2010 All Rights Reserved Page 14

15 Text & Shapes Suite User Guide To further refine the effect, select the Use Options checkbox. This will enable the options for the effect that has been selected. Note that the options available for each effect will vary. Inovista Copyright 2010 All Rights Reserved Page 15

16 THE GENERAL TAB THE SVG FILES SUB TAB The SVG Files sub tab is where the individual SVG files that are to be used by the SVG Controller are loaded. In the Enter SVG File Paths or URLs combo box, select the SVG file, you want to load. Values are Opening SVG, SVG2, SVG3 etc up to a value of SVG10. If more than one image has been loaded, changing the value of this combo box will update the image in the Xcelsius canvas. Enter the full path of the file in the File: input field and then click on the Load SVGs button. If the file icon button does not open a file dialog, you will have to enter the full file path manually. Each time you need to change or refresh a file, click on this button. The current loaded image will be shown in the component in the Xcelsius canvas. To view any parse errors for the current file in view, click on the View Parse Errors button. This will open a dialog box with a list of the current errors. Note that this will show all output from the parser, some errors and warnings will not be relevant. Inovista Copyright 2010 All Rights Reserved Page 16

17 Select the Show Tool Tips checkbox to show tool tips for the currently visible image. The source of the tool tips can be defined in either the Image Setup tab. The look and feel of the tool tip is defined in the Appearance/Tool Tips tab. Select the Export Path ID on Rollover checkbox if you want the SVG Controller to update a spreadsheet cell with the ID of a path or shape when the mouse pointer moves over an image path or shape. You define the location of the export cell in the Cell I/O tab. Select the Export Path ID on Click checkbox if you want the SVG Controller to update a spreadsheet cell with the ID of a path when the user single clicks an image path or shape. You define the location of the export cell in the Cell I/O tab. Select the Export Path ID on Double Click checkbox if you want the SVG Controller to update a spreadsheet cell with the ID of a path or shape when the user double clicks an image path or shape. You define the location of the export cell in the Cell I/O tab. If you want to be able to load the current image when a spreadsheet value changes, enter or bind the text value that will be used in the final property. You define the location of the cell that the SVG Controller checks in the Cell I/O tab. When those two values are matched, the current SVG image will be loaded into Xcelsius. Path Shape Options The SVG Controller needs to be made aware of which paths or shapes it will listen for mouse activity. To listen for all paths and shapes, select the Listen to All checkbox. Use the ID List bind property to select a list of path and shape ids in a spreadsheet range. If values are selected by this property, then all other path and shape ids will be ignored. If you would like a quick reference of the existing paths in the currently loaded SVG file, click on the View Path IDs button. Inovista Copyright 2010 All Rights Reserved Page 17

18 Using this dialog you can copy all or individual paths to the clipboard and paste them into the spreadsheet. Use Right Click/Copy or <control>c to copy individual items. Inovista Copyright 2010 All Rights Reserved Page 18

19 THE IMAGE SETUP SUB TAB In the Image Setup sub tab, you specify the image interactions with the data in the spreadsheet. Here you define color and alpha values for paths; visibility for groups; text, text colors and fonts for textual elements and tool tip values. There are four sections in the tab. PATH SHAPE OPTIONS Use the Path Shape Options section to define color and transparency value based on a bound range in the spreadsheet. Use the bind tool to select a spreadsheet range with a list of the path and shape ids in the first column, the color in a hex format in the next column and the alpha/transparency in the third column. If a column is empty, the default value is used. In the case of colors, this is the existing color fill value. In the case of alphas, the default will be one. The SVG Controller accepts path information in the format: Column 1 Column 2 Column 3 Path ID Color in hex i.e. #FF0000 Alpha between 0 and 1 A sample spreadsheet range is shown below. Inovista Copyright 2010 All Rights Reserved Page 19

20 If you would like a quick reference of the existing paths in the currently loaded SVG file, click on the View Path IDs button. Using this dialog you can copy all or individual paths to the clipboard and paste them into the spreadsheet. Use Right Click/Copy or <control>c to copy individual items. Inovista Copyright 2010 All Rights Reserved Page 20

21 GROUP OPTIONS The Groups Options section provides a layer simulation tool. You can set the visibility of each group in the SVG file to 0, 1 or a value in between. Use the bind tool to select a spreadsheet range with a list of the groups in the first column and the alpha/transparency in the second. If the alpha column is empty, the SVG Controller will use the default of one. The SVG Controller accepts group information in the format: Column 1 Column 2 Group ID Alpha between 0 and 1 If you would like a quick reference of the existing groups in the currently loaded SVG file, click on the View Group IDs button. Using this dialog you can copy all or individual groups to the clipboard and paste them into the spreadsheet. Use Right Click/Copy or <control>c to copy individual items. Inovista Copyright 2010 All Rights Reserved Page 21

22 TEXT OPTIONS The Text Options sub tab allows you to change text values, colors and fonts depending on values in a bound range in the spreadsheet. Use the bind tool to select a spreadsheet range with a list of the text IDs in the first column; text required text in the second; the color of the text in a hex format in the third and the font size in the final column. If a column is empty, the default value is used. In the case of text that will be the original value, in the case of colors, this is the existing color fill value. In the case of alphas, the default will be one. The SVG Controller accepts text information in the format: Column 1 Column 2 Column 3 Column 4 Text ID The text value Color in hex i.e. The font size #FF0000 A sample spreadsheet range is shown below. Inovista Copyright 2010 All Rights Reserved Page 22

23 Using this dialog you can copy all or individual text IDs to the clipboard and paste them into the spreadsheet. Use Right Click/Copy or <control>c to copy individual items. TOOLTIP OPTIONS The Tooltip Option section is used in conjunction with the Show Tool Tips checkbox on the SVG Files tab for each SVG file that has been imported into the SVG Controller. The look and feel of the tool tip is setup in the Appearance/Tool Tips tab. To create tooltip text we use a spreadsheet range with the first column holding the path or shape id and the next column holding the tooltip text. Use the bind tool to select a spreadsheet range with a list of the paths that will drive the tool tip in the first column. The values in this column work in conjunction with the path id that is currently underneath the mouse pointer. The second column contains the textual value of the tool tip. Note that the cell may contain HTML text (if that option is selected in the Tool Tips tab). If you would like a line break in a non HTML tool tip, use \n. Remember that you can use spreadsheet formulae to create dynamic information in the tool tip text column. Inovista Copyright 2010 All Rights Reserved Page 23

24 The SVG Controller accepts group information in the format: Column 1 Column 2 Path ID Tool Tip Text If you would like a quick reference of the existing paths in the currently loaded SVG file that will be used to drive the tool tips, click on the View Path IDs button. Using this dialog you can copy all or individual paths to the clipboard and paste them into the spreadsheet. Use Right Click/Copy or <control>c to copy individual items. Inovista Copyright 2010 All Rights Reserved Page 24

25 THE CELL I/O SUB TAB The Cell I/O tab is used for defining where the SVG Controller will place certain IDs in the spreadsheet, where it looks for an ID that is used for loading a new SVG file. Use the first property binder to bind the spreadsheet cell that will contain the path or shape ID of the element directly under the mouse pointer. Use this in conjunction with the Export Path ID on Rollover checkbox in the SVG Files tab. Use the second property binder to bind the spreadsheet cell that will contain the path or shape ID of an element that is clicked. Use this in conjunction with the Export Path ID on Click checkbox in the SVG Files tab. Use the third property binder to bind the spreadsheet cell that will contain the path or shape ID of an element that is double clicked. Use this in conjunction with the Export Path ID on Double Click checkbox in the SVG Files tab. Use the fourth property binder to bind the spreadsheet cell that the SVG Controller will monitor and use to load an SVG image. Use this in conjunction with the input field that links a textual value to a specific SVG image in the SVG Files tab. Inovista Copyright 2010 All Rights Reserved Page 25

26 THE OPTIONS SUB TAB The Options tab is a convenience tab to allow you to set various optional properties including a background image, the ability to drag the SVG image, image scaling and location options. To include a background image for the SVG Controller component, enter the full path of the image name into the image input field and click the Load button. There are two points to note here. Firstly, as for the SVG files, the file navigator feature is not yet available and secondly only files of type PNG are accepted. Note: As the SVG parser now allows you to add images to the SVG image itself, it may be easier to add the image at that point. To change the transparency of the image, use the Alpha slider. To allow or disallow the ability to drag an image around the component real estate, select or deselect the Allow Image Drag checkbox. To resize the SVG image, use the Scale X and Scale Y bound properties to link to spreadsheet cells which will probably be linked to another component such as a Slider or Spinner. In general, the bound cell will be the same for both the Scale X and Scale Y properties as only rarely would a user want to resize only one dimension of an image. To set the image location at runtime or to move it, you can use the Set Image Location properties. Combine this with a Slider or Spinner to allow a user to modify the values. Inovista Copyright 2010 All Rights Reserved Page 26

27 To increment or decrement the image location at runtime, you can use the Increment/Decrement Image Location properties. Combine this with a Slider or Spinner to allow a user to modify the values. Inovista Copyright 2010 All Rights Reserved Page 27

28 THE APPEARANCE TAB The Appearance tab contains sub tabs for customizing the look and feel of the tool tips, setting up a border for the SVG Controller and a mouse over alpha option for the background image. THE TOOL TIPS SUB TAB The option to use tool tips is defined in the SVG Files tab. The data source of the tool tips is defined in either the Image Setup or Cell I/O tab. This tab is where you set up the tool tip style. To use custom tooltips, select the Use Custom Tooltips checkbox. To use HTML as a basis for the tooltips, select the Use HTML Text checkbox. See the section below on valid HTML tags. Use the Background Color property editor and the Background Alpha slider to adjust the color and transparency of the tooltip background. Select the required font details, alignments and color for the legend text. Inovista Copyright 2010 All Rights Reserved Page 28

29 AVAILABLE HTML TAGS WHEN USING HTML TEXT When using the HTML text option, the following HTML tags are valid. Anchor tag (<a>) Bold tag (<b>) Break tag (<br>) Font tag (<font>) Image tag (<img>) Italic tag (<i>) List item tag (<li>) Paragraph tag (<p>) Text format tag (<textformat>) Underline tag(<u>) THE BORDER SUB TAB Although it is a simple process to create a border in an SVG editor such as Adobe Illustrator or Inkscape, you may want to add a generic border to the SVG Controller if you are using multiple SVG images. To show a generic border, select the Show Border checkbox. Use the Style combo to set the type of border joins. Valid options are round, miter and bevel. Use the standard or advanced color picker to select the border color. Use the Thickness slider to select the width of the border in pixels. Valid options are from 1 to 50. Use the Corner Radius slider to select the corner radius. Valid options are from 0 to 50. THE SVG IMAGE TAB This tab contains a single property which allow you to set the transparency of a background image loaded in the Options tab when a mouse pointer is moved over the image. Valid values are from 0 to 1. Inovista Copyright 2010 All Rights Reserved Page 29

30 THE BEHAVIOR TAB The Behavior tab provides options to show or hide scroll bars, to show or hide the whole SVG Controller and to set up effects that target the image when certain actions occur such as initialization. THE GENERAL SUB TAB Use this tab to define the visibility of scroll bars. Use the combo boxes to set the visibility of the vertical and horizontal scroll bars. Valid options are auto, off and on. Select off to always hide scroll bars and on to always show them. Inovista Copyright 2010 All Rights Reserved Page 30

31 THE VISIBILITY SUB TAB Use the properties in this tab to show or hide the whole SVG Controller component based on a value in the spreadsheet. For example, a button type object can be deployed to show or hide the component. If clicking on the button makes the spreadsheet cell value the same value that will hide the SVG Controller, then the object will become invisible To get the SVG Controller to check for visibility status, select the Test Visibility checkbox. When the value in the Status field matches the value in the Key field, then the chart will be visible. Use the bind property to select the status. Use the bind property to select the key in the spreadsheet or enter the value manually. Inovista Copyright 2010 All Rights Reserved Page 31

32 THE EFFECTS SUB TAB Use this tab to define effects that target the SVG image on an action such as when a user moves a mouse over the image or when the image is made visible. In the Select Effect Action combo box, select the effect action for the effect in the Effect Configurator. You can have a different effect for each of the items in the combo. Valid effect options are Creation Complete, Roll Over, Roll Out, Mouse Down, Added, Show or Hide. To remove an effect from an action, set the Effect value to None. See the Effect Property Editors section above for more information on how to use this editor. THE EXTERNAL BIND SUB TAB The External Bind text field is used to make other Inovista components such as the SVG Floating Background aware of this component. Select a cell value that will be part of a range in the other Inovista component. Inovista Copyright 2010 All Rights Reserved Page 32