PIXILAB Wiki

Differences

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

Link to this comparison view

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 typo 		blocks:app-note:interacting-from-a-custom-web-page [2023-08-01 21:07] (current)
admin [Installation]
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 {{ :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.   - 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.   - 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:
 </code> </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> <code>
Line 112: Line 132:
 === pubSubPeer.add === === 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 === === 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).   - The full path to the property to subscribe to (see above).