I would like to dynamically scale an iframe that has a fixed width/height to fit into grafana panel with a dynamic width/height.
Maintaining aspect ratio would be nice, so just scaling to fit width or height is probably best.
Background info:
I want to stream some video data from an Axis IP Camera into a Grafana panel. Things are working, but I want the image to scale up when the user clicks on the panel.
http://CAMERAIP/axis-cgi/mjpg/video.cgi?resolution=854x480&compression=50&camera=1
In grafana, I'm using a text block on text mode of "HTML" and the video is streaming fine. The resolution is fixed, so if a user clicks on a panel (or just resizes it) to see a bigger image, they see the same size image, if I pick a bigger resolution, then the image is cropped if the panel is small.
Iframe code:
<p align="center">
<iframe scrolling="no" style="border: none" src="http://CAMERAIP/axis-cgi/mjpg/video.cgi?resolution=854x480&compression=50&camera=1" width="854px" height="480px"></iframe>
</p>
Changing the width/height of the iframe doesn't change the width/height of the image returned by the URL unfortunately.
(see some docs on the AXIS options for the mjpg stream here: https://www.axis.com/vapix-library/subjects/t10175981/section/t10051110/display
Related
First of all, sry for my English mistakes, I'm not a native English speaker.
I'm trying to make an UI which is composed of a canvas within different gameObject, and I would like that my canvas scales to the dimension of the screen but keeps its original resolution (16x9 portrait). If it is displayed on a tablet resolution (4x3) then an image is displayed in the space that is not covered by the canvas.
But actually all I've got is a canvas which scales to every resolution, and it changes the aspect of its child (for example a square becomes a rectangle).
Thank you for showing interest in my query!
UI's are heavy beasts. Canvas in Unity have a component attached to themm called Canvas Scaler which is set by default on Constant Pixel Size. You may try to set this property on Scale With Screen Size and then specify the base resolution you want to work with (usually 1920x1080 is a console standart). This is your first step
Then, to avoid strange Image scaling, you may check the property Preserve Aspect, this way the ration of the Sprite into your Image will remain the same indepently of the ratio of the Image
Last, you may play a bit with anchors but this is another story, you should let those at plain center at the beginning and come back to it when you will feel ready
Hope that helped ;)
Your canvas should have a component called Canvas Scaler. Here it should say Constant Pixel Size, change this to Scale With Screen Size and it should lock the Canvas to be the same width / height as the screen. If you want to lock an image to a specific width/height ratio, go to the Image component on the image and check the Preserve Aspect checkbox. This way if you have a 100x100 image, the images width will always be the same as the height. If you have a 200x100 image, the images width will always be twice the height, etc etc etc.
I'm trying to display images in a fixed size box (the grey area in the image here). When the submit button is pressed new images will be fetched from the internet. But the images will be different sizes.
So to prevent the "submit" button moving up and down due to different size images (and potentially having it off the screen) I'd like the images to fit inside the box. (I suppose there are a few options there, for example having the image resize to fit in the box or having the image be clipped and still fitting in the box.) I've been messing with containers and columns etc for ages but nothing seems to work.
what is the best way to fit images of different sizes into a fixed size box ?
The Image widget can have a height be specified. You can read more about that here
Currently I'm showing a single chart on my website in a responsive div, therefore it gets smaller as the screen width is decreased. My problem is: I'm saving an image of this chart but I need it to be always 700x400 even if my screen is 320x___.
lineChart.toBase64Image();
Is it possible?
My slides are different sizes, and orientations (some panoramas). I mean all are pics from a photo roll. Nearly all pics are bigger than the viewport in one way or another. I want them to be centered, have a correct aspect ratio, still have touch controls for iPhone, as well as the < > widgets (which go invisible by the way if the image is narrower than the width of the page) for desktop.
I can get full width, by specifying max-width in CSS. Full height is trickier. The "Full Width Slider" demo fixes height at 500px, and trial and error only allows me to change that to another integer number rather than a percentage.
So I'm struggling to tweak the right options, and set the right style/css inline in the HTML. Is there a better demo for me than "Full Width Slider" (http://www.jssor.com/demos/full-width-slider.html)
It'd be great to pinch-zoom into images that are larger than the viewport, but that's secondary to getting my "fit" issues sorted :)
Please set slider size to your screen size, and set $FillMode to 1.
To apply css tricks to set slider size, you can place jssor slider in a wrapper, and then scale the slider to available width of the wrapper.
See,
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(parentWidth);
else
$JssorUtils$.$Delay(ScaleSlider, 30);
}
Reference: jssor full height or full screen slider / possible?
I'm using fancybox 2.0.6 and trying to figure out a way to get the thumbnail strip to stay either relative to the current image- it needs to be more visible as opposed to the bottom of larger browser windows.
I've used the jquery.fancybox-thumbs.css to adjust the bottom: 120px which helps but if the browser window is smaller the thumbs obstruct the current image.
The only jquery options I've seen are "top" or "bottom".
Any thoughts on keeping it relative to the image without it changing on different sized windows?