HUGIN Widgets Library

Description

The HUGIN Widgets Library is a tool-box of UI elements for exercising the Javascript for HUGIN Web services API through point-and-click on a web page.  Widgets can be constructed using the HuginWidgetManager.construct* functions for dynamically injecting them into the DOM.  For manipulating the DOM refer to the DOM API (see https://developer.mozilla.org/en/Gecko_DOM_Reference).

The Widgets Library has a number of default widgets for displaying beliefs, utilities and for entering evidence.  A widget with custom functionallity can be implemented by augmenting a widget that extends CustomWidget.  A widget that can respond to user actions can be implemented by augmenting a widget that extends ActionWidget.

Using in Web Applications

In web applications the HTML document is typically modified dynamically, and widgets can be injected into the DOM by creating a widget using the HuginWidgetManager.construct* functions and injecting the corresponding DOM element retrieved by BasicWidget.getDomNode into the DOM.  In this kind of dynamic web applications where the DOM is subject to many modifcations and when widgets may need to be replaced or changed, attention must be paid to making sure that widgets are appropriately entering and leaving the HUGIN widget lifecycle as they are added to the DOM and removed again.  Use the BasicWidget.addToLifecycle and BasicWidget.removeFromLifecycle functions for managing widget lifecycle.

Example

HTML file ‘index.html’

<html>
 <head>
  ..
  <!-- load the HUGIN JavaScript API -->
  <script src="/webservice/hugin.php/hugin.js"></script>

  <!-- load the HUGIN Widget API -->
  <script src="/webservice/hugin.php/hwidgets.js"></script>

  <!-- load our custom javascript code -->
  <script src="/main.js"></script>
  ..
 </head>
 <body onload="spawnApplication()">
  ..
  <!-- a placeholder for where to insert the widget for node A -->
  <span ID="selectA"></span>
  ..
  <!-- a placeholder for where to insert the widget for node B -->
  <span ID="belifB"></span>
  ..
 </body>
</html>

JavaScript file ‘main.js’

function spawnApplication() {
  "use strict;"

  try {
    var hapi, domain, widMan, A, B, selectA, beliefB;

    //create a new HAPI instance
    hapi = new HAPI("/webservice/hugin.php");

    //load a Domain instance from a .hkb file
    domain = hapi.loadDomain("http://somehost/domain.hkb");

    //create a WidgetManager instance
    widMan = new HuginWidgetManager(domain, { });

    //get nodes
    A = domain.getNodeByName("A");
    B = domain.getNodeByName("B");

    //create a state selector widget for selecting state of A
    selectA = widMan.constructStateSelectOption(A, {});

    //register widget for updates with WidgetManager - make the widget responsive
    selectA.addToLifecycle();

    //insert the HTML element representing this widget into the HTML document
    document.getElementById("selectA").appendChild(selectA.getDomNode());

    //create belief label widget for displaying belief P(B=state 0)
    beliefB = widMan.constructBeliefLabel(B, 0, {});

    //register widget for updates with WidgetManager - make the widget responsive
    beliefB.addToLifecycle();

    //insert the HTML element representing this widget into the HTML document
    document.getElementById("beliefB").appendChild(beliefB.getDomNode());
  } catch (e) {
    alert("An error occured: " + e.name + "\n" + e.message);
  }
Summary
HUGIN Widgets LibraryThe HUGIN Widgets Library is a tool-box of UI elements for exercising the Javascript for HUGIN Web services API through point-and-click on a web page.
HuginWidgetManagerThe HuginWidgetManager manages all widgets associated with a specific Domain.
Functions
HuginWidgetManager
updateAllWidgetsInvokes the update function for all widgets registerred under this HuginWidgetManager.
createTableCacheCreate a new TableCache for use in widgets that support editing and displaying node table data.
constructTextLabelConstruct a new TextLabel.
constructBeliefLabelConstruct a new BeliefLabel.
constructDiscreteExpectedUtilityLabelConstruct a new ExpectedUtilityLabel.
constructExpectedUtilityLabelConstruct a new ExpectedUtilityLabel.
constructFunctionValueLabelConstruct a new FunctionValueLabel.
constructTableDataItemLabelConstruct a new TableDataItemLabel.
constructImageLabelConstruct a new ImageLabel.
constructSelectOptionConstruct a new SelectOption.
constructStateSelectOptionConstruct a new StateSelectOption.
constructTextInputConstruct a new TextInput.
constructNumericNodeTextInputConstruct a new NumericNodeTextInput.
constructLikelihoodTextInputConstruct a new LikelihoodTextInput.
constructContinuousNodeTextInputConstruct a new ContinuousNodeTextInput.
constructTableDataItemTextInputConstruct a new TableDataItemTextInput.
constructButtonInputConstruct a new ButtonInput.
constructButtonInitializeConstruct a new ButtonInitialize.
constructButtonPropagateConstruct a new ButtonPropagate.
constructBarConstruct a new Bar.
constructBeliefBarConstruct a new BeliefBar.
constructHistogramBarConstruct a new HistogramBar.
constructTemporalBeliefBarConstruct a new TemporalBeliefBar.
constructOverlayPrimitivesConstruct a new OverlayPrimitives.
constructBlockChartConstruct a new BlockChart.
constructPieChartConstruct a new PieChart.
constructColumnChartConstruct a new ColumnChart.
constructLineColumnChartConstruct a new LineColumnChart.
propagateInvokes Domain.propagate for the Domain associated with this HuginWidgetManager.
TableCacheA class that maintains a cache over Table data items, used by widgets that support editing and displaying node table data.
Functions
getIndexComputes the table index corresponding to a given state configuration.
getConfigurationComputes the state configuration corresponding to a given table index.
normalizeNormalize the set of table data items for all node states given a parent configuration (induced through supplied index).
commitCommits any changes performed on the cache to the underlying Table.
reloadResets any changes to the cache and refreshes cached values from the underlying Table.
setDataSets a region of the discrete data of this TableCache.
setDataItemSets a specific data item of the discrete data of this TableCache.
getDataGets a region of the discrete data of this TableCache.
getDataItemGet the data item at position index of the discrete data of this TableCache.
getSizeGet the size of the underlying Table.
getNodesGet all Nodes associated with underlying Table.
BasicWidgetThe base class for all of the HUGIN widgets.
Functions
addToLifecycleRegisters this BasicWidget to receive update notifiactions from the HuginWidgetManager.
removeFromLifecycleUn-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager.
getDomNodeGet the DOM element corresponding to this widget.
getCSSEasy access to the CSS style property of the corresponding DOM element for this widget.
CustomWidgetA base class for widgets that can be extended with custom functionallity that updates the state of the widget whenever a propagation occurs.
Functions
setUpdateFunctionRegister a custom update function
ActionWidgetA base class for widgets that are able to respond to user actions such as receiving a mouse-click or other kinds of user invoked state changing actions.
Functions
setCallbackSupply a custom function that is invoked each time the user performs an action on the widget ActionWidget.
TextLabelA TextLabel displays a string of characters on the web page.
Functions
setTextSet the text to be display by this TextLabel.
BeliefLabelA BeliefLabel display the belief for a specific discrete Node state on the web page.
ExpectedUtilityLabelAn ExpectedUtilityLabel display the expected utility for a specific discrete Node state, a utility Node or a Domain on the web page.
FunctionValueLabelA FunctionValueLabel display the value of a function Node on the web page.
TableDataItemLabelA TableDataItemLabel display the value found at a specific index in TableCache on the web page.
ImageLabelAn ImageLabel displays a specific image on the web page based on a custom function
Functions
showImagedisplay a particular image based on index.
setWidthforce the width of the images in this ImageLabel.
setHeightforce the height of the images in this ImageLabel.
SelectOptionA SelectOption presents a number of selectable options on the web page.
Functions
selectIndexChange the selected option of this SelectOption.
getSelectedIndexGets the index of the currently selected option
setEnabledSet whether this SelectOption accepts user input.
StateSelectOptionA StateSelectOption presents a widget on the web page for selecting a state to enter as evidence for a given discrete Node.
TextInputA TextInput presents an editable text field on the webpage.
Functions
setTextSet the contents of this TextInput.
getTextGet the contents of this TextInput.
setEnabledSet whether this TextInput accepts user input.
NumericNodeTextInputA NumericNodeTextInput presents a widget on the web page that selects a state of a given discrete numeric Node based on user provided numeric value.
ContinuousNodeTextInputA ContinuousNodeTextInput presents a widget on the web page for entering user provided value as evidence on a continuous Node.
LikelihoodTextInputA LikelihoodTextInput presents a widget on the web page for entering user provided value as likelihood evidence on a discrete chance Node.
TableDataItemTextInputA TableDataItemTextInput presents a widget on the web page for modifying the value found at a specific index in TableCache.
ButtonInputA ButtonInput is a simple button that can perform a custom action when clicked.
Functions
setEnabledSet whether this ButtonInput accepts user input.
setTextSet the button text for this ButtonInput.
ButtonInitializeA ButtonInitialize is a button that performs a Domain.initialize operation when clicked.
ButtonPropagateA ButtonPropagate is a button that performs a Domain.propagate operation when clicked.
BarA Bar displays a bar with the width set to some percentage of a max width.
Functions
setTextSet the text to overlay the bar.
setScaleSet the extend of the bar of this Bar.
setBackgroundSet the background color of this Bar.
setBarcolorSet the color of the bar of this Bar.
setTextColorSet the color of the overlay text of this Bar.
setFontSet the font and font size to use when rendering a text string.
setEdgeColorSet the color to use for drawing the line edge around the bar of this Bar.
setEdgeThicknessSet the thickness in pixels of the line edge around the bar of this Bar.
setBarCornerRadiusset the radius in pixels for rounding corners on the bar of this Bar.
BeliefBarA BeliefBar displays the belief as a bar for a specific discrete Node state on the web page.
PointerListenerBase class for widgets that record the pointer coordinates when user click or touch widget.
Properties
actionXThe X coordinate at the point of latest user interaction on this widget.
actionYThe Y coordinate at the point of latest user interaction on this widget.
HistogramBarA HistogramBar displays a histogram over a set of numeric data points as a bar-like widget.
Functions
setPointsSet the extend of the columns of this HistogramBar.
setBackgroundSet the background color of this HistogramBar.
setPointColorsSet the individual colors of the the columns of this HistogramBar.
setEdgeColorSet the color to use for drawing the line edge around the bar of this HistogramBar.
setEdgeThicknessSet the thickness in pixels of the line edge around the bar of this HistogramBar.
setBarCornerRadiusset the radius in pixels for rounding corners on the bar of this HistogramBar.
Properties
actionColumnThe column targeted during latest user click.
TemporalBeliefBarA TemporalBeliefBar displays the beliefs in a number of DBN time slices for a specific discrete Node state on the web page.
OverlayPrimitivesInterface for overlaying graphical primitives on a chart type widget.
Functions
setGraphicPrimitivesSet a list of graphic primitives to be rendered on top of chart.
setBackgroundSet the background color of this DiscreteChart.
DiscreteChartThe base class for discrete chart widgets.
Functions
setLabelsSet the axis labels of this DiscreteChart.
setDataPointValuesSet the data point values of this DiscreteChart.
setDataPointLabelsSet the label for each data point of this DiscreteChart.
setDataPointColorsSet the color of each data point of this DiscreteChart.
setTextColorSet the color of the text of this DiscreteChart.
setLineColorSet the color used for lines when drawing this DiscreteChart.
setFontSet the font and font size to use when rendering a text string.
setLineWidthSet the width in pixels used for drawing various lines.
BlockChartAn implementation of DiscreteChart that renders a block chart
PieChartAn implementation of DiscreteChart that renders a pie chart
Functions
setScaleScaling the size of the circle relative to the widget bounds.
ColumnChartAn implementation of DiscreteChart that renders a column chart
Functions
setLabels2Set the secondary axis labels of this ColumnChart.
setMaxValueSet the maximal value used for scaling data_point_values columns.
setDrawGridWhether to draw a grid on the chart.
LineColumnChartAn extension of of ColumnChart that renders connected points instead of columns.
Functions
setDrawDotWhether to paint a square dot at each data point or not.
setExtraDataPointValuesSet data point values of this LineColumnChart for additional lines.
setExtraDataPointLabelsSet the label for each data point on an additional line of this LineColumnChart.
setExtraDataPointColorsSet the color of each data point on an additional line of this LineColumnChart.
setPlotLineColorSet the color of the line that connects each data point of this LineColumnChart.
setExtraPlotLineColorSet the color of the line that connects each data point on an additional line of this LineColumnChart.

HuginWidgetManager

The HuginWidgetManager manages all widgets associated with a specific Domain.  The widget manager takes care of driving the HUGIN widget life cycle by issuing update notifications to registerred widgets.

  • Widgets created using the HuginWidgetManager.construct* functions must specifically register in order to receive update notifications (see BasicWidget.addToLifecycle for more details about this) and their corresponding DOM element must be manually injected into the DOM to appear on the webpage (see BasicWidget.getDomNode for more details about this).
Summary
Functions
HuginWidgetManager
updateAllWidgetsInvokes the update function for all widgets registerred under this HuginWidgetManager.
createTableCacheCreate a new TableCache for use in widgets that support editing and displaying node table data.
constructTextLabelConstruct a new TextLabel.
constructBeliefLabelConstruct a new BeliefLabel.
constructDiscreteExpectedUtilityLabelConstruct a new ExpectedUtilityLabel.
constructExpectedUtilityLabelConstruct a new ExpectedUtilityLabel.
constructFunctionValueLabelConstruct a new FunctionValueLabel.
constructTableDataItemLabelConstruct a new TableDataItemLabel.
constructImageLabelConstruct a new ImageLabel.
constructSelectOptionConstruct a new SelectOption.
constructStateSelectOptionConstruct a new StateSelectOption.
constructTextInputConstruct a new TextInput.
constructNumericNodeTextInputConstruct a new NumericNodeTextInput.
constructLikelihoodTextInputConstruct a new LikelihoodTextInput.
constructContinuousNodeTextInputConstruct a new ContinuousNodeTextInput.
constructTableDataItemTextInputConstruct a new TableDataItemTextInput.
constructButtonInputConstruct a new ButtonInput.
constructButtonInitializeConstruct a new ButtonInitialize.
constructButtonPropagateConstruct a new ButtonPropagate.
constructBarConstruct a new Bar.
constructBeliefBarConstruct a new BeliefBar.
constructHistogramBarConstruct a new HistogramBar.
constructTemporalBeliefBarConstruct a new TemporalBeliefBar.
constructOverlayPrimitivesConstruct a new OverlayPrimitives.
constructBlockChartConstruct a new BlockChart.
constructPieChartConstruct a new PieChart.
constructColumnChartConstruct a new ColumnChart.
constructLineColumnChartConstruct a new LineColumnChart.
propagateInvokes Domain.propagate for the Domain associated with this HuginWidgetManager.

Functions

HuginWidgetManager

function HuginWidgetManager(domain,
options)

Parameters

domainthe Domain object that we wish to interact with.
optionsan associative array of options for the HuginWidgetManager constructor (see available options).

Available Options

(* indicate default value if the option is left out)

propagate_equilibriumequilibrium to use when propagating: HAPI.H_EQUILIBRIUM_SUM* | HAPI.H_EQUILIBRIUM_MAX
propagate_evidence_modeevidence mode to use when propagating: HAPI.H_EVIDENCE_MODE_NORMAL* | HAPI.H_EVIDENCE_MODE_FAST_RETRACTION
init_compilewhether domain will initially be compiled: true* | false
handle_errorhow to handle errors in widget generated events.  Errors will always be logged to the browser console, in addition also alert a message box or take custom actions using provided function: “log”* | “alert” | function(error)

Returns

a HuginWidgetManager instance for managing widgets that interact with the specified domain.

Examples

Construct a new HuginWidgetManager for a given domain ‘d’:

widMan = new HuginWidgetManager(d, {});

updateAllWidgets

this.updateAllWidgets = function updateAllWidgets()

Invokes the update function for all widgets registerred under this HuginWidgetManager.

Returns

void

Example

  • update all widgets:
widMan.updateAllWidgets();

createTableCache

this.createTableCache = function createTableCache(table)

Create a new TableCache for use in widgets that support editing and displaying node table data.  Widgets operate on TableCache objects instead of directly on Table.  See also TableDataItemLabel, TableDataItemTextInput.

Parameters

tablethe Table to create a cached instance of

Returns

a TableCache

Example

tc = widMan.createTableCache(t);

constructTextLabel

this.constructTextLabel = function constructTextLabel(options)

Construct a new TextLabel.

Note

Parameters

optionsan associative array of options (refer to TextLabel for available options).

Returns

a TextLabel

Example

  • construct a TextLabel and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//construct TextLabel
var lbl = widMan.constructTextLabel( { text: "my label" } );
lbl.setUpdateFunction(function() {...} ); //register a custom update function
lbl.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lbl.getDomNode());

constructBeliefLabel

this.constructBeliefLabel = function constructBeliefLabel(node,
state,
options)

Construct a new BeliefLabel.

Note

Parameters

nodethe Node of this BeliefLabel.
statethe state index which this BeliefLabel should report beliefs for.
optionsan associative array of options (refer to BeliefLabel for available options).

Returns

a BeliefLabel

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//construct a BeliefLabel P(N=state0) node 'N' state 0 (and displaying belief in % rounded to three digits)
var lblN0 = widMan.constructBeliefLabel(N, 0, { digits: 3, display: "percent" });
lblN0.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lblN0.getDomNode());

constructDiscreteExpectedUtilityLabel

this.constructDiscreteExpectedUtilityLabel = function constructDiscreteExpectedUtilityLabel(
   discreteNode,
   state,
   options
)

Construct a new ExpectedUtilityLabel.

Note

Parameters

discreteNodethe Node of this ExpectedUtilityLabel.
statethe state index (action) which this ExpectedUtilityLabel should report expected utility for.
optionsan associative array of options (refer to ExpectedUtilityLabel for available options).

Returns

an ExpectedUtilityLabel

Example

  • TBD

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

lbl.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lbl.getDomNode());

constructExpectedUtilityLabel

this.constructExpectedUtilityLabel = function constructExpectedUtilityLabel(
   utilityNodeOrDomain,
   options
)

Construct a new ExpectedUtilityLabel.

Note

Parameters

utilityNodeOrDomainthe utility Node or Domain of this ExpectedUtilityLabel.
optionsan associative array of options (refer to ExpectedUtilityLabel for available options).

Returns

a ExpectedUtilityLabel

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//construct an ExpectedUtilityLabel for Domain 'domain'
var lblU = widMan.constructExpectedUtilityLabel(domain, { });
lblU.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lblU.getDomNode());

constructFunctionValueLabel

this.constructFunctionValueLabel = function constructFunctionValueLabel(
   functionNode,
   options
)

Construct a new FunctionValueLabel.

Note

Parameters

functionNodethe function Node of this FunctionValueLabel.
optionsan associative array of options (refer to FunctionValueLabel for available options).

Returns

a FunctionValueLabel

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//construct a FunctionValueLabel for function node 'F' (rounded to four digits)
var lblF = widMan.constructFunctionValueLabel(F, { digits: 4 });
lblF.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lblF.getDomNode());

constructTableDataItemLabel

this.constructTableDataItemLabel = function constructTableDataItemLabel(table,
index,
options)

Construct a new TableDataItemLabel.

Note

Parameters

tablethe TableCache object, to acquire TableCache from a Table see HuginWidgetManager.createTableCache.
indexdisplay data item found at this index in table
optionsan associative array of options (refer to TableDataItemLabel for available options).

Returns

a TableDataItemLabel

Example

  • construct a TableDataItemLabel for displaying the value found at index 0 in the CPT for a discrete Node and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//construct a TableDataItemLabel for displaying value at index 0 from the CPT for 'N', value rounded capped at maximum two digits
var lblN = widMan.constructTableDataItemLabel(tableCacheN, 0, { digits: 2 });
lblN.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(lblN.getDomNode());

constructImageLabel

this.constructImageLabel = function constructImageLabel(options)

Construct a new ImageLabel.

Note

Parameters

optionsan associative array of options (refer to ImageLabel for available options).

Returns

an ImageLabel

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the ImageLabel
var imgLbl = widMan.constructImageLabel( { images: ["http://mydomain/img0.png", "http://mydomain/img1.png"],
                                             showimg: 1} );
imgLbl.setUpdateFunction(function() { ... } ); //register a custom update function
imgLbl.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(imgLbl.getDomNode());

constructSelectOption

this.constructSelectOption = function constructSelectOption(options)

Construct a new SelectOption.

Note

Parameters

optionsan associative array of options (refer to SelectOption for available options).

Returns

a SelectOption

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var sel = widMan.constructSelectOption( { labels: ["-pick one-", "first", "second", "third"],
                                          initselection: 0,
                                          option_type: "vradio" } );
sel.setCallback(function() {
  alert("you selected option " + sel.getSelectedIndex()); //a custom callback function
});
sel.setUpdateFunction(function() {...} ); //register a custom update function
sel.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(sel.getDomNode());

constructStateSelectOption

this.constructStateSelectOption = function constructStateSelectOption(node,
options)

Construct a new StateSelectOption.

Note

Parameters

nodethe discrete Node of this StateSelectOption widget.
optionsan associative array of options (refer to StateSelectOption for available options).

Returns

a StateSelectOption

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the StateSelectOption in the form of vertically arranged radio buttons
var sel = widMan.constructStateSelectOption(A, { option_type: "vradio" } );
sel.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(sel.getDomNode());

constructTextInput

this.constructTextInput = function constructTextInput(options)

Construct a new TextInput.

Note

Parameters

optionsan associative array of options (refer to TextInput for available options).

Returns

a TextInput

Example

  • construct a TextInput and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var txt = widMan.constructTextInput( { text: "this is my text" } );
txt.setCallback(function() {
  alert(txt.getText()); //a custom callback function
});
txt.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(txt.getDomNode());

constructNumericNodeTextInput

this.constructNumericNodeTextInput = function constructNumericNodeTextInput(
   node,
   options
)

Construct a new NumericNodeTextInput.

Note

Parameters

nodethe discrete numeric Node of this NumericNodeTextInput widget.
optionsan associative array of options (refer to NumericNodeTextInput for available options).

Returns

a NumericNodeTextInput

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var txt = widMan.constructNumericNodeTextInput(A, {} );
txt.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(txt.getDomNode());

constructLikelihoodTextInput

this.constructLikelihoodTextInput = function constructLikelihoodTextInput(
   node,
   state,
   options
)

Construct a new LikelihoodTextInput.

Note

Parameters

nodethe discrete chance Node of this LikelihoodTextInput widget.
statethe state indexs pecific specific to this LikelihoodTextInput widget.
optionsan associative array of options (refer to LikelihoodTextInput for available options).

Returns

a LikelihoodTextInput

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var txt = widMan.constructLikelihoodTextInput(A, 0, {} );
txt.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(txt.getDomNode());

constructContinuousNodeTextInput

this.constructContinuousNodeTextInput = function constructContinuousNodeTextInput(
   node,
   options
)

Construct a new ContinuousNodeTextInput.

Note

Parameters

nodethe continuous Node of this ContinuousNodeTextInput widget.
optionsan associative array of options (refer to ContinuousNodeTextInput for available options).

Returns

a ContinuousNodeTextInput

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var txt = widMan.constructContinuousNodeTextInput(A, {} );
txt.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(txt.getDomNode());

constructTableDataItemTextInput

this.constructTableDataItemTextInput = function constructTableDataItemTextInput(
   table,
   index,
   options
)

Construct a new TableDataItemTextInput.

Note

Parameters

tablethe TableCache object, to acquire TableCache from a Table see HuginWidgetManager.createTableCache.
indexdisplay data item found at this index in table
optionsan associative array of options (refer to TableDataItemLabel for available options).

Returns

a TableDataItemTextInput

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make a TableDataItemTextInput for editing value at index 0 from the CPT for 'N'
var inputN = widMan.constructTableDataItemTextInput(tableCacheN, 0, { });
inputN.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(inputN.getDomNode());

constructButtonInput

this.constructButtonInput = function constructButtonInput(options)

Construct a new ButtonInput.

Note

Parameters

optionsan associative array of options (refer to ButtonInput for available options).

Returns

a ButtonInput

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the ButtonInput
var btn = widMan.constructButtonInput( { text: "my button" } );
btn.setCallback(function() {
  alert("the button was clicked"); //a custom callback function
});
btn.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(btn.getDomNode());

constructButtonInitialize

this.constructButtonInitialize = function constructButtonInitialize(options)

Construct a new ButtonInitialize.

Note

Parameters

optionsan associative array of options (refer to ButtonInitialize for available options).

Returns

a ButtonInitialize

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var btn = widMan.constructButtonInitialize( {} );
btn.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(btn.getDomNode());

constructButtonPropagate

this.constructButtonPropagate = function constructButtonPropagate(options)

Construct a new ButtonPropagate.

Note

Parameters

optionsan associative array of options (refer to ButtonPropagate for available options).

Returns

a ButtonPropagate

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

var btn = widMan.constructButtonPropagate( {} );
btn.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(btn.getDomNode());

constructBar

this.constructBar = function constructBar(options)

Construct a new Bar.

Note

Parameters

optionsan associative array of options (refer to Bar for available options).

Returns

a Bar

Example

  • construct a Bar and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make a Bar
var bar = widMan.constructBar( { text: "this is a bar", scale: 1 } );
bar.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(bar.getDomNode());

constructBeliefBar

this.constructBeliefBar = function constructBeliefBar(node,
state,
options)

Construct a new BeliefBar.

Note

Parameters

nodethe Node of this BeliefBar.
statethe state index which this BeliefBar should report beliefs for.
optionsan associative array of options (refer to BeliefBar for available options).

Returns

a BeliefBar

Example

  • construct a BeliefBar for discrete node ‘N’ and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make a BeliefBar P(N=state0) node 'N' state 0
var bbar0 = widMan.constructBeliefBar(N, 0, { background: "lightgray" });
bbar0.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(bbar0.getDomNode());

constructHistogramBar

this.constructHistogramBar = function constructHistogramBar(options)

Construct a new HistogramBar.

Note

Parameters

optionsan associative array of options (refer to HistogramBar for available options).

Returns

a HistogramBar

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make a Bar
var b = widMan.constructHistogramBar( { points: [0.2, 0.8, 0.3, 0.6, 0.7, 0.5], point_colors: ["red", "blue", "green", "yellow", "cyan", "magenta"] } );
b.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(b.getDomNode());

constructTemporalBeliefBar

this.constructTemporalBeliefBar = function constructBeliefBar(node,
state,
count,
options)

Construct a new TemporalBeliefBar.

Note

Parameters

nodethe Node of this BeliefBar.
statethe state index which this BeliefBar should report beliefs for.
countthe total number of timeslices to display
optionsan associative array of options (refer to TemporalBeliefBar for available options).

Returns

a TemporalBeliefBar

Example

  • construct a TemporalBeliefBar for discrete node ‘T1.N’ for 5 time slices and add it to document:

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make a TemporalBeliefBar for node 'T1.N' and 5 time slices forward state 0
var bbar0 = widMan.constructTemporalBeliefBar(N, 0, 5, { background: "lightgray" });
bbar0.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(bbar0.getDomNode());

constructOverlayPrimitives

this.constructOverlayPrimitives = function constructOverlayPrimitives(options)

Construct a new OverlayPrimitives.

Note

Parameters

optionsan associative array of options (refer to OverlayPrimitives for description and available options).

Returns

an OverlayPrimitives

constructBlockChart

this.constructBlockChart = function constructBlockChart(options)

Construct a new BlockChart.

Note

Parameters

optionsan associative array of options (refer to BlockChart and DiscreteChart for description and available options).

Returns

a BlockChart

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the BlockChart
var chart = widMan.constructBlockChart({ width: 400, height: 100, background: "lightgray" });
chart.setDataPointValues( [0.2, 0.4, 0.6, 0.3] );
chart.setDataPointLabels( ["20%", "40%", "60%", "30%"] );
chart.setDataPointColors( ["green", "blue", "red", "yellow"] );
chart.setLabels( ["A", "B", "C", "D"] );
chart.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(chart.getDomNode());

constructPieChart

this.constructPieChart = function constructPieChart(options)

Construct a new PieChart.

Note

Parameters

optionsan associative array of options (refer to PieChart and DiscreteChart for description and available options).

Returns

a PieChart

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the PieChart
var chart = widMan.constructPieChart({ width: 250, height: 250, background: "lightgray" });
chart.setScale(0.9);
chart.setDataPointValues( [0.2, 0.4, 0.6, 0.3] );
chart.setDataPointLabels( ["20%", "40%", "60%", "30%"] );
chart.setDataPointColors( ["green", "blue", "red", "yellow"] );
chart.setLabels( ["A", "B", "C", "D"] );
chart.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(chart.getDomNode());

constructColumnChart

this.constructColumnChart = function constructColumnChart(options)

Construct a new ColumnChart.

Note

Parameters

optionsan associative array of options (refer to ColumnChart and DiscreteChart for description and available options).

Returns

a ColumnChart

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the ColumnChart
var chart = widMan.constructColumnChart({ width: 400, height: 250, background: "lightgray" });
chart.setMaxValue(1);
chart.setLabels2( ["0%", "25%", "50%", "75%", "100%"] );
chart.setDataPointValues( [0.2, 0.4, 0.6, 0.3] );
chart.setDataPointLabels( ["20%", "40%", "60%", "30%"] );
chart.setDataPointColors( ["green", "blue", "red", "yellow"] );
chart.setLabels( ["A", "B", "C", "D"] );
chart.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(chart.getDomNode());

constructLineColumnChart

this.constructLineColumnChart = function constructLineColumnChart(options)

Construct a new LineColumnChart.

Note

Parameters

optionsan associative array of options (refer to LineColumnChart, ColumnChart and DiscreteChart for description and available options).

Returns

a LineColumnChart

Example

HTML document

<html>
 <body>
 ..
 <span ID="injectWidgetHere"></span>
 ..
 </body>
</html>

JavaScript code

//make the LineColumnChart
var chart = widMan.constructLineColumnChart({ width: 400, height: 250, background: "lightgray" });
chart.setMaxValue(1);
chart.setLabels2( ["0%", "25%", "50%", "75%", "100%"] );
chart.setDataPointValues( [0.2, 0.4, 0.6, 0.3] );
chart.setDataPointLabels( ["20%", "40%", "60%", "30%"] );
chart.setDataPointColors( ["green", "blue", "red", "yellow"] );
chart.setLabels( ["A", "B", "C", "D"] );
chart.setExtraDataPointValues(0, [0.8, 0.7, 0.75]);
chart.setExtraDataPointLabels(0, ["80%", "70%", "75%"]);
chart.setExtraDataPointColors(0, ["black", "black", "black"] );
chart.setExtraDataPointValues(1, [null, null,  0.1, 0.15]);
chart.setExtraDataPointLabels(1, [null, null, "10%", "15%"]);
chart.setExtraDataPointColors(1, [null, null, "orange", "orange"] );
chart.addToLifecycle() //register widget for updates with WidgetManager

//insert the HTML element representing widget into the HTML document
document.getElementById("injectWidgetHere").appendChild(chart.getDomNode());

propagate

this.propagate = function propagate()

Invokes Domain.propagate for the Domain associated with this HuginWidgetManager.  The equilibrium and evidence mode used in this propagate operation will be those specified as options to the HuginWidgetManager constructor.  If the Domain is not compiled this method as no effect.

Returns

void

Example

  • invoke propagate on associated Domain:
widMan.propagate();

TableCache

A class that maintains a cache over Table data items, used by widgets that support editing and displaying node table data.  Widgets operate on TableCache objects instead of directly on Table.

Description

The TableCache caches any data items from the underlying Table object, progressively filling the cache as data items are accessed.  The reason for using a cache is to reduce the possibly large HTTP traffic overhead of multiple Table get/set operations.

Important

Summary
Functions
getIndexComputes the table index corresponding to a given state configuration.
getConfigurationComputes the state configuration corresponding to a given table index.
normalizeNormalize the set of table data items for all node states given a parent configuration (induced through supplied index).
commitCommits any changes performed on the cache to the underlying Table.
reloadResets any changes to the cache and refreshes cached values from the underlying Table.
setDataSets a region of the discrete data of this TableCache.
setDataItemSets a specific data item of the discrete data of this TableCache.
getDataGets a region of the discrete data of this TableCache.
getDataItemGet the data item at position index of the discrete data of this TableCache.
getSizeGet the size of the underlying Table.
getNodesGet all Nodes associated with underlying Table.

Functions

getIndex

this.getIndex = function(configuration)

Computes the table index corresponding to a given state configuration.  The state configuration is specified in the configuration array: A state index for the k’th node in the node list (see TableCache.getNodes) of this TableCache (if the node is discrete) must be specified in the k’th entry of the array.  The length of the array must be greater than or equal to the number of discrete nodes of this Table (extra entries are ignored).

Parameters

configurationarray of node state indices

Returns

corresponding table index (an integer)

getConfiguration

this.getConfiguration = function(index,
configuration)

Computes the state configuration corresponding to a given table index.  The computed state configuration is stored in the configuration array: The state index for the k’th node in the node list (see TableCache.getNodes) of this TableCache (if the node is discrete) is stored in the k’th entry of the array.  If an array is supplied as the second parameter, this array is filled with the computed node state indices, else a new array is allocated, populated and returned.

Parameters

indextable index (an integer)
configuration(optional parameter) an array, on return it is filled with computed node state indices for configuration corresponding to table index

Returns

array filled with computed node state indices for configuration corresponding to table index

normalize

this.normalize = function(index)

Normalize the set of table data items for all node states given a parent configuration (induced through supplied index).  Note: only invoke on discrete node conditional probabillity tables, result is undefined if invoked on experience or utility node tables.

Parameters

indexa table index indicating some parent configuration (an integer)

Returns

void

commit

this.commit = function()

Commits any changes performed on the cache to the underlying Table.

Returns

void

Example

  • commit any changes in TableCache ‘t’ to underlying table:
t.commit();

reload

this.reload = function()

Resets any changes to the cache and refreshes cached values from the underlying Table.  This is needed if the Table data was modified outside of TableCache, e.g. if some changes were committed and a propagation subsequently occurred, the inference engine may have normalized some of the entries making the cache invalid.

Returns

void

Example

t.reload();

setData

this.setData = function(data,
startIndex,
count)

Sets a region of the discrete data of this TableCache.  The region is specified by a start position and the number of elements to copy.  The data is copied from the data array to the table.  Note: Use TableCache.commit for committing changes to underlying Table object.

The indexes startIndex, ..., startIndex+count-1 must be valid indexes of this table.  Also, count must be less than or equal to the size of the data array.

See also Table.setData.

Parameters

dataarray of real numbers holding the data to copy to this table
startIndexindex of the first element to be set
countnumber of elements to copy

Returns

void

setDataItem

this.setDataItem = function(index,
value)

Sets a specific data item of the discrete data of this TableCacheNote: Use TableCache.commit for committing changes to underlying Table object.

See also Table.setDataItem.

Parameters

indexindex of the data item to set
valuereal number; the new value of the data item at the specified index.

Returns

void

getData

this.getData = function(startIndex,
count)

Gets a region of the discrete data of this TableCache.  The region is specified by a start position and the number of elements to copy.  Note: cache is progressively filled as items are accessed.

The indexes startIndex, ..., startIndex+count-1 must be valid indexes of the table.

See also Table.getData.

Parameters

startIndexindex of the first element to get
countnumber of elemets to retrieve

Returns

Requested region of data items as an array of real numbers

getDataItem

this.getDataItem = function(index)

Get the data item at position index of the discrete data of this TableCache.  The index is interpreted as the index of a one-dimensional row-major representation of the actual multi-dimensional data.  Note: cache is progressively filled as items are accessed.

See also Table.getDataItem.

Parameters

indexthe index of the data item

Returns

A real number; the data item at requested index.

getSize

this.getSize = function()

Get the size of the underlying Table.

See also Table.getSize.

Returns

size of underlying Table.

getNodes

this.getNodes = function()

Get all Nodes associated with underlying Table.

See also Table.getNodes.

Returns

An array of Nodes associated with underlying Table.

BasicWidget

The base class for all of the HUGIN widgets.

Summary
Functions
addToLifecycleRegisters this BasicWidget to receive update notifiactions from the HuginWidgetManager.
removeFromLifecycleUn-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager.
getDomNodeGet the DOM element corresponding to this widget.
getCSSEasy access to the CSS style property of the corresponding DOM element for this widget.

Functions

addToLifecycle

owner.addToLifecycle = function addToLifecycle()

Registers this BasicWidget to receive update notifiactions from the HuginWidgetManager.  Use this method when injecting widgets using any of the HuginWidgetManager.construct* functions.

Returns

void

Example

wid.addToLifecycle();

removeFromLifecycle

owner.removeFromLifecycle = function removeFromLifecycle()

Un-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager.  Use this method when a widget has to be thrown out and its DOM node has been removed from the wep page.

Returns

void

Example

  • un-register widget ‘wid’ such that it does not receive any further update notifications from HuginWidgetManager:
wid.removeFromLifecycle();

getDomNode

owner.getDomNode = function getDomNode()

Get the DOM element corresponding to this widget.  DOM elements can be dynamically injected into the DOM using the Node.appendChild functions of the DOM API (see https://developer.mozilla.org/en/Gecko_DOM_Reference)

Returns

a DOM element

Example

  • get the DOM node for widget ‘wid’:
domNode = wid.getDomNode();

getCSS

owner.getCSS = _deprecated_deprecate(
    owner,
   function getCSS() { return _domNode.style; },
    "BasicWidget.getCSS() - instead use BasicWidget.getDomNode().style"
); _defineconstant_addConstant(this, "toJSON", function() {_error_throwError("cannot serialize hugin widget instance");}); } function CustomWidget(owner)

Easy access to the CSS style property of the corresponding DOM element for this widget.  (This method is short for BasicWidget.getDomNode.style).  For more information about the CSS style property refer to the DOM CSS Properties https://developer.mozilla.org/en/DOM/CSS.

Returns

object that represents the corresponding DOM element’s style attribute.

Example

  • set text color to blue for a TextLabel widget ‘txt’:
myStyle = txt.getCSS();
myStyle.color = "blue";

CustomWidget

A base class for widgets that can be extended with custom functionallity that updates the state of the widget whenever a propagation occurs.  See TextLabel, ImageLabel, SelectOption, TextInput, ButtonInput, Bar.

Summary
Functions
setUpdateFunctionRegister a custom update function

Functions

setUpdateFunction

owner.setUpdateFunction = function setUpdateFunction(updateFunction)

Register a custom update function

Returns

void

Example

..
A = domain.getNodeByName("A");
lbl = widMan.constructTextLabel( {} );
lblUpdate = function() { //create custom update function
  lbl.setText("Evidence has been entered for node A: " + A.evidenceIsEntered());
};
lblUpdate(); //invoke update function to set initial label text based on node 'A'
lbl.setUpdateFunction(lblUpdate); //register the custom update function
    lbl.addToLifecycle();

ActionWidget

A base class for widgets that are able to respond to user actions such as receiving a mouse-click or other kinds of user invoked state changing actions.  See SelectOption, TextInput, ButtonInput, Bar.

Summary
Functions
setCallbackSupply a custom function that is invoked each time the user performs an action on the widget ActionWidget.

Functions

setCallback

owner.setCallback = function setCallback(callbackFunction)

Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget.

Parameters

callbackFunctionthe function

Returns

void

Example

  • set a custom callback function for the ActionWidget ‘W’:
W.setCallback(function() {
  //body of custom function
  //..
});

TextLabel

A TextLabel displays a string of characters on the web page.

Extends

BasicWidget, CustomWidget

Description

Use a TextLabel to display custom text and update according to a custom provided function.  The most important functions are TextLabel.setText for setting the text value of the label and CustomWidget.setUpdateFunction for providing a custom update function.

Available Options for TextLabel

textspecify initial text as a string, if left out the value defaults to the string “< TextLabel >”.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
Summary
Functions
setTextSet the text to be display by this TextLabel.

Functions

setText

this.setText = function setText(text)

Set the text to be display by this TextLabel.

Parameters

textthe text string to be displayed.

Returns

void

Example

  • set the TextLabel ‘lbl’ to display the text “my text”:
lbl.setText("my text");

BeliefLabel

A BeliefLabel display the belief for a specific discrete Node state on the web page.

Extends

BasicWidget

Description

Use BeliefLabels for displaying beliefs for discrete Nodes.

Available Options for BeliefLabel

(* indicate default value if the option is left out)

displaydisplay normal belief (0-1) or as percent (0-100): “percent”* | “belief”
digitsdisplayed value is rounded to specific number of digits: 2*
dependsan array of Nodes that must have evidence entered in order for this BeliefLabel to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.

ExpectedUtilityLabel

An ExpectedUtilityLabel display the expected utility for a specific discrete Node state, a utility Node or a Domain on the web page.

Extends

BasicWidget

Description

Use ExpectedUtilityLabels for displaying expected utilities for discrete Nodes, utility Nodes and Domains.

Available Options for ExpectedUtilityLabel

(* indicate default value if the option is left out)

digitsdisplayed value is rounded to specific number of digits: 2*
dependsan array of Nodes that must have evidence entered in order for this ExpectedUtilityLabel to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.

FunctionValueLabel

A FunctionValueLabel display the value of a function Node on the web page.

Extends

BasicWidget

Description

Use FunctionValueLabel for displaying value of function Nodes.

Available Options for FunctionValueLabel

(* indicate default value if the option is left out)

digitsdisplayed value is rounded to specific number of digits: 2*
displaydisplay function value normally or as a percentage (value*100): “normal”* | “percent”
dependsan array of Nodes that must have evidence entered in order for this FunctionValueLabel to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.

TableDataItemLabel

A TableDataItemLabel display the value found at a specific index in TableCache on the web page.

Extends

BasicWidget

Description

Use TableDataItemLabel for displaying table data.

Available Options for TableDataItemLabel

(* indicate default value if the option is left out)

digitsdisplayed value is rounded to specific number of digits (but trailing zeros discarded): 4*
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.

ImageLabel

An ImageLabel displays a specific image on the web page based on a custom function

Extends

BasicWidget, CustomWidget

Description

Use the ImageLabel to display an image.  Use the images option to specify the set of images for this ImageLabel.  The displayed images can be swapped using ImageLabel.showImage, the dimensions can be modified using the ImageLabel.setWidth and ImageLabel.setHeight functions, and a custom update function is registerred using CustomWidget.setUpdateFunction.

Available Options for ImageLabel

imagesan array of strings that contain URLs to image (e.g.  images: [ “http://mydomain/img0.png”, “http://mydomain/img1.png” ] ).
showimgthe index of the image to be initially displayed (index range is 0 to number of images-1, default value is 0).
widthforce an initial width of the images, if option is left out no width is forced.  Note the browser may scale the height relative to width and image dimensions if only specifying width without specifying height.
widthforce an initial height of the images, if option is left out no height is forced.  Note the browser may scale the width relative to height and image dimensions if only specifying height without specifying width.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
Summary
Functions
showImagedisplay a particular image based on index.
setWidthforce the width of the images in this ImageLabel.
setHeightforce the height of the images in this ImageLabel.

Functions

showImage

this.showImage = function showImage(imageNumber)

display a particular image based on index.

Parameters

imageNumberindex of the image from the images option array to display (range is 0-number of images).

Returns

void

Example

imgLbl.showImage(0);

setWidth

this.setWidth = function setWidth(width)

force the width of the images in this ImageLabel.  This method operates on the CSS style properties of each image.  Note the browser may scale the height relative to width and image dimensions if only setting width without setting height.

Parameters

widththe width in pixels to force upon the images of this ImageLabel.

Returns

void

Example

  • force a width of 50 pixels on the images in ImageLabel ‘imgLbl’:
imgLbl.setWidth(50);

setHeight

this.setHeight = function setHeight(height)

force the height of the images in this ImageLabel.  This method operates on the CSS style properties of each image.  Note the browser may scale the width relative to height and image dimensions if only setting height without setting width.

Parameters

heightthe height in pixels to force upon the images of this ImageLabel.

Returns

void

Example

  • force a height of 50 pixels on the images in ImageLabel ‘imgLbl’:
imgLbl.setHeight(50);

SelectOption

A SelectOption presents a number of selectable options on the web page.

Extends

BasicWidget, CustomWidget, ActionWidget

Description

Use the SelectOption to display a number of selectable options to the user, either in the form of a drop down list or as radio buttons.  Use ActionWidget.setCallback to supply a custom function to invoke when the user changes the currently selected option, SelectOption.getSelectedIndex to get the index of the currently selected option, SelectOption.selectIndex to set the currently selected option and CustomWidget.setUpdateFunction for providing a custom update function.

Available Options for SelectOption

(* indicate default value if the option is left out)

labelsan array of strings that represent the set of selectable options (e.g.  labels: [ “option 1”, “option 2”, “option 3” ] ).
initselectionthe index of the option to be initially selected (index range is 0 to number of options-1, default value is 0).
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
option_typedrop down list or horizontal/vertical radio buttons: “dropdown”* | “hradio” | “vradio”
Summary
Functions
selectIndexChange the selected option of this SelectOption.
getSelectedIndexGets the index of the currently selected option
setEnabledSet whether this SelectOption accepts user input.

Functions

selectIndex

this.selectIndex = function selectIndex(index)

Change the selected option of this SelectOption.

Parameters

indexthe index of the selected option (range is 0 to number of options-1)

Returns

void

Example

  • set option at index 2 to be the selected option for SelectOption ‘sel’:
sel.selectIndex(2);

getSelectedIndex

this.getSelectedIndex = function getSelectedIndex()

Gets the index of the currently selected option

Returns

the selected index (range is 0 to number of options-1)

Example

index = sel.getSelectedIndex();

setEnabled

this.setEnabled = function setEnabled(enable)

Set whether this SelectOption accepts user input.

Parameters

enableboolean value.  true enables the the widget to accept input, false disables the widget.

Returns

void

Example

sel.setEnabled(false);

StateSelectOption

A StateSelectOption presents a widget on the web page for selecting a state to enter as evidence for a given discrete Node.

Extends

BasicWidget

Description

Use the StateSelectOption to let the user select a state to enter as evidence for a discrete Node.  Use the depends and retract options for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for StateSelectOption

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
option_typedrop down list or horizontal/vertical radio buttons: “dropdown”* | “hradio” | “vradio”
labelsan array of strings to use as selectable options (e.g.  labels: [ “state 0”, “state 1”, “choose-a-state” ] ), if the labels option is left out the StateSelectOption use the Node state label for each state and the label “-- select --” when no state has been selected.
no_selectionthe default value as a string to display when no state has been selected: “-- select --”*
dependsan array of Nodes that must have evidence entered in order for this StateSelectOption to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
retractan array of additional Nodes for which evidence will be retracted when ‘no findings’ is selected for the Node of this StateSelectOption (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when the selection is changed: true* | false

TextInput

A TextInput presents an editable text field on the webpage.

Extends

BasicWidget, CustomWidget, ActionWidget

Description

Use the TextInput to present a text field which the user can edit.  Use ActionWidget.setCallback to supply a custom function to invoke when the user modify the text field, TextInput.getText to get the current contents of the textfield, TextInput.setText to change the contents of the text field and CustomWidget.setUpdateFunction for providing a custom update function.

Available Options for TextInput

(* indicate default value if the option is left out)

textthe initial contents of the TextInput field, if left out the default value is “”.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
deferactiondefer widget action while input is being entered, timeout after specified number of milliseconds: 0*
Summary
Functions
setTextSet the contents of this TextInput.
getTextGet the contents of this TextInput.
setEnabledSet whether this TextInput accepts user input.

Functions

setText

this.setText = function setText(text)

Set the contents of this TextInput.

Parameters

textthe text string to be set as contents.

Returns

void

Example

  • set the TextInput ‘txt’ to contain text “my text”:
txt.setText("my text");

getText

this.getText = function getText()

Get the contents of this TextInput.

Returns

The contents of this TextInput as a string.

Example

myTxt = txt.getText();

setEnabled

this.setEnabled = function setEnabled(enable)

Set whether this TextInput accepts user input.

Parameters

enableboolean value.  true enables the the widget to accept input, false disables the widget.

Returns

void

Example

txt.setEnabled(false);

NumericNodeTextInput

A NumericNodeTextInput presents a widget on the web page that selects a state of a given discrete numeric Node based on user provided numeric value.

Extends

BasicWidget

Description

Use the NumericNodeTextInput to let the user select a state for a discrete numeric Node by entering a value in a text field.  The correct state for the discrete numeric Node is selected based on the entered value and the state values and intervals of the discrete numeric Node.  Use the depends and retract options for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for NumericNodeTextInput

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
dependsan array of Nodes that must have evidence entered in order for this NumericNodeTextInput to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
retractan array of additional Nodes for which evidence will be retracted when no finding has been entered for the Node of this NumericNodeTextInput (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when the selection is changed: true* | false
deferactiondefer widget action while input is being entered, timeout after specified number of milliseconds: 0*

ContinuousNodeTextInput

A ContinuousNodeTextInput presents a widget on the web page for entering user provided value as evidence on a continuous Node.

Extends

BasicWidget

Description

Use the ContinuousNodeTextInput to let the user insert evidence for a continuous Node by entering a value in a text field.  When a value is entered into the text field, the value is inserted as evidence.  When the user clears the text field evidence on the continuous node is retracted.  Use the depends and retract options for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for ContinuousNodeTextInput

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
dependsan array of Nodes that must have evidence entered in order for this ContinuousNodeTextInput to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
retractan array of additional Nodes for which evidence will be retracted when no finding has been entered for the Node of this ContinuousNodeTextInput (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when the selection is changed: true* | false
deferactiondefer widget action while input is being entered, timeout after specified number of milliseconds: 0*

LikelihoodTextInput

A LikelihoodTextInput presents a widget on the web page for entering user provided value as likelihood evidence on a discrete chance Node.

Extends

BasicWidget

Description

Use the LikelihoodTextInput to let the user insert likelihood evidence for a specific state of a discrete chance Node by entering a value in a text field.  When a value is entered into the text field, the value is inserted as likelihood evidence for specific state.  When the user clears the text field likelihood evidence is set to zero for specific state.  If likelihood is set to one for all states of the node evidence is retracted.  Use the depends and retract options for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for LikelihoodTextInput

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
dependsan array of Nodes that must have evidence entered in order for this LikelihoodTextInput to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
retractan array of additional Nodes for which evidence will be retracted when no finding has been entered for the Node of this LikelihoodTextInput (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when a value is entered: true* | false
deferactiondefer widget action while input is being entered, timeout after specified number of milliseconds: 0*

TableDataItemTextInput

A TableDataItemTextInput presents a widget on the web page for modifying the value found at a specific index in TableCache.

Extends

BasicWidget

Description

Use TableDataItemTextInput to let the user edit a node table data entry by means of a text field.

Available Options for TableDataItemTextInput

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
minthe minimum value to accept as input: 0*
maxthe maximum value to accept as input: 1*
digitsvalue is rounded to specific number of digits (but trailing zeros discarded), set to positive number to enable: 0*

ButtonInput

A ButtonInput is a simple button that can perform a custom action when clicked.

Extends

BasicWidget, CustomWidget, ActionWidget

Description

Use a ButtonInput to perform custom actions when the user click the button.  The most important functions are ActionWidget.setCallback to supply a custom function to invoke when the user click the button, ButtonInput.setText for setting the text of the button and CustomWidget.setUpdateFunction for providing a custom update function.

Available Options for ButtonInput

textspecify button text as a string, if left out the value defaults to the string “< ButtonInput >”.
stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
Summary
Functions
setEnabledSet whether this ButtonInput accepts user input.
setTextSet the button text for this ButtonInput.

Functions

setEnabled

this.setEnabled = function setEnabled(enable)

Set whether this ButtonInput accepts user input.

Parameters

enableboolean value.  true enables the the widget to accept input, false disables the widget.

Returns

void

Example

btn.setEnabled(false);

setText

this.setText = function setText(text)

Set the button text for this ButtonInput.

Parameters

textthe text string to be displayed.

Returns

void

Example

  • set the ButtonInput ‘btn’ to display the text “my button”:
btn.setText("my button");

ButtonInitialize

A ButtonInitialize is a button that performs a Domain.initialize operation when clicked.

Extends

BasicWidget

Description

Use the ButtonInitialize to let the user perform a Domain.initialize at the click of a mouse.  The button is disabled if no evidence has been entered in the Domain.  Use the depends option for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for ButtonInitialize

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
textspecify button text as a string, if left out the value defaults to the string “Reset”.
dependsan array of Nodes that must have evidence entered in order for this ButtonInitialize to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.

ButtonPropagate

A ButtonPropagate is a button that performs a Domain.propagate operation when clicked.

Extends

BasicWidget

Description

Use the ButtonPropagate to let the user perform a Domain.propagate at the click of a mouse.  This button is needed when using the autopropagate:false option for all evidence entering widgets.  The button is disabled if there is no evidence to propagate.  Use the depends option for encoding any dependencies from the Bayesian network or application domain into the widget behavior.

Available Options for ButtonPropagate

(* indicate default value if the option is left out)

stylespecify any CSS styles to apply as a string, if left out the value defaults to empty string.
textspecify button text as a string, if left out the value defaults to the string “Reset”.
dependsan array of Nodes that must have evidence entered in order for this ButtonPropagate to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.

Bar

A Bar displays a bar with the width set to some percentage of a max width.

Extends

BasicWidget, CustomWidget, ActionWidget

Description

Use the Bar to present a bar type widget where the appearence of the bar depends on custom code.  The most important functions are ActionWidget.setCallback to supply a custom function to invoke when the user click the widget, Bar.setScale for setting bar extend and CustomWidget.setUpdateFunction for providing a custom update function.

  • Parameters that take color values should be a string representing a CSS color value according to the specification http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical.  Most browsers support color descriptions on following form: “orange”, “#FFA500”, “rgb(255,165,0)” - other forms may be less supported by some browsers.  Invalid color descriptions may render different between browsers.
  • To dynamically modify the DOM and inject Bars, create a Bar using HuginWidgetManager.constructBar, and then use the BasicWidget.getDomNode function for retrieving a DOM element to inject.

Available Options for Bar

(* indicate default value if option is left out)

orientationspecify the bar orientation, 0*=left-to-right, 1=right-to-left, 2=top-to-bottom, 3=bottom-to-top.
widthan integer, specify the width of the bar in pixels: 100*
heightan integer, specify the height of the bar: 25*
scalefloating point number, specify the initial extend of the bar [0-1]: 0.5*
textspecify an optional text to overlay at the bar center, if left out the value defaults to an empty string “”*
backgroundthe background color, “transparent”*
bar_colorthe color to use for drawing the bar, “skyblue”*
text_colorthe color to use for rendering a text string, “black”*
fonta string, specify the font and font size to use when rendering a text string: “10px sans-serif”*
edge_colorthe color to use for drawing the line edge around the bar “black”*
edge_thicknessa number, the thickness in pixels of the line edge around the bar: 1*
bar_corner_radiusthe radius in pixels for rounding corners on the bar: 5*
Summary
Functions
setTextSet the text to overlay the bar.
setScaleSet the extend of the bar of this Bar.
setBackgroundSet the background color of this Bar.
setBarcolorSet the color of the bar of this Bar.
setTextColorSet the color of the overlay text of this Bar.
setFontSet the font and font size to use when rendering a text string.
setEdgeColorSet the color to use for drawing the line edge around the bar of this Bar.
setEdgeThicknessSet the thickness in pixels of the line edge around the bar of this Bar.
setBarCornerRadiusset the radius in pixels for rounding corners on the bar of this Bar.

Functions

setText

this.setText = function setText(text)

Set the text to overlay the bar.  Note the text is clipped at the width X height boundary if it cannot fit in the visible area.

Parameters

textthe text string to overlay.

Returns

void

Example

  • set overlay text of Bar ‘b’ “my text”:
b.setText("my text");

setScale

this.setScale = function setScale(scale)

Set the extend of the bar of this Bar.

Parameters

scalefloating point number, extend of the bar [0-1].

Returns

void

Example

  • extend the bar of Bar ‘b’ to 80% of its width (or height, depending on orientation):
b.setScale(0.8);

setBackground

this.setBackground = function setBackground(background)

Set the background color of this Bar.

Parameters

backgroundthe background color

Returns

void

Example

  • set background color of Bar ‘b’ to “#FFA500”:
b.setBackground("#FFA500");

setBarcolor

Set the color of the bar of this Bar.

Parameters

barcolorthe bar color

Returns

void

Example

  • set bar color of Bar ‘b’ to “#FFA500”:
b.setBarcolor("#FFA500");

setTextColor

this.setTextColor = function setTextColor(text_color)

Set the color of the overlay text of this Bar.

Parameters

text_colorthe overlay text color

Returns

void

Example

  • set overlay text color of Bar ‘b’ to “#FFA500”:
b.setTextColor("#FFA500");

setFont

this.setFont = function setFont(font)

Set the font and font size to use when rendering a text string.

Parameters

fonta string, the font and font size to use when rendering a text string

Returns

void

Example

  • set the font for Bar ‘b’ to “bold 12px sans-serif”:
b.setFont("bold 12px sans-serif");

setEdgeColor

this.setEdgeColor = function setEdgeColor(edge_color)

Set the color to use for drawing the line edge around the bar of this Bar.

Parameters

edge_colorthe color to use for drawing the line edge around the bar

Returns

void

Example

  • set edge color of Bar ‘b’ to “#FFA500”:
b.setEdgeColor("#FFA500");

setEdgeThickness

this.setEdgeThickness = function setEdgeThickness(edge_thickness)

Set the thickness in pixels of the line edge around the bar of this Bar.

Parameters

edge_thicknessa number, the thickness in pixels of the line edge around the bar

Returns

void

Example

  • set edge thickness of Bar ‘b’ to 3:
b.setEdgeThickness(3);

setBarCornerRadius

this.setBarCornerRadius = function setBarCornerRadius(bar_corner_radius)

set the radius in pixels for rounding corners on the bar of this Bar.

Parameters

bar_corner_radiusthe radius in pixels for rounding corners on the bar

Returns

void

Example

  • set bar corner rounding radius to 3 of Bar ‘b’::
b.setBarCornerRadius(3);

BeliefBar

A BeliefBar displays the belief as a bar for a specific discrete Node state on the web page.

Extends

BasicWidget

Description

Use the BeliefBar for displaying beliefs in bar style for discrete Nodes.

Available Options for BeliefBar

(* indicate default value if option is left out)

displayoverlay value label displaying normal belief (0-1), as percent (0-100) or no label: “percent”* | “belief” | “none”
digitsdisplayed value is rounded to specific number of digits: 2*
dependsan array of Nodes that must have evidence entered in order for this BeliefBar to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
accept_mouse_clickboolean value.  If true* evidence is entered or retracted when the widget receives a mouse click, if false mouse clicks are ignored.
retractan array of additional Nodes for which evidence will be retracted when ‘no findings’ is selected for the Node of this BeliefBar (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when evidence is entered/retracted: true* | false
orientationspecify the bar orientation, 0*=left-to-right, 1=right-to-left, 2=top-to-bottom, 3=bottom-to-top.
widthan integer, specify the width of the bar in pixels: 100*
heightan integer, specify the height of the bar: 25*
backgroundthe background color, “transparent”*
bar_colorthe color to use for drawing the belief bar, “green”*
bar_color_findingthe color to use for drawing the belief bar when evidence has been entered, “red”*
bar_color_inconsistentthe color to use for drawing the belief bar when domain is in an inconsistent state, “grey”*
text_colorthe color to use for rendering a text string, “black”*
fonta string, specify the font and font size to use when rendering a text string: “10px sans-serif”*
edge_colorthe color to use for drawing the line edge around the bar “black”*
edge_thicknessa number, the thickness in pixels of the line edge around the bar: 1*
bar_corner_radiusthe radius in pixels for rounding corners on the bar: 5*

PointerListener

Base class for widgets that record the pointer coordinates when user click or touch widget.  Note coordinates are in coordinate system local to widget, which means is 0,0 is top left corner of area covered by widget, x-axis extends right and y-axis extends downwards.

Available Options for PointerListener

(* indicate default value if option is left out)

update_on_mouse_movementboolean value. if true invoke the update function (set by CustomWidget.setUpdateFunction) when mouse movement is detected over widget: false*
Summary
Properties
actionXThe X coordinate at the point of latest user interaction on this widget.
actionYThe Y coordinate at the point of latest user interaction on this widget.

Properties

actionX

The X coordinate at the point of latest user interaction on this widget.

actionY

The Y coordinate at the point of latest user interaction on this widget.

HistogramBar

A HistogramBar displays a histogram over a set of numeric data points as a bar-like widget.

Extends

BasicWidget, CustomWidget, ActionWidget

Description

Use the HistogramBar to present a bar type widget where the appearence of the histogram depends on custom code.  The most important functions are ActionWidget.setCallback to supply a custom function to invoke when the user click the widget, <Bar.setPoints> for setting histogram point extends and CustomWidget.setUpdateFunction for providing a custom update function.

  • Parameters that take color values should be a string representing a CSS color value according to the specification http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical.  Most browsers support color descriptions on following form: “orange”, “#FFA500”, “rgb(255,165,0)” - other forms may be less supported by some browsers.  Invalid color descriptions may render different between browsers.
  • To dynamically modify the DOM and inject Bars, create a Bar using HuginWidgetManager.constructBar, and then use the BasicWidget.getDomNode function for retrieving a DOM element to inject.

Available Options for HistogramBar

(* indicate default value if option is left out)

widthan integer, specify the width of the bar in pixels: 100*
heightan integer, specify the height of the bar: 25*
histogram_stylea string, specify the style of the histogram columns (“column” or “line”): “column”*
pointsan array of floating point numbers, specify the initial extend of the histogram column for each point [0-1]: [0.5, 0.5, 0.5]*
point_colorsan array of colors to use for drawing the columns, [“skyblue”, “skyblue”, “skyblue”]*
indentan integer, specify the amount of blank space (in units of histogram column widths) inserted before set of histogram columns: 0*
backgroundthe background color, “transparent”*
line_colorthe color to use for drawing the histogram “black”*
line_thicknessa number, the thickness in pixels of the line used for drawing the histogram: 1*
edge_colorthe color to use for drawing the line edge around the sourrounding bar “black”*
edge_thicknessa number, the thickness in pixels of the line edge around the sourrounding bar: 1*
bar_corner_radiusthe radius in pixels for rounding corners on the sourrounding bar: 0*
Summary
Functions
setPointsSet the extend of the columns of this HistogramBar.
setBackgroundSet the background color of this HistogramBar.
setPointColorsSet the individual colors of the the columns of this HistogramBar.
setEdgeColorSet the color to use for drawing the line edge around the bar of this HistogramBar.
setEdgeThicknessSet the thickness in pixels of the line edge around the bar of this HistogramBar.
setBarCornerRadiusset the radius in pixels for rounding corners on the bar of this HistogramBar.
Properties
actionColumnThe column targeted during latest user click.

Functions

setPoints

this.setPoints = function setPoints(points)

Set the extend of the columns of this HistogramBar.

Parameters

pointsan array of floating point numbers

Returns

void

Example

  • extend each of the three columns of the HistogramBar ‘b’ to 80%:
b.setPoints([0.8, 0.8, 0.8]);

setBackground

this.setBackground = function setBackground(background)

Set the background color of this HistogramBar.

Parameters

backgroundthe background color

Returns

void

Example

  • set background color of HistogramBar ‘b’ to “#FFA500”:
b.setBackground("#FFA500");

setPointColors

this.setPointColors = function setPointColors(colors)

Set the individual colors of the the columns of this HistogramBar.

Parameters

colorsan array of colors to use for drawing the columns

Returns

void

Example

b.setPointColors("#FFA500");

setEdgeColor

this.setEdgeColor = function setEdgeColor(edge_color)

Set the color to use for drawing the line edge around the bar of this HistogramBar.

Parameters

edge_colorthe color to use for drawing the line edge around the bar

Returns

void

Example

b.setEdgeColor("#FFA500");

setEdgeThickness

this.setEdgeThickness = function setEdgeThickness(edge_thickness)

Set the thickness in pixels of the line edge around the bar of this HistogramBar.

Parameters

edge_thicknessa number, the thickness in pixels of the line edge around the bar

Returns

void

Example

  • set edge thickness of Bar ‘b’ to 3:
b.setEdgeThickness(3);

setBarCornerRadius

this.setBarCornerRadius = function setBarCornerRadius(bar_corner_radius)

set the radius in pixels for rounding corners on the bar of this HistogramBar.

Parameters

bar_corner_radiusthe radius in pixels for rounding corners on the bar

Returns

void

Example

  • set bar corner rounding radius to 3 of HistogramBar ‘b’::
b.setBarCornerRadius(3);

Properties

actionColumn

The column targeted during latest user click.

TemporalBeliefBar

A TemporalBeliefBar displays the beliefs in a number of DBN time slices for a specific discrete Node state on the web page.

Extends

BasicWidget

Description

Use the TemporalBeliefBar for displaying beliefs in histogram bar style for discrete Nodes in DBNs.

Available Options for TemporalBeliefBar

(* indicate default value if option is left out)

dependsan array of Nodes that must have evidence entered in order for this BeliefBar to become active (e.g. depends: [ A, B, C ] ), default value is emtpy.
accept_mouse_clickboolean value.  If true* evidence is entered or retracted when the widget receives a mouse click, if false mouse clicks are ignored.
retractan array of additional Nodes for which evidence will be retracted when ‘no findings’ is selected for the Node of this TemporalBeliefBar (e.g. retract: [ D, E, F ] ), default value is emtpy.
autopropagateindicate if a propagation should automatically be performed when evidence is entered/retracted: true* | false
widthan integer, specify the width of the bar in pixels: 100*
heightan integer, specify the height of the bar: 25*
histogram_stylea string, specify the style of the histogram columns (“column” or “line”): “column”*
indentan integer, specify the amount of blank space (in units of histogram column widths) inserted before set of histogram columns: 0*
backgroundthe background color, “transparent”*
bar_colorthe color to use for drawing the belief bar, “green”*
bar_color_findingthe color to use for drawing the belief bar when evidence has been entered, “red”*
bar_color_inconsistentthe color to use for drawing the belief bar when domain is in an inconsistent state, “grey”*
line_colorthe color to use for drawing the histogram “black”*
line_thicknessa number, the thickness in pixels of the line used for drawing the histogram: 1*
edge_colorthe color to use for drawing the line edge around the sourrounding bar “black”*
edge_thicknessa number, the thickness in pixels of the line edge around the sourrounding bar: 1*
bar_corner_radiusthe radius in pixels for rounding corners on the sourrounding bar: 0*

OverlayPrimitives

Interface for overlaying graphical primitives on a chart type widget.

Extends

BasicWidget, CustomWidget, PointerListener, ActionWidget

Description

Objects that implement OverlayPrimitives can have custom defined graphical primitives overlayed.  This is useful for e.g. adding floating text labels to a chart.  Implemented by DiscreteChart, BlockChart, PieChart, ColumnChart, LineColumnChart.

  • Parameters that take color values should be a string representing a CSS color value according to the specification http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical.  Most browsers support color descriptions on following form: “orange”, “#FFA500”, “rgb(255,165,0)” - other forms may be less supported by some browsers.  Invalid color descriptions may render different between browsers.

Available Options for OverlayPrimitives

(* indicate default value if option is left out)

widthan integer the chart width in pixels: 200*
heightan integer the chart height in pixels: 200*
backgroundthe background color, “transparent”*
graphic_primitivesan array of graphic primitive descriptions to be rendered: []*

Describing a graphic primitive

A graphic primitive is described by means of an associative array with a set of properties, specific for each type of primitive.  The coordinate system is in pixels, with the top left corner being (0,0), X-axis extending to the right and Y-axis extending downwards.

Three types of primitives can be used, text labels, lines and boxes.

//Text label
{ type: "text",                //required - type of primitive
  x: NUMBER,                   //required - position
  y: NUMBER,                   //required - position
  text: STRING,                //required - the text to be displayed
  align: STRING                //optional - "left", "center", "right"
  baseline: STRING             //optional - "normal", "middle", "top"
  font: STRING,                //optional - font description
  color: STRING,               //optional - text color description
  rotation: NUMBER             //optional - angle 0-360 degrees
}

//Line
{ type: "line",                //required - type of primitive
  x: [ NUMBER, NUMBER, ... ],  //required - an array of X positions for each point on the line (must contain at least two entries)
  y: [ NUMBER, NUMBER, ... ],  //required - an array of Y positions for each point on the line (must contain at least two entries)
  color: STRING,               //optional - line color description
  linewidth: NUMBER            //optional - width of line in pixels
}

//Box
{ type: "box",                 //required - type of primitive
  x: NUMBER,                   //required - top left coordinate
  y: NUMBER,                   //required - top left coordinate
  width: NUMBER,               //required - width of box
  height: NUMBER,              //required - height of box
  color: STRING,               //optional - fill color description
  linecolor: STRING,           //optional - line color description
  linewidth: NUMBER            //optional - width of line in pixels
}

//Image
{ type: "image",               //required - type of primitive
  url: STRING,                 //required - url to image
  x: NUMBER,                   //required - top left coordinate
  y: NUMBER,                   //required - top left coordinate
  width: NUMBER,               //required - width of image
  height: NUMBER,              //required - height of image
}

//Example 1: A text label (hello world!) at position (50,10)
myLabel = { type: "text", x: 50, y: 10, text: "hello world!" };

//Example 2: A line diagonal from (0,0) to (40,40)
myLine = { type: "line", x: [0, 40], y: [0, 40] };

//Example 3: A box with top left corner at (50,50) and 100 pixels wide and 25 pixels high
myBox = { type: "box", x: 50, y: 50, width: 100, height: 25 };

//Example 4: An image with top left corner at (10,20) displayed in its native size
myImage = { type: "image", x: 10, y: 20, url: "http://some-host-name/path/to/image.jpg" };
Summary
Functions
setGraphicPrimitivesSet a list of graphic primitives to be rendered on top of chart.
setBackgroundSet the background color of this DiscreteChart.

Functions

setGraphicPrimitives

chart.setGraphicPrimitives = function setGraphicPrimitives(graphic_primitives)

Set a list of graphic primitives to be rendered on top of chart.

Parameters

graphic_primitivesan array of graphic primitive descriptions to be rendered

Returns

void

Example

  • set three primitives, a text label, a line and a box on OverlayPrimitives ‘chart’:
//A text label (hello world!) at position (50,10)
myLabel = { type: "text", x: 50, y: 10, text: "hello world!" };

//A line diagonal from (0,0) to (40,40)
myLine = { type: "line", x: [0, 40], y: [0, 40] };

//A box with top left corner at (50,50) and 100 pixels wide and 25 pixels high
myBox = { type: "box", x: 50, y: 50, width: 100, height: 25 };

chart.setGraphicPrimitives( [myLabel, myLine, myBox] );

setBackground

chart.setBackground = function setBackground(background)

Set the background color of this DiscreteChart.

Parameters

backgroundthe background color

Returns

void

Example

  • set background color of DiscreteChart ‘chart’ to “#FFA500”:
chart.setBackground("#FFA500");

DiscreteChart

The base class for discrete chart widgets.  See ColumnChart.

Extends

OverlayPrimitives

Description

Use charts for rendering a set og data points for display.  Various chart formats are supported, see DiscreteChart, BlockChart, PieChart, ColumnChart, LineColumnChart.

  • Parameters that take color values should be a string representing a CSS color value according to the specification http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical.  Most browsers support color descriptions on following form: “orange”, “#FFA500”, “rgb(255,165,0)” - other forms may be less supported by some browsers.  Invalid color descriptions may render different between browsers.

Available Options for DiscreteChart (in addition to options for OverlayPrimitives):

(* indicate default value if option is left out)

borderspacingan associative array defining extra spacing for each of the four chart borders (extra spacing - default is 0 for all sides): {top: 0, bottom: 0, left: 0, right: 0}*
labelsaxis labels, an array of strings: []*
data_point_valuesvalues for each data point, an array of positive numbers: []*
data_point_labelslabel for each data point, an array of strings: []*
data_point_colorsthe color of each data point, an array of strings representing color values: []*
text_colorthe color to use for rendering a text string, “black”*
line_colorthe color to use when painting lines, “black”*
fonta string, specify the font and font size to use when rendering a text string: “10px sans-serif”*
line_widtha number, the width in pixels used for drawing various lines: 1*
Summary
Functions
setLabelsSet the axis labels of this DiscreteChart.
setDataPointValuesSet the data point values of this DiscreteChart.
setDataPointLabelsSet the label for each data point of this DiscreteChart.
setDataPointColorsSet the color of each data point of this DiscreteChart.
setTextColorSet the color of the text of this DiscreteChart.
setLineColorSet the color used for lines when drawing this DiscreteChart.
setFontSet the font and font size to use when rendering a text string.
setLineWidthSet the width in pixels used for drawing various lines.

Functions

setLabels

chart.setLabels = function setLabels(labels)

Set the axis labels of this DiscreteChart.

Parameters

labelsthe labels, an array of strings.

Returns

void

Example

  • set axis labels of DiscreteChart ‘chart’ to “small”, “medium” and “large”:
chart.setLabels(["small", "medium", "large"]);

setDataPointValues

chart.setDataPointValues = function setDataPointValues(values)

Set the data point values of this DiscreteChart.

Parameters

valuesthe values, an array of positive numbers.

Returns

void

Example

  • set data point values of DiscreteChart ‘chart’ to 0.1, 0.2 and 0.9:
chart.setDataPointValues([0.1, 0.2, 0.9]);

setDataPointLabels

chart.setDataPointLabels = function setDataPointLabels(labels)

Set the label for each data point of this DiscreteChart.

Parameters

labelsthe labels, an array of strings.

Returns

void

Example

  • set data point labels of DiscreteChart ‘chart’ to “point #1”, “point #2”, and “point #3”:
chart.setDataPointLabels(["point #1", "point #2", "point #3"]);

setDataPointColors

chart.setDataPointColors = function setDataPointColors(colors)

Set the color of each data point of this DiscreteChart.

Parameters

colorsthe colors, an array of strings representing color values.

Returns

void

Example

  • set data point colors of DiscreteChart ‘chart’ to “#FF00001”, “#00FF00”, and “#0000FF” (red, green, blue):
chart.setDataPointColors(["#FF00001", "#00FF00", "#0000FF"]);

setTextColor

chart.setTextColor = function setTextColor(text_color)

Set the color of the text of this DiscreteChart.

Parameters

text_colorthe text color

Returns

void

Example

chart.setTextColor("#FFA500");

setLineColor

chart.setLineColor = function setLineColor(line_color)

Set the color used for lines when drawing this DiscreteChart.

Parameters

line_colorthe line color

Returns

void

Example

chart.setLineColor("#FFA500");

setFont

chart.setFont = function setFont(font)

Set the font and font size to use when rendering a text string.

Parameters

fonta string, the font and font size to use when rendering a text string

Returns

void

Example

  • set the font for DiscreteChart ‘chart’ to “bold 12px sans-serif”:
chart.setFont("bold 12px sans-serif");

setLineWidth

chart.setLineWidth = function setLineWidth(line_width)

Set the width in pixels used for drawing various lines.

Parameters

line_widtha number

Returns

void

Example

chart.setLineWidth(3);

BlockChart

An implementation of DiscreteChart that renders a block chart

Extends

DiscreteChart

Description

Each data point is plotted as a block.  The block size depends on the particular data point value relative to other data point values.  If data point colors are not provided, individual colors are generated for the data points.

Available Options for BlockChart (in addition to options for DiscreteChart, OverlayPrimitives)

(* indicate default value if option is left out)

orientationspecify chart orientation, 0*=horizontal layout, 1=vertical layout

PieChart

An implementation of DiscreteChart that renders a pie chart

Extends

DiscreteChart

Description

Each data point is plotted as a segment of a pie chart.  The segment size depends on the particular data point value relative to other data point values.  If data point colors are not provided, individual colors are generated for the data points.

Available Options for PieChart (in addition to options for DiscreteChart, OverlayPrimitives)

(* indicate default value if option is left out)

scalea number between [0-1], for scaling the size of the circle relative to the widget bounds: *1
Summary
Functions
setScaleScaling the size of the circle relative to the widget bounds.

Functions

setScale

chart.setScale = function setScale(scale)

Scaling the size of the circle relative to the widget bounds.

Parameters

scalea number between [0-1]

Returns

void

Example

chart.setScale(0.8);

ColumnChart

An implementation of DiscreteChart that renders a column chart

Extends

DiscreteChart

Description

Each data point is plotted as a column.  The column size depends on the particular data point value relative to the largest value of the data points and the value provided via max_value.  If data point colors are not provided, individual colors are generated for the data points.

Available Options for ColumnChart (in addition to options for DiscreteChart, OverlayPrimitives)

(* indicate default value if option is left out)

orientationspecify chart orientation, 0*=vertical columns, 1=horizontal columns
labels2secondary axis labels, an array of strings: []*
max_valuethe maximal value, a positive number.  (Used for scaling chart and column height): 0*.
draw_grida boolean, draw a grid on the chart: false*
Summary
Functions
setLabels2Set the secondary axis labels of this ColumnChart.
setMaxValueSet the maximal value used for scaling data_point_values columns.
setDrawGridWhether to draw a grid on the chart.

Functions

setLabels2

chart.setLabels2 = function setLabels2(labels)

Set the secondary axis labels of this ColumnChart.

Parameters

labels2the labels, an array of strings.

Returns

void

Example

  • set secondary axis labels of ColumnChart ‘chart’ to “small”, “medium” and “large”:
chart.setLabels2(["small", "medium", "large"]);

setMaxValue

chart.setMaxValue = function setMaxValue(max_value)

Set the maximal value used for scaling data_point_values columns.

Parameters

max_valuethe maximal value, a positive number.

Returns

void

Example

chart.setMaxValue(10);

setDrawGrid

chart.setDrawGrid = function setDrawGrid(enable)

Whether to draw a grid on the chart.

Parameters

enablea boolean

Returns

void

Example

chart.setDrawGrid(true);

LineColumnChart

An extension of of ColumnChart that renders connected points instead of columns.

Extends

ColumnChart

Description

The data point are plotted as connected points in the chart.  The position of a point depends on the particular data point value relative to the largest value of the data points and the value provided via max_value.  Additional line series can be plotted using the extra_data_point_values and associated options.

Available Options for LineColumnChart (in addition to options for ColumnChart, DiscreteChart, OverlayPrimitives)

Note: The ‘orientation’ parameter inherited from ColumnChart is ignored in LineColumnCharts.

(* indicate default value if option is left out)

draw_dotwhether to paint a square dot at each data point or not, a boolean value: true* or false
extra_data_point_valuesdata point values for each additional line, array of arrays of positive numbers (e.g.  [ [0.1, 0.2, 0.3], [0, 0.05, 0.1] ]): [ [] ]*
extra_data_point_labelslabel for each data point on additional lines, array of arrays of strings (e.g.  [ [“A”, “B”, “C”], [“1”, “2”, “3”] ]): [ [] ]*
extra_data_point_colorsthe color of each data point on additional lines, array of arrays of strings representing color values (e.g.  [ [“yellow”, “green”, “blue”], [“black”, “silver”, “grey”] ]: [ [] ]*
plot_line_colorcolor of the line that connects each data point *”black”
extra_plot_line_colorcolor of the line that connects each data point of additional lines, array of colors (e.g.  [“yellow”, “green”, “blue”] ).
Summary
Functions
setDrawDotWhether to paint a square dot at each data point or not.
setExtraDataPointValuesSet data point values of this LineColumnChart for additional lines.
setExtraDataPointLabelsSet the label for each data point on an additional line of this LineColumnChart.
setExtraDataPointColorsSet the color of each data point on an additional line of this LineColumnChart.
setPlotLineColorSet the color of the line that connects each data point of this LineColumnChart.
setExtraPlotLineColorSet the color of the line that connects each data point on an additional line of this LineColumnChart.

Functions

setDrawDot

chart.setDrawDot = function setDrawDot(enable)

Whether to paint a square dot at each data point or not.

Parameters

enablea boolean

Returns

void

Example

chart.setDrawDot(true);

setExtraDataPointValues

chart.setExtraDataPointValues = function setExtraDataPointValues(line,
values)

Set data point values of this LineColumnChart for additional lines.

Parameters

linea positive integer
valuesthe values, an array of positive numbers.

Returns

void

Example

  • set data point values for line 0 of LineColumnChart ‘chart’ to 0.1, 0.2 and 0.9:
chart.setExtraDataPointValues(0, [0.1, 0.2, 0.9]);

setExtraDataPointLabels

chart.setExtraDataPointLabels = function setExtraDataPointLabels(line,
labels)

Set the label for each data point on an additional line of this LineColumnChart.

Parameters

linea positive integer
labelsthe labels, an array of strings.

Returns

void

Example

  • set data point labels for line 0 of LineColumnChart ‘chart’ to “point #1”, “point #2”, and “point #3”:
chart.setExtraDataPointLabels(0, ["point #1", "point #2", "point #3"]);

setExtraDataPointColors

chart.setExtraDataPointColors = function setExtraDataPointColors(line,
colors)

Set the color of each data point on an additional line of this LineColumnChart.

Parameters

linea positive integer
colorsthe colors, an array of strings representing color values.

Returns

void

Example

  • set data point colors for line 0 of LineColumnChart ‘chart’ to “#FF00001”, “#00FF00”, and “#0000FF” (red, green, blue):
chart.setExtraDataPointColors(0, ["#FF00001", "#00FF00", "#0000FF"]);

setPlotLineColor

chart.setPlotLineColor = function setPlotLineColor(plot_line_color)

Set the color of the line that connects each data point of this LineColumnChart.

Parameters

plot_line_colorcolor of the line that connects each data point

Returns

void

Example

  • set color of line that connects points in LineColumnChart ‘chart’ to “#FFA500”:
chart.setPlotLineColor("#FFA500");

setExtraPlotLineColor

chart.setExtraPlotLineColor = function setExtraPlotLineColor(line,
color)

Set the color of the line that connects each data point on an additional line of this LineColumnChart.

Parameters

linea positive integer
colorthe color

Returns

void

Example

  • set data color of line that connects each data point for line 0 of LineColumnChart ‘chart’ to “#FF00001” (red):
chart.setExtraPlotLineColor(0, "#FF00001");
function HuginWidgetManager(domain,
options)
Instances of the Domain class represent Bayesian networks and LIMIDs in which you can propagate evidence and calculate updated beliefs and expected utilities.
this.updateAllWidgets = function updateAllWidgets()
Invokes the update function for all widgets registerred under this HuginWidgetManager.
this.createTableCache = function createTableCache(table)
Create a new TableCache for use in widgets that support editing and displaying node table data.
A class that maintains a cache over Table data items, used by widgets that support editing and displaying node table data.
this.constructTextLabel = function constructTextLabel(options)
Construct a new TextLabel.
A TextLabel displays a string of characters on the web page.
this.constructBeliefLabel = function constructBeliefLabel(node,
state,
options)
Construct a new BeliefLabel.
A BeliefLabel display the belief for a specific discrete Node state on the web page.
this.constructDiscreteExpectedUtilityLabel = function constructDiscreteExpectedUtilityLabel(
   discreteNode,
   state,
   options
)
Construct a new ExpectedUtilityLabel.
An ExpectedUtilityLabel display the expected utility for a specific discrete Node state, a utility Node or a Domain on the web page.
this.constructExpectedUtilityLabel = function constructExpectedUtilityLabel(
   utilityNodeOrDomain,
   options
)
Construct a new ExpectedUtilityLabel.
this.constructFunctionValueLabel = function constructFunctionValueLabel(
   functionNode,
   options
)
Construct a new FunctionValueLabel.
A FunctionValueLabel display the value of a function Node on the web page.
this.constructTableDataItemLabel = function constructTableDataItemLabel(table,
index,
options)
Construct a new TableDataItemLabel.
A TableDataItemLabel display the value found at a specific index in TableCache on the web page.
this.constructImageLabel = function constructImageLabel(options)
Construct a new ImageLabel.
An ImageLabel displays a specific image on the web page based on a custom function
this.constructSelectOption = function constructSelectOption(options)
Construct a new SelectOption.
A SelectOption presents a number of selectable options on the web page.
this.constructStateSelectOption = function constructStateSelectOption(node,
options)
Construct a new StateSelectOption.
A StateSelectOption presents a widget on the web page for selecting a state to enter as evidence for a given discrete Node.
this.constructTextInput = function constructTextInput(options)
Construct a new TextInput.
A TextInput presents an editable text field on the webpage.
this.constructNumericNodeTextInput = function constructNumericNodeTextInput(
   node,
   options
)
Construct a new NumericNodeTextInput.
A NumericNodeTextInput presents a widget on the web page that selects a state of a given discrete numeric Node based on user provided numeric value.
this.constructLikelihoodTextInput = function constructLikelihoodTextInput(
   node,
   state,
   options
)
Construct a new LikelihoodTextInput.
A LikelihoodTextInput presents a widget on the web page for entering user provided value as likelihood evidence on a discrete chance Node.
this.constructContinuousNodeTextInput = function constructContinuousNodeTextInput(
   node,
   options
)
Construct a new ContinuousNodeTextInput.
A ContinuousNodeTextInput presents a widget on the web page for entering user provided value as evidence on a continuous Node.
this.constructTableDataItemTextInput = function constructTableDataItemTextInput(
   table,
   index,
   options
)
Construct a new TableDataItemTextInput.
A TableDataItemTextInput presents a widget on the web page for modifying the value found at a specific index in TableCache.
this.constructButtonInput = function constructButtonInput(options)
Construct a new ButtonInput.
A ButtonInput is a simple button that can perform a custom action when clicked.
this.constructButtonInitialize = function constructButtonInitialize(options)
Construct a new ButtonInitialize.
A ButtonInitialize is a button that performs a Domain.initialize operation when clicked.
this.constructButtonPropagate = function constructButtonPropagate(options)
Construct a new ButtonPropagate.
A ButtonPropagate is a button that performs a Domain.propagate operation when clicked.
this.constructBar = function constructBar(options)
Construct a new Bar.
A Bar displays a bar with the width set to some percentage of a max width.
this.constructBeliefBar = function constructBeliefBar(node,
state,
options)
Construct a new BeliefBar.
A BeliefBar displays the belief as a bar for a specific discrete Node state on the web page.
this.constructHistogramBar = function constructHistogramBar(options)
Construct a new HistogramBar.
A HistogramBar displays a histogram over a set of numeric data points as a bar-like widget.
this.constructTemporalBeliefBar = function constructBeliefBar(node,
state,
count,
options)
Construct a new TemporalBeliefBar.
A TemporalBeliefBar displays the beliefs in a number of DBN time slices for a specific discrete Node state on the web page.
this.constructOverlayPrimitives = function constructOverlayPrimitives(options)
Construct a new OverlayPrimitives.
Interface for overlaying graphical primitives on a chart type widget.
this.constructBlockChart = function constructBlockChart(options)
Construct a new BlockChart.
An implementation of DiscreteChart that renders a block chart
this.constructPieChart = function constructPieChart(options)
Construct a new PieChart.
An implementation of DiscreteChart that renders a pie chart
this.constructColumnChart = function constructColumnChart(options)
Construct a new ColumnChart.
An implementation of DiscreteChart that renders a column chart
this.constructLineColumnChart = function constructLineColumnChart(options)
Construct a new LineColumnChart.
An extension of of ColumnChart that renders connected points instead of columns.
this.propagate = function propagate()
Invokes Domain.propagate for the Domain associated with this HuginWidgetManager.
this.propagate = function propagate(equilibrium,
evidenceMode)
Establishes the specified equilibrium using the evidence mode indicated for incorporation of evidence on all JunctionTrees of this Domain.
Hugin uses Tables for representing the conditional probability and utility potentials of individual Nodes, the probability and utility potentials on separators and Cliques of JunctionTrees, evidence potentials, etc.
this.getIndex = function(configuration)
Computes the table index corresponding to a given state configuration.
this.getConfiguration = function(index,
configuration)
Computes the state configuration corresponding to a given table index.
this.normalize = function(index)
Normalize the set of table data items for all node states given a parent configuration (induced through supplied index).
this.commit = function()
Commits any changes performed on the cache to the underlying Table.
this.reload = function()
Resets any changes to the cache and refreshes cached values from the underlying Table.
this.setData = function(data,
startIndex,
count)
Sets a region of the discrete data of this TableCache.
this.setDataItem = function(index,
value)
Sets a specific data item of the discrete data of this TableCache.
this.getData = function(startIndex,
count)
Gets a region of the discrete data of this TableCache.
this.getDataItem = function(index)
Get the data item at position index of the discrete data of this TableCache.
this.getSize = function()
Get the size of the underlying Table.
this.getNodes = function()
Get all Nodes associated with underlying Table.
Nodes are one of the fundamental objects used in the construction of Bayesian networks and LIMIDs.
owner.addToLifecycle = function addToLifecycle()
Registers this BasicWidget to receive update notifiactions from the HuginWidgetManager.
The base class for all of the HUGIN widgets.
The HuginWidgetManager manages all widgets associated with a specific Domain.
owner.removeFromLifecycle = function removeFromLifecycle()
Un-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager.
owner.getDomNode = function getDomNode()
Get the DOM element corresponding to this widget.
owner.getCSS = _deprecated_deprecate(
    owner,
   function getCSS() { return _domNode.style; },
    "BasicWidget.getCSS() - instead use BasicWidget.getDomNode().style"
); _defineconstant_addConstant(this, "toJSON", function() {_error_throwError("cannot serialize hugin widget instance");}); } function CustomWidget(owner)
Easy access to the CSS style property of the corresponding DOM element for this widget.
owner.setUpdateFunction = function setUpdateFunction(updateFunction)
Register a custom update function
owner.setCallback = function setCallback(callbackFunction)
Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget.
A base class for widgets that are able to respond to user actions such as receiving a mouse-click or other kinds of user invoked state changing actions.
this.setText = function setText(text)
Set the text to be display by this TextLabel.
this.showImage = function showImage(imageNumber)
display a particular image based on index.
this.setWidth = function setWidth(width)
force the width of the images in this ImageLabel.
this.setHeight = function setHeight(height)
force the height of the images in this ImageLabel.
this.selectIndex = function selectIndex(index)
Change the selected option of this SelectOption.
this.getSelectedIndex = function getSelectedIndex()
Gets the index of the currently selected option
this.setEnabled = function setEnabled(enable)
Set whether this SelectOption accepts user input.
this.setText = function setText(text)
Set the contents of this TextInput.
this.getText = function getText()
Get the contents of this TextInput.
this.setEnabled = function setEnabled(enable)
Set whether this TextInput accepts user input.
this.setEnabled = function setEnabled(enable)
Set whether this ButtonInput accepts user input.
this.setText = function setText(text)
Set the button text for this ButtonInput.
this.initialize = function initialize()
Establishes the initial values for all tables of this Domain (which must be compiled).
this.setText = function setText(text)
Set the text to overlay the bar.
this.setScale = function setScale(scale)
Set the extend of the bar of this Bar.
this.setBackground = function setBackground(background)
Set the background color of this Bar.
this.setTextColor = function setTextColor(text_color)
Set the color of the overlay text of this Bar.
this.setFont = function setFont(font)
Set the font and font size to use when rendering a text string.
this.setEdgeColor = function setEdgeColor(edge_color)
Set the color to use for drawing the line edge around the bar of this Bar.
this.setEdgeThickness = function setEdgeThickness(edge_thickness)
Set the thickness in pixels of the line edge around the bar of this Bar.
this.setBarCornerRadius = function setBarCornerRadius(bar_corner_radius)
set the radius in pixels for rounding corners on the bar of this Bar.
this.setPoints = function setPoints(points)
Set the extend of the columns of this HistogramBar.
this.setBackground = function setBackground(background)
Set the background color of this HistogramBar.
this.setPointColors = function setPointColors(colors)
Set the individual colors of the the columns of this HistogramBar.
this.setEdgeColor = function setEdgeColor(edge_color)
Set the color to use for drawing the line edge around the bar of this HistogramBar.
this.setEdgeThickness = function setEdgeThickness(edge_thickness)
Set the thickness in pixels of the line edge around the bar of this HistogramBar.
this.setBarCornerRadius = function setBarCornerRadius(bar_corner_radius)
set the radius in pixels for rounding corners on the bar of this HistogramBar.
chart.setGraphicPrimitives = function setGraphicPrimitives(graphic_primitives)
Set a list of graphic primitives to be rendered on top of chart.
chart.setBackground = function setBackground(background)
Set the background color of this DiscreteChart.
The base class for discrete chart widgets.
chart.setLabels = function setLabels(labels)
Set the axis labels of this DiscreteChart.
chart.setDataPointValues = function setDataPointValues(values)
Set the data point values of this DiscreteChart.
chart.setDataPointLabels = function setDataPointLabels(labels)
Set the label for each data point of this DiscreteChart.
chart.setDataPointColors = function setDataPointColors(colors)
Set the color of each data point of this DiscreteChart.
chart.setTextColor = function setTextColor(text_color)
Set the color of the text of this DiscreteChart.
chart.setLineColor = function setLineColor(line_color)
Set the color used for lines when drawing this DiscreteChart.
chart.setFont = function setFont(font)
Set the font and font size to use when rendering a text string.
chart.setLineWidth = function setLineWidth(line_width)
Set the width in pixels used for drawing various lines.
chart.setScale = function setScale(scale)
Scaling the size of the circle relative to the widget bounds.
chart.setLabels2 = function setLabels2(labels)
Set the secondary axis labels of this ColumnChart.
chart.setMaxValue = function setMaxValue(max_value)
Set the maximal value used for scaling data_point_values columns.
chart.setDrawGrid = function setDrawGrid(enable)
Whether to draw a grid on the chart.
chart.setDrawDot = function setDrawDot(enable)
Whether to paint a square dot at each data point or not.
chart.setExtraDataPointValues = function setExtraDataPointValues(line,
values)
Set data point values of this LineColumnChart for additional lines.
chart.setExtraDataPointLabels = function setExtraDataPointLabels(line,
labels)
Set the label for each data point on an additional line of this LineColumnChart.
chart.setExtraDataPointColors = function setExtraDataPointColors(line,
colors)
Set the color of each data point on an additional line of this LineColumnChart.
chart.setPlotLineColor = function setPlotLineColor(plot_line_color)
Set the color of the line that connects each data point of this LineColumnChart.
chart.setExtraPlotLineColor = function setExtraPlotLineColor(line,
color)
Set the color of the line that connects each data point on an additional line of this LineColumnChart.
A base class for widgets that can be extended with custom functionallity that updates the state of the widget whenever a propagation occurs.
Represents sum equilibrium.
Represents max equilibrium.
Represents the normal evidence mode used for propagating evidence in this Domain.
Represents the fast retraction evidence mode used for propagating evidence in this Domain.
this.setData = function setData(data,
startIndex,
count)
Sets a region of the discrete data of this Table.
this.setDataItem = function setDataItem(index,
value)
Sets a specific data item of the discrete data of this Table.
this.getData = function getData(startIndex,
count)
Gets a region of the discrete data of this Table.
this.getDataItem = function getDataItem(index)
Get the data item at position index of the discrete data of this Table.
this.getSize = function getSize()
Get the size of this Table.
this.getNodes = function getNodes()
Get all Nodes associated with this Table.
Base class for widgets that record the pointer coordinates when user click or touch widget.
Close