mui:

mui: is a user interface library designed for music and creative applications, written for vue.js

Originally it's been created as an exercise in designing and developing a system for building user interfaces based around basic components.

Please bare in mind, this is still an experimental phase and there is a lot of work and possible changes ahead.

These include:

Spin Trackpad Slide Pad

Installation

npm i music-ui-vue 

or:

yarn add music-ui-vue 

Import mui:

import  'music-ui-vue'
import  "music-ui-vue/mui.css";

Using mui:

Each of the components can be customised via set of props.

throttle - defines the ratio in the speed of the interaction and output change rangeout - defines the component output range start - the default value step - the amount of growth decimals - defines the precision

mui-spin

<mui-spin :label="'SPIN DEMO'"     
:throttle =".01"    
:rangeout="{min:0,max:1}"    
:start="0.01"    
:step = ".001"    
:decimals = "3"    
/>

mui-slide

<mui-slide :label="'SLIDE'"  class="mui-slider-demo"    
:throttle ="1"    
:rangeout="{min:0,max:100}"    
:start="50"    
:step = "1"    
:decimals = "0"    
/>

mui-trackpad

<mui-trackpad    
:label="'TRCKPD DEMO '"    
:rangeout="{x:{min:0,max:1},y:{min:0,max:1}}"    
:start="{x:0,y:0}"    
:throttle =".2"    
:step = "{x:0.05,y:0.05}"    
:decimals = "2"    
/>

mui-pad

<mui-pad 
:w="80" 
:h="80" 
:padding="0"  
mode="toggle"  
label="Pad"
:index="0"
/>

mui-pad due to specific type of interaction uses specific props, like mode, which can be defined as:

toggle – switch in between on & off states hold – remains active as long as the interaction continues shot – sends out a single hit, requires additional sustain prop to define the hit length in milliseconds

Events:

onchange – pad only, returns object with pad's index value, fires twice – at the start and the end of the interaction

update – spin, slide and trackpad use this event to broadcast new value

Listening to the events:

@onchange="updateData"

Event data can be a Number, or an Object

Design tokens

These are CSS variables, that allow you to customise visual properties of the components. You can overwrite them by assigning a CSS class to the components and re-defining the value of the variable:

.demo{
	--mui-background: rgba(192, 240, 16, 0.7);
}

General

--mui-background:rgba(255,255,255,1);
--bounding-rect-border-color:black;
--bounding-rect-border-width:1; 

Label

--mui-label-fill:rgba(0,0,0,0);
--mui-label-text-color:white;    
--mui-label-text-color:black;    
--mui-label-font-size:10px;

Pad

--mui-c-on:yellow;
--mui-c-off:rgba(255,255,255,1);
--mui-c-flash:yellow;

Spin

--mui-spin-pointer-line-color:rgba(0,0,0,1);
--mui-spin-pointer-line-width:1;
--mui-spin-circle-color:rgba(0,0,0,1);
--mui-spin-circle-fill:rgba(0,0,0,0);
--mui-spin-circle-width:1;

Slide

--mui-slide-rect-fill:rgba(255,255,0,.8);
--mui-slide-line-stroke:rgba(0,0,0,1);
--mui-slide-line-stroke-width:1;

Trackpad

--mui-trpd-dot-fill:rgba(0,0,0,1);
--mui-trpd-dot-stroke:none;
--mui-trpd-dot-stroke-width:0;
--mui-trpd-line-stroke:rgba(0,0,0,1);
--mui-trpd-line-stroke-width:1;

Written with StackEdit.