Aurora hack [custom backgrounds for roomplans]

[devros]

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:



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
Btw i did some camera (for my xiaomi dafang cam) improvements in theme (built in movements button) if is someone interested

[goransaler]

Hi
Yes i am interested about camera movement buttons

Skickat från min BLA-L29 via Tapatalk

[remb0]

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

[blauwebuis]

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]

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]

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).


i will prepare code give my some time

[goransaler]

Hi
That is looking great

Skickat från min BLA-L29 via Tapatalk

[devros]

Hi
That is looking great

Skickat från min BLA-L29 via Tapatalk

sorry forgot to post code..
here is:
first edit dashboard_camera_previews.js
first replace your cam IP adress (im using xiaomi dafang, but with some modification it should work with others that have cam rotation support)

Code: Select all

function prepareCameraPreviews()
{
    $('#bigtext a[href*="ShowCameraLiveStream"] ').each(function(){
        var item = $(this).closest('.item');
        item.addClass('camera');
    });
    $('section .span4:nth-child(-n+3) .item:not(.keepclear) .bigtext a[href*="ShowCameraLiveStream"] ').each(function(){ //img[src~="' + camera + '"]
        var href = $(this).attr('href');
        var cameraidx = href.substring(href.lastIndexOf("','")+3,href.lastIndexOf("')"));
        console.log(href + cameraidx +"COTOJE");
        // console.log("camera ID = #" + cameraidx);
        var item = $(this).closest('.item');
        item.addClass('keepclear');
        item.find('.status').before('<div class="cameraPlayButtons"><button class="playpause playing"></button>'); //<br/><br/><span class="play" style="display:none">playing</span><span class="pause"></span></div>');
        item.find('.playpause').click(function(){
            $(this).toggleClass('playing');
            if($(this).hasClass('playing')){
                startcamera($(this));
                $(this).closest('.item').addClass('keepclear');
            }else{
                item.find('tr').css('background-image','none');
                $(this).closest('.item').removeClass('keepclear');
            }
            return false;camera
        });        
        startcamera($(this));
        $("#light_603 #name span").after('<div id="left" class="ovladani">←</div><div id="right" class="ovladani">→</div><div id="up" class="ovladani">↑</div><div id="down" class="ovladani">↓</div><div id="preview" class="ovladani">C</div>');
        $( "#left" ).click(function() {
         $.get("http://XXXXXX/json.htm?type=command&param=switchlight&idx=605&switchcmd=Set%20Level&level=10");
         startcamera($(this));
        });
        $( "#right" ).click(function() {
         $.get("http://XXXXXX XXXXXX XXXXXX/json.htm?type=command&param=switchlight&idx=605&switchcmd=Set%20Level&level=20");
         startcamera($(this));
        });
         $( "#up" ).click(function() {
         $.get("http://XXXXXX/json.htm?type=command&param=switchlight&idx=605&switchcmd=Set%20Level&level=30");
         startcamera($(this));
        });
         $( "#down" ).click(function() {
         $.get("http://XXXXXX/json.htm?type=command&param=switchlight&idx=605&switchcmd=Set%20Level&level=40");
         startcamera($(this));
        });
         $( "#preview" ).click(function() {
            javascript:ShowCameraLiveStream('kamera','1');
        });
    });
}

function startcamera(cameraimg)
{
    var item = $(cameraimg).closest('.item');
    var href = item.find('.bigtext a[href*="ShowCameraLiveStream"]').attr('href');
    var cameraidx = href.substring(href.lastIndexOf("','")+3,href.lastIndexOf("')"));
    var newHREF = '/camsnapshot.jpg?idx=' + cameraidx + '&dtime=' + Math.floor(Date.now() / 1000);
    item.find('tr').css('background-image', 'url(' + newHREF + ')').fadeIn("slow");
    setTimeout(updateCamImage, 100);
    function updateCamImage() {
        if(currentPage == "dashboard" && item.find('.cameraPlayButtons .playpause').hasClass('playing')){
            console.log("THEME JS - grabbing new camera image for #" + cameraidx);
            var newBG = 'background-image: url(/camsnapshot.jpg?idx=' + cameraidx + '&dtime=' + Math.floor(Date.now() / 1000) + ')!important;background-size:70%!important;background-position: center!important;background-color: black!important;background-repeat: no-repeat!important;overflow: visible';
            //console.log(newBG);
            item.find('tr').attr('style', newBG).fadeIn("slow");
            setTimeout(updateCamImage, 20000);
        }else{
            console.log("camera: no longer updating image.");
            item.find('tr').css('background-image','none');
        }
    }
}
            // .fadeIn( "slow" )var newBG = 'background-image: url(/camsnapshot.jpg?idx=' + cameraidx + '&dtime=' + Math.floor(Date.now() / 1000) + ')!important;background-size:70%!important;background-position: center!important;background-color: black!important;background-repeat: no-repeat!important;overflow: visible';

now some cosmetic css code
add to custom.css

Code: Select all

#leva {color: #03a60d !important;}
.ovladani {margin-left: 5px; display: inline-block; cursor: pointer; background-color: #000000; width: 20px;  height: 20px;/*!important;*/ text-align: center; vertical-align: middle; line-height: 20px; border-radius: 50%; opacity: 0.5; }
.ovladani:hover {opacity: 0.9; }
.span4 {opacity: 1; }

.item.camera .bigtext span img {
visibility: hidden;}

then it should work

[goransaler]

Thanks alot i will try that

Skickat från min BLA-L29 via Tapatalk

[goransaler]

Hi @devros
I dont get it to work
Some questions

In dashboard_camera_previews.js

The idx 605 is that a dummy switch selector

And at the end of the text to add to custom. css

.item.camera .bigtext span img {
visibility: hidden;

I dont see } at the end



Skickat från min BLA-L29 via Tapatalk

[devros]

sorry i forgot about dummy sensor....
you have to create one
here is screenshot


also on end css is missing }

[goransaler]

Thanks

Skickat från min BLA-L29 via Tapatalk

[Salammbo]

Hi,
I would like to use 4 more cameras the same way. Will that work just by editing the scripts?
Thank you