Documentation

Description

The Line Number module is used to draw the X axis ranges.

Properties

The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.

Supported commands

Events

The Line Number module sends the ValueChanged type events to the Event Bus when the user selects the range or a point on the axis.

If you are using the Advanced Connector, please note that due to the Regular Expression syntax which has special meaning for "-" and "." characters, you need to escape them with backslash.

When the user draws all ranges properly without any error, the module sends the 'ALL OK' event.

CSS classes

Please note that most of these properties refer to SVG CSS capabilities described in this documentation.

If you define your own CSS class for this module, you have to provide the style definition for all elements because the default styles are not provided in such a case.

For example:

.Line_Number_demo {}

.Line_Number_demo .outer .infinity-left,
.Line_Number_demo .outer .infinity-right {
    height: 100%;
    width: 5%;
    position: absolute;
    z-index: 9;
}

.Line_Number_demo .outer .infinity-left {
    left: 0px;
}

.Line_Number_demo .outer .infinity-right {
    right: 0px;
}

.Line_Number_demo .outer {
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    position: relative;
}

.Line_Number_demo .inner {
    width: 90%;
    height: 100%;
    position: absolute;
    left: 5%;
    background-color: #fefefe;
}

.Line_Number_demo .x-axis {
    width: 100%;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    position: absolute;
    z-index: 12;
    top: 50%;
    background-color: #111;
}

.Line_Number_demo .stepLine {
    width: 2px;
    height: 8px;
    min-height: 8px;
    background-color: #111;
    position: absolute;
    top: 50%;
    margin-top: -4px;
}

.Line_Number_demo .rangeImage,
.Line_Number_demo .currentMousePosition {
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -5px;
    top: -1px;
    z-index: 11;
    background-size: 12px 12px;
}

.Line_Number_demo .exclude {
    background-image: url('resources/range_exclude.svg');
}

.Line_Number_demo .include {
    background-image: url('resources/range_include.svg');
}

.Line_Number_demo .correctRangeExclude {
    background-image: url('resources/correct_range_exclude.svg');
}

.Line_Number_demo .correctRangeInclude {
    background-image: url('resources/correct_range_include.svg');
}

.Line_Number_demo .wrongRangeExclude {
    background-image: url('resources/wrong_range_exclude.svg');
}

.Line_Number_demo .wrongRangeInclude {
    background-image: url('resources/wrong_range_include.svg');
}

.Line_Number_demo .clickArea {
    width: 10px;
    height: 50px;
    top: -25px;
    min-height: 10px;
    min-width: 10px;
    position: absolute;
    z-index: 12;
    overflow: hidden;
}

.Line_Number_demo .stepText {
    position: absolute;
    font-size: 12px;
    top: 10px;
    white-space: nowrap;
}

.Line_Number_demo .x-arrow {
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
    border-top: 6px solid transparent;
    right: -5px;
    top: -5px;
    position: absolute;
}

.Line_Number_demo .clickArea:hover,
.Line_Number_demo .outer .infinity-left:hover,
.Line_Number_demo .outer .infinity-right:hover {
    cursor: pointer;
}

.Line_Number_demo .selectedRange {
    background-color: #00bb44;
    box-shadow: 0px 0px 1px #111;
    min-height: 10px;
    height: 10px;
    min-width: 2px;
    width: 2px;
    top: -7px;
    position: absolute;
    z-index: 10;
    border-radius: 5px 5px 0px 0px;
}

.Line_Number_demo .currentSelectedRange {
    background-color: #00aaff;
}

.Line_Number_demo .correct {
    background-color: #00ff44;
}

.Line_Number_demo .wrong {
    background-color: #ff3344;
}

.Line_Number_demo .currentMousePosition {
    background-image: url('resources/current_mouse_pos.svg');
}

.Line_Number_demo .infinityLeft {
    border-radius: 0px 5px 0px 0px;
}

.Line_Number_demo .infinityRight {
    border-radius: 5px 0px 0px 0px;
}

.Line_Number_demo .infinityBoth {
    border-radius: 0px;
}

.Line_Number_demo .infinity-hover {
    background-color: #d8d8d8;
}

Ranges

Range pattern:

< or ( x; y ) or >; 0 or 1

Examples:

Demo presentation

Demo presentation contains examples on how to use the Line Number module.