def __init__(self, video_source=0, fps=5, **kwargs): super(OpencvVideoWidget, self).__init__("/%s/get_image_data" % id(self), **kwargs) self.fps = fps self.capture = cv2.VideoCapture(video_source) javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' javascript_code.add_child( 'code', """ function update_image%(id)s(){ if(document.getElementById('%(id)s').getAttribute('play')=='False') return; var url = '/%(id)s/get_image_data'; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob' xhr.onload = function(e){ var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(this.response); document.getElementById('%(id)s').src = imageUrl; } xhr.send(); }; setInterval( update_image%(id)s, %(update_rate)s ); """ % { 'id': id(self), 'update_rate': 1000.0 / self.fps }) self.add_child('javascript_code', javascript_code) self.play()
def __init__(self, data=None, update=None, updateRate=1, **kwargs): super(PlotlyWidget, self).__init__(**kwargs) self.updateRate = updateRate self.data = data self.update = update javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' code = """ var PLOT = document.getElementById('plot'); var url = "plot/get_refresh"; var plotOptions = { title: 'Title goes here' ,xaxis: {title: 'time'} ,yaxis: {title: 'random number',type: 'linear'} }; plotOptions['margin'] = {t:50, l:50, r:30}; Plotly.d3.json(url, function(error, data) { Plotly.plot(PLOT, data, plotOptions); }); """ javascript_code.add_child('code', # Add to Tag code % {'id': id(self), }) self.add_child('javascript_code', javascript_code) # Add to widget
def main(self): self.stdoutbox = StdoutBox() self.title_bar = TitleBar() self.ipbox = IPBox() self.servicesbox = ServicesBox(self.stdoutbox) self.scriptbox = ScriptBox( self.stdoutbox, self.title_bar.refresh_all) self.title_bar.add_refresh_handler(self.ipbox.handle_refresh_ip) self.title_bar.add_refresh_handler( self.servicesbox.handle_refresh_services) self.title_bar.add_widget_to_middle(self.ipbox.build_ip_box()) vbox_main = gui.VBox() vbox_main.append(self.title_bar.build_title_bar()) vbox_main.append(self._build_middle_box()) vbox_main.append(self.stdoutbox.build_stdout_box()) for js_file in JS_FILES: # Add the javascript scripts to the end js = gui.Tag(_type='script') js.attributes["src"] = "/res/{}".format(js_file) vbox_main.add_child(js_file, js) return vbox_main
def main(self): #creating a container VBox type, vertical (you can use also HBox or Widget) main_container = gui.VBox(width=300, height=200, style={'margin':'0px auto'}) #add the following 3 lines to your app and the on_window_close method to make the console close automatically tag = gui.Tag(_type='script') tag.add_child("javascript", """window.onunload=function(e){sendCallback('%s','%s');return "close?";};""" % (str(id(self)), "on_window_close")) main_container.add_child("onbeforeunloadevent", tag) # returning the root widget return main_container
def collectHeadJS(self): """ This function will collect all of the JS source files from the res folder """ retval = [] #create Jquery tag tag = gui.Tag(_type='script') tag.attributes[ 'src'] = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" retval.append(('jquery', tag)) jsFiles = ["svg-pan-zoom.min.js"] #, "waitSVG.js"] for js in jsFiles: fh = open("res/" + js, "r") tag = gui.Tag(_type='script') tag.add_child("javascript", fh.read()) fh.close() key = js[:js.rfind(".")] retval.append((key, tag)) return retval
def main(self, name='world'): # margin 0px auto allows to center the app to the screen wid = gui.VBox(width=300, height=200, margin='0px auto') lbl = gui.Label("Close or reload the page, the console thread will stop automatically.") wid.append(lbl) #add the following 3 lines to your app and the on_window_close method to make the console close automatically tag = gui.Tag(_type='script') tag.add_child("javascript", """window.onunload=function(e){sendCallback('%s','%s');return "close?";};""" % (str(id(self)), "on_window_close")) wid.add_child("onunloadevent", tag) # returning the root widget return wid
def __init__(self, width, height, fps=5): #super(CompressedImageVideoWidget, self).__init__(width, height, "/"+str(id(self))+"/get_image_data") #super(CompressedImageVideoWidget, self).__init__(width, height, "/%s/get_image_data") super(CompressedImageVideoWidget, self).__init__(width, height, "/res/logo.png") self.fps = fps self.last_img = None self.last_frame = None self.img_w = 400 self.img_h = 400 self.subscriber = None self.last_topic = None javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' javascript_code.append( 'code', """ function update_image%(id)s(){ console.debug('on update_image'); if(document.getElementById('%(id)s').getAttribute('play')=='False'){ console.debug('not showing anything'); return; } var url = '/%(id)s/get_image_data'; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function(e){ console.debug('on xhr.onload'); var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(this.response); document.getElementById('%(id)s').src = imageUrl; } xhr.onerror = function(e){ console.debug('on xhr.onerror '); } xhr.send(); }; setInterval( update_image%(id)s, %(update_rate)s ); """ % { 'id': id(self), 'update_rate': 1000 / self.fps }) self.append('javascript_code', javascript_code) self.stop()
def init(self): self.width = 1100 self.height = 800 self.main = gui.Container(width=self.width, height=self.height, margin='0px auto', style={ 'display': 'block', 'overflow': 'hidden' }) #add the following 3 lines to your app and the on_window_close method to make the console close automatically tag = gui.Tag(_type='script') tag.add_child( "javascript", """window.onunload=function(e){sendCallback('%s','%s');return "close?";};""" % (str(id(self)), "on_window_close")) self.main.add_child("onunloadevent", tag)
def __init__(self, data=None, update=None, updateRate=1, **kwargs): super(PlotlyWidget, self).__init__(**kwargs) self.updateRate = updateRate self.data = data self.update = update javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' code = """ var PLOT = document.getElementById('plot'); var url = "plot/get_refresh"; var plotOptions = { title: 'HSV' ,xaxis: {title: 'value'} ,yaxis: {title: '# pixels',type: 'linear'} }; plotOptions['margin'] = {t:50, l:50, r:30}; data=[{x: [1,2,3,4,5], y: [1,4,9,16,25]}, {x: [1,2,3,4,5], y: [1,2,3,4,5]}, {x: [1,2,3,4,5], y: [1,4,6,8,10]} ]; Plotly.newPlot(PLOT, data, plotOptions); Plotly.d3.json(url, function(error, data) { Plotly.plot(PLOT, data, plotOptions); }); """ javascript_code.add_child( 'code', # Add to Tag code % { 'id': id(self), }) self.add_child('javascript_code', javascript_code) # Add to widget
def test_init(self): widget = gui.Tag() assertValidHTML(widget.repr())
def __init__(self, appInstance, name, **kwargs): self._name = name self._appInstance = appInstance self._id = str(id (self)) super(wiPlotter, self).__init__(id=self._id, **kwargs) self._data = [] javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' code = """ var PLOT = document.getElementById('%(id)s'); var zmax = 20000; var config = { modeBarButtonsToRemove : ["sendDataToCloud", ], displaylogo: false, displayModeBar: true, //scrollZoom: true, //editable: true, }; var layout = { title: 'very first version of Wiggle', xaxis: {title: 'CMP'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; Plotly.newPlot(PLOT, [], layout, config); var drawWiggle = function (PLOT, twoDArray) { var data = []; var step = 1; var gain = 1; for (var trace=0;trace<twoDArray.length;trace+=step) { var x = new Array (twoDArray[trace].length); var y = new Array (twoDArray[trace].length); var ampl = new Array (twoDArray[trace].length); var fill_ampl = new Array (twoDArray[trace].length); for (var i=0;i<twoDArray[trace].length;i++) { x[i] = trace; y[i] = i; ampl[i] = trace + twoDArray[trace][i]/zmax*step*gain; if (twoDArray[trace][i] > 0) { fill_ampl[i] = ampl[i] } else { fill_ampl[i] = trace; } } var zero_line = { x: x, y: y, type: 'scatter', line: {color: 'black', width: 0, }, }; var fill = { x: fill_ampl, y: y, type: 'scatter', fill: 'tonextx', line: {color: 'black', width: 0, //shape: 'spline', }, }; var wiggle = { x: ampl, y: y, type: 'scatter', line: {color: 'black', width: 1, //shape: 'spline', }, }; data.push(zero_line); data.push(fill); data.push(wiggle); } var layout = { title: 'very first version of Wiggle', xaxis: {title: 'CMP'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; Plotly.newPlot(PLOT, data, layout, config); }; var drawMatrix = function (PLOT, twoDArray) { var stack = { z: twoDArray, type: 'heatmap', transpose : true, zsmooth : 'best', zauto : false, zmin : -zmax, zmax : zmax, colorscale : [[0, 'rgb(0,0,255)'], [0.5, 'rgb(255,255,255)'], [1, 'rgb(255,0,0)']], //colorbar : {symmetric: true,} }; var layout = { title: 'very first version of Wiggle', xaxis: {title: 'CMP'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; Plotly.newPlot(PLOT, [stack], layout, config); }; var updateData = function (id) { var PLOT = document.getElementById(id); var url = id + "/get_refresh"; Plotly.d3.json(url, function(error, twoDArray) { drawMatrix (PLOT, twoDArray ); }); }; """% {'id': self._id} javascript_code.add_child('code', # Add to Tag code % {'id': id(self), }) self.add_child('javascript_code', javascript_code) # Add to widget
def __init__(self, appInstance, name, **kwargs): self._params = enParam.Params([ enParam.Param(bool, 'density', True), enParam.Param(bool, 'wiggle', False), enParam.Param(float, 'percent', 0.9, add={ 'min': 0, 'max': 1 }), enParam.Param(float, 'gain', 1), enParam.Param('dropdown', 'palette', 'Greys', group='density', add={'possible_values': palette_names}), enParam.Param(int, 'skipt', 1, group='wiggle', add={'min': 1}), enParam.Param(float, 'lwidth', 0.1, group='wiggle'), ]) self._name = name self._appInstance = appInstance self._id = str(id(self)) super(wiPlotter, self).__init__(id=self._id, **kwargs) self._data = numpy.zeros((1, 1)) javascript_code = gui.Tag() javascript_code.type = 'script' javascript_code.attributes['type'] = 'text/javascript' code = """ var PLOT = document.getElementById('%(id)s'); PLOT.style.height = '%(h)s'; //PLOT.style.width = '%(w)s'; var config = { modeBarButtonsToRemove : ["sendDataToCloud", ], displaylogo: false, displayModeBar: true, //scrollZoom: true, //editable: true, }; var layout = { title: 'run calculation', xaxis: {title: 'Trace'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; var drawWiggle = function (PLOT, name, twoDArray, max_val) { var data = []; var step = 1; var gain = 1; for (var trace=0;trace<twoDArray.length;trace+=step) { var x = new Array (twoDArray[trace].length); var y = new Array (twoDArray[trace].length); var ampl = new Array (twoDArray[trace].length); var fill_ampl = new Array (twoDArray[trace].length); for (var i=0;i<twoDArray[trace].length;i++) { x[i] = trace; y[i] = i; ampl[i] = trace + twoDArray[trace][i]/max_val*step*gain; if (twoDArray[trace][i] > 0) { fill_ampl[i] = ampl[i] } else { fill_ampl[i] = trace; } } var zero_line = { x: x, y: y, type: 'scatter', line: {color: 'black', width: 0, }, }; var fill = { x: fill_ampl, y: y, type: 'scatter', fill: 'tonextx', line: {color: 'black', width: 0, //shape: 'spline', }, }; var wiggle = { x: ampl, y: y, type: 'scatter', line: {color: 'black', width: 1, //shape: 'spline', }, }; data.push(zero_line); data.push(fill); data.push(wiggle); } var layout = { title: name, xaxis: {title: 'Trace'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; Plotly.newPlot(PLOT, data, layout, config); }; var drawMatrix = function (PLOT, name, twoDArray, max_val) { var stack = { z: twoDArray, type: 'heatmap', transpose : true, zsmooth : 'best', zauto : false, zmin : -max_val, zmax : max_val, colorscale : [[0, 'rgb(0,0,255)'], [0.5, 'rgb(255,255,255)'], [1, 'rgb(255,0,0)']], //colorbar : {symmetric: true,} }; var layout = { title: name, xaxis: {title: 'Trace'}, yaxis: {title: 'Time', autorange: 'reversed',}, showlegend: false, }; Plotly.newPlot(PLOT, [stack], layout, config); }; var updateData = function (id) { var PLOT = document.getElementById(id); var url = id + "/get_refresh"; Plotly.d3.json(url, function(error, data) { d = data.d name = data.n max_val = data.m drawMatrix (PLOT, name, d, max_val); }); }; updateData ('%(id)s'); """ % { 'id': self._id, 'w': '1000px', 'h': '95%%' } javascript_code.add_child( 'code', # Add to Tag code % { 'id': id(self), }) self.add_child('javascript_code', javascript_code) # Add to widget