How to use nexusui - 10 common examples
To help you get started, we’ve selected a few nexusui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mimic-sussex / sema / src / index.js View on Github 
function createNexusUI() {
// window.AudioEngine.initWithAudioContext(NexusUI.context);
let analysers = document.getElementsByClassName("analysers");
NexusUI.context = window.AudioEngine.audioContext;
oscilloscope = new NexusUI.Oscilloscope("oscilloscope", {
// size: default
});
oscilloscope.colorize("fill", "#000");
oscilloscope.colorize("accent", "#FFF");
// window.AudioEngine.addAnalyser(oscilloscope); // Inject oscilloscope analyser, keep encapsulation for worklet node
oscilloscope.connect(window.AudioEngine.audioWorkletNode);
spectrogram = new NexusUI.Spectrogram("spectrogram", {
// size: [100, 50]
});
spectrogram.colorize("fill", "#000");
spectrogram.colorize("accent", "#FFF");
// window.AudioEngine.addAnalyser(spectrogram); // Inject oscilloscope analyser, keep encapsulation for worklet node
spectrogram.connect(window.AudioEngine.audioWorkletNode);
window.addEventListener("resize", function(event) {
// oscilloscope.resize(100, 120);
// spectrogram.resize(100, 150);
// console.log(analysers);
});
// window.AudioEngine.connectAnalysers();
}drawingControlsElem.appendChild(clearbuttonElem);
let clearbutton = new Nexus.TextButton('#clear-button',{
'size': [150,50],
'state': false,
'text': 'Clear all'
});
clearbutton.textElement.style.fontSize = '16px';
clearbutton.on('change', (event) => { if (clearbutton.state) {canvas.clear().renderAll()}});
let sendbuttonElem: HTMLElement = document.createElement("div");
sendbuttonElem.id = 'send-button';
drawingControlsElem.appendChild(sendbuttonElem);
let sendbutton = new Nexus.TextButton('#send-button',{
'size': [150,50],
'state': false,
'text': 'Send'
});
sendbutton.on('change', (e) => {if (sendbutton.state) {send_callback();}});
sendbutton.textElement.style.fontSize = '16px';
// var canvasElem2: HTMLCanvasElement = document.createElement("canvas");
// canvasElem2.id = 'c2';
// canvasElem2.height = 220;
// canvasElem2.width = time_step * maximum_sixteenth_notes;
// document.body.appendChild(canvasElem2);
// canvas2 = new fabric.Canvas('c2', { selection: false });
// Initialize_edition_mode();m.shapes().arm.attr("stroke", "#EEE");
bpmSliderRecord.on('change', function(value){
m.stop();
if (record_button.state) {
m.start(value, 10000);
}
});
let startRecord = document.createElement('div')
startRecord.id = 'startRecord';
startRecord.style.position = 'absolute';
startRecord.style.top = '0px';
metronome_container.appendChild(startRecord);
let record_button = new Nexus.TextButton('#startRecord',{
'size': [150,50],
'state': false,
'text': 'Start recording',
'alternateText': 'Stop recording'
});
record_button.textElement.style.fontSize = '17px';
record_button.on('change', (e) => { if (record_button.state) {
startRecording();
m.start(bpmSliderRecord.value, 10000);
}
else {
m.stop();
var _AudioFormat = "audio/wav";
stopRecording( function(AudioBLOB) {
// callback for exportWAV// Default mode : free drawing mode
Initialize_free_mode();
let drawingControlsElem: HTMLDivElement = document.createElement('div');
drawingControlsElem.id = 'drawing-controls';
drawingControlsElem.style.display = 'grid';
drawingControlsElem.style.gridTemplateColumns = 'repeat(5, 2fr)';
drawingControlsElem.style.width = '50%';
document.body.appendChild(drawingControlsElem);
let selectCompoModebuttonElem: HTMLElement = document.createElement("div");
selectCompoModebuttonElem.id = 'select-compo-mode-button';
drawingControlsElem.appendChild(selectCompoModebuttonElem);
let selectCompoModebutton = new Nexus.TextButton('#select-compo-mode-button',{
'size': [200,50],
'state': false,
'text': 'Composition mode : Edit',
'alternateText' : 'Composition mode : Modify'
});
selectCompoModebutton.textElement.style.fontSize = '16px';
selectCompoModebutton.on('change', (event) => { if (selectCompoModebutton.state) {Initialize_modif_mode(composition_mode);}
else {if (selectDrawingModebutton.state) {Initialize_linear_mode();}
else {Initialize_free_mode();}}
});
let selectDrawingModebuttonElem: HTMLElement = document.createElement("div");
selectDrawingModebuttonElem.id = 'select-mode-button';
drawingControlsElem.appendChild(selectDrawingModebuttonElem);// Simple module to store and share the color parameters for Nexus UI
import * as Nexus from 'nexusui'
// TODO: use CSS classes!
// this will allow to share the colors with non-Nexus UI elements, e.g. icons
Nexus.colors.accent = 'lightpink'; // '#f40081'; // light pink
Nexus.colors.fill = '#e5f5fd'; // light blue // '#f0f2ff'; // lilac triadic to '#
export = Nexuslet UrlTimerangeChange = 'timerange-change';
import * as Nexus from 'nexusui';
import * as $ from "jquery";
import './styles/osmd.scss'
import './styles/main.scss'
Nexus.colors.accent = '#ffb6c1'; // '#f40081'; // light pink
Nexus.colors.fill = '#e5f5fd'; // light blue // '#f0f2ff'; // lilac triadic to '#ffb6c1'
function set_font_size (nex_but, size) {
nex_but.textElement.style.fontSize = size;
};
export function make_voices_lockets() {
let voiceBar: HTMLDivElement = document.createElement('div')
voiceBar.id = 'voice-controls';
document.body.appendChild(voiceBar);
let no_voice_locked = document.createElement('div')
no_voice_locked.id = 'no_voice_locked';
voiceBar.appendChild(no_voice_locked);
var no_voice_button = new Nexus.TextButton('#no_voice_locked',{
'size': [60, 40],let UrlTimerangeChange = 'timerange-change';
import * as Nexus from 'nexusui';
import * as $ from "jquery";
import './styles/osmd.scss'
import './styles/main.scss'
Nexus.colors.accent = '#ffb6c1'; // '#f40081'; // light pink
Nexus.colors.fill = '#e5f5fd'; // light blue // '#f0f2ff'; // lilac triadic to '#ffb6c1'
function set_font_size (nex_but, size) {
nex_but.textElement.style.fontSize = size;
};
export function make_voices_lockets() {
let voiceBar: HTMLDivElement = document.createElement('div')
voiceBar.id = 'voice-controls';
document.body.appendChild(voiceBar);
let no_voice_locked = document.createElement('div')
no_voice_locked.id = 'no_voice_locked';
voiceBar.appendChild(no_voice_locked);
var no_voice_button = new Nexus.TextButton('#no_voice_locked',{
'size': [60, 40],
'state': false,// Simple module to store and share the color parameters for Nexus UI
import * as Nexus from 'nexusui'
// TODO: use CSS classes!
// this will allow to share the colors with non-Nexus UI elements, e.g. icons
Nexus.colors.accent = 'lightpink'; // '#f40081'; // light pink
Nexus.colors.fill = '#e5f5fd'; // light blue // '#f0f2ff'; // lilac triadic to '#
export = Nexusfunction createNexusUI() {
// window.AudioEngine.initWithAudioContext(NexusUI.context);
let analysers = document.getElementsByClassName("analysers");
NexusUI.context = window.AudioEngine.audioContext;
oscilloscope = new NexusUI.Oscilloscope("oscilloscope", {
// size: default
});
oscilloscope.colorize("fill", "#000");
oscilloscope.colorize("accent", "#FFF");
// window.AudioEngine.addAnalyser(oscilloscope); // Inject oscilloscope analyser, keep encapsulation for worklet node
oscilloscope.connect(window.AudioEngine.audioWorkletNode);
spectrogram = new NexusUI.Spectrogram("spectrogram", {
// size: [100, 50]
});
spectrogram.colorize("fill", "#000");
spectrogram.colorize("accent", "#FFF");
// window.AudioEngine.addAnalyser(spectrogram); // Inject oscilloscope analyser, keep encapsulation for worklet node
spectrogram.connect(window.AudioEngine.audioWorkletNode);
window.addEventListener("resize", function(event) {// document.body.appendChild(recordContainer);
let metronome_container: HTMLElement = document.createElement('div');
metronome_container.id = 'metronome_container';
document.body.appendChild(metronome_container);
let bpmSliderRecordElem: HTMLElement = document.createElement('div');
bpmSliderRecordElem.setAttribute('id', 'bpm-slider-record');
metronome_container.appendChild(bpmSliderRecordElem);
let bpmCounterRecordElem: HTMLElement = document.createElement('div');
bpmCounterRecordElem.setAttribute('id', 'bpm-counter-record');
bpmCounterRecordElem.style.pointerEvents = 'none';
bpmCounterRecordElem.style.margin = 'auto';
metronome_container.appendChild(bpmCounterRecordElem);
let bpmSliderRecord = new Nexus.Slider('#bpm-slider-record', {
'size':[150, 40],
'min': 80,
'max': 130,
'step': 1
});
let bpmCounterRecord = new Nexus.Number('#bpm-counter-record', {
'size': [50, 30],
'min': 80,
'max': 130,
'step': 1
});
bpmCounterRecord.link(bpmSliderRecord);
bpmSliderRecord.value = 110;
let m = metronome({
len: 200,
