How to build an embedded graphical interface in Dymola

Written by: Maura Gallarotti – Project Engineer

Dymola allows to create embedded graphical user interfaces thanks to the icon annotations. This blog post describes how to visualise in the diagram layer the transient processes with plots, tables and dynamic colouring.


Figure 1: Cooling circuit transient animation.

Figure 1 shows the GIF of a cooling circuit of an extended-range electric vehicle. The vehicle integrates a plug-in battery pack and an electric motor, as well as an internal combustion engine. This cooling circuit models three different fluids:

  • the oil lubricating and cooling the range extender,
  • the water-glycol mixture cooling the electric motor, the inverter and the range extender,
  • the air going through the radiator.

The model has been built using the Claytex-Fluid & Media libraries, which deal specifically with fluids models for automotive applications.

Figure 1 represents an animation of the simulation results and is automatically generated running the model in Dymola.

From these results, one can easily access the following from the diagram:

  • All the measured quantities by the sensors: temperature, pressure, mass flow rate, volume flow rate, enthalpy and so on.


Figure 2: Sensors displaying the temperature during the transients.

  • The direction of the flows, shown using arrows
  • The temperature levels, represented by the diagram component colours
  • The level of fluid in the tank, shown by the height of the liquid in the tank icon
  • The temperatures in the heat exchangers (plots at the bottom left within Figure 1)
  • The energy and momentum balance, within the record at the top left of Figure 1


Figure 3: Record showing the main important outputs changing during the simulation.

The quantities measured by the sensors, the direction of the flow, the colouring depending on the temperature and the level of fluid in the tank can be defined in the icon layer using the feature DynamicSelect. For the plots and the table of outputs the Modelica library UserInteraction can be used.

     1. How to modify the sensors to show the measured quantity in the icon:

Let us consider the case of the temperature sensor. We can start off by duplicating the temperature sensor from Modelica Standard Library Modelica.Fluid.Sensors.Temperature.

First of all we declare a variable for temperature in °C:

Modelica.SIunits.Conversions.NonSIunits.Temperature_degC T_degC;


T = Medium.temperature(Medium.setState_phX(

T_degC = Modelica.SIunits.Conversions.to_degC(T);


Then we can use this variable in a text box in the icon. Looking through the model annotation, the resulting annotation relating to the text box in the icon should look like this:

 annotation (Icon(graphics={
    textString=DynamicSelect("", String(T_degC, significantDigits=4) + " °C"),
    }), Documentation(info="…"));


After simulating the model, one can visualise the temperature value at different time steps using the sliding cursor (1 in Figure 4). It is also possible to visualise the temperature at a specific point in time, using the Time box (2 in Figure 4).

Figure 4: Animation bar

    2. How to show the direction of the flow:

The direction of the flow can be shown using arrows. For doing so, one can define in the icon the lines with arrowheads, one pointing in each direction and enable their visibility depending on the sign of the mass flow rate by adding the line below to the annotation section for each arrow:

annotation (
             visible=DynamicSelect(true, if port_a.m_flow >= 0 
    then true else false),

    3. How to change the colour of the icon depending on temperature:

The colour of a rectangle or another polygon in the icon can be defined as:

annotation (Icon(graphics={
       fillColor=DynamicSelect({170,213,255}, colourVector),

colourVector is a vector with the RGB colour specifications. In this case a colour scale ranging from blue to red has used:


Figure 5: Colour scale definition.

colourVector can be easily defined as follows within the equations (you will need to declare any new parameters and variables e.g. T_normalised, T_range, etc. with appropriate units within the text section above the equation section of the same model):


parameter Boolean colourCode=false
    "Enable colour coding based on fluid temperature"
    annotation (Dialog(tab="Animation"));

parameter SI.Temperature T_min=250
    annotation (Dialog(enable=colourCode, tab="Animation"));
  parameter SI.Temperature T_max=400
    annotation (Dialog(enable=colourCode, tab="Animation"));


  SI.Temperature T_a;
  SI.Temperature T_b;
  SI.Temperature T_range;  
  SI.Temperature T_ave;
  SI.Temperature T_normalised;
  Real colourVector[3];


colourVector = if colourCode then {255*T_normalised,0,255*(1 - T_normalised)} else {170,213,255};

T_normalised = max(0, min(1, 1 - ((T_max - T_ave)/T_range)));

T_range = T_max - T_min;

T_ave = (T_a + T_b)/2;

T_a = Medium.temperature(Medium.setState_phX(

T_b = Medium.temperature(Medium.setState_phX(


Other colour maps can be found in the package Modelica.Mechanics.MultiBody.Visualizers.Colors.ColorMaps:


Figure 6: Colour maps available in Modelica Standard Library.

    4. How to show the level of liquid in the tank:

The liquid has been represented in the icon of the tank using a blue rectangle with a vertical cylinder fill pattern. The extent of the rectangle has been changed according to the level of fluid, as shown in the following code:


    // Parameters 

   parameter SI.Volume V(displayUnit="l") = 1e-3
      "Total volume of the expansion tank" annotation (Dialog(group="Geometry"));

   parameter SI.VolumeFraction level_start=0.5 "Initial liquid level [0-1]"
       annotation (Dialog(tab="Initialization"));

   final parameter SI.Volume V_gas_start(displayUnit="l") = V - V*level_start
       "Initial liquid volume" annotation (Dialog(tab="Initialization"));

   final parameter SI.Volume V_liquid_start(displayUnit="l") = V*level_start
       "Initial liquid volumeannotation (Dialog(tab="Initialization"));


  // Parameters related to the icon:

parameter Boolean levelVisualization=true "Enable level visualization"
    annotation (Dialog(tab="Animation"));

  // Variables

  SI.VolumeFraction level(start=level_start); 
  SI.Volume V_gas(start=V_gas_start) "Volume of gas in the expansion tank";
  SI.Volume V_liquid(start=V_liquid_start)  "Volume of liquid in the expansion tank";

    Real levelIcon;


  V_gas = (1 - level)*V;
  V_liquid = level*V;

levelIcon = if levelVisualization then level else level_start;

annotation (
    Icon(coordinateSystem(preserveAspectRatio=true), graphics={
          fillColor=DynamicSelect({85,170,255}, colourVector),
          extent=DynamicSelect({{-100,-100},{100,10}}, {{-100,-100},{100,(-100 +
              200*(min(1, max(levelIcon, 0))))}}),
          textString="level ="),
          textString=DynamicSelect("%level_start", String(

All the characteristics of the icons can be defined directly in the icon layer, by clicking on the component and adding properties to the annotation:


Figure 7: How to change the annotations related to the icon directly in the icon layer.

    5. How to build dynamic plots:

For the temperature plots the model UserInteraction.Outputs.SpatialPlot from the UserInteraction library has been used. In order to be able to modify the y axis during the simulation, the model UserInteraction.Internal.ScalingXYVectors has been modified defining minY as an input and not as a parameter. Then, the model SpatialPlot has been modified to include an equation for minY as follows:

  minY = min(min(y1), min(y2)) - 5;


meaning that the minimum value on the y axis is 5 degrees lower than the minimum between the two plotted temperatures.

   6. How to show the results in tables of outputs

Figure 3 shows how to gather some outputs in tables to ease the results visualization. The model used in this case is UserInteraction.Outputs.NumericValue.


Pay attention to the fact that these animations could slow down the simulation, so it is recommended to always conditionally enable them depending on a Boolean that can be set to false in case one wants to increase the simulation speed.

All the features described in this blog post have been implemented in the library Claytex-Fluids 2017.2 compatible with Dymola 2018.

Feel free to contact to get more information on the Claytex.Fluid library.

Please get in touch if you have any questions or have got a topic in mind that you would like us to write about. You can submit your questions / topics via: Tech Blog Questions / Topic Suggestion


Got a question? Just fill in this form and send it to us and we'll get back to you shortly.


© Copyright 2010-2022 Claytex Services Ltd All Rights Reserved

Log in with your credentials

Forgot your details?

Rolex Replica Watches Best Replica Watches