Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
RobColes opened this issue Apr 25, 2022 · 16 comments · Fixed by #6
Closed

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

RobColes opened this issue Apr 25, 2022 · 16 comments · Fixed by #6
Assignees
@davfive
Labels
completed The fix/enhancement has been implemented and included in a release enhancement New feature or request

Comments

@RobColes
Copy link

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 davfive added the bug Something isn't working label Apr 25, 2022
@davfive davfive self-assigned this Apr 25, 2022
@davfive
Copy link
Owner

davfive commented Apr 25, 2022 •
edited
Loading

@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
Copy link
Author

RobColes commented Apr 25, 2022 via email

@RobColes
Copy link
Author

RobColes commented Apr 25, 2022 via email

@davfive
Copy link
Owner

davfive commented Apr 26, 2022 •
edited
Loading

@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):

  • Normal: white background black lines/dots, like you would expect on a historically printed page
  • Themed: follow theme colors
  • Custom: set colors yourself

For custom you will be able to set colors:

  • background
  • lines
  • text
  • chord dots
  • chord dot text

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
Copy link
Author

RobColes commented Apr 26, 2022 via email

@davfive
Copy link
Owner

davfive commented Apr 27, 2022 •
edited
Loading

@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
Copy link
Author

RobColes commented Apr 27, 2022 via email

davfive pushed a commit that referenced this issue Apr 28, 2022
#5: Add Normal/Themed color selection for jTab. Auto-refresh active p…
c409234 
…ages jtabs to pickup changed settings
davfive pushed a commit that referenced this issue Apr 28, 2022
Fixes #5: Add support for custom and themed colors, dynamic settings …
7f8a5c6 
…playground, and update open of notes.
@davfive
Copy link
Owner

davfive commented Apr 28, 2022 •
edited
Loading

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

  • 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)
    • picker - displays color picker to click around in
    • name/picker are tied together (update one the other updates)
  • If you select Normal or Themed and then just change one color, it's auto-switch to custom with those colors
  • 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

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

@RobColes
Copy link
Author

RobColes commented Apr 28, 2022 via email

@mrjano
Copy link

mrjano commented Apr 29, 2022

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 pushed a commit that referenced this issue Apr 29, 2022
#5: Rename 'Normal' to 'Classic'. What's normal anyway?
e1c5046
davfive pushed a commit that referenced this issue Apr 29, 2022
#5: Only save settings (and broadcast to Notes) if actually changed
89f492e
@davfive
Copy link
Owner

davfive commented Apr 29, 2022 •
edited
Loading

@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 pushed a commit that referenced this issue Apr 29, 2022
#5 attribution
dec018c
davfive pushed a commit that referenced this issue Apr 29, 2022
#5: Allow auto-switching to custom by changing one color
ed66fab
@davfive davfive mentioned this issue Apr 29, 2022
Merged
@davfive
Copy link
Owner

davfive commented Apr 29, 2022 •
edited
Loading

@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
Copy link
Owner

davfive commented Apr 29, 2022 •
edited
Loading

@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
Copy link
Author

RobColes commented Oct 11, 2022 via email

@davfive
Copy link
Owner

davfive commented Oct 11, 2022 via email

@davfive
Copy link
Owner

davfive commented Oct 13, 2022 via email

@davfive davfive added enhancement New feature or request completed The fix/enhancement has been implemented and included in a release and removed bug Something isn't working labels Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@davfive davfive

Labels
completed The fix/enhancement has been implemented and included in a release enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Customizable jTab colors davfive/obsidian-jtab
3 participants
@davfive @RobColes @mrjano