Aurora hack [custom backgrounds for roomplans]

Post Reply
devros
Posts: 174
Joined: Saturday 29 October 2016 20:55
Target OS: -
Domoticz version:
Contact:

Aurora hack [custom backgrounds for roomplans]

Post by devros » Wednesday 13 June 2018 11:57

Hi all,
i did small hack, for great Aurora theme (thanks blauwebuis) to support custom colours and image backgrounds for different Room-plans. Im not coder so its not best way (its mostly copy+paste coding :), in current theme support would be probably hard to support it directly in theme setting.
This way you can customise even more css elements for different roomplan.
Few examples:
Image
Image

Instalation
Use latest Domoticz beta with Aurora theme

1. IMAGES
i did few png backgrounds (you can use mine or your files
PNG_files
PSD_files
copy background files to /Domoticz/www/styles/aurora-theme/images

2. SCRIPT
Edit /Domoticz/www/styles/aurora-theme/custom.js
change numbers and images to you roomplan numbers (you can check them with safari/chrome/firefox click on roomplan with right click and select inspect element and find right numbers in html.
You can also change colors..
here is my code:
line 1175 (function frontendImprovement())
add

Code: Select all

   // CUSTOM BACKGROUND
    $('#comboroom').change(function() {
        if ($(this).val() == '3') {
        console.log('obyvak');
         $('body').css('background-image', 'url(/images/cinema.png)')
         $('body').css('background-color', '#202020)')
    }
    if ($(this).val() == '4') { 
         $('body').css('background-image', 'url(/images/BGR.png)')
         $('body').css('background-color', '#003300')
    }
    if ($(this).val() == '5') {
        $('body').css('background-image', 'url(/images/Security.png)')
        $('body').css('background-color', '#660000')
    }
    if ($(this).val() == '6') { 
        $('body').css('background-image', 'url(/images/mereni.png)')
        $('body').css('background-color', '#000000')
    }
    if ($(this).val() == '7') { 
        $('body').css('background-image', 'url(/images/solar_BGR.png)')
        $('body').css('background-color', '#1a1a00')
    }
    if ($(this).val() == '8') { 
        $('body').css('background-image', 'url(/images/NIBE.png)')
        $('body').css('background-color', '#330000')
    }
    if ($(this).val() == '9') { 
        $('body').css('background-image', 'url(/images/cam.png)')
        $('body').css('background-color', '#202020')
    }
    });
3. CSS STYLING
Edit /Domoticz/www/styles/aurora-theme/custom.css and add something like this....

Code: Select all

html body{
    background-repeat: no-repeat!important;
    background-position: center bottom!important;
    background-size: 100% auto!important;
    background:none;
    opacity: 1!important;
    padding:0
    background-attachment: fixed;
    background-size: cover
}
when you make changes don't forget to clean appcache.
During testing I recommend use private mode in browser to prevent caching problems

Sorry about typos, English is not my main language :D
Btw i did some camera (for my xiaomi dafang cam) improvements in theme (built in movements button) if is someone interested

goransaler
Posts: 1
Joined: Thursday 07 September 2017 0:50
Target OS: -
Domoticz version:
Contact:

Re: Aurora hack [custom backgrounds for roomplans]

Post by goransaler » Monday 09 July 2018 20:58

Hi
Yes i am interested about camera movement buttons

Skickat från min BLA-L29 via Tapatalk


User avatar
remb0
Posts: 956
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Aurora hack [custom backgrounds for roomplans]

Post by remb0 » Tuesday 10 July 2018 18:03

is it an option to work together and implement this in the aurora theme?

blauwebuis
Posts: 336
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: Aurora hack [custom backgrounds for roomplans]

Post by blauwebuis » Wednesday 11 July 2018 11:42

It's hard to implement in a user friendly way because there is no file upload method. I guess it might be possible to store URL's to images on the web in a user variable. But that would not be very privacy friendly: the webserver would know everytime you use Domoticz.

devros
Posts: 174
Joined: Saturday 29 October 2016 20:55
Target OS: -
Domoticz version:
Contact:

Re: Aurora hack [custom backgrounds for roomplans]

Post by devros » Wednesday 11 July 2018 20:05

blauwebuis wrote:
Wednesday 11 July 2018 11:42
It's hard to implement in a user friendly way because there is no file upload method. I guess it might be possible to store URL's to images on the web in a user variable. But that would not be very privacy friendly: the webserver would know everytime you use Domoticz.
yes thats why its only hack, without some better domoticz theme support is imposible, or to add.

devros
Posts: 174
Joined: Saturday 29 October 2016 20:55
Target OS: -
Domoticz version:
Contact:

Re: Aurora hack [custom backgrounds for roomplans]

Post by devros » Wednesday 11 July 2018 20:10

goransaler wrote:
Monday 09 July 2018 20:58
Hi
Yes i am interested about camera movement buttons

Skickat från min BLA-L29 via Tapatalk
here is my screen how it looks (and works quite good). You can use arrows to move camera and C to send image (or whatever you want). Wanted to add more clever refresh image (without black image between refresing).
Image

i will prepare code give my some time :)

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest