Hi Everyone,
I am looking for Data Center Demo Project resource to download. But I can't find it on the exchange. Can someone help me and share the link please?
Hi @ahad99.shalwani did you got the backup link for this project? If so, could you pl share the link here. It will be very helpful. Thanks
You might check this link for the demos as I believe they try to keep this updated.
I thought I heard IA say they were posting that the beginning of next year, but I could be misremembering.
Ok thanks for your information
Ok michael i have checked the same link but data center project yet to be uploaded i guess
Hi all, I would also like to have the project file for this if possible, but I don't think it has been uploaded yet.
1 Like
i'm also curious
The interface looks very similar to the Pan Zoom iFrame Ignition Exchange resource: Ignition Exchange | Inductive Automation
As far as the SLD is concerned I'd guess they imported the necessary SVGs into Perspective and added onClick action handlers to every one.
1 Like
I've also been curious to see the project download for this one to compare/contrast with our own approach.
Regarding pan zoom: IMO the iframe perspective session load inside the data center demo's SLD page is a deal breaker for me, and the reason I don't use the IA-released pan zoom container available on the Exchange. A good (but paid) alt that bypasses this iframe session load is the BIJC Zoom Pan Container. Zoom Pan Container - BIJC Module Support
Regarding SLDs or diagrams in general, embedded views are your friend. Build a component library of small views that can be indirected at a tagPath root. Don't even bother with pipes in perspective. Embedded views can live on top of a SVG frame, or you can even use resizable embedded views for buswork or other background elements. We often have to flip flop between Figma and Perspective for SVG backgrounds, a major headache in our current workflow. I'm hoping the 8.3 drawing tools replace this need.
We have a utility project which parses another project's filesystem and view json, then converts embedded views into view canvas instances. Once your embedded views are created via a single view canvas, you are suddenly unbound to the actual view that's rendering your diagram, and you can further indirect or dynamically generate your diagrams including SLDs. It's quite powerful.
3 Likes
@Fran_Dujmovic that's exactly what it was. Thank you! I have it working now.
@msteele Thank you for the suggestion. I'm willing to trade off that loading screen but I did notice that as well. Regarding your advice on SLDs, I am pretty new to Ignition but I understand your advice. Although that last bit about that conversion utility is a little unclear to me.
My next concern is figuring out the graphics portion of this. I'll look into Figma, as I now need a program to create the SVGs. If anyone has examples they would be willing to share I would appreciate it!
1 Like
I think Inkscape is a good choice, it's completely free and open source. You can also do pretty much whatever you need in it.
If you create a layered SVG in a vector design software, you can reuse that template in all of your SLDs - for example breakers, valves etc.
1 Like
Ok so I've been able to set up most of the project. I have also been able to create graphics using Inkscape, thank you @Fran_Dujmovic!
But I have gotten stuck at the following:
The demo project shows the tabs on top with buttons in the top right corner that take you home, opens an alarm popup from the bottom, and opens a login popup.
I am using the Tab Container for this and am unable to implement these features. Am I missing something so it's still possible with a tab container? Or did they maybe use a header with a horizontal menu like in the perspective template?
The reason I'm doubting it is because the tabs change color when they're active. Both the text and the icon. I understand this can be done manually, but the tab container does this automatically, which would be nice to have.
Never mind, I gave it some more thought and what I did was:
- Create a new coordinate container
- Put an embedded view pointing to the tab container
- Put buttons that will perform the actions I want over top the embedded view
If anyone does have a better suggestion, I would appreciate it!
Now I'm gonna try and find out how to make that nice alarm popup come up smoothly from the bottom 
Yeah a tab container isn't the best option if you want to replicate the demo project.
What you described works and is a solid option, however when I was playing around with the demo project I did the following;
- Create a flex container view
- Drop in 2 vertical additional flex containers inside the main flex view
- Set the size of the 2nd subflex container to cca 1/4 of the view and set the "grow = 1" property of the 1st subflex container
The 1st flex container would contain the buttons to navigate between different views and the 2nd flex container would contain the icons. I then played around with CSS to make the nav menu look appealing.
What I did was I created a bottom docked view where I put my alarm status table and put an onClick action handler on my icon. I set the popup action to "toggle" so it replicates the demo project. I also set up an identifier to specify which popup I want to toggle, i.e. "alarmTable".
2 Likes