CSS prooerties and transparent backgrounds

Discussions about product bugs & problems!
Note: This is no replacement for the Official ETM Support!
Search

Post Reply
13 posts • Page 1 of 2
a_scratch
Posts: 12
Joined: Thu Feb 09, 2012 3:40 pm

CSS prooerties and transparent backgrounds

Post by a_scratch »

Hi,

We've found a little problem using CSS properties on Embedded modules.

Currently, we're using a picture as background on the basePanel and the naviModule has to have a transparent background to be able to see the background picture.
There is no "Background color" property in the "Property editor" for the embedded modules so i tried using a CSS property "background-color: transparent;".

Now, both naviModule and mainModule are transparent but ... we are experiencing troubles with the background color of the tooltips and buttons.
They are black and we can't see the text.

if I remove the CSS property, it works normally.

Is there any solution to have transparent modules and visible tooltips / buttons ?

Thank you.

User avatar
fmulder
Posts: 330
Joined: Wed Feb 03, 2010 9:46 am

Re: CSS prooerties and transparent backgrounds

Post by fmulder »

Why not use 'addSymbol()' instead of using a module. A symbol has no background by itself.

Example:
You could add your whol process panel to a screen using addSymbol(). You could also remove it using removeSymbol().

Hope this helps you

Frenk

jfily
Posts: 20
Joined: Wed Feb 05, 2014 10:59 am

Re: CSS prooerties and transparent backgrounds

Post by jfily »

Hi,

I can now reply with my account since it was approved by ETM.

Thank you for this function (I didn't know it exists, I just started with WinCC OA) but ...

When I use Panel Topology, it creates 3 modules :
- naviModule
- infoModule
- mainModule


I have to use embedded modules ...

I want to be able to see the background image set in the basePanel to avoid using several background images in my other modules.

User avatar
msuda
Posts: 18
Joined: Mon Oct 17, 2011 2:31 pm

Re: CSS prooerties and transparent backgrounds

Post by msuda »

Hi,

it is possible to set the background color of the loaded panels in the module transparent. Then you'll see the background of the main panel. And all Shapes of the loaded panel are normally visible.

I hope that this will help you.

Kind regards
Martin Suda

User avatar
fmulder
Posts: 330
Joined: Wed Feb 03, 2010 9:46 am

Re: CSS prooerties and transparent backgrounds

Post by fmulder »

I tried the module with a transparent background. But it doesn't make the module transparent ????
I've never seen a transparant module.

The panel toploogy is 'married' to the modulenames 'naviModule', 'mainModule' en 'infoModule'. When you step away from the standard topology buttons, then you'll have to make the entire navigation by yourself.

I do not use any of the topology buttons (But do use the sumalerst being generated by topology).

If you step away from the mdoules, then you could use the script function addsymbol() to build up a screen (instead of using 'RootPanelOnModule' ). This may give you greater flexibility but will take some work.

Frenk

jfily
Posts: 20
Joined: Wed Feb 05, 2014 10:59 am

Re: CSS prooerties and transparent backgrounds

Post by jfily »

Hi everybody and thank you for replying.

Never seen a module with transparent background before ? There it is ! Look at the picture I attached to this message.

I tried to root a transparent panel in a module, it doesn't work as expected (look at the picture).

In this test, tooltip text is okay in the first module but not in the second one.

I can't understand why ...

Link to the picture

User avatar
fmulder
Posts: 330
Joined: Wed Feb 03, 2010 9:46 am

Re: CSS prooerties and transparent backgrounds

Post by fmulder »

I see you are using the Qt stylesheets to set the transparancy of the module. AND you have set the background of the panel to transparant.
I didn't know that you could use Qt styling to do something like this.

Nice tip.

Can't help you with the tooltips !

Frenk

jfily
Posts: 20
Joined: Wed Feb 05, 2014 10:59 am

Re: CSS prooerties and transparent backgrounds

Post by jfily »

I guess i'll have to code my own tooltip function and avoid using PUSH_BUTTON object.

User avatar
msuda
Posts: 18
Joined: Mon Oct 17, 2011 2:31 pm

Re: CSS prooerties and transparent backgrounds

Post by msuda »

Have you tried to configure the tooltips also via Stylesheets?


This is an example of a tootip configuration in css

QToolTip
{
border: 1,5px solid darkgrey;
background: rgb(235,240,255);
padding: 3px;
border-radius: 3px;
opacity: 240;
}

jfily
Posts: 20
Joined: Wed Feb 05, 2014 10:59 am

Re: CSS prooerties and transparent backgrounds

Post by jfily »

Thank you for this tip.

I tried it and this is the result : Result

Colors are working in the non transparent-background module but not the transparent one ...

WinCC OA help said
The color and background colors of a tool tip cannot be set ...
(wrong ... I just did it ...)

And also
If a tooltip must be shown for a transparent frame inside the frame also, use the code this.fill="[solid]"; for the Initialize script of the frame.
(I wrote it everywhere and still doesn't work ...)

Post Reply
13 posts • Page 1 of 2