Begin panopticon web interface and fix setLanguage() with new controls

This commit is contained in:
Ruben van de Ven 2019-04-27 12:13:34 +02:00
parent c4e01ed9bc
commit d530980b0e
6 changed files with 120 additions and 17 deletions

View file

@ -557,7 +557,9 @@ class HugveyState(object):
self.logger.info(f"set language: {language_code}")
self.language_code = language_code
self.google.setLanguage(language_code)
if self.google:
self.google.setLanguage(language_code)
if self.isRunning.is_set():
self.restart()

View file

@ -78,22 +78,25 @@ class GoogleVoiceClient(object):
self.logger.info("Change language from {} to {}".format(self.language_code, language_code))
self.language_code = language_code
self.isRunning.clear()
self.restart = True
def run(self):
self.isRunning.set()
# Leave this here to avoid "Too many files open" errors.
self.speech_client = speech.SpeechClient()
config = types.RecognitionConfig(
encoding=enums.RecognitionConfig.AudioEncoding.LINEAR16,
sample_rate_hertz=self.src_rate,
language_code=self.language_code)
self.streaming_config = types.StreamingRecognitionConfig(
config=config,
interim_results=True)
while not self.toBeShutdown:
try:
config = types.RecognitionConfig(
encoding=enums.RecognitionConfig.AudioEncoding.LINEAR16,
sample_rate_hertz=self.src_rate,
language_code=self.language_code)
self.streaming_config = types.StreamingRecognitionConfig(
config=config,
interim_results=True)
self.logger.log(LOG_BS,"wait for Google Voice")
if not self.isRunning.wait(timeout=1):
continue # re-ceck toBeShutdown

View file

@ -1226,7 +1226,7 @@ class Story(object):
"""
self.finish()
#stop google etc:
self.hugvey.awaiting()
self.hugvey.available()
def finish(self):
"""

View file

@ -1,6 +1,6 @@
<html>
<head>
<title>Pillow Talk Control Interface</title>
<title>Pillow Talk Editor</title>
<!-- development version, includes helpful console warnings -->
<script src="/js/vue.js"></script>
<script src="/js/reconnecting-websocket.js"></script>
@ -12,7 +12,7 @@
<link rel="stylesheet" href="/css/styles.css"></link>
</head>
<body class='dark'>
<body class='dark editor'>
<div id="interface" class='showStatus'>
<div id='status'>
<div id='overview'>

View file

@ -3,6 +3,7 @@ var panopticon;
class Panopticon {
constructor() {
console.log( "Init panopticon" );
this.hasGraph = document.body.classList.contains('editor');
this.languages = []
// this.selectedHugvey = null;
this.hugveys = new Vue( {
@ -21,8 +22,11 @@ class Panopticon {
return panopticon.stringToHHMMSS( hugvey[property] );
},
loadNarrative: function( code, file ) {
panopticon.hugveys.selectedId = null;
return panopticon.loadNarrative( code, file );
panopticon.hugveys.selectedId = null;
if(panopticon.hasGraph) {
return panopticon.loadNarrative( code, file );
}
},
block: function(hv) {
hv.status = "loading";
@ -62,7 +66,10 @@ class Panopticon {
this.socket = new ReconnectingWebSocket( "ws://localhost:8888/ws", null, { debug: false, reconnectInterval: 3000 } );
this.graph = new Graph();
if(this.hasGraph) {
this.graph = new Graph();
}
this.socket.addEventListener( 'open', ( e ) => {
@ -78,6 +85,11 @@ class Panopticon {
console.log( 'Closed connection' );
} );
this.socket.addEventListener( 'message', ( e ) => {
if(e.data == 'hello!') {
console.log("Websocket connected")
return;
}
let msg = JSON.parse( e.data );
if ( typeof msg['alert'] !== 'undefined' ) {
alert( msg['alert'] );
@ -113,11 +125,17 @@ class Panopticon {
if(this.hugveys.selectedId) {
hv = this.getHugvey(this.hugveys.selectedId);
if(hv.language && this.graph.language_code != hv.language) {
this.loadNarrative(hv.language);
if(this.hasGraph) {
if(hv.language && this.graph.language_code != hv.language) {
this.loadNarrative(hv.language);
}
}
}
this.graph.updateHugveyStatus(hv);
if(this.hasGraph) {
this.graph.updateHugveyStatus(hv);
}
}
getHugvey(id) {

80
www/panopticon.html Normal file
View file

@ -0,0 +1,80 @@
<html>
<head>
<title>Pillow Talk Control Interface</title>
<!-- development version, includes helpful console warnings -->
<script src="/js/vue.js"></script>
<script src="/js/reconnecting-websocket.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/d3.v5.min.js"></script>
<script src="/js/crel.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="/css/styles.css"></link>
</head>
<body class='dark panopticon'>
<div id="interface" class='showStatus'>
<div id='status'>
<div id='overview'>
<dl>
<dt>Uptime</dt>
<dd>{{uptime}}</dd>
</dl>
<ul id='languages'>
<li v-for="lang in languages" :title="lang.file"
:id="'lang-' + lang.code" class="btn lang--btn"
@click="loadNarrative(lang.code, lang.file)"><span
:class="['flag-icon', lang.code]"></span> {{lang.code}}</li>
</ul>
</div>
<div class='hugvey' v-for="hv in hugveys"
:class="[{'hugvey--on': hv.status != 'off'},'hugvey--' + hv.status]"
@click="showHugvey(hv)"
>
<h1>
{{ hv.id }}
</h1>
<div class='status'>{{ hv.status }}</div>
<div v-if="hv.status != 'off' && hv.status != 'gone' && hv.status != 'loading'">
<select v-model="hv.language" @change="change_lang(hv, hv.language)" v-on:click.stop>
<option v-for="lang in languages" :title="lang.file"
:value="lang.code">
<span :class="['flag-icon', lang.code]"></span>
{{lang.code}}
</option>
</select>
{{ hv.language }}
<!-- <div v-if="hv.awaiting != false"><img class='icon' :src="'/images/icon-finished.svg'" title="Finished"> {{timer(hv,
'finished')}}</div> -->
<div class='stats'>
<div class='count' v-for="c, key in hv.counts">
<img class='icon' :src="'/images/icon-' + key + '.svg'" :title="key">
{{c}}
</div>
<div class='position'>
<img class='icon' src="/images/icon-position.svg" title="position">
{{ hv.msg }}
</div>
<div class='timer'>
<img class='icon' src="/images/icon-clock.svg" title="timer">
{{ timer(hv, 'duration') }}
</div>
</div>
<div class='btn' v-if="hv.status == 'blocked'" @click.stop="unblock(hv)">Unblock</div>
<div class='btn' v-if="hv.status == 'available'" @click.stop="block(hv)">Block</div>
<div class='btn' v-if="hv.status == 'available'" @click.stop="restart(hv)">Start</div>
<div class='btn' v-if="hv.status == 'running'" @click.stop="finish(hv)">Finish</div> <!-- to available state -->
<div class='btn' v-if="hv.status == 'running'" @click.stop="pause(hv)">Pause</div>
<div class='btn' v-if="hv.status == 'paused'" @click.stop="resume(hv)">Resume</div>
</div>
</div>
</div>
<div id='selectedHugvey'>
</div>
</div>
<script type='application/javascript' src="/js/hugvey_console.js"></script>
</body>
</html>