With how obtuse perspective has been for me so far, I am not surprised by this, picture attached below. I tried all the other aligns too, this is clearly not the center as the C is at the edge and the P is no where near, wtf. if anyone knows why this happening I would appreciate that, thank you.
You can use CSS props like align-items: center on the object containing the text.
You should be able to add your own style prop using the plus icon and type in this CSS prop, with center as the value.
Also, consider using the Advanced Stylesheet and create custom classes with a lot more CSS options.
Copy and paste the component into here and format it as shown in Wiki - how to post code on this forum. We can then reproduce the problem and possibly find the problem and solution.
And what component is having this problem? A label? Markdown? Something else?
Please keep the conversation polite.
Perspective has a learning curve for sure, since its technology is wildly different to most "normal" hmi software, including Vision, but once you get the hang of it going back to Vision is a drag...
2 Likes
It is not a learning curve but just needlessly complicated in most aspects in my opinion. When i center align something, it should just align in the center. The tab container should function properly without dragging my own coordinate container into each tab first. Hiding buttons based on who is logged in was needlessly complicated. For the life of me I cannot understand why there isnt just a level indicator like in vision! and there have been 10s of other things that are like this. I am trying to embrace ignition but perspective has been very clunky for me, and I shouldn't have to experience a "learning curve" for simple things such a push button toggling a boolean, password protection, and format transforms with °F in my opinion.
[
{
"type": "ia.input.text-area",
"version": 0,
"props": {
"text": "Phosporic Acid",
"style": {
"textAlign": "center",
"borderStyle": "solid",
"borderTopLeftRadius": 0,
"borderTopRightRadius": 0,
"borderBottomLeftRadius": 0,
"borderColor": "#8B8585",
"borderWidth": 2,
"overflowWrap": "normal"
}
},
"meta": {
"name": "TextArea"
},
"position": {
"y": 18.98,
"width": 80,
"height": 65
},
"custom": {}
}
]
I agree with you on this one! °C all the way!
Not sure what you mean here, you can just use isAuthorized along with the security level, or better, read canWrite from the tag and use that instead
There's the progress component and the analogue level indicator, although I did create my own since I don't like the look. The progress component is similar to the vision component though and can be styled however you want with css props Perspective - Progress | Ignition User Manual
Ignition isn't in total control in Perspective, unlike Vision. Perspective has to deliver what browsers need/expect, and it is those that are needlessly complicated. But users want browser operation, and Perspective is the easiest way to get that (not easy, just easiest, from a controls background).
And Vision is expected to continue working for the foreseeable future, so use it if you like.
yes and I used the that for the fill level on tanks, but vision has the cutaways and you can group the items then do the difference and then put the fill level behind all that and it looks great, perspective literally has the tank cutaways but wont let you take the difference or have a level indicator.
I understand, yes I would like web functionality so perspective is the way I am going for this project but I do not see myself continuing to use it unless necessary.
It looks like you're running up against the left padding of the text area component. Unfortunately setting padding for text area doesn't seem to do anything.
1 Like
Examining with a browser Development Tools (F12) reveals the following:
- The green box indicates the padding that has been applied to the component.
- It's 8px all around.
- It is set in by CSS
ia_textAreain the theme.
In other words, the Text Area component width is too narrow for your text so it overflows on the right (as shown by the 'c' in the green margin).
You can fix the problem by overriding the theme by adding the following into the Text Area component's PROPS:
style.padding-left : 0px
sytle.padding-right : 0px
Alternately, make the Text Area wider.
The stylesheet appears to set the padding to 0.5rem. See the article below for more on that.
Rem in CSS: Understanding and Using rem Units — SitePoint.
1 Like
this was extremely helpful thank you. Yes sadly just resizing it wasn't an option as i have over 10 tanks, i'm trying to fix across 800px and still be legible. I am not extremely familiar with css, so it appears I have a lot of reading to do. This worked and is centered well now, thank you.
Your mention if 800px and coordinate containers scares me a little... in general, designing for specific pixel sizes like that is an antipattern and you're just asking for trouble (what if a future OS/browser/etc update gives you fifty less pixels)?
If you're making the classic "here's a roughly skeumorphic picture of the whole facility at a glance" HMI page, by all means use a coordinate container, but outside of that you're ultimately better off using (nested) flex containers or another approach that's less restrictive. BIJC also has a Pan/Zoom container available as an add-on module that sidesteps the problem with fitting a coordinate container with a fixed aspect ratio on a 'too small' device:
2 Likes
These two statements are at odds with each other; Perspective requires some level of CSS knowledge to become proficient in it and to make it enjoyable to work in, but this has a learning curve for most integrators. Styles and CSS are synonymous in Perspective
This goes against ASM HMI standards though, but it can be made fairly easily with an SVG.
Perhaps not helping to entice you more to Perspective, but an SVG with a simple square in it can have a style added to it to turn it into a simple level using clipPath: inset(0 80% 0 0) which will clip the top by 80% down, and leave 20% level showing - just bind to this and you have a dynamic level. You can use this to then create whatever levels you want, however you want. This works for complex shapes e.g. cutaway as well. It's easy to cherry pick and be frustrated and say "this other software has this in-built and simple! why doesn't Ignition??", but if you take Ignition as a whole and compare it to other software, there's no comparison; Ignition takes the cake and eats it too. Some things are made simple, others are possible but need a little massaging - but 9 times out of 10 you can actually do what you want to do which is not the case in a lot of other SCADA platforms; you can do what you can do and nothing more.
Perspective may not have all the functionality you want by default, but there is a lot you can do with CSS. Some will like having this flexibility at the expense of time involved in building up your own resources, others just want a [insert SCADA-which-cannot-be-named-else-I'll-get-in-trouble here aka the Win10 Paint of the SCADA world] which is simple and easy to use, but has very limited capability and flexibility. Some want a mixture. It's impossible to cater to all 
4 Likes