{"id":9815,"date":"2020-11-02T12:56:14","date_gmt":"2020-11-02T17:56:14","guid":{"rendered":"https:\/\/blogs.mathworks.com\/simulink\/?p=9815"},"modified":"2021-02-01T07:56:47","modified_gmt":"2021-02-01T12:56:47","slug":"creating-custom-gauges","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/simulink\/2020\/11\/02\/creating-custom-gauges\/","title":{"rendered":"Creating Custom Gauges"},"content":{"rendered":"

This week, I have a gift for you!<\/p>\n

Thanks to new capabilities added in MATLAB R2020b, I created a library of custom gauges that you can add to your Simulink models and published it to MATLAB Central<\/a> and GitHub<\/a>.<\/p>\n

Here is what my collection of gauges looks like, all together in action:<\/p>\n

\"custom<\/p>\n

Let's look at a few examples illustrating how you can create such custom gauges yourself.<\/p>\n

Example 1: Battery State of Charge<\/strong><\/p>\n

Here is an animation showing how I created the battery-looking State of Charge gauge shown above. The steps I went through can be summarized as:<\/p>\n

    \n
  1. Add a vertical gauge<\/a> to the model<\/li>\n
  2. Connect the vertical gauge to the signal of interest, the output of the Sine Wave block in this case<\/li>\n
  3. Select the gauge in the canvas and in the Property Inspector, click Edit Design in the Design tab<\/li>\n
  4. Remove the default needle image (my battery does not need a needle)<\/li>\n
  5. Replace the default background by a scalable vector graphics (SVG)<\/a> image. Note that I used Microsoft PowerPoint to create this image and saved it in SVG<\/a> format<\/li>\n
  6. In the Scale sub-menu, I disabled the ticks, span line, and labels, since I don't need those for my battery<\/li>\n
  7. In the Value Bar sub-menu, I used the Value Preview to see how the Value Bar looks for different values and I adjusted its dimensions to fit my background image<\/li>\n<\/ol>\n

    \"Creating<\/p>\n

    Example 2: Bouncing Ball<\/strong><\/p>\n

    For this second example, I created a gauge to animate our bouncing ball example<\/a>. After adding the Vertical Gauge and connecting it to the desired signal, I:<\/p>\n

      \n
    1. Replaced the default image with a \"ground\" on which the ball will bounce. As in the previous case, I created the SVG image using Microsoft PowerPoint and saved it in SVG format<\/li>\n
    2. Specified the desired color for the ticks, span line, and labels<\/li>\n
    3. Positioned and resized the scale<\/li>\n
    4. Replaced the needle image with a ball image I created<\/li>\n
    5. Confirmed that everything moves as expected using the Value Preview<\/li>\n<\/ol>\n

      \"Creating<\/p>\n

      Example 3: Gate Valve<\/strong><\/p>\n

      In this third example, I want to highlight how you can use a foreground image to create a mask on top of the value bar. This allows creating, for example, a circular hole that opens and closes. After adding the gauge and connecting it to a signal I:<\/p>\n

        \n
      1. Removed background image, needle image, ticks, span line, and labels<\/li>\n
      2. Positioned and resized the scale<\/li>\n
      3. Added a foreground image with a transparent hole<\/li>\n
      4. Confirmed that everything moves as expected using the Value Preview<\/li>\n<\/ol>\n

        \"Creating<\/p>\n

        Note that in all those examples I used Simulation Pacing<\/a> to slow down the simulation such that we can see the gauges being animated at a reasonable speed.<\/p>\n

        Now it's your turn<\/strong><\/p>\n

        Download my library of custom gauges from MATLAB Central<\/a> or Github<\/a>, or try creating your own custom gauges in MATLAB R2020b. Let us know how it went in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

        <\/div>\n

        This week, I have a gift for you!
        \nThanks to new capabilities added in MATLAB R2020b, I created a library of custom gauges that you can add to your Simulink models and published it to MATLAB Central...         read more >><\/a><\/p>\n","protected":false},"author":41,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[34,16],"tags":[607,605],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/posts\/9815"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/comments?post=9815"}],"version-history":[{"count":45,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/posts\/9815\/revisions"}],"predecessor-version":[{"id":10053,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/posts\/9815\/revisions\/10053"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/media?parent=9815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/categories?post=9815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/simulink\/wp-json\/wp\/v2\/tags?post=9815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}