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,6 +557,8 @@ class HugveyState(object):
self.logger.info(f"set language: {language_code}") self.logger.info(f"set language: {language_code}")
self.language_code = language_code self.language_code = language_code
if self.google:
self.google.setLanguage(language_code) self.google.setLanguage(language_code)
if self.isRunning.is_set(): if self.isRunning.is_set():

View file

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

View file

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

View file

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

View file

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

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>