Hi guys, I’m trying to understand how is possible to create a gauge like this. I create the background using css code, but I have no idea about how to create the transition of the gauge and the button to move around it.
Thanks for the help!
Are you talking about in Perspective or Vision?
Based off your mention of CSS, I am guessing Perspective.
I don’t have an immediate answer without having to dig into module development territory, but @nader.chinichian may have an idea.
Also would this include the ability for the user to interact with it? Or is it purely a read-only gauge?
I actually realized that this could be done through creating the SVG and then using some fancy transforms to move the pointer around. I just also am not an expert there.
I question the usefulness of the gauge. I’ve looked at it for > 20 s and still am not sure if it’s a gauge or a setpoint control and what the “finger knob” represents. I think there are much clearer gauges than that and if that is part of a group of such components I think your display would be very difficult to read and interpret. Linear indicators are much easier to interpret and compare than rotary.
Clarity >> cool looking.
2 Likes
For dragging handler you have to use module creation bit for other part yes SVG and CSS is more than enough. Dragging 8s something that is impossible to do by python with decent performance.
I'm sorry, yes I'm talking about Perspective.
The picture is about an App of a known brand, I didn't want to insert the full picture because I don't know if is allowed.
However in the top is shown the setpoint and I guess that the cursor is to increase/decrease it. In the middle I guess there is the actual value.
Yes you are right, I'm playing with a home app to manage the temperature and it looks nice, but if is too difficult (or as you say not too clear) I guess that is the case to change approach.
@nader.chinichian, first of all I congratulate you for your home automation project, is simply amazing. It start to be complicated at this point, I have to decide another nice way to manage the setpoint.
Would quite a bit of work if its just for a home project
how about a slider?
https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Slider
I'm just looking about it! It could be a good compromise.
About the slider, probably I'm looking in the wrong place but I can't find a soluzione here in the forum... In the menu "labels" there's no "style" to change the it.
I see that there's the style property outside the "labels" but if I change it (for example the size of the font, nothing change; instead if I change the fontFamily or the fontWeight the labels changes.
For example I change the fontSize to 100 and it's not working
does seem like it doesnt work.
you can inject this into a styleclass, isnt to hard: note it will be for every slider in the gateway, but i guess that wont matter for you.
paste this into the backgroundimage prop of a new styleclass
}.ia-slider .slider-mark-text { font-size: 30px !important;}{
1 Like
If you need it to apply only to this particular slider, you can select the style class you’re making instead of the general slider element. You’ll need to prefix it with psc- though:
} .psc-sliderSize .slider-mark-text { font-size: 30px !important;}{
1 Like
Thank you guys for the help, I’m not good with perspective, I’ve started to use it a few day ago.
Using this code in a NewStyle it works
}.ia-slider .slider-mark-text { font-size: 30px !important;}{
About this
} .psc-sliderSize .slider-mark-text { font-size: 30px !important;}{
I tryied to add it in the same NewStyle and call under the menu style > classes the name NewStyle but probably I’m wrong.
Another question about the slider, is possibile to increment the size of the line and the dot? I’m sure I’m looking in the wrong place, but I really can’t find any properties about it.
That's because the name of your style and the selector don't match.
In the example I gave, the name of the class was sliderSize, and so the selector was .psc-sliderSize.
You'd have to use .psc-newStyle, but REALLY you should change your class name. If you start having things called newStyle you'll get lost quick and waste incredible amounts of time.
I suggest you take some time to figure out a naming scheme for everything, and STICK TO IT.
I also suggest you use a restricted set of characters for your names, I usually stick to [a-z][0-9]_ (and use snake_case) or [a-z][A-Z][0-9] (and use camelCase). I also try to actually avoid using [0-9] though an occasional digit is fine.
You are absolutely right, I started just to make some tests but now I have first of all to watch some tutorial about how to manage properly styles and then focus on them as you suggest. I'm working with Vision and I've never used them so I'm not very on the point, but with perspective everything is so different.
About the slider, in your opinion is possible to modify its properties? It looks like is so poor about external changes ( size of line, dot ecc ).
I have no idea and no ignition access on this computer so I can’t check.
If there are no built-in options to customize it, you can try putting a slider on a page and opening it in a browser to examine its html. If you can see its components, then you can select them and style them with css.