English | Русский

---

Round Interfaces Library

Round Interfaces Library is a collection of graphic objects classes for building round user interfaces.

Library Purpose

Round interfaces can be used to:

• diversify the design of a project or product;
• provide compactness when visualizing information;
• get a virtual version of the physical control interfaces or measuring instruments.

This library is being developed to simplify the process of designing and implementing round interfaces.

For example, round progress bar can be created with a few lines of code:

HTML:  

<canvas id="progress-bar" width="200" height="200">
    <div>Use a canvas-compatible browser</div>
</canvas>

JS:  

let canvas = document.getElementById('progress-bar');
let context = canvas.getContext('2d');
context.width = canvas.width;
context.height = canvas.height;
let cx = context.width/2;
let cy = context.height/2;

let bar = new SegmentProgressBar('bar', context, cx, cy, 50, 25);
bar.draw();

Tools

The library is written in JavaScript.
To render graphic elements, the HTML Canvas is used.

The documentation in English and Russian is supplied as part of the library in HTML and Markdown formats.
To use the library, you need basic knowledge of HTML and JavaScript.

Structure of project files and folders

js - main folder with library files. To use the library in your own project, just connect these files.

docs - main user documentation folder. The documentation is provided in HTML format.
docs-md - documentation in MD format for revision and use in your own projects.

examples - a folder with examples of using basic graphic objects.
gui-examples-js - a folder with examples of implementation of user interfaces composed of basic graphic objects.

Examples describe how to build the shape and animation of round interfaces.

css - folder with styles for examples.
svg - folder with vector images for examples.
sounds - folder with sound samples for testing the round equalizer

Basic elements of round interfaces (extended in the version 2.0 of the library)

1. Segment
2. SegmentGrid (new)
3. SegmentSpiral (new)
4. SegmentLevel
5. SegmentArray
6. SegmentDot
7. SegmentDotsArray
8. SegmentScaleMark
9. SegmentScaleSign (new)
10. SegmentScale
11. SegmentGradient
12. Utilities

Round controls (implemented in the version 2.0 of the library)

1. Progress Bar
   1.1. SegmentProgressBar
   1.2. SegmentArrayProgressBar
   1.3. SegmentDotsArrayProgressBar

2. Gauge
   2.1. SegmentArrow
   2.2. SegmentGauge

3. Timer
   3.1. SegmentTimer
   3.2. SegmentArrayTimer
   3.3. SegmentDotsArrayTimer
   3.4. SegmentGaugeTimer

4. Volume Control
   4.1. SegmentKnob
   4.2. SegmentSpiralVolumeControl
   4.3. SegmentArrayVolumeControl

5. SegmentEqualizer

6. SegmentCaptcha

7. SegmentChart

8. SegmentRadar

Round controls for graphics management (planned for development in the 3rd version of the library)

1. Icon Manager
2. Image Gallery
3. Round Interfaces Editor

License

This library can be used and modified for commercial, educational and personal purposes.
Error messages and recommendations for improvement can be sent to the author's email.

About Library

Version: 2.0

About Author

Author: Igor Tiunov
E-mail: igor@tiunovs.com