Announcement

Collapse
No announcement yet.

Create Custom round buttons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create Custom round buttons

    Hello,

    Does anyone knows how to create a round custom round button. I use Animated Button selection in Workshop 4 and create them. But they are
    rectangle. Is there anything like the Animated buttons, or User Buttons, or Fancy buttons selection but round.

    Thanks
    Bobby

  • #2
    Hi Bobby,

    You can do this by changing the transparency of your image.
    Please refer to the attached image.


    Click image for larger version

Name:	button.png
Views:	75
Size:	135.0 KB
ID:	67158


    Best Regards,
    Kevin

    Comment


    • #3
      Hello Kevin,

      I am using the VISI-GENIE environment. What screen do I use to change the transparency of the image. The Image List editor only allow me to
      select the image. There is no mention of transparency anywhere.

      Thanks
      Bobby

      Comment


      • #4
        Hi Bobby,

        You can use any graphics editor to render your images.
        I hope this helps.

        Best Regards,
        Kevin

        Comment


        • #5
          Hello Kevin,

          My application is getting so big and complicated that I forgot that I already had couple of the buttons round.

          Thanks Again

          Bobby

          Comment


          • #6
            I guess you have to activate "transparency" feature within your code too.
            "gfx_Transparency(ON); "
            and than set which color you need to be transparent.
            "gfx_TransparentColour(0xFFFF); //to let WHITE to be transparent."
            Note that every gfx_Cls() will set transparency setup back to OFF . Transparency is automatically turned OFF after each image or video command.

            In my experience I've shown a background image, than set the transparency ON (white color to be transparent) and than shown the "transparent" image (in my case a round gauge with outer part colored in WHITE)


            Code:
            gfx_Cls();
            img_Show(hndl,iImage2) ; //background image
            img_SetPosition(hndl,iImage1,img_xpos,img_ypos); 
            gfx_TransparentColour(0xFFFF);    
            gfx_Transparency(ON);             
            img_Show(hndl,iImage1) ;  //gauge shows
            transparent circular gauge

            Comment


            • John Kevin
              John Kevin commented
              Editing a comment
              Hi, you can also use 'User Image' widget to achieve a similar result.

              Best Regards,

          • #7
            I already figured it out.

            Thank You

            Comment

            Working...
            X