the VSCP Daemon

Trace: vscpws_statebutton


|

Index

Setup Configure Security Webserver TCP/IP Interface UDP Multicast Websocket REST interface Decision Matrix Tables Variables Drivers Appendix Other documentation

Meta

vscpws_stateButton

The vscpws_stateButton is a button that can be used as a state button or as a stateless button. It has the ability to send an event when it changes it state (one for each state) or for a stateless button one when it is pressed and one when released. Also the button can change it's state according to incoming events or a monitored VSCP Daemon variable value. The button can have one of several appearances shown below or a custom appearance defined by the user.

To assign a monitored variable to the button is a good solution if a state should be monitored over time. Instead of waiting for the next event that tell the button state a variable is read from the daemon which is kept persistent and up to date to get the state. This variable is written/changed in the decision matrix or by a user or an application through the TCP/IP interface of the daemon and can thus be influenced and controlled by some simple or advanced criteria. This also can be used to monitor the state for a specific condition by monitor a variable and just show the state on the page not allowing clicking the button. Typical scenarios can be to indicate an open window, an alarm condition or things like that.

The decision matrix of the VSCP daemon is also perfect to use if one wants to have a button that sends several events. This can be anything of course. Some dimmer commands combined with some on/offs and some curtain roll downs. This is then just added to the decision matrix and triggered on the event sent from the button. Typical use is to control for example any lamps from one button to set a specified scenery for a house or a stage.

Buttons can be set to be stateless or remember there state.

A state remembering button as default send

CLASS1.CONTROL,TurnOn index=0, zone=0, subzone=0 

when activated and

CLASS1.CONTROL,TurnOff index=0, zone=0, subzone=0 

when inactivated. The button will change it's state either when a monitored variable change its state or go to the active state when a

CLASS1.INFORMATION, On-event index=0, zone=0, subzone=0

is received and go to it's inactive state when a

CLASS1.INFORMATION,off-event index=0, zone=0, subzone=0 is received.

A stateless button as default send

CLASS1.CONTROL,TurnOn index=0, zone=0, subzone=0 

when pressed and

CLASS1.CONTROL,TurnOff index=0, zone=0, subzone=0 

when released.

Creating a button is typically done with

var btn1 = new vscpwsstateButton( "ws://192.168.1.20:8080", "buttonKitchen"); 

which will create a default state button of type=0 looking like this.

Here “buttonKitchen” refers to a canvas where the button is placed as explained below.

If the connection to the server is lost for some reason stateButtons will look like this

where the cross over them indicate a broken connection to the server.

Construction of a vscpws_stateButton

var bt1 = vscpws_stateButton( username,          // username                                                      
                                passwordhash,    // passwordhash 
                                url,             // url to VSCP websocket i/f 
                                canvasName,      // Where it should be placed 
                                bLocal,          // Local visual control 
                                btnType,         // Button type 
                                bNoState,        // True for nonstate button 
                                bDisable,        // Disable user interactions 
                                customupsrc,     // Custom up image 
                                customdownsrc )  // Custom down image

username

Username to logon to the websocket server.

passwordhash

Password hash to logon to the websocket server

url

Url to the websocket server. This typically is on the form

"ws://192.168.1.20:8080"

or

"wss://192.168.1.20:8080" 

if SSL is used.

With all widgets having there own user/password/url specified for the websocket server it is possible to create web pages that control nodes/units/hardware that are located in different locations from the same page.

canvasName

This is the name of the canvas element where the button should be placed. Typically this is defined on the form

<canvas id="buttonKitchen"
    style="z-index: 3;
        position:absolute;
        left:190px;
        top:310px;" height="30px" width="22px">
        Your browser does not support HTML5 Canvas.
</canvas>

The id is the parameter that goes for the canvasName. This name is also used to create the instance name for the button and the name set is preceded with vscpws_. The canvas specifies the position and the size for the button. Also z-order is possible to define so that objects can be placed behind, or partially behind each other to get nice visual effects.

bLocal

If set to true visual indication is handled locally. For a state button appearance will be changed on every click and for a stateless button appearance will be changed when the button is pressed and then again when it is released. It is better to have the visual appearance of the buttons controlled by external events as it also a confirmation that the sent event actually did what it was intended to do. In some situations however it may be good to handle this locally for some reason. Default=false

btnType

This is the visual appearances of the button. Check for possible values below. -1 is reserved for a user defined button. When used one has to supply a path to an image for both the “down” and the “up” state for the button in the customupsrc and customdownsrc parameters. parameters. Default = 0.

Appearances types

The images below is shown in there default size. Most of the buttons is designed for a different size and with an appropriate background color.

Type = 0 Default

Type = 1

Type = 2

Type = 3

Type = 4

Type = 5

Type = 6

Type = 7

Type = 8

Type = 9

Type = 10

Type = 11

Type = 12

Type = 13

Type = 14

Type = 15

Type = 16

Type = 17

Type = 18

Type = 19

Type = 20

Type = 21

Type = 22

Type = 23

Type = 24

Type = 25

Type = 26

Type = 27

Type = 28

Type = 29

Type = 30

Type = 31

Type = 32

Type = 33

Type = 34

Type = 35

Type = 36

Type = 37

Type = 38

Type = 39

Type = 40

Type = 41

Type = 42

Type = 43

Type = 44

Type = 45

Type = 46

Type = 47

Type = 48

Type = 49

Type = 50

Type = 51

Type = 52

Type = 53

Type = 54

Type = 55

Type = 56

Type = 57

Type = 58

Type = 59

Type = 60

Type = 61

Type = 62

Type = 63

Type = 64

Type = 65

Type = 66

Type = 67

Type = 68

Type = 69

Type = 70

Type = 71

Type = 72

Type = 73

Type = 74

Type = 75

Type = 76

Type = 77

Type = 78

Type = 79

Type = 80

Type = 81

Type = 82

Type = 83

Type = 84

Type = 85

Type = 86

Type = 87

Type = 88

Type = 89

Type = 90

Type = 91
Blinking green and blinking red.

Type = 92

Type = 93

bNoState

Set to true to have a stateless button. This button will send one event when pressed and one when released. The default is to send

 CLASS1.CONTROL,TurnOn index=0, zone=0, subzone=0

when pressed and

 CLASS1.CONTROL,TurnOff index=0, zone=0, subzone=0 when released. Default = false; 

bDisable

Set to true to disable user interactions. Button clicks will no longer work. This is useful if one instead wants to monitor a variable. Default is false.

customupsrc

This is the path to the “up” image for a custom button when type is -1.

customdownsrc

This is the path to the “down” image for a custom button when type is -1.

Methods

setOnTransmitEvent

Set the event that is sent when a state button is activated or a stateless button is pressed down.

Usage

setOnTransmitEvent( vscpclass,    // VSCP class 
                       vscptype,   // VSCP type 
                       data,       // Array with databytes 
                       guid)       // GUID to use 
vscpclass

VSCP class to use for the event. Default=30 CLASS1.CONTROL

vscptype

VSCP type to use for the event. Default=5 as for CLASS1.CONTROL TurnOn-Event.

data

Array with data bytes to use for the event. Its the responsibility of the caller to use the correct number of data bytes. Default is “0,0,0” meaning index=0, zone=0, subzone=0,

guid

This is the sending GUID. Normally one just use the GUID of the sending interface of the VSCP daemon. So the default is 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00 or “-” with is a short hand version for the long form. Default=“-”

If you don't want an event to be sent for the on-state set vscpclass=0.

setOffTransmitEvent

Set the event that is sent when a state button is activated or a stateless button is pressed down.

Usage

setOffTransmitEvent( vscpclass, // VSCP class
                       vscptype, // VSCP type
                       data,     // Array with data bytes
                       guid)     // GUID to use
vscpclass

VSCP class to use for the event. Default=30 CLASS1.CONTROL

== vscptype =

VSCP type to use for the event. Default=6 as for CLASS1.CONTROL TurnOff.

data

Array with data bytes to use for the event. Its the responsibility of the caller to use the correct number of data bytes. Default is “0,0,0” meaning index=0, zone=0, subzone=0,

guid

This is the sending GUID. Normally one just use the GUID of the sending interface of the VSCP daemon. So the default is 00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00 or “-” which is a short hand version for the long form. Default=“-”

If you don't want an event to be sent for the off-state set vscpclass=0.

setOnReceiveEvent

Set the event that should be received to set the visual indication of a button to it's on state.

Usage

setOnReceiveEvent( vscpclass,  // VSCP class 
                     vscptype, // VSCP type 
                     data,     // Array with databytes 
                     guid )    // GUID to use 
vscpclass

VSCP class that the incoming event must have. Default=20 CLASS1.INFORMATION

vscptype

VSCP type that the incoming event must have. Default=3 as of the CLASS1.INFORMATION On-Event.

data

Array with data bytes that the event should have. Set a data byte to -1 for a don't care. Default is “-1,0,0” meaning index=-1, zone=0, subzone=0,

guid

This is the GUID the receiving event should have. Just leave undefined if the GUID should not be checked. Default=“”

setOffReceiveEvent

Set the event that should be received to set the visual indication of a button to it's on state.

Usage

setOffReceiveEvent( vscpclass,    // VSCP class 
                        vscptype, // VSCP type 
                        data,     // Array with databytes 
                        guid )    // GUID to use 
vscpclass

VSCP class that the incoming event must have. Default=20 CLASS1.INFORMATION

vscptype

VSCP type that the incoming event must have. Default=3 as of the CLASS1.INFORMATION Off-Event.

data

Array with data bytes that the event should have. Set a data byte to -1 for a don't care. Default is “-1,0,0” meaning index=-1, zone=0, subzone=0,

guid

This is the GUID the receiving event should have. Just leave undefined if the GUID should not be checked. Default=“”

setOnTransmitZone

As it is common to use one of the types in CLASS1.CONTROL as on-event for a button this is a convenient method to use to change the default zone/subzone for the outgoing event.

Usage

setOnTransmitZone( index,      // index
                     zone,      // zone 
                     subzone )  // subzone  
Index

0-255

zone

Zone to direct event to. 255 is all.

subzone

Subzone to direct event to. 255 is all.

setOffTransmitZone

As it is common to use one of the types in CLASS1.CONTROL as off-event for a button this is a convenient method to use to change the default zone/subzone for the outgoing event.

Usage

setOffTransmitZone( index,   // index
                     zone,    // zone 
                     subzone) // subzone 
Index

0-255

zone

Zone to direct event to. 255 is all.

subzone

Subzone to direct event to. 255 is all.

setOnReceiveZone

As it is common to use one of the types in CLASS1.INFORMATION as a trigger for the on-state of a button this is a convenient method to use to change the default zone/subzone for the incoming event.

Usage

setOnReceiveZone( index,   // index
                  zone,    // zone 
                  subzone) // subzone 
Index

0-255 or -1 for don't care.

zone

Zone to direct event to. 255 is all. Or -1 for don't care.

subzone

Subzone to direct event to. 255 is all. Or -1 for don't care.

setOffReceiveZone

As it is common to use one of the types in CLASS1.INFORMATION as a trigger for the off-state of a button this is a convenient method to use to change the default zone/subzone for the incoming event.

Usage

setOffReceiveZone( index,    // index
                   zone,     // zone 
                   subzone)  // subzone
Index

0-255 or -1 for don't care.

zone

Zone to direct event to. 255 is all. Or -1 for don't care.

subzone

Subzone to direct event to. 255 is all. Or -1 for don't care.

setTransmitBothZone

This method setts Transmit On/Off and Receive On/Off index,zone and subzone in one call.

Usage

setTransmitBothZone ( index,      // index
                       zone,      // zone 
                       subzone )  // subzone  
Index

0-255.

zone

Zone to direct event to. 255 is all.

subzone

Subzone to direct event to. 255 is all.

setReceiveBothZone

This method set receive On/Off index,zone and subzone in one call.

Usage

setReceiveBothZone( index,       // index
                      zone,      // zone 
                      subzone )  // subzone  
Index

0-255. Set to -1 for don't care.

zone

Zone to direct event to. 255 is all. Set to -1 for don't care.

subzone

Subzone to direct event to. 255 is all. Set to -1 for don't care.

setMonitorVariable

With this method one can set a VSCP daemon boolean variable that should be monitored with a specific interval. If the variable is true the state for the state button will be set to true and vice versa. The variable is also updated the other way around If the button is down the variable will be set to true and vice versa. If the variable does not exist it will be created.

Usage

setMonitorVariable( variablename, // variable name 
                       interval)  // monitoring interval in milliseconds 
variablename

The name for the VSCP daemon boolean variable.

interval

The interval in milliseconds between variable reads. Set to zero to disable. Default=1000 (one second). To test try to set the variable name to “statbutton1” and issue

variable write statebutton1,,,true 

and

variable write statebutton1,,,false

in the VSCP daemon TCP/IP interface to see the change the state for the state button in your browser page.

draw

Draw the widget. Normally no need to use.

Usage

draw() // Draw the widget

setValue

Set the value for the widget. The state will also be

Usage

setValue( value,       // Boolean value for state 
            bUpdate )  // True (default) if a draw should be done 
                       // after value is set. 
value

Boolean value that set the state of the widget.

bUpdate

True (default) if a draw should be done after value is set.

Using the vscpws_stateButton widget

All vscpws controls have a sample in the vscp_html5/testws folder of the repository VSCP HTML5 code. For the vscpws_stateButton control this sample is here



Grodans Paradis AB