jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move voice recog to dialog

Browse Source
This commit is contained in:
Paulus Schoutsen 2015-11-04 23:52:21 -08:00
parent ff67f55559
commit b04e285061
9 changed files with 153 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -20,7 +20,7 @@
"author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
"license": "MIT",
"dependencies": {
"home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#2f69d196e841b4dd77e17a60b5b712938d9ddc0c",
"home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#9b10d9a7615a6a84762fb418a0b24ba9893c1829",
"lodash": "^3.10.1",
"moment": "^2.10.6"
},

32
src/components/ha-voice-command-progress.html
View File

@ -1,32 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<dom-module id="ha-voice-command-progress">
<style>
:host {
display: block;
}
iron-icon {
margin-right: 8px;
}
.interimTranscript {
color: darkgrey;
}
.listening paper-spinner {
float: right;
}
</style>
<template>
<iron-icon icon="mdi:text-to-speech"></iron-icon>
<span>{{finalTranscript}}</span>
<span class='interimTranscript'>[[interimTranscript]]</span>
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
</template>
</dom-module>

27
src/components/ha-voice-command-progress.js
View File

@ -1,27 +0,0 @@
import { voiceGetters } from '../util/home-assistant-js-instance';
import Polymer from '../polymer';
import nuclearObserver from '../util/bound-nuclear-behavior';
export default new Polymer({
is: 'ha-voice-command-progress',
behaviors: [nuclearObserver],
properties: {
isTransmitting: {
type: Boolean,
bindNuclear: voiceGetters.isTransmitting,
},
interimTranscript: {
type: String,
bindNuclear: voiceGetters.extraInterimTranscript,
},
finalTranscript: {
type: String,
bindNuclear: voiceGetters.finalTranscript,
},
},
});

64
src/dialogs/ha-voice-command-dialog.html Normal file
View File

@ -0,0 +1,64 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<dom-module id="ha-voice-command-dialog">
<style>
iron-icon {
margin-right: 8px;
}
.content {
width: 300px;
min-height: 80px;
font-size: 18px;
}
.icon {
float: left;
}
.text {
margin-left: 48px;
margin-right: 24px;
}
.interimTranscript {
color: darkgrey;
}
@media all and (max-width: 450px) {
paper-dialog {
margin: 0;
width: 100%;
max-height: calc(100% - 64px);
position: fixed !important;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
}
}
</style>
<template>
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
<div class='content'>
<div class='icon'>
<iron-icon icon="mdi:text-to-speech" hidden$="[[isTransmitting]]"></iron-icon>
<paper-spinner active$="[[isTransmitting]]" hidden$="[[!isTransmitting]]"></paper-spinner>
</div>
<div class='text'>
<span>{{finalTranscript}}</span>
<span class='interimTranscript'>[[interimTranscript]]</span>
…
</div>
</div>
</paper-dialog>
</template>
</dom-module>

83
src/dialogs/ha-voice-command-dialog.js Normal file
View File

@ -0,0 +1,83 @@
import {
voiceActions,
voiceGetters,
} from '../util/home-assistant-js-instance';
import Polymer from '../polymer';
import nuclearObserver from '../util/bound-nuclear-behavior';
export default new Polymer({
is: 'ha-voice-command-dialog',
behaviors: [nuclearObserver],
properties: {
dialogOpen: {
type: Boolean,
value: false,
observer: 'dialogOpenChanged',
},
finalTranscript: {
type: String,
bindNuclear: voiceGetters.finalTranscript,
},
interimTranscript: {
type: String,
bindNuclear: voiceGetters.extraInterimTranscript,
},
isTransmitting: {
type: Boolean,
bindNuclear: voiceGetters.isTransmitting,
},
isListening: {
type: Boolean,
bindNuclear: voiceGetters.isListening,
},
showListenInterface: {
type: Boolean,
computed: 'computeShowListenInterface(isListening, isTransmitting)',
observer: 'showListenInterfaceChanged',
},
_boundOnBackdropTap: {
type: Function,
value: function bindBackdropTap() {
return this._onBackdropTap.bind(this);
},
},
},
computeShowListenInterface(isListening, isTransmitting) {
return isListening || isTransmitting;
},
dialogOpenChanged(newVal) {
if (newVal) {
this.$.dialog.backdropElement.addEventListener('click',
this._boundOnBackdropTap);
} else if (!newVal && this.isListening) {
voiceActions.stop();
}
},
showListenInterfaceChanged(newVal) {
if (!newVal && this.dialogOpen) {
this.dialogOpen = false;
} else if (newVal) {
this.dialogOpen = true;
}
},
_onBackdropTap() {
this.$.dialog.backdropElement.removeEventListener('click',
this._boundOnBackdropTap);
if (this.isListening) {
voiceActions.stop();
}
},
});

2
src/layouts/home-assistant-main.html
View File

@ -10,6 +10,7 @@
<link rel='import' href='../layouts/partial-dev-set-state.html'>
<link rel='import' href='../managers/notification-manager.html'>
<link rel="import" href="../dialogs/more-info-dialog.html">
<link rel="import" href="../dialogs/ha-voice-command-dialog.html">
<link rel='import' href='../components/ha-sidebar.html'>
@ -17,6 +18,7 @@
<template>
<notification-manager></notification-manager>
<more-info-dialog></more-info-dialog>
<ha-voice-command-dialog></ha-voice-command-dialog>
<iron-media-query query="(max-width: 870px)" query-matches="{{narrow}}">
</iron-media-query>

1
src/layouts/home-assistant-main.js
View File

@ -18,6 +18,7 @@ require('../layouts/partial-dev-fire-event');
require('../layouts/partial-dev-set-state');
require('../managers/notification-manager');
require('../dialogs/more-info-dialog');
require('../dialogs/ha-voice-command-dialog');
export default new Polymer({
is: 'home-assistant-main',

9
src/layouts/partial-zone.html
View File

@ -2,7 +2,6 @@
<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/ha-voice-command-progress.html">
<link rel="import" href="../components/ha-zone-cards.html">
<dom-module id="partial-zone">
@ -40,17 +39,11 @@
on-click="handleRefresh" hidden$="[[isStreaming]]"
></paper-icon-button>
<paper-icon-button
icon="[[computeListenButtonIcon(isListening)]]"
hidden$='[[!canListen]]'
icon="mdi:microphone" hidden$='[[!canListen]]'
on-click="handleListenClick"></paper-icon-button>
</paper-toolbar>
<div class='content fit'>
<div class='listening' hidden$="[[!showListenInterface]]"
on-click="handleListenClick">
<ha-voice-command-progress></ha-voice-command-progress>
</div>
<ha-zone-cards
show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
states='[[states]]' columns='[[columns]]'></ha-zone-cards>

25
src/layouts/partial-zone.js
View File

@ -12,7 +12,6 @@ import Polymer from '../polymer';
import nuclearObserver from '../util/bound-nuclear-behavior';
require('./partial-base');
require('../components/ha-voice-command-progress');
require('../components/ha-zone-cards');
export default new Polymer({
@ -45,20 +44,6 @@ export default new Polymer({
],
},
isListening: {
type: Boolean,
bindNuclear: voiceGetters.isListening,
},
showListenInterface: {
type: Boolean,
bindNuclear: [
voiceGetters.isListening,
voiceGetters.isTransmitting,
(isListening, isTransmitting) => isListening || isTransmitting,
],
},
introductionLoaded: {
type: Boolean,
bindNuclear: configGetters.isComponentLoaded('introduction'),
@ -112,11 +97,7 @@ export default new Polymer({
},
handleListenClick() {
if (this.isListening) {
voiceActions.stop();
} else {
voiceActions.listen();
}
voiceActions.listen();
},
computeDomains(states) {
@ -131,10 +112,6 @@ export default new Polymer({
return states.get(domain).toArray();
},
computeListenButtonIcon(isListening) {
return isListening ? 'mdi:microphone-off' : 'mdi:microphone';
},
computeRefreshButtonClass(isFetching) {
if (isFetching) {
return 'ha-spin';