Skip to content

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

updating...

parent 4c3f2680
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 171 deletions
screens/metronome.js
View file @ 57822ae6
......@@ -2,7 +2,7 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */
import React from 'react';
import React, {useState} from 'react';
import {
ImageBackground,
Text,
......@@ -22,6 +22,8 @@ import {
ScrollView,
Animated,
Easing,
PanResponder,
Switch,
} from 'react-native';
import Orientation from 'react-native-orientation';
import styles from '../style/styleMetronome';
......@@ -33,6 +35,7 @@ const leftIcon = require('../media/img/left.png');
const rightIcon = require('../media/img/right.png');
const settingsIcon = require('../media/img/settings.png');
const listIcon = require('../media/img/list.png');
const tempoIcon = require('../media/img/tempo_control.png');
const note1 = require('../media/img/notea.png');
const note2 = require('../media/img/noteb.png');
......@@ -48,13 +51,11 @@ const sound3 = require('../media/sound/sound3.wav');
const sound4 = require('../media/sound/sound4.wav');
const sound5 = require('../media/sound/sound5.wav');
const color = ['darkgray','darkmagenta','cyan'];
var vv = 0;
const barTempo = [
{name :1,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :2,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :3,note:[{id:1,cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :4,note:[{id:1, cc:0}, {id:2,cc:0},{id:3,cc:1}]},
{name :1,note:[{id:1}, {id:2},{id:3}],active:true},
{name :2,note:[{id:1}, {id:2},{id:3}],active:true},
{name :3,note:[{id:1}, {id:2},{id:3}],active:true},
{name :4,note:[{id:1}, {id:2},{id:3}],active:true},
];
var miniBar = [{image:note3},{image:note3},{image:note3},{image:note3}];
......@@ -69,7 +70,77 @@ const config = {
class MetronomeSkill extends React.Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
this._rotationAnimation = new Animated.Value(0);
this._rotationOffset = 0;
this._gestureOffset = { x: 0, y: 0 };
this._gestureValue = new Animated.ValueXY();
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
this.setState({dragging: true});
},
onPanResponderMove: (evt, gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
/* this._gestureValue.setValue({
x: this._gestureOffset.x + gestureState.dx,
y: this._gestureOffset.y + gestureState.dy,
}); */
let Moved = Math.sqrt(Math.pow(gestureState.dx,2) + Math.pow(gestureState.dy,2));
if (Math.sign(gestureState.dx) === -1 && Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) === -1 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
Moved = -1 * Moved;
}
if (Moved > 10 ){
//if (Moved > 10 ) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
console.log('move');
// this.setState({tempo: this.state.tempo + 1});
// this.rightUp();
this.leftDown();
// }
} else if (Moved < 0) {
// if (Moved > -80 && Moved < -10) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
console.log('move anti');
//this.setState({tempo: this.state.tempo - 1});
// this.leftDown();
this.rightUp();
//}
}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
this._gestureOffset.x += gestureState.dx;
this._gestureOffset.y += gestureState.dy;
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
this.animatedValue = new Animated.Value(0);
Sound.setCategory('Playback'); // true = mixWithOthers
this.state = {
playing: false,
......@@ -88,30 +159,18 @@ this.animatedValue = new Animated.Value(0);
speed: 2000,
image: note3,
tempoName: 'Allegretto',
toneSound: '4',
toneSound: '1',
soundName: sound1,
rotation: 0,
color: true,
isEnabled: true,
showPendulum:true,
barTempoH : config.deviceHeight * 0.09,
};
}
toggleKeyword = async (keyword, id) => {
console.log('keyword',keyword);
console.log('id', id);
if (keyword === 0) {
//console.log(1);
barTempo[id].note[keyword].cc = 1;
console.log( barTempo[id].note[keyword].cc);
}
else if (keyword === 1) {
//console.log(2);
barTempo[id].note[keyword].cc = 0;
console.log( barTempo[id].note[keyword].cc);}
else {
//console.log(3);
barTempo[id].note[keyword].cc = 0;
console.log( barTempo[id].note[keyword].cc);
}
toggleKeyword = (keyword) => {
console.log(keyword);
};
onSubmit = () => {
......@@ -180,7 +239,7 @@ this.animatedValue = new Animated.Value(0);
}
else {
this.setState({beat: this.state.beat + 1});
barTempo.push({name :this.state.beat + 1,note:[{id:1,cc:vv}, {id:2,cc:vv},{id:3,cc:1}]});
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}],active:true});
miniBar.push({image:this.state.image});
console.log(barTempo);
}
......@@ -390,6 +449,9 @@ this.animatedValue = new Animated.Value(0);
this.setState({
playing: false,
});
barTempo.map((item,id) => {
item.active = true;
});
} else {
this.animate();
this.timer = setInterval(
......@@ -400,7 +462,6 @@ this.animatedValue = new Animated.Value(0);
{
count: 0,
playing: true,
// value: 1,
},
this.playClick
);
......@@ -408,7 +469,9 @@ this.animatedValue = new Animated.Value(0);
}
playClick = async () => {
const { count} = this.state;
let i =0;
let index = -1;
// const { count} = this.state;
var play1 = new Sound(this.state.soundName, (error) => {
if (error) {
console.log('failed to load the sound', error);
......@@ -428,6 +491,14 @@ this.animatedValue = new Animated.Value(0);
this.setState(state => ({
count: (state.count + 1) % this.state.beat,
}));
barTempo.map((item,id) => {
if (id === i) {item.active = false; console.log(id);}
else {item.active = true;}
});
}
keepTap = async () => {
......@@ -545,6 +616,115 @@ animate () {
).start(() => this.animate());
}
getRotationAnimation = () => {
const rotate = this._rotationAnimation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
return { rotate };
};
money = async() =>{
let index = -1;
console.log('money');
this.setState({tempo:126});
this.setState({tempoName:'Allegro'});
if (barTempo.length < 7) {
for (var j = barTempo.length; j < 7; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
}
this.setState({beat: barTempo.length});
}
if (barTempo.length > 7){
console.log(barTempo.length);
for (var j = barTempo.length; j > 7; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
}
};
jude = async () =>{
console.log('hey jude');
this.setState({tempo:74});
this.setState({tempoName:'Andante'});
let index = -1;
if (barTempo.length < 4) {
for (var j = barTempo.length; j < 4; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
}
this.setState({beat: barTempo.length});
}
if (barTempo.length > 4){
// console.log(barTempo.length);
for (var j = barTempo.length; j > 4; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
console.log(barTempo.length);
}
};
cajon = async () =>{
console.log('cajon rhythm');
this.setState({tempo:300});
this.setState({tempoName:'Prestissimo'});
let index = -1;
if (barTempo.length < 8) {
for (var j = barTempo.length; j < 8; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}]});
}
this.setState({beat: barTempo.length});
}
if (barTempo.length > 8){
// console.log(barTempo.length);
for (var j = barTempo.length; j > 8; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
console.log(barTempo.length);
}
};
toggleSwitch = () => {
if (this.state.isEnabled === false)
{this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});}
else
{this.setState({isEnabled: false, showPendulum: false, barTempoH: config.deviceHeight * 0.13});}
};
pendulum (){
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 300, 1],
});
if (this.state.showPendulum){
return (
<View style={{flexDirection: 'row', marginTop:5, marginLeft:13, marginRight:15, justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'grey',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
<TouchableOpacity style={{height:'180%', width:10, position: 'absolute'}}>
<Animated.View
style={{
marginLeft: this.state.showImg ? 0 : movingMargin,
height: '100%',
width: '250%',
backgroundColor: 'black'}} />
</TouchableOpacity>
</View>
);
}
else {
return null;
}
}
render() {
var imgSource = this.state.showImg ? playIcon : stopIcon;
......@@ -560,173 +740,233 @@ animate () {
style={styles.imagebackground}>
{/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={styles.modal1}>
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}>
<SafeAreaView>
<View style={styles.modal}><Text style={styles.textsetting}>Settings</Text>
</View>
<ScrollView>
<View style={styles.view1modal1}>
<View style={styles.view2modal1}>
<Text style={styles.texttitle}>Tone</Text>
<TouchableOpacity style={styles.tone} onPress={this.toneDown}>
<Text style={styles.textdown}>-</Text>
</TouchableOpacity>
<Text style={styles.textsound}>{this.state.toneSound}</Text>
<TouchableOpacity style={styles.tone} onPress={this.toneUp}>
<Text style={styles.textup}>+</Text>
</TouchableOpacity>
</View>
<View style={styles.viewLine}/>
<Text style={styles.texttitle}>Visual Block</Text>
<View style={styles.view3modal1}/>
<Text style={styles.texttitle}>Tempo Calculation</Text>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
</View>
<ScrollView>
<View
style={{ flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.05, height:'20%', marginBottom: 20}}>
<Text style={{fontSize:20, marginRight:10}}>Tone</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneDown}>
<Text style={{marginLeft:11, fontSize:25}}>-</Text>
</TouchableOpacity>
<Text style={{fontSize:20, marginLeft:20, marginRight:20, marginTop:5}}>{this.state.toneSound}</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'10%', height:'100%',borderRadius:10}} onPress={this.toneUp}>
<Text style={{marginLeft:11, fontSize:25}}>+</Text>
</TouchableOpacity>
</View>
<View style={{borderWidth:2, borderColor:'black', width:'85%'}}/>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06,marginTop: config.deviceHeight * 0.01, height:'20%', marginBottom: 20}}>
<Text style={{fontSize:20, marginRight:10}}>Visual Block</Text>
<Switch
trackColor={{ false: '#767577', true: 'black' }}
thumbColor={this.state.isEnabled ? '#7eb9db' : '#f4f3f4'}
onValueChange={this.toggleSwitch}
value={this.state.isEnabled}
/>
</View>
</View>
</ScrollView>
<View style={{alignItems: 'center', height:'30%'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showSet: false})}>
<Text style={{marginLeft:10}}>Back</Text>
</TouchableOpacity>
</View>
</ScrollView>
<View style={styles.view4modal1}>
<TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showSet: false})}>
<Text style={styles.textback}>Back</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</SafeAreaView>
</View>
</Modal>
{/* Modal 2*/}
<Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={styles.modal2}>
<Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'80%',width:'93%', marginLeft:30}}>
<SafeAreaView>
<View style={styles.modal}><Text style={styles.textsetting}>List</Text>
</View>
<View style={styles.view1modal2}>
<TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showList: false})}>
<Text style={styles.textback}>Back</Text>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
</View>
<ScrollView>
<View style={{ marginLeft: config.deviceWidth * 0.03,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.12,
}}>
<TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}} onPress={() => this.money()}>
<View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30}}>126</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>7/4</Text>
<Text style={{fontSize:18}}>Money - Pink Floyd</Text></View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}} onPress={() => this.jude()}>
<View style={{flexDirection : 'row',marginTop:5}}>
<View style={{flexDirection: 'row'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30}}>74</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>4/4</Text>
<Text style={{fontSize:18}}>Hey Jude - Beatles</Text></View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', marginBottom:5,height:'35%'}} onPress={() => this.cajon()}>
<View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30}}>300</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18}}>8/4</Text>
<Text style={{fontSize:18}}>Cajon Rhythm</Text></View>
</View>
</TouchableOpacity>
</View>
</ScrollView>
<View style={{alignItems: 'center', marginTop:2}}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'25%',borderRadius:5}} onPress={() => this.setState({showList: false})}>
<Text style={{marginLeft:10}}>Back</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
</View>
</View>
</Modal>
{/* Modal 3*/}
<Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={styles.modal3}>
<Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={styles.view1modal3}>
<View style={styles.viewbeat}>
<Text style={styles.textmodal3}>Beat</Text>
<View style={styles.viewbuttonbeat}>
<TouchableOpacity style={styles.beat} onPress={this.beatDown}>
<Text style={styles.textdown1}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.beat} onPress={this.beatUp}>
<Text style={styles.textup1}>+</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.viewts}>
<Text style={styles.textmodal3}>T.S.</Text>
<TouchableOpacity style={styles.ts}>
<Text style={styles.textts}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
<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}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Beat</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatUp}>
<Text style={{marginLeft:7, fontSize:25}}>+</Text>
</TouchableOpacity>
</View>
<View style={styles.viewnote}>
<Text style={styles.textmodal3}>Note</Text>
<View style={styles.viewnotes}>
<TouchableOpacity style={styles.beat} onPress={this.noteDown}>
<Text style={styles.textdown1}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.beat} onPress={this.noteUp}>
<Text style={styles.textup1}>+</Text>
</TouchableOpacity>
</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}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>T.S.</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'40%',borderRadius:8}}>
<Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
</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}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Note</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteUp}>
<Text style={{marginLeft:7, fontSize:25}}>+</Text>
</TouchableOpacity>
</View>
<View style={styles.viewaccent}>
<Text style={styles.textaccent}>ACCENT</Text>
<View style={styles.viewaccent1}>
<TouchableOpacity style={styles.viewimagenote}>
<View style={styles.viewminibar}>
{miniBar.map((item, id) => (
<Image key={id} style={styles.imagenote} source={item.image}/>
</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}}>
<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'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'130%',borderRadius:8}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}>
{miniBar.map((item, id) => (
<Image key={id} style={{height:35, width:15, marginTop:5}} source={item.image}/>
))}
</View>
</TouchableOpacity>
</View>
</View>
</View>
</TouchableOpacity>
</View>
<View style={styles.viewbuttonback}>
<TouchableOpacity style={styles.buttonback} onPress={() => this.setState({showNotes: false})}>
<Text style={styles.textback}>Back</Text>
</View>
</View>
<View style={{alignItems: 'center', height:'30%', marginTop:30}}>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'15%',borderRadius:5}} onPress={() => this.setState({showNotes: false})}>
<Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
</View>
</View>
</Modal>
<StatusBar hidden />
<SafeAreaView>
<View style={styles.view1}>
<View style={styles.view2}>
<View style={styles.view3}>
<View style={styles.view4}>
<View style={styles.view5}>
<Text>TEMPO</Text>
<Text/>
<Text style={styles.textmargints}>T.S.</Text>
<Text>SUB DIV.</Text>
<StatusBar hidden />
<SafeAreaView>
<View style={{height: '70%',marginTop:50}}>
<View style={{height:'60%', width:'100%'}}>
<View style={{alignItems:'center'}}>
<View style={{backgroundColor:'white', height:'85%', width:'95%', marginLeft:10, marginRight:10, marginTop:30, borderRadius:10}}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
<Text>TEMPO</Text>
<Text/>
<Text style={{marginLeft:110}}>T.S.</Text>
<Text>SUB DIV.</Text>
</View>
<View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/>
<Text style={{fontSize:35}}>{this.state.tempo}</Text>
<Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
<Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
<Image style={{height:35, width:20, marginTop:10, marginRight:30}} source={this.state.image}/>
</View>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
{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}}>
<Text/></TouchableOpacity>
))}
</View>
{this.pendulum()}
</View>
</View>
<View style={styles.view6}>
<Image style={styles.image1} source={this.state.image}/>
<Text style={{fontSize:35}}>{this.state.tempo}</Text>
<Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
<Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
<Image style={styles.image2} source={this.state.image}/>
</View>
<View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/>
<View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}>
<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})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%',borderRadius:8}} onPress={() => this.setState({showList: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/>
</TouchableOpacity>
</View>
<View style={styles.view7}>
{barTempo.map((item, id) => (
<View key={id} style={{ flexDirection: 'column'}}>
{item.note.map((c,i) => (
<TouchableOpacity key={i} onPress={() => this.toggleKeyword(i,id)} style={{backgroundColor:color[c.cc],borderColor:'darkorchid', borderWidth:2,width: config.deviceWidth * 0.5 / barTempo.length, height:'25%', marginLeft:3, marginRight:5}}>
<Text/>
</TouchableOpacity>
))}
</View>
))}
<View style={{ alignItems:'center'}}>
<Animated.Image
source={tempoIcon}
style={{
height:320,
width:320,
position: 'absolute',
transform: [
this.getRotationAnimation(),
],
}}
{...this._panResponder.panHandlers}
/>
<TouchableOpacity style={{position: 'absolute',top:30, right: config.deviceWidth * 0.5}} onPress={this.leftDown}><Image style={{height:252, width:115}} source={leftIcon}/></TouchableOpacity>
<TouchableOpacity style={{position: 'absolute',top:30, left:config.deviceWidth * 0.5}} onPress={this.rightUp}><Image style={{height:250, width:115}} source={rightIcon}/></TouchableOpacity>
<TouchableOpacity style={{position: 'absolute',top:75}} onPress={() => this.stopPlay()} ><Image style={{height:150, width:150}} source={imgSource}/></TouchableOpacity>
</View>
<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%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View>
<View style={styles.view8}>
<TouchableOpacity style={styles.touchable1}><Text/></TouchableOpacity>
<TouchableOpacity style={styles.touchable2}>
<Animated.View
style={{marginLeft: this.state.showImg ? 0 : movingMargin,height: '100%',width: '250%',backgroundColor: 'black'}} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={styles.view9}/>
<View style={styles.view10}>
<View style={styles.view11}>
<TouchableOpacity style={styles.touchable3} onPress={() => this.setState({showSet: true})}>
<Image style={styles.image3} source={settingsIcon}/></TouchableOpacity>
<TouchableOpacity style={styles.touchable4} onPress={() => this.setState({showList: true})}>
<Image style={styles.image4} source={listIcon}/>
</TouchableOpacity>
</View>
<View style={styles.view12}>
<TouchableOpacity style={styles.touchable5}><Text>1</Text></TouchableOpacity>
<TouchableOpacity style={styles.touchable6} onPress={this.leftDown}><Image style={styles.image6} source={leftIcon}/></TouchableOpacity>
<TouchableOpacity style={styles.touchable7} onPress={this.rightUp}><Image style={styles.image7} source={rightIcon}/></TouchableOpacity>
<TouchableOpacity style={styles.touchable8} onPress={() => this.stopPlay()} >
<Image style={styles.image5} source={imgSource}/>
</TouchableOpacity>
</View>
<View style={styles.view13}>
<TouchableOpacity style={styles.touchable9} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
<TouchableOpacity style={styles.touchable10} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</ImageBackground>
</SafeAreaView>
</ImageBackground>
</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