clear_output improvements #1563

Merged
merged 4 commits into from Apr 14, 2012

Conversation

Projects
None yet
4 participants
Owner

minrk commented Apr 9, 2012

This was a part of PR #1548, but as I kept finding issues, I decided this should be a separate PR. That PR does depend on this one, and should not be merged before this one.

Changes:

  • clear_output() clears the line, even in terminal IPython, the QtConsole and plain Python as well, by printing \r to streams.
  • clear_output() avoids the flicker in the notebook by adding a delay, and firing immediately upon the next actual display message.
  • display_javascript hides its output_area element, so using display to run a bunch of javascript doesn't result in ever-growing vertical space.
IPython/frontend/html/notebook/static/js/codecell.js
@@ -683,6 +690,9 @@ var IPython = (function (IPython) {
// We just eval the JS code, element appears in the local scope.
var element = $("<div/>").addClass("box_flex1 output_subarea");
e.append(element);
+ // Div for js shouldn't be drawn, as it will add empty height to the area.
@ellisonbg

ellisonbg Apr 9, 2012

Owner

Are you hiding the entire output_area for that cell? If so, won't the javascript be unable to append things to the output area and have them show up on the screen?

@minrk

minrk Apr 9, 2012

Owner

Yes I am. The js can call e.show() if it wants to draw. But it is certainly true that if there is nothing to draw, the height should be zero (right now it's ~15 px, so running a series of js calls results in infinitely growing vertical space).

@ellisonbg

ellisonbg Apr 9, 2012

Owner

OK, we should document the fact that the users needs to call the show method. Not sure where to put that documentation. I agree that this is a good idea though.

@minrk

minrk Apr 9, 2012

Owner

Documented in the Javascript object docstring.

IPython/frontend/html/notebook/static/js/codecell.js
+ this.clear_out_timeout = setTimeout(function(){
+ // really clear timeout only after a short delay
+ // this reduces flicker in 'clear_output; print' cases
+ console.log("clear_out_timeout");
@ellisonbg

ellisonbg Apr 9, 2012

Owner

Let's remove the console.log before merging.

@minrk

minrk Apr 9, 2012

Owner

removed.

Owner

ellisonbg commented Apr 9, 2012

These are clear improvements to the clear_output logic. Have not tested it, but the code looks good.

minrk added some commits Apr 4, 2012

[notebook] clear_output is handled after a delay
This reduces flicker during common loops like:

for step in stuff:
    clear_output()
    print something

the timeout is flushed *immediately* on any subsequent output.
hide output_area for js
prevents growing vertical space from adding empty output_areas.
Owner

minrk commented Apr 9, 2012

Here is a notebook with text progress bar using clear_output improvements and simple javascript progress bar using js changes.

Writing a javascript progress bar is really trivial:

import uuid
from IPython.core.display import HTML, Javascript, display

divid = str(uuid.uuid4())

display(HTML(
"""
<div style="border: 1px solid black; width:500px">
  <div id="%s" style="background-color:blue; width:0%%">&nbsp;</div>
</div> 
""" % divid)
)

for i in range(1,101):
    time.sleep(0.1)
    display(Javascript("$('div#%s').width('%i%%')" % (divid, i)))
Owner

ellisonbg commented Apr 9, 2012

This is extremely cool!

Owner

Carreau commented Apr 10, 2012

I came across this article :
http://www.alsacreations.com/article/lire/1416-html5-meter-progress.html
I just learn that it seems that HTML5 support 'native' progress bar (not all browser implement it yet).

Just for the record of course. A div with a width is perfectly fine with me. :-)

Owner

fperez commented Apr 14, 2012

The code looks good to me and the functionality is fantastic, great job! I'll merge now, but I want to make a suggestion: @minrk, with just adding a tiny bit of explanatory text (a title and a short paragraph before each cell should suffice), your progressbar notebook should really go into the doc examples! It's a great little illustration of how to use the system which I'm sure many people will find useful.

I won't delay this PR on that alone, esp. since #1548 depends on this one, so I'll merge now. Great work!!

fperez added a commit that referenced this pull request Apr 14, 2012

Merge pull request #1563 from minrk/clear_output
clear_output improvements, which allow things like progress bars and other simple animations to work well in the notebook.

* `clear_output()` clears the line, even in terminal IPython, the QtConsole and plain Python as well, by printing `\r` to streams.

* `clear_output()` avoids the flicker in the notebook by adding a delay, and firing immediately upon the next actual display message.

* `display_javascript` hides its `output_area` element, so using display to run a bunch of javascript doesn't result in ever-growing vertical space.

@fperez fperez merged commit d66ece6 into ipython:master Apr 14, 2012

mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

Merge pull request #1563 from minrk/clear_output
clear_output improvements, which allow things like progress bars and other simple animations to work well in the notebook.

* `clear_output()` clears the line, even in terminal IPython, the QtConsole and plain Python as well, by printing `\r` to streams.

* `clear_output()` avoids the flicker in the notebook by adding a delay, and firing immediately upon the next actual display message.

* `display_javascript` hides its `output_area` element, so using display to run a bunch of javascript doesn't result in ever-growing vertical space.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment