Forum > Suggestions
Code editor — the ability to embed images
furious programming:
Treat the following proposal rather as my thoughts on the code editor functionality I desire, because I doubt that it will ever be actually implemented. I've been thinking about it a lot, which I think is a pretty cool idea, so I decided to share it with you. 8)
I'm currently working on video game code that does more complicated things and calculations in many places. I create the code in such a way that I add comments to it describing more or less what a given fragment does. Unfortunately, in many cases it is difficult to explain in words what a given code does, which forces long descriptions (and which ultimately do not allow to clearly explain what is going on).
Such long descriptions packed with complicated nomenclature in many places would not be necessary if they could be replaced with a picture — a graphical diagram illustrating what it is all about. It would be useful not only to create graphical descriptions of how code fragments work, but also to avoid the need to create e.g. tables in ASCII art and other similar things.
How would it look and work?
SynEdit would have to implement the ability to embed images that would be rendered under the text (source code) as a background for the code. The z-order of such an image (in the rendering pipeline) would be the lowest, so that currently supported content will always be rendered over such an image (text, line highlight, text etc. etc.) — the area of the control would first be filled with a solid color, then the images would be rendered, and finally the source code. Popular image file formats with raster graphics (.png, .bmp, .jpg) should be supported, but it would also be nice if there was support for vector graphics, at least .svg (they could be scaled nicely when zooming in the editor code).
Handling embedded images would require two modes — background mode and edit mode.
The first mode would mean that the image would just be rendered as the editor background, below the text (source code). You should be able to write code over that image, and clicking on that image wouldn't cause any interaction with it — you'd just place the caret there, and you'd be able to select the text over the image, so edit the code as you normally would.
The second mode would allow you to modify the embedded image. Activating the image editing mode would mean holding down the appropriate key combination and clicking the appropriate mouse button on the image. When clicked in this way, the image would be rendered in the foreground (above the editor content) and would have visual frame and anchors to stretch it (just like in the forms designer). Left-clicking on the image would allow you to move the image around in the editor. Right-clicking on the edited image would open a context menu with useful options — copy, cut, delete the image; z-order settings relative to other embedded images; priority settings (rendering under or over code), scale settings etc. etc. The visual representation of the edited image and the content of the context menu would be more or less in line with the functionality of the current form designer, so it will be simple to use and intuitive.
To maintain backward compatibility and compatibility with other IDEs and text editors, embedded images would not be a physical part of the source code file. The source files would still be plain text files, but the embedded images would be stored in separate files, one for each module (if a module doesn't have a single image embedded, its resource file shouldn't exist either). Assuming we have a unit named MyUnit.pp, after embedding the first image in it, a file named MyUnit.pp.res should be created next to it (this is just an example) and the image should be saved in it, in an encoded form (just like in the .lfm files).
Implementing such functionality should not be difficult. Rendering an image on a SynEdit canvas is just adding another step between rendering a solid background and highlighting and line content (text). The image panning and stretching mode can be implemented so that the image will be converted to a visual component (windowed so that the LCL is able to display it in the foreground), embedded in SynEdit. Then it will be easy to implement mouse support and context menu. The rest is the implementation of handling files with resources, on the side of the IDE code.
Overall, it would be nice to have this functionality. I would certainly use it myself, and whoever did not need to use it would not have to and their source files would have the same form as they are now (backwards compatibility would be preserved). I am curious about your opinions on this topic. Would you like to be able to embed images? Would you use it? Or maybe not only images, but also other types of resources?
KodeZwerg:
--- Quote from: furious programming on January 17, 2023, 06:21:21 pm ---Would you like to be able to embed images?
--- End quote ---
No.
--- Quote from: furious programming on January 17, 2023, 06:21:21 pm ---Would you use it?
--- End quote ---
Hell no, but that is just my personal opinion.
--- Quote from: furious programming on January 17, 2023, 06:21:21 pm ---Or maybe not only images, but also other types of resources?
--- End quote ---
Not a resource but a coloring for methods, example method A is yellow backgrounded, method B is blue and so on to have an easy overview where I am.
//edit
With background color I really do mean a backgroundcolor, like basecolor of IDEs background with a slight transparent overdraw of my wished color, to keep contrast in a readable good way
440bx:
--- Quote from: furious programming on January 17, 2023, 06:21:21 pm ---I am curious about your opinions on this topic. Would you like to be able to embed images? Would you use it? Or maybe not only images, but also other types of resources?
--- End quote ---
Being able to use images in the source to document its operation would definitely be a very nice plus (honestly, I've thought about it many times in the past.)
I haven't given the idea a whole lot of thought but, something tells me it wouldn't be easy to implement smoothly and in a platform independent way. For instance, even if the source file had images, I would still want to be able to edit it using any regular text editor, which means the images cannot get in the way of the "vanilla" editors out there, not to mention that the image data cannot get in the compiler's way either.
furious programming:
--- Quote from: 440bx on January 17, 2023, 07:47:30 pm ---For instance, even if the source file had images, I would still want to be able to edit it using any regular text editor […]
--- End quote ---
That's why I suggested that images embedded in the code editor should be saved to a text file, e.g. in the same format as images and other non-text resources used in visual components and stored in .lfm files. The API for parsing such files already exists, so it can be used right away.
--- Quote ---[…] which means the images cannot get in the way of the "vanilla" editors out there, not to mention that the image data cannot get in the compiler's way either.
--- End quote ---
And it would be if only these images were stored in separate files. You would still be able to edit the source code file in any test editor as no metadata about the embedded images would be stored in the code file. The compiler, on the other hand, would not take such files into account at all, it would have nothing to do with them, so you could easily compile the code as it is today (using FPC or any other compiler).
In summary, image embedding support would only apply to SynEdit and Lazarus, the compiler would not use these additional files at all.
progmokus:
Maybe the link embedded in the comment that Synedit can handle? That way it doesn't bother the translator. That way you can add anything.
for example:
// [read.txt] [image.jpg]
ctrl+mouse click to activate...
Navigation
[0] Message Index
[#] Next page