Is it possible to show image in Sublime Text 3 output panel?

Question

I am writing a sublime text 3 plugin. I have an image (PNG format). I would like to load this image into Sublime Text 3 custom output panel, to show it as a preview. Does anyone have idea how to do this or is it even possible?

@PaulKrishnamurthy, care to explain how you know or why is it not possible? — Djuka, May 29 '15 at 03:42
It seems it's not possible. Maybe this is not the best solution, but if you want you can create a small row in the layout and open there the image. — sergioFC, May 29 '15 at 22:30

score 6 · Accepted Answer · edited Jun 03 '15 at 17:29

6

Seems that the output panel can only render unicode characters, making it impossible to put an image in there (maybe one day).

Alternate solution

As I said in my comment, you can divide the layout and use a tab to show the image, and maybe also a tab to show text if needed. I've made this simple example plugin and two screenshots:

import sublime, sublime_plugin

class Example(sublime_plugin.WindowCommand):
    def run(self):
        """Divide layout"""
        self.window.set_layout({
            "cols": [0.0, 0.4, 1.0],
            "rows": [0.0, 0.6, 1.0],
            "cells": [[0, 0, 2, 1], [0, 1, 1, 2], [1, 1, 2, 2]]
            })

        """Open image in group 1"""
        self.window.focus_group(1)
        self.window.open_file('/home/sergio/Escritorio/images/logo.png')

        """Show output/info in group 2"""
        self.window.focus_group(2)
        v = self.window.new_file()
        self.window.run_command('insert', {'characters': ("Plugin output:\n"
            "-Stackoverflow\n"
            "-is\n"
            "-very\n"
            "-cool\n"
            "-the\n"
            "-best\n"
            "-websites\n"
            "-of\n"
            "-the\n"
            "-world\n")})
        v.show_at_center(0)

        self.window.focus_group(0)

Layout before:

Layout before

Layout after:

Layout after

Have in mind that this is a simple example, and it doesn't close the opened tabs, nor restore the layout, etc.

edited Jun 03 '15 at 17:29

Djuka

505
5
19

answered Jun 01 '15 at 11:56

sergioFC

5,926
3
40
54

I figured this out long before, output panel (sorry, I was busy and couldn't answer sooner). I wanted to answer this the way you did because I figured there was no other way. But let's try to figure something more. If you pass sublime.KEEP_OPEN_ON_FOCUS_LOST flag to quick panel and focus other groups to open these files, everything ends up great, but now you can't restore focus to quick panel (I wanted to preview them on highlight from quick panel). Do you know any way of doing this? I googled the **** out of this and posted to sublime forums but I didn't find any solution. Nice work, btw. – Djuka Jun 01 '15 at 23:18
Yes, is possible to do what you want. The method *show_quick_panel* doesn't return the associated *view* object, but you can get it using *on_activated* in a *EventListener* and you need to save it in order to use it later. Then you can restore the focus using *window.focus_view(savedView)*. If you need help on this I can write a example. It would be a lot easier if *show_quick_panel* directly returned the *view*. – sergioFC Jun 02 '15 at 00:50
let me tinker with this a bit. I will update your example a bit later with what I did. – Djuka Jun 02 '15 at 02:10
focus doesn't go back to quick panel, but to editing area of the view. I tried this directly before. If you can do it, please write an example. – Djuka Jun 02 '15 at 03:20
Focus goes back to input line of the quick panel so you can then use arrows to keep highlighting next items. Is that what you want? – sergioFC Jun 02 '15 at 06:57
@Djuka I've made an example but I can't post it as a comment nor as an answer to this different question. In this [dropbox link](https://www.dropbox.com/sh/mgj2dt66rtlh1ge/AAAYbimGslXF1YzKS6U5vbA9a?dl=0) you can see the two plugins I've made and a gif showing the functionality. I prefer that you ask a new question and I'll answer it with this content so everything remains on stackoverflow. – sergioFC Jun 03 '15 at 14:34
sergioFC, so if I understood it right, you set that boolean true and when quick panel gets focus, on_activated is triggered and quick panel gets set in sublime.qucikPanelView? Is it whole view with current state or specifically quick panel? I will open another question put a link in next comment. This works like a charm. Thank you very much. – Djuka Jun 03 '15 at 17:05
@segioFC, [here it is](http://stackoverflow.com/questions/30626639/how-to-restore-focus-to-quick-panel-after-focusing-some-other-group-to-open-a-fi). Fire away! :) – Djuka Jun 03 '15 at 17:18
@Djuka I'm glad it worked, you're welcome and thanks for moving this to a new question. That's it, you get the quick panel view, I've added aditional coments in the plugin of the new answer that explain it. – sergioFC Jun 03 '15 at 18:15
One more thing. How did you make that .gif? It looks really nice. :) – Djuka Jun 03 '15 at 20:01
1

@Djuka You're right, the gif has "real" quality and a ver small size, I used a windows tool called [ScreenToGif](https://screentogif.codeplex.com/). – sergioFC Jun 03 '15 at 20:36
For future readers: code and image has been moved to the linked question. – sergioFC Mar 04 '18 at 13:09

score 3 · Answer 2 · answered Sep 19 '16 at 08:38

I found a quick way to display images in sblime text 3. I figured out taht the view.show_popup function can display HTML but no img-tags with a url for a Image.

Now I searched for a image that is converted to base64 and it seems to work. I maked a new sublime text plugin which convert the image to base64 and shows it to the editor. Quick example for the popup below. Open the console from view->show console and input this:

view.show_popup('<img src="data:image/gif;base64,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">')

Here is the result:

thanks @sergioFC for the reputation. For more information I've created an issue on github: https://github.com/SublimeTextIssues/Core/issues/1378 — Evolutio, Dec 05 '16 at 07:59
You're welcome. I've tested that it is also working for `res://`, but I also want to know why it isn't working for http. Nice answer by the way. — sergioFC, Dec 06 '16 at 10:34

score 2 · Answer 3 · answered Apr 12 '18 at 17:32

2

The following package has the feature of showing inline images in a markdown document: https://github.com/renerocksai/sublime_zk

I have no idea how it is done, and I'm not a programmer, but maybe you can take a look.

answered Apr 12 '18 at 17:32

Samuel Dellicour

131
3

Is it possible to show image in Sublime Text 3 output panel?

3 Answers3