5500SHAC - early thoughts, and how to make the visualisation less fugly?

Discussion in 'C-Bus Automation Controllers' started by Davin, Feb 20, 2019.

  1. Davin

    Davin

    Joined:
    Aug 24, 2016
    Messages:
    3
    Likes Received:
    2
    Location:
    Adelaide
    A few weeks after upgrading a Wiser1 to a 5500SHC, I'm mostly impressed, with a few exceptions....

    The PSU, which I'll come back to later.... but it's mostly that fugly visualisation interface. Damnnnn, green and purple? Just what I always wished for on our wall mounted 10" tablets.... the unwanted lovechild after the Schneider and Clipsal corporate colours got drunk at the office party, and knocked uglies on the photocopier. The face only it's engineer could love!

    For the PC/Tablet visualisation: I've started hacking away by replacing the unclear and crayon green icons, and made up a nice diffused sunshine and clouds background. But I take it you have to generate your own CSS to fix the purple from the menu on the left, increase menu size/position etc? I tried enabling FTP and seeing if I could pull out the existing CSS to modify, but it's all empty directories. I'm not sure if viewing the source in a web browser would give anything of use to rebuild an interface (I'm not a web guy). It's running BSD, so my sys admin/ web guy would no doubt know his way around by SSH'ing into the thing, but that seems like breaking in the back door of a $1300 device, when surely there's a front door already open?

    The Ryelec guys offer a $200 bundle of CSS, fonts, and icons, to fix the fugliness, but I'm not hooked on their vanilla option. It's much better than green and purple, but not $200 better, or quite what I want (judging by the limited examples). What is everyone else doing in to get the tablet visualisation looking appropriate for themselves and/or fussy, posh clients?

    For the Phone visualisation: nothing I've done seems to have any effect on the ugliness. All drab grey, next to that lovechild. Does anyone know if there's a way to customise this?

    OK, now the PSU. Back when I got this from my electrical wholesaler, I was surprised to find that there's no power supply included anymore. When paying $1300 (lets face it, that's $50 of hardware, and $1250 of R&D + multiple profit margins), it takes the shine off the premium experience that C-Bus is supposed to be. Paying Clipsal $120, or 2000% markup on a $10 PSU is rubbish. A trip to Jaycar for a $20 retail PSU isn't really part of the premium product experience either. Damn it, just bump the price $20, and include a PSU. Better still, Clipsal could just eat the cost of a $9 wholesale PSU, and genuinely differentiate themselves from all the the other Chinese made systems.

    As an owner, when I buy premium products, I don't take kindly to premium products trying to extort 1000% markups for something that should have been included. As a technology consultant, I have trouble recommending (with conviction) that a an expensive, incomplete, and ugly product, is a better proposition when compared to the endless cheap alternatives.

    Cheers
    Davin
     
    Davin, Feb 20, 2019
    #1
    ssaunders and Conformist like this.
  2. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    I posted this a while back

    I don't like the Purple colour on the Menus and buttons when switched on, found if I use the following code in Vis. Graphics --> Edit Custom CSS
    I was able to alter the colours in the interface. I change them to a Blue (#46638C)

    body,
    input,
    button,
    select,
    textarea {
    font-family: Arial, Helvetica, sans-serif;
    }
    .a {
    color: #46638C;
    }
    .a:hover {
    color: #ffffff;
    }
    .input-append .add-on,
    .input-prepend .add-on,
    .control-list,
    .touch .nav {
    border: 1px solid #ffffff;
    }
    .nav .a:hover,
    .dark .nav .a:hover {
    box-shadow: inset 0 0 1px 1px #ffffff;
    }
    .btn-info,
    .btn-success,
    .navbar-inner,
    .datepicker .active,
    .datepicker .active:hover,
    .nav .active .a,
    .nav .active .a:hover,
    .nav .a.active,
    .dark .btn-info,
    .dark .btn-success,
    .dark .datepicker .active,
    .dark .datepicker .active:hover,
    .dark .nav .active .a,
    .dark .nav .active .a:hover,
    .dark .nav .a.active {
    background-color: #46638C;
    background-image: -webkit-linear-gradient(#46638C, #46638C);
    background-image: linear-gradient(#46638C, #46638C);
    border-color: #46638C;
    box-shadow: none;
    }
    .btn-info:hover,
    .btn-success:hover,
    .btn-info:active,
    .btn-success:active,
    .toggler .btn-success,
    .dark .btn-info:hover,
    .dark .btn-success:hover,
    .dark .btn-info:active,
    .dark .btn-success:active,
    .dark .toggler .btn-success {
    background-color: #46638C;
    }
    .well,
    .modal,
    .popover {
    border: 1px solid #46638C;
    box-shadow: none;
    }
    .navbar-inner,
    .subtitle .current,
    .subtitle .previous,
    .dark .subtitle .current,
    .dark .subtitle .previous {
    color: #fff;
    }
    .subtitle .separator,
    .dark .subtitle .separator {
    color: #ddd;
    }


    If you want to just change the colour of the icons, they are just svg so can be edited in a text editor, and the colours change in there. If you use a batch file you can change the #colour of all the icon very quickly.

    Load of of the shelf power supplies available at reasonable price

    I like a very simple interface with my zen iPad farme
     

    Attached Files:

    lcrowhurst, Feb 20, 2019
    #2
    MarkB likes this.
  3. Davin

    Davin

    Joined:
    Aug 24, 2016
    Messages:
    3
    Likes Received:
    2
    Location:
    Adelaide
    Brilliant, thanks so much for that!

    I'd already tidied up the icons, but I didn't know where to start with the CSS, and that got me going to a great start! That seemed to tidy up both the Tablet and Phone versions.

    As for the PSU, I'd grabbed one from Jaycar straight after realising there wasn't one included any more. It wasn't the $20 extra cost that bothered me, but a premium priced product that's incomplete, doesn't give me the warm and fuzzies. Apple used to be a brand that well understood that a premium price could be had for a slightly above average product, if you get the experience right. Buying a $1300 iPhone in packaging whith hideous colours and no charger, wouldn't have gotten Apple to where they are.

    Anyway, a big thanks for the help.... super appreciated!
     
    Davin, Feb 20, 2019
    #3
  4. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    lcrowhurst, Feb 20, 2019
    #4
  5. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    I’ve been the jay car power supplies ever since the first wiser came out :)
     
    lcrowhurst, Feb 20, 2019
    #5
  6. Davin

    Davin

    Joined:
    Aug 24, 2016
    Messages:
    3
    Likes Received:
    2
    Location:
    Adelaide
    Yes, when I was searching the forums for anything 5500SHAC related, I didn't find your post with the CSS, but I did find the posts about your app. I figured it's inevitable that I'd be needing the app sooner or later.
     
    Davin, Feb 20, 2019
    #6
  7. Davin

    Dave_F

    Joined:
    Jan 18, 2019
    Messages:
    34
    Likes Received:
    2
    Location:
    Wellard_Perth
    Hi Laurence,

    Is all of this suitable for the 5500NAC as well? particularly the CTC wiser app?
     
    Dave_F, Feb 23, 2019
    #7
  8. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    Yep, works with both shac and nac
     
    lcrowhurst, Feb 24, 2019
    #8
    Dave_F likes this.
  9. Davin

    Hollywoodperth

    Joined:
    Sep 9, 2018
    Messages:
    38
    Likes Received:
    0
    I'm currently struggling to change the icon colours.
    I've opened the icon files in a word editor but didn't have much luck.

    Icrowhurst you mentioned a batch to change all the icon colours?
     
    Hollywoodperth, May 22, 2019
    #9
  10. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    I use a mac an the program I use is "araxis replace in files" https://www.araxis.com/replace-in-files/

    I then set the directory location of all the icons

    and then enter in the find the hex string of the colour to replace eg #009534
    and then enter in the replace the hex string of the colour to replace with eg #003795

    the start search
    maybe replace 1 to test, then replace all

    the above will replace the schneider green with blue

    upload_2019-5-24_14-36-50.png

    upload_2019-5-24_14-38-18.png
    upload_2019-5-24_14-40-47.png
     
    lcrowhurst, May 24, 2019
    #10
    MarkB likes this.
  11. Davin

    Shovelhead

    Joined:
    May 12, 2009
    Messages:
    16
    Likes Received:
    0
    Hi Laurence, feel like i'm missing something here. How did you create the slider. Add an object and the only option for getting a slider is pressing the button. How do I simply keep it on the screen.
    Thanks
     
    Shovelhead, Jun 11, 2019
    #11
  12. Davin

    Shovelhead

    Joined:
    May 12, 2009
    Messages:
    16
    Likes Received:
    0
    Hi, Forget it, colleague pointed out the show inline control tick box
     
    Shovelhead, Jun 12, 2019
    #12
  13. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    I had just come in here to tell you that, glad you found it
     
    lcrowhurst, Jun 12, 2019
    #13
  14. Davin

    12kk

    Joined:
    Oct 16, 2019
    Messages:
    6
    Likes Received:
    0
    Location:
    Geelong
    Hi, does any one know if it is possible to change the style of the slider.. make it look a bit more elegant.

    shac interface.png

    Want to make it look more like this ..

    slider.png
     
    12kk, Oct 22, 2019
    #14
  15. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    You should be able to do it with css

    I changed the background colour for RGB sliders, while I was working out how to do that i changed the slider shape and size.

    this is the code to change the colour to red



    .sliderR .progress {
    border: 1px #f00 solid;
    background-color: #f00;
    }

    .sliderR .btn-large {
    color: #f00;

    }

    then put slideR in the custom css of the slider



    I’m not in the office tomorrow , but will take look at the css Thursday , unless one of the other forum member can answer .

    https://www.instagram.com/p/B35kCcWgM6G/?igshid=1fxhazisd69x3
     
    Last edited: Oct 22, 2019
    lcrowhurst, Oct 22, 2019
    #15
  16. Davin

    chromus

    Joined:
    Jan 27, 2014
    Messages:
    422
    Likes Received:
    50
    Location:
    Perth
    Really beats me why they didnt go POE for these things, they did with WISER2.

    I have a client who wants me to code 1 for his new place, and I am currently trying very hard not to pull all my hair out.

    Awkward and cumbersome come to mind.
     
    chromus, Oct 22, 2019
    #16
  17. Davin

    12kk

    Joined:
    Oct 16, 2019
    Messages:
    6
    Likes Received:
    0
    Location:
    Geelong
    Thanks Laurence,
    Pointed me in the right direction. Tweaking it now. thanks heaps.
    My web development skills is very limited .. Inspect on Google Chrome does wonders.

    shac2.png
     
    12kk, Oct 22, 2019
    #17
  18. Davin

    Pie Boy

    Joined:
    Nov 21, 2012
    Messages:
    249
    Likes Received:
    31
    Location:
    New Zealand
    Take a look at
    http://danielstern.ca/range.css/#/
    you can alter the style/colour of the slider etc then copy the css although you do need to remove some of the css as it dosnt apply.
     
    Pie Boy, Oct 22, 2019
    #18
  19. Davin

    lcrowhurst

    Joined:
    Dec 2, 2004
    Messages:
    274
    Likes Received:
    98
    Location:
    Sydney, NSW, Australia
    With help from danielstern, thanks Pie Boy .

    here is an example to make a red slider

    .sliderR .progress {
    background: rgba(124, 86, 0, 0);
    border-radius: 25px;
    border: 1px solid #d01d00;
    margin-top: 10px;
    }

    .sliderR .btn-large {
    border: 1px solid #646464;
    height: 50px;
    width: 50px;
    border-radius: 7px;
    background: rgba(124, 86, 0, 0);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0px;
    color: #888077;
    }

    .sliderR .btn {
    border: 1px solid #646464;
    border-radius: 7px;
    background: rgba(124, 86, 0, 0);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0px;
    color: #888077;
    }

    .sliderR .slider-handle {
    height: 15px;
    width: 10px;
    top: 10;
    border-radius: 30px;
    background: #d01d00;
    border: 0px solid #ff0000;
    }
    upload_2019-10-23_17-15-41.png
     
    lcrowhurst, Oct 23, 2019
    #19
    MarkB and Damaxx like this.
  20. Davin

    BradJ

    Joined:
    Aug 6, 2004
    Messages:
    95
    Likes Received:
    0
    Sorry for the dumb question, how do I download / upload the stock icons so I can use re-coloured versions.
    I can’t see an option in the web interface and the ftp accounts just seem to be empty folders. ho w do I access the svg files so I can change the colours?

    thanks.
     
    BradJ, Feb 16, 2020
    #20
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.