Skip to content

Latest commit

 

History

History
123 lines (107 loc) · 3.36 KB

readme.md

File metadata and controls

123 lines (107 loc) · 3.36 KB
Raw

SVG File Organization

Note: This format relies on an Inkscape-defined attribute; other SVG editors not recommended.

Option 1: external CSS and script

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="filename.css" ?>
<svg
    ...
    xmlns:xlink="http://www.w3.org/1999/xlink"
    >

    ... SVG content ...

    <script xlink:href="svg-script.js" id="script688"></script>
</svg>

Option 2: embeded CSS and script

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg ...>
    <style
        id="style4"
        type="text/css"><![CDATA[
            ... CSS rules ...
    ]]></style>

    ... SVG content ...

    <script
        id="script688"><![CDATA[
            ... javascript ...
    ]]></script>
</svg>
  • You create the style sheet. It modifies appearance based on class changes (e.g. button press, indicator true/false change, etc.)
  • The script communicates with the controller and adds/removes styles based on the rules in inkscape:label.
  • You probably don't need to modify the script when creating custom screens.
  • The script tag must be after all content. If Inkscape places content after the script tag, then you must move the tag. Easy way to prevent this: use layers. Once a layer exists, Inkscape won't move it.

inkscape:label property

JSON object with the following members:

Name Example CSS Classes Description
classes {"classes":["a","b"]} * Add classes to element.
remove-styles {"remove-styles":["fill","stroke"]} Remove styles from element. This allows CSS rules to control them.
indicator {"indicator":"alarm"} true or false If(value===true) add "true" CSS class.
If(value===false) add "false" CSS class.
value {"value":"mposX"} Replace <text>'s <tspan>'s content with value.
type:button {"type":"button"} type-button Installs event handlers for button behavior
type:field {"type":"field"} type-field Creates a field on top of element
font {"font":"bold 10mm sans"} Font on field
action {"action":"jog-configured-distance"} action-* See button desciptions
axis {"axis":"x"} axis-* See button desciptions
index {"index":"2"} index-* See button desciptions
negative {"negative":"false"} negative-* See button desciptions

Indicators

Fields

Buttons

Cross Origin

  • Since this can bring in content from arbitrary URLs, it's cross origin.
  • It uses <iframe referrerPolicy='no-referrer' sandbox='allow-scripts' />.
  • Cross-origin limit: lw-controller can't directly manipulate the SVG; this is why the SVG needs a script.
  • lw-controller and the SVG communicate using postMessage().
  • lw-controller doesn't really know that it's an SVG. It can work with HTML as long as the HTML communicates with it.