Color code previews

deepnight · May 01, 2008#12008-05-01T13:14+00:00

Hello,

I've been using UE, and now UES for a really long time now. There is one single feature which misses me a lot : a little color preview on hexadecimal color codes (in CSS files for example)

The idea would be to draw a little square near any detected color code in the file, filled with the corresponding color.

Screenshot :

On this example, I would assume that standard color names would be recognized too, which is not absolutely necessary. A really good point however would be to allow this feature to be added (optionally) through the wordfile, with something like this:

Code: Select all

/Colors = # 0x html

Which would mean that anything starting with "#" or "0x" and followed by 6 hexa characters would display a little color box. This would allow to use this feature in Flash source code like :

Code: Select all

mc.beginFill(0xff0000);

Mofi · May 01, 2008#22008-05-01T15:17+00:00

You know that this is a user-to-user forum and feature requests must be sent to IDM by email? See top of the page!

Do you know that when you have selected for example #e7c48f and open Edit - Insert Color UltraEdit will show you the color specified by the selected text. I have assigned a hotkey for Edit - Insert Color to be able to open it quickly at any time.

From a programmers view your idea with a small box showing the color of the color code is very tricky to realize. Having graphics inside a text area which must scroll with the text is hard to do. Also what happens if there are characters in the line above or when the next character after the color value is for example a double quote like <span style="color:#e7c48f">. Where is room for the graphical symbol? More easily would be to underline the text for the color value with the color the text specifies. That would work for all colors except for the currently used text background color.

deepnight · May 01, 2008#32008-05-01T16:35+00:00

Yes, I noticed that this is a user-to-user forum, as it's clearly written on the UES home page, just before going to the forum. The idea was to post this here first to get comments, then to send a more "considered" suggestion to the dev team if we managed to find something good.

Anyway, sorry if my post wasn't clear

You're right about the graphic positioning problem, I pretty know much how painful it can be, depending on how much control you have on your text area component. However, I assumed that the text area in UES was "home-made", and therefore fairly easy to customize in such a way.

A good mix would be either to :
- underline the color code with the corresponding color
- set background to this color, and use a contrasted color for the text (foreground)
- insert the colored square as a "fake" character just after the color code, colored accordingly (tricky too, but could maybe be done using extended char codes)
- add a rollover on the color code to preview the color in a tooltip (not the best technique, as you can't glance over your code quickly : you have to mouse-over color codes)

Of course, this option could be disabled easily through settings.

I know about Edit -> Insert color, which is atm the only way to preview a color in UES. Anyway, as I mentioned, it's not a good solution to glance over a 10.000 lines long CSS (for example).

Mofi · May 04, 2008#42008-05-04T09:15+00:00

- underline the color code with the corresponding color is surely not too difficult to implement.

- set background to this color, and use a contrasted color for the text (foreground) should be also not too difficult.

- insert the colored square as a "fake" character just after the color code, colored accordingly (tricky too, but could maybe be done using extended char codes). That could be really tricky. Ghost characters are always not easy to handle because many things are not correct anymore like byte position in the file is not matching the byte position displayed, column number with or without the "fake" character, etc. UTF-8 is an encoding standard where such problems occur also during editing.

- add a rollover on the color code to preview the color in a tooltip (not the best technique, as you can't glance over your code quickly : you have to mouse-over color codes). I agree that this would not really a big improvement for seeing the colors quickly.

Note: I'm not an employee of IDM. I'm a user like you who has never seen any code line of UE/UES. So I don't really know how difficult it would be to implement one or more of what you suggested.

... glance over a 10.000 lines long CSS (for example) Yes, I know that there are a lot of CSS files with several hundred or even thousands of lines. And whenever I look on such CSS files, I think the creator of this CSS file does not really know what the C in CSS means or does not know what "cascading" means. I have saved for local usage some very interesting webpages with very helpful infos and when I do that I also optimize the files. My typical rate on optimization is to decrease the CSS file size to 10-20% of the original size and the HTML file size to 25-50% of the original size without changing anything on page look, on the contrary the page looks now identical independent of the browser I use. However, not everyone can be a CSS and HTML expert or has the time to optimize the files.

deepnight · May 13, 2008#52008-05-13T19:38+00:00

Yes, I know that there are a lot of CSS files with several hundred or even thousands of lines. And whenever I look on such CSS files, I think the creator of this CSS file does not really know what the C in CSS means or does not know what "cascading" means. I have saved for local usage some very interesting webpages with very helpful infos and when I do that I also optimize the files. My typical rate on optimization is to decrease the CSS file size to 10-20% of the original size and the HTML file size to 25-50% of the original size without changing anything on page look, on the contrary the page looks now identical independent of the browser I use. However, not everyone can be a CSS and HTML expert or has the time to optimize the files.

Maybe it had anything to do with the initial topic, but I don't clearly see the point.

Assuming that having a long CSS file means the creator doesn't know about cascading is just ignoring that some web-based projects can be HUGE, even optimized (and/or CSS tidied). I would take as an example our latest project in my company whose CSS (splitted in various files) is 24k lines long.

Anyway, I'm happy that you have enough free time to optimize every files you download.

Thank you for your answers (the ones in-topic), I should be able to write a consistent feature-request to IDM now. I will post any interesting response I get here.

May 14, 2008#62008-05-14T09:36+00:00

I got a really quick answer from the support team :

Thanks for your message. I agree this would be a useful feature. I will pass your suggestion along to our developers.

Thanks,
Ben

I really look forward to see something like this in UE/UES