Add LTI tool to Rich Content Editor

More fun with LTI

Earlier I installed Code Embed [note that as of Fall 2016 this project is no longer maintained and as of 30 May 2017 the service is no longer available] and a YouTube LTI tool provider;

I wrote a simple python program to list the external tools for a course (it could just have been done as a single curl call).

The tool output the following information for these two tools

./list-external-tools-for-course.py 11
about to prettyprint tool: Code Embed
{'account_navigation': None,
 'assignment_menu': None,
 'assignment_selection': None,
 'collaboration': None,
 'consumer_key': 'N/A',
 'course_home_sub_navigation': None,
 'course_navigation': None,
 'course_settings_sub_navigation': None,
 'created_at': '2016-07-15T13:45:26Z',
 'custom_fields': {},
 'description': 'Code Embed is a tool that lets you embed a code editor in '
                'an LMS such as Canvas, Blackboard, or Moodle.',
 'discussion_topic_menu': None,
 'domain': 'code-embed-lti.herokuapp.com',
 'editor_button': {'enabled': 'true',
                   'icon_url': 'https://code-embed-lti.herokuapp.com/images/icon.png',
                   'label': 'Code Embed',
                   'selection_height': 650,
                   'selection_width': 850},
 'file_menu': None,
 'global_navigation': None,
 'homework_submission': {'enabled': 'true',
                         'icon_url': 'https://code-embed-lti.herokuapp.com/images/icon.png',
                         'label': 'Code Embed',
                         'selection_height': 650,
                         'selection_width': 850},
 'icon_url': 'https://code-embed-lti.herokuapp.com/images/icon.png',
 'id': 17,
 'link_selection': None,
 'migration_selection': None,
 'module_menu': None,
 'name': 'Code Embed',
 'not_selectable': False,
 'post_grades': None,
 'privacy_level': 'public',
 'quiz_menu': None,
 'resource_selection': {'enabled': 'true',
                        'icon_url': 'https://code-embed-lti.herokuapp.com/images/icon.png',
                        'label': 'Code Embed',
                        'selection_height': 650,
                        'selection_width': 850},
 'tool_configuration': None,
 'updated_at': '2016-07-15T13:45:26Z',
 'url': 'https://code-embed-lti.herokuapp.com/lti_tool',
 'user_navigation': None,
 'vendor_help_link': None,
 'wiki_page_menu': None,
 'workflow_state': 'public'}
about to prettyprint tool: test app
{'account_navigation': None,
 'assignment_menu': None,
 'assignment_selection': None,
 'collaboration': None,
 'consumer_key': 'consumerkey',
 'course_home_sub_navigation': None,
 'course_navigation': None,
 'course_settings_sub_navigation': None,
 'created_at': '2016-07-15T13:16:22Z',
 'custom_fields': {},
 'description': 'YouTube Search LTI App running on my local machine as a '
                'test LTI app.',
 'discussion_topic_menu': None,
 'domain': 'null',
 'editor_button': None,
 'file_menu': None,
 'global_navigation': None,
 'homework_submission': None,
 'id': 16,
 'link_selection': None,
 'migration_selection': None,
 'module_menu': None,
 'name': 'test app',
 'not_selectable': False,
 'post_grades': None,
 'privacy_level': 'anonymous',
 'quiz_menu': None,
 'resource_selection': None,
 'tool_configuration': None,
 'updated_at': '2016-07-16T14:36:01Z',
 'url': 'http://localhost:14921/lti_launch',
 'user_navigation': None,
 'vendor_help_link': None,
 'wiki_page_menu': None,
 'workflow_state': 'anonymous'}

From this we can see that the Code Embed tool establishes an icon for use by the editor, while the YouTube search tool did not. So to see if I can put a tool into the editor, I need to give it an icon to display so that there is something for the user to click on.

The first task was to check the details of the Code Embed icon. I did a wget and then ran pngcheck on the icon:

pngcheck icon.png 
OK: icon.png (16x16, 8-bit palette+trns, non-interlaced, -569.1%)

Since I would like to add emacs as an external editor I got the Emacs logo in 16x16 size from https://github.com/nanasess/EmacsIconCollections/tree/master/app_icons/png Links to an external site. 

 pngcheck emacs_16.png 
OK: emacs_16.png (16x16, 32-bit RGB+alpha, non-interlaced, -1.6%).

I uploaded the icon to the files for the course and it has the https://kth.instructure.com/files/6254 

This inserted the icon into the editor, but it as invisible. So my first attempt to change this was to turn the 32 bit RGB icon into an 8 bit image:

convert emacs_16.png -depth 8 emacs_16_8bit.png
maguire@birkv:/u2/home/maguire/Working/Canvas/LTI-experiments> pngcheck emacs_16_8bit.png
OK: emacs_16_8bit.png (16x16, 8-bit palette+trns, non-interlaced, -407.4%).

I uploaded the new icon and installed it with

./modify-external-tool-entry.py 11 16 https://kth.instructure.com/files/6255

However, the editor button was still transparent or not visible.

However, after multiple attempts with different icons and files in Canvas, all attempts failed. So I loaded the emacs icon into my homepage and then passed the URL to the program:

./modify-external-tool-entry.py 11 16 https://people.kth.se/~maguire/emacs_16.png

This works as shown below: