search

MarcusCalidus / marcuscalidus-svg-panel

Grafana panel for displaying metric sensitive SVG images using the snap svg library
MIT License
63 stars 28 forks source link

Animation driven from a metric #8

Closed rajil closed 5 years ago

rajil commented 6 years ago

Hi Marcus,

Thanks for the responding to the other issues. I have another question for you.

Is it possible to drive an animation using a metric e.g. Like a progress bar linked to metric?

In the main page of the repo, you have an example of a tank filling up. It would nice if there was an example which demonstrates that.

Thanks

MarcusCalidus commented 6 years ago

Hi Rajil,

thank you for the question. I'll try to prepare a short tutorial. At the moment I don't have much time on my hands though.

Cheers

chappi6 commented 5 years ago

I would like to push the tutorial. I am also searching for an example or tutorial!

MarcusCalidus commented 5 years ago

@chappi6 @rajil Here comes the filling tank example from the screenshots. This very much depends of course from the input metrics series

ctrl.series[0] contains the current fill level ctrl.series[1] contains the quantity in metric tons ctrl.series[2] contains the current control state as numeric value

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 362.14257 152.15235">
 <defs id="defs4211">
  <mask id="mask4789" maskUnits="userSpaceOnUse">
   <path id="path4791" d="m77.468 0.24543v0.001979a76.075 76.075 0 0 0 -76.076 76.075 76.075 76.075 0 0 0 76.076 76.078v-0.002h209.99a76.075 76.075 0 0 0 76.07 -76.078 76.075 76.075 0 0 0 -76.07 -76.076h-209.99z" fill="#ffffff"/>
  </mask>
 </defs>
 <g id="layer1" transform="translate(-1.3916 -.24543)">
  <g id="tank_und_fuellstand" mask="url(#mask4789)">
   <rect id="tank" height="152.15" width="362.14" y=".24543" x="1.3916" fill="#ff6600"/>
   <rect id="fuellstand" stroke-opacity=".58360" fill-opacity=".41009" height="147.1" width="362.14" stroke="#ffffff" stroke-miterlimit="1" y="5.2978" x="1.3916" stroke-width="1.3" fill="#ffffff"/>
  </g>
 </g>
 <g id="layer2">
  <text id="inhalt" style="text-anchor:middle;text-align:center" font-weight="bold" xml:space="preserve" font-size="25px" line-height="100%" onclick="test()" y="60.27441" x="238.92258" font-family="sans-serif" fill="#ffffff"><tspan id="tspan4281" style="text-anchor:middle;text-align:center" font-weight="bold" font-size="25px" line-height="100%" y="60.27441" x="238.92258" font-family="sans-serif" fill="#ffffff">25t</tspan></text>
  <text id="status" style="text-anchor:middle;text-align:center" font-weight="bold" font-size="25px" xml:space="preserve" line-height="100%" y="104.64369" x="234.25996" font-family="sans-serif" fill="#ffffff"><tspan id="tspan4989" x="234.25996" y="104.64369">Entnahme aktiv</tspan></text>
  <g clip-rule="evenodd">
   <g id="bdgStatus0" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0078125 0 0 .0078125 48.083 36.076)">
    <path id="curve0-3" fill="#ffffff" d="m5120 640c2474 0 4480 2006 4480 4480s-2006 4480-4480 4480-4480-2006-4480-4480 2006-4480 4480-4480zm-2654 4574c-124 124-124 328 0 452l1788 1788c124 124 328 124 452 0l3388-3388c124-124 124-328 0-452l-508-508c-124-124-328-124-452 0l-2654 2654-1054-1054c-124-124-328-124-452 0l-508 508z"/>
   </g>
   <g id="bdgStatus1" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.010938 0 0 .010938 33.71 20.076)" fill="#ffffff">
    <path id="curve1" d="m6539 4082-1186-1186c-124-124-328-124-452 0l-1187 1186c-124 125-186 277-187 453l-7 839c-1 65 38 122 99 147 61 26 127 12 174-34l687-687v4160h1280v-4160l687 687c47 46 113 60 174 34 61-25 98-81 99-147l7-839c1-176-63-328-188-453z"/>
    <path id="curve0" d="m1920 1280h6400v1280h-6400z"/>
   </g>
   <g id="bdgStatus2" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(-.0091146 0 0 .0091146 143.44 23.576)" fill="#ffffff">
    <path id="curve1-2" d="m1280 7680h2934l454 453c249 249 655 249 905 0l453-453h2934v1280h-7680v-1280z"/>
    <path id="curve0-5" d="m3707 6721 1187 1186c124 124 328 124 452 0l1187-1186c124-125 186-277 187-453l7-839c1-142-172-214-273-113l-692 692-2-1208c-1-538 426-960 963-960h2237v-1280h-2237c-1234 0-2246 1005-2243 2240l2 1208-682-692c-101-101-272-30-273 113l-7 839c-1 176 63 328 187 453z"/>
   </g>
   <g id="bdgStatus3" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 42.045 26.493)" fill="#ffffff">
    <path id="curve1-5" d="m4160 3840v640h-1600c-353 0-640 287-640 640v3200h6400v-3200c0-353-287-640-640-640h-1600v-640h1600c705 0 1280 575 1280 1280v4480h-7680v-4480c0-705 575-1280 1280-1280h1600z"/>
    <path id="curve0-38" d="m3114 2240h1366v2880h-1920v1280h5120v-1280h-1920v-2880h1366c110 191 317 320 554 320 353 0 640-287 640-640s-287-640-640-640c-237 0-444 129-554 320h-1366c0-176-144-320-320-320h-640c-176 0-320 144-320 320h-1366c-110-191-317-320-554-320-353 0-640 287-640 640s287 640 640 640c237 0 444-129 554-320z"/>
   </g>
   <g id="bdgStatus4" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 36.719 25.035)" fill="#ffffff">
    <path id="curve1-1" d="m1280 7680h4160v320c0 176 144 320 320 320h1280c176 0 320-144 320-320v-320h1600v1280h-7680v-1280z"/>
    <path id="curve0-8" d="m3604 3200h1196c1235-3 2240 1006 2240 2240v2560h-1280v-2560c0-536-422-962-960-960l-1203 7 687 687c46 47 60 113 35 174-26 61-83 99-148 99l-839-7c-176-1-328-63-453-187l-1186-1187c-124-124-124-328 0-452l1186-1187c125-124 277-188 453-187l839 7c66 0 122 38 147 99 26 61 12 127-34 174l-680 680z"/>
   </g>
   <g id="bdgStatus6" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0089286 0 0 .0089286 37.523 25.987)" fill="#ffffff">
    <rect id="rect4199" height="3256.2" width="1146.4" y="2240" x="234.21"/>
    <path id="curve1-12" d="m1280 7680h4160v320c0 176 144 320 320 320h1280c176 0 320-144 320-320v-320h1600v1280h-7680v-1280z"/>
    <path id="curve0-0" d="m3604 3200h1196c1235-3 2240 1006 2240 2240v2560h-1280v-2560c0-536-422-962-960-960l-1203 7 687 687c46 47 60 113 35 174-26 61-83 99-148 99l-839-7c-176-1-328-63-453-187l-1186-1187c-124-124-124-328 0-452l1186-1187c125-124 277-188 453-187l839 7c66 0 122 38 147 99 26 61 12 127-34 174l-680 680z"/>
   </g>
   <g id="bdgStatus5" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 32.73 29.41)" fill="#ffffff">
    <path id="curve1-8" d="m7040 5120v320h-1280v-320h-320v-320h1920v320h-320zm0 2240v1280h726c110-191 317-320 554-320 353 0 640 287 640 640s-287 640-640 640c-237 0-444-129-554-320h-726c0 176-144 320-320 320h-640c-176 0-320-144-320-320h-726c-110 191-317 320-554 320-353 0-640-287-640-640s287-640 640-640c237 0 444 129 554 320h726v-1280h1280z"/>
    <path id="curve0-4" d="m2560 640h4480c555 0 1030 357 1206 853 36 101 22 204-40 291-61 88-154 136-261 136h-4105c-352 0-640 288-640 640v2560c0 352 288 640 640 640h4105c107 0 200 48 261 136 62 87 76 190 40 291-176 496-651 853-1206 853h-4480c-705 0-1280-575-1280-1280v-3840c0-705 575-1280 1280-1280z"/>
   </g>
   <g id="bdgStatus10" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 38.005 29.355)" fill="#ffffff">
    <path id="curve1-17" d="m5120 652c1767 0 3200 1433 3200 3200v948h-1280v-948c0-1060-860-1920-1920-1920s-1920 860-1920 1920v948h-1280v-948c0-1767 1433-3200 3200-3200z"/>
    <path id="curve0-1" d="m1920 5120h6400c353 0 640 287 640 640v3200c0 353-287 640-640 640h-6400c-353 0-640-287-640-640v-3200c0-353 287-640 640-640zm3200 960c-353 0-640 287-640 640 0 201 92 380 237 497l-237 1423h1280l-237-1423c145-117 237-296 237-497 0-353-287-640-640-640z"/>
   </g>
   <g id="bdgStatus11" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.0091146 0 0 .0091146 32.73 28.302)" fill="#ffffff">
    <path id="curve1-0" d="m4480 9600v-6720l-687 687c-47 46-113 60-174 34-61-25-100-82-99-147l7-839c1-176 63-328 187-453l1187-1186c124-124 328-124 452 0l1186 1186c125 125 189 277 188 453l-7 839c-1 66-38 122-99 147-61 26-127 12-174-34l-687-687v6720h-1280z"/>
    <path id="curve0-49" d="m1280 5120h2880v1280h-2880v-1280zm4800 0h2880v1280h-2880v-1280z"/>
   </g>
   <g id="bdgStatus12" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.012153 0 0 .012153 25.86 13.854)">
    <path id="curve0-47" fill="#ffffff" d="m4480 7680h1280v1280h-1280v-1280zm-2240-3840v-320c0-1235 1005-2240 2240-2240h1280c1235 0 2240 1005 2240 2240 0 976-641 1843-1571 2137-412 129-669 485-669 916v467h-1280v-467c0-989 626-1839 1569-2136 400-126 671-498 671-917 0-528-432-960-960-960h-1280c-528 0-960 432-960 960v320h-1280z"/>
   </g>
   <g id="bdgStatus20" style="shape-rendering:geometricPrecision;image-rendering:optimizeQuality" transform="matrix(.010938 0 0 -.010938 32.7 132.08)" fill="#ffffff">
    <path id="path4187" d="m6539 4082-1186-1186c-124-124-328-124-452 0l-1187 1186c-124 125-186 277-187 453l-7 839c-1 65 38 122 99 147 61 26 127 12 174-34l687-687v4160h1280v-4160l687 687c47 46 113 60 174 34 61-25 98-81 99-147l7-839c1-176-63-328-188-453z"/>
    <path id="path4189" d="m1920 1280h6400v1280h-6400z"/>
   </g>
  </g>
 </g>
</svg>

no Init Code

onHandleMetric:

var s = Snap(svgnode);
var inhalt = s.select("#inhalt");  // content = inhalt
var fuellstand = s.select("#fuellstand");  // fill level = fuellstand
var tank = s.select("#tank");
var status = s.select("#status");
var status_text = "";

var colors = ["#008000", "#FF6600", "#FF0000"];

fuellstand.attr({"y": tank.getBBox().height * (100-ctrl.series[0].stats.current)/100});
inhalt.attr({"text": ctrl.series[1].stats.current.toFixed(1) + " t"});

var all_badges = s.selectAll("[id^=bdgStatus]");
for (var idx = 0; idx < all_badges.length; idx++) {  
  all_badges[idx].attr({"display" : "none"});
}

var badge = s.select("#bdgStatus" + ctrl.series[2].stats.current.toFixed(0));
badge.attr({"display" : "initial"});

var color = colors[2];

switch (ctrl.series[2].stats.current) {
  case 0:
    status_text = "ready"; color=colors[1]; break;
  case 1:
    status_text = "full"; color=colors[1]; break;
  case 2:
    status_text = "filling"; color=colors[1]; break;
  case 3:
    status_text = "airing"; color=colors[1]; break;
  case 4:
    status_text = "extracting"; color=colors[0]; break;
  case 5:
    status_text = "venting"; color=colors[1]; break;
  case 6:
    status_text = "ready"; color=colors[1]; break;
  case 10:
    status_text = "locked"; color=colors[1]; break;
  case 11:
    status_text = "overfilled"; color=colors[2]; break;  
  case 12:
    status_text = "unknown"; color=colors[2]; break;
  case 20:
    status_text = "empty"; color=colors[2]; break;
}

status.attr({"text": status_text});
tank.attr({"fill" : color});