Documentation

Line Number

Description

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

Properties

Property name Description
Decimal Separator By default, the decimal separator in LineNumber is a dot character. When this field is filled with, e.g. a comma, all settings containing the dot character will have it replaced with a comma.
Min This is the minimum value on the axis.
Max This is the maximum value on the axis.
Ranges Correct ranges seperated by new lines. For examples, see the "Ranges" section below.
Not Activity When checked, no score (done, errors) is returned by the addon.
Step By default, the step in LineNumber is 1. Increase this value if you want the points on the axis to appear less frequently. Decrease this value if you want the points on the axis to appear more frequently.
Show Axis X Values When checked, the axis number values are shown.
Axis X Values Enables to define the values you want to be shown. You can specify single values, e.g. "2;3;-5", cyclic values, e.g."2*" or mixed values, e.g. "2*;5;3;-3.5;7*". The cyclic value means that every n-th occurrence will be shown.
Disable Disable module. It is not possible to select any range.
Don't show ranges This property allows clicking only one number on the line number to make a point. It is not possible to make a range.

Supported commands

Command name Params Description
drawRange String range, e.g. <1; 2); 1. For more examples, see the "Ranges" section below. Draw the range on the axis.
enable void Enables addon.
Disable void Disables addon.
show void Shows addon.
hide void Hides addon.

Events

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

Field name Description
Item It's a string representation of range.
Value The Value is 1 if the action performed was drawing, 0 if it was erasing.
Score It's 1 for the correct range drawn or 0 for wrong.

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

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

Field name Description
Item all
Value N/A
Score N/A

CSS classes

Please note that most of these propeties refer to svg css capabilities described here.

Class name Description
.addon_Line_Number .outer .infinity-left,
.addon_Line_Number .outer .infinity-right
Describes divs for infinity areas.
.addon_Line_Number .outer Describes a main wrapper.
.addon_Line_Number .inner Describes a main container.
.addon_Line_Number .x-axis Describes a container for step lines.
.addon_Line_Number .stepLine Describes step lines.
.addon_Line_Number .rangeImage Describes a container for range image.
.addon_Line_Number .currentMousePosition Describes a container for a current mouse position.
.addon_Line_Number .exclude Describes a situation when the range end is excluded from range.
.addon_Line_Number .include Describes a situation when the range end is within range.
.addon_Line_Number .correctRangeExclude Describes a situation when the range end is excluded from range and is correct.
.addon_Line_Number .correctRangeInclude Describes a situation when the range end is within range and is correct.
.addon_Line_Number .wrongRangeExclude Describes a situation when the range end is excluded from range and is wrong.
.addon_Line_Number .wrongRangeInclude Describes a situation when the range end is within range and is wrong.
.addon_Line_Number .clickArea Describes a clickable area.
.addon_Line_Number .stepText Describes text containers under step lines.
.addon_Line_Number .x-arrow Describes an arrow head.
.addon_Line_Number .selectedRange Describes a range.
.addon_Line_Number .correct Describes a range when it is correct.
.addon_Line_Number .wrong Describes a range when it is wrong.
.addon_Line_Number .currentSelectedRange Describes a range when it's clicked.
.addon_Line_Number .currentMousePosition Describes the background image for a current mouse position.
.addon_Line_Number .infinityRight Describes a range when its start is infinity.
.addon_Line_Number .infinityLeft Describes a range when its end is infinity.
.addon_Line_Number .infinityBoth Describes a range when its end and start are infinity.
.addon_Line_Number .infinity-hover Describes a range when it is on mouse hover.

If you define your own CSS class for this addon, 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

Character Explanation
< Include x in range
( Exclude x from range
x Beginning of range (must be higher or equal to Min value)
; Separator
y End of range (must be lower or equal to Max value)
> Include y in range
) Exclude y from range
0 or 1 on end It's a boolean value. If true, then the range will be drawn on init, otherwise it won't..

Examples:

Example Explanation
<1; 12); 1 Draw range on init from 1 (including) to 12 (excluding).
<-INF; 5); 1 Draw range on init from -Infinity to 5 (excluding).
<-5; 5>; 0 Don't draw range on init, but the correct range is from -5 (including) to 5 (including).
<-5; INF>; 0 Don't draw range on init, but the correct range is from -5 (including) to Infinity.
<-1.5; 1.5); 1 Draw range on init from -1.5 (including) to 1.5 (excluding).

Demo presentation

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