Insert images in Scintilla text editor

[Kristof Mulier]

Inserting images in Scintilla.

I would like to know if Scintilla supports the insertion of images (for example .png files) in the editor. It would be awesome!

What about QScintilla?

Personally I use QScintilla in Python 3.6 (instead of Scintilla in C++). If I build a GUI in PyQt5, and I insert the QsciScintilla editor like so:

https://qscintilla.com/an-editor-in-a-gui/

am I able to insert images in the editor?

[Neil Hodgson]

Kristof Mulier:

> I would like to know if Scintilla supports the insertion of images (for example .png files) in the editor. It would be awesome!

Scintilla does not support insertion of images.

A reasonable extension of the Character Representation feature would allow setting an image representation for a character. This was considered when Character Representation was implemented but string representations seemed to satisfy most needs. One hassle with image representations is that they don’t scale nicely as the text is zoomed unless the application is prepared to generate an image for each zoom level. Also, images normally include colour information so won’t change colour as strings do when syntax styled.
http://www.scintilla.org/ScintillaDoc.html#CharacterRepresentations

PNG is a complex format that is not easily supported on all platforms. Currently, Scintilla uses simple arrays of RGBA values for the images displayed in auto-completion lists and marker symbols.

Neil

[Kristof Mulier]

Thank you Neil for your response.

The reason I asked this because I think it would be nice for a source-code editor to have this feature. Just imagine, you've written a very difficult function. You can explain some of it with words in a multiline comment above the function, but it still won't make things clear to the reader. Just imagine what an image can do. You could perhaps insert a .png image from the same folder where your source file is located, through an html tag in your multiline comment:

Now imagine you've got two buttons above the editor. The raw button simply shows the source code "as is". The html tag is visible in the multiline comment, and one can adapt it. The img button converts each html tag into the requested image. In this mode, one can scroll through the source code and see images that clarify certain algorithms or parts of the code.

Wouldn't this be great?

[Mike Lischke]

Now imagine you've got two buttons above the editor. The raw button simply shows the source code "as is". The html tag is visible in the multiline comment, and one can adapt it. The img button converts each html tag into the requested image. In this mode, one can scroll through the source code and see images that clarify certain algorithms or parts of the code.

Wouldn't this be great?

Not in a source code editor. Such info belongs to the documentation, not code comments.

Mike
-- 
www.soft-gems.net

[Kristof Mulier]

Hi Mike,

I'm writing microcontroller code most of the time. Sometimes it would be great if I can insert images of waveforms that certain code snippets produce on the output. Right now, I see lots of attempts (even in professional code releases) where people either describe the waveforms, or try drawing it with ASCII graphics.

I've asked to many colleagues the question if they 'd like to add images to their code (in the way like described in my figure). Most of them are very enthusiastic about this idea. Some not. It's also a matter of personal taste I guess.

[Mike Lischke]

Hi Kristof,

I've asked to many colleagues the question if they 'd like to add images to their code (in the way like described in my figure). Most of them are very enthusiastic about this idea. Some not. It's also a matter of personal taste I guess.

I've been thinking about such a feature myself a decade ago (I wrote my own code editor before switching to Scintilla, http://www.soft-gems.net/index.php/controls/unicodeeditor-formerly-unicode-syntax-editor), but then I realized how noisy that would be in code. If you have complex stuff to explain I would almost always prefer developer documentation.

Code comments are very important, but they shouldn't replace documentation, be short and to the point and don't get in the way when you just want to look up a parameter or so. This is also why I dislike big doc comments in header files.

But as you said, all a matter of taste :-)

Mike
-- 
www.soft-gems.net

[KHMan]

On 5/18/2017 9:34 PM, Kristof Mulier wrote:
> Hi Mike,
>
> I'm writing microcontroller code most of the time. Sometimes it
> would be great if I can insert images of waveforms that certain
> code snippets produce on the output. Right now, I see lots of
> attempts (even in professional code releases) where people either
> describe the waveforms, or try drawing it with ASCII graphics.

It's a slippery slope to vastly increased complexity in the
editor. No MCU IDE seems to be going this direction anytime...

When I want to see datasheets (or documentation), I have the PDF
by side of the editor, both windowed. (I use SciTE for coding
PIC16/18/24 in C.) Or I switch on a second display and move the
document there. Getting info is never a problem. I'd rather leave
source code as source code.

When someone wants to tweak the image, some kind of editor will be
needed anyway. Adjusting a bitmap image will be really messy in
the long run. Why not keep all that in a document, say an ODT
document, and draw the things there, and be easily editable?

In professional embedded dev, especially automotive, isn't there a
lot of strict rules? I doubt mainstream guidelines will encourage
this kind of image embedding... are there rules that allow or
encourage this kind of 'documenting'?

> I've asked to many colleagues the question if they 'd like to add
> images to their code (in the way like described in my figure).
> Most of them are very enthusiastic about this idea. Some not. It's
> also a matter of personal taste I guess.

--
Cheers,
Kein-Hong Man (esq.)
Selangor, Malaysia

[Kristof Mulier]

Dear Mike,

Dear Kein-Hong Man,

I get the point that not all people like the idea. I also know that in certain environments, it won't get mainstream any time soon.

But after all,

I would just like to know if it's possible. A discussion about "it's useful" or "it's crap" won't lead us anywhere right now. Let's focus on the technical aspects ;-)

Apparently it's not possible to insert images right now - as Mr. Hodgson said, it's not supported in the current Scintilla version. He pointed out that the .png format is pretty complicated, especially when support is needed on many platforms. I have no background in image file formats. But could another format (like .jpg or .bmp) get inserted more easily? How much time would it take for someone familiar with the source code of Scintilla to implement it?

I would like to sponsor anyone who is willing to invest time in bringing such a feature alive. I must admit that I cannot throw thousands of dollars at it (I'm not a rich guy). But I would be happy to make a donation, as much as I can afford. I'd also mention your name with many thanks on my website: https://qscintilla.com

The feature would be like this:

With a simple html-tag, the user can insert an image in the source-code editor. The editor will either show the inserted images (img mode), or the raw text (raw mode: the html-tags are visible, no images).

Thanks a lot :-)

[KHMan]

On 5/18/2017 10:52 PM, Kristof Mulier wrote:
> [snip]

> Apparently it's not possible to insert images right now - as Mr.
> Hodgson said, it's not supported in the current Scintilla version.

> He pointed out that the *.png* format is pretty complicated,

> especially when support is needed on many platforms. I have no
> background in image file formats. But could another format (like

> *.jpg* or *.bmp*) get inserted more easily? How much time would it

> take for someone familiar with the source code of Scintilla to
> implement it?

Getting a blittable surface from a PNG is easy, plenty of open
source examples can be found. JPG and BMP should be no trouble too.

Hooking it into Scintilla is the thing that will take time.
Someone will need to be familiar with the drawing code. Add a mode
flag, etc. Then getting it to work cross-platform will add more time.

It's certainly doable.

> I would like to sponsor anyone who is willing to invest time in
> bringing such a feature alive. I must admit that I cannot throw
> thousands of dollars at it (I'm not a rich guy). But I would be
> happy to make a donation, as much as I can afford. I'd also
> mention your name with many thanks on my website:
> https://qscintilla.com
>
> The feature would be like this:
> With a simple html-tag, the user can insert an image in the
> source-code editor. The editor will either show the inserted

> images (*img mode*), or the raw text (*raw mode*: the html-tags
> are visible, no images).
>
> <https://lh3.googleusercontent.com/-zrt_DWkdoi0/WR20KkWYwfI/AAAAAAAAAmg/Qs5Se8bjrcYVUD3e31tF6EEDMCSfHTSkQCLcB/s1600/img_in_scintilla.png>

[Neil Hodgson]

Kristof Mulier:

> The reason I asked this because I think it would be nice for a source-code editor to have this feature.

All lines in Scintilla are the same height in pixels and much of the code reflects this. Allowing lines to have different heights is a large amount of work. Such a feature should not degrade performance when it is not used.

Neil

[Kristof Mulier]

I have tried to implement it myself. Unfortunately I'm not familiar with the Scintilla source code. So I've tried implementing it in the Python-layer on top of Scintilla. You can find the result here:

https://stackoverflow.com/questions/44385030/inserting-an-image-in-a-qscintilla-editor

As you will see in the StackOverflow question, I'm facing a problem. Any help is greatly appreciated :-)

Kind greetings,

Kristof