Opened 2 years ago

Closed 2 years ago

#30628 closed enhancement (fixed)

Change font of axis labels in Three.js

Reported by: Joshua Campbell Owned by:
Priority: minor Milestone: sage-9.3
Component: graphics Keywords: threejs axis axes labels font
Cc: Merged in:
Authors: Joshua Campbell Reviewers: Eric Gourgoulhon
Report Upstream: N/A Work issues:
Branch: 3e3381c (Commits, GitHub, GitLab) Commit: 3e3381c68ce3c34d53deec5d722f16dbd3cd3346
Dependencies: #30614 Stopgaps:

Status badges

Description

#30614 allows the font for text3d to be changed in the Three.js viewer. This ticket proposes allowing the font for the viewer's axis labels to be changed as well.

Attachments (1)

axes_labels_style.html (21.3 KB) - added by Joshua Campbell 2 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 2 years ago by Joshua Campbell

Dependencies: #30628
Status: newneeds_info

I can work on getting this into 9.3. A few questions I have:

  1. Is it just the font family that needs to be changed, or should the size, bold, italic, and/or opacity be changeable as well?
  1. Would this apply to all axes, or would there be value in adjusting each axis independently?
  1. Would this apply to only the axis label ("x", "y", "z") or also the coordinate labels?

comment:2 Changed 2 years ago by Joshua Campbell

Dependencies: #30628#30614

comment:3 Changed 2 years ago by Paul Masson

Users have been asking for LaTeX rendering as well, if you want to tackle that...

comment:4 in reply to:  3 ; Changed 2 years ago by Eric Gourgoulhon

Replying to paulmasson:

Users have been asking for LaTeX rendering as well, if you want to tackle that...

Indeed, LaTeX rendering would be wonderful!

comment:5 in reply to:  1 ; Changed 2 years ago by Eric Gourgoulhon

Replying to gh-jcamp0x2a:

I can work on getting this into 9.3.

Thanks!

A few questions I have:

  1. Is it just the font family that needs to be changed, or should the size, bold, italic, and/or opacity be changeable as well?

I would say that size, style, weight and opacity should be changeable as well, as they are for text3d and for 2D plots.

  1. Would this apply to all axes, or would there be value in adjusting each axis independently?

Independently sounds better.

  1. Would this apply to only the axis label ("x", "y", "z") or also the coordinate labels?

For 2D plots, one can change the size of the axis label independently from the size of the coordinate labels. It would be nice to be able to do so for 3D plots, but IMHO this feature is less important than 2 and 3 above.

Last edited 2 years ago by Eric Gourgoulhon (previous) (diff)

comment:6 in reply to:  4 Changed 2 years ago by Joshua Campbell

Replying to egourgoulhon:

Replying to paulmasson:

Users have been asking for LaTeX rendering as well, if you want to tackle that...

Indeed, LaTeX rendering would be wonderful!

Yea, I recently told @slelievre I would return to #30226, too. :)

comment:7 in reply to:  5 ; Changed 2 years ago by Joshua Campbell

I'm envisioning passing a dict of options named the same as those passed to text3d. Something along the lines of...

# All axes labels and coodinate labels share the same options:
g.show(axes_label_opts=dict(fontsize=10, fontweight='bold', opacity=0.5))

# Each axis has its own options. They apply to their coordinate labels, too:
g.show(axes_label_opts=[dict(...), dict(...), dict(...)])

# Complete control of all labels:
g.show(axes_label_opts=..., coord_label_opts=...)

I think that will cover all use cases. Any objections to this? Perhaps a flatter structure like:

g.show(xaxis_label_fontsize=10, ycoord_label_opacity=0.5)

comment:8 in reply to:  7 Changed 2 years ago by Eric Gourgoulhon

Replying to gh-jcamp0x2a:

I'm envisioning passing a dict of options named the same as those passed to text3d. Something along the lines of...

# All axes labels and coodinate labels share the same options:
g.show(axes_label_opts=dict(fontsize=10, fontweight='bold', opacity=0.5))

# Each axis has its own options. They apply to their coordinate labels, too:
g.show(axes_label_opts=[dict(...), dict(...), dict(...)])

# Complete control of all labels:
g.show(axes_label_opts=..., coord_label_opts=...)

I think that will cover all use cases. Any objections to this?

Looks good!

Perhaps a flatter structure like:

g.show(xaxis_label_fontsize=10, ycoord_label_opacity=0.5)

Why not, but this may require too much work. Also, I don't think we have this for 2D plots and maybe things should be consistent between 2D and 3D graphics.

comment:9 Changed 2 years ago by Joshua Campbell

Authors: Joshua Campbell
Branch: u/gh-jcamp0x2a/30628-axis-label-customization
Commit: 3e3381c68ce3c34d53deec5d722f16dbd3cd3346
Status: needs_infoneeds_review

I've pushed a branch allowing the axis label text style to be customized. The same style can be applied to all axes, or each axis can be customized separately.

The style for the coordinates is not presently customizable independently of the axis names. The axis name would need to be broken out into a separate label from the middle coordinate. That could be done in a follow-up ticket if there's demand for that level of customization.

I shall attach an example plot with each axis customized. It was generated using:

sage: style = [dict(color='red', fontweight='bold'),
....:          dict(fontsize=20, fontfamily='Times New Roman, Georgia, serif'),
....:          dict(fontstyle='italic', opacity=0.5)]
sage: show(dodecahedron(), axes_labels_style=style)

New commits:

3e3381cAdd new 'axes_labels_style' viewer option for three.js

Changed 2 years ago by Joshua Campbell

Attachment: axes_labels_style.html added

comment:10 Changed 2 years ago by Eric Gourgoulhon

Reviewers: Eric Gourgoulhon
Status: needs_reviewpositive_review

This is very nice! Thank you. I played a little bit with it and everything seems OK. So I am setting the ticket to positive review. Paul, do you agree?

comment:11 Changed 2 years ago by Volker Braun

Branch: u/gh-jcamp0x2a/30628-axis-label-customization3e3381c68ce3c34d53deec5d722f16dbd3cd3346
Resolution: fixed
Status: positive_reviewclosed
Note: See TracTickets for help on using tickets.