samples
client technologies
Here you will find a stack of client technology samples demonstrating how to use Perfect Widgets
Typescript Sample
This sample shows how to use Perfect Widgets when developing on TypeScrpt. It shows how to connect your project to the .d.ts file in order to use Perpetuum gauges as well as how to use Perfect Widgets library with TypeScript: how to add a gauge to the page and how to interact with it from code.
Knockout.js sample
This sample shows how to use Perfect Widgets together with Knockout.js bindings. It demonstrates one of the possible implementations of binding between the Knockout.js model and sliders of Perpetuum gauges and the model itself is bound to text fields. Thus, change of any of these three objects leads to update of the status of the remaining two objects.
Angular.js sample
This sample shows how to design Angular.js binding for the gauge slider and even more. Angular.js provides a rich set of tools for the creation of dynamic HTML pages and binding mechanism is very important as well. The sample shows how to write the supporting class and how to bind gauge parameters to Angular.js model parameters with the help of this class.
Ember.js sample
This sample shows basic aspects of using Perfect Widgets in Ember projects. It demonstrates adding of the widget container to a template, creation of a widget and binding slider value to the property value of the observable object.
React.js sample
This sample shows how to use Perfect Widgets as React.js components and interact with them. React.js provides a powerful UI framework with efficient update mechanism and clean component separation. The sample shows how to write the wrapping class in a proper way, how to make it data-updatable and how to realize its interaction with React state.
samples
perfect widgets
The following samples show various gauges and their integration into the web page
Satellite’s Location on Orbit
This sample demonstrates the creation of a non-standard HTML5 gauge control in perfect Widgets. The widget displays satellite’s location on some orbit. The satellite moves along 1 of 3 available trajectories; each of them is a sine.
HTML5(JavaScript) PushButton control
This sample demonstrates how to design HTML5 (JavaScript) push button control in Perfect Widgets designer in a couple of minutes.
HTML5 (JavaScript) Rating Control
This sample demonstrates how to design HTML5 (JavaScript) push button control in Perfect Widgets designer in a couple of minutes.
HTML5 (JavaScript) Check Box Control
This sample demonstrates how it is easy to create HTML5 (JavaScript) check box control in Perfect Widgets designer with the help of push button.
Satellite Dish Orientation Relative to Cardinal Points
This sample demonstrates the creation of a non-standard HTML5 gauge control in Perfect Widgets designer in just 15 minutes. The widget displays satellite dish and its orientation relative to cardinal points.
HTML5 (JavaScript) Car Dashboard
This live sample demonstrates how it is possible to simplify work with the complex gauge by wrapping a JavaScript object around it to make control names meaningful and make it easy to set gauge behavior.

review
other product resources