README
Tsumami.js
This is a knob in place of a slider.
Installation
<script src="dist/tsumami.js"></script>
import Tsumami from 'tsumami.js';
Usage
const tsumamiValue = (()=>{
const val = Object.create(null);
Object.defineProperty(val, 'value', {
set: (value)=>{
//processing
}
});
return val;
})();
const option = {
obj: tsumamiValue
}
const tsumami = new Tsumami(option);
Options
Use | Variable Name | Default Value | Remarks |
---|---|---|---|
Size | size | 100 | |
Target | target | document.getElementById("tsumami") | |
Background Color | bgcolor | "red" | css color 1 |
Pinch Color | tmmcolor | "yellow" | css color 1 |
Meter Background Color | mbgcolor | "black" | css color 1 |
Meter Size | meterSize | 10 | |
Meter Angle | degree | 270 | 0~360 |
Meter Scale | scale | 1.2 | |
Min Value | min | 0 | min < max 2 |
Max Value | max | 100 | min < max 2 |
Value Obj | obj | "" | tsumamiValue |
Meter Color | mcolor | "blue" | css color 1 |
Point Color | point | "purple" | css color 1 |
Initial Value | value | 0 | min ≤ value ≤ max 2 |
Mode | mode | nomal | nomal or center |
Center Value | centerValue | 50 | 0 ≤ centerValue 3 |
[1] You can use any color specification method in css.(ex:color code,RGB,HSL)
However, it should be a string.
[2] Ignored if mode is center.
[3] Ignored if mode is nomal.
LINK
example : example
support : support
License
MIT License, Copyright (c) 2020 Akatsuki1910
Update
v2.0.0
Compatible with rotation from the center.
v1.0.2
Miss fixes.
v1.0.1
English Update
v1.0.0
release
v0.2.0
option add : Initial Value Create an example page. Bug fixes.
v0.1.0
First Update.