Skip to content

Commit

Permalink
Add suport for horizontal and vertical video flipping (#148)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Mar 19, 2017
1 parent 3ef2a5d commit 206881d
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 37 deletions.
8 changes: 6 additions & 2 deletions src/web/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,12 @@ export const defaultState = {
// The URL field is required for the M-JPEG stream
url: '',

crosshair: false,
scale: 1.0
centerFocus: false,
geometry: {
flipHorizontally: false,
flipVertically: false,
scale: 1.0
}
}
}
};
Expand Down
2 changes: 1 addition & 1 deletion src/web/widgets/Webcam/Line.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class Line extends Component {
vertical: PropTypes.bool,
color: PropTypes.string,
opacity: PropTypes.number,
length: PropTypes.oneOf([PropTypes.number, PropTypes.string]),
length: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
width: PropTypes.number
};
static defaultProps = {
Expand Down
88 changes: 72 additions & 16 deletions src/web/widgets/Webcam/Webcam.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,15 @@ class Webcam extends Component {
}
render() {
const { state, actions } = this.props;
const { disabled, mediaSource, url, crosshair, scale } = state;
const {
disabled,
mediaSource,
url,
centerFocus,
flipHorizontally,
flipVertically,
scale
} = state;

if (disabled) {
return (
Expand All @@ -58,7 +66,11 @@ class Webcam extends Component {
{mediaSource === MEDIA_SOURCE_LOCAL &&
<div style={{ width: '100%' }}>
<WebcamMedia
className={styles.center}
className={classNames(
styles.center,
{ [styles.flipHorizontally]: flipHorizontally },
{ [styles.flipVertically]: flipVertically }
)}
width={(100 * scale).toFixed(0) + '%'}
height="auto"
/>
Expand All @@ -73,10 +85,14 @@ class Webcam extends Component {
style={{
width: (100 * scale).toFixed(0) + '%'
}}
className={styles.center}
className={classNames(
styles.center,
{ [styles.flipHorizontally]: flipHorizontally },
{ [styles.flipVertically]: flipVertically }
)}
/>
}
{crosshair &&
{centerFocus &&
<div>
<Line
className={classNames(
Expand Down Expand Up @@ -111,19 +127,59 @@ class Webcam extends Component {
}
<div className={styles.toolbar}>
<div className={styles['scale-text']}>{scale}x</div>
<OverlayTrigger
overlay={<Tooltip>{i18n._('Crosshair')}</Tooltip>}
placement="top"
>
<Anchor
className={styles['btn-crosshair']}
onClick={(event) => {
actions.toggleCrosshair();
}}
<div className="pull-right">
<OverlayTrigger
overlay={<Tooltip>{i18n._('Flip Horizontally')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleFlipHorizontally}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconFlipHorizontally
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip>{i18n._('Flip Vertically')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleFlipVertically}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconFlipVertically
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip>{i18n._('Center Focus')}</Tooltip>}
placement="top"
>
<i className="fa fa-crosshairs" />
</Anchor>
</OverlayTrigger>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleCenterFocus}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconCenterFocus
)}
/>
</Anchor>
</OverlayTrigger>
</div>
</div>
<div className={styles['image-scale-slider']}>
<Slider
Expand Down
7 changes: 7 additions & 0 deletions src/web/widgets/Webcam/images/center-focus.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/web/widgets/Webcam/images/flip-horizontally.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/web/widgets/Webcam/images/flip-vertically.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 32 additions & 16 deletions src/web/widgets/Webcam/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,27 @@ class WebcamWidget extends Component {
onDelete: () => {}
};

actions = {
changeImageScale: (value) => {
this.setState({ scale: value });
},
toggleCenterFocus: () => {
const { centerFocus } = this.state;
this.setState({ centerFocus: !centerFocus });
},
toggleFlipHorizontally: () => {
const { flipHorizontally } = this.state;
this.setState({ flipHorizontally: !flipHorizontally });
},
toggleFlipVertically: () => {
const { flipVertically } = this.state;
this.setState({ flipVertically: !flipVertically });
}
};

constructor() {
super();
this.state = this.getDefaultState();
this.state = this.getInitialState();
}
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
Expand All @@ -33,35 +51,34 @@ class WebcamWidget extends Component {
disabled,
mediaSource,
url,
crosshair,
centerFocus,
flipHorizontally,
flipVertically,
scale
} = this.state;

store.set('widgets.webcam.minimized', minimized);
store.set('widgets.webcam.disabled', disabled);
store.set('widgets.webcam.mediaSource', mediaSource);
store.set('widgets.webcam.url', url);
store.set('widgets.webcam.crosshair', crosshair);
store.set('widgets.webcam.scale', scale);
store.set('widgets.webcam.centerFocus', centerFocus);
store.set('widgets.webcam.geometry.flipHorizontally', flipHorizontally);
store.set('widgets.webcam.geometry.flipVertically', flipVertically);
store.set('widgets.webcam.geometry.scale', scale);
}
getDefaultState() {
getInitialState() {
return {
minimized: store.get('widgets.webcam.minimized', false),
isFullscreen: false,
disabled: store.get('widgets.webcam.disabled', true),
mediaSource: store.get('widgets.webcam.mediaSource', MEDIA_SOURCE_LOCAL),
url: store.get('widgets.webcam.url'),
crosshair: store.get('widgets.webcam.crosshair'),
scale: store.get('widgets.webcam.scale')
centerFocus: store.get('widgets.webcam.centerFocus', false),
flipHorizontally: store.get('widgets.webcam.geometry.flipHorizontally', false),
flipVertically: store.get('widgets.webcam.geometry.flipVertically', false),
scale: store.get('widgets.webcam.geometry.scale', 1.0)
};
}
changeImageScale(value) {
this.setState({ scale: value });
}
toggleCrosshair() {
const { crosshair } = this.state;
this.setState({ crosshair: !crosshair });
}
render() {
const { disabled, minimized, isFullscreen } = this.state;
const classes = {
Expand All @@ -76,8 +93,7 @@ class WebcamWidget extends Component {
...this.state
};
const actions = {
changeImageScale: ::this.changeImageScale,
toggleCrosshair: ::this.toggleCrosshair
...this.actions
};

return (
Expand Down
35 changes: 33 additions & 2 deletions src/web/widgets/Webcam/index.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

&.flip-horizontally {
transform: translate(-50%, -50%) rotateX(180deg);
}
&.flip-vertically {
transform: translate(-50%, -50%) rotateY(180deg);
}
&.flip-horizontally.flip-vertically {
transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
}
}

.webcam-on-container {
Expand Down Expand Up @@ -58,11 +68,11 @@
text-shadow: 0 0 5px #333;
}

.btn-crosshair {
float: right;
.btn-icon {
color: #f5f5f5;
font-size: 18px;
text-shadow: 0 0 5px #333;
margin-left: 10px;

&:hover {
color: #fff;
Expand All @@ -89,3 +99,24 @@
background: url("./images/64x64/webcam.png") no-repeat 0 0;
}
}

.icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-bottom: 2px;

&.inverted {
filter: invert(100%);
}
&.icon-flip-vertically {
background: url("./images/flip-vertically.svg") no-repeat 0 0;
}
&.icon-flip-horizontally {
background: url("./images/flip-horizontally.svg") no-repeat 0 0;
}
&.icon-center-focus {
background: url("./images/center-focus.svg") no-repeat 0 0;
}
}

0 comments on commit 206881d

Please sign in to comment.