HowTo Widgets

Fuxa Widgets

Fuxa widgets use pure SVGs with Javascript by the use of script tags

<svg>
  SVG Content Here
  <script>
     JS Script Content Here
  </script>
</svg>

We can transfer data between the SVG script using some simple functions and declaring the variables as global

_pn_ = number parameter ( Int, Float, Real etc )
_ps_ = string parameter ( must be in '' )
_pc_ = colour parameter in hex colour code ( The Hex code must be in '' )

It's also very important that the variables are contained within these comments //!export-start and //!export-end

//!export-start
let _pn_value = 50;
//!export-end

The variables will now be available in Fuxa in the SVG properties panel where you can bind Fuxa Tags

In order to transfer data between the Widget/SVG we have 2x functions we need to use:

To send values to Fuxa from the SVG

function postValue(id, value) {
  console.error('Not defined!');
}

You need to call the function, the ID needs to match the exact variable name

postValue('_pn_value', someNewValue);

To receive values from Fuxa to the SVG

function putValue(id, value) {
  if (id === '_pn_value') {
    callFunction(value);
    newVar = value;
  }
}

Here we wait for the function to be called in Fuxa and check for the ID we are after which is the exact variable name defined

You can also use CSS in the SVG and full JS and access the elements/ids using standard getElementById and addEventListener

For full working examples, see the examples in the widget section https://github.com/frangoteam/FUXA/tree/master/widgets