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

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

 

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

 

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!

 

Also if you are using an iPad/iphone , I have written an app that, makes it easier using the wiser on them

https://itunes.apple.com/au/app/ctc-wiser/id1330538372?mt=8

 

I’ve been the jay car power supplies ever since the first wiser came out

 

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.

 

Hi Laurence,

Is all of this suitable for the 5500NAC as well? particularly the CTC wiser app?

 

Yep, works with both shac and nac

 

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?

 

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

 

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

 

Hi, Forget it, colleague pointed out the show inline control tick box

 

I had just come in here to tell you that, glad you found it

 

Hi, does any one know if it is possible to change the style of the slider.. make it look a bit more elegant.



Want to make it look more like this ..

 

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

 

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.

 

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.

 

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.

 

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;
}

 

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.