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
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.
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.
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); }
HUGIN Widgets Library | 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. |
HuginWidgetManager | The HuginWidgetManager manages all widgets associated with a specific Domain. |
Functions | |
HuginWidgetManager | |
updateAllWidgets | Invokes the update function for all widgets registerred under this HuginWidgetManager. |
createTableCache | Create a new TableCache for use in widgets that support editing and displaying node table data. |
constructTextLabel | Construct a new TextLabel. |
constructBeliefLabel | Construct a new BeliefLabel. |
constructDiscreteExpectedUtilityLabel | Construct a new ExpectedUtilityLabel. |
constructExpectedUtilityLabel | Construct a new ExpectedUtilityLabel. |
constructFunctionValueLabel | Construct a new FunctionValueLabel. |
constructTableDataItemLabel | Construct a new TableDataItemLabel. |
constructImageLabel | Construct a new ImageLabel. |
constructSelectOption | Construct a new SelectOption. |
constructStateSelectOption | Construct a new StateSelectOption. |
constructTextInput | Construct a new TextInput. |
constructNumericNodeTextInput | Construct a new NumericNodeTextInput. |
constructLikelihoodTextInput | Construct a new LikelihoodTextInput. |
constructContinuousNodeTextInput | Construct a new ContinuousNodeTextInput. |
constructTableDataItemTextInput | Construct a new TableDataItemTextInput. |
constructButtonInput | Construct a new ButtonInput. |
constructButtonInitialize | Construct a new ButtonInitialize. |
constructButtonPropagate | Construct a new ButtonPropagate. |
constructBar | Construct a new Bar. |
constructBeliefBar | Construct a new BeliefBar. |
constructHistogramBar | Construct a new HistogramBar. |
constructTemporalBeliefBar | Construct a new TemporalBeliefBar. |
constructOverlayPrimitives | Construct a new OverlayPrimitives. |
constructBlockChart | Construct a new BlockChart. |
constructPieChart | Construct a new PieChart. |
constructColumnChart | Construct a new ColumnChart. |
constructLineColumnChart | Construct a new LineColumnChart. |
propagate | Invokes Domain.propagate for the Domain associated with this HuginWidgetManager. |
TableCache | A class that maintains a cache over Table data items, used by widgets that support editing and displaying node table data. |
Functions | |
getIndex | Computes the table index corresponding to a given state configuration. |
getConfiguration | Computes the state configuration corresponding to a given table index. |
normalize | Normalize the set of table data items for all node states given a parent configuration (induced through supplied index). |
commit | Commits any changes performed on the cache to the underlying Table. |
reload | Resets any changes to the cache and refreshes cached values from the underlying Table. |
setData | Sets a region of the discrete data of this TableCache. |
setDataItem | Sets a specific data item of the discrete data of this TableCache. |
getData | Gets a region of the discrete data of this TableCache. |
getDataItem | Get the data item at position index of the discrete data of this TableCache. |
getSize | Get the size of the underlying Table. |
getNodes | Get all Nodes associated with underlying Table. |
BasicWidget | The base class for all of the HUGIN widgets. |
Functions | |
addToLifecycle | Registers this BasicWidget to receive update notifiactions from the HuginWidgetManager. |
removeFromLifecycle | Un-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager. |
getDomNode | Get the DOM element corresponding to this widget. |
getCSS | Easy access to the CSS style property of the corresponding DOM element for this widget. |
CustomWidget | A base class for widgets that can be extended with custom functionallity that updates the state of the widget whenever a propagation occurs. |
Functions | |
setUpdateFunction | Register a custom update function |
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. |
Functions | |
setCallback | Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget. |
TextLabel | A TextLabel displays a string of characters on the web page. |
Functions | |
setText | Set the text to be display by this TextLabel. |
BeliefLabel | A BeliefLabel display the belief for a specific discrete Node state on the web page. |
ExpectedUtilityLabel | An ExpectedUtilityLabel display the expected utility for a specific discrete Node state, a utility Node or a Domain on the web page. |
FunctionValueLabel | A FunctionValueLabel display the value of a function Node on the web page. |
TableDataItemLabel | A TableDataItemLabel display the value found at a specific index in TableCache on the web page. |
ImageLabel | An ImageLabel displays a specific image on the web page based on a custom function |
Functions | |
showImage | display a particular image based on index. |
setWidth | force the width of the images in this ImageLabel. |
setHeight | force the height of the images in this ImageLabel. |
SelectOption | A SelectOption presents a number of selectable options on the web page. |
Functions | |
selectIndex | Change the selected option of this SelectOption. |
getSelectedIndex | Gets the index of the currently selected option |
setEnabled | Set whether this SelectOption accepts user input. |
StateSelectOption | A StateSelectOption presents a widget on the web page for selecting a state to enter as evidence for a given discrete Node. |
TextInput | A TextInput presents an editable text field on the webpage. |
Functions | |
setText | Set the contents of this TextInput. |
getText | Get the contents of this TextInput. |
setEnabled | Set whether this TextInput accepts user input. |
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. |
ContinuousNodeTextInput | A ContinuousNodeTextInput presents a widget on the web page for entering user provided value as evidence on a continuous Node. |
LikelihoodTextInput | A LikelihoodTextInput presents a widget on the web page for entering user provided value as likelihood evidence on a discrete chance Node. |
TableDataItemTextInput | A TableDataItemTextInput presents a widget on the web page for modifying the value found at a specific index in TableCache. |
ButtonInput | A ButtonInput is a simple button that can perform a custom action when clicked. |
Functions | |
setEnabled | Set whether this ButtonInput accepts user input. |
setText | Set the button text for this ButtonInput. |
ButtonInitialize | A ButtonInitialize is a button that performs a Domain.initialize operation when clicked. |
ButtonPropagate | A ButtonPropagate is a button that performs a Domain.propagate operation when clicked. |
Bar | A Bar displays a bar with the width set to some percentage of a max width. |
Functions | |
setText | Set the text to overlay the bar. |
setScale | Set the extend of the bar of this Bar. |
setBackground | Set the background color of this Bar. |
setBarcolor | Set the color of the bar of this Bar. |
setTextColor | Set the color of the overlay text of this Bar. |
setFont | Set the font and font size to use when rendering a text string. |
setEdgeColor | Set the color to use for drawing the line edge around the bar of this Bar. |
setEdgeThickness | Set the thickness in pixels of the line edge around the bar of this Bar. |
setBarCornerRadius | set the radius in pixels for rounding corners on the bar of this Bar. |
BeliefBar | A BeliefBar displays the belief as a bar for a specific discrete Node state on the web page. |
PointerListener | Base class for widgets that record the pointer coordinates when user click or touch 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. |
Functions | |
setPoints | Set the extend of the columns of this HistogramBar. |
setBackground | Set the background color of this HistogramBar. |
setPointColors | Set the individual colors of the the columns of this HistogramBar. |
setEdgeColor | Set the color to use for drawing the line edge around the bar of this HistogramBar. |
setEdgeThickness | Set the thickness in pixels of the line edge around the bar of this HistogramBar. |
setBarCornerRadius | set the radius in pixels for rounding corners on the bar of this HistogramBar. |
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. |
OverlayPrimitives | Interface for overlaying graphical primitives on a chart type widget. |
Functions | |
setGraphicPrimitives | Set a list of graphic primitives to be rendered on top of chart. |
setBackground | Set the background color of this DiscreteChart. |
DiscreteChart | The base class for discrete chart widgets. |
Functions | |
setLabels | Set the axis labels of this DiscreteChart. |
setDataPointValues | Set the data point values of this DiscreteChart. |
setDataPointLabels | Set the label for each data point of this DiscreteChart. |
setDataPointColors | Set the color of each data point of this DiscreteChart. |
setTextColor | Set the color of the text of this DiscreteChart. |
setLineColor | Set the color used for lines when drawing this DiscreteChart. |
setFont | Set the font and font size to use when rendering a text string. |
setLineWidth | Set the width in pixels used for drawing various lines. |
BlockChart | An implementation of DiscreteChart that renders a block chart |
PieChart | An implementation of DiscreteChart that renders a pie chart |
Functions | |
setScale | Scaling the size of the circle relative to the widget bounds. |
ColumnChart | An implementation of DiscreteChart that renders a column chart |
Functions | |
setLabels2 | Set the secondary axis labels of this ColumnChart. |
setMaxValue | Set the maximal value used for scaling data_point_values columns. |
setDrawGrid | Whether to draw a grid on the chart. |
LineColumnChart | An extension of of ColumnChart that renders connected points instead of columns. |
Functions | |
setDrawDot | Whether to paint a square dot at each data point or not. |
setExtraDataPointValues | Set data point values of this LineColumnChart for additional lines. |
setExtraDataPointLabels | Set the label for each data point on an additional line of this LineColumnChart. |
setExtraDataPointColors | Set the color of each data point on an additional line of this LineColumnChart. |
setPlotLineColor | Set the color of the line that connects each data point of this LineColumnChart. |
setExtraPlotLineColor | Set the color of the line that connects each data point on an additional line of this LineColumnChart. |
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.
function HuginWidgetManager( domain, options )
domain | the Domain object that we wish to interact with. |
options | an associative array of options for the HuginWidgetManager constructor (see available options). |
(* indicate default value if the option is left out)
propagate_equilibrium | equilibrium to use when propagating: HAPI.H_EQUILIBRIUM_SUM* | HAPI.H_EQUILIBRIUM_MAX |
propagate_evidence_mode | evidence mode to use when propagating: HAPI.H_EVIDENCE_MODE_NORMAL* | HAPI.H_EVIDENCE_MODE_FAST_RETRACTION |
init_compile | whether domain will initially be compiled: true* | false |
handle_error | how 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) |
a HuginWidgetManager instance for managing widgets that interact with the specified domain.
Construct a new HuginWidgetManager for a given domain ‘d’:
widMan = new HuginWidgetManager(d, {});
this.updateAllWidgets = function updateAllWidgets()
Invokes the update function for all widgets registerred under this HuginWidgetManager.
void
widMan.updateAllWidgets();
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.
table | the Table to create a cached instance of |
tc = widMan.createTableCache(t);
this.constructTextLabel = function constructTextLabel( options )
Construct a new TextLabel.
options | an associative array of options (refer to TextLabel for available options). |
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());
this.constructBeliefLabel = function constructBeliefLabel( node, state, options )
Construct a new BeliefLabel.
node | the Node of this BeliefLabel. |
state | the state index which this BeliefLabel should report beliefs for. |
options | an associative array of options (refer to BeliefLabel for available options). |
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());
this.constructDiscreteExpectedUtilityLabel = function constructDiscreteExpectedUtilityLabel( discreteNode, state, options )
Construct a new ExpectedUtilityLabel.
discreteNode | the Node of this ExpectedUtilityLabel. |
state | the state index (action) which this ExpectedUtilityLabel should report expected utility for. |
options | an associative array of options (refer to ExpectedUtilityLabel for available options). |
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());
this.constructExpectedUtilityLabel = function constructExpectedUtilityLabel( utilityNodeOrDomain, options )
Construct a new ExpectedUtilityLabel.
utilityNodeOrDomain | the utility Node or Domain of this ExpectedUtilityLabel. |
options | an associative array of options (refer to ExpectedUtilityLabel for available options). |
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());
this.constructFunctionValueLabel = function constructFunctionValueLabel( functionNode, options )
Construct a new FunctionValueLabel.
functionNode | the function Node of this FunctionValueLabel. |
options | an associative array of options (refer to FunctionValueLabel for available options). |
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());
this.constructTableDataItemLabel = function constructTableDataItemLabel( table, index, options )
Construct a new TableDataItemLabel.
table | the TableCache object, to acquire TableCache from a Table see HuginWidgetManager.createTableCache. |
index | display data item found at this index in table |
options | an associative array of options (refer to TableDataItemLabel for available options). |
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());
this.constructImageLabel = function constructImageLabel( options )
Construct a new ImageLabel.
options | an associative array of options (refer to ImageLabel for available options). |
an ImageLabel
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());
this.constructSelectOption = function constructSelectOption( options )
Construct a new SelectOption.
options | an associative array of options (refer to SelectOption for available options). |
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());
this.constructStateSelectOption = function constructStateSelectOption( node, options )
Construct a new StateSelectOption.
node | the discrete Node of this StateSelectOption widget. |
options | an associative array of options (refer to StateSelectOption for available options). |
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());
this.constructTextInput = function constructTextInput( options )
Construct a new TextInput.
options | an associative array of options (refer to TextInput for available options). |
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());
this.constructNumericNodeTextInput = function constructNumericNodeTextInput( node, options )
Construct a new NumericNodeTextInput.
node | the discrete numeric Node of this NumericNodeTextInput widget. |
options | an associative array of options (refer to NumericNodeTextInput for available options). |
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());
this.constructLikelihoodTextInput = function constructLikelihoodTextInput( node, state, options )
Construct a new LikelihoodTextInput.
node | the discrete chance Node of this LikelihoodTextInput widget. |
state | the state indexs pecific specific to this LikelihoodTextInput widget. |
options | an associative array of options (refer to LikelihoodTextInput for available options). |
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());
this.constructContinuousNodeTextInput = function constructContinuousNodeTextInput( node, options )
Construct a new ContinuousNodeTextInput.
node | the continuous Node of this ContinuousNodeTextInput widget. |
options | an associative array of options (refer to ContinuousNodeTextInput for available options). |
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());
this.constructTableDataItemTextInput = function constructTableDataItemTextInput( table, index, options )
Construct a new TableDataItemTextInput.
table | the TableCache object, to acquire TableCache from a Table see HuginWidgetManager.createTableCache. |
index | display data item found at this index in table |
options | an associative array of options (refer to TableDataItemLabel for available options). |
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());
this.constructButtonInput = function constructButtonInput( options )
Construct a new ButtonInput.
options | an associative array of options (refer to ButtonInput for available options). |
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());
this.constructButtonInitialize = function constructButtonInitialize( options )
Construct a new ButtonInitialize.
options | an associative array of options (refer to ButtonInitialize for available options). |
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());
this.constructButtonPropagate = function constructButtonPropagate( options )
Construct a new ButtonPropagate.
options | an associative array of options (refer to ButtonPropagate for available options). |
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());
this.constructBar = function constructBar( options )
Construct a new Bar.
options | an associative array of options (refer to Bar for available options). |
a Bar
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());
this.constructBeliefBar = function constructBeliefBar( node, state, options )
Construct a new BeliefBar.
node | the Node of this BeliefBar. |
state | the state index which this BeliefBar should report beliefs for. |
options | an associative array of options (refer to BeliefBar for available options). |
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());
this.constructHistogramBar = function constructHistogramBar( options )
Construct a new HistogramBar.
options | an associative array of options (refer to HistogramBar for available options). |
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());
this.constructTemporalBeliefBar = function constructBeliefBar( node, state, count, options )
Construct a new TemporalBeliefBar.
node | the Node of this BeliefBar. |
state | the state index which this BeliefBar should report beliefs for. |
count | the total number of timeslices to display |
options | an associative array of options (refer to TemporalBeliefBar for available options). |
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());
this.constructOverlayPrimitives = function constructOverlayPrimitives( options )
Construct a new OverlayPrimitives.
options | an associative array of options (refer to OverlayPrimitives for description and available options). |
this.constructBlockChart = function constructBlockChart( options )
Construct a new BlockChart.
options | an associative array of options (refer to BlockChart and DiscreteChart for description and available options). |
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());
this.constructPieChart = function constructPieChart( options )
Construct a new PieChart.
options | an associative array of options (refer to PieChart and DiscreteChart for description and available options). |
a PieChart
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());
this.constructColumnChart = function constructColumnChart( options )
Construct a new ColumnChart.
options | an associative array of options (refer to ColumnChart and DiscreteChart for description and available options). |
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());
this.constructLineColumnChart = function constructLineColumnChart( options )
Construct a new LineColumnChart.
options | an associative array of options (refer to LineColumnChart, ColumnChart and DiscreteChart for description and available options). |
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());
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.
void
widMan.propagate();
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.
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.
Functions | |
getIndex | Computes the table index corresponding to a given state configuration. |
getConfiguration | Computes the state configuration corresponding to a given table index. |
normalize | Normalize the set of table data items for all node states given a parent configuration (induced through supplied index). |
commit | Commits any changes performed on the cache to the underlying Table. |
reload | Resets any changes to the cache and refreshes cached values from the underlying Table. |
setData | Sets a region of the discrete data of this TableCache. |
setDataItem | Sets a specific data item of the discrete data of this TableCache. |
getData | Gets a region of the discrete data of this TableCache. |
getDataItem | Get the data item at position index of the discrete data of this TableCache. |
getSize | Get the size of the underlying Table. |
getNodes | Get all Nodes associated with underlying Table. |
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).
configuration | array of node state indices |
corresponding table index (an integer)
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.
index | table index (an integer) |
configuration | (optional parameter) an array, on return it is filled with computed node state indices for configuration corresponding to table index |
array filled with computed node state indices for configuration corresponding to 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). Note: only invoke on discrete node conditional probabillity tables, result is undefined if invoked on experience or utility node tables.
index | a table index indicating some parent configuration (an integer) |
void
this.commit = function()
Commits any changes performed on the cache to the underlying Table.
void
t.commit();
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.
void
t.reload();
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.
data | array of real numbers holding the data to copy to this table |
startIndex | index of the first element to be set |
count | number of elements to copy |
void
this.setDataItem = function( index, value )
Sets a specific data item of the discrete data of this TableCache. Note: Use TableCache.commit for committing changes to underlying Table object.
See also Table.setDataItem.
index | index of the data item to set |
value | real number; the new value of the data item at the specified index. |
void
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.
startIndex | index of the first element to get |
count | number of elemets to retrieve |
Requested region of data items as an array of real numbers
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.
index | the index of the data item |
A real number; the data item at requested index.
this.getSize = function()
Get the size of the underlying Table.
See also Table.getSize.
size of underlying Table.
this.getNodes = function()
Get all Nodes associated with underlying Table.
See also Table.getNodes.
The base class for all of the HUGIN widgets.
Functions | |
addToLifecycle | Registers this BasicWidget to receive update notifiactions from the HuginWidgetManager. |
removeFromLifecycle | Un-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager. |
getDomNode | Get the DOM element corresponding to this widget. |
getCSS | Easy access to the CSS style property of the corresponding DOM element for this widget. |
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.
void
wid.addToLifecycle();
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.
void
wid.removeFromLifecycle();
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
a DOM element
domNode = wid.getDomNode();
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.
object that represents the corresponding DOM element’s style attribute.
myStyle = txt.getCSS(); myStyle.color = "blue";
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.
Functions | |
setUpdateFunction | Register a custom update function |
owner.setUpdateFunction = function setUpdateFunction( updateFunction )
Register a custom update function
void
.. 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();
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.
Functions | |
setCallback | Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget. |
owner.setCallback = function setCallback( callbackFunction )
Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget.
callbackFunction | the function |
void
W.setCallback(function() { //body of custom function //.. });
A TextLabel displays a string of characters on the web page.
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.
text | specify initial text as a string, if left out the value defaults to the string “< TextLabel >”. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
A BeliefLabel display the belief for a specific discrete Node state on the web page.
Use BeliefLabels for displaying beliefs for discrete Nodes.
(* indicate default value if the option is left out)
display | display normal belief (0-1) or as percent (0-100): “percent”* | “belief” |
digits | displayed value is rounded to specific number of digits: 2* |
depends | an 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. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
An ExpectedUtilityLabel display the expected utility for a specific discrete Node state, a utility Node or a Domain on the web page.
Use ExpectedUtilityLabels for displaying expected utilities for discrete Nodes, utility Nodes and Domains.
(* indicate default value if the option is left out)
digits | displayed value is rounded to specific number of digits: 2* |
depends | an 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. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
A FunctionValueLabel display the value of a function Node on the web page.
Use FunctionValueLabel for displaying value of function Nodes.
(* indicate default value if the option is left out)
digits | displayed value is rounded to specific number of digits: 2* |
display | display function value normally or as a percentage (value*100): “normal”* | “percent” |
depends | an 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. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
A TableDataItemLabel display the value found at a specific index in TableCache on the web page.
Use TableDataItemLabel for displaying table data.
(* indicate default value if the option is left out)
digits | displayed value is rounded to specific number of digits (but trailing zeros discarded): 4* |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
An ImageLabel displays a specific image on the web page based on a custom function
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.
images | an array of strings that contain URLs to image (e.g. images: [ “http://mydomain/img0.png”, “http://mydomain/img1.png” ] ). |
showimg | the index of the image to be initially displayed (index range is 0 to number of images-1, default value is 0). |
width | force 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. |
width | force 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. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
Functions | |
showImage | display a particular image based on index. |
setWidth | force the width of the images in this ImageLabel. |
setHeight | force the height of the images in this ImageLabel. |
this.showImage = function showImage( imageNumber )
display a particular image based on index.
imageNumber | index of the image from the images option array to display (range is 0-number of images). |
void
imgLbl.showImage(0);
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.
width | the width in pixels to force upon the images of this ImageLabel. |
void
imgLbl.setWidth(50);
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.
height | the height in pixels to force upon the images of this ImageLabel. |
void
imgLbl.setHeight(50);
A SelectOption presents a number of selectable options on the web page.
BasicWidget, CustomWidget, ActionWidget
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.
(* indicate default value if the option is left out)
labels | an array of strings that represent the set of selectable options (e.g. labels: [ “option 1”, “option 2”, “option 3” ] ). |
initselection | the index of the option to be initially selected (index range is 0 to number of options-1, default value is 0). |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
option_type | drop down list or horizontal/vertical radio buttons: “dropdown”* | “hradio” | “vradio” |
Functions | |
selectIndex | Change the selected option of this SelectOption. |
getSelectedIndex | Gets the index of the currently selected option |
setEnabled | Set whether this SelectOption accepts user input. |
this.selectIndex = function selectIndex( index )
Change the selected option of this SelectOption.
index | the index of the selected option (range is 0 to number of options-1) |
void
sel.selectIndex(2);
this.getSelectedIndex = function getSelectedIndex()
Gets the index of the currently selected option
the selected index (range is 0 to number of options-1)
index = sel.getSelectedIndex();
this.setEnabled = function setEnabled( enable )
Set whether this SelectOption accepts user input.
enable | boolean value. true enables the the widget to accept input, false disables the widget. |
void
sel.setEnabled(false);
A StateSelectOption presents a widget on the web page for selecting a state to enter as evidence for a given discrete Node.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
option_type | drop down list or horizontal/vertical radio buttons: “dropdown”* | “hradio” | “vradio” |
labels | an 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_selection | the default value as a string to display when no state has been selected: “-- select --”* |
depends | an 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. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when the selection is changed: true* | false |
A TextInput presents an editable text field on the webpage.
BasicWidget, CustomWidget, ActionWidget
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.
(* indicate default value if the option is left out)
text | the initial contents of the TextInput field, if left out the default value is “”. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
deferaction | defer widget action while input is being entered, timeout after specified number of milliseconds: 0* |
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.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
depends | an 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. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when the selection is changed: true* | false |
deferaction | defer widget action while input is being entered, timeout after specified number of milliseconds: 0* |
A ContinuousNodeTextInput presents a widget on the web page for entering user provided value as evidence on a continuous Node.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
depends | an 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. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when the selection is changed: true* | false |
deferaction | defer widget action while input is being entered, timeout after specified number of milliseconds: 0* |
A LikelihoodTextInput presents a widget on the web page for entering user provided value as likelihood evidence on a discrete chance Node.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
depends | an 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. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when a value is entered: true* | false |
deferaction | defer widget action while input is being entered, timeout after specified number of milliseconds: 0* |
A TableDataItemTextInput presents a widget on the web page for modifying the value found at a specific index in TableCache.
Use TableDataItemTextInput to let the user edit a node table data entry by means of a text field.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
min | the minimum value to accept as input: 0* |
max | the maximum value to accept as input: 1* |
digits | value is rounded to specific number of digits (but trailing zeros discarded), set to positive number to enable: 0* |
A ButtonInput is a simple button that can perform a custom action when clicked.
BasicWidget, CustomWidget, ActionWidget
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.
text | specify button text as a string, if left out the value defaults to the string “< ButtonInput >”. |
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
Functions | |
setEnabled | Set whether this ButtonInput accepts user input. |
setText | Set the button text for this ButtonInput. |
this.setEnabled = function setEnabled( enable )
Set whether this ButtonInput accepts user input.
enable | boolean value. true enables the the widget to accept input, false disables the widget. |
void
btn.setEnabled(false);
this.setText = function setText( text )
Set the button text for this ButtonInput.
text | the text string to be displayed. |
void
btn.setText("my button");
A ButtonInitialize is a button that performs a Domain.initialize operation when clicked.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
text | specify button text as a string, if left out the value defaults to the string “Reset”. |
depends | an 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. |
A ButtonPropagate is a button that performs a Domain.propagate operation when clicked.
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.
(* indicate default value if the option is left out)
style | specify any CSS styles to apply as a string, if left out the value defaults to empty string. |
text | specify button text as a string, if left out the value defaults to the string “Reset”. |
depends | an 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. |
A Bar displays a bar with the width set to some percentage of a max width.
BasicWidget, CustomWidget, ActionWidget
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.
(* indicate default value if option is left out)
orientation | specify the bar orientation, 0*=left-to-right, 1=right-to-left, 2=top-to-bottom, 3=bottom-to-top. |
width | an integer, specify the width of the bar in pixels: 100* |
height | an integer, specify the height of the bar: 25* |
scale | floating point number, specify the initial extend of the bar [0-1]: 0.5* |
text | specify an optional text to overlay at the bar center, if left out the value defaults to an empty string “”* |
background | the background color, “transparent”* |
bar_color | the color to use for drawing the bar, “skyblue”* |
text_color | the color to use for rendering a text string, “black”* |
font | a string, specify the font and font size to use when rendering a text string: “10px sans-serif”* |
edge_color | the color to use for drawing the line edge around the bar “black”* |
edge_thickness | a number, the thickness in pixels of the line edge around the bar: 1* |
bar_corner_radius | the radius in pixels for rounding corners on the bar: 5* |
Functions | |
setText | Set the text to overlay the bar. |
setScale | Set the extend of the bar of this Bar. |
setBackground | Set the background color of this Bar. |
setBarcolor | Set the color of the bar of this Bar. |
setTextColor | Set the color of the overlay text of this Bar. |
setFont | Set the font and font size to use when rendering a text string. |
setEdgeColor | Set the color to use for drawing the line edge around the bar of this Bar. |
setEdgeThickness | Set the thickness in pixels of the line edge around the bar of this Bar. |
setBarCornerRadius | set the radius in pixels for rounding corners on the bar of this Bar. |
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.
text | the text string to overlay. |
void
b.setText("my text");
this.setFont = function setFont( font )
Set the font and font size to use when rendering a text string.
font | a string, the font and font size to use when rendering a text string |
void
b.setFont("bold 12px sans-serif");
this.setEdgeThickness = function setEdgeThickness( edge_thickness )
Set the thickness in pixels of the line edge around the bar of this Bar.
edge_thickness | a number, the thickness in pixels of the line edge around the bar |
void
b.setEdgeThickness(3);
this.setBarCornerRadius = function setBarCornerRadius( bar_corner_radius )
set the radius in pixels for rounding corners on the bar of this Bar.
bar_corner_radius | the radius in pixels for rounding corners on the bar |
void
b.setBarCornerRadius(3);
A BeliefBar displays the belief as a bar for a specific discrete Node state on the web page.
Use the BeliefBar for displaying beliefs in bar style for discrete Nodes.
(* indicate default value if option is left out)
display | overlay value label displaying normal belief (0-1), as percent (0-100) or no label: “percent”* | “belief” | “none” |
digits | displayed value is rounded to specific number of digits: 2* |
depends | an 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_click | boolean value. If true* evidence is entered or retracted when the widget receives a mouse click, if false mouse clicks are ignored. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when evidence is entered/retracted: true* | false |
orientation | specify the bar orientation, 0*=left-to-right, 1=right-to-left, 2=top-to-bottom, 3=bottom-to-top. |
width | an integer, specify the width of the bar in pixels: 100* |
height | an integer, specify the height of the bar: 25* |
background | the background color, “transparent”* |
bar_color | the color to use for drawing the belief bar, “green”* |
bar_color_finding | the color to use for drawing the belief bar when evidence has been entered, “red”* |
bar_color_inconsistent | the color to use for drawing the belief bar when domain is in an inconsistent state, “grey”* |
text_color | the color to use for rendering a text string, “black”* |
font | a string, specify the font and font size to use when rendering a text string: “10px sans-serif”* |
edge_color | the color to use for drawing the line edge around the bar “black”* |
edge_thickness | a number, the thickness in pixels of the line edge around the bar: 1* |
bar_corner_radius | the radius in pixels for rounding corners on the bar: 5* |
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.
(* indicate default value if option is left out)
update_on_mouse_movement | boolean value. if true invoke the update function (set by CustomWidget.setUpdateFunction) when mouse movement is detected over widget: false* |
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. |
A HistogramBar displays a histogram over a set of numeric data points as a bar-like widget.
BasicWidget, CustomWidget, ActionWidget
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.
(* indicate default value if option is left out)
width | an integer, specify the width of the bar in pixels: 100* |
height | an integer, specify the height of the bar: 25* |
histogram_style | a string, specify the style of the histogram columns (“column” or “line”): “column”* |
points | an 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_colors | an array of colors to use for drawing the columns, [“skyblue”, “skyblue”, “skyblue”]* |
indent | an integer, specify the amount of blank space (in units of histogram column widths) inserted before set of histogram columns: 0* |
background | the background color, “transparent”* |
line_color | the color to use for drawing the histogram “black”* |
line_thickness | a number, the thickness in pixels of the line used for drawing the histogram: 1* |
edge_color | the color to use for drawing the line edge around the sourrounding bar “black”* |
edge_thickness | a number, the thickness in pixels of the line edge around the sourrounding bar: 1* |
bar_corner_radius | the radius in pixels for rounding corners on the sourrounding bar: 0* |
Functions | |
setPoints | Set the extend of the columns of this HistogramBar. |
setBackground | Set the background color of this HistogramBar. |
setPointColors | Set the individual colors of the the columns of this HistogramBar. |
setEdgeColor | Set the color to use for drawing the line edge around the bar of this HistogramBar. |
setEdgeThickness | Set the thickness in pixels of the line edge around the bar of this HistogramBar. |
setBarCornerRadius | set the radius in pixels for rounding corners on the bar of this HistogramBar. |
Properties | |
actionColumn | The column targeted during latest user click. |
this.setPoints = function setPoints( points )
Set the extend of the columns of this HistogramBar.
points | an array of floating point numbers |
void
b.setPoints([0.8, 0.8, 0.8]);
this.setBackground = function setBackground( background )
Set the background color of this HistogramBar.
background | the background color |
void
b.setBackground("#FFA500");
this.setPointColors = function setPointColors( colors )
Set the individual colors of the the columns of this HistogramBar.
colors | an array of colors to use for drawing the columns |
void
b.setPointColors("#FFA500");
this.setEdgeColor = function setEdgeColor( edge_color )
Set the color to use for drawing the line edge around the bar of this HistogramBar.
edge_color | the color to use for drawing the line edge around the bar |
void
b.setEdgeColor("#FFA500");
this.setEdgeThickness = function setEdgeThickness( edge_thickness )
Set the thickness in pixels of the line edge around the bar of this HistogramBar.
edge_thickness | a number, the thickness in pixels of the line edge around the bar |
void
b.setEdgeThickness(3);
this.setBarCornerRadius = function setBarCornerRadius( bar_corner_radius )
set the radius in pixels for rounding corners on the bar of this HistogramBar.
bar_corner_radius | the radius in pixels for rounding corners on the bar |
void
b.setBarCornerRadius(3);
A TemporalBeliefBar displays the beliefs in a number of DBN time slices for a specific discrete Node state on the web page.
Use the TemporalBeliefBar for displaying beliefs in histogram bar style for discrete Nodes in DBNs.
(* indicate default value if option is left out)
depends | an 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_click | boolean value. If true* evidence is entered or retracted when the widget receives a mouse click, if false mouse clicks are ignored. |
retract | an 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. |
autopropagate | indicate if a propagation should automatically be performed when evidence is entered/retracted: true* | false |
width | an integer, specify the width of the bar in pixels: 100* |
height | an integer, specify the height of the bar: 25* |
histogram_style | a string, specify the style of the histogram columns (“column” or “line”): “column”* |
indent | an integer, specify the amount of blank space (in units of histogram column widths) inserted before set of histogram columns: 0* |
background | the background color, “transparent”* |
bar_color | the color to use for drawing the belief bar, “green”* |
bar_color_finding | the color to use for drawing the belief bar when evidence has been entered, “red”* |
bar_color_inconsistent | the color to use for drawing the belief bar when domain is in an inconsistent state, “grey”* |
line_color | the color to use for drawing the histogram “black”* |
line_thickness | a number, the thickness in pixels of the line used for drawing the histogram: 1* |
edge_color | the color to use for drawing the line edge around the sourrounding bar “black”* |
edge_thickness | a number, the thickness in pixels of the line edge around the sourrounding bar: 1* |
bar_corner_radius | the radius in pixels for rounding corners on the sourrounding bar: 0* |
Interface for overlaying graphical primitives on a chart type widget.
BasicWidget, CustomWidget, PointerListener, ActionWidget
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.
(* indicate default value if option is left out)
width | an integer the chart width in pixels: 200* |
height | an integer the chart height in pixels: 200* |
background | the background color, “transparent”* |
graphic_primitives | an array of graphic primitive descriptions to be rendered: []* |
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" };
Functions | |
setGraphicPrimitives | Set a list of graphic primitives to be rendered on top of chart. |
setBackground | Set the background color of this DiscreteChart. |
chart.setGraphicPrimitives = function setGraphicPrimitives( graphic_primitives )
Set a list of graphic primitives to be rendered on top of chart.
graphic_primitives | an array of graphic primitive descriptions to be rendered |
void
//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] );
chart.setBackground = function setBackground( background )
Set the background color of this DiscreteChart.
background | the background color |
void
chart.setBackground("#FFA500");
The base class for discrete chart widgets. See ColumnChart.
Use charts for rendering a set og data points for display. Various chart formats are supported, see DiscreteChart, BlockChart, PieChart, ColumnChart, LineColumnChart.
(* indicate default value if option is left out)
borderspacing | an 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}* |
labels | axis labels, an array of strings: []* |
data_point_values | values for each data point, an array of positive numbers: []* |
data_point_labels | label for each data point, an array of strings: []* |
data_point_colors | the color of each data point, an array of strings representing color values: []* |
text_color | the color to use for rendering a text string, “black”* |
line_color | the color to use when painting lines, “black”* |
font | a string, specify the font and font size to use when rendering a text string: “10px sans-serif”* |
line_width | a number, the width in pixels used for drawing various lines: 1* |
Functions | |
setLabels | Set the axis labels of this DiscreteChart. |
setDataPointValues | Set the data point values of this DiscreteChart. |
setDataPointLabels | Set the label for each data point of this DiscreteChart. |
setDataPointColors | Set the color of each data point of this DiscreteChart. |
setTextColor | Set the color of the text of this DiscreteChart. |
setLineColor | Set the color used for lines when drawing this DiscreteChart. |
setFont | Set the font and font size to use when rendering a text string. |
setLineWidth | Set the width in pixels used for drawing various lines. |
chart.setLabels = function setLabels( labels )
Set the axis labels of this DiscreteChart.
labels | the labels, an array of strings. |
void
chart.setLabels(["small", "medium", "large"]);
chart.setDataPointValues = function setDataPointValues( values )
Set the data point values of this DiscreteChart.
values | the values, an array of positive numbers. |
void
chart.setDataPointValues([0.1, 0.2, 0.9]);
chart.setDataPointLabels = function setDataPointLabels( labels )
Set the label for each data point of this DiscreteChart.
labels | the labels, an array of strings. |
void
chart.setDataPointLabels(["point #1", "point #2", "point #3"]);
chart.setDataPointColors = function setDataPointColors( colors )
Set the color of each data point of this DiscreteChart.
colors | the colors, an array of strings representing color values. |
void
chart.setDataPointColors(["#FF00001", "#00FF00", "#0000FF"]);
chart.setTextColor = function setTextColor( text_color )
Set the color of the text of this DiscreteChart.
text_color | the text color |
void
chart.setTextColor("#FFA500");
chart.setLineColor = function setLineColor( line_color )
Set the color used for lines when drawing this DiscreteChart.
line_color | the line color |
void
chart.setLineColor("#FFA500");
chart.setFont = function setFont( font )
Set the font and font size to use when rendering a text string.
font | a string, the font and font size to use when rendering a text string |
void
chart.setFont("bold 12px sans-serif");
chart.setLineWidth = function setLineWidth( line_width )
Set the width in pixels used for drawing various lines.
line_width | a number |
void
chart.setLineWidth(3);
An implementation of DiscreteChart that renders a block chart
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.
(* indicate default value if option is left out)
orientation | specify chart orientation, 0*=horizontal layout, 1=vertical layout |
An implementation of DiscreteChart that renders a pie chart
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.
(* indicate default value if option is left out)
scale | a number between [0-1], for scaling the size of the circle relative to the widget bounds: *1 |
chart.setScale = function setScale( scale )
Scaling the size of the circle relative to the widget bounds.
scale | a number between [0-1] |
void
chart.setScale(0.8);
An implementation of DiscreteChart that renders a column chart
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.
(* indicate default value if option is left out)
orientation | specify chart orientation, 0*=vertical columns, 1=horizontal columns |
labels2 | secondary axis labels, an array of strings: []* |
max_value | the maximal value, a positive number. (Used for scaling chart and column height): 0*. |
draw_grid | a boolean, draw a grid on the chart: false* |
Functions | |
setLabels2 | Set the secondary axis labels of this ColumnChart. |
setMaxValue | Set the maximal value used for scaling data_point_values columns. |
setDrawGrid | Whether to draw a grid on the chart. |
chart.setLabels2 = function setLabels2( labels )
Set the secondary axis labels of this ColumnChart.
labels2 | the labels, an array of strings. |
void
chart.setLabels2(["small", "medium", "large"]);
chart.setMaxValue = function setMaxValue( max_value )
Set the maximal value used for scaling data_point_values columns.
max_value | the maximal value, a positive number. |
void
chart.setMaxValue(10);
chart.setDrawGrid = function setDrawGrid( enable )
Whether to draw a grid on the chart.
enable | a boolean |
void
chart.setDrawGrid(true);
An extension of of ColumnChart that renders connected points instead of columns.
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.
Note: The ‘orientation’ parameter inherited from ColumnChart is ignored in LineColumnCharts.
(* indicate default value if option is left out)
draw_dot | whether to paint a square dot at each data point or not, a boolean value: true* or false |
extra_data_point_values | data 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_labels | label for each data point on additional lines, array of arrays of strings (e.g. [ [“A”, “B”, “C”], [“1”, “2”, “3”] ]): [ [] ]* |
extra_data_point_colors | the 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_color | color of the line that connects each data point *”black” |
extra_plot_line_color | color of the line that connects each data point of additional lines, array of colors (e.g. [“yellow”, “green”, “blue”] ). |
Functions | |
setDrawDot | Whether to paint a square dot at each data point or not. |
setExtraDataPointValues | Set data point values of this LineColumnChart for additional lines. |
setExtraDataPointLabels | Set the label for each data point on an additional line of this LineColumnChart. |
setExtraDataPointColors | Set the color of each data point on an additional line of this LineColumnChart. |
setPlotLineColor | Set the color of the line that connects each data point of this LineColumnChart. |
setExtraPlotLineColor | Set the color of the line that connects each data point on an additional line of this LineColumnChart. |
chart.setDrawDot = function setDrawDot( enable )
Whether to paint a square dot at each data point or not.
enable | a boolean |
void
chart.setDrawDot(true);
chart.setExtraDataPointValues = function setExtraDataPointValues( line, values )
Set data point values of this LineColumnChart for additional lines.
line | a positive integer |
values | the values, an array of positive numbers. |
void
chart.setExtraDataPointValues(0, [0.1, 0.2, 0.9]);
chart.setExtraDataPointLabels = function setExtraDataPointLabels( line, labels )
Set the label for each data point on an additional line of this LineColumnChart.
line | a positive integer |
labels | the labels, an array of strings. |
void
chart.setExtraDataPointLabels(0, ["point #1", "point #2", "point #3"]);
chart.setExtraDataPointColors = function setExtraDataPointColors( line, colors )
Set the color of each data point on an additional line of this LineColumnChart.
line | a positive integer |
colors | the colors, an array of strings representing color values. |
void
chart.setExtraDataPointColors(0, ["#FF00001", "#00FF00", "#0000FF"]);
chart.setPlotLineColor = function setPlotLineColor( plot_line_color )
Set the color of the line that connects each data point of this LineColumnChart.
plot_line_color | color of the line that connects each data point |
void
chart.setPlotLineColor("#FFA500");
chart.setExtraPlotLineColor = function setExtraPlotLineColor( line, color )
Set the color of the line that connects each data point on an additional line of this LineColumnChart.
line | a positive integer |
color | the color |
void
chart.setExtraPlotLineColor(0, "#FF00001");
function HuginWidgetManager( domain, options )
Invokes the update function for all widgets registerred under this HuginWidgetManager.
this.updateAllWidgets = function updateAllWidgets()
Create a new TableCache for use in widgets that support editing and displaying node table data.
this.createTableCache = function createTableCache( table )
Construct a new TextLabel.
this.constructTextLabel = function constructTextLabel( options )
Construct a new BeliefLabel.
this.constructBeliefLabel = function constructBeliefLabel( node, state, options )
Construct a new ExpectedUtilityLabel.
this.constructDiscreteExpectedUtilityLabel = function constructDiscreteExpectedUtilityLabel( discreteNode, state, options )
Construct a new ExpectedUtilityLabel.
this.constructExpectedUtilityLabel = function constructExpectedUtilityLabel( utilityNodeOrDomain, options )
Construct a new FunctionValueLabel.
this.constructFunctionValueLabel = function constructFunctionValueLabel( functionNode, options )
Construct a new TableDataItemLabel.
this.constructTableDataItemLabel = function constructTableDataItemLabel( table, index, options )
Construct a new ImageLabel.
this.constructImageLabel = function constructImageLabel( options )
Construct a new SelectOption.
this.constructSelectOption = function constructSelectOption( options )
Construct a new StateSelectOption.
this.constructStateSelectOption = function constructStateSelectOption( node, options )
Construct a new TextInput.
this.constructTextInput = function constructTextInput( options )
Construct a new NumericNodeTextInput.
this.constructNumericNodeTextInput = function constructNumericNodeTextInput( node, options )
Construct a new LikelihoodTextInput.
this.constructLikelihoodTextInput = function constructLikelihoodTextInput( node, state, options )
Construct a new ContinuousNodeTextInput.
this.constructContinuousNodeTextInput = function constructContinuousNodeTextInput( node, options )
Construct a new TableDataItemTextInput.
this.constructTableDataItemTextInput = function constructTableDataItemTextInput( table, index, options )
Construct a new ButtonInput.
this.constructButtonInput = function constructButtonInput( options )
Construct a new ButtonInitialize.
this.constructButtonInitialize = function constructButtonInitialize( options )
Construct a new ButtonPropagate.
this.constructButtonPropagate = function constructButtonPropagate( options )
Construct a new Bar.
this.constructBar = function constructBar( options )
Construct a new BeliefBar.
this.constructBeliefBar = function constructBeliefBar( node, state, options )
Construct a new HistogramBar.
this.constructHistogramBar = function constructHistogramBar( options )
Construct a new TemporalBeliefBar.
this.constructTemporalBeliefBar = function constructBeliefBar( node, state, count, options )
Construct a new OverlayPrimitives.
this.constructOverlayPrimitives = function constructOverlayPrimitives( options )
Construct a new BlockChart.
this.constructBlockChart = function constructBlockChart( options )
Construct a new PieChart.
this.constructPieChart = function constructPieChart( options )
Construct a new ColumnChart.
this.constructColumnChart = function constructColumnChart( options )
Construct a new LineColumnChart.
this.constructLineColumnChart = function constructLineColumnChart( options )
Invokes Domain.propagate for the Domain associated with this HuginWidgetManager.
this.propagate = function propagate()
Establishes the specified equilibrium using the evidence mode indicated for incorporation of evidence on all JunctionTrees of this Domain.
this.propagate = function propagate( equilibrium, evidenceMode )
Computes the table index corresponding to a given state configuration.
this.getIndex = function( configuration )
Computes the state configuration corresponding to a given table index.
this.getConfiguration = function( index, configuration )
Normalize the set of table data items for all node states given a parent configuration (induced through supplied index).
this.normalize = function( index )
Commits any changes performed on the cache to the underlying Table.
this.commit = function()
Resets any changes to the cache and refreshes cached values from the underlying Table.
this.reload = function()
Sets a region of the discrete data of this TableCache.
this.setData = function( data, startIndex, count )
Sets a specific data item of the discrete data of this TableCache.
this.setDataItem = function( index, value )
Gets a region of the discrete data of this TableCache.
this.getData = function( startIndex, count )
Get the data item at position index of the discrete data of this TableCache.
this.getDataItem = function( index )
Get the size of the underlying Table.
this.getSize = function()
Get all Nodes associated with underlying Table.
this.getNodes = function()
Registers this BasicWidget to receive update notifiactions from the HuginWidgetManager.
owner.addToLifecycle = function addToLifecycle()
Un-register this BasicWidget from recieving any update notifiactions from the HuginWidgetManager.
owner.removeFromLifecycle = function removeFromLifecycle()
Get the DOM element corresponding to this widget.
owner.getDomNode = function getDomNode()
Easy access to the CSS style property of the corresponding DOM element for 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)
Register a custom update function
owner.setUpdateFunction = function setUpdateFunction( updateFunction )
Supply a custom function that is invoked each time the user performs an action on the widget ActionWidget.
owner.setCallback = function setCallback( callbackFunction )
Set the text to be display by this TextLabel.
this.setText = function setText( text )
display a particular image based on index.
this.showImage = function showImage( imageNumber )
force the width of the images in this ImageLabel.
this.setWidth = function setWidth( width )
force the height of the images in this ImageLabel.
this.setHeight = function setHeight( height )
Change the selected option of this SelectOption.
this.selectIndex = function selectIndex( index )
Gets the index of the currently selected option
this.getSelectedIndex = function getSelectedIndex()
Set whether this SelectOption accepts user input.
this.setEnabled = function setEnabled( enable )
Set the contents of this TextInput.
this.setText = function setText( text )
Get the contents of this TextInput.
this.getText = function getText()
Set whether this TextInput accepts user input.
this.setEnabled = function setEnabled( enable )
Set whether this ButtonInput accepts user input.
this.setEnabled = function setEnabled( enable )
Set the button text for this ButtonInput.
this.setText = function setText( text )
Establishes the initial values for all tables of this Domain (which must be compiled).
this.initialize = function initialize()
Set the text to overlay the bar.
this.setText = function setText( text )
Set the extend of the bar of this Bar.
this.setScale = function setScale( scale )
Set the background color of this Bar.
this.setBackground = function setBackground( background )
Set the color of the overlay text of this Bar.
this.setTextColor = function setTextColor( text_color )
Set the font and font size to use when rendering a text string.
this.setFont = function setFont( font )
Set the color to use for drawing the line edge around the bar of this Bar.
this.setEdgeColor = function setEdgeColor( edge_color )
Set the thickness in pixels of the line edge around the bar of this Bar.
this.setEdgeThickness = function setEdgeThickness( edge_thickness )
set the radius in pixels for rounding corners on the bar of this Bar.
this.setBarCornerRadius = function setBarCornerRadius( bar_corner_radius )
Set the extend of the columns of this HistogramBar.
this.setPoints = function setPoints( points )
Set the background color of this HistogramBar.
this.setBackground = function setBackground( background )
Set the individual colors of the the columns of this HistogramBar.
this.setPointColors = function setPointColors( colors )
Set the color to use for drawing the line edge around the bar of this HistogramBar.
this.setEdgeColor = function setEdgeColor( edge_color )
Set the thickness in pixels of the line edge around the bar of this HistogramBar.
this.setEdgeThickness = function setEdgeThickness( edge_thickness )
set the radius in pixels for rounding corners on the bar of this HistogramBar.
this.setBarCornerRadius = function setBarCornerRadius( bar_corner_radius )
Set a list of graphic primitives to be rendered on top of chart.
chart.setGraphicPrimitives = function setGraphicPrimitives( graphic_primitives )
Set the background color of this DiscreteChart.
chart.setBackground = function setBackground( background )
Set the axis labels of this DiscreteChart.
chart.setLabels = function setLabels( labels )
Set the data point values of this DiscreteChart.
chart.setDataPointValues = function setDataPointValues( values )
Set the label for each data point of this DiscreteChart.
chart.setDataPointLabels = function setDataPointLabels( labels )
Set the color of each data point of this DiscreteChart.
chart.setDataPointColors = function setDataPointColors( colors )
Set the color of the text of this DiscreteChart.
chart.setTextColor = function setTextColor( text_color )
Set the color used for lines when drawing this DiscreteChart.
chart.setLineColor = function setLineColor( line_color )
Set the font and font size to use when rendering a text string.
chart.setFont = function setFont( font )
Set the width in pixels used for drawing various lines.
chart.setLineWidth = function setLineWidth( line_width )
Scaling the size of the circle relative to the widget bounds.
chart.setScale = function setScale( scale )
Set the secondary axis labels of this ColumnChart.
chart.setLabels2 = function setLabels2( labels )
Set the maximal value used for scaling data_point_values columns.
chart.setMaxValue = function setMaxValue( max_value )
Whether to draw a grid on the chart.
chart.setDrawGrid = function setDrawGrid( enable )
Whether to paint a square dot at each data point or not.
chart.setDrawDot = function setDrawDot( enable )
Set data point values of this LineColumnChart for additional lines.
chart.setExtraDataPointValues = function setExtraDataPointValues( line, values )
Set the label for each data point on an additional line of this LineColumnChart.
chart.setExtraDataPointLabels = function setExtraDataPointLabels( line, labels )
Set the color of each data point on an additional line of this LineColumnChart.
chart.setExtraDataPointColors = function setExtraDataPointColors( line, colors )
Set the color of the line that connects each data point of this LineColumnChart.
chart.setPlotLineColor = function setPlotLineColor( plot_line_color )
Set the color of the line that connects each data point on an additional line of this LineColumnChart.
chart.setExtraPlotLineColor = function setExtraPlotLineColor( line, color )
Sets a region of the discrete data of this Table.
this.setData = function setData( data, startIndex, count )
Sets a specific data item of the discrete data of this Table.
this.setDataItem = function setDataItem( index, value )
Gets a region of the discrete data of this Table.
this.getData = function getData( startIndex, count )
Get the data item at position index of the discrete data of this Table.
this.getDataItem = function getDataItem( index )
Get the size of this Table.
this.getSize = function getSize()
Get all Nodes associated with this Table.
this.getNodes = function getNodes()