changed field styles #136
changed field styles #136
Conversation
|
A preview of is uploaded and can be seen here: ✨ https://mevislab.github.io/examples/pull/136/ ✨ Changes may take a few minutes to propagate. Since this is a preview of production, content with |
okonrad
left a comment
okonrad
left a comment
There was a problem hiding this comment.
I think we should think and discuss about it again.
On the one hand, we should not style everything, on the other hand, we should make it clear if we mean a field, a value, code, or an attribute. For the reader and for future writers.
For fields, we have a <field>fieldName</field>. Maybe rename it to <fieldName>fieldName</fieldName> to make it clearer.
Values do not have to be styled, but it would be nice to easily see them. Maybe just use a monospaced font without any color change. Maybe we can use <fieldValue>fieldValue</fieldValue> or something similar.
Code should be styled as code, like code in here (monospaced font with a background). Examples for code are internalName = FooBar and expandX = Yes.
Attributes are similar to code and could be styled similar - if at all. Examples for attributes are MinDistance (in a vessel skeleton) and type (in an MDL declaration of a new field).
| {{< docuLinks "/Resources/Documentation/Publish/SDK/MeVisLabManual/ch26.html" "MATE">}} opens showing your script file. You already learned how to create simple UI elements in [Example 2.4](tutorials/basicmechanisms/macromodules/guidesign). Now, we will create a little more complex UI including your `View2D` and `View3D`. | ||
|
|
||
| First we need a new *Field* in your *Parameters* section. Name the field *filepath* and set *internalName* to *ImageLoad.filename*. | ||
| First we need a new *Field* in your *Parameters* section. Name the field <field>filepath</field> and set <field>internalName</field> to <field>ImageLoad.filename</field>. |
There was a problem hiding this comment.
internalName is not a field; it is part of the Interface { Parameters {}} MDL syntax. The description results in:
Interface {
Parameters {
Field filepath { internalName = ImageLoad.filename }
}
}
| We have a vertical layout having two items placed horizontally next to each other. The new *Button* gets the title *Reset* but does nothing yet, because we did not add a Python function to a command. | ||
|
|
||
| Additionally, we added the `View2D` and the `View3D` to our *Window* and defined the *height*, *width*, and the *expandX/Y* property to *yes*. This leads our viewers to resize together with our *Window*. | ||
| Additionally, we added the `View2D` and the `View3D` to our *Window* and defined the <field>height</field>, <field>width</field>, and the <field>expandX/Y</field> property to <field>yes</field>. This leads our viewers to resize together with our *Window*. |
There was a problem hiding this comment.
height, width, and expandX/Y are properties of an MDL control and not fields.
I think it is good to also mark them and even style them the same as fields, but use a dedicated environment for them so you can change the style later. For example, use <property>width</property>.
Also, the value yes is actually not a field. Maybe <value>yes</value>?
| ## Summary | ||
| * You can add any viewers to your application UI by reusing them in MDL. | ||
| * Parameter fields using the *internalName* of an existing field in your network allows reusing this UI element in your own UI. Changes in your UI are applied to the field in the module. | ||
| * Parameter fields using the <field>internalName</field> of an existing field in your network allows reusing this UI element in your own UI. Changes in your UI are applied to the field in the module. |
There was a problem hiding this comment.
As above, internalName is not a field. Maybe use double backticks:
``internalName``
or have new environment, like <code>internalName</code>
|
|
||
| * **Define your own fields:** You can define your own fields by specifying their name, type, and default value in the *.script* file. This allows you to provide custom parameters for your macro module, tailored to your specific needs. These parameters can be use as input from the user or output from the modules processing. | ||
| * **Reuse fields from the internal network:** Instead of defining your own field, you can expose an existing field from one of the modules of your internal network. To do this, you reference the *internalName* of the internal field you want to reuse. This makes the internal field accessible at the macro module level, allowing users to interact with it directly without duplicating parameters. Changes of the field value are automatically applied in your internal network. | ||
| * **Reuse fields from the internal network:** Instead of defining your own field, you can expose an existing field from one of the modules of your internal network. To do this, you reference the <field>internalName</field> of the internal field you want to reuse. This makes the internal field accessible at the macro module level, allowing users to interact with it directly without duplicating parameters. Changes of the field value are automatically applied in your internal network. |
There was a problem hiding this comment.
See above. internalName is not a field.
|  | ||
|
|
||
| You can also add multiple CSO editors to see the different options. Add the `SoCSORectangleEditor` module to your workspace and connect it to the `SoGroup` module. As we now have two different editors, we need to tell the `CSOLabelRenderer` which CSO is to be rendered. Open the panel of the `SoCSODistanceLineEditor`. You can see the field *Extension Id* set to *distanceLine*. Open the panel of the `SoCSORectangleEditor`. You can see the field *Extension Id* set to *rectangle*. | ||
| You can also add multiple CSO editors to see the different options. Add the `SoCSORectangleEditor` module to your workspace and connect it to the `SoGroup` module. As we now have two different editors, we need to tell the `CSOLabelRenderer` which CSO is to be rendered. Open the panel of the `SoCSODistanceLineEditor`. You can see the field <field>Extension Id</field> set to <field>distanceLine</field>. Open the panel of the `SoCSORectangleEditor`. You can see the field <field>Extension Id</field> set to <field>rectangle</field>. |
There was a problem hiding this comment.
distanceLine and rectangle are not fields, but values. I think I made a proposal for that above.
| {{</alert>}} | ||
|
|
||
| Instead of using the ID of each edge for the label property, we are now using the *MinDistance* property of the skeleton. The result is a color-coded 3D visualization depending on the radius of the vessels. Small vessels are red, large vessels are green. | ||
| Instead of using the ID of each edge for the label property, we are now using the <field>MinDistance</field> property of the skeleton. The result is a color-coded 3D visualization depending on the radius of the vessels. Small vessels are red, large vessels are green. |
There was a problem hiding this comment.
MinDistance is an attribute.
|
|
||
| ### Mouse Clicks on Vessel Graph | ||
| Open the *Interaction* tab of the `SoVascularSystem` module. In `SoExaminerViewer` module, change to *Pick Mode* and click into your vessel structure. The panel of the `SoVascularSystem` module shows all information about the hit of your click in the vessel tree. | ||
| Open the *Interaction* tab of the `SoVascularSystem` module. In `SoExaminerViewer` module, change to <field>Pick Mode</field> and click into your vessel structure. The panel of the `SoVascularSystem` module shows all information about the hit of your click in the vessel tree. |
There was a problem hiding this comment.
Pick Mode is not a field. There is a button to enable the pick mode with 'Pick mode' on its tooltip.
In the SoExaminerViewer, the mode can either be interaction or navigation. This can be toggle by pressing an according button or by pressing the ESC key while the mouse cursor is over the viewer.
'Interaction' is interacting with objects (such as picking), while 'navigation' is an interaction specifically only with the (invisible) camera.
|  | ||
|
|
||
| To initiate the animation sequence, start by adding a keyframe at position *0* for the *targetMax* field. Set the *Target Max* value in the *Edit Key Frame – [LUTRescale.targetMax]* window to *1*, and click on the *Store Current Field Value* button to save it. | ||
| To initiate the animation sequence, start by adding a keyframe at position *0* for the <field>targetMax</field> field. Set the <field>Target Max</field> value in the *Edit Key Frame – [LUTRescale.targetMax]* window to <field>1</field>, and click on the *Store Current Field Value* button to save it. |
| Next, proceed to add keyframes at the same timepoints as the desired keyframes of the <field>Perspective Camera</field> field's first sequence. For each selected keyframe, progressively set values for the <field>Target Max</field> field, gradually increasing to <field>10</field>. This ensures specific synchronization between the visibility adjustments controlled by the `LUTRescale` module and the camera movements in the animation, creating a seamless transition. This gradual shift visually reveals the bones and vessels while concealing the knee structures and muscles. | ||
|
|
||
| To seamlessly incorporate the new keyframe at the same timepoints as the *Perspective Camera* field, you have two efficient options. Simply click on the keyframe of the first sequence, and the line will automatically appear in the middle of the keyframe. A double-click will effortlessly insert a keyframe at precisely the same position. If you prefer more accurate adjustments, you can also set your frame manually using the *Edit Key Frame - [LUTRescale.targetMax]* window. This flexibility allows for precise control over the animation timeline, ensuring keyframes align precisely with your intended moments. | ||
| To seamlessly incorporate the new keyframe at the same timepoints as the <field>Perspective Camera</field> field, you have two efficient options. Simply click on the keyframe of the first sequence, and the line will automatically appear in the middle of the keyframe. A double-click will effortlessly insert a keyframe at precisely the same position. If you prefer more accurate adjustments, you can also set your frame manually using the *Edit Key Frame - [LUTRescale.targetMax]* window. This flexibility allows for precise control over the animation timeline, ensuring keyframes align precisely with your intended moments. |
There was a problem hiding this comment.
I am not so sure whether Perspective Camera is really a field here.
It looks like a special entry on the timeline of the module AnimationRecorder.
|  | ||
|
|
||
| Add keyframes for both the *Perspective Camera* field and the *targetMax* in `LUTRescale1` at the same timepoints. Access the *Edit Camera Key Frame* window for the added keyframe in the *Perspective Camera* field and save the *current camera state*. To exclusively highlight only bones, adjust the *Target Max* values from *1* to *10000* in *Edit Key Frame - [LUTRescale1.targetMax]*. | ||
| Add keyframes for both the <field>Perspective Camera</field> field and the <field>targetMax</field> in `LUTRescale1` at the same timepoints. Access the *Edit Camera Key Frame* window for the added keyframe in the <field>Perspective Camera</field> field and save the *current camera state*. To exclusively highlight only bones, adjust the <field>Target Max</field> values from <field>1</field> to <field>10000</field> in *Edit Key Frame - [LUTRescale1.targetMax]*. |
There was a problem hiding this comment.
For Perspective Camera, see above.
1 and 10000 are values.
No description provided.