Please login or register.

Login with username, password and session length
Advanced search  

News:

The X10Hub (PiX10Hub) is here! Created by the Community, for the Community.:)% #:)

Pages: [1] 2

Author Topic: IP Camera Orientation  (Read 514 times)

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
IP Camera Orientation
« 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 ?
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #1 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, ;)
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #2 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
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #3 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  ::) :'
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #4 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)
Logged

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #5 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.
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #6 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/
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #7 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.
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #8 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.
 >!
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #9 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.
 >!
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #10 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.
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #11 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.
 >!
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #12 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.
Logged

Tuicemen

  • Administrator
  • Hero Member
  • ****
  • Helpful Post Rating: 264
  • Posts: 9407
  • I don't work for X10, I use it successfuly!
    • Tuicemen Software
Re: IP Camera Orientation
« Reply #13 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
Logged
Please Read Topic:
General Forum Etiquette
Before you post!

Find extra info @ My forum

soxfan1966

  • Hero Member
  • *****
  • Helpful Post Rating: 1
  • Posts: 182
Re: IP Camera Orientation
« Reply #14 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.
Logged
Pages: [1] 2
 

X10.com | About X10 | X10 Security Systems | Cameras| Package Deals
© Copyright 2014-2016 X10.com All rights reserved.