SingleTypePanelWidgetBase

Declared in single-type-widget-base.js

Extend this class to implement a custom single-type topic widget as outlined in the code snippet below. A working example - panel displaying Bool messages - can be found in the Extras repository and also live in our demos.

Static Attributes

static DEFAULT_HEIGHT	Number	Default panel width in GridScale rows
static DEFAULT_WIDTH	Number	Default panel width in GridScale columns
static HANDLED_MSG_TYPES	String[] (required)	Topic message types to associate this widget with

Instance Attributes

autoresize_renderer	Bool	If true, resize renderer attached to this widget automatically
client	BrowserClient	Reference to Browser client
panel	Panel	Reference to widget panel
topic	String	Topic name
ui	PanelUI	Reference to the UI
widget_el	jQuery	Reference to the widget’s DOM element

Methods

constructor( Panel panel, String topic, String widget_css_class )
getFpsString() : String	Returns string to be displayed in the FPS label
onClose()	Called when the panel is closed
onData( MsgType msg )	Called when data for the topic is received
onPaused()	Called when the panel is paused
onResize()	Called on panel/window resize
onUnpaused()	Called when the panel is unpaused
setupMenu( jQuery menu_els )	Setup menu items by adding new lines into the provided menu_els container

Example

custom-single-topic-widget.js

import { SingleTypePanelWidgetBase } from 'https://bridge.phntm.io/static/widgets/inc/single-type-widget-base.js'

export class CustomSingleTypePanelWidget extends SingleTypePanelWidgetBase {

     static HANDLED_MSG_TYPES = [ 'some_msgs/msg/TopicMsgType' ]; // associate with these types

     constructor(panel, topic) {
         super(panel, topic, 'my-widget-class'); // gets added to the panel
         // set up DOM or Three.js Renderer+Scene here
     }

     setupMenu(menu_els) {
         // add custom menu items to menu_els (jQuery List)
     }

     onData(msg) {
         // do something with the received data
     }

     onResize() {
         // handle resize
     }

     onClose() {
         // clean up
     }
}