Put an Icon on top of Icon for Grarge Door Opener Button

Discussion in 'C-Bus Automation Controllers' started by wilma288, Apr 25, 2020.

  1. wilma288

    wilma288

    Joined:
    Nov 30, 2010
    Messages:
    11
    Likes Received:
    0
    Location:
    Dunedin
    Hi all was wondering if someone out there had a solution for this issue I have.

    First Icon is a Doors Status Button
    Set up as follows
    Vis Parameters (Toggle, Tags, Instantaneous)
    Object Settings
    Read Only (Ticked)
    Hide Background (TIcked)
    No Widget
    Icon and Value (Connected to a reed switch via bus coupler show open when not closed)
    On Icon Shows garage_open_1.svg Icon
    Off Icon Shows garage_closed_1.svg Icon

    Second Icon
    Set ups follows
    Vis Parameters (Bell Press, Tags, Instantaneous, Preset Value: 255-100%)
    Object Settings
    Read Only (Un Ticked)
    Hide Background (Ticked)
    No Widget
    Icon
    On Icon Shows empty.svg Icon
    Off Icon Shows empty.svg Icon

    What I want to do is place the Second Icon (empty.svg) over the top of the First Icon that way it acts as a push button to open the garage door, the first button sits underneath this and gives visual indication if the door is open or not.

    Problem is out of the four sets of buttons I have made for these doors only one set shows the empty ICON on top when I click it.
    How can I make sure the buttons / Icons for each door is grouped correctly, used to be easy in PICED you just sent the image to the front or back as required but don't see an option for this in the SHAC

    Cheers Mark
     
    wilma288, Apr 25, 2020
    #1
    1. Advertisements

  2. wilma288

    tassiebean

    Joined:
    Dec 24, 2018
    Messages:
    21
    Likes Received:
    6
    Hi Mark,

    Paste the following into the Custom CSS file, and save:

    /* CLASSES TO FIX ABOVE-BELOW z-index PROBLEMS */
    .front1 {
    z-index: 100 !important;
    }

    Then, for the Second icon make sure you type front1 (no dot in front of it) into the Additional classes: field. This forces the Second icon to display above the First icon. Not sure whether it solves your problem (depends exactly on what you've done), but fingers crossed. Note that this may actually fix the problem on the real user screen, but it may still display incorrectly in the Visualisation screen. That seems to be an annoying aspect (bug) of the software that when you edit things (change icons, font colour, etc) it doesn't always change in the Visualisation screen even though it does actually change it in operation.

    Regards, TB
     
    tassiebean, May 6, 2020
    #2
    wilma288 likes this.
    1. Advertisements

  3. wilma288

    wilma288

    Joined:
    Nov 30, 2010
    Messages:
    11
    Likes Received:
    0
    Location:
    Dunedin
    Hi TB
    Just tried that and it works a treat thanks.
    As you said suspected it doest show correctly on the Visualisation Screen but does in operation.

    THe other way I found to do it was to create the object you wanted on top first, this sort of worked but then if you had to make a change to it for some reason, when you saved and reloaded it the object seemd to be placed on the bottom.

    Your way works much better thanks

    Cheers Mark
     
    wilma288, May 7, 2020
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.