Giter Club home page Giter Club logo

mastertools's People

Contributors

rafalbuchner avatar thundernixon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

mastertools's Issues

Table cells with different values should be better highlighted

We've chatted about this in the past, but it makes sense to track as an issue.

In summary, table cells would be helpful as a "heat map," where rows with different values could use saturation of a color to quickly show relative values.

e.g. the highest value in the row gets a background of rgba(1,0,0,1), and the lowest value gets a background of rgba(1,0,0,0.25). Everything in between could interpolate the opacity based on its value. Potentially, the hue could also change, though this may be less helpful.

image

Use Git Submodules

  • remove /test_designSpace/mutatorSans-master
  • add it back as a Git Submodule
  • add a note to the README about how to clone the repo and pull in all submodules

I need help catching different segment types

Challenge

It is possible to make a glyph that has the exact same number of contours between masters, but still fails in cu2qu, because segments are of mismatching types.

This is a very difficult error to find, because it requires manually going through all masters, and visually searching all segments for mismatching off-curve points.

Example

In the glyph /Q in Recursive Mono at 0d266f5d, this is the case for segments 2 & 5. In most masters, segment 2 has off-curve points, and segment 5 is flat. In the Recursive Mono Strict Italic A, however, these are flipped.

image

image

image

cu2qu gives the following error for this glyph:

ERROR:cu2qu.ufo:Glyphs named 'Q' have incompatible segment types:
  4: ('curve', 'curve', 'curve', 'curve', 'curve', 'curve', 'line', 'curve', 'curve', 'curve', 'curve', 'curve')
  7: ('line', 'line', 'line', 'line', 'line', 'line', 'curve', 'line', 'line', 'line', 'line', 'line')

Proposed solution

It would be really helpful for Master Tools to have a tool that could show segment type differences.

Not only would this help users to catch errors like the /Q shown above, but it also may help people to find where points are missing, more quickly.

Of course, the challenging part is knowing where it fits in the tool...

Option 1

A new table view (e.g. a separate window) could exist to show contour types for the current glyph. In the /Q example from above, that might look something like this:

FONT               | 0 1 2 3 4 5 6 7 8 9 
----------------------------------------
Strict B           | L C C C C C L C C C 
Strict A           | L C C C C C L C C C 
Strict B Italic    | L C C C C C L C C C 
Strict C Italic    | L C C C C C L C C C 
Strict A Italic    | L C C L C C C C C C 
Casual C           | L C C C C C L C C C 
Casual C Italic    | L C C C C C L C C C 
Casual B           | L C C C C C L C C C 
Casual B Italic    | L C C C C C L C C C 
Casual A           | L C C C C C L C C C 
Casual A Italic    | L C C C C C L C C C 
Strict C           | L C C C C C L C C C 

It becomes even more obvious where the issue is if these types are color-coded:

FONT               | 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣
------------------------------------------------------
Strict B           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Strict A           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Strict B Italic    | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Strict C Italic    | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Strict A Italic    | 📏 🥐 🥐 📏 🥐 🥐 🥐 🥐 🥐 🥐 
Casual C           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Casual C Italic    | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Casual B           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Casual B Italic    | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Casual A           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Casual A Italic    | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 
Strict C           | 📏 🥐 🥐 🥐 🥐 🥐 📏 🥐 🥐 🥐 

Of course, if this isn't in the typical view, you may also need to find a good way to alert users that they need to look at the table.

Option 2

Potentially, you could add secondary rows to the overall compatibility table.

image

This seems like it might be more complex to build. It would require a more complex table structure and would either mean many more rows, perhaps with the ability to expand/collapse a contour row to see its segment type. Even with the expand/collapse, I'm not sure whether it would be that much easier.

However, it might be nice, in a way, for the "compatibility table" to be a table to show all aspects of compatibility.

Option 3

There are probably more ways to do this, and you have a good sense about these things, @RafalBuchner. Of course, this is somewhat of an enhancement to the original scope, so you should only add it as time permits.

For now, I've got a croissant emoji script I can run to search for segment mismatches! :)

g = CurrentGlyph()

print("FONT".ljust(18), end=" ")
print("|", end=" ")

print("SEGMENTS")

for f in AllFonts():
    
    print(f.info.styleName.ljust(18), end=" ")
    print("|", end=" ")
    for c in f[g.name]:
        for s in c:
            # print(s.type[0].upper(), end =" ")
            
            # possible segment types: move, line, curve, qcurve
            
            if s.type == "line":
                print("📏", end =" ")
            elif s.type == "curve":
                print("🥐", end =" ")
            elif s.type == "move":
                print("🚚", end =" ")
            elif s.type == "qcurve":
                print("🥨", end =" ")
        print("|", end =" ")   
            
    print("")

Table changes width between glyph windows (e.g. when using EditThatNextMaster)

Scenario:

I have changed the table width on a glyph window, to put numbers closer to one another:

image

However, when I go to the next glyph window (with EditThatNextMaster), the table width shifts, because it is back to the full-width default. This makes it hard to read the table when cycling between glyph windows in different masters.

image

A couple of potential solutions come to mind:

  • The table opens in a floating window, and this updates to show the current glyph.
  • When the table width is changed, this updates the width in all glyph windows.
    • If this causes performance issues with resizing the table, maybe this could have a short delay before updating?

Ideally, both of these things would be possible. I definitely like the table inside the glyph window, and I like how the width can be adjusted, but it's not very useable if I can't sync widths between windows.

Table column titles should be right aligned for better readability

Right now, the column titles are left-aligned.

image

This means that it's more difficult to read what numbers they connect to, at a glance.

It would be easier to use this (especially in complex families) if the titles were right-aligned, because this would put them in a straight visual line with the numbers they are associated with.

Highlight current master in table. "You are here"

This is a view of a 12-master family:

image

Because I navigate between masters with EditThatNextMaster, it would be quite a bit nicer to have some kind of indication of which column the current glyph view is from. Maybe that column's header could be bold, or highlighted somehow. That way, I could very easily see where I'm at as I navigate through the space, with the table telling me what is ahead and behind.

image

compatibility table appearing at random x position

I've noticed that in the current version of the compatibility table, it appears at seemingly-random x positions, within the glyph window. It's a lot easier to use while it's in the same place, and especially when that's in the corner. This might just be something that's getting current work, and if so, all good. Just wanted to report it in case it wasn't obvious on a different screen, etc.

image

image

image

image

Click to open a designspace (not just drag-and-drop)

I love that I can drag-and-drop a designspace file onto the tool's floating window to open it.

However, I should also be able to click the "designspace" icon to get a file explorer view, with .designspace filetypes allowed to open.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.