Home Explore Help
Register Sign In
wjinan
/
ck-ops
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 89ca1e68a6
Branches Tags
ck-ops
/
code
/
grafana
/
public
/
app
/
features
/
canvas
/
elements
/
droneTop.tsx

droneTop.tsx 14 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 
  1. import { css } from '@emotion/css';
    2. 

  2. import React, { FC } from 'react';
    3. 

  3. 

  4. import { GrafanaTheme2 } from '@grafana/data';
    5. 

  5. import { useStyles2 } from '@grafana/ui';
    6. 

  6. import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
    7. 

  7. import { ScalarDimensionEditor } from 'app/features/dimensions/editors';
    8. 

  8. 

  9. import { CanvasElementItem, CanvasElementProps } from '../element';
    10. 

  10. 

  11. interface DroneTopData {
    12. 

  12.   bRightRotorRPM?: number;
    13. 

  13.   bLeftRotorRPM?: number;
    14. 

  14.   fRightRotorRPM?: number;
    15. 

  15.   fLeftRotorRPM?: number;
    16. 

  16.   yawAngle?: number;
    17. 

  17. }
    18. 

  18. 

  19. interface DroneTopConfig {
    20. 

  20.   bRightRotorRPM?: ScalarDimensionConfig;
    21. 

  21.   bLeftRotorRPM?: ScalarDimensionConfig;
    22. 

  22.   fRightRotorRPM?: ScalarDimensionConfig;
    23. 

  23.   fLeftRotorRPM?: ScalarDimensionConfig;
    24. 

  24.   yawAngle?: ScalarDimensionConfig;
    25. 

  25. }
    26. 

  26. 

  27. const DroneTopDisplay: FC<CanvasElementProps<DroneTopConfig, DroneTopData>> = (props) => {
    28. 

  28.   const styles = useStyles2(getStyles);
    29. 

  29. 

  30.   const { data } = props;
    31. 

  31. 

  32.   const fRightRotorAnimation = `spin ${data?.fRightRotorRPM ? 60 / Math.abs(data.fRightRotorRPM) : 0}s linear infinite`;
    33. 

  33. 

  34.   const fLeftRotorAnimation = `spin ${data?.fLeftRotorRPM ? 60 / Math.abs(data.fLeftRotorRPM) : 0}s linear infinite`;
    35. 

  35. 

  36.   const bRightRotorAnimation = `spin ${data?.bRightRotorRPM ? 60 / Math.abs(data.bRightRotorRPM) : 0}s linear infinite`;
    37. 

  37. 

  38.   const bLeftRotorAnimation = `spin ${data?.bLeftRotorRPM ? 60 / Math.abs(data.bLeftRotorRPM) : 0}s linear infinite`;
    39. 

  39. 

  40.   const droneTopTransformStyle = `rotate(${data?.yawAngle ? data.yawAngle : 0}deg)`;
    41. 

  41. 

  42.   return (
    43. 

  43.     <svg
    44. 

  44.       xmlns="http://www.w3.org/2000/svg"
    45. 

  45.       xmlnsXlink="http://www.w3.org/1999/xlink"
    46. 

  46.       viewBox="-43 -43 640 640"
    47. 

  47.       xmlSpace="preserve"
    48. 

  48.       style={{ transform: droneTopTransformStyle }}
    49. 

  49.     >
    50. 

  50.       <path
    51. 

  51.         fillRule="evenodd"
    52. 

  52.         d=" M 137.95 127.967 C 137.14 127.157 136.189 126.58 135.178 126.218 C 138.173 121.545 139.967 116.036 140.125 110.123 L 217.64 151.862 C 214.049 157.411 211.8 163.922 211.386 170.95 L 209.694 199.712 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 L 137.95 127.967 Z  M 134.268 426.981 C 130.211 421.314 124.328 417.045 117.482 415.041 L 201.999 330.523 L 201.385 340.955 C 200.67 353.107 202.829 364.914 207.563 375.673 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 L 134.268 426.981 Z  M 324.765 373.673 L 228.527 373.673 Q 215.374 358.611 216.361 341.835 L 226.361 171.832 C 226.825 163.94 231.012 157.096 237.146 152.957 L 316.146 152.957 C 322.28 157.096 326.466 163.94 326.931 171.832 L 336.931 341.835 Q 337.918 358.611 324.765 373.673 L 324.765 373.673 L 324.765 373.673 L 324.765 373.673 L 324.765 373.673 L 324.765 373.673 L 324.765 373.673 Z  M 435.81 415.041 C 428.964 417.045 423.081 421.314 419.024 426.981 L 345.727 375.673 C 350.461 364.914 352.62 353.107 351.905 340.955 L 351.291 330.523 L 435.81 415.041 L 435.81 415.041 L 435.81 415.041 L 435.81 415.041 L 435.81 415.041 L 435.81 415.041 Z  M 343.596 199.713 L 341.904 170.951 C 341.49 163.923 339.242 157.411 335.651 151.863 L 413.167 110.124 C 413.325 116.037 415.119 121.546 418.114 126.219 C 417.103 126.581 416.152 127.158 415.342 127.968 L 343.596 199.713 L 343.596 199.713 L 343.596 199.713 L 343.596 199.713 L 343.596 199.713 Z  M 444.646 92.771 C 453.744 92.771 461.146 100.172 461.146 109.271 C 461.146 118.369 453.744 125.771 444.646 125.771 C 435.548 125.771 428.146 118.369 428.146 109.271 C 428.146 100.172 435.548 92.771 444.646 92.771 L 444.646 92.771 L 444.646 92.771 L 444.646 92.771 Z  M 108.647 92.771 C 117.745 92.771 125.147 100.172 125.147 109.271 C 125.147 118.369 117.745 125.771 108.647 125.771 C 99.549 125.771 92.147 118.369 92.147 109.271 C 92.147 100.172 99.549 92.771 108.647 92.771 L 108.647 92.771 L 108.647 92.771 Z  M 108.647 461.771 C 99.549 461.771 92.147 454.369 92.147 445.271 C 92.147 436.172 99.549 428.771 108.647 428.771 C 117.745 428.771 125.147 436.172 125.147 445.271 C 125.147 454.369 117.745 461.771 108.647 461.771 L 108.647 461.771 Z  M 92.322 136.202 C 97.086 139.1 102.675 140.771 108.647 140.771 C 114.883 140.771 120.697 138.941 125.594 135.802 C 125.956 136.813 126.534 137.764 127.343 138.573 L 207.342 218.573 C 207.711 218.942 208.109 219.264 208.528 219.54 L 203.212 309.908 C 201.794 310.182 200.44 310.869 199.342 311.967 L 95.343 415.967 C 94.954 416.356 94.62 416.779 94.335 417.224 C 93.651 417.575 92.976 417.942 92.322 418.34 Q 84.615 424.182 81.716 428.946 C 78.817 433.71 77.147 439.299 77.147 445.271 C 77.147 462.64 91.278 476.771 108.647 476.771 C 114.619 476.771 120.208 475.1 124.972 472.202 C 129.736 469.304 132.678 466.36 135.577 461.596 C 138.476 456.832 140.147 451.243 140.147 445.271 C 140.147 443.943 140.055 442.637 139.895 441.352 L 214.997 388.78 C 217.05 391.677 336.242 391.678 338.295 388.78 L 413.398 441.352 C 413.238 442.637 413.146 443.943 413.146 445.271 C 413.146 451.243 414.817 456.832 417.715 461.596 C 420.613 466.36 423.557 469.304 428.321 472.202 C 433.085 475.1 438.674 476.771 444.646 476.771 C 462.015 476.771 476.146 462.64 476.146 445.271 C 476.146 439.299 474.475 433.71 471.577 428.946 C 468.679 424.182 459.642 417.575 458.958 417.224 C 458.672 416.779 458.339 416.356 457.95 415.967 L 353.95 311.967 C 352.852 310.869 351.498 310.182 350.08 309.908 L 344.764 219.54 C 345.183 219.264 345.581 218.942 345.95 218.573 L 425.95 138.573 C 426.76 137.763 427.337 136.812 427.699 135.802 C 432.596 138.941 438.409 140.771 444.646 140.771 C 450.618 140.771 456.207 139.1 460.971 136.202 C 465.735 133.304 468.679 130.36 471.577 125.596 C 474.475 120.832 476.146 115.243 476.146 109.271 C 476.146 91.903 462.015 77.772 444.646 77.772 C 438.674 77.772 433.085 79.442 428.321 82.34 L 416.215 91.446 L 324.765 140.688 C 318.402 136.324 310.718 133.771 302.473 133.771 L 250.819 133.771 C 242.574 133.771 234.89 136.324 228.527 140.688 L 137.078 91.446 L 124.972 82.34 C 120.208 79.442 114.619 77.772 108.647 77.772 C 91.278 77.772 77.147 91.903 77.147 109.271 C 77.147 115.243 78.818 120.832 81.716 125.595 C 84.614 130.358 87.558 133.304 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 L 92.322 136.202 Z  M 444.646 461.771 C 435.548 461.771 428.146 454.369 428.146 445.271 C 428.146 436.172 435.548 428.771 444.646 428.771 C 453.744 428.771 461.146 436.172 461.146 445.271 C 461.146 454.369 453.744 461.771 444.646 461.771 Z "
    53. 

  53.       />
    54. 

  54.       <path
    55. 

  55.         fillRule="evenodd"
    56. 

  56.         d=" M 259.458 334.235 L 259.458 337.211 L 254.514 337.211 L 254.514 350.795 L 250.842 350.795 L 250.842 337.211 L 245.898 337.211 L 245.898 334.235 L 259.458 334.235 Z  M 266.226 347.939 L 272.586 347.939 L 272.754 350.627 L 272.754 350.627 Q 270.498 350.867 265.074 350.867 L 265.074 350.867 L 265.074 350.867 Q 263.418 350.867 262.434 349.967 L 262.434 349.967 L 262.434 349.967 Q 261.45 349.067 261.426 347.531 L 261.426 347.531 L 261.426 337.499 L 261.426 337.499 Q 261.45 335.963 262.434 335.063 L 262.434 335.063 L 262.434 335.063 Q 263.418 334.163 265.074 334.163 L 265.074 334.163 L 265.074 334.163 Q 270.498 334.163 272.754 334.403 L 272.754 334.403 L 272.586 337.115 L 266.226 337.115 L 266.226 337.115 Q 265.626 337.115 265.362 337.403 L 265.362 337.403 L 265.362 337.403 Q 265.098 337.691 265.098 338.339 L 265.098 338.339 L 265.098 340.859 L 271.698 340.859 L 271.698 343.499 L 265.098 343.499 L 265.098 346.691 L 265.098 346.691 Q 265.098 347.363 265.362 347.651 L 265.362 347.651 L 265.362 347.651 Q 265.626 347.939 266.226 347.939 L 266.226 347.939 Z  M 275.202 333.995 L 278.73 333.995 L 278.73 346.931 L 278.73 346.931 Q 278.73 348.131 280.074 348.131 L 280.074 348.131 L 281.034 348.131 L 281.442 350.603 L 281.442 350.603 Q 280.53 351.083 278.61 351.083 L 278.61 351.083 L 278.61 351.083 Q 277.026 351.083 276.114 350.231 L 276.114 350.231 L 276.114 350.231 Q 275.202 349.379 275.202 347.819 L 275.202 347.819 L 275.202 333.995 Z  M 283.05 333.995 L 286.578 333.995 L 286.578 346.931 L 286.578 346.931 Q 286.578 348.131 287.922 348.131 L 287.922 348.131 L 288.882 348.131 L 289.29 350.603 L 289.29 350.603 Q 288.378 351.083 286.458 351.083 L 286.458 351.083 L 286.458 351.083 Q 284.874 351.083 283.962 350.231 L 283.962 350.231 L 283.962 350.231 Q 283.05 349.379 283.05 347.819 L 283.05 347.819 L 283.05 333.995 Z  M 292.086 335.759 L 292.086 335.759 L 292.086 335.759 Q 293.634 333.923 297.618 333.923 L 297.618 333.923 L 297.618 333.923 Q 301.602 333.923 303.162 335.759 L 303.162 335.759 L 303.162 335.759 Q 304.722 337.595 304.722 342.515 L 304.722 342.515 L 304.722 342.515 Q 304.722 347.435 303.162 349.271 L 303.162 349.271 L 303.162 349.271 Q 301.602 351.107 297.618 351.107 L 297.618 351.107 L 297.618 351.107 Q 293.634 351.107 292.086 349.271 L 292.086 349.271 L 292.086 349.271 Q 290.538 347.435 290.538 342.515 L 290.538 342.515 L 290.538 342.515 Q 290.538 337.595 292.086 335.759 Z  M 300.174 338.051 L 300.174 338.051 L 300.174 338.051 Q 299.49 336.875 297.618 336.875 L 297.618 336.875 L 297.618 336.875 Q 295.746 336.875 295.062 338.051 L 295.062 338.051 L 295.062 338.051 Q 294.378 339.227 294.378 342.515 L 294.378 342.515 L 294.378 342.515 Q 294.378 345.803 295.062 346.979 L 295.062 346.979 L 295.062 346.979 Q 295.746 348.155 297.618 348.155 L 297.618 348.155 L 297.618 348.155 Q 299.49 348.155 300.174 346.979 L 300.174 346.979 L 300.174 346.979 Q 300.858 345.803 300.858 342.515 L 300.858 342.515 L 300.858 342.515 Q 300.858 339.227 300.174 338.051 Z "
    57. 

  57.       />
    58. 

  58.       <g className="propeller-group">
    59. 

  59.         <path
    60. 

  60.           className={`${styles.propeller} ${styles.propellerCW}`}
    61. 

  61.           style={{ animation: bRightRotorAnimation }}
    62. 

  62.           d=" M 461.563 418.77 L 463.992 416.34 Q 465.495 407.116 466.461 400.395 C 467.426 393.675 469.363 388.087 474.731 383.284 Q 533.862 341.514 538.196 338.859 C 542.529 336.203 548.345 334.299 551.492 338.29 C 554.639 342.282 553.481 346.02 549.419 350.082 L 471.147 428.354 L 461.563 418.77 Z  M 427.729 471.772 L 425.299 474.202 Q 423.797 483.426 422.831 490.146 C 421.866 496.867 419.929 502.454 414.561 507.257 Q 355.43 549.028 351.096 551.683 C 346.763 554.338 340.947 556.243 337.8 552.251 C 334.653 548.26 335.811 544.522 339.873 540.46 L 418.145 462.187 L 427.729 471.772 Z "
    63. 

  63.         />
    64. 

  64.         <path
    65. 

  65.           className={`${styles.propeller} ${styles.propellerCCW}`}
    66. 

  66.           style={{ animation: fRightRotorAnimation }}
    67. 

  67.           d=" M 461.563 135.773 L 463.992 138.203 Q 465.495 147.426 466.461 154.147 C 467.426 160.868 469.363 166.455 474.731 171.258 Q 533.862 213.028 538.196 215.684 C 542.529 218.339 548.345 220.244 551.492 216.252 C 554.639 212.26 553.481 208.523 549.419 204.46 L 471.147 126.188 L 461.563 135.773 Z  M 427.729 82.77 L 425.299 80.34 Q 423.797 71.117 422.831 64.396 C 421.866 57.675 419.929 52.088 414.561 47.285 Q 355.43 5.515 351.096 2.859 C 346.763 0.204 340.947 -1.701 337.8 2.291 C 334.653 6.282 335.811 10.02 339.873 14.082 L 418.145 92.355 L 427.729 82.77 Z "
    68. 

  68.         />
    69. 

  69.         <path
    70. 

  70.           className={`${styles.propeller} ${styles.propellerCCW}`}
    71. 

  71.           style={{ animation: bLeftRotorAnimation }}
    72. 

  72.           d=" M 125.563 471.772 L 127.993 474.202 Q 129.496 483.426 130.461 490.146 C 131.427 496.867 133.363 502.454 138.731 507.257 Q 197.863 549.028 202.196 551.683 C 206.53 554.338 212.345 556.243 215.492 552.251 C 218.639 548.26 217.482 544.522 213.419 540.46 L 135.148 462.187 L 125.563 471.772 Z  M 91.73 418.77 L 89.3 416.34 Q 87.797 407.116 86.832 400.395 C 85.866 393.675 83.93 388.087 78.562 383.284 Q 19.431 341.514 15.097 338.859 C 10.763 336.203 4.948 334.299 1.801 338.29 C -1.346 342.282 -0.189 346.02 3.874 350.082 L 82.146 428.354 L 91.73 418.77 Z "
    73. 

  73.         />
    74. 

  74.         <path
    75. 

  75.           className={`${styles.propeller} ${styles.propellerCW}`}
    76. 

  76.           style={{ animation: fLeftRotorAnimation }}
    77. 

  77.           d=" M 125.563 82.77 L 127.993 80.34 Q 129.496 71.117 130.461 64.396 C 131.427 57.675 133.363 52.088 138.731 47.285 Q 197.863 5.515 202.196 2.859 C 206.53 0.204 212.345 -1.701 215.492 2.291 C 218.639 6.282 217.482 10.02 213.419 14.083 L 135.147 92.355 L 125.563 82.77 Z  M 91.73 135.773 L 89.3 138.203 Q 87.797 147.426 86.832 154.147 C 85.866 160.868 83.93 166.455 78.562 171.258 Q 19.431 213.028 15.097 215.684 C 10.763 218.339 4.948 220.243 1.801 216.252 C -1.346 212.26 -0.189 208.523 3.874 204.46 L 82.146 126.188 L 91.73 135.773 Z "
    78. 

  78.         />
    79. 

  79.       </g>
    80. 

  80.     </svg>
    81. 

  81.   );
    82. 

  82. };
    83. 

  83. 

  84. export const droneTopItem: CanvasElementItem<any, any> = {
    85. 

  85.   id: 'droneTop',
    86. 

  86.   name: 'Drone Top',
    87. 

  87.   description: 'Drone top',
    88. 

  88. 

  89.   display: DroneTopDisplay,
    90. 

  90. 

  91.   defaultSize: {
    92. 

  92.     width: 100,
    93. 

  93.     height: 100,
    94. 

  94.   },
    95. 

  95. 

  96.   getNewOptions: (options) => ({
    97. 

  97.     ...options,
    98. 

  98.   }),
    99. 

  99. 

  100.   // Called when data changes
    101. 

  101.   prepareData: (ctx: DimensionContext, cfg: DroneTopConfig) => {
    102. 

  102.     const data: DroneTopData = {
    103. 

  103.       bRightRotorRPM: cfg?.bRightRotorRPM ? ctx.getScalar(cfg.bRightRotorRPM).value() : 0,
    104. 

  104.       bLeftRotorRPM: cfg?.bLeftRotorRPM ? ctx.getScalar(cfg.bLeftRotorRPM).value() : 0,
    105. 

  105.       fRightRotorRPM: cfg?.fRightRotorRPM ? ctx.getScalar(cfg.fRightRotorRPM).value() : 0,
    106. 

  106.       fLeftRotorRPM: cfg?.fLeftRotorRPM ? ctx.getScalar(cfg.fLeftRotorRPM).value() : 0,
    107. 

  107.       yawAngle: cfg?.yawAngle ? ctx.getScalar(cfg.yawAngle).value() : 0,
    108. 

  108.     };
    109. 

  109. 

  110.     return data;
    111. 

  111.   },
    112. 

  112. 

  113.   registerOptionsUI: (builder) => {
    114. 

  114.     const category = ['Drone Top'];
    115. 

  115.     builder
    116. 

  116.       .addCustomEditor({
    117. 

  117.         category,
    118. 

  118.         id: 'yawAngle',
    119. 

  119.         path: 'config.yawAngle',
    120. 

  120.         name: 'Yaw Angle',
    121. 

  121.         editor: ScalarDimensionEditor,
    122. 

  122.       })
    123. 

  123.       .addCustomEditor({
    124. 

  124.         category,
    125. 

  125.         id: 'fRightRotorRPM',
    126. 

  126.         path: 'config.fRightRotorRPM',
    127. 

  127.         name: 'Front Right Rotor RPM',
    128. 

  128.         editor: ScalarDimensionEditor,
    129. 

  129.       })
    130. 

  130.       .addCustomEditor({
    131. 

  131.         category,
    132. 

  132.         id: 'fLeftRotorRPM',
    133. 

  133.         path: 'config.fLeftRotorRPM',
    134. 

  134.         name: 'Front Left Rotor RPM',
    135. 

  135.         editor: ScalarDimensionEditor,
    136. 

  136.       })
    137. 

  137.       .addCustomEditor({
    138. 

  138.         category,
    139. 

  139.         id: 'bRightRotorRPM',
    140. 

  140.         path: 'config.bRightRotorRPM',
    141. 

  141.         name: 'Back Right Rotor RPM',
    142. 

  142.         editor: ScalarDimensionEditor,
    143. 

  143.       })
    144. 

  144.       .addCustomEditor({
    145. 

  145.         category,
    146. 

  146.         id: 'bLeftRotorRPM',
    147. 

  147.         path: 'config.bLeftRotorRPM',
    148. 

  148.         name: 'Back Left Rotor RPM',
    149. 

  149.         editor: ScalarDimensionEditor,
    150. 

  150.       });
    151. 

  151.   },
    152. 

  152. };
    153. 

  153. 

  154. const getStyles = (theme: GrafanaTheme2) => ({
    155. 

  155.   propeller: css`
    156. 

  156.     transform-origin: 50% 50%;
    157. 

  157.     transform-box: fill-box;
    158. 

  158.     display: block;
    159. 

  159.     @keyframes spin {
    160. 

  160.       from {
    161. 

  161.         transform: rotate(0deg);
    162. 

  162.       }
    163. 

  163.       to {
    164. 

  164.         transform: rotate(360deg);
    165. 

  165.       }
    166. 

  166.     }
    167. 

  167.   `,
    168. 

  168.   propellerCW: css`
    169. 

  169.     animation-direction: normal;
    170. 

  170.   `,
    171. 

  171.   propellerCCW: css`
    172. 

  172.     animation-direction: reverse;
    173. 

  173.   `,
    174. 

  174. });
    175.