-
Notifications
You must be signed in to change notification settings - Fork 1
Widget Documentation
There are a set of available widgets to be used as building blocks in the directory src/ui/widgets. The table below names the available widgets and the properties available on each are linked in.
Action Button - Checkbox - Display - Drawer - Drop Down - Dynamic Page - Embedded Display - Flex Container - Group Box - Grouping Container - Image - Input - Label - LED - Line - MenuButton - MenuMux - ProgressBar - Readback - Shape - SlideControl - Slideshow - Symbol - Tabs
Feel free to add extra documentation, this page is in no way complete.
The current format of each documented widget is as follows:
Description of the widget
parameter 1: Type of parameter 1 (optional or required)
Explanation of use of parameter 1
The action button component is a basic customisable button
text: string (required)
The string to be placed in the button, is only displayed if an image is not passed in (or cannot be displayed for any reason)
onClick: (event) -> void (required)
The function to execute on an event
image: string (optional)
The name of the image file found in the /img directory
backgroundColor: Color (optional)
The background color of the button
foregroundColor: Color (optional)
The foreground color of the button
border: Border (optional)
The border style of the button
font: Font (optional)
The font style of the button
actions: WidgetActions (optional)
The actions object used in the redux reducer, if not passed the onClick function will execute nothing.
A checkable box (not currently tied to any output)
label: String (optional: default "")
The text to display on the right of the checkbox
width: Float (optional: default 10)
The width of the checkbox in pixels
height: Float (optional: default 10)
The height of the checkbox in pixels
The display is a generic display widget to place other things inside, this is a registered widget.
children: Any renderable object (required)
The children to place einside the display, e.g.
stuff
overflow: "scroll", "hidden", "auto", or "visible" (required)
The behaviour for handling overflow in the display, currently choices between "scroll", "hidden", "auto", or "visible"
backgroundColor: Color (optional)
Currently not implemented
border: Border (optional)
Currently not implemented
macros: MacroMap (optional)
The macros to apply to the display
id: String (required)
The value for the ${DID} macro, e.g. ${DID} -> id
The drawer widget is a navigation menu that can be opened and closed.
anchor: "left", "right", "top", or "bottom" (optional: default "left")
The side from which the drawer will appear
drawerWidth: String | Num (optional: default "80vw")
The width of the drawer when opened (from left to right)
drawerMaxWidth: String | Num (optional: default "400px")
The maximum the container div will stretch to when possible, will shrink when required
font: Font (optional)
The font for the drawer button
foregroundColor: Color (optional)
The foreground color of the drawer button
backgroundColor: Color (optional)
The background color of the drawer button
border: Border (optional)
The border style of the drawer button
text: String (optional: default "\u2630")
The text to place in the button
children Renderable objects (required)
Any renderable object, which will be placed inside the drawer div when it opens
A basic drop down menu
title: String (required)
The text to put in the menu drop down button
open: Bool (optional: default false)
Whether the drop down menu starts open or not
font: Font (optional)
The font to apply to the drop down menu button
border: Border (optional)
The border on the drop down menu button
minHeight: String | Num (optional: default "")
The minimum height of the drop down menu button
foregroundColor: Color (optional: default "")
The foreground color of the drop down menu button
backgroundColor: Color (optional: default "")
The background color of the drop down menu button
children: Any renderable object (required)
The renderable objects that will be placed in the drop down menu
A display element used to place pages inside, tied to the use of a json file configuration of a page.
location: String (required)
The name of the file to load into the dynamic page widget
border: Border (optional)
Currently not implemented
Creates a page out of a corresponding json file, should use the DynamicPageObject which places the file into an EmbeddedDisplay but wraps it with some extra features.
A stylised div that expands/shrinks to the size of the text inside
flexFlow: "rowWrap", "column", "row", or "columnWrap" (optional)
children: Any renderable object (required)
Any renderable object, will be placed inside the flex container
backgroundColor: Color (optional)
The background color of the container
border: Border (optional)
The border type of the container
Creates a group box that shows the name of the group at the top of the box
name: String (required)
The text to place in the group container label at the top
children: Any renderable object (required)
Any objects to place inside the group container
Effectively a GroupBox, but without the name that is placed at the top of the box.
name: String (optional)
Currently not implemented
children: Any renderable object (required)
The objects to place inside the GroupingContainer
border: Border (optional)
Currently not implemented
macros MacroMap (optional: default {})
The macros to apply to the grouping container
You guessed it, it's an image with some configurable properties.
src: String (required)
The filename of the image to load, loads from the img/ directory
alt: String (optional)
Alternate text describing the image
fill: Bool (optional: default false)
Whether the image should fill the entire image container, and whether overflow is allowed
Configurable input component
pvName: String (required)
The pvName the input is tied to
value: String (required)
The initial value of that pv
readonly: Boolean (optional: default false)
Whether the input is readonly
foregroundColor: Color (optional)
foreground color of the input
backgroundColor: Color (optional)
background color of the input
transparent: Boolean (optional: default false)
Whether the input is transparent
onKeyDown: (event) -> void (required)
Callback function for whenever a key is pressed on the keyboard
onChange: (event) -> void (required)
Callback function for when the value in the input changes
onBlur: (event) -> void (required)
Callback function when elsewhere on the page is clicked (I believe)
onClick: (event) -> (required)
Callback function when the input is clicked
font: Font (optional)
The font of the text in the input
textAlign: "left", "center", and "right" (optional)
How to align the text
A div containing the label as text
text: String (required)
Text to display in the label
visible: Boolean (optional)
Not currently implemented
transparent: Boolean (optional)
Whether the background of the label should be transparent
className: String (optional)
The className to label the div containing the label with
textAlign: "left", "center", or "right" (optional)
How to align the text in the label
font: Font (optional)
Font to use in the text
foregroundColor: Color (optional)
Foreground color of the label
backgroundColor: Color (optional)
Background color of the label
border: Border (optional)
Type of border around the label
A LED that can use inbuilt alarm levels on a PV or a user defined rule to define the color of the LED. The LED changes colour based on a user rule (if defined), or else uses the alarm tied to the PV (if alarmSensitive is true). User rules take priority over PV alarms.
When defining a user rule for colouring the LED any colour can be returned, in the form of a hexcode or string name. There can commonly be several rules, and an example is:
"rules": [
{
"name": "limits",
"prop": "userColor",
"outExp": false,
"pvs": [
{
"pvName": "sim://sine",
"trigger": true
}
],
"expressions": [
{
"boolExp": "pv0 > 0.6",
"value": "blue"
},
{
"boolExp": "pv0 < -0.5",
"value": "#ff00ff"
}
]
}
]Most of the variables are not important to the user, all that needs to be defined is the pvName to monitor, and a series of "boolExp" and "value" properties that define what to return when the expressions is true. These rules are prioritised top to bottom, and if none of the rules return anything then the LED will be set to green. These rules are therefore rules to determine if the value has errored in some way.
width: Float (optional: default 16)
Diameter of the LED in pixels
alarmSensitive: Boolean (optional: default false)
Whether to use alarm levels on the PV to change the colour (no user rules can be defined for this to work)
A drop down list atttached to a button, shows the current value in the button.
connected: Boolean (optional: default false)
Whether the drop down is disabled or not
onChange: (event) -> void (required)
Callback when a new selection from the drop down menu is selected
value: DType (optional)
The value to display in the drop down button
readonly: Boolean (optional: default false)
Whether to disable the button and to disallow the cursor
style: Style object (optional: default {})
How to style the menu button
Effectively a menu button but without the user input aspect, just displays the info
onChange: (event) -> void (required)
Callback function when new element is selected
values: { [key: String]: String } (required)
The values to place into menu elements
selected: String (required)
The initially selected value
A rectangular object commonly used to represent the beamline.
width: Float (required)
The width of the line
lineWidth: Float (required)
The width of the line, could also be called the height
backgroundColor: Color (optional)
The fill color for the line
visible: Boolean (optional: default true)
Whether to display the line or not
transparent: Boolean (optional: default false)
Whether the line is transparent or not, effectively the same as visible but left for compatibility with CS-Studio
rotationAngle: Float (optional: default 0)
The rotation angle in degrees around the centre point of the line
A configurable progress bar
min: Float (optional)
The minimum value for the bar
max: Float (optional)
The maximum value for the bar
limitsFromPv: Boolean (optional: default false)
Whether the limits of the variable should be extracted from the limits from that PV
font: Font (optional)
Font to display the progress bar with
vertical: Boolean (optional: defualt false)
Whether the bar should be placed vertically or not
color: Color (optional: default "#00aa00")
The color of the progress bar
precision: number (0 - 20) (optional)
How many digits after the decimal point to display the value to
value: DType (required)
Value to set the progress bar to
Effectively a configured label to display information
precision: number (0 - 20) (optional)
The number of digits after the decimal point to display the value to
showUnits: Boolean (optional: default false)
Whether to show the units of the PV
fgAlarmSensitive: Boolean (optional: default false)
Whether to alert the user when the component has disconnected.
textAlign: "left", "center", or "right"
How to align the text in the readback
transparent: Boolean (optional: defualt false)
Whether to make the readback transparent or not
font: Font (optional)
Font to use in the readback
foregroundColor: Color (optional)
Foreground color of the readback
backgroundColor: Color (optional)
Background color of the readback
border: Border (optional)
The border type for the readback
connected: Boolean (optional)
Whether the readback is connected to the PV
Returns a div stylised to a certain shape
shapeWidth: String (optional: default "100%")
The width of the div
shapeHeight: String (optional: default "100%")
The height of the div
shapeRadius: String (optional: default "")
The border radius
shapeTransform: String (optional: default "")
A transformation to apply to the div
transparent: Boolean (optional: default false)
Whether the div is transparent
backgroundColor: Color (optional)
The background color of the div
border: Border (optional)
The border style of the div
A configurable slider alongside a progress bar
This component just combines a progress bar with a slider and therefore has the same
parameters as a standard progress bar
A container with objects placed inside, can choose to go to the next object or the previous
children: Any renderable objects (required)
The objects to place into each slide, should be an array of objects
overflow: "scroll", "hidden", "auto", or "visible" (optional)
The type of overflow
maxHeight: String | Num (optional: default "")
The maximum height of the container
maxWidth: String | Num (optional: default "")
The maximum width of the container
minHeight: String | Num (optional: default "")
The minimum height of the container
border: Border (optional)
The type of border to apply to the container
backgroundColor: Color (optional)
The background color of the container
A component that combines an image with an optional label, replaces the CS-Studio MultistateMonitorWidget
src: string (required)
The path to the image file, with respect to the public directory
alt: string (optional: default "")
The alternative text for the image
backgroundColor: Color (optional: default white)
The background color for the label below the image, the background for the image is set to transparent.
showLabel: Boolean (required)
Whether to place a label below the image or not, effectively just an image component when this property is set to false
width: float (optional)
The width of the image in pixels
height: float (optional)
The height of the image in pixels
border: Border (optional)
Foreground color of the readback
backgroundColor: Color (optional)
Background color of the readback
border: Border (optional)
The border type for the label part of the component
value: float (optional)
The PV value that is displayed as a string in the label of the component
rotation: float (optional: default 0)
The rotation angle in degrees for the image
flipHorizontal: boolean (optional: default false)
Whether the image should be flipped horizontally
flipVertical: boolean (optional: default false)
Whether the image should be flipped vertically
visible: boolean (optional: default true)
Whether the component should be visible or not
stretchToFit: boolean (optional: default false)
Whether the image should stretch to the width and height inputs
location: String (optional)
The name of the first file to load into the tab
maxHeight: String | Num (optional)
The maximum height of a tab
maxWidth: String | Num (optional)
The maximum width of a tab
minHeight: String | Num (optional)
The minimum height of a tab
border: Border (optional)
The border type of the tab
backgroundColor: Color (optional)
The background color of the tab
A navigation bar with buttons for each of the pages
tabs: Renderable objects (required)
The renderable objects to create the navigation bar from
maxHeight: String | Num (optional)
The maximum height of a tab
maxWidth: String | Num (optional)
The maximum width of a tab
minHeight: String | Num (optional)
The minimum height of a tab
border: Border (optional)
The border type of a tab
backgroundColor: Color (optional)
The background color of a tab
A slide bar that display a different object, much like the slideshow
tabs: Any renderable object (required)
All objects to place in the tabs
maxHeight: String | Num (optional)
The max height of the container
maxWidth: String | Num (optional)
The max width of the container
minHeight: String | Num (optional)
The minimum height of the container
border: Border (optional)
The border type of the container
backgroundColor: Color (optional)
The background color of the container