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
