Cube
Create cool information object with Metro UI Cube component.
About
The cube is a visual component to provide the user with discrete information.
To create cube use attribute data-role="cube".
<div data-role="cube"></div>
Setup cells
You can setup cells with two attributes: data-cells and data-margin.
With data-cells you can set how many cells draw on cube side.
With data-margin you can set cells margin.
<div data-role="cube" data-cells="10" data-margin="2"></div>
Cube colors
You can setup cell color with attribute data-color and setup flashing color with attribute data-flash-color.
Value for data-color can be class name or hex color.
Value for data-flash-color must be hex color.
<div data-role="cube"
data-color="bg-cyan bd-darkCyan"
data-flash-color="#aa00ff"></div>
Flashing rules
By default cube has own set of rules for flashing. You can set your own rules set with attribute data-rule.
Value for this attribute must be object name where rules is stored.
<div data-role="cube" data-rules="myDemoRules2"></div>
<script>
var myDemoRules2 = [
{on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}},
{on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}},
{on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}},
{on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}},
{on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}},
{on: {'top': [11], 'left': [7], 'right': [6]}},
{on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}},
{on: {'top': [16], 'left': [4], 'right': [1]}}
];
</script>
To store rules use next format:
var myRules = [
{
on: {
'top': [cell_number, ...],
'left': [cell_number, ...],
'right': [cell_number, ...]
},
off: {
'top': [cell_number, ...],
'left': [cell_number, ...],
'right': [cell_number, ...]
}
},
...
];
On each step you must set cells for flash on and flash off.
Flash step must contain minimum on or off rule.
In example below present default rules set.
default_rules: [
{
on: {'top': [16], 'left': [4], 'right': [1]},
off: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]}
},
{
on: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]},
off: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}
},
{
on: {'top': [11], 'left': [7], 'right': [6]},
off: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}
},
{
on: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]},
off: {'top': [16], 'left': [4], 'right': [1]}
},
{
on: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]},
off: {'top': [12, 15], 'left': [3, 8], 'right': [2, 5]}
},
{
on: {'top': [13, 4], 'left': [1, 16], 'right': [13, 4]},
off: {'top': [11], 'left': [7], 'right': [6]}
},
{
on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]},
off: {'top': [8, 14], 'left': [2, 12], 'right': [9, 3]}
},
{
on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]},
off: {'top': [10, 7], 'left': [6, 11], 'right': [10, 7]}
}
]
Flash interval
To set flash interval use attribute data-flash-interval. By default this attribute has value 1000 ms.
<div data-role="cube" data-flash-interval="1000"></div>
Numbers of cells
When creating rules, it is useful to know the cell numbers and their location on the faces of the cube. Cells placed from left to right from top left side corner.
Axis
You can set visible cube axis. To set axis visible use attribute data-show-axis="true".
<div data-role="cube" data-show-axis="true"></div>
You can change axis color and style with attributes data-cls-axis, data-cls-axis-x, data-cls-axis-y, data-cls-axis-z and data-axis-style.
For attributes data-cls-axis* use custom class.
For data-axis-style use one of next values: arrow, line and no-style.
line
arrow
no-style
<div data-role="cube"
data-show-axis="true"
data-axis-style="line"
data-cls-axis="bg-dark"
data-rules=""></div>
<div data-role="cube"
data-show-axis="true"
data-axis-style="arrow"
data-cls-axis-x="bg-cyan"
data-cls-axis-y="bg-green"
data-cls-axis-z="bg-orange"
data-rules=""></div>
<div data-role="cube"
data-show-axis="true"
data-axis-style="no-style"
data-rules=""></div>
Events
When cube works, it generate the number of events. You can use callbacks for this events to interact with it.
| Event | Data-* | Desc |
|---|---|---|
| onTick(index, element) | data-on-tick |
Fired for each cube flashing step |
| onCubeCreate(element) | data-on-cube-create |
Fired when cube was created |
<div data-role="cube" data-on-tick="console.log(arguments)"></div>
See additional example on Codepen.io.
Cube methods
Cube has the number of methods to interact with it.
| Method | Desc |
|---|---|
start() |
Start flashing |
stop() |
Stop flashing |
rule(r) |
Set rules |
rule() |
Get rules |
axis(show) |
Set axis visibility. If parameter is true - axis is visible |
<div class="text-center">
<button class="button" onclick="setRules(myDemoRules1)">Rule set #1</button>
<button class="button" onclick="setRules(myDemoRules2)">Rule set #2</button>
<button class="button" onclick="setRules(myDemoRules3)">Rule set #3</button>
</div>
<div data-role="cube" id="demo-cube"></div>
<div class="text-center">
<button class="button"
onclick="Metro.getPlugin('#demo-cube','cube').axis(true)">Show axis</button>
<button class="button"
onclick="Metro.getPlugin('#demo-cube','cube').axis(false)">Hide axis</button>
</div>
<script>
function setRules(rules){
Metro.getPlugin('#demo-cube','cube').rule(rules)
}
</script>
My cube - my rules
You can customize cube component. For change cube visual style use attributes:
data-cls-cube,
data-cls-side,
data-cls-cell,
data-cls-side-left,
data-cls-side-right,
data-cls-side-top,
data-cls-axis,
data-cls-axis-x,
data-cls-axis-y,
data-cls-axis-z.
Use these attributes to set additional classes to cube elements.
Also you can set your own function for flashing cells with attribute data-custom. See example on codepen.io.