Widget Reference
About 3 min read
Settings, default values and bindable properties of the 88 widgets in the page editor. The names and descriptions in this section are the same as the names and help texts shown in the properties panel.
Basic
| Widget | Component name | Settings |
|---|---|---|
| Check box | TwCheckBox | 12 |
| Drop-down | TwDropDown | 6 |
| Header | TwHeader | 4 |
| Paragraph | TwParagraph | 4 |
| Potentiometer | TwPotentiometer | 28 |
| Radio group | TwRadioGroup | 8 |
| Rotary switch | TwRotarySwitch | 12 |
| Text | TwSpan | 4 |
| Text box | TwTextBox | 4 |
| Text input | TwValueEditString | 6 |
| Three-state selector | TwThreeStateSelector | 12 |
| Value input | TwValueEdit | 15 |
| Value label | TwValueLabel | 9 |
Buttons
| Widget | Component name | Settings |
|---|---|---|
| Button | TwButton | 17 |
| Button group | TwButtonGroup | 7 |
| Push button | TwPushButton | 17 |
| Switch | TwSwitch | 13 |
| Toggle button | TwToggleButton | 20 |
Charts
| Widget | Component name | Settings |
|---|---|---|
| Chart | TwChart | 40 |
| Data table | TwDataTable | 39 |
| Downtime reason Pareto | TwDowntimePareto | 14 |
| Downtime timeline | TwDowntimeTimeline | 12 |
| Energy scatter | TwEnergyScatter | 7 |
| Heatmap | TwHeatmap | 14 |
| Page time picker | TwPageTimePicker | 8 |
| Pie chart | TwPieChart | 26 |
| Sparkline | TwSparkline | 20 |
Containers
| Widget | Component name | Settings |
|---|---|---|
| Box | TwBox | 2 |
| Card | TwCard | 13 |
| Cell | TwCell | 2 |
| Column | TwColumn | 5 |
| Composite widget | CompositeWidget | 3 |
| Grid | TwGrid | 21 |
| Grid cell | TwGridCell | 7 |
| Modal window | TwModalWindow | 13 |
| Row | TwRow | 3 |
| Stack | TwStack | 3 |
Isometric equipment
| Widget | Component name | Settings |
|---|---|---|
| Beacon (isometric) | TwIsoBeacon | 11 |
| Chiller (isometric) | TwIsoChiller | 22 |
| Cold room (isometric) | TwIsoColdRoom | 45 |
| Compressor (isometric) | TwIsoCompressor | 22 |
| Conveyor (isometric) | TwIsoConveyor | 28 |
| Cooling tower (isometric) | TwIsoCoolingTower | 25 |
| Electrical cabinet (isometric) | TwIsoElectricalCabinet | 11 |
| Filter (isometric) | TwIsoFilter | 16 |
| Generator (isometric) | TwIsoGenerator | 9 |
| Mixer tank (isometric) | TwIsoMixerTank | 25 |
| Pallet load (isometric) | TwIsoPalletLoad | 14 |
| Partition wall (isometric) | TwIsoPartitionWall | 37 |
| Pipe (isometric) | TwIsoPipe | 22 |
| Pipe fitting (isometric) | TwIsoPipeFitting | 18 |
| Pressure vessel (isometric) | TwIsoPressureVessel | 15 |
| Pump (isometric) | TwIsoPump | 21 |
| Sensor (isometric) | TwIsoSensor | 16 |
| Transformer (isometric) | TwIsoTransformer | 8 |
| Valve (isometric) | TwIsoValve | 15 |
| Water pool | TwWaterPool | 7 |
Media
| Widget | Component name | Settings |
|---|---|---|
| Audio | TwAudio | 8 |
| Custom audio | TwAudioCustom | 8 |
| Image | TwImage | 4 |
| Inline SVG | TwInlineSvg | 8 |
| Video | TwVideo | 8 |
Operations
| Widget | Component name | Settings |
|---|---|---|
| Alarm table | TwAlarmTable | 16 |
| Downtime reason entry | TwDowntimeReasonEntry | 10 |
| Manual entry table | TwManualEntryTable | 8 |
| Recipe | TwRecipe | 20 |
Other
| Widget | Component name | Settings |
|---|---|---|
| Big arrow | TwBigArrow | 4 |
| Circular progress | TwCircularProgress | 21 |
| Electrical symbol | TwEaSymbol | 2 |
| Flame | TwFlame | 3 |
| Gauge | TwGauge | 43 |
| Linear gauge | TwLinearGauge | 42 |
| Propeller | TwPropeller | 3 |
| Rain drops | TwRainDrops | 3 |
| Smoke | TwSmoke | 3 |
| Sprinkler | TwSprinkle | 3 |
| Sprite animator | TwSpriteAnimator | 18 |
| Water wave | TwWaterWave | 9 |
Svg
| Widget | Component name | Settings |
|---|---|---|
| Conveyor | TwConveyor | 34 |
| Flow line | TwFlowLine | 19 |
| ID read point (RFID/barcode) | TwIdReadPoint | 47 |
| Link box | TwLinkBox | 12 |
| Piping node | TwPipingNode | 14 |
| Polygon | TwPolygon | 12 |
| Polyline | TwPolyline | 13 |
| Realistic tank | TwTankRealistic | 30 |
| Tank level | TwTankLevel | 23 |
| Valve | TwValve | 30 |
Binding types
Bindings connect widget properties to Tag values and condition rules. The Bindings section of each widget page lists which properties of that widget can be bound.
| Type | Behavior |
|---|---|
Direct | The tag value is written directly to the selected widget property. |
IntRange | The tag value is compared with integer ranges; the value in the row of the matching range is applied to the property. |
FloatRange | Works like IntRange; the range limits are decimal numbers. |
Boolean | The tag value is evaluated as true/false; the value of the matching condition row is applied. |
Bit | The given bit number of the tag value is read; the condition row is applied according to the 0/1 state of the bit. |