X10 Community Forum

📱🖥️PiX10Hub ( Always Evolving Open Source) => 🏥Help and Trouble Shooting => 🧞HomeGenie ⛑Help => Topic started by: soxfan1966 on April 17, 2019, 06:13:37 PM

Title: IP Camera Orientation
Post by: soxfan1966 on April 17, 2019, 06:13:37 PM
I have 3 IP cameras and they all show up in the HG App great.  Two of them are set up in landscape mode and one of them in portrait mode.  However, they all show up in HG (both the app and in my browser) as landscape.

So the one that is setup as portrait, I have to tilt my phone to see it oriented right.

I tried playing with the Mir and Flip settings but that just changes the image so its not upside down or backwards.

What i want is to display the image in portrait mode for one camera.

Any way to do that ?
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 17, 2019, 06:37:41 PM
I've not tried that but it sounds like a good Idea for the phone app at least.
The generic camera app may be able to do this with some code modification I'll have a look and see if I can find away to do this easily, ;)
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 18, 2019, 07:12:56 PM
So I did some investigating today using my browser - I got the camera image to display and then used Chrome's Inspect tool to see the HTML code that was generated.

I did some google searches and found that adding this:
transform:rotate(90deg)

to the img tag rotated the image just as I was hoping.   Here is the HTML that displays the image correctly:

<img style="-webkit-user-select: none;cursor: zoom-in; transform:rotate(90deg)" src="http://192.168.1.241/snap.jpg?JpegCam=0" width="981" height="552">

I tried looking at the Generic Camera program code in HG but I did not see anywhere it was building the img tag (I bolded the part I added to rotate the image).

Maybe that info will be useful to someone that knows how to incorporate it into the HG Program
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 19, 2019, 11:23:36 AM
I believe a new widget may need to be created for this if the camera API isn't sending the picture rotated how you wish.
If the camera is sending the view in the orientation you want you can edit the existing widget adding the option to resize to a portrait  using the zoom button. (done that) ::) :'
I've been meaning to create a new widget for camera display with some added functions  like going to presets but not got to it yet! :-[
Since I've now got some experience with building widgets I may get to it quicker now  ::) :'
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 20, 2019, 11:56:41 AM
I tried playing around with this some more last night with no luck.  I think it's doable, just not certain how to implement it in HG.

If you had a new Widget, I was thinking that there would be some field to define portrait or landscape and that would be used to rotate (or not) the image.

I may play around with this some more today (rainy and pretty much open schedule for me this early afternoon)
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 20, 2019, 02:44:51 PM
So I played around with the HG Program "Generic IP Camera" and the associated Widget "homegenie/generic/camerainput" and think I found a way to get it to work but as I'm a novice with JavaScript / HTML (not to mention HG) I am not sure of the best way to implement it.

So in the Program "Generic IP Camera", on the Startup Code tab, I added this:
AddFeature("Media.IpCamera", "Sensor", "IpCamera.Orientation", "Orientation (Blank for Landscape, 1 for Portrait)", "text")

under the line for the URL.  I was aiming for a sort of toggle - off for regular display, on to rotate 90 degrees (which is basically what I need)

I wanted to then incorporate this new field, which I believe would be referenced as IpCamera.Orientation, to alter the Style attribute for the image in the Widget on the HTML Tab.

In the "homegenie/generic/camerainput" Widget, on the HTML tab, on line 4 is this:  ** See the Side note below on how I found this line if you are interested.
style="background-color:black;width:100%;height:172px;cursor:pointer;"

If we want to rotate the image 90% then this line would need to be:
style="background-color:black;width:100%;height:172px;cursor:pointer;transform:rotate(90deg);"

So that brings me to where I am now.  It does not appear it is as simple as adding an IF statement in the HTML code to display one version of style or the other based on the IpCamera.Orientation field (or even better to add the transform part or not based on this).

Sounds like it needs to be done as part of the javascript - like is done for the:
data-ui-field="camerapicturepreview"

So I am trying to figure out how to add a new variable / data-ui-field in the javascript to populate with one or the other of the style lines and then use that new variable in the HTML code for the the style part of line 4.

*Side note - while in HG on the Widget editor you can click the "bound to device" dropdown and pick one of your entries.  I did this for camera with the image I wanted to rotate, and then clicked Run / Preview.  That displays my camera in the preview window.  In Chrome (and likely other browsers, but I'm not certain) if you then right click with the mouse on the image and chose Inspect from the dropdown it will display in a side panel the HTML code that is running.  Moving your cursor over a line in the HTML code displayed will highlight the associated part of the web page it corresponds to.  This is how I found the line of code in the widget that needed to be modified.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 20, 2019, 07:06:40 PM
I don't think you need to add an option to the program code you should be able to do it all from a new widget.
create a new button simular to the stretch button. javascript code add the on click info and put in the code to rotate 90 degrees
something like this may then be possible
http://jsfiddle.net/SabrinaSun/w4fnzra8/
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 21, 2019, 08:06:25 PM
Gave this a try - unfortunately my knowledge of JavaScript and HTML is a tad limited and trying to understand how the example provided could be integrated into the widget just was not happening.  Was trying to figure out which Div the button needed to be defined with (I had it showing above, below or not at all in my testing).

And then how to associate the button and the image to take the action on also was not working - I could get the button to appear but clicking it did nothing.

Not sure if the difference was also that the example uses a static image whereas the widget is constantly updating it - doesn't sound like it should but I'm not sure.

If I get more time later this week I can give it another try.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 21, 2019, 09:30:50 PM
I started to play with adding presets for my camera widget and though I'd take a stab at this.
I can rotate the whole widget or just the camera image.
this will rotate your camera image for portrait orientation
Code: [Select]
$$.field('camerapicturepreview').css({'transform': 'rotate(90deg)'});you can add this to the sizetoggle on click function
To return to landscape orientation the code would be
Code: [Select]
$$.field('camerapicturepreview').css({'transform': 'rotate(0deg)'}); or make a new button or tie it to a camera.orientation option.
 >!
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 22, 2019, 09:18:57 PM
I just about got the bugs worked out of my pre-set adds to this, so I'll attempt to see if I can do this with a  "Orientation (Blank for Landscape, 1 for Portrait)" feature.  This would not require using a button to switch the orientation or any additional code added to the  Ip Camera program.
 >!
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 22, 2019, 10:05:34 PM
Sounds good, thanks.  I had a long day at work so did not get a chance to look at this today.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 23, 2019, 06:04:40 PM
Here's a sample of the Orientation I've got using the button press method.
I believe using the feature may yield better results but I may be wrong. I've yet to get that part working.
 >!
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 23, 2019, 06:41:59 PM
Looks good.   I was having trouble getting the additional button on the menu bar when I was trying too - looks like you got that working too.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 23, 2019, 06:49:09 PM
Ya adding the buttons was not  to difficult figuring out, how to get all the ones I wanted require a bit of work. Resizing  and changing the order Camera Names appear. has opened up a lot more room. It has also added more rom for camera names lengths
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 23, 2019, 08:07:59 PM
I tried playing with it some more this evening with no luck.  I can get it to rotate with the JavaScript you posted a few entries go but my if/else condition is not working.
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 26, 2019, 09:21:36 AM
Tried another pass at this over the last few days.

Rather than a button, I was still trying to use a new field in the Program definition.

So in the Program "Generic OP Camera" I added this on the StartUp Code tab:
.AddFeature("Media.IpCamera", "Sensor", "IpCamera.Orientation", "Orientation (Blank for Landscape, 1 for Portrait)", "text")

(added under the entry for the Url)

That results in a new field on the device appearing and I have entered a value of 1 in the camera I want to rotate the image on, leaving the other two cameras with a nil in that field.

Then in the Widget "homegenie/generic/camerainput" I added this on the JavaScript tab just above the code that is setting the Url:
   // Set the Orientation
  var Orient = $$.module.prop('IpCamera.Orientation');
  if (Orient > 0) {
  $$.field('camerapicturepreview').css({'transform': 'rotate(90deg)'});}
  else {$$.field('camerapicturepreview').css({'transform': 'rotate(0deg)'});}

It does not seem to be getting / setting the value of the variable Orient as it does not conditionally apply the rotation - if I switch the  else to use 90deg in place of 0deg then it applies the rotation to all of the cameras.

So I think there is something amiss with my logic - but I am not familiar enough with JavaScript nor how the connection between the program for the widget and the widget itself is handled to be able to get it to work at this point.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 26, 2019, 01:07:46 PM
I never had much luck using features in the IP camera program either however since your specifying text as the input you should be watching for text not a decimal value in the widget.
If I get some time I'll play a bit more with this.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 26, 2019, 03:00:49 PM
Ok I now have this working roughly. :)% I think why I couldn't get it working correctly before is HG service required a restart for this.
here's what I have thus far:
Program "Generic OP Camera" add  this under the StartUp Code tab:
Code: [Select]
.AddFeature("Media.IpCamera", "Sensor", "IpCamera.Orientation", "Type True for  Portrait)", "text")in the widget Java script tab add just above the  line $$.field('sizetoggle').on('click', function(){
Code: [Select]
var orientate = $$.module.prop('IpCamera.Orientation').Value;
 if (orientate !='True')$$.field('camerapicturepreview').css({'transform': 'rotate(0deg)'});
  else  {$$.field('camerapicturepreview').css({'transform': 'rotate(90deg)'});
   $$._widget.css('width', '172');
     $$._widget.css('height', '286');
      $$.field('camerapicturepreview').css('height', '300');
      $$.field('camerapicturepreview').css({'transform': 'rotate(90deg)'});
      $$._widget.data('enlarged', true);
        }
this will set the orientation and size the widget However you still need to edit the sizetoggle on click code as well as refresh code to get things working smoohly.
Currently if you change the Orientation setting for the camera you need to refresh your browser You Also need to restart the HG service for the widget code to get loaded.
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 26, 2019, 06:51:47 PM
OK, I think I got it working

I changed my prior new field in the program from a text field to a slider like this:

.AddFeature("Media.IpCamera", "Sensor", "IpCamera.Orientation", "Orientation (0 for Landscape, 1 for Portrait)", "slider:0:1:0")

And in the JacaScript code for the Generic IP Camera Widget, just above the // set the camera image url line I updated my code like this:

  // Set the Orientation
  var Orient = $$.module.prop('IpCamera.Orientation').Value;
  if ($$.module.prop('IpCamera.Orientation').Value > 0) $$.field('camerapicturepreview').css({'transform': 'rotate(90deg)'});
  else $$.field('camerapicturepreview').css({'transform': 'rotate(0deg)'}); 

I believe the problem with the code I posted earlier today was that I was missing the .Value at the end of the var = Orient line (which I noticed based on your last post)

So when viewing HG on my desktop pc with Chrome, the camera I have defiend with a 1 in the Orientation field displays vertical and the others still appear landscape.

I restarted the HG service and reloaded HG in my browser to make sure it still is working as I expected (I also exported copies of the Generic IP Camera program and Widget for backup purposes).

Only think now is in the Android App (full version) they are not appearing as they do in the browser but still all landscape - not sure if I need to update the program and widget in the app somehow ?
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 26, 2019, 07:02:18 PM
Yep the slider route will work as will the checkbox option you just have to watch for correct values and refresh.

The android app is a total other ball game. It doesn't like customized widgets however a reload of the app devices will sometimes allow things. The old app is less forgiving and usually accepts custom widgets as it uses a web style viewer
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 26, 2019, 07:15:53 PM
I will play around with updating the widget on the app tomorrow.  My Weather Alerter is missing too so I think I need to toggle that after I took a HG update earlier this afternoon.
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 27, 2019, 06:01:53 PM
I uploaded my Pro IP Camera program which has the portrait option, pre-sets, and snapshot options to the scripts section.
This way you can focus maybe on some other options. ;)
Title: Re: IP Camera Orientation
Post by: soxfan1966 on April 28, 2019, 08:11:44 AM
Thanks.  Been working in the house this weekend (wallpaper removal yesterday and painting today) so will give it a whirl later this week.

How do I update the widget to use your program in place of the standard one?
Title: Re: IP Camera Orientation
Post by: Tuicemen on April 28, 2019, 08:32:05 AM
The widget is installed same as that for Weather Alerter and Status Info widgets.
It doesn't update the current Generic Camera widget nor does it update the current Generic Camera program code.
Both those get over written on every update so all your code would be lost. Since these (Pro camera widget & program) won't get overwritten any modifications you do to them will remain with updates.  >!
Title: Re: IP Camera Orientation
Post by: soxfan1966 on May 01, 2019, 07:34:25 PM
I just installed the new program and widget - and then set up my IP cameras to use the new widget.  Works Great.  Thanks