https://www.inductiveuniversity.com/videos/styles/8.0
Start here maybe…
And here…
https://www.inductiveuniversity.com/videos/anatomy-of-a-view/8.0
You could do this in a number of ways.
1 Like
This is the view json, although I would create a style for each of the labels as well:
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"width": 381
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"fontSize": "20pt",
"fontWeight": "bold",
"textAlign": "center",
"textTransform": "uppercase"
},
"text": "$ 1400"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Label_0"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"color": "#808080",
"fontSize": "10pt",
"marginTop": "5px",
"textAlign": "center",
"textTransform": "uppercase"
},
"text": "Earned"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Icon"
},
"position": {
"basis": "60px",
"shrink": 0
},
"props": {
"color": "#D7DDF4",
"path": "material/insert_emoticon",
"style": {
"marginTop": "5px"
}
},
"type": "ia.display.icon"
}
],
"meta": {
"name": "FlexContainer"
},
"props": {
"direction": "column",
"style": {
"classes": "Card"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"style": {
"backgroundColor": "#F7F8FD"
}
},
"type": "ia.container.flex"
}
}
Some CSS tools I use and have bookmarked:
Text shadow generator:
Box Shadow generator:
https://www.cssmatic.com/box-shadow
Transform cheat sheet.
https://www.w3schools.com/cssref/css3_pr_transform.asp
1 Like
Hi there! Our product design team at Inductive Automation is eager to speak with you to understand more about how you use our software. This will help us prioritize what types of features and opportunities should be considered, particularly your experience with drawing in Perspective (or lack thereof), in order to improve your user experience!
If this interests you, please feel free to schedule a feedback session (approx. 45-mins) with us here:
Thank you very much and we look forward to potentially speaking to you!
1 Like
@hpark
it would be very usefull if you could provide a layer feature.
- each shape will be associated to a layer.
- each layer could be visible or not when editing.
- each layer could be visible or not in runtime (a bindable property)
zoom feature if possible…
vision like shapes, union, intersect, fill color
snap to grid
and shape align, group
6 Likes
Any update on when drawing tools will be inluded?
They're meant to be available in 8.3.
1 Like
Just a thought, people are quite happy and well versed with Designer's drawing tool. Why not make this tool somehow generate SVG elements for its entire drawing elements and import them in Perspective instead of asking people to use a third party SVG tool like InkSpace etc? This will reduce the learning curve of people to use a different drawing tool as well as saving some time for IA to develop a new tool from scratch! It can as well be made a stand alone tool if required.
If you're talking about Vision's drawing tools, then comparing these to InkScape is like comparing Paint to Photoshop or Gimp (no offence to IA!!). Vision's drawing tools get you the barebones basics, but it's no comparison to a fully fledged drawing package in its functionality or its ease of use, but nor is it supposed to be. That's what a drawing package is for.
That being said, I believe the new drawing tools for Perspective are a huge leap from the drawing tools in Vision, so I'm excited to check them out.
I think the most painful part at the moment is editing SVGs that have lots of bindings. If for example you want to add or modify elements, it's a nightmare. Especially since moving elements around within the elements array is so damn hard if you've got bindings on the items within the elements, since bindings are tied to fixed indices and do not move when you move array indices around (major bug IMO). I really hope that this process is made a whole lot simpler in the new drawing tools and that they especially don't suffer from this major flaw!!
(e.g.
)
Just ignore this "It’s easy enough to work around," as it most definitely is not easy to work around if you have a complex structure
1 Like
Agreed, but producing SVG with bindings from vision's drawing tool could be a stop gap or a temporary solution to the present drawing tool issues IMO. Of course a drawing tool for SCADA cannot be compared with a CAD tool like AutoCad or an SVG editor like Inkscape. Somewhere one has to put a line. So I thought the Vision's drawing tool remains the front end for creating/editing the drawings to the user and it produces outputs for both Vision and Perspective (SVG). It was just a thought that came to my mind, don't know if it makes sense!