Begin panopticon web interface and fix setLanguage() with new controls
This commit is contained in:
parent
c4e01ed9bc
commit
d530980b0e
6 changed files with 120 additions and 17 deletions
|
@ -557,7 +557,9 @@ 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
|
||||||
self.google.setLanguage(language_code)
|
|
||||||
|
if self.google:
|
||||||
|
self.google.setLanguage(language_code)
|
||||||
|
|
||||||
if self.isRunning.is_set():
|
if self.isRunning.is_set():
|
||||||
self.restart()
|
self.restart()
|
||||||
|
|
|
@ -78,22 +78,25 @@ 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()
|
||||||
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:
|
while not self.toBeShutdown:
|
||||||
try:
|
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")
|
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
|
||||||
|
|
|
@ -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):
|
||||||
"""
|
"""
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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( {
|
||||||
|
@ -21,8 +22,11 @@ class Panopticon {
|
||||||
return panopticon.stringToHHMMSS( hugvey[property] );
|
return panopticon.stringToHHMMSS( hugvey[property] );
|
||||||
},
|
},
|
||||||
loadNarrative: function( code, file ) {
|
loadNarrative: function( code, file ) {
|
||||||
panopticon.hugveys.selectedId = null;
|
panopticon.hugveys.selectedId = null;
|
||||||
return panopticon.loadNarrative( code, file );
|
|
||||||
|
if(panopticon.hasGraph) {
|
||||||
|
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 } );
|
||||||
this.graph = new Graph();
|
|
||||||
|
if(this.hasGraph) {
|
||||||
|
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,11 +125,17 @@ class Panopticon {
|
||||||
|
|
||||||
if(this.hugveys.selectedId) {
|
if(this.hugveys.selectedId) {
|
||||||
hv = this.getHugvey(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) {
|
getHugvey(id) {
|
||||||
|
|
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