- 
+ 
+
+
+
+
+ LowStepper
+ +
+
+
+
+
+
+ EOC
+
+
+
+
+
+
+
+
+ OUTS
+
+
+
+
+
+
+
+ TRIG
-
+
+
+
+ TRIG 
-
-
+
+
-
+ Trig
-Click here to trigger the LFO.
- - - + +
+
+
+ CLK
+
+
+
+
+ CLK 
+
+
+
+
+ RST
+
+
+
+
+ RST 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RATE
+
+
+
+
+
+
+
+
+ MORPH
+
+
+
+
+
+
+
+
+ CHUNKS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{knobs.map((currentKnob) => (
-
+
+ 
);
}
diff --git a/lowstepper_wasm_demo/src/styles.css b/lowstepper_wasm_demo/src/styles.css
index afae2bf..5dea40a 100755
--- a/lowstepper_wasm_demo/src/styles.css
+++ b/lowstepper_wasm_demo/src/styles.css
@@ -1,28 +1,261 @@
-html, body {
- margin: 0;
- padding: 0;
-}
-
-.App {
-
- font-family: sans-serif;
- text-align: center;
-}
-
-p {
- font-size: 16px;
-}
-
-.container {
- width: 440px;
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- margin: 0 auto;
- margin-top:20px;
-}
-.container > * {
- padding: 20px;
-
-}
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+.App {
+
+ font-family: sans-serif;
+ text-align: center;
+}
+
+p {
+ font-size: 16px;
+}
+
+.container {
+ width: 440px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+
+ margin: 0 auto;
+ margin-top:20px;
+}
+.container > * {
+ padding: 20px;
+}
+
+#root {
+ background-color:#000000;
+ margin:-20px auto 0px;
+ max-width:596px;
+ position:relative;
+}
+
+ #root .guide{
+ display: none;
+ left:0px;
+ opacity:0.5;
+ position:absolute;
+ top:0px;
+ }
+
+ #root h1{
+ color:#fff;
+ padding:10px;
+ margin-bottom: 10px;
+ }
+
+ #root .white_hole{
+ position:absolute;
+ height:41px;
+ width:77px;
+ }
+ #root .white_hole.top{
+ top:0px;
+ }
+ #root .white_hole.bottom{
+ bottom:0px;
+ }
+ #root .white_hole.left{
+ left:50px;
+ }
+ #root .white_hole.right{
+ right:50px;
+ }
+
+ #root .container{
+ display: block;
+ margin:0px 30px;
+ }
+
+ #root .sideWrapper{
+ background-color: #ffffff;
+ border-radius: 80px;
+ float: right;
+ height: 621px;
+ margin:5px 19px 0px 0px;
+ width: 135px;
+ }
+ #root .trigBigWrapper{
+ float:left;
+ margin:0px 0px 0px 30px;
+ height:640px;
+ width:412px;
+ }
+ #root .trigWrapper{
+ display: block;
+ float:left;
+ margin-bottom:-5px;
+ margin-top: 10px;
+ padding:0px 9px 5px 9px;
+ text-align: left;
+ width: 119px;
+ }
+ #root .trigWrapper h3,
+ #root .sideWrapper h3{
+ font-size:26px;
+ margin: 0px;
+ padding:9px 0px 0px;
+ text-align: center;
+ }
+ #root .trigWrapper h3{
+ color:#ffffff;
+ }
+ #root .sideWrapper h3{
+ color:#000000;
+ }
+ #root .trigWrapper h3 img{
+ width:23px;
+ }
+ #root .buttonWrapper {
+ border-radius: 60px;
+ height:92px;
+ width:92px;
+ margin:0px;
+ padding:12px;
+ }
+ #root .buttonWrapper.red{
+ background-color: #df4b26;
+ }
+ #root .buttonWrapper.blue{
+ background-color: #4977bb;
+ }
+ #root .buttonWrapper.white{
+ background-color: #fff;
+ border: solid 1px #000;
+ border-radius: 60px;
+ height: 82px;
+ margin-bottom: 50px;
+ margin-left: 14px;
+ margin-top: 10px;
+ width: 82px;
+ }
+ #root .buttonWrapper.white.third_row{
+ margin-top:51px;
+ }
+ #root .sideWrapper h3{
+ margin:7px 0px 15px;
+ }
+ #root .sideWrapper h3.outsTitle{
+ margin-top:7px;
+ }
+
+ #root .buttonWrapper.white.first_row + .buttonWrapper{
+ margin-top:58px;
+ }
+ #root .buttonWrapper.white.third_row + .buttonWrapper{
+ margin-top:56px;
+ }
+ #root .buttonWrapper .button{
+ background-color:#fff;
+ border:solid 8px #000;
+ border-radius: 50px;
+ height:92px;
+ width:92px;
+ margin:0px;
+ padding:0px;
+ }
+ #root .buttonWrapper.white .button{
+ background-color: #000;
+ border: solid 1px #000;
+ position: relative;
+ left: -3px;
+ top: -3px;
+ width: 89px;
+ height: 89px;
+ }
+
+ #root .buttonWrapper .button:active {
+ background-color:#999;
+ }
+ #root .autoTrigBtn{
+ position: absolute;
+ }
+ #root .whiteLine{
+ clear: both;
+ background-color: #ffffff;
+ padding: 5px;
+ margin: 10px 0px 25px;
+ position: relative;
+ top: 16px;
+ left: -29px;
+ width:470px;
+ }
+
+ #root .wrapper_potentiometer {
+ margin:26px 30px 0px;
+ padding:0px;
+ position:relative;
+ width: 100%;
+ }
+ #root .wrapper_potentiometer h2{
+ margin-left:20px;
+ top:20px;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ }
+ #root .wrapper_potentiometer .bgKnob{
+ background-color: #000000;
+ border-radius: 100px;
+ left:38px;
+ max-height: 105px;
+ max-width: 105px;
+ padding: 20px;
+ position: relative;
+ top:-20px;
+ z-index: 100;
+ }
+ #root .wrapper_potentiometer .bgKnob.knobA{
+
+ }
+ #root .wrapper_potentiometer .bgKnob.knobB{
+ float:right;
+ margin-right:38px;
+ }
+ #root .wrapper_potentiometer .bgKnob > div{ /*KNOB*/
+ height:100px !important;
+ width:100px !important;
+
+ padding-top:5px;
+ }
+ #root .wrapper_potentiometer .parameterDescription {
+ display:none;
+ }
+
+ #root .wrapper_potentiometer input{
+ display: none;
+ }
+
+ #root .potentiometerWrapper .bg_potentiometer{
+ background-color:rgba(255,255,255,0.5);
+ border-radius:20px;
+ height:59px !important;
+ left:-40px;
+ margin-left:57px;
+ padding-top:17px;
+ position:absolute;
+ top:16px;
+ width:102% !important;
+ }
+
+ #root .wrapper_potentiometer input{
+
+ }
+
+ .knob {
+ width: 200px;
+ }
+
+ .knob .value {
+ font-family: sans-serif;
+ font-size: 5rem;
+ text-align: center;
+ }
+
+#root .okay_logo{
+ max-width:187px;
+ padding:0px 0px 30px;
+}
diff --git a/lowstepper_wasm_demo/src/types.d.ts b/lowstepper_wasm_demo/src/types.d.ts
new file mode 100644
index 0000000..710e2c9
--- /dev/null
+++ b/lowstepper_wasm_demo/src/types.d.ts
@@ -0,0 +1 @@
+declare module 'react-rotary-knob';
\ No newline at end of file
+
+
+
))}
{currentKnob.name}
+
+
+
+
+
{currentKnob.description}
+ @@ -224,6 +544,9 @@ export default function App() {
+
+