Skip to content

Commit

Permalink
Wave generator UI improved (fossasia#542)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pipe-Runner @mariobehling
Pipe-Runner authored and mariobehling committed Aug 31, 2019
1 parent f6b5242 commit f254702
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 60 deletions.
8 changes: 4 additions & 4 deletions src/screen/WaveGenerator/WaveGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,10 @@ class WaveGenerator extends Component {
);
};

onChangeWaveForm = pinName => {
const current = this.state[pinName];
onChangeWaveForm = (pinName, type) => {
this.setState(
prevState => ({
[pinName]: current === 'sine' ? 'tria' : 'sine',
[pinName]: type,
}),
() => {
this.sendConfigToDevice();
Expand All @@ -147,7 +146,6 @@ class WaveGenerator extends Component {
render() {
const {
wave,
digital,
s1Frequency,
s2Frequency,
s2Phase,
Expand Down Expand Up @@ -175,6 +173,7 @@ class WaveGenerator extends Component {
onChangeWaveForm={this.onChangeWaveForm}
onChangeSlider={this.onChangeSlider}
onTogglePreview={this.onTogglePreview}
wave={wave}
/>
) : (
<DigitalController
Expand All @@ -188,6 +187,7 @@ class WaveGenerator extends Component {
sqr4Phase={sqr4Phase}
onChangeSlider={this.onChangeSlider}
onTogglePreview={this.onTogglePreview}
wave={wave}
/>
)}
</Wrapper>
Expand Down
131 changes: 103 additions & 28 deletions src/screen/WaveGenerator/components/AnalogController.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { Card, Button } from '@material-ui/core';
import Slider from '@material-ui/lab/Slider';
import PlusIcon from '@material-ui/icons/Add';
import MinusIcon from '@material-ui/icons/Remove';
import PlusIcon from '@material-ui/icons/ArrowRight';
import MinusIcon from '@material-ui/icons/ArrowLeft';
import {
Wrapper,
MainContainer,
Expand Down Expand Up @@ -49,6 +49,10 @@ const styles = theme => ({
},
colorBar: {},
colorChecked: {},
disabledButton: {
backgroundColor: '#ef9a9a',
color: '#fff',
},
});

class AnalogController extends Component {
Expand Down Expand Up @@ -144,14 +148,14 @@ class AnalogController extends Component {
const { activePin } = this.state;
if (activePin === 'wave1') {
if (waveFormS1 === 'tria') {
return <img src={SineIcon} />;
return 'tria';
}
return <img src={TriaIcon} />;
return 'sine';
}
if (waveFormS2 === 'tria') {
return <img src={SineIcon} />;
return 'tria';
}
return <img src={TriaIcon} />;
return 'sine';
};

highlightedInformation = () => {
Expand Down Expand Up @@ -215,7 +219,11 @@ class AnalogController extends Component {
<ButtonRow>
<Button
style={{
backgroundColor: theme.pallet.primary.main,
backgroundColor:
activePin === 'wave1'
? '#ef9a9a'
: theme.pallet.primary.main,
color: '#fff',
}}
size="large"
variant="contained"
Expand All @@ -227,19 +235,25 @@ class AnalogController extends Component {
activeSetting: 'Freq',
})
}
disabled={activePin === 'wave1'}
>
<TextWrapper>Wave1</TextWrapper>
</Button>
<Button
style={{
margin: '0px 0px 0px 16px',
backgroundColor: theme.pallet.primary.main,
backgroundColor:
activePin === 'wave2'
? '#ef9a9a'
: theme.pallet.primary.main,
color: '#fff',
}}
size="large"
color="primary"
variant="contained"
fullWidth={true}
onClick={() => this.setState({ activePin: 'wave2' })}
disabled={activePin === 'wave2'}
>
<TextWrapper>Wave2</TextWrapper>
</Button>
Expand All @@ -260,7 +274,11 @@ class AnalogController extends Component {
<Button
style={{
margin: '0px 0px 0px 16px',
backgroundColor: theme.pallet.primary.main,
backgroundColor:
activePin === 'wave1'
? '#ef9a9a'
: theme.pallet.primary.main,
color: '#fff',
}}
size="large"
variant="contained"
Expand All @@ -274,33 +292,74 @@ class AnalogController extends Component {
<Button
style={{
margin: '0px 0px 0px 16px',
backgroundColor: theme.pallet.primary.main,
backgroundColor:
this.waveFormInv() === 'sine'
? '#ef9a9a'
: theme.pallet.primary.main,
}}
size="large"
variant="contained"
color="primary"
fullWidth={true}
onClick={
activePin === 'wave1'
? () => onChangeWaveForm('waveFormS1', 'sine')
: () => onChangeWaveForm('waveFormS2', 'sine')
}
disabled={this.waveFormInv() === 'sine'}
>
<TextWrapper>
<img
src={SineIcon}
style={{ width: '30px', height: '30px' }}
/>
</TextWrapper>
</Button>
<Button
style={{
margin: '0px 0px 0px 16px',
backgroundColor:
this.waveFormInv() === 'tria'
? '#ef9a9a'
: theme.pallet.primary.main,
}}
size="large"
variant="contained"
color="primary"
fullWidth={true}
onClick={
activePin === 'wave1'
? () => onChangeWaveForm('waveFormS1')
: () => onChangeWaveForm('waveFormS2')
? () => onChangeWaveForm('waveFormS1', 'tria')
: () => onChangeWaveForm('waveFormS2', 'tria')
}
disabled={this.waveFormInv() === 'tria'}
>
<TextWrapper>{this.waveFormInv()}</TextWrapper>
<TextWrapper>
<img
src={TriaIcon}
style={{ width: '30px', height: '30px' }}
/>
</TextWrapper>
</Button>
</ButtonRow>
</BorderMaker>
<ButtonRow>
<Button
style={{
backgroundColor: theme.pallet.primary.main,
}}
size="large"
variant="contained"
color="primary"
fullWidth={true}
style={{
margin: '0px 0px 0px 16px',
backgroundColor: this.props.wave
? '#ef9a9a'
: theme.pallet.primary.main,
color: '#fff',
}}
onClick={onTogglePreview}
disabled={this.props.wave}
>
<TextWrapper>View</TextWrapper>
<TextWrapper>Analog</TextWrapper>
</Button>
<Button
size="large"
Expand All @@ -309,16 +368,35 @@ class AnalogController extends Component {
fullWidth={true}
style={{
margin: '0px 0px 0px 16px',
backgroundColor: theme.pallet.primary.main,
backgroundColor: !this.props.wave
? '#ef9a9a'
: theme.pallet.primary.main,
color: '#fff',
}}
onClick={onTogglePreview}
disabled={!this.props.wave}
>
<TextWrapper>Mode</TextWrapper>
<TextWrapper>Digital</TextWrapper>
</Button>
</ButtonRow>
</ControllerWrapper>
</MainContainer>
<SliderContainer>
<ButtonContainer>
<Button
size="large"
color="primary"
variant="outlined"
onClick={this.onHandleMinus}
style={{
backgroundColor: theme.pallet.primary.main,
color: '#ffffff',
margin: '0px 16px 0px 0px',
}}
>
<MinusIcon style={{ fontSize: 24 }} />
</Button>
</ButtonContainer>
<SliderWrapper>
<Slider
value={this.sliderValue()}
Expand All @@ -330,22 +408,19 @@ class AnalogController extends Component {
/>
</SliderWrapper>
<ButtonContainer>
<Button
size="large"
color="primary"
variant="outlined"
onClick={this.onHandleMinus}
>
<MinusIcon style={{ fontSize: 20 }} />
</Button>
<Button
size="large"
color="primary"
variant="outlined"
style={{ margin: '0px 0px 0px 16px' }}
onClick={this.onHandlePlus}
style={{
margin: '0px 0px 0px 16px',
backgroundColor: theme.pallet.primary.main,
color: '#ffffff',
}}
>
<PlusIcon style={{ fontSize: 20 }} />
<PlusIcon style={{ fontSize: 24 }} />
</Button>
</ButtonContainer>
</SliderContainer>
Expand Down
Loading

0 comments on commit f254702

Please sign in to comment.