A part of camera image on site

[buuuudzik]

Hello,

maybe somebody has an idea how to embedded on site only a part of camera image? E.g. On a camera I have a whole view of the garden. In camera menu I want show whole view from this camera but near a button which opens a doors I want show only a smoller part with this doors. The same I want do with outdoor gate.

[mlaudren]

Hi,

If I understand, you want to crop the image stream from a camera to display only a part of the image when you click on some button?
Don't know if it's possible.
Maybe you can hack it by applying a css filter so you hide partially the image. But don't how to do it.

[buuuudzik]

Yes, now I am preparing such solution by hiding some part by CSS and if must be JS. Idea is to have this sight without any button.

This is what I've prepared but there is some problem with adding transform parameters. Console log shows on this line "image.css is not a function". Maybe somebody has some advice?

Code:

// Camera preset
$(function(){

function preset_image(){
box = $('.rolety_w0');
image = box[0].children[0];

box.attr("width","264");
box.attr("height","512");
image.css({'transform': 'scale(1.5) translate(-100px -100px)'});
 }
 
// On load execution
$('.rolety_w0').load(function() {
preset_image();
});  
 
// Check for changes on value of item with rolety_w0
$(".rolety_w0").bind("DOMSubtreeModified",function(){
preset_image();
});
 
});

[Erwin van der Zwart]

Hi,

I have used this before:

Give your camera container the custom class 'cam' and make shore to check the box 'always open'

Custom css:

Code:

@-webkit-keyframes Zoom-In /* Safari and Chrome */
{
0%   {opacity:0.5;}
100% {opacity: 1;  width: 100% !important; height: 100% !important;}
 
}

.camzoomin{
 -webkit-animation: Zoom-In 1s !important; /* Safari and Chrome */
 transform-origin: top left;
 position: absolute;
 left: 0px !important;
 top: 0px !important;
 height: 100% !important;
 width: 100% !important;
 max-height: 100% !important;
 max-width: 100% !important;
 overflow: hidden;
 z-index: 100!important;
}

.cam > img {
 border-radius: 10px;
 border-color: #333;
 border-width: 2px;
 border-style: solid;
}

.camzoomin > img {
 position:absolute !important;
 top: 5% !important;
 left: 5% !important;
 width: 90% !important;
 height: 90% !important;
 border-radius: 20px !important;
}

and custom Javascript:

Code:

$(function(){
 
 $(document).ready(function () {

    $('.cam').on('vclick', function( e ) {
       if ($(this).hasClass('camzoomin')){
         $(this).removeClass('camzoomin');
       } else {
         $(this).addClass('camzoomin');
         $(this).find("img").attr('src', $(this).find("img").attr('src') + '?' + Math.random() );
       }
    });
   
 });
 
});

BR,

Erwin

[buuuudzik]

I've already prepared such function.

1. Image (with camera source) can has any Height x Width. It depends what part of camera image is important for you. If e.g. you want have a little image of doors or some light it can be 56x56px.
 
2. Image must has Additional class e.g. "Gate_View".

3. In Custom CSS you must add this two sections:

Code:

.Gate_View {
width: 320px;
height: 150px;
overflow: hidden;
}


.Gate_View > img {
position: absolute;
left: -320px;
top: -100px;
height: 1024px !important;
width: 960px !important;
max-width: none !important;
}

But you must change below parameters for your need:

".Gate_View" parameters changes the box for your camera image(how much big your camera image will be on site, should be the same as in the editor).

".Gate_View > img" parameters changes your camera image(zoom and position in the box).

Below I attached sample result.