From 776343f4437ac6cc346bdc1b9d77013b70b7ff12 Mon Sep 17 00:00:00 2001 From: Mert Toka Date: Wed, 12 Apr 2017 02:37:42 -0700 Subject: [PATCH] illegal input feedback, login button animations, duration update bugfixes, minor layout arrangements --- .DS_Store | Bin 12292 -> 0 bytes .gitignore | 1 + config/config.json | 19 ++--- package.json | 2 +- src/actions/index.js | 24 +++--- src/actions/tworker.js | 3 - src/assets/_style.css | 2 +- src/components/App.css | 2 +- src/components/Home.css | 12 +++ src/components/Home.react.js | 131 ++++++++++++++++++------------- src/components/Live.react.js | 40 ++-------- src/components/Patterns.react.js | 49 +++++++----- src/components/Simple.react.js | 1 - 13 files changed, 150 insertions(+), 136 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 108cd34a5233fb7c82fab6b2bd3d4ba3d0d219f5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12292 zcmeHNYjE6F6+Xvt97$fsve&WKirp+uj1#ks?Zl6`X_ECLcG@Jw;I|WS_MyZAdF8CM zc1p(JwzRaJHl;0e8XkqFKubE5FvDZ$YYI$SC`?-h|A+(p0sg=b%0QWEXZXRnSK7_4 zyzVrUPD_jAk?z$w_h{v_pYC_=rv(7)PQ_aQHUoe_J8NYh9c~8*7E_zGF+bavZL7$F zw6CL``ZB-_n8)H~ENU3~veC;81!Q9Jg?x{LnjKG$H={GUW?Ie7OIWa~aCOldL6nNw zpIjz=V)^AfiDGq&FOE{s8 zVn~qV;;nKKnq# zv<}UviOYAjM-axDrz;*;m0mwWxg*Cq->0ESlHh?$3y!2c72z*aH}K`D(l7C zmEb!}z*0|gq{wR)*=R8+)^Q}uz|WO>r9mJV%LTT(Q3)}S%ByTI2VY#2SKD5K9RsXf zXnQ+Fg4=#kF0xN|D`AE{S+ED!E4`v1V;-Qb2(w2BWZ#FU;duhtuiqsgYM4Y5Q#gw! z@n*aQKaaQJ7x0UCAKq^R&IPx9X`tCHhhqkAvxCWmZX}MAkHOPN4~fC&yh)hmy%gxA zKAI$5>S^t=2uw01VU``U9jnNZgjjUWbRhiJI^`fujDuFhN}1h}`Y@sL8C*Bcp^7W3JmsCF16hLHl~6Y!;l9*EuurKqR4# zunAJrHR~opWPg)#;MA$M_O?*4wXFufX_2r%OuZ&aJ z=vdOw^#Q}w7@F4GPV4f(ca(GEAY__pWJ4mY;@cDQJVn|CU^ z^3hJYTvocLT2Zn{M-Voqzwr$Jh#3N+d7&1z(R6FV)2zTK=M6+Gz(QQ@5Kb*_!ELx5+h|_cNkp?3`)N)%NMtk0>EC;M4dFK8w%ci}))3*1pjU3H7IM+-~s_wGLnjooNa>ogbYw z{rmb$eK-E^qH`(DRFzc@NPFI4u3}78Q|sHX66SNcijDTw`8K7wibprpY;m}XyF)cw z9j@YDj#$oB+)G$>xQcss`Us<(tN3ZSrrY5vKDeQ#SiA~szC>Jg5&lA@&};BI{0ECM zfFB|>HW54Rp~8oiJ$-lx2XK)1X#^+nC`PILQ87W~&k5ou3+D-w3&c+hllS1g#83C* zSMh694t)b3!E^Woeh;6-^Y~MIisSSGzKpN9FuLD`(TkTc>f){3f!>*y0WSky2Cgmx zZ2ezE%SMB0;$xt}@%L?AyS=l8>e>!o*LJqIUTs~Qla%c0Hph|vwF9e=a~xU4ZyqT{ zD)x7kNhGD@5j(D|@XeIDS5VZtv=mzGN?FCLTTV%HKVSWp;j@CcD6cIok*fT8v=rv? zSNYvq3J(bSv$Pa$sh6^}6du|rWos$i)FkCmF|4iZwjd3|fwwi9?5<0PacNJu$BHN>6x0AJTWNR`7k z?MFIO#paVz++a)BvU%hbsaV-tBK5yFV0*Xp6zOg1Db-bh$_+t9lEH>DS7UPZ6v?fp zFaT!s6p5ghqo+u3p{GdoipXlzD}dTrT0EVHXW(b>BK!sxY3cM2c$2`j2FplH2{(b4M0X!*n-rjnR4MN24?%GFt%!<+aL>NdQc)H^1o zFxY(^A9g`5pPZ5dxfv^ZAZ1!fimQWRM=LR*iKrw(RHD%yqerNT7KR4(QY5sfWV2{w z6ZDhcf+?~_>CA)^bac(1bp4My*U$M}_c&LHoRNIqw>0(+%QKmTWGKw!N`^v-TunP| zo7wySy(|Czj}P(=UIx4jd@wVBg}sBl-Soeubzb+s$= { var maths = []; _.map(_.split(v, /[&]+/g), (p1, p2) => { - console.log(p1, p2); p1 = _.trim(p1); if(p1 !== "") maths.push(p1); @@ -523,7 +522,7 @@ export const sendPatterns = (server,vals, patterns =[], solo, transition, channe } var pattern = soloHolder + transitionHolder +globalTransformations+ newCommand + " " + globalCommands; - if (_.indexOf(channels,_k) === _.indexOf(channels, 'JV')){ + if (_.indexOf(channels,_k) === _.indexOf(channels, 'm1')){ pattern = "m1 $ " + newCommand; storedPatterns[_k-1] = ''; storedPatterns[_k-1] = pattern; @@ -541,7 +540,7 @@ export const sendPatterns = (server,vals, patterns =[], solo, transition, channe axios.post('http://' + server.replace('http:', '').replace('/', '').replace('https:', '') + '/patterns', { 'patterns': x }) .then((response) => { }).catch(function (error) { - console.log(error); + console.error(error); }); } } @@ -552,7 +551,7 @@ export const continousPattern = (server, pattern) => { axios.post('http://' + server.replace('http:', '').replace('/', '').replace('https:', '') + '/pattern', { 'pattern': [x,"sendOSC d_OSC $ Message \"tree\" [string \"command\", string \""+6+"\"]"] }) .then((response) => { }).catch(function (error) { - console.log(error); + console.error(error); }); } } @@ -619,7 +618,7 @@ export const consoleSubmit = (server, expression) => { axios.post('http://' + server.replace('http:', '').replace('/', '').replace('https:', '') + '/pattern', { 'pattern': [expression] }) .then((response) => { }).catch(function (error) { - console.log(error); + console.error(error); }); } } @@ -627,19 +626,16 @@ export const consoleSubmit = (server, expression) => { export const resetPattern = () => ({type: 'RESET_CC'}); export const fetchPattern = () => ({type: 'FETCH_CC'}); - - var timer = []; export function startIndividualTimer(_index,_duration, _steps) { - console.log("HERE"); - timerWorker[_index].postMessage({type : "start", id: _index, duration: _duration, steps: _steps, timer: timer[_index]}); + timerWorker[_index].postMessage({type : "start", id: _index, duration: _duration, steps: _steps, timer: timer[_index]}); } export const updateTimerduration = (_index,_duration,_steps) => { - //timerWorker[_index].postMessage({type : "update", id: _index, duration: _duration, steps: _steps,timer: timer[_index]}); - return { - type: 'UPDATE_TIMER', payload: _index, duration : _duration - } + if(_duration === "" || !isNaN(parseInt(_duration))) + return { + type: 'UPDATE_TIMER', payload: _index, duration : _duration + } } var timerWorker= []; diff --git a/src/actions/tworker.js b/src/actions/tworker.js index 79a9b45..ef4179b 100755 --- a/src/actions/tworker.js +++ b/src/actions/tworker.js @@ -1,9 +1,7 @@ self.onmessage=function(e){ if (e.data.type == "start") { var interval= e.data.duration / e.data.steps * 1000; - console.log("starting"); var t = setInterval(function(){postMessage({type:"tick", id:e.data.id, msg: t});},interval) - } else if (e.data.type == "update") { var interval= e.data.duration / e.data.steps * 1000; @@ -13,7 +11,6 @@ self.onmessage=function(e){ } } else if (e.data.type == "stop" || e.data.type == "pause") { - console.log("stopping"); clearInterval(e.data.timer); e.data.timer=null; diff --git a/src/assets/_style.css b/src/assets/_style.css index 2ab047e..9feb37d 100755 --- a/src/assets/_style.css +++ b/src/assets/_style.css @@ -8,7 +8,7 @@ */ -.cm-s-_style.CodeMirror { background: #f5f5f5; color: #202020; height: auto; } +.cm-s-_style.CodeMirror { background: #f5f5f5; color: #202020; height: 150px; } .cm-s-_style div.CodeMirror-selected { background: #3a3a3a; } .cm-s-_style .CodeMirror-line::selection, .cm-s-_style .CodeMirror-line > span::selection, .cm-s-_style .CodeMirror-line > span > span::selection { background: #487283; } .cm-s-_style .CodeMirror-line::-moz-selection, .cm-s-_style .CodeMirror-line > span::-moz-selection, .cm-s-_style .CodeMirror-line > span > span::-moz-selection { background: #487283; } diff --git a/src/components/App.css b/src/components/App.css index 3442bc5..fa39d7f 100755 --- a/src/components/App.css +++ b/src/components/App.css @@ -50,7 +50,7 @@ body { color: #ddd; border-bottom: 1px solid rgba(125,125,125, 0.8); font-size: 10px; - width:100px; + width: 95%; } diff --git a/src/components/Home.css b/src/components/Home.css index ce99db7..3b22a61 100755 --- a/src/components/Home.css +++ b/src/components/Home.css @@ -14,6 +14,18 @@ margin: 2px; } +@keyframes example { + from {color: white;} + to {color: rgba(255,255,102, 0.75);} +} + +#login { + animation-name: example; + animation-duration: 0.5s; + animation-iteration-count: infinite; + animation-direction: alternate; +} + .spinner { width: 40px; border: 0; diff --git a/src/components/Home.react.js b/src/components/Home.react.js index 0c9dde1..c0facc4 100755 --- a/src/components/Home.react.js +++ b/src/components/Home.react.js @@ -42,7 +42,7 @@ class Home extends Component { modelName : "Matrices", tidalServerLink: 'localhost:3001', steps: 8, - channels: ['1','2','3', '4', '5', 'JV', 'cps'], + channels: ['1','2','3', '4', '5', 'm1', 'cps'], timer: [], values: {}, scPattern: '', @@ -213,18 +213,12 @@ progressMatrices(items){ } }) - console.log("BEFORE DEBUG"); const nextObj = Object.values(items)[(i_save+1)%Object.values(items).length]; const model = fetchModel(ctx.state.modelName); _.forEach(nextObj.durations, function(d, i){ duration.push(d); }); - console.log("DEBUG"); - console.log(ctx.props.timer.timer); - console.log(nextObj); - console.log("DEBUG ENDS"); - updateMatrix(patterns, values, nextObj, transition, duration); ctx.setState({ activeMatrix : nextObj.matName, channelEnd : channelEnd, transition: nextObj.transitions}); @@ -307,13 +301,11 @@ updateMatrix(patterns, values, item, transition, duration) { const ctx = this; const {steps} = ctx.state; const items = this.props[this.state.modelName.toLowerCase()] - _.forEach(Object.values(items), function(d){ - console.log(d.matName + ' ' + d.sceneIndex); - }); - console.log(transition, duration); - // _.forEach(duration, function(d, i){ - // store.dispatch(updateTimerduration(i,d,steps)); - // }); + // DEBUG PRINTING + // _.forEach(Object.values(items), function(d){ + // console.log(d.matName + ' ' + d.sceneIndex); + // }); + // console.log(transition, duration); store.dispatch(updateMatrix(patterns, values, item, transition, duration,steps)); } @@ -339,6 +331,15 @@ renderPlayer() { const { channels, steps , timer, solo, soloSentinel,transition}=ctx.state; const playerClass="Player Player--" + (channels.length + 1.0) + "cols"; var count = 1; + const transitionValue = function(c){ + if(ctx.state.transition){ + return ctx.state.transition[_.indexOf(channels, c)]; + } + else { + return '' + } + }; + return (
@@ -357,7 +358,7 @@ renderPlayer() { {_.map(channels, c => { return @@ -371,8 +372,11 @@ updateDur = ({target : {value, id}}) => { const {channels,steps} = ctx.state; const {timer} = ctx.props; var _index = _.indexOf(channels,id); - if(value !== undefined && value !== "") + try { store.dispatch(updateTimerduration(_index,value,steps)); + } catch (e) { + console.error("Please input numbers only."); + } } _handleKeyPress = event => { @@ -384,30 +388,37 @@ _handleKeyPress = event => { var _index = _.indexOf(channels, _key); if(event.keyCode === 13 && event.ctrlKey){ - if(ctx.props.timer.timer[_index].isActive === true){ - store.dispatch(pauseIndividualTimer(_index)); + if(!isNaN(parseFloat(ctx.props.timer.timer[_index].duration)) && parseFloat(ctx.props.timer.timer[_index].duration) >= 1.) { + if(ctx.props.timer.timer[_index].isActive === true){ + store.dispatch(pauseIndividualTimer(_index)); + } + startIndividualTimer(_index, value,steps); + ctx.setState({play:true}); } - startIndividualTimer(_index, value,steps); - ctx.setState({play:true}); } else if (event.keyCode === 13 && event.shiftKey){ + // if(!isNaN(parseFloat(ctx.props.timer.timer[_index].duration)) && parseFloat(ctx.props.timer.timer[_index].duration) >= 1.) { if(ctx.props.timer.timer[_index].isActive === true){ store.dispatch(stopIndividualTimer(_index)); } + // } } } updateT = ({target : {value, id}}) => { - const ctx=this; + const ctx = this; const {transition, channels} = ctx.state; - const _key =id; - var value = value; - var _index = _.indexOf(channels, _key); + var _index = _.indexOf(channels, id); var temp = transition; - temp[_index] = value; - ctx.setState({transition:temp}); + if(temp){ + temp[_index] = value; + } + else { + temp = []; + } + ctx.setState({transition: temp}); } @@ -430,10 +441,21 @@ startTimer() { const ctx = this; const {channels, steps, play} = ctx.state; + var temp = []; for (var i = 0; i < channels.length; i++) { - startIndividualTimer(i, ctx.props.timer.timer[i].duration,steps); + if(isNaN(parseFloat(ctx.props.timer.timer[i].duration))) + temp.push(channels[i]); + } + + if(temp.length === 0){ + for (var i = 0; i < channels.length; i++) { + startIndividualTimer(i, ctx.props.timer.timer[i].duration, steps); + } + ctx.setState({play:true}); + } + else { + alert("Invalid duration values for: " + temp.toString()) } - ctx.setState({play:true}); } pauseTimer() { @@ -588,6 +610,10 @@ addItem() { fbcreateMatrix(ctx.state.modelName, { matName, patterns, values, sceneIndex: snd, uid, transitions: transition, durations: duration}); ctx.setState({sceneIndex: snd}); } + else { + alert("- Scene title should be longer than 1 characters.\n- There should be at least one character on the grid"); + } + ctx.setState({activeMatrix: matName}); } } @@ -656,25 +682,26 @@ renderItem(item, dbKey, i) { }); const updateMatrix = () => { - console.log(item.transitions); ctx.setState({ activeMatrix: item.matName, matName: item.matName, sceneSentinel: true, transition: item.transitions}); ctx.updateMatrix(patterns, values, item, transition, duration); } const handleDelete = ({ target: { value }}) => { - const payload = { key: dbKey }; - fbdelete(ctx.state.modelName, payload); - - // re-order all items after delete successfull - Firebase.database().ref("/matrices").once('child_removed').then(function(oldChildSnapshot) { - const items = ctx.props[ctx.state.modelName.toLowerCase()]; - ctx.setState({sceneIndex: (Object.values(items).length)}); - _.forEach(Object.values(items), function(d, i){ - fborder(ctx.state.modelName, {matName: d.matName, patterns: d.patterns, values: d.values, sceneIndex: i}, d.key); + if (confirm('Are you sure you want to delete this thing?')) { + const payload = { key: dbKey }; + fbdelete(ctx.state.modelName, payload); + + // re-order all items after delete successfull + Firebase.database().ref("/matrices").once('child_removed').then(function(oldChildSnapshot) { + const items = ctx.props[ctx.state.modelName.toLowerCase()]; + ctx.setState({sceneIndex: (Object.values(items).length)}); + _.forEach(Object.values(items), function(d, i){ + fborder(ctx.state.modelName, {matName: d.matName, patterns: d.patterns, values: d.values, sceneIndex: i}, d.key); + }); + }, function(error) { + console.error(error); }); - }, function(error) { - console.error(error); - }); + } } return item.key && ( @@ -742,24 +769,24 @@ renderMenu(){ return
User - {ctx.props.user.user.email && } - {!ctx.props.user.user.email && } + {ctx.props.user.user.email && } + {!ctx.props.user.user.email && }

- {!tidal.isActive && } - {tidal.isActive && } + {!tidal.isActive && } + {tidal.isActive && }
- {!play && } - {play &&
-
} + {!play && } + {play &&
+
}

- 0.1b + 0.1.1b
@@ -767,15 +794,13 @@ renderMenu(){ render() { const ctx=this; - const { tidal, timer, click }=ctx.props; - const { patterns, isCanvasOn }=ctx.props; - const { scPattern, tidalServerLink, play, values, steps, channels, songmodeActive, activeMatrix,storedPatterns }=ctx.state + const { timer}=ctx.props; + const { scPattern, channels, songmodeActive, activeMatrix,storedPatterns }=ctx.state const updateScPattern = event => { ctx.setState({scPattern: event.target.value}) } - const viewPortWidth = '100%' const items = ctx.props[ctx.state.modelName.toLowerCase()]; var historyOptions = { diff --git a/src/components/Live.react.js b/src/components/Live.react.js index 8019684..b92b199 100755 --- a/src/components/Live.react.js +++ b/src/components/Live.react.js @@ -2,29 +2,10 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import './Home.css'; -import { initMyTidal,sendScPattern, sendSCMatrix, sendPatterns,createTimer,timerThread, - startTimer, pauseTimer, stopTimer,updateTimerduration,startIndividualTimer,stopIndividualTimer,pauseIndividualTimer, - consoleSubmit, fbcreateMatrix, fbdelete,fborder, fetchModel, updateMatrix,assignTimer, - startClick,stopClick, changeUsername,continousPattern} from '../actions' -import {Layout, LayoutSplitter} from 'react-flex-layout'; -import NumberEditor from 'react-number-editor'; import Simple from './Simple.react'; -import Patterns from './Patterns.react'; -import Firebase from 'firebase'; -import store from '../store'; import _ from 'lodash'; -var options = { - mode: 'elm', - theme: 'base16-light', - fixedGutter: true, - scroll: true, - styleSelectedText:true, - showToken:true, - lineWrapping: true, - showCursorWhenSelecting: true -}; - +// NOT USED AT THE MOMENT class Live extends Component { constructor(props) { super(props); @@ -37,31 +18,22 @@ class Live extends Component { componentDidMount(props,state){ const ctx = this; const {scenes} = ctx.state; - const { tidal, timer, click } = ctx.props; - const { patterns, isCanvasOn } = ctx.props; const items = ctx.props[ctx.state.modelName.toLowerCase()]; _.each(items, function(d){ scenes.push(d); - console.log("D PUSHED" + scenes); }) //ctx.setState({scenes:scenes}); } render(){ - const ctx = this; - const {scenes} = ctx.state; - const { tidal, timer, click } = ctx.props; - const { patterns, isCanvasOn } = ctx.props; - const items = ctx.props[ctx.state.modelName.toLowerCase()]; - - + const ctx = this; - return
-
- {ctx.state.isCanvasOn && } + return
+
+ {ctx.state.isCanvasOn && } +
-
} } export default connect(state => state)(Live); diff --git a/src/components/Patterns.react.js b/src/components/Patterns.react.js index 05dec44..32120e6 100755 --- a/src/components/Patterns.react.js +++ b/src/components/Patterns.react.js @@ -1,8 +1,7 @@ import _ from 'lodash'; import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { fetchModel, fbcreate, fbupdate, fbdelete, - fbcreatepatterninscene, fbupdatepatterninscene, fbdeletepatterninscene } from '../actions'; +import { fbcreatepatterninscene, fbupdatepatterninscene, fbdeletepatterninscene } from '../actions'; import CodeMirror from 'react-codemirror'; import 'codemirror/lib/codemirror.css'; @@ -22,17 +21,29 @@ class Patterns extends Component { } } //Pattern Dictionary - addItem() { + addPattern() { + var flag = false; const ctx = this _.each(Object.values(ctx.props["matrices"]), function(d){ if(d.matName === ctx.props.active){ const { name } = ctx.state ctx.setState({sceneKey: d.key}); - if (name.length >= 3) { + if (name.length >= 1) { fbcreatepatterninscene('Matrices', {name}, d.key) } + else { + alert("Pattern title should contain at least 1 character."); + } + flag = true; } }) + if(!flag) { + const size = Object.keys(ctx.props["matrices"]).length; + if(size > 0) + alert("A scene needs to be active to add pattern."); + else + alert("You should add a scene first (Tip: on the left)"); + } } changeName({target: { value }}) { @@ -42,8 +53,6 @@ class Patterns extends Component { renderItem(item, dbKey) { const ctx = this; - const model = fetchModel(ctx.state.modelName); - const { params, sceneKey } = ctx.state; const handleChange = (obj) => { var value, name; if(obj.target !== undefined){ @@ -77,12 +86,13 @@ class Patterns extends Component { const handleDelete = () => { const payload = { key: item.key }; - _.each(Object.values(ctx.props["matrices"]), function(d){ - if(d.matName === ctx.props.active){ - ctx.setState({sceneKey: d.key}); - fbdeletepatterninscene('Matrices', payload, d.key) - } - }) + if(confirm(ctx.props.active + " will be deleted ??")) + _.each(Object.values(ctx.props["matrices"]), function(d){ + if(d.matName === ctx.props.active){ + ctx.setState({sceneKey: d.key}); + fbdeletepatterninscene('Matrices', payload, d.key) + } + }) } var options = { @@ -102,11 +112,13 @@ class Patterns extends Component {
  • -
    - - +
    + + +
    +
    +
    -
    @@ -121,7 +133,7 @@ class Patterns extends Component { render() { const ctx = this - const { modelName, name, sceneKey } = ctx.state; + const { modelName, name } = ctx.state; var items = ctx.props[modelName.toLowerCase()]; const scenes = Object.values(ctx.props["matrices"]); _.each(scenes, function(d){ @@ -134,7 +146,6 @@ class Patterns extends Component { }) const changeName = ctx.changeName.bind(ctx); - const addItem = ctx.addItem.bind(ctx); const renderItems = ctx.renderItems.bind(ctx); const viewPortWidth = '100%' @@ -143,7 +154,7 @@ class Patterns extends Component {
    - +
      diff --git a/src/components/Simple.react.js b/src/components/Simple.react.js index 52dd6a1..48c6323 100755 --- a/src/components/Simple.react.js +++ b/src/components/Simple.react.js @@ -65,7 +65,6 @@ class Simple extends React.Component { _onAnimate = () => { this._updatePhysics(); - console.log("onAnimate"); this._updateGraphics(); };