aaronwatters / jp_doodle Goto Github PK

rework demos to use jquery shim and requirejs
https://github.com/requirejs/example-jquery-shim

https://github.com/umdjs/umd

https://github.com/umdjs/umd/blob/master/templates/jqueryPlugin.js

Export to static javascript form for example for inclusion here

https://python-graph-gallery.com/

I would like to develop a relatively simple interactive interface that can be accessed without any code or editor from jupyter. Ideally, just by running a python script from the terminal, a browser window would open with the interface (built in a dual_canvas) running.
I understand that this is meant to be used inside jupyter, but how much more difficult would it be to open a page with all widgets working.
Because if there is a way to get that working - this library could basically replace most GUI packages for python (which tend to be very old and annoying).

Anyway, this library is fantastic - keep up the great work!

copied from jupyter google group:

Interesting..

So the idea is that you can build an interactive in the first tab/canvas panel, then grab a snapshot of it that appears in the second?

If there is an interactive where the view is dependent on the mouse cursor position, eg in the Simple Python Example notebook, the image color sampling demo, is there a keybord short cut to click the Take snapshot button? (else how do you get to click the button without moving the mouse cursor away from the point you want to sample/snapshot?)

Is there any way of getting the snapshot into a variable (eg _ ) with a corresponding image data URI value?

--tony (hirst)

Figure out how to use d3-force for graph layouts in jp_doodle context
https://github.com/d3/d3-force/blob/master/README.md#forceLink

Been tinkering again... here's another possible misc example - flowchart.js

import jp_proxy_widget

fcode = '''
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
'''

class FlowchartWidget(jp_proxy_widget.JSProxyWidget):
    def __init__(self, *pargs, **kwargs):
        super(FlowchartWidget, self).__init__(*pargs, **kwargs)
        e = self.element
        
        # Call some standard jQuery method on the widget element:
        e.empty()
        # This is for the controls as well as the simulator
        e.width("1000") # 1181px 2362
        e.height("1000") # 551px 1143
        html = '<div id="fchart_canvas"></div>'
        e.html(html)
        self.load_js_files(["https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js",
                            'https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.13.0/flowchart.js'])
        
    def charter(self, chart):
        self.set_element("chartdef", chart)
        self.js_init("chart = flowchart.parse(element.chartdef); chart.drawSVG('fchart_canvas');")
        
testEmbed = FlowchartWidget()
testEmbed.charter(fcode)
testEmbed