Differences
This shows you the differences between two versions of the page.
| — |
jsapi:a_simple_example [2025/04/30 02:58] (current) optrix created |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====A Simple Live-Data Web Page==== | ||
| + | Below you'll find the code for a simple web-page that displays the current speed of the Paint Line on our demo server. | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <script src=" | ||
| + | </ | ||
| + | < | ||
| + | <div id=" | ||
| + | | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | //Create a connection | ||
| + | var connection = new HMITTPanel(); | ||
| + | |||
| + | //Subscribe to points | ||
| + | connection.Sub(" | ||
| + | | ||
| + | }); | ||
| + | |||
| + | //Connect to the server | ||
| + | connection.UseSSL(); | ||
| + | connection.Connect(" | ||
| + | |||
| + | </ | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===Smoothness=== | ||
| + | |||
| + | If you opened the HTML above, you'll notice that the data is **animated**. The library automatically smooths the transition between data updates by interpolating the incoming values over time. | ||
| + | |||
| + | While this works beautifully in some cases, there are types of data and visualisation that it isn't very useful for. | ||
| + | |||
| + | An optional 3rd parameter to ' | ||
| + | |||
| + | < | ||
| + | connection.Sub(" | ||
| + | | ||
| + | },true); | ||
| + | </ | ||
| + | |||
| + | ===More Complex Examples=== | ||
| + | |||
| + | This all works well if you only ever want to work with one data point at a time, but what happens when you want to compare point values, or perform analysis? | ||
| + | |||
| + | [[Introducing GetValue|Discover the GetValue function]] | ||