search

davfive / obsidian-jtab

jTab Guitar Codeblocks for Obsidian adds the ability to show guitar chords and tabs directly in your notes.
MIT License
65 stars 1 forks source link

Is it possible to override the background and other colours? #5

Closed RobColes closed 2 years ago

RobColes commented 2 years ago

Hi - and thanks for making this available. Apologies - I am not familiar with CSS, but is it possible for a user to change some of the colours and fills?

I run Obsidian in dark mode and the tab was quite hard to read. I managed to change the background by targetting SVG in CSS, but I would prefer to have the finger circles, chord letters etc. darker. These look to be inline styles? So I can fiddle with them individually but I don't know how to target them as a whole. Ideally I'd like them all to be per the first letter and finger circle below.

If this is part of the underlying JTAB library rather than anything under your control I'll go hassle them instead :-) The renders that show on their website are more what I'm aiming for.

image

davfive commented 2 years ago

@RobColes, Wow, I'm dark mode for everything ... except Obsidian - for some reason I can't deal with Obsidian in dark mode. Sorry I overlooked this.

BTW, I just fiddled around with it and the css you are looking for is:

/* Background/Lines */
.jtab svg        { background: pink; } 
.jtab svg path   { stroke: yellow; }

/* All fonts (except chord circles - see next section) */
.jtab svg text   { stroke: red; fill: red; }

/* Chord circles and circle text/fingering */
.jtab svg circle        { stroke: white; fill: white; }
.jtab svg circle + text { stroke: green; fill: green; }

I'll set it up to use the default theme colors with proper contrast. I'll also add a setting to allow you to force light mode rendering even if in Dark Mode (with light background).

I'll have a build for you in the next day or two.

RobColes commented 2 years ago

Hi David,

Thanks for the prompt response!

It would be ideal to be able to customise the elements ourselves – I’m happy with a white background and monochrome, but darker text, per the examples on the jtab website really (and so that I can print too ideally!) but flexible for others is good!

I spent an hour or so messing around but didn’t know how to target the text and the text in the finger markers in the chord differently so I could see one or the other but not both, sigh. I really need to spend some time learning CSS.

The snippet you provided probably gives me all the information I need. I will play with it – I don’t think I want to stick with that as a colour scheme though 😊, but it is definitely more readable.

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Monday, 25 April 2022 1:35 PM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

@RobColes https://github.com/RobColes , just out of curiosity, would you prefer I just render them with a white background so that you can see them, or would you like dark-themed jtab (Note background + white-ish lines/circles/text?

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1108097013 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SN43LGILRPLITRLS7LVGYVI5ANCNFSM5UHG6QYQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AANO5SNAB53JVPM7G7CXUTLVGYVI5A5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIIGDP5I.gif Message ID: @. @.> >

RobColes commented 2 years ago

Hi David,

With the css you provided, I have got to the below which is pretty much there for me. Thank you! It may be worth including the sample CSS in the .md file?

.jtab svg { background: white; }

.jtab svg path { stroke: black; }

/ All fonts (except chord circles - see next section) /

.jtab svg text { stroke: none; fill: black; }

/ Chord circles and circle text/fingering /

.jtab svg circle { stroke: black; fill: black; }

.jtab svg circle + text { stroke: none; fill: white; }

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Monday, 25 April 2022 1:35 PM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

@RobColes https://github.com/RobColes , just out of curiosity, would you prefer I just render them with a white background so that you can see them, or would you like dark-themed jtab (Note background + white-ish lines/circles/text?

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1108097013 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SN43LGILRPLITRLS7LVGYVI5ANCNFSM5UHG6QYQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AANO5SNAB53JVPM7G7CXUTLVGYVI5A5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIIGDP5I.gif Message ID: @. @.> >

davfive commented 2 years ago

@RobColes, I made progress tonight. I almost have the new settings done to allow setting the tab colors.

I'm adding some settings for colors (i've been noodling all day on how to make proper settings for this):

For custom you will be able to set colors:

I'm running into a couple challenges with Obsidian settings, but I should have it done tomorrow night. I plan on making a pre-release to you (if you're interested) to see if it meets your needs and take any suggestions you have into the final release.

My main challenge right now is the impact multiple whiskeys have had on my coding 💤 🥃 ... that and actually do have to practice some before I go to sleep 🎸

BTW, I'm pretty sure jTab is abandoned or mostly so at this point. I've always planned on picking it up myself and personally fixing any issues found in it. So if you have requests, etc, don't hesitate to ask. I actually have a side project/fork right now working to eliminate the svg and make it fully css driven ... because apparently I have nothing better to do 😃

If you care to see my work in progress, you can find it on my branch davfive.5.override-colors.

Cheers

RobColes commented 2 years ago

Thanks David – that is definitely comprehensive, but I’d vote for the whiskey too – I was on the Ardberg, but I wasn’t coding 😊

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Tuesday, 26 April 2022 2:14 PM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

@RobColes https://github.com/RobColes , I made progress tonight. I almost have the new settings done to allow setting the tab colors.

I'm adding some settings:

I'm running into a couple challenges with Obsidian settings, but I should have it done tomorrow night (current the whiskey has taken over and I'm not sure how much further I'll get :)

Cheers.

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1109386766 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SPIC7QP5TZM6JYMCPTVG6CTXANCNFSM5UHG6QYQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AANO5SNBSJNDCT4H4KFCH5LVG6CTXA5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIIP6MDQ.gif Message ID: @. @.> >

davfive commented 2 years ago

@RobColes, just wanted to give you an update. I'm a coder that enjoys the game so I've been fiddling with cool ways to show this in settings. I actually have it fully working at this point, but I am working to get a good/interactive experience right now in the settings. All that to say that while I promised 2 days, I'll be taking a couple more to try and get a settings panel that makes me happy before I give you a pre-release.

RobColes commented 2 years ago

Thanks David - I am running with the css you gave me so it is not causing me any problems. I will dump it for the settings when they are ready. I am very grateful for your efforts!

Cheers, Rob

Mob: 0402 388942

On Wed, 27 Apr 2022, 12:54 pm David, @.***> wrote:

@RobColes https://github.com/RobColes, just wanted to give you an update. I'm a coder that enjoys the game so I've been fiddling with cool ways to show this in settings. I actually have it fully working at this point, but I am working to get a good/interactive experience right now in the settings. All that to say, that while I promised 2 days, I'll be taking one more to try and get a settings panel that makes me happy before I give you a pre-release.

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1110539289, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SIJXVLYNTINC4LNVS3VHDB5HANCNFSM5UHG6QYQ . You are receiving this because you were mentioned.Message ID: @.***>

davfive commented 2 years ago

Hiya. That was fun. I now have the whole thing done ready for you to test if you want (see the bottom of this comment)

image

I've added functionality to

Want to be a Beta Tester? If you are interested in beta-testing this, I've shared the zip file with what goes in the .obsidian/plugins/obsidian-jtab folder. You can find it here

If you're not, let me know and I'll just publish it.

RobColes commented 2 years ago

Hey David – that looks really good. I’m pulling the code down now, and will have a play today. I’ll let you know.

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Friday, 29 April 2022 6:52 AM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

Hiya. That was fun. I now have the whole thing done ready for you to test if you want (the the bottom of this comment)

https://user-images.githubusercontent.com/789595/165860355-830cffa3-ea89-421a-9259-258511715b84.png

I've added functionality to

*Want to be a Beta Tester? If you are interested in beta-testing this, I've shared the zip file with what goes in the .obsidian/plugins/obsidian-jtab folder. You can find it here https://drive.google.com/file/d/1NtYYDQSgHl2-kP1dFs217k0SaPf6IS9d/view?usp=sharing

If you're not, let me know and I'll just publish it.

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1112725270 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SMEFVPLFZMIBJ22CO3VHMI7FANCNFSM5UHG6QYQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AANO5SOVP54HOMPAMWYLF2TVHMI7FA5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIJJNOFQ.gif Message ID: @. @.> >

mrjano commented 2 years ago

hey David, thanks for the amazing work! I've been searching for something like this in Obsidian for a while

I may be a bit late to the party but it would be great if we could also set the fonts/spacing of the tab, although I suspect those are limitations of the underlying jTab library?

davfive commented 2 years ago

@RobColes, thanks for catching the issue, it was fun fixing it.

Thanks for beta testing, very nice of you.

Two changes I made last night since you took the beta drop

  1. "Normal" is now named "Classic". Who's to say what's normal anyway.
  2. Settings only are saved if they changed from when you opened them. That's not how Obsidian suggests, but since I broadcast settings changes to the notes, I don't want to do that on a no-op.
davfive commented 2 years ago

@mrjano

Yeah, spacing is baked into the Raphael generated svg and that code is a complicated beast that hasn't been touch AFAIT since 2016. Initially I was looking at ABC Notation instead of jTab, but it doesn't do tabs and I was looking for something quick and easy I could do in a week or two in my spare time, enter jTab.

As I run into missing notation elements, I may look into extending it, but right now I have what I need to easily print out practice riff sessions from songs I'm working on and I haven't run into any major things missing.

OOC, what type of spacing changes were you looking for? Something that isn't obvious from jtab notation is that you can add spacing in the tabs by adding more spaces between the note fret numbers. For example $E 1<space>2<space><space>3<space>4 makes 2 act like a quarter note in an eighth note run. Each space after the first one will all be added as blank slots in the tab.

davfive commented 2 years ago

@RobColes, This is now published with 1.0.5

Once thing I noticed on taking the upgrade is that the broadcast to auto-update notes with color scheme changes won't take affect autocally with any notes that were open during the upgrade. You'll need to either close/open those notes or rerender the jtab. Other than that one-time annoyance, everything is great.

RobColes commented 1 year ago

Hi David,

Love the setup. I know this is just a set and forget thing typically, but this is so much easier than fiddling with CSS even if you can figure the CSS out, which I couldn’t.

Apologies, yesterday got away from me a bit, and the one functional issue I found, with the colour picker selection not being applied to the sample has been fixed in the new version so I am not much use as a beta tester 😊

The one comment I do have is that the mobile experience, especially in portrait mode which I am normally locked to, does not look quite as slick. I don’t know how much control you have over this but on my Pixel 5 it looks like:

The sample colour dot renders as a thin vertical line and the field title and hex codes stack. It’s better if I rotate, but typically I have rotate locked off. Preference would be to have the field title on the same line as the hex code.

If it’s possible to get the sample colour line to render as a dot instead, like it does on the desktop that would also be better – not sure if this is something you have control over.

The layout is back to looking slick on an android tablet, even in portrait mode, but the colour sample is still a thin line rather than a dot.

I will keep playing around…

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Friday, 29 April 2022 6:52 AM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

Hiya. That was fun. I now have the whole thing done ready for you to test if you want (the the bottom of this comment)

https://user-images.githubusercontent.com/789595/165860355-830cffa3-ea89-421a-9259-258511715b84.png

I've added functionality to

*Want to be a Beta Tester? If you are interested in beta-testing this, I've shared the zip file with what goes in the .obsidian/plugins/obsidian-jtab folder. You can find it here https://drive.google.com/file/d/1NtYYDQSgHl2-kP1dFs217k0SaPf6IS9d/view?usp=sharing

If you're not, let me know and I'll just publish it.

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1112725270 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AANO5SMEFVPLFZMIBJ22CO3VHMI7FANCNFSM5UHG6QYQ . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AANO5SOVP54HOMPAMWYLF2TVHMI7FA5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIJJNOFQ.gif Message ID: @. @.> >

davfive commented 1 year ago

I see it on mine too. weird. I'll take a look.

On Tue, Oct 11, 2022, 2:20 AM Rob @.***> wrote:

Hi David,

Love the setup. I know this is just a set and forget thing typically, but this is so much easier than fiddling with CSS even if you can figure the CSS out, which I couldn’t.

Apologies, yesterday got away from me a bit, and the one functional issue I found, with the colour picker selection not being applied to the sample has been fixed in the new version so I am not much use as a beta tester 😊

The one comment I do have is that the mobile experience, especially in portrait mode which I am normally locked to, does not look quite as slick. I don’t know how much control you have over this but on my Pixel 5 it looks like:

The sample colour dot renders as a thin vertical line and the field title and hex codes stack. It’s better if I rotate, but typically I have rotate locked off. Preference would be to have the field title on the same line as the hex code.

If it’s possible to get the sample colour line to render as a dot instead, like it does on the desktop that would also be better – not sure if this is something you have control over.

The layout is back to looking slick on an android tablet, even in portrait mode, but the colour sample is still a thin line rather than a dot.

I will keep playing around…

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Friday, 29 April 2022 6:52 AM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

Hiya. That was fun. I now have the whole thing done ready for you to test if you want (the the bottom of this comment)

< https://user-images.githubusercontent.com/789595/165860355-830cffa3-ea89-421a-9259-258511715b84.png>

I've added functionality to

  • support three different color scheme selection (Normal, Themed, Custom)

  • Specify your own custom colors by

  • name (html color name, hex, hexa, rgb, rgba, essentially anything that is a known color https://www.npmjs.com/package/color )

  • picker - displays color picker to click around in

  • name/picker are tied together (update one the other updates)

  • Any changes to colors in any setting will be reflected in a chord/tab example to show what it will look like in the notes

  • When you leave the settings panel, all open notes will be automatically updated to the new scheme

*Want to be a Beta Tester? If you are interested in beta-testing this, I've shared the zip file with what goes in the .obsidian/plugins/obsidian-jtab folder. You can find it here < https://drive.google.com/file/d/1NtYYDQSgHl2-kP1dFs217k0SaPf6IS9d/view?usp=sharing>

If you're not, let me know and I'll just publish it.

— Reply to this email directly, view it on GitHub < https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1112725270> , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AANO5SMEFVPLFZMIBJ22CO3VHMI7FANCNFSM5UHG6QYQ> . You are receiving this because you were mentioned. < https://github.com/notifications/beacon/AANO5SOVP54HOMPAMWYLF2TVHMI7FA5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIJJNOFQ.gif> Message ID: @. @.> >

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1274385625, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGAYWZDVIOZ7IFJ3YIFFY3WCUWMZANCNFSM5UHG6QYQ . You are receiving this because you modified the open/close state.Message ID: @.***>

davfive commented 1 year ago

This is fixed. Thanks for pointing it out.

On Tue, Oct 11, 2022, 6:50 AM David @.***> wrote:

I see it on mine too. weird. I'll take a look.

On Tue, Oct 11, 2022, 2:20 AM Rob @.***> wrote:

Hi David,

Love the setup. I know this is just a set and forget thing typically, but this is so much easier than fiddling with CSS even if you can figure the CSS out, which I couldn’t.

Apologies, yesterday got away from me a bit, and the one functional issue I found, with the colour picker selection not being applied to the sample has been fixed in the new version so I am not much use as a beta tester 😊

The one comment I do have is that the mobile experience, especially in portrait mode which I am normally locked to, does not look quite as slick. I don’t know how much control you have over this but on my Pixel 5 it looks like:

The sample colour dot renders as a thin vertical line and the field title and hex codes stack. It’s better if I rotate, but typically I have rotate locked off. Preference would be to have the field title on the same line as the hex code.

If it’s possible to get the sample colour line to render as a dot instead, like it does on the desktop that would also be better – not sure if this is something you have control over.

The layout is back to looking slick on an android tablet, even in portrait mode, but the colour sample is still a thin line rather than a dot.

I will keep playing around…

Cheers Rob

Rob Coles Tel: +61 (0) 8 6204 7701

Mob: +61 (0)402 388942

From: David @.> Sent: Friday, 29 April 2022 6:52 AM To: davfive/obsidian-jtab @.> Cc: Rob @.>; Mention @.> Subject: Re: [davfive/obsidian-jtab] Is it possible to override the background and other colours? (Issue #5)

Hiya. That was fun. I now have the whole thing done ready for you to test if you want (the the bottom of this comment)

< https://user-images.githubusercontent.com/789595/165860355-830cffa3-ea89-421a-9259-258511715b84.png>

I've added functionality to

  • support three different color scheme selection (Normal, Themed, Custom)

  • Specify your own custom colors by

  • name (html color name, hex, hexa, rgb, rgba, essentially anything that is a known color https://www.npmjs.com/package/color )

  • picker - displays color picker to click around in

  • name/picker are tied together (update one the other updates)

  • Any changes to colors in any setting will be reflected in a chord/tab example to show what it will look like in the notes

  • When you leave the settings panel, all open notes will be automatically updated to the new scheme

*Want to be a Beta Tester? If you are interested in beta-testing this, I've shared the zip file with what goes in the .obsidian/plugins/obsidian-jtab folder. You can find it here < https://drive.google.com/file/d/1NtYYDQSgHl2-kP1dFs217k0SaPf6IS9d/view?usp=sharing>

If you're not, let me know and I'll just publish it.

— Reply to this email directly, view it on GitHub < https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1112725270> , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AANO5SMEFVPLFZMIBJ22CO3VHMI7FANCNFSM5UHG6QYQ> . You are receiving this because you were mentioned. < https://github.com/notifications/beacon/AANO5SOVP54HOMPAMWYLF2TVHMI7FA5CNFSM5UHG6QY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOIJJNOFQ.gif> Message ID: @. @.> >

— Reply to this email directly, view it on GitHub https://github.com/davfive/obsidian-jtab/issues/5#issuecomment-1274385625, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGAYWZDVIOZ7IFJ3YIFFY3WCUWMZANCNFSM5UHG6QYQ . You are receiving this because you modified the open/close state.Message ID: @.***>