Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
blocks:app-note:interacting-from-a-custom-web-page [2021-05-01 14:33] admin Changed title to "Advanced", and added "Basic" |
blocks:app-note:interacting-from-a-custom-web-page [2023-08-01 21:07] (current) admin [Installation] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Advanced Interaction from a Custom Web Page ====== | ====== Advanced Interaction from a Custom Web Page ====== | ||
- | The application note titled " | + | The application note titled " |
* Making HTTP requests to Blocks, triggering a custom action on the server and passing a result back to the web page. | * Making HTTP requests to Blocks, triggering a custom action on the server and passing a result back to the web page. | ||
Line 13: | Line 13: | ||
===== Installation ===== | ===== Installation ===== | ||
- | You need a computer with a running blocks server and a web browser to run this application note. Here's the {{ : | + | You need a computer with a running blocks server and a web browser to run this application note. Here's the {{ : |
- Start Blocks. | - Start Blocks. | ||
- | - Open the editor using the Admin button. | + | - Open the Blocks |
- | - Log in using the name admin and the password pixi. | + | - Log in using the proper credentials (default user name is //admin// and the password |
- Open a second browser window to the same address as the editor window, but replace /edit/xxx with /spot. This opens a test spot display. | - Open a second browser window to the same address as the editor window, but replace /edit/xxx with /spot. This opens a test spot display. | ||
- Double-click TheSpot in the editor and reassign it to the ID shown in your separate spot window. This will be your test spot, controlled from the custom app. | - Double-click TheSpot in the editor and reassign it to the ID shown in your separate spot window. This will be your test spot, controlled from the custom app. | ||
Line 86: | Line 86: | ||
</ | </ | ||
- | This call returns a pubSubPeer that manages the websocket connection to the server. The constructor call takes an optional callback function, in the example above called // | + | This call returns a pubSubPeer that manages the websocket connection to the server. |
+ | |||
+ | The example shown above assumes that the custom web page is served by the Blocks server. If it is served from some other server, you must add a //second// parameter that is the URL for accessing the websocket endpoint on your Blocks server, like this; | ||
+ | |||
+ | < | ||
+ | const pubSubPeer = new PIXILAB_BLOCKS.PubSubPeer( | ||
+ | onServerConnectionChange, | ||
+ | " | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Replace < | ||
+ | |||
+ | < | ||
+ | const pubSubPeer = new PIXILAB_BLOCKS.PubSubPeer( | ||
+ | onServerConnectionChange, | ||
+ | " | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | The first parameter of the PubSubPeer | ||
< | < | ||
Line 112: | Line 132: | ||
=== pubSubPeer.add === | === pubSubPeer.add === | ||
- | This is similar to the //set// function, and takes the same two parameters. | + | This is similar to the //set// function, and takes the same two parameters. |
+ | |||
+ | The //add// methid | ||
Line 129: | Line 151: | ||
=== pubSubPeer.unsubscribe === | === pubSubPeer.unsubscribe === | ||
- | This function allows you to terminate any value subscription initiated by the // | + | This function allows you to terminate any value subscription initiated by the // |
- The full path to the property to subscribe to (see above). | - The full path to the property to subscribe to (see above). |