cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can subscribe to a forum, label or individual post and receive email notifications when someone posts a new topic or reply. Learn more! X

How to create a half progress gauge using the standard gauge widget?

S_Elsayed
7-Bedrock

How to create a half progress gauge using the standard gauge widget?

Hello

 

I would like to create a half progress gauge, using the standard gauge widget by changing the properties and style.

 

Could someone please tell me how I could create a gauge widget that looks similar to this:

S_Elsayed_0-1694613270268.png

Or this:

S_Elsayed_1-1694613703507.png

 

 

This is what I have so far with the standard gauge widget, and I am not sure where to go from there:

S_Elsayed_1-1694613332211.png

 

Thank you in advance.

 

ACCEPTED SOLUTION

Accepted Solutions
BharathB
12-Amethyst
(To:S_Elsayed)

Hi @S_Elsayed 

Follow the below Steps to achieve it.

 

1. Import the media entity that I have attached in this chat or save the below image and add to the Thingworx media entity.

BharathB_0-1694681767886.png

 2. In Mashup > Custom CSS Paste the below CSS and In the last line modify the media entity name from gaugeface1 to your media entity name which has been created by following step 1.

.custom_GaugeCls:before {

    content: '';

    position: absolute;

    width: calc(100% - 0px);

    height: calc(100% - 0px);

    background-size: contain;

    background-repeat: no-repeat;

    left: 50%;

    top: 50%;

    background-position: center;

    transform: translate(-50%, -50%);

    background-image: url(/Thingworx/MediaEntities/gaugeface1) !important; }

 

 3. Call the CustomClass name to the Gauge widget as shown below

BharathB_1-1694681767888.png

 

4. Update the other properties in the Gauge widget as mentioned below.

BharathB_2-1694681767889.png

 

BharathB_3-1694681767889.png

 

BharathB_4-1694681767890.png

 

BharathB_5-1694681767890.png

 

BharathB_6-1694681767890.png

 

BharathB_7-1694681767891.png

 

 Adjust the GaugeBorder to fit the tick size according to the height.

 

5. Change the Style properties as mentioned below.

BharathB_8-1694681767892.png

 

 Hope you find this helpful.

View solution in original post

3 REPLIES 3
BharathB
12-Amethyst
(To:S_Elsayed)

Hi @S_Elsayed ,

 

BharathB_0-1694616775446.png

You will need to use background media with custom CSS and apply it to the guage and make some changes in guage property.

 

Hi @BharathB 

Actually, what I would like to know is what changes should I make to the gauge to get the gauge that I want. Could you please tell me how to do so in steps?

 

Thank you in advance.

BharathB
12-Amethyst
(To:S_Elsayed)

Hi @S_Elsayed 

Follow the below Steps to achieve it.

 

1. Import the media entity that I have attached in this chat or save the below image and add to the Thingworx media entity.

BharathB_0-1694681767886.png

 2. In Mashup > Custom CSS Paste the below CSS and In the last line modify the media entity name from gaugeface1 to your media entity name which has been created by following step 1.

.custom_GaugeCls:before {

    content: '';

    position: absolute;

    width: calc(100% - 0px);

    height: calc(100% - 0px);

    background-size: contain;

    background-repeat: no-repeat;

    left: 50%;

    top: 50%;

    background-position: center;

    transform: translate(-50%, -50%);

    background-image: url(/Thingworx/MediaEntities/gaugeface1) !important; }

 

 3. Call the CustomClass name to the Gauge widget as shown below

BharathB_1-1694681767888.png

 

4. Update the other properties in the Gauge widget as mentioned below.

BharathB_2-1694681767889.png

 

BharathB_3-1694681767889.png

 

BharathB_4-1694681767890.png

 

BharathB_5-1694681767890.png

 

BharathB_6-1694681767890.png

 

BharathB_7-1694681767891.png

 

 Adjust the GaugeBorder to fit the tick size according to the height.

 

5. Change the Style properties as mentioned below.

BharathB_8-1694681767892.png

 

 Hope you find this helpful.

Announcements


Top Tags