Web Server |
|
Web Server |
|
Web Server |
|
Web Server |
|
Loading...
Since version 4 Widget Designer (WD) is able to publish its pages as html files and operates as a Web Server. Simply open your web browser and connect to the IP address and port number where the Widget Designer application runs on. Now you can view the Widget Designer page with its controls and use them.
Since version 6, all controls are supported as a web control too. All widgets like Custom Script Buttons and Faders can be used within the web browser in the same way as in Widget Designer. This includes of course the possibility to execute one of the 1500 commands of WD's build-in script language.
Please make sure to use the latest updates for your web browser. Currently Google Chrome, Mozilla Firefox, Opera, Apple Safari and Windows Internet Explorer are recommended.
As soon as a user connects to the Web Server, a so called session is created, together with a unique session key. A special session cookie stores this data within the browser and can last several days. A second user with another connection would create a second session and gets another key. If your page, for example, contains a fader, there are two possible scenarios how the two users may interact with the fader:
- the page(s) and the faders are published and displayed synchronized.
All web faders are copies or instances of the main, local WD faders; their values are always linked to each other. If a web fader is moved, it reports its value to the local fader and this one in turn to the other web instances. In other words, no matter whether the programmer moves the fader in the Widget Designer interface or a user does so in the web browser interface, everybody sees the same fader and value.
If your project consists of several pages, every session would switch to the same page as soon as one user (or operator) calls another page.
- the page(s) and controls are published and displayed in multi-session mode (Unlimited Web Clients Version only, see below)
Each session and user can have an individualized view and control setting. If one user moves the fader now, only his fader will adopt to its individual session value. Another user might set up the fader with another session value, he is not influenced by the first user or rather the WD operator. The main Widget Designer application is able to receive, collect and evaluate all session values. For example, if the fader is used for a voting event, WD could evaluate the highest / lowest value or the average one.
Regarding the page behavior, each user can view and switch the page of choice and is not linked to the other users.
The Unlimited version supports even a combination of these two scenarios. If desired you may choose to have a synchronized page behavior but multi-session tool behavior, it is even possible to arrange the grouping of values for different clients.
The Web Server is a very powerful feature in Widget Designer. Its three editions have different implementation levels.
WD Free Version may publish one page to be accessed by one user. It is not possible to create a second session. If the project consists of several pages, you may decide which one should be published, it does not necessarily need to be "Page1".
WD may publish an unlimited number of pages to be accessed by an unlimited number of users at the same time. If the project consists of several pages, you may decide which one should be published as the index page - the one you will be automatically redirected to, when connecting to a web server. It is not possible to create a multi-session, all sessions are synchronized. Thus, all users will have access to the same page and its controls simultaneously.
WD Unlimited Web Clients may publish an unlimited number of pages to be accessed by an unlimited number of users at the same time. If the project consists of several pages, again, you may decide which one should be published as the index page. In addition you may decide whether all sessions should be synchronized or whether a multi-session should be supported which will allow simultaneous as well as individual setups. In individual setups each user can see a different page and in addition multi-session controls like Faders and Custom Script Buttons may have deviating values.
In the main menu bar: Click on Edit > Web Server Settings
The web server is automatically enabled, you do not need to start it manually to use this feature. The default ports being used are: 80 for HTTP, 8080 for WebSockets and 81 for uploads. If those ports are already in use, for example by another WD instance, free ports in the range of 30300 and higher will be searched and applied automatically. The chapter Ports Used by PB and WD lists all occupied ports.
If you use the web server on your local PC, open a browser and type in "localhost". You will then be redirected to your index page or a directory of all available pages. For other PCs in the network enter the IP address of the WD machine, e.g.:
http://10.169.10.31
As long as you are using the default ports, no additional value has to be entered. However, if you have to use another port than 80 for HTTP, you will have to specify so in the address in order to get to the correct WD instance interface.
Example for HTTP port 30300: http://10.169.10.31:30300
A specific window can be addressed by entering only the window name behind the IP address, the page set up as default page in the window's properties will be displayed:
http://10.169.10.31/Window1
Certain pages can be accessed by typing in the respective window and page name and separate them with a hash tag (#):
http://10.169.10.31/Window1#Page1
If you would like to use the feature not only within a local area network (LAN), you may do so as well. First of all your router must be set up to allow access on the chosen port. Then it must be configured to forward this wide area network (WAN) request to the specific Widget Designer IP address within your local area network (LAN). Now you may enter your IP address and again the port number.
If you would like to use the feature for a longer period, keep in mind that you might not have a static IP address. Most providers assign a deviating IP address every 24h, thus you have a dynamic IP address. In that case, a ddns service (dynamic domain name system, e.g. dyndns.org) is very useful. The system provides a persistent domain name and points to a changing, dynamic IP address on the internet. Your router must support ddns in order to update the system's database.
Global Settings
If you want to change anything in this section, you need to stop the web server first by clicking the "Stop" button at the top left corner. Press the "Start" button to enable it again.
You can set the ports to custom values if needed and also adjust the amount of listeners. The last may come in handy, if you have a very large amount of clients accessing your project.
When you use group values, you can define your custom groups here. Just enter a valid name for a group, multiple groups can be separated either by a white space or a comma.
Sessions
The log text field lists for example whether a new session has connected to the web server as well as the respective session keys and the count of all clients connected via the session. The first session is always the internal GUI.
Group Values
If you work with group values, you will find a table with all values of all widgets according to their groups. For more information, please refer to the chapter Group Values.
If you would like to have an index page that is displayed instead of the page directory when you did not specify a certain page, switch to this page and edit the settings. Either right-click somewhere in the empty main background and choose Pages > Edit Page or open the Pages menu in the main menu bar and choose the command there. Tick the check box "Redirect to this page (when invalid URL is requested)".
If you would like to exclude pages from the web access, uncheck the box "Make this page accessible for external clients".
As WD V6 is natively based on HTML5, the main GUI and every client interface should look exactly the same. Depending on the browser version, there might occur slight differences, especially if exotic fonts are used.
Technically, it is very important to understand that all nodes, tools and all widgets are "live" in the Widget Designer. The web browser interface is a second interface, it represents what is set up in the main WD interface, it can be seen as an instance or copy of it.
Only the WD itself gives you the possibility to create new elements and to change their Item Properties.
For example, if you create a fader in WD, the browser adopts and displays a fader too. If you would like to change its look or value range, do so in Widget Designer and it will send the new properties to the web instances. So, the look of every interface will always be the same and the widget's Item Properties always match.
A widget can be actually used in both interfaces. Some of the most important widgets: Window, DropDown List, Fader, ColorPicker, Encoder, Wheel, InputBox, Label and TextBox are able to respond to Group Values. All others are always synched.
For example, you may change the fader's value by dragging its handle either in WD or in the web browser. Depending on the setting to have a synchronized session or to use group values, the other web copies of the fader will update too and move automatically to the new value; or in case of a group value setup, they can be only moved in the local interface, corresponding to the group. That means that a fader can not only hold one value but several ones and each web instance shows the same fader but with a different value, its own group value.
In a nutshell, the widgets' properties are identical, but their values can be customized separately.
A command only works in the Widget Designer application and is executed there. You may send a command, either from within the WD or a browser but it only affects the control in WD.
For example, if you send "WDFaderUp(ID,Seconds)" only the local WD Fader will actually do the fade. Of course, if you have a synchronized session, all web faders will fade too. This is not the case when using group values, as those faders are now detached.
Importantly, if you send a command that alters the appearance of a control, e.g. the color of a Custom Script Button (WDCustomScriptTint(ID,Red,Green,Blue)) again, this alters the local button and as the Item Properties always match, all other web buttons will be tinted in that color too.
Some of the property members of the group value compatible widgets can be alternated separately for each client using the widget's group items (e.g.: Label1.GroupItems.ForeColor). Please refer to the point Group Items for an overview of available widgets and properties.
A node can be used in WD only and similarly to commands, it works up local values. Also, no group values may be assigned to a widget that is used in combination with a node.
As mentioned above, Widgets can be multi-session controls and have different values per session (or other group participant). Widgets, pages and variables may have group values. It is possible to read these out and evaluate them or to process them in commands or variables. Please read the topic Group Values if you are interested in that feature.