Skip to content

P
pianoApp
Commit f297bc97 authored by norhalimah's avatar norhalimah
Browse files
Options

updating

parent f4f3a657
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 54 deletions
screens/metronome.js
View file @ f297bc97
...@@ -16,7 +16,7 @@ import { ...@@ -16,7 +16,7 @@ import {
TouchableOpacity, TouchableOpacity,
BackHandler, BackHandler,
//Pressable, //Pressable,
TextInput, //TextInput,
SafeAreaView, SafeAreaView,
Dimensions, Dimensions,
ScrollView, ScrollView,
...@@ -105,7 +105,7 @@ class MetronomeSkill extends React.Component { ...@@ -105,7 +105,7 @@ class MetronomeSkill extends React.Component {
//if (Moved > 10 ) { //if (Moved > 10 ) {
var Tm = Moved / 360; var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm); this._rotationAnimation.setValue(Tm);
console.log('move'); //console.log('move');
// this.setState({tempo: this.state.tempo + 1}); // this.setState({tempo: this.state.tempo + 1});
// this.rightUp(); // this.rightUp();
this.leftDown(); this.leftDown();
...@@ -114,7 +114,7 @@ class MetronomeSkill extends React.Component { ...@@ -114,7 +114,7 @@ class MetronomeSkill extends React.Component {
// if (Moved > -80 && Moved < -10) { // if (Moved > -80 && Moved < -10) {
var Tm = Moved / 360; var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm); this._rotationAnimation.setValue(Tm);
console.log('move anti'); // console.log('move anti');
//this.setState({tempo: this.state.tempo - 1}); //this.setState({tempo: this.state.tempo - 1});
// this.leftDown(); // this.leftDown();
this.rightUp(); this.rightUp();
...@@ -165,18 +165,20 @@ class MetronomeSkill extends React.Component { ...@@ -165,18 +165,20 @@ class MetronomeSkill extends React.Component {
isEnabled: true, isEnabled: true,
showPendulum:true, showPendulum:true,
barTempoH : config.deviceHeight * 0.09, barTempoH : config.deviceHeight * 0.09,
showkeypad:false,
tempoText: 0,
// num : 0, // num : 0,
}; };
} }
toggleKeyword = (keyword) => { /*toggleKeyword = (keyword) => {
console.log(keyword); // console.log(keyword);
}; };
onSubmit = () => { onSubmit = () => {
console.log('Submit'); console.log('Submit');
}; }; */
homeExit = async () => { homeExit = async () => {
this.props.navigation.navigate('1'); this.props.navigation.navigate('1');
...@@ -190,14 +192,14 @@ class MetronomeSkill extends React.Component { ...@@ -190,14 +192,14 @@ class MetronomeSkill extends React.Component {
componentDidMount() { componentDidMount() {
//this.animate(); //this.animate();
//this.removeArray(); this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit); BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToPortrait(); Orientation.lockToPortrait();
// this.displayData(); // this.displayData();
} }
componentWillUnmount() { componentWillUnmount() {
// this.removeArray(); // this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit); BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval); //clearInterval(this.interval);
// Orientation.lockToLandscape(); // Orientation.lockToLandscape();
...@@ -205,8 +207,29 @@ class MetronomeSkill extends React.Component { ...@@ -205,8 +207,29 @@ class MetronomeSkill extends React.Component {
';'; ';';
//reset //reset
removeArray = () => { removeArray = () => {
console.log('Remove'); let index = -1;
// console.log(barTempo.length);
// console.log(this.state.beat);
if (barTempo.length < 4) {
for (var j = barTempo.length; j < 4; j++) {
barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
}
this.setState({beat: barTempo.length});
}
else {
this.setState({beat: 4});
for (var j = barTempo.length; j > this.state.beat; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
}
}}
barTempo.map((item,id) => {
item.active = true;
});
}; };
//beat //beat
...@@ -230,8 +253,8 @@ class MetronomeSkill extends React.Component { ...@@ -230,8 +253,8 @@ class MetronomeSkill extends React.Component {
miniBar.splice(-index, 1); miniBar.splice(-index, 1);
} }
} }
console.log(this.state.beat); // console.log(this.state.beat);
console.log(barTempo); // console.log(barTempo);
}; };
beatUp = async () => { beatUp = async () => {
...@@ -242,7 +265,7 @@ class MetronomeSkill extends React.Component { ...@@ -242,7 +265,7 @@ class MetronomeSkill extends React.Component {
this.setState({beat: this.state.beat + 1}); this.setState({beat: this.state.beat + 1});
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}],active:true}); barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}],active:true});
miniBar.push({image:this.state.image}); miniBar.push({image:this.state.image});
console.log(barTempo); // console.log(barTempo);
} }
}; };
...@@ -511,10 +534,10 @@ class MetronomeSkill extends React.Component { ...@@ -511,10 +534,10 @@ class MetronomeSkill extends React.Component {
} }
keepTap = async () => { keepTap = async () => {
randomTempo = Math.floor(Math.random() * 300); randomTempo = Math.floor(Math.random() * 400) + 10;
console.log(randomTempo); //console.log(randomTempo);
this.setState({tempo:randomTempo}); this.setState({tempo:randomTempo});
if (this.state.tempo > 10 && this.state.tempo <= 19){ if (this.state.tempo > 10 && this.state.tempo <= 19){
this.setState({tempoName:'Larghissimo'}); this.setState({tempoName:'Larghissimo'});
} }
if (this.state.tempo > 19 && this.state.tempo <= 40){ if (this.state.tempo > 19 && this.state.tempo <= 40){
...@@ -575,7 +598,7 @@ class MetronomeSkill extends React.Component { ...@@ -575,7 +598,7 @@ class MetronomeSkill extends React.Component {
//note //note
toneDown = () => { toneDown = () => {
console.log('Down'); // console.log('Down');
if (this.state.toneSound === 1) { if (this.state.toneSound === 1) {
this.setState({toneSound: 1, soundName: sound1}); this.setState({toneSound: 1, soundName: sound1});
} }
...@@ -635,73 +658,182 @@ getRotationAnimation = () => { ...@@ -635,73 +658,182 @@ getRotationAnimation = () => {
money = async() =>{ money = async() =>{
let index = -1; let index = -1;
console.log('money'); // console.log('money');
//console.log(barTempo);
this.setState({tempo:126}); this.setState({tempo:126});
this.setState({tempoName:'Allegro'}); this.setState({tempoName:'Allegro'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
if (barTempo.length < 7) { if (barTempo.length < 7) {
for (var j = barTempo.length; j < 7; j++) { for (var j = barTempo.length; j < 7; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true}); barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
} }
this.setState({beat: barTempo.length}); // this.setState({beat: barTempo.length});
} }
if (barTempo.length > 7){ if (barTempo.length > 7){
console.log(barTempo.length); //console.log(barTempo);
for (var j = barTempo.length; j > 7; j--) { for (var j = barTempo.length; j > 7; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) { if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1); barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
} }
} }
this.setState({beat: barTempo.length});
} }
this.setState({beat: 7});
// console.log(barTempo);
}; };
jude = async () =>{ jude = async() =>{
console.log('hey jude'); // console.log('hey jude');
// console.log(barTempo);
this.setState({tempo:74}); this.setState({tempo:74});
this.setState({tempoName:'Andante'}); this.setState({tempoName:'Andante'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1; let index = -1;
if (barTempo.length < 4) { if (barTempo.length < 4) {
for (var j = barTempo.length; j < 4; j++) { for (var j = barTempo.length; j < 4; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true}); barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
} }
this.setState({beat: barTempo.length}); //this.setState({beat: barTempo.length});
} }
if (barTempo.length > 4){ if (barTempo.length > 4){
// console.log(barTempo.length); // console.log(barTempo.length);
for (var j = barTempo.length; j > 4; j--) { for (var j = barTempo.length; j > 4; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) { if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1); barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
} }
} }
this.setState({beat: barTempo.length});
console.log(barTempo.length);
} }
this.setState({beat: 4});
// console.log(barTempo);
}; };
cajon = async () =>{ cajon = async () =>{
console.log('cajon rhythm'); //console.log('cajon rhythm');
//console.log(barTempo);
this.setState({tempo:300}); this.setState({tempo:300});
this.setState({tempoName:'Prestissimo'}); this.setState({tempoName:'Prestissimo'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1; let index = -1;
if (barTempo.length < 8) { if (barTempo.length < 8) {
for (var j = barTempo.length; j < 8; j++) { for (var j = barTempo.length; j < 8; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active :true}); barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active :true});
miniBar.push({image:this.state.image});
} }
this.setState({beat: barTempo.length}); // this.setState({beat: barTempo.length});
} }
if (barTempo.length > 8){ if (barTempo.length > 8){
// console.log(barTempo.length); // console.log(barTempo.length);
for (var j = barTempo.length; j > 8; j--) { for (var j = barTempo.length; j > 8; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) { if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1); barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
} }
} }
this.setState({beat: barTempo.length});
console.log(barTempo.length);
} }
this.setState({beat: 8});
// console.log(barTempo);
}; };
setTempoText(textT){
// console.log(textT.toString());
// console.log(this.state.tempoText.length);
if (this.state.tempoText.length === 3) {
console.log('Limit 3');
}
else {
if (this.state.tempoText === 0 ) {
this.setState({tempoText: textT});
}
else {
this.setState({tempoText: this.state.tempoText.toString().concat(textT.toString())});
}
}
//console.log(this.state.tempo);
}
setTempo(tempoT) {
// console.log(tempoT);
if (tempoT < 10) {
this.setState({tempo:10, tempoText:10});
this.setState({tempoName:'Larghissimo'});
console.log(this.state.tempo);
}
else if (tempoT > 500) {
this.setState({tempo:500, tempoText:500});
this.setState({tempoName:'Prestissimo'});
console.log(this.state.tempo);
}
else { this.setState({tempo:tempoT, tempoText:tempoT});
console.log(this.state.tempo);
if (tempoT > 10 && tempoT <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (tempoT > 19 && tempoT <= 40){
this.setState({tempoName:'Grave'});
}
if (tempoT > 40 && tempoT <= 45){
this.setState({tempoName:'Lento'});
}
if (tempoT > 45 && tempoT <= 50){
this.setState({tempoName:'Largo'});
}
if (tempoT > 50 && tempoT <= 55){
this.setState({tempoName:'Larghetto'});
}
if (tempoT > 55 && tempoT <= 65){
this.setState({tempoName:'Adagio'});
}
if (tempoT > 65 && tempoT <= 69){
this.setState({tempoName:'Adagietto'});
}
if (tempoT > 69 && tempoT <= 72){
this.setState({tempoName:'Andante moderato'});
}
if (tempoT > 72 && tempoT <= 77){
this.setState({tempoName:'Andante'});
}
if (tempoT > 77 && tempoT <= 83){
this.setState({tempoName:'Andantino'});
}
if (tempoT > 83 && tempoT <= 85){
this.setState({tempoName:'Marcia moderato'});
}
if (tempoT > 85 && tempoT <= 97){
this.setState({tempoName:'Moderato'});
}
if (tempoT > 97 && tempoT <= 109){
this.setState({tempoName:'Allegretto'});
}
if (tempoT > 109 && tempoT <= 132){
this.setState({tempoName:'Allegro'});
}
if (tempoT > 132 && tempoT <= 140){
this.setState({tempoName:'Vivace'});
}
if (tempoT > 140 && tempoT <= 150){
this.setState({tempoName:'Vivacissmo'});
}
if (tempoT > 150 && tempoT <= 167){
this.setState({tempoName:'Allegrissma'});
}
if (tempoT > 167 && tempoT <= 177){
this.setState({tempoName:'Presto'});
}
if (tempoT > 177 && tempoT <= 500){
this.setState({tempoName:'Prestissimo'});
}
}
this.setState({showkeypad: false, tempoText:0});
}
toggleSwitch = () => { toggleSwitch = () => {
if (this.state.isEnabled === false) if (this.state.isEnabled === false)
{this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});} {this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});}
...@@ -712,7 +844,7 @@ getRotationAnimation = () => { ...@@ -712,7 +844,7 @@ getRotationAnimation = () => {
pendulum (){ pendulum (){
const movingMargin = this.animatedValue.interpolate({ const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1], inputRange: [0, 0.5, 1],
outputRange: [0, 300, 1], outputRange: [0, 290, 1],
}); });
if (this.state.showPendulum){ if (this.state.showPendulum){
return ( return (
...@@ -721,6 +853,7 @@ getRotationAnimation = () => { ...@@ -721,6 +853,7 @@ getRotationAnimation = () => {
<Animated.Image <Animated.Image
style={{ style={{
marginLeft: this.state.showImg ? 0 : movingMargin, marginLeft: this.state.showImg ? 0 : movingMargin,
marginRight:10,
height: '180%', height: '180%',
width: '8%', width: '8%',
backgroundColor: 'black', position: 'absolute'}} /> backgroundColor: 'black', position: 'absolute'}} />
...@@ -747,7 +880,7 @@ getRotationAnimation = () => { ...@@ -747,7 +880,7 @@ getRotationAnimation = () => {
{/* Modal 1*/} {/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none"> <Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}> <View style={{ backgroundColor: 'gainsboro',marginTop:296,height:'60%', width:'93%', marginRight:35}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text> <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
</View> </View>
...@@ -796,7 +929,7 @@ getRotationAnimation = () => { ...@@ -796,7 +929,7 @@ getRotationAnimation = () => {
{/* Modal 2*/} {/* Modal 2*/}
<Modal transparent={true} visible={this.state.showList} animationType="none"> <Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'80%',width:'93%', marginLeft:30}}> <View style={{ backgroundColor: 'gainsboro',marginTop:296,height:'80%',width:'93%', marginLeft:25}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text> <View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
</View> </View>
...@@ -850,12 +983,12 @@ getRotationAnimation = () => { ...@@ -850,12 +983,12 @@ getRotationAnimation = () => {
{/* Modal 3*/} {/* Modal 3*/}
<Modal transparent={true} visible={this.state.showNotes} animationType="none"> <Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}> <View style={{ backgroundColor: 'gainsboro',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView> <SafeAreaView>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.1,marginRight: config.deviceWidth * 0.1,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}> <View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.1,marginRight: config.deviceWidth * 0.1,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}> <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Beat</Text> <Text style={{fontSize:18, marginLeft:20, marginRight:20}}>Beat</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}> <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text> <Text style={{marginLeft:8, fontSize:25}}>-</Text>
...@@ -866,15 +999,15 @@ getRotationAnimation = () => { ...@@ -866,15 +999,15 @@ getRotationAnimation = () => {
</View> </View>
</View> </View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}> <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>T.S.</Text> <Text style={{fontSize:18, marginLeft:20, marginRight:20}}>T.S.</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'40%',borderRadius:8}}> <TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'50%',borderRadius:8}}>
<Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text> <Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.01,marginBottom: config.deviceHeight * 0.02}}> <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Note</Text> <Text style={{fontSize:18, marginLeft:20, marginRight:20}}>Note</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}> <TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text> <Text style={{marginLeft:8, fontSize:25}}>-</Text>
...@@ -886,13 +1019,13 @@ getRotationAnimation = () => { ...@@ -886,13 +1019,13 @@ getRotationAnimation = () => {
</View> </View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.05}}> <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.01}}>
<Text style={{fontSize:20, marginLeft:100, marginRight:40,marginBottom:20}}>ACCENT</Text> <Text style={{fontSize:20, marginLeft:100, marginRight:40,marginBottom:20}}>ACCENT</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center'}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'130%',borderRadius:8}}> <TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'150%',borderRadius:8}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}>
{miniBar.map((item, id) => ( {miniBar.map((item, id) => (
<Image key={id} style={{height:35, width:15, marginTop:5}} source={item.image}/> <Image key={id} style={{height:20, width:15, marginTop:5}} source={item.image}/>
))} ))}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
...@@ -908,6 +1041,42 @@ getRotationAnimation = () => { ...@@ -908,6 +1041,42 @@ getRotationAnimation = () => {
</View> </View>
</Modal> </Modal>
{/* Modal 4*/}
<Modal transparent={true} visible={this.state.showkeypad} animationType="none">
<View style={{ backgroundColor: 'gainsboro',marginTop:'35%',height:'85%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={{backgroundColor:'white',marginTop:'5%',alignItems: 'center', marginLeft:'38%', width:'25%'}}>
<Text style={{fontSize:35}} maxLength={3}>{this.state.tempoText}</Text>
</View>
<View style={{backgroundColor:'black',alignItems: 'center', alignContent:'center', marginLeft:35, marginRight:35, marginTop:10, height:'72%'}}>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(7)}><Text style={{fontSize:25}}>7</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(8)}><Text style={{fontSize:25}}>8</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(9)}><Text style={{fontSize:25}}>9</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(4)}><Text style={{fontSize:25}}>4</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(5)}><Text style={{fontSize:25}}>5</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(6)}><Text style={{fontSize:25}}>6</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(1)}><Text style={{fontSize:25}}>1</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(2)}><Text style={{fontSize:25}}>2</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(3)}><Text style={{fontSize:25}}>3</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'red', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setState({tempoText: 0})}><Text style={{fontSize:25}}>C</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(0)}><Text style={{fontSize:25}}>0</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempo(this.state.tempoText)}><Text style={{fontSize:25}}>SET</Text></TouchableOpacity>
</View>
</View>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'5%', marginTop:'5%', marginLeft:'45%',borderRadius:5}} onPress={() => this.setState({showkeypad: false})}>
<Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</Modal>
<StatusBar hidden /> <StatusBar hidden />
<SafeAreaView> <SafeAreaView>
...@@ -918,17 +1087,23 @@ getRotationAnimation = () => { ...@@ -918,17 +1087,23 @@ getRotationAnimation = () => {
<View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
<Text>TEMPO</Text> <Text>TEMPO</Text>
<Text/> <Text/>
<Text style={{marginLeft:110}}>T.S.</Text> <Text style={{marginLeft:105}}>T.S.</Text>
<Text>SUB DIV.</Text> <Text>SUB DIV.</Text>
</View> </View>
<View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/> <Image style={{height:30, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/>
<TouchableOpacity onPress={() => this.setState({showkeypad: true})}>
<Text style={{fontSize:35}}>{this.state.tempo}</Text> <Text style={{fontSize:35}}>{this.state.tempo}</Text>
<Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text> </TouchableOpacity>
<Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text> <Text style={{fontSize:12, marginTop:15, width: 70}}>{this.state.tempoName}</Text>
<Image style={{height:35, width:20, marginTop:10, marginRight:30}} source={this.state.image}/> <TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Text style={{fontSize:35}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Image style={{height:30, width:20, marginTop:10, marginRight:30}} source={this.state.image}/>
</TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
{barTempo.map((item, id) => ( {barTempo.map((item, id) => (
<TouchableOpacity key={id} style={{backgroundColor:item.active ? '#7eb9db' : 'cyan',borderColor:'black', borderWidth:1,width: config.deviceWidth * 0.5 / barTempo.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}}> <TouchableOpacity key={id} style={{backgroundColor:item.active ? '#7eb9db' : 'cyan',borderColor:'black', borderWidth:1,width: config.deviceWidth * 0.5 / barTempo.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}}>
<Text/></TouchableOpacity> <Text/></TouchableOpacity>
...@@ -939,7 +1114,7 @@ getRotationAnimation = () => { ...@@ -939,7 +1114,7 @@ getRotationAnimation = () => {
</View> </View>
</View> </View>
<View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/> <View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/>
<View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}> <View style={{backgroundColor:'gainsboro', height: '120%', width:'100%', marginTop:5}}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}> <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}> <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity> <Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity>
...@@ -966,7 +1141,7 @@ getRotationAnimation = () => { ...@@ -966,7 +1141,7 @@ getRotationAnimation = () => {
</View> </View>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}> <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:25, marginTop:15}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View> </View>
</View> </View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment