showing preview of css colors

classic Classic list List threaded Threaded
51 messages Options
123
Reply | Threaded
Open this post in threaded view
|

showing preview of css colors

Carpii UK
I've seen various editors which can parse CSS or SASS files for rgb color variables and then show the font in the same color

Is there any bundle which is able to do this for textmate?

I'm not entirely sure the bundle API is able to support such a feature. 
If not, could it be done with a plugin?


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Koen Punt
A bit more intrusive, but you can select a color and press CMD+SHIFT+C to display a color picker.

Also, I think displaying them in their own color could clash with theme colors and make the string invisible. Unless some border and/or background is added.

Koen

Verstuurd vanaf mijn iPhone

> Op 24 mei 2016 om 05:47 heeft Carpii UK <[hidden email]> het volgende geschreven:
>
> I've seen various editors which can parse CSS or SASS files for rgb color variables and then show the font in the same color
>
> Is there any bundle which is able to do this for textmate?
>
> I'm not entirely sure the bundle API is able to support such a feature.
> If not, could it be done with a plugin?
>
> _______________________________________________
> textmate mailing list
> [hidden email]
> http://lists.macromates.com/listinfo/textmate

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Carpii UK

A bit more intrusive, but you can select a color and press CMD+SHIFT+C to display a color picker.

Thanks, I didn't know about this. 
It's a little cumbersome as you say, but it's better than nothing :-)

Also, I think displaying them in their own color could clash with theme colors and make the string invisible. Unless some border and/or background is added.

I think you're right. I cant remember what editor I saw which uses this... maybe Atom or Sublime, and also vim with a plugin. 

These plugins are also able to parse SASS includes, so they could interpret variables like $main_border_color
I suspect this degree of parsing would never be possible in TM though, without quite a lot of core code changes
 

Koen

Verstuurd vanaf mijn iPhone

> Op 24 mei 2016 om 05:47 heeft Carpii UK <[hidden email]> het volgende geschreven:
>
> I've seen various editors which can parse CSS or SASS files for rgb color variables and then show the font in the same color
>
> Is there any bundle which is able to do this for textmate?
>
> I'm not entirely sure the bundle API is able to support such a feature.
> If not, could it be done with a plugin?
>
> _______________________________________________
> textmate mailing list
> [hidden email]
> http://lists.macromates.com/listinfo/textmate

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate



_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Igor Kozlov
I think you're right. I cant remember what editor I saw which uses this... maybe Atom or Sublime, and also vim with a plugin.

Probably you're talking about this plugin: https://github.com/abe33/atom-pigments
AFAIK, there's no way to implement this without modifying TextMate source code.


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Fabian Zeindl

On 24.05.2016, at 14:00 , Igor K <[hidden email]> wrote:

I think you're right. I cant remember what editor I saw which uses this... maybe Atom or Sublime, and also vim with a plugin.

Probably you're talking about this plugin: https://github.com/abe33/atom-pigments
AFAIK, there's no way to implement this without modifying TextMate source code.

IntelliJ Idea displays a tiny coloured square in the gutter next to any line (not just CSS) that contains a color-value:


I think TextMate bundles could be made much more powerful by allowing to modify the gutter a bit.

API:
* paint into a rectangle in the gutter (per html?)
* act on click and hover there (including screen coordinates maybe)





_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Allan Odgaard-4
On 24 May 2016, at 14:07, Fabian Zeindl wrote:

> I think TextMate bundles could be made much more powerful by allowing
> to modify the gutter a bit.

There actually is API to show images in the gutter with associated tool
tips.

So technically this could be done by having a bundle command generate
the image and set this in the gutter, e.g. on save (this is similar to
how the SCM diff markers work).

I’ve been meaning to add a “did load” hook so bundles can update
the gutter once a file is opened.

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Fabian Zeindl

> On 24.05.2016, at 14:18 , Allan Odgaard <[hidden email]> wrote:
>
> There actually is API to show images in the gutter with associated tool tips.
>
> So technically this could be done by having a bundle command generate the image and set this in the gutter, e.g. on save (this is similar to how the SCM diff markers work).

Does it have to be a file or can it be base64 data as well?




_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Allan Odgaard-4
On 24 May 2016, at 14:23, Fabian Zeindl wrote:

> Does it have to be a file or can it be base64 data as well?

You have to provide a path which serves as the identifier for the mark,
for example from within TextMate you can press ⌃R on the following
line:

        "$TM_MATE" --set-mark "$TM_APP_PATH/Contents/Resources/TextMate.icns"
--line 3

This shows the TextMate app icon in the gutter’s third line. You can
clear it again using:

        "$TM_MATE" --clear-mark "$TM_APP_PATH/Contents/Resources/TextMate.icns"
--line 3

However, now that I just tested the above I realize that gutter marks
are rendered as monochrome so that they match any theme.

Though should anyone provide a proof-of-concept for this, I can help out
adding support for setting color marks. Could base this simply on image
naming conventions to avoid needing new API.

The “difficult” part is scanning the current CSS file and generating
image squares for all lines with color specifications, once we have
that, it should not be a problem hooking it up to TextMate.

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Carpii UK
Thanks Allan,

Looks interesting, I will have a play around with this when I can 
I was hoping I might be able to call out to ImageMagick to generate a suitable ICNS icon, but from what I can see it doesn't support ICNS forma, which is a shame.

- Do 'marks' persist in any way, in projects or maybe tm settings? 
Ie, if I was to pass a /tmp/some_temp_file.icns, would that cause an issue later if the /tmp file was later deleted and Tm relaunched?

- I wonder how feasible it would be for TM to allow a new switch in the mark API, something like...
"$TM_MATE" --set-mark-bg-color "#FF0000" --line 3

This would let us set the background color of the gutter, irrespective of the theme
And also allow it to be used independantly of the current monochrome marks feature. 

Just a thought anyway, not sure how easy it would be 

Thanks
Paul









On 24 May 2016 at 13:39, Allan Odgaard <[hidden email]> wrote:
On 24 May 2016, at 14:23, Fabian Zeindl wrote:

Does it have to be a file or can it be base64 data as well?

You have to provide a path which serves as the identifier for the mark, for example from within TextMate you can press ⌃R on the following line:

        "$TM_MATE" --set-mark "$TM_APP_PATH/Contents/Resources/TextMate.icns" --line 3

This shows the TextMate app icon in the gutter’s third line. You can clear it again using:

        "$TM_MATE" --clear-mark "$TM_APP_PATH/Contents/Resources/TextMate.icns" --line 3

However, now that I just tested the above I realize that gutter marks are rendered as monochrome so that they match any theme.

Though should anyone provide a proof-of-concept for this, I can help out adding support for setting color marks. Could base this simply on image naming conventions to avoid needing new API.

The “difficult” part is scanning the current CSS file and generating image squares for all lines with color specifications, once we have that, it should not be a problem hooking it up to TextMate.


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate



_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Jacob Carlborg
On 2016-05-25 03:12, Carpii UK wrote:
> Thanks Allan,
>
> Looks interesting, I will have a play around with this when I can
> I was hoping I might be able to call out to ImageMagick to generate a
> suitable ICNS icon, but from what I can see it doesn't support ICNS
> forma, which is a shame.

I don't think ICNS is a requirement. The built-in icons, error and
warning, use PDF, IIRC.

> - Do 'marks' persist in any way, in projects or maybe tm settings?
> Ie, if I was to pass a /tmp/some_temp_file.icns, would that cause an
> issue later if the /tmp file was later deleted and Tm relaunched?
>
> - I wonder how feasible it would be for TM to allow a new switch in the
> mark API, something like...
> "$TM_MATE" --set-mark-bg-color "#FF0000" --line 3
>
> This would let us set the background color of the gutter, irrespective
> of the theme
> And also allow it to be used independantly of the current monochrome
> marks feature.
>
> Just a thought anyway, not sure how easy it would be

Probably not that hard.

If mark icons are used for this I can see that this could cause
conflicts with errors or warnings for something like a CSS preprocessor
(Sass, LESS) or perhaps a CSS linter. I assume the mark icons for the
color should be persistent, but, as far as I know, it's only possible to
have one icon per line. If one runs a build command for Sass or LESS
which use marks to report errors they would override the colors.

I think setting the background color as the Atom Pigments pulgin does
would be pretty cool. Just make sure it's possible to turn off somehow.
The Atom Pigments plugins has a couple of different ways to display the
colors [1].

An additional alternative would be to have a tooltip showing the color
on mouse hover. Or is it important that the color is always visible?

[1] https://github.com/abe33/atom-pigments#marker-type

--
/Jacob Carlborg


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: (no subject)

Fabian Zeindl
I advocate for a base64 encoded bitmap.

Textmate should be easily able to display that and it would provide maximum flexibility for plugins as it's creation can be abstractes.

It only would lead to less issues with path, tmp files etc.



--
Sent from my iPhone

>> On 2016-05-25 03:12, Carpii UK wrote:
>> Thanks Allan,
>>
>> Looks interesting, I will have a play around with this when I can
>> I was hoping I might be able to call out to ImageMagick to generate a
>> suitable ICNS icon, but from what I can see it doesn't support ICNS
>> forma, which is a shame.
>
> I don't think ICNS is a requirement. The built-in icons, error and warning, use PDF, IIRC.
>
>> - Do 'marks' persist in any way, in projects or maybe tm settings?
>> Ie, if I was to pass a /tmp/some_temp_file.icns, would that cause an
>> issue later if the /tmp file was later deleted and Tm relaunched?
>>
>> - I wonder how feasible it would be for TM to allow a new switch in the
>> mark API, something like...
>> "$TM_MATE" --set-mark-bg-color "#FF0000" --line 3
>>
>> This would let us set the background color of the gutter, irrespective
>> of the theme
>> And also allow it to be used independantly of the current monochrome
>> marks feature.
>>
>> Just a thought anyway, not sure how easy it would be
>
> Probably not that hard.
>
> If mark icons are used for this I can see that this could cause conflicts with errors or warnings for something like a CSS preprocessor (Sass, LESS) or perhaps a CSS linter. I assume the mark icons for the color should be persistent, but, as far as I know, it's only possible to have one icon per line. If one runs a build command for Sass or LESS which use marks to report errors they would override the colors.
>
> I think setting the background color as the Atom Pigments pulgin does would be pretty cool. Just make sure it's possible to turn off somehow. The Atom Pigments plugins has a couple of different ways to display the colors [1].
>
> An additional alternative would be to have a tooltip showing the color on mouse hover. Or is it important that the color is always visible?
>
> [1] https://github.com/abe33/atom-pigments#marker-type
>
> --
> /Jacob Carlborg
>
>
> _______________________________________________
> textmate mailing list
> [hidden email]
> http://lists.macromates.com/listinfo/textmate

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: (no subject)

Fabian Zeindl

Clarification: a base64 string argument that encodes a bitmap.

> On 25 May 2016, at 09:20, Fabian Zeindl <[hidden email]> wrote:
>
> I advocate for a base64 encoded bitmap.
>
> Textmate should be easily able to display that and it would provide maximum flexibility for plugins as it's creation can be abstractes.
>
> It only would lead to less issues with path, tmp files etc.
>
>
>
> --
> Sent from my iPhone
>>> On 2016-05-25 03:12, Carpii UK wrote:
>>> Thanks Allan,
>>>
>>> Looks interesting, I will have a play around with this when I can
>>> I was hoping I might be able to call out to ImageMagick to generate a
>>> suitable ICNS icon, but from what I can see it doesn't support ICNS
>>> forma, which is a shame.
>>
>> I don't think ICNS is a requirement. The built-in icons, error and warning, use PDF, IIRC.
>>
>>> - Do 'marks' persist in any way, in projects or maybe tm settings?
>>> Ie, if I was to pass a /tmp/some_temp_file.icns, would that cause an
>>> issue later if the /tmp file was later deleted and Tm relaunched?
>>>
>>> - I wonder how feasible it would be for TM to allow a new switch in the
>>> mark API, something like...
>>> "$TM_MATE" --set-mark-bg-color "#FF0000" --line 3
>>>
>>> This would let us set the background color of the gutter, irrespective
>>> of the theme
>>> And also allow it to be used independantly of the current monochrome
>>> marks feature.
>>>
>>> Just a thought anyway, not sure how easy it would be
>>
>> Probably not that hard.
>>
>> If mark icons are used for this I can see that this could cause conflicts with errors or warnings for something like a CSS preprocessor (Sass, LESS) or perhaps a CSS linter. I assume the mark icons for the color should be persistent, but, as far as I know, it's only possible to have one icon per line. If one runs a build command for Sass or LESS which use marks to report errors they would override the colors.
>>
>> I think setting the background color as the Atom Pigments pulgin does would be pretty cool. Just make sure it's possible to turn off somehow. The Atom Pigments plugins has a couple of different ways to display the colors [1].
>>
>> An additional alternative would be to have a tooltip showing the color on mouse hover. Or is it important that the color is always visible?
>>
>> [1] https://github.com/abe33/atom-pigments#marker-type
>>
>> --
>> /Jacob Carlborg
>>
>>
>> _______________________________________________
>> textmate mailing list
>> [hidden email]
>> http://lists.macromates.com/listinfo/textmate

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Allan Odgaard-4
In reply to this post by Jacob Carlborg
On 25 May 2016, at 8:42, Jacob Carlborg wrote:

> I don't think ICNS is a requirement. The built-in icons, error and
> warning, use PDF, IIRC.

Correct, they can be any format that is supported by NSImage (TIFF, GIF,
PNG, etc.).

We use PDF for the current gutter images because that allows us to use
vector images.

> […] If one runs a build command for Sass or LESS which use marks to
> report errors they would override the colors.

The images are “stacked” although only top one is drawn. But that
means once the issue is fixed, the warning/error image should disappear
and again reveal the color.

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Carpii UK


On 25 May 2016 at 09:28, Allan Odgaard <[hidden email]> wrote:
On 25 May 2016, at 8:42, Jacob Carlborg wrote:

I don't think ICNS is a requirement. The built-in icons, error and warning, use PDF, IIRC.

Correct, they can be any format that is supported by NSImage (TIFF, GIF, PNG, etc.).

Do you know if this also supports SVG?

As its nothing but a bit of xml/ascii, it wouldn't need base64 encoding.
Could also generate these very efficiently, for a given color, without shelling out to some sort of image tool.
Also like PDF, its a vector format so would scale for all UI sizes
 

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate



_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Jacob Carlborg
On 2016-05-26 21:05, Carpii UK wrote:

> Do you know if this also supports SVG?
>
> As its nothing but a bit of xml/ascii, it wouldn't need base64 encoding.
> Could also generate these very efficiently, for a given color, without
> shelling out to some sort of image tool.
> Also like PDF, its a vector format so would scale for all UI sizes

According to the UTCoreTypes.h header file in the LaunchServices
framework in the CoreServices framework SVG is supported since OS X 10.10.

But to be sure you should call the "imageTypes" class method on NSImage.

--
/Jacob Carlborg


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

George McGinley Smith
If you could have HTML/CSS in the tooltips you could just make a quick popover that wouldn't need any images, I already have a command that does this (as a new window) because the color selector doesn't like CSS rgb definitions.

On 27 May 2016 at 00:21, Jacob Carlborg <[hidden email]> wrote:
On 2016-05-26 21:05, Carpii UK wrote:

Do you know if this also supports SVG?

As its nothing but a bit of xml/ascii, it wouldn't need base64 encoding.
Could also generate these very efficiently, for a given color, without
shelling out to some sort of image tool.
Also like PDF, its a vector format so would scale for all UI sizes

According to the UTCoreTypes.h header file in the LaunchServices framework in the CoreServices framework SVG is supported since OS X 10.10.

But to be sure you should call the "imageTypes" class method on NSImage.

--
/Jacob Carlborg



_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate



--
Kind regards,
George.

http://gsgd.co.uk


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Allan Odgaard-4
On 27 May 2016, at 15:00, George McGinley Smith wrote:

> If you could have HTML/CSS in the tooltips you could just make a quick
> popover that wouldn't need any images […]

From your command you can run this:

    "$DIALOG" tooltip --html '<div style="…">…</div>'

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Carpii UK
Ability to show colored tooltips is very cool

But to be honest my original query was more to do with just seeing the colors all inline.

I prefer not to use the mouse unless necessary (but also some problems can only be seen by an overview, instead of hovering over each item in turn)



On 27 May 2016 at 15:46, Allan Odgaard <[hidden email]> wrote:
On 27 May 2016, at 15:00, George McGinley Smith wrote:

> If you could have HTML/CSS in the tooltips you could just make a quick
> popover that wouldn't need any images […]

From your command you can run this:

    "$DIALOG" tooltip --html '<div style="…">…</div>'

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate



_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Allan Odgaard-4
In reply to this post by Jacob Carlborg
On 26 May 2016, at 22:21, Jacob Carlborg wrote:

> According to the UTCoreTypes.h header file in the LaunchServices
> framework in the CoreServices framework SVG is supported since OS X
> 10.10.

This would appear to be only as an UTI definition, i.e. NSImage can’t
actually load these, although QuickLook actually can (but possibly via a
WebView).

> But to be sure you should call the "imageTypes" class method on
> NSImage.

EPS is there, which is a vector format with a textual representation, so
possible to generate from any scripting language without the use of any
image libraries.

But rather than read the EPS/PS standard I cheated and saved a blue
square with a black border from Sketch and looked at the source and it
looks like gibberish :) but a lot of it seemed to be (possibly
unnecessary) boilerplate.

I did test it with mate’s `--set-mark` and it works fine (I changed
`GutterView.mm` to just draw the image rather than create a mask, so
that we get color). Though I wouldn’t want this change for all images,
I suggest including “Color” in the image name to indicate that it is
not a mask (although this is opposite of the OS where a “Template”
suffix indicates that it is monochrome image, but if we make this
change, we have to change all existing uses of `--set-mark`).

I also added a new `callback.document.did-open` so that colors can be
added during load instead of only during save (available starting with
2.0-beta.9.3) — this also benefits the SCM Diff Gutter bundle where it
has always annoyed me that the marks didn’t appear until first save.

_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
Reply | Threaded
Open this post in threaded view
|

Re: showing preview of css colors

Jacob Carlborg
On 2016-05-30 13:19, Allan Odgaard wrote:

> This would appear to be only as an UTI definition, i.e. NSImage can’t
> actually load these, although QuickLook actually can (but possibly via a
> WebView).

That's that what I get for reading that manual for once :).

> I also added a new `callback.document.did-open` so that colors can be
> added during load instead of only during save (available starting with
> 2.0-beta.9.3) — this also benefits the SCM Diff Gutter bundle where it
> has always annoyed me that the marks didn’t appear until first save.

Ah, that's cool.

--
/Jacob Carlborg


_______________________________________________
textmate mailing list
[hidden email]
http://lists.macromates.com/listinfo/textmate
123