Skip to content

Add library font preference.#422

Merged
rryan merged 7 commits intomixxxdj:masterfrom
rryan:font
Dec 20, 2014
Merged

Add library font preference.#422
rryan merged 7 commits intomixxxdj:masterfrom
rryan:font

Conversation

@rryan
Copy link
Copy Markdown
Member

@rryan rryan commented Dec 6, 2014

  • Add font selector to the preferences.
  • Move row height preference from Interface to Library.
  • Add controls for changing the font size:
    • [Library],font_size_increment
    • [Library],font_size_decrement
    • [Library],font_size_knob

If the row height is smaller than the font-size the larger of the two is
used.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 6, 2014

Doesn't really deserve a PR but I would appreciate a quick check on Linux and Windows. Works fine on Mac.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 6, 2014

on ubuntu the font changes, but the size of the font doesn't. (The row height does change)

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 7, 2014

on ubuntu the font changes, but the size of the font doesn't. (The row height does change)

😫 why is life so hard.

the row height changes in response to the font change? I guess that means that the problem lies somewhere in the widget font handling not the font system.

Can you disable the style sheet for your skin and see if that does anything? On OS X having a stylesheet at all seems to disable the parent-child inheritance of fonts which is part of why this stupid PR is 762 changed lines.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 7, 2014

on ubuntu the font changes, but the size of the font doesn't. (The row height does change)

Oh -- it's probably the LateNight CSS. Try removing all the font styling for the sidebar and track table -- it takes precedence over QWidget::setFont.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 7, 2014

bpm column is still not changing font even though I think I removed everything from my style.qss

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 7, 2014

added a PR for the changes I made

@esbrandt
Copy link
Copy Markdown
Contributor

esbrandt commented Dec 7, 2014

bpm column is still not changing font even though I think I removed everything from my style.qss

This is also with Deere on OSX, probably related https://bugs.launchpad.net/mixxx/+bug/1201079

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 9, 2014

probably related

I think in general we have problems theming custom widgets

@esbrandt
Copy link
Copy Markdown
Contributor

Mixed feelings about having different fonts in library and decks, but definitely like the possibility to change font(sizes). Maybe we should just ship with a good royalty free font , like Open Sans, PT sans and default to that. Would make text layout predictable across platforms.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 10, 2014

it might be worth bundling fonts for skins, since I'm pixel-fucking a lot and a slightly different font could mess things up.

But people like stupid customization, and if we can resolve the problem of the bpm widget not getting the theme I'd like to allow people to change the library font. Some blind users may want a huge font, and other users may want a teeny tiny font

@esbrandt
Copy link
Copy Markdown
Contributor

allow people to change the library font.

Absolutely, the idea was to bundle a default font to go with, so that we have a consistent default experience on all platforms. Currently, you have to go the css trial and error route to find a font class that at least look similar to the intended result.

If the user later feels the urge to look at comic sans in the library, fine.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 10, 2014

Ok -- sounds good. I'll add a res/fonts folder and include Open Sans. It'd also be nice if we had a nice bitmap / blocky font like Deere uses for buttons -- that way the buttons could be drawn with overlay text instead of text being in the image. @esbrandt what font did you use for that in Deere?

@esbrandt
Copy link
Copy Markdown
Contributor

what font did you use for that in Deere?

Drew some myself, some from a font ( dunno the name, may look it up in a backup).
The issue with the pictogram fonts is, that you never have exactly the characters you`ll need. And adding them upstream can take a long time.

There are some usable ones out there, like Entypo, Material Iconsor Fontawesome. The issue with the pictogram fonts is, that you never have exactly the characters you`ll need. And adding them upstream can take a long time.

What if we build our own? We already have a bunch of icons as svg, we could easily convert them to be in a font. Lets write down the requirements, and i`ll give it a go.

  • Transport: Play, Pause , Play/Pause, Stop, Reverse, Jump End, Jump Start, Fast back, Fast fore, Nudge up, Nudge down, Slip, Censor, Eject
  • Cueing: Cue
  • Looping: In, Out, Reloop, Move fore, Move back, Jump fore, Jump back, Repeat, One Shot, Trigger
  • Beatgridding:
  • Vinyl Control:
  • Status: Recording, Streaming, Auto DJ, Vinyl
  • Options: Keylock, Spinny,
  • View: Show/Hide Mics, Library, Mixer, 2/4Deck, Effects, Samplers,
  • Misc: Plus, Minus, Zoom in, Zoom Out, Text size up, Text size down,

Later... Oh wait, basically all related controls in controllerpickermenu. I can start with the most needed though.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 11, 2014

I think we should svg icons as-is, not try to convert them to a font. Fonts are much harder to work with

As for creating our own font, won't we quickly run in to issues with translations?

@esbrandt
Copy link
Copy Markdown
Contributor

As for creating our own font, won't we quickly run in to issues with translations?

No, because there is no translatable content.
That font would provide just pictograms for the button label (e.g. play icon, spinny icon, broadcasting icon etc.) that can be styled by CSS. You can keep track of an entire series of graphics, and have access to scalable icons from your systems font library.

If you don`t like to use the font, you can always use your single svg icons in skins.

So far I have created a *.ttf font with a few glyphs, which are available system-wide. Just have to get Mixxx to display them on button labels, no luck so far :( I recognize that this is not an essential feature, will test it further for the next version.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 12, 2014

What is the point of creating a font for pictograms/icons? Why not just svg files?

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

As for creating our own font, won't we quickly run in to issues with translations?

So far we haven't translated words that were baked into the graphics like LOOP and CUE. I don't think we should either since space is really constrained and we often want to tweak it to look just right.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

What is the point of creating a font for pictograms/icons? Why not just svg files?

For example -- beatloop buttons. I don't want to hand-design a "1 | 8" SVG, a "1 | 4" SVG, a "1 | 2" SVG, etc. I should just be able to set the text in the skin with a <Text> state in the push button and set the pushbutton font to the Mixxx bitmapped font. It would save a lot of work and make things more easy to tweak in cases like that.

The downside of embedding them in the font is that your normal SVG editing tools may not work as well, and you may not be able to use SVG variables added in #302. There's no cost to providing both options to the skin designer here.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

Hm, though editing skins with the pictogram fonts may be confusing because the <Text> node in the XML will not match up with what's displayed (since your text editor will render teh text in your current font which won't be the pictogram one) whereas having the SVG filename right there tells you what the icon is.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 12, 2014

"1 | 8" SVG, a "1 | 4" SVG, a "1 | 2" SVG,

I have no problem with a standard font that represents standard text, but I think jus is talking about a "vinyl spinny icon" text object, or a "keylock icon" letter. That's what I think is a bad idea (due to difficulty editing font files and the confusion you mention between XML file and appearance)

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 12, 2014

(some fractions already have code points btw: http://www.fileformat.info/info/unicode/block/number_forms/list.htm)

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

I have no problem with a standard font that represents standard text, but I think jus is talking about a "vinyl spinny icon" text object, or a "keylock icon" letter. That's what I think is a bad idea (due to difficulty editing font files and the confusion you mention between XML file and appearance)

I'm inclined to let @esbrandt use whatever workflow works best for skin designing. Perhaps he has a font tool that makes this easier than the standalone SVGs? If we're already adding custom font support then it's up to the skinner if they want to use a font or an SVG.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 12, 2014

I want to make sure that we're not locked in to a font that can't be edited with free tools. I don't even know what I'd use to edit a font on linux

@jclaveau
Copy link
Copy Markdown

@ywwg For Modular, I used http://fontforge.github.io/en-US/ (available in the repos) to increase the size of the font.

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 12, 2014

You can keep track of an entire series of graphics, and have access to scalable icons from your systems font library.

So as I understand it, the problem is we want a series of graphics available to any skin without duplicating the files? @rryan points out that we can put shared graphics in res/images and they are accessible from all skins by ":images/foo.svg". So we can have mixxx-wide graphics easily, like :images/keylock.svg without trying to install a font.

I am trying to make sure I understand what problem there is that a font is a solution for.

@esbrandt
Copy link
Copy Markdown
Contributor

No - i dont want to push for using an icon font exclusively.
See it as additional possibility that can save time and provide flexibility - for those skin designers who decide to use the font in their design process.

  • To make an icon font, you need to crate a svg of the single glyphs (e.g. the Spinny & Keylock symbols) in the first place.
  • Now that you have the svg, you can export the single images to res/images and make them available mixxx-wide. Like before, just point to the svg`s path in your skin.xml . The story ends here if you dont want to use a font, and nothing has changed.
  • But you can additionally export the glyphs and create an icon font, using free tools like fontforge (desktop) or fontello (web).
  • After installing the font ( platform independent), you`ll have access to scalable icons from your systems font library.

Q: Are we locked in to a font that can't be edited with free tools?
A: No, SVG template and (optional) True type font can be edited using free tools like Inkscape and Fontforge.

Q: Aren't pictogram fonts confusing because the node in the XML will not match up with what's displayed?
A: No, Glyph can have descriptive names while keeping their Unicode value. E.g. type spinny-icon in the node and have the respective icon appear. We can use the easy semantic <mixxxcontrol>-<suffix>

Q: So, whats the deal with icon fonts again?
A: - Need icon in another color/size/drop shadow, need hover or down state?
Style icons with CSS properties just like you would any normal alphabetical letter.
- Need icons for documentation or website? Right at your fingertips.
- Want to have a good audio-related font available for use in other projects? You can have it.

The whole font thing only makes sense if the Mixxx icon font is installed on the user machine by default. If we can`t agree to that, we can save our time and stop here. It's ok.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

The whole font thing only makes sense if the Mixxx icon font is installed on the user machine by default. If we can`t agree to that, we can save our time and stop here. It's ok.

I think we shouldn't install a font on the user's machine. My plan was to stick Mixxx standard fonts (Open Sans, a bitmap/blocky font, etc.) in res/fonts and then load them at bootup with QFontDatabase so that Mixxx can use them. I don't think we have a cross-platform way of installing the font (plus I'm not keen on dealing with the headaches of writing one :) ) and the user may not have permission to do that, etc.

@esbrandt
Copy link
Copy Markdown
Contributor

res/fonts and then load them at bootup with QFontDatabase

This option was not known to me. An icon font would be no other than loading Open Sans, it is just another font.

Anyway.
Whats up with the PR?

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

Q: So, whats the deal with icon fonts again?
A: - Need icon in another color/size/drop shadow, need hover or down state?

Seems like a nice benefit -- you can easily tweak/transform to your liking with CSS once there's a font. Qt CSS is not modern CSS though so a lot of the fanciness you can do with a real CSS implementation may not be available.

Style icons with CSS properties just like you would any normal alphabetical letter.

  • Need icons for documentation or website? Right at your fingertips.

Nice, though if we're keeping a TTF file in sync between the manual and website then it's not that much work to keep a folder of SVG files in sync instead.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 12, 2014

One other thing -- "General wisdom" about QSvgRenderer is that it's somewhat inefficient -- most people render it to a pixmap first when they learn the dimensions they need. (I have not figured out how to do this in a way that does not make them really ugly under rotation -- since we rotate them in WKnobComposed -- we could add a Paintable flag that disables it specifically for WKnobComposed if it turns out to be a problem). The system font rendering machinery will likely be more efficient at beziers and vector art since text rendering is ubiquitous.

Just a hunch -- obviously I would not make the decision to use a font based on this without some numbers.

Conflicts:
	res/skins/LateNight/style.qss
@rryan rryan force-pushed the font branch 4 times, most recently from b3a9dc9 to 464af2a Compare December 16, 2014 15:49
@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 16, 2014

Added Open Sans and added a res/fonts folder that is included with the packages. At bootup we load fonts from the fonts folder -- the custom fonts are selectable from skin CSS and are also selectable from the Library font picker.

I haven't added skin support for a <LoadFont> section yet and would like to leave it as a feature request so I can move on to other stuff. Is there a pressing need for <LoadFont> in 1.12.0?

@ywwg
Copy link
Copy Markdown
Member

ywwg commented Dec 16, 2014

It might help to have a short test that shows that the font can load as expected

Comment thread src/dlghidden.cpp
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've had problems in the past debugging signals that are set up in one object that apply to another object and its slots. Although it's a little uglier to have a setupConnections() function in the target object, it helps to understand the construction flow.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the benefits of signals/slots is that it lets you decouple components -- I agree it does make sense to explicitly couple them in some places (e.g. Library::bindWidget, Library::bindSidebar) for clarity. Making a setupConnections method explicitly couples the two -- perhaps unrelated -- objects.

Think of public slots as the public interface to the class (same as the public methods of a class). You have to look for call-sites to the public methods of a class to fully understand how it's used -- the same goes for signals/slots. I try not to connect to private slots from outside a class even though Qt will allow you too.

@esbrandt
Copy link
Copy Markdown
Contributor

I haven't added skin support for a section yet and would like to leave it as a feature request so I can move on to other stuff. Is there a pressing need for in 1.12.0?

That means changing font sizes in the skin (artist, title...) from the preferences is not possible yet? I`m fine with that. We can now load OpenSans and predictable test font display on all platforms, that is awesome for its own.

@rryan
Copy link
Copy Markdown
Member Author

rryan commented Dec 18, 2014

That means changing font sizes in the skin (artist, title...) from the preferences is not possible yet? I`m fine with that. We can now load OpenSans and predictable test font display on all platforms, that is awesome for its own.

Yea, and I'm not sure changing the skin font is a good way to go since as @ywwg points out sometimes the UI might not generalize to any font size well.

We can use Open Sans and any other font we drop in res/fonts via CSS.

rryan added a commit that referenced this pull request Dec 20, 2014
Add library font preference.
@rryan rryan merged commit 10b6643 into mixxxdj:master Dec 20, 2014
@rryan rryan deleted the font branch April 10, 2016 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants