Begin panopticon web interface and fix setLanguage() with new controls
This commit is contained in:
Ruben van de Ven
parent
c4e01ed9bc
commit
d530980b0e
6 changed files with 120 additions and 17 deletions
|
|
@ -557,6 +557,8 @@ class HugveyState(object):
|
|||
|
||||
self.logger.info(f"set language: {language_code}")
|
||||
self.language_code = language_code
|
||||
|
||||
if self.google:
|
||||
self.google.setLanguage(language_code)
|
||||
|
||||
if self.isRunning.is_set():
|
||||
|
|
|
|||
|
|
@ -78,12 +78,17 @@ 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()
|
||||
|
||||
while not self.toBeShutdown:
|
||||
try:
|
||||
config = types.RecognitionConfig(
|
||||
encoding=enums.RecognitionConfig.AudioEncoding.LINEAR16,
|
||||
sample_rate_hertz=self.src_rate,
|
||||
|
|
@ -92,8 +97,6 @@ class GoogleVoiceClient(object):
|
|||
config=config,
|
||||
interim_results=True)
|
||||
|
||||
while not self.toBeShutdown:
|
||||
try:
|
||||
self.logger.log(LOG_BS,"wait for Google Voice")
|
||||
if not self.isRunning.wait(timeout=1):
|
||||
continue # re-ceck toBeShutdown
|
||||
|
|
|
|||
|
|
@ -1226,7 +1226,7 @@ class Story(object):
|
|||
"""
|
||||
self.finish()
|
||||
#stop google etc:
|
||||
self.hugvey.awaiting()
|
||||
self.hugvey.available()
|
||||
|
||||
def finish(self):
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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( {
|
||||
|
|
@ -22,7 +23,10 @@ class Panopticon {
|
|||
},
|
||||
loadNarrative: function( 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 } );
|
||||
|
||||
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,12 +125,18 @@ class Panopticon {
|
|||
|
||||
if(this.hugveys.selectedId) {
|
||||
hv = this.getHugvey(this.hugveys.selectedId);
|
||||
|
||||
if(this.hasGraph) {
|
||||
if(hv.language && this.graph.language_code != hv.language) {
|
||||
this.loadNarrative(hv.language);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(this.hasGraph) {
|
||||
this.graph.updateHugveyStatus(hv);
|
||||
}
|
||||
}
|
||||
|
||||
getHugvey(id) {
|
||||
for(let hv of this.hugveys.hugveys) {
|
||||
|
|
|
|||
80
www/panopticon.html
Normal file
80
www/panopticon.html
Normal 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>
|
||||
Loading…
Reference in a new issue