Add images to variable name tooltips

thegrumpys / odop

Open Design Optimization Platform (ODOP) - Coil spring design app; mechanical springs; compression spring, extension spring, torsion spring

https://www.springdesignsoftware.org

MIT License

4 stars 5 forks source link

Add images to variable name tooltips #897

Closed grumpyinca closed 1 month ago

grumpyinca commented 9 months ago

Develop images to be associated with the desired subset of symboltable variables.
Load image files into appropriate directory/folder
Modify all initialState files to include references to those image files.
Create code to assemble tooltip text + image and render it.
Optionally, create migrate code.

grumpyinca commented 9 months ago

Proof of concept code has been developed and saved into the branch.

grumpyinca commented 9 months ago

See #898.

1fifoto commented 9 months ago

I have attached a collection of trial images for compression spring variable name tooltips. The set is nowhere near complete. It is just one more step in the discussion. I am thinking that for rendered geometry we want to go larger than 64 pixels wide.

Tooltip_VarNameImagesDraft.zip

See below for updated prototype / proposed compression spring tooltip images. See the edit history of this comment for even older versions.

grumpyinca commented 9 months ago

Prototype / proposed extension spring tooltip images. All 160 pixels wide by varying heights.

Ext_Tooltip_VarNameImages_160.zip

See below for updated extension spring tooltip images. See the edit history of this comment for even older versions.

1fifoto commented 9 months ago

To create Tooltip with HTML content you need this change in NameValueUnitsRowIndependentVariable.jsx using dangerouslySetInnerHTML as follows:

<OverlayTrigger placement="top" overlay={this.props.element.tooltip !== undefined && <Tooltip><div dangerouslySetInnerHTML={{__html: this.props.element.tooltip}}></div></Tooltip>}>
  <span>{this.props.element.name}</span>
</OverlayTrigger>

grumpyinca commented 9 months ago

Design guidelines for tooltip images

images to be 160 pixels wide by minimum height necessary to get the job done
spring images to correspond with design type (compression, extension, torsion)
use the initialState spring dimensions (proportions) with reduced coil count as basis for rendered images
coil count should be an integer (not fractional); perhaps 3 or 4
to the extent possible, keep spring dimensions, orientation, coil count, etc. consistent between tooltip images
to the extent practical, avoid or reduce text in the image
use rendered spring images (FreeCAD rendering of imported IGES files?)
green witness lines; turquoise dimension lines
rendered spring images to be gray
if multiple springs in one image, use light gray to distinguish the "for reference" instances
Use open arrows to illustrate forces, curved open arrows for moments; size of arrows to reflect relative size of force
(other?)

This entry is duplicated in a docs/design entry centralizing multiple guidelines.

grumpyinca commented 8 months ago

Prototype / proposed torsion spring tooltip images. All 160 pixels wide by varying heights. Tor_Tooltip_VarNameImages_160.zip

See below for updated prototype / proposed torsion spring tooltip images. See the edit history of this comment for even older versions.

grumpyinca commented 7 months ago

Updated variable name tooltip images:

Compression: VarNameTooltipImages.zip

Extension: VarNameTooltipImages.zip

Torsion: VarNameTooltipImages.zip

grumpyinca commented 7 months ago

Updated proposed variable name tooltip images March 7,2024:

Compression: VarNameTooltipImages_C.zip

Extension: VarNameTooltipImages_E.zip

Torsion: VarNameTooltipImages_T.zip

grumpyinca commented 5 months ago

Updated proposed variable name tooltip images - April 13, 2024:

Compression: VarNameTooltipImages_C.zip

Extension: VarNameTooltipImages_E.zip

Torsion: VarNameTooltipImages_T.zip

Piston-Cylinder: VarNameTooltipImages_PCyl.zip

Rectangular Solid: VarNameTooltipImages_Solid.zip

grumpyinca commented 5 months ago

Work in progress- April 21, 2024:

Piston-Cylinder: VarNameTooltipImages_PCyl.zip

1fifoto commented 5 months ago

I sent Compression Spring zip file to Katie. If she has time she might try to create one (and only one) into some"formal" art. We shall see...

grumpyinca commented 5 months ago

Updated proposed variable name tooltip images - May 02, 2024:

Compression: VarNameTooltipImages_C.zip

Extension: VarNameTooltipImages_E.zip

Torsion: VarNameTooltipImages_T.zip

Piston Cylinder: VarNameTooltipImages_PCyl.zip

Solid: VarNameTooltipImages_Solid.zip

grumpyinca commented 1 month ago

Merged to master, pushed to remote, closing.

Note: The set of tooltip images here is not complete. There are a few cases, (for example: Mean_Dia, extension spring L_1, L_2 & Extended_End_ID and torsion spring L_1, L_2 & End_Angle_Free) that could be added. This will be handled as part of a separate issue. See #925.