Dear ScadaBR Developers and Users,
We are running ScadaBR 0.9.1
We are trying to produce a custom view with relative positioning of elements, so that the graphical view may be viewable on displays for which it was not optimized (i.e. it should scale on resizing).
I created a toy graphical view with a button and found the corresponding <div> element. I noticed the style field inside the div element:
<div> id="c4" class="selectable" onclick="markViewComponent(this, event);" style="position: absolute; left: 394px; top: 114px; z-index: 0;" >
Now I wanted to ask if someone already thought on / implemented already a relative positioning feature. If not, could you give me hints or tips on where to look next? I am thinking of something along the lines of style="position: relative; ...". But then this is not relative to window size but to its "normal" position AFAIK... I would like to get more familiar with Mango and web development in general by solving this problem.
Ideally, there should be the ability to set the positioning from the settings editor in p.u. (per unit), e.g. x=0.5, y=0.6, z=0 relative to the current browser window size. As it is now, there are three forms for absolute positioning in the simple point settings editor.
If I was more proficient in JavaScript and knew the Mango system better I would also consider calculating the positions on the fly after the window has been resized, i.e. update absolute position values for each view component (?).
Please let me know if you know a way / have a good hint for me.
Best Regards,
Michael
Hello Michael,
This is a great issue. We have not yet thought in this feature, but it will be added to our trac =]
Ok, yes, there is a way for you to cheat the ScadaBR editor into creating a relativistic behaviour for some components. As you must have notived, ScadaBR creates for each component a div with an id and it is sequential. Simple as that, just add a html component and edit different css properties for each components div.
css can be tricky, so use some !important tags when needed and feel free to ask around.
I guess this can be your hint.
Good Luck, and keep us apart.
Diego, thanks for the comment and hint. I will check out the css route.
If anyone else could give me a lead on where (and then roughly how) this could be implemented by changing the settings editor, I would try to solve this task. I would commit my solution afterwards, of course.
For completeness, I also created the trac ticket.
Michael
Hello Michael,
Absolute positioning is set by the ViewEdit.jsp file in ScadaBR source code. It can be changed in code, but I guess the best practice would be editing the componentes creating, adding a checkbox for relative/absolute positioning and storing this info in DB. The ViewEdit.jsp would then get this from component DB info and set as configured.
You could also use a trick with html component, adding a css stylesheet thats resets "cX" components css by its id. Something like
<style type="text/css">
#c1 {
position: relative !important;
}
</style>
As the component id is always set as cX where X is the DB id for the component, you can check which components would be set as relative and conifugure manually in the view;
Good Luck!