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.

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

[glass] Add canvas element for arbitrary drawing #4585

Open
PeterJohnson opened this issue Nov 8, 2022 · 0 comments · May be fixed by #5941
Open

[glass] Add canvas element for arbitrary drawing #4585

PeterJohnson opened this issue Nov 8, 2022 · 0 comments · May be fixed by #5941
Labels
component: glass Glass app and backend type: feature Brand new functionality, features, pages, workflows, endpoints, etc.

Comments

@PeterJohnson
Copy link
Member

PeterJohnson commented Nov 8, 2022

Also allow canvas overlays on Field2D (and on camera views, once added). This will generically solve a number of issues, such as camera crosshairs / target highlighting. Should also support images (specified as image name, with dashboard side configuration of a directory to load images from).

Key elements to support: lines, rectangles, circles, images, text. Consider supporting everything in https://github.com/ocornut/imgui/blob/master/imgui.h#L2540-L2565

The overall canvas has width and height dimensions (like Mechanism2d). X, Y coordinates in other fields are within the width and height and are scaled based on width/height for display. This works well with Field2D and camera streams, which also auto-scale to fit the window; as long as the canvas overlay matches the aspect ratio of the other object, it will be a 1:1 overlay.

NT storage concept: subtable for each element with the following topics:

  • ".type": string, e.g. "CanvasLine", "CanvasRect", "CanvasCircle", "CanvasImage", "CanvasText", etc.
  • "zdepth": float, determines drawing order (smallest zdepth first)
  • "color": string, hex style (#FFFFFF for white)

(Poly)Line/Rect would have:

  • "points": float array; X+Y coordinates (in that order), for each point
  • "thickness": float (optional, defaults to 1.0)

Circle and ngon would have:

  • "center": float array (2 elements), for circle and ngon
  • "radius": float
  • "nsegments": float, for ngon

Text would have:

  • "text": string, text contents
  • "fontName": string, font name (optional); dashboard has a directory of fonts
  • "fontSize": float, font size (TBD: how to handle scaling of this?)
  • "wrapWidth": float, wrap width (will be scaled by width/height)

Image would have:

  • "imageName": string, image name (assume dashboard has a directory of images)
  • "points": float array; X+Y coordinates (in that order), for each point. Either 2 (min/max) or 4 (corners)
  • "uv": float array; U+V texture coordinates (in that order), for each point (optional, if not specified, scales full image size). Matching size to points.

API wise each of these object types should be standalone classes (e.g. CanvasLine) derived from a common CanvasPrimitive base class, and Canvas should have an add(CanvasPrimitive). Doing it this way is better than factory functions, as it makes it easy for teams to extend/create their own classes. Other dashboard classes (e.g. Field2d, Mechanism2d) could have a getCanvas() to get a Canvas object for overlay.

TBD: Should there be any capability to interact with these objects from the dashboard side? If so, there should be a setting for mutability. Since mutability would significantly increase complexity, the first version of this should probably be publish-only.

@PeterJohnson PeterJohnson added the component: glass Glass app and backend label Nov 8, 2022
@PeterJohnson PeterJohnson added the type: feature Brand new functionality, features, pages, workflows, endpoints, etc. label Nov 15, 2022
@calcmogul calcmogul linked a pull request Oct 14, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: glass Glass app and backend type: feature Brand new functionality, features, pages, workflows, endpoints, etc.
Projects
Status: Postpone
Status: Low Priority
Development

Successfully merging a pull request may close this issue.

1 participant