CommandFusion Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Dial / Knob Example ======

This demonstration GUI is designed to showcase the ability to create dials, volume knobs, etc, making heavy use of the powerful JavaScript API available in iViewer.

===== Usage =====

Add the dial.js file to your [[software:gui-designer|guiDesigner]] project.\\
Edit the dial.js to configure your settings at the very end of the code\\

==== Example code to create your own dial JavaScript object ====
<code javascript>
// Custom parameters
var newDial = new Dial("s1", {srcJoin: "s2", maxTime: 0.5, minTime: 0.3, angleOffset: -45, maxAngle: 260});
// Default parameters - just need to supply join number for the object to rotate
var newDial2 = new Dial("s10");
</code>

===== Video Demo =====

[[http://www.youtube.com/watch?v=jSSfOCH8hmg|Watch video demo on YouTube]]

===== Technical Implementation Details =====
The volume knob is made up of only two images - one for the dial markings and dial shadow, the other for the actual metallic dial itself.\\
The dial image itself is rotated using the iViewer JavaScript API and the [[http://www.commandfusion.com/docs/scripting/gui.html#cF.setProperties|CF.setProperties method]], along with the zrotation parameter.\\
\\
The rotation via touch is performed using gestures attached to the dial background image.\\
This, and some trigonometry math in JavaScript, allows a Pan gesture on the image to calculate the required angle to rotate the image to, based on the touch point on the image.\\
\\
==== Other points of note ====

The slider min and max value settings specific the min and max angles to rotate to when using the slider method to rotate the dial.\\
Repeat rate above zero on the + and - buttons allows press & hold functionality of the buttons to continuously call the JavaScript increment/decrement rotation functions.\\
There are @2x images in the demo GUI that Apple devices with [[software:gui-designer:retina-display|Retina displays will automatically load]] when required. But in guiDesigner, the layout always uses the non-@2x images.

[[https://github.com/CommandFusion/DemoUserInterfaces/tree/master/Dial|View on GitHub]]

[[https://github.com/downloads/CommandFusion/DemoUserInterfaces/dial.gui.zip|Download project from GitHub]]
\\
CommandFusion Wiki

User Tools

Site Tools

Page Tools
