I used a gauge object to create animated clock hands to overlay on a Client’s logo.
Is there a way to eliminate the center circle at the hand arbor? It is too large.
Also, there is a grey line extending from the hand arbor up to the 12 o’clock position. Is it possible to eliminate that?
You’ll have to tell us if it’s Perspective or Vision?
Sorry, Ignition 8.1. Perspective. I hope I formatted the code correctly:
[
{
"type": "ia.chart.gauge",
"version": 0,
"props": {
"startAngle": -90,
"endAngle": 270,
"outerAxis": {
"maxValue": 12,
"width": 16,
"color": "#D5D5D500",
"ranges": [
{
"start": 0,
"end": 0,
"width": 0,
"color": "#D5D5D500"
}
],
"needle": {
"reach": 75,
"color": "#000000"
},
"tickMarks": {
"color": "#C0C0C000",
"thickness": 0
},
"data": "value",
"percentRadius": 75,
"show": true
},
"innerAxis": {
"maxValue": 60,
"width": 1,
"color": "#C0C0C000",
"ranges": [
{
"start": 0,
"end": 0,
"width": 0,
"color": "#77b6d800"
}
],
"needle": {
"color": "#000000"
},
"tickMarks": {
"color": "#C0C0C000"
},
"data": "secondaryValue",
"percentRadius": 85,
"show": true
},
"animate": true,
"backgroundColor": "#C0C0C000"
},
"meta": {
"name": "Gauge_1"
},
"position": {
"x": 0.0885,
"y": 0.0213,
"height": 0.1,
"width": 0.8143
},
"custom": {},
"propConfig": {
"props.secondaryValue": {
"binding": {
"config": {
"fallbackDelay": 2.5,
"mode": "direct",
"tagPath": "[TNC_Provider]SJEC/CTRL/MINUTES"
},
"type": "tag"
}
},
"props.value": {
"binding": {
"config": {
"fallbackDelay": 2.5,
"mode": "direct",
"tagPath": "[TNC_Provider]SJEC/CTRL/HOURS"
},
"type": "tag"
}
}
},
"events": {
"dom": {
"onClick": {
"config": {
"params": {},
"view": "SCREENS/TNC WRF/LOGINS"
},
"scope": "C",
"type": "nav"
}
}
}
}
]
Close, but you've formatted it as a quotation, not a code block. Please see Wiki - how to post code on this forum and then edit to fix. I've added the Perspective tag below the title.
I popped your code into a view and launched it in a browser, press F12 (Developer Tools) and use the Inspect Tool to highlight the dot.
The circle starts with a radius of 5. If you edit the HTML you can play with the size. Making the value larger will increase the size of the dot. Making it smaller works until you get to 5 again and it doesn't get any smaller. The minimum value must be hard-coded.
Okay, how would I go about hard coding that? I’m afraid you are way above my head with some of the things you are talking about.
Sorry, the vendor has hard-coded it which means that it can't be overridden by us. I had a quick look to see if it could be made transparent but I couldn't see a way.
Developer Tools is built into nearly all modern browsers. You can use it to debug web pages. Hit F12, click the Inspect button on the top left and then hover around the web page. Click on the object of interest and you will see the HTML and CSS code.
You can use CSS to adjust the scale rather than overriding the radius!
.psc-hidecircle circle{
/* If you want to hide entirly */
/* visibility: hidden;*/
/* I think this looks better with a little roundness*/
scale: 0.5;
}
Add the class hidecircle to the gauge
You guys have no idea how much I just learned in a few of your responses. I have a long way to go with Ignition.
Can the vertical gray line be eliminated the same way?
It’s a bit of a hack in the CSS, the lines don’t really have any special classes or positions to target with a selector. So, we can simply grab the exact path data as our selector.
.psc-hidecircle path[d=" M0,0 L0,-101.32 "],path[d=" M0,0 L0,-89.4 "]{
visibility: hidden;
}
Thanks. I can find that object and select it in developer tools, but how are you getting -101.32 and -89.4? I see the below. There is probably a ton more I need to learn to understand this. Do you have any recommendations on getting started?
d: path("M 0 -6.8 L 0 3.2");
It looks like the arms are being dynamically generated. If you change the size of the gauge then the path changes.
In that case you can substitute the path with your own (and never change the size)
Or you can actually use pseudo selectors with conditions like first child of type g etc.
It might end up looking like a pretty crazy selector. I can give it a try when I get some time.
I’m not proud of this, I’m certain there is a more elegant way of representing the CSS selector. However, it seems to work on any sized gauge.
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(5) :first-child :first-child :first-child :first-child :first-child :nth-child(2){
visibility: hidden;
}
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(3) :first-child :first-child :first-child :first-child :first-child :nth-child(2) {
visibility: hidden;
}
.psc-hidecircle g[role="region"] :first-child :first-child :first-child :first-child :first-child :first-child :first-child :first-child :nth-child(2) :first-child :first-child :nth-child(3) :first-child :first-child :first-child :first-child :first-child :nth-child(4) {
visibility: hidden;
}
That’s definitely a CSS hack if I ever saw one. Well played.
Nice! I may have missed that possibility in some other cases.
