I am to start building a project using an exported CAD drawing of our shop as the background.
What is best image file type to use? .jpg .pmg does it matter?
What is the best container to use or framework? Coordinate Container?
It’ll be buttons on top of the image to bring up popups that will display data about that machine. So making sure the buttons stay in place relative to the picture is important?
How are others doing these kinds of projects?
From the sounds of it, you should use a Coordinate Container with root.props.mode set to “percent”.
This could get a little complicated with your View sizing to different workstation viewport dimensions, so I would recommend that you take this View and embed it in some other Flex-y View so that you control how much the Image/View stretches if at all.
This would also keep the buttons in relative position to the background.
.jpg or .png shouldn’t matter, but obviously file size could cause problems depending on the user’s bandwidth/connection, so it’s up to you to balance definition vs size.
Thanks.
Is there away to set a containers background to an image.
Or you have to use an image component?
Yes, through style properties (aka, CSS):
If your image is already uploaded to Image Management, then just supply the path with url("/system/images/path/to/image.png").
Use backgroundSize: cover to make it take up the full size of the container.
Thanks man. I swear that wasn't there earlier. Lol
Generally I would always use PNGs for line drawings and images designed by vector programs, if you need to use a raster format. PNGs use a lossless compression, so you don't see artifacting that you would using a jpeg. You don't see PNGs used for photos however as their file sizes are much larger for images with high graphical complexity, and artifacting isn't really an issue for photos due to their nature.
JPG/JPEG on the other hand uses a lossy compression and while it's great for photos, it produces noticeable artifacts for vector-based work.
See comparison:
Could you add this parameter to the documentation? I can not find it here: Style Reference - Ignition User Manual 8.1 - Ignition Documentation