Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[soxfan1966]

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 ?

[Tuicemen]

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,

[soxfan1966]

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

[Tuicemen]

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 

[soxfan1966]

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)

[soxfan1966]

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.

[Tuicemen]

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/

[soxfan1966]

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.

[Tuicemen]

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.
 

[Tuicemen]

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.
 

[soxfan1966]

Sounds good, thanks.  I had a long day at work so did not get a chance to look at this today.

[Tuicemen]

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.
 

[soxfan1966]

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.

[Tuicemen]

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

[soxfan1966]

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.