Differences

This shows you the differences between two versions of the page.

--- blocks:app-note:interacting-from-a-custom-web-page [2020-07-09 13:50] – [Using HTTP requests] admin
+++ blocks:app-note:interacting-from-a-custom-web-page [2023-08-01 21:07] (current) – [Installation] admin
@@ Line 1: / Line 1: @@
-====== Interacting with Blocks from a Custom Web Page ======
+====== Advanced Interaction from a Custom Web Page ======
-This application note shows how your custom web page can talk to a Blocks server in various ways, including:
+The application note titled "[[blocks:app-note:basic-interaction-from-a-custom-web-page|Basic Interaction from a Custom Web Page]]" desicribes a simple form of interaction (starting a named task). However, some applications ned a tighter integration, with direct read/write. and rea-ltime access to the inner workings of Blocls. This application note shows how such advanced integration can be accomplished, including:
-  * Making a simple HTTP request 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.
   * Setting any property in your Blocks system from the web page.
   * Subscribing to property changes to keep your web page in the loop, regardless of how the property was changed.
@@ Line 13: / Line 13: @@
 ===== Installation =====
-You need a computer with a running blocks server and a web browser to run this application note. Here's the {{ :blocks:app-note:custom-web-page:interactingfromcustomwebpage.zip| Blocks root}} for this application note. See the the [[https://int.pixilab.se/docs/blocks/app-note/start|general setup section]] for details on downloading and installation. Once that general setup is done, follow these steps to run the application note:
+You need a computer with a running blocks server and a web browser to run this application note. Here's the {{ :blocks:app-note:custom-web-page:interactingfromcustomwebpage_v2.zip| Blocks root}} for this application note. See the the [[blocks:app-note:start|general setup section]] for details on downloading and installation. Once that general setup is done, follow these steps to run the application note:
   - Start Blocks.
-  - Open the editor using the Admin button.
+  - Open the Blocks editor using the Admin button.
-  - Log in using the name admin and the password pixi.
+  - Log in using the proper credentials (default user name is //admin// and the password is //pixi//).
   - 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.
@@ Line 86: / Line 86: @@
 </code>
-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 //onServerConnectionChange//, which in the example looks like this:
+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;
+<code>
+const pubSubPeer = new PIXILAB_BLOCKS.PubSubPeer(
+	onServerConnectionChange,
+	"ws://<nameOrIp><:nonStandardPort>/rpc/pub-sub"
+);
+</code>
+Replace <nameOrIp> with the IP number or resolvable name to your Blocks server. If you're running on a non-standard port, append the port number separated by a colon. Hence, if your Blocks server rus on 10.1.0.10 using the standard port, the call would look like this:
+<code>
+const pubSubPeer = new PIXILAB_BLOCKS.PubSubPeer(
+	onServerConnectionChange,
+	"ws://10.1.0.10/rpc/pub-sub"
+);
+</code>
+The first parameter of the PubSubPeer constructor call is an optional callback function, in the example above called //onServerConnectionChange//, which in the sample code looks like this:
 <code>
@@ Line 112: / Line 132: @@
 === pubSubPeer.add ===
-This is similar to the //set// function, and takes the same two parameters. However, it may only be used with numeric values. You can use it to increase or decrease (by passing a negative value) a numeric property, such as a volume value. This is often simpler for such incremental adjustments than maintaining a subscription to the value in order to do the calculation on the client side based on the current value and then using the //set// function to change the value.
+This is similar to the //set// function, and takes the same two parameters. When used with a numeric property, the value you specify will be added to the current value. Pass a negative value to subtract. When used with a string property, the value will be //appended// (concatenated) to the current string value.
+The //add// methid is often simpler for such incremental adjustments than maintaining a subscription to the value in order to do the calculation on the client side based on the current value and then using the //set// function to change the value.
@@ Line 129: / Line 151: @@
 === pubSubPeer.unsubscribe ===
-This function allows you to terminate any value subscription initiated by the //subscribe// fuynction if you're no longer interested in changes of a property. It takes the following parameters:
+This function allows you to terminate any value subscription initiated by the //subscribe// function if you're no longer interested in changes of a property. It takes the following parameters:
   - The full path to the property to subscribe to (see above).