<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 Example of Jupyter/Ginga widget
This is an example of creating a Jupyter data viewer widget using a Jupyter image
widget and the Ginga viewer toolkit.
NOTE
Step1:  You can now do nearly everything that can be done with a regular "pg" type ginga web widget.
See http
Step2:  Now press and release space bar in the viewer and draw the shape.  Or you can use the right mouse button.
Step3:  Now you can click on the object to select it and edit it.  Editing control points should appear
<ASSISTANT_TASK:>
Python Code:
# create a Jupyter image that will be our display surface
# format can be 'jpeg' or 'png'; specify width and height to set viewer size
# PNG will be a little clearer, especially with overlaid graphics, but
# JPEG is faster to update
import ipywidgets as widgets
jup_img = widgets.Image(format='jpeg', width=500, height=500)
# Boilerplate to create a Ginga viewer connected to this widget
# this could be simplified, or hidden behind a class or convenience 
# method
# NOTE: you don't have to specify a log file--and if you are not interested
# in the log just specify null=True for a null logger
# level=10 will give you the most debugging information
from ginga.misc.log import get_logger
logger = get_logger("my viewer", log_stderr=False, log_file='/tmp/ginga.log', level=40)
from ginga.web.jupyterw.ImageViewJpw import EnhancedCanvasView
v1 = EnhancedCanvasView(logger=logger)
# set our linkage between the jupyter widget at ginga
v1.set_widget(jup_img)
# enable all possible keyboard and pointer operations
bd = v1.get_bindings()
bd.enable_all(True)
coordinates = widgets.HTML('<h3>coordinates show up here</h3>')
# callback to display position in RA/DEC deg
def mouse_move(viewer, button, data_x, data_y, w):
    image = viewer.get_image()
    if image is not None:
        ra, dec = image.pixtoradec(data_x, data_y)
        w.value = "cursor at %f, %f" % (ra, dec)
v1.add_callback('cursor-changed', mouse_move, coordinates)
%%javascript
/* some magic to keep the cell contents from scrolling
   (when we embed the viewer)
 */
IPython.OutputArea.prototype._should_scroll = function(lines) {
    return false;
}
# embed the viewer here
widgets.VBox([jup_img, coordinates])
# Load a FITS file.  You should see the embedded image update.
v1.load_fits("/home/eric/testdata/SPCAM/SUPA01118766.fits")
Explanation: Example of Jupyter/Ginga widget
This is an example of creating a Jupyter data viewer widget using a Jupyter image
widget and the Ginga viewer toolkit.
NOTE: To use these examples, you need to install the ipyevents package:
$ pip install ipyevents
$ jupyter nbextension enable --py --sys-prefix ipyevents
End of explanation
# grab a screenshot.
v1.show()
# add a canvas to the image and set the draw type
canvas = v1.add_canvas()
canvas.set_drawtype('ellipse', color='orange', fill=True, fillcolor='cyan', fillalpha=0.3)
Explanation: You can now do nearly everything that can be done with a regular "pg" type ginga web widget.
See http://ginga.readthedocs.io/en/latest/quickref.html for default key and button/pointer bindings.
See https://github.com/ejeschke/ginga/blob/master/ginga/examples/jupyter-notebook/ginga_ipython_demo.ipynb
for the kinds of things you can do with the embedded viewer including graphics overplotting, etc.
End of explanation
v1.show()
# put the canvas in edit mode
canvas.enable_edit(True)
canvas.set_draw_mode('edit')
Explanation: Now press and release space bar in the viewer and draw the shape.  Or you can use the right mouse button.
End of explanation
canvas.get_objects()
# let's get the object that we drew--what is it's location?
ell = canvas.get_objects()[0]
ell.x, ell.y
ell.xradius, ell.yradius
# delete everything on the canvas that we drew
canvas.delete_all_objects()
Explanation: Now you can click on the object to select it and edit it.  Editing control points should appear:
- orange: stretch or shrink dimension(s)
- green: scale object while keeping aspect
- blue: rotate object
- red: move object
You can also move objects simply by dragging anywhere in the bounding box if they are selected.
End of explanation
<END_TASK>