Some issues with Thermodinamic diagram ( change 'kn' speed unit to 'kt, zoom the diagram.. )

[HadjerSahariYassir]

Hi chird,

it's me again working with Thermodynamic diagram, please some meteorologists gave me some notes to add :

   1 - Is there pissibility to change the wind speed unit 'kn' to 'kt' ? 
   2 - Is there option to make zoom for the thermodinamic diagram ? (i already made it using javascript but not perfect ).
   3 -  does "Temperature inversed" option exists in the diagram ?

Thanks in advance Cheers

[chird]

Hi hadjersh97,

1. You can change the displayed unit. The options are described in the hover label options of the windspeed profile and the hodograph. Unfortunately, the naming is incorrect. The option is called "prefix", which is a suffix.

For example, with the hodograph, you can pass the following option:

{
  'hoverLabels': {
    'hodograph': {
      'windspeed': {
        'prefix': ' kt'
      }
    }
  }
}

2. You have to provide the user interface for zooming yourself. You can use the function update of the class CoordinateSystem for this.
3. I don't understand what you want to achieve. Can you provide an example?

[HadjerSahariYassir]

Hi Chird @chird , sorry for being late, actually I was waiting to have more explanation from experts : 1- First I've tried to change 'kt' to 'kn' like below but it doesn't work do u mean I should create a new object of hodograph or WindspeedProfile and then add it to the sounding? what I tried actually is to add hoverLabels inside addSounding,

2- a- in the picture below, I'm asking to add a new curve that represents "humidity" (red circle) and I know that there are only 3 curves inside the diagram of sounding, so if you can just show me how to add a new curve and pass my data inside. b- I should add a text inside the diagram that indicates that there is an inversion of temperature as you see in the picture (blue circle) the temperature inside the blue circle is increasing despite the pressure decreasing.

3- for zoom I'm trying to do it using javascript didn't understand what did you suggest of using the function update of the class CoordinateSystem

Finally, Thank you I appreciate your help so much

[chird]

Hi hadjersh97,

More interesting questions, I hope I can answer them for you.

1. You have to pass the options to the constructor of the diagram, not to the addSounding function.

2. a- Answered in #75 b- You can listen to the postinsert:sounding event and then add the text via SVG.js. The event is triggered by the TDDiagram class. You get the object via the getDiagramPlotArea of the basic ThermodynamicDiagram object. Then you can use something like that:

     tdDiagram.on('postinsert:sounding', ({ node }) => {
       node.plain('Test Text').move(200, 200).font({ size: 20, anchor: 'middle' });
     });

   node is a object of the SVG.js library and then you have to use that library to print out the text, and position it correctly.

3. You have to use the function update of the CoordinateSystemclass. The corresponding object will you get e.g. via the coordinateSystemproperty of the ThermodynamicDiagram object. With the following function, you can zoom with animation:

   const animateZoom = (endMinPres, endMaxPres, endMinTemp, endMaxTemp, zoomTime = 1000, zoomInterval = 10) => {
     const startMinPres = coordinateSystem.getPByXY(0, coordinateSystem.height);
     const startMaxPres = coordinateSystem.getPByXY(0, 0);
     const startMinTemp = coordinateSystem.getTByXY(0, 0);
     const startMaxTemp = coordinateSystem.getTByXY(coordinateSystem.width, 0);
     const zoomMaxSteps = zoomTime / zoomInterval;
     let intervalId;
     let pos = 0;
     intervalId = setInterval(() => {
       if (pos++ >= zoomMaxSteps) {
         clearInterval(intervalId);
       }
       else {
         coordinateSystem.update({
           pressure: {
             min: startMinPres + pos/zoomMaxSteps * (endMinPres-startMinPres),
             max: startMaxPres - pos/zoomMaxSteps * (startMaxPres-endMaxPres)
           },
           temperature: {
             min: startMinTemp + pos/zoomMaxSteps * (endMinTemp-startMinTemp),
             max: startMaxTemp - pos/zoomMaxSteps * (startMaxTemp-endMaxTemp)
           }
         });
       }
     }, zoomInterval);
   };

Usage: animateZoom(400, 800, meteoJS.calc.tempCelsiusToKelvin(-20), meteoJS.calc.tempCelsiusToKelvin(10));

I hope, my comments will help you.

[HadjerSahariYassir]

Hi @chird
Thank you so much , you really helped me a lot.

Just for the fist question about to change the prefix "kn" to "kt" , i added the changes to the constructor and it works for hodograph and for windspeedProfileAxis but it doesn't work for windprofile :

when i checked the node modules , i noticed something inside meteoJS/thermodynamicDiagram/windspeedProfile (line 296) i guess it should be like that : text:${Math.round(windspeedMSToKN(levelData.wspd)*10)/10} ${windspeed.prefix}`` i fixed the issue for me by making the changes inside node modules and i installed patched-package and it works.

Many Thanks

[HadjerSahariYassir]

for the previous comment , i was using a previous version of meteojs but when i updated with the latest version , the issue still occured.

Thanks