jssor slider responsive code works but doesn't restore when browser width is full - jssor

jssor is very nice slider! It is working well for a dynamically generated images. Thank you for the great tool. There is only one problem that remains.
The width of the slider container is 640px and I wanted the container to resize when the external container div becomes small. I does it well to diminish the image as desired. However,
1. when I resize the browser again and make a new image search. The slider occupy the entire external div width. So it only appear filling the entire area more than 640px width.
2. The responsiveness doesn't work on mobile devices. I tested in chrome and android browser both in android devices.
The codes I was using
Code 1:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
Code 2:
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
if ( $(window).width() > 900 ) {
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
}
}
//Scale slider after document ready
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
//Capture window resize event
$(window).bind("resize", ScaleSlider);
}

Please scale the slider no more than 640 in width.
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $("#slider1_container").parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
}
}
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);

Related

Displaying image from device in ionic

Let's say I have an image under file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1542035689920.jpg path. Is it possible to display this image in <image> tag just by assigning .url property? Probably not, if so are there any good solutions to do it? I'm trying to do a thumbnail of an image in the list, the way I've done it is to read an image as base64, convert it with the usage of canvas then display it. Problem is it takes too much time to render all the images.
ionViewDidLoad() {
this.defectImages.forEach(defectImage => this.loadThumbnail(defectImage.url))
}
loadThumbnail(url) {
return this.fileProvider.getDefectCachedImage(url)
.then(data => {
return this.generateFromImage(data, 400, 400, 0.5, thumbnail => {
let image = document.getElementById(url) as any;
image.src = thumbnail;
})
});
}
showImage(url: string) {
this.photoViewer.show(this.fileProvider.getCacheFolderPath() + url, '', {share: true})
}
generateFromImage(img, MAX_WIDTH: number = 700, MAX_HEIGHT: number = 700, quality: number = 0.5, callback) {
var canvas: any = document.createElement("canvas");
var image = new Image();
image.onload = () => {
var width = image.width;
var height = image.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
// IMPORTANT: 'jpeg' NOT 'jpg'
var dataUrl = canvas.toDataURL('image/jpeg', quality);
callback(dataUrl)
};
image.src = img;
}
It is working but working too slow. I have noticed PhotoLibrary package but as far I know it access to the shared memory and my pictures are being held in app only space.
This is the issue with the latest webview. The latest webview is not allowing the local resources to load. It was working fine on Ionic 2. Though not an optimal solution, I'm pasting the solution that worked for me.
ionic cordova plugins rm cordova-plugin-ionic-webview
ionic cordova plugins add cordova-plugin-ionic-webview#1.2.1
cordova clean android
And you can build(ionic cordova build android) the app and test it.

How to Display WebcamTexture as Full Screen on Android Portrait Mode?

I am trying to display full screen Webcamtexture on android Portrait mode.
but when i am building and testing it on my device its rotated and videoRotationAngle is 90
I am using RawImage as a texture. I have seen on some post that you have to rotate the transform and get the right angle. But the problem is that if I rotate RawImage UI it will no longer full screen view.
var camImage:UnityEngine.UI.RawImage;
var baseRotation:Quaternion;
var webcamTexture:WebCamTexture;
var rotation:UnityEngine.UI.Text;
function Start () {
webcamTexture = new WebCamTexture(Screen.width,Screen.height);
camImage.texture=webcamTexture;
camImage.material.mainTexture = webcamTexture;
webcamTexture.Play();
rotation.text= webcamTexture.videoRotationAngle.ToString(); // to check the angle
}
I know this is late reply but may help someone facing similar issues.
If you are using RawImage as a Texture, below code should help you achieve the rendering both in Potrait and Landscape mode.
Just ensure that you set "Aspect Mode" in "Aspect Ratio Fitter" of Raw Image to "Width Controls Height" or "Height Controls Width" (whichever is larger based on orientation)
Code Snippet
using UnityEngine;
using UnityEngine.UI;
using System.Linq;
using System.Collections;
public class DeviceCameraController : MonoBehaviour
{
public RawImage image;
public AspectRatioFitter imageFitter;
//set it to either FRONT or BACK
string myCamera = "BACK";
// Device cameras
WebCamDevice frontCameraDevice;
WebCamDevice backCameraDevice;
WebCamDevice activeCameraDevice;
WebCamTexture frontCameraTexture;
WebCamTexture backCameraTexture;
WebCamTexture activeCameraTexture;
// Image rotation
Vector3 rotationVector = new Vector3(0f, 0f, 0f);
// Image uvRect
Rect defaultRect = new Rect(0f, 0f, 1f, 1f);
Rect fixedRect = new Rect(0f, 1f, 1f, -1f);
// Image Parent's scale
Vector3 defaultScale = new Vector3(1f, 1f, 1f);
Vector3 fixedScale = new Vector3(-1f, 1f, 1f);
void Start()
{
// Check for device cameras
if (WebCamTexture.devices.Length == 0)
{
Debug.Log("No devices cameras found");
return;
}
// Get the device's cameras and create WebCamTextures with them
frontCameraDevice = WebCamTexture.devices.Last();
backCameraDevice = WebCamTexture.devices.First();
frontCameraTexture = new WebCamTexture(frontCameraDevice.name);
backCameraTexture = new WebCamTexture(backCameraDevice.name);
// Set camera filter modes for a smoother looking image
frontCameraTexture.filterMode = FilterMode.Trilinear;
backCameraTexture.filterMode = FilterMode.Trilinear;
// Set the camera to use by default
if (myCamera.Equals("FRONT"))
SetActiveCamera(frontCameraTexture);
else if (myCamera.Equals("BACK"))
SetActiveCamera(backCameraTexture);
else // default back
SetActiveCamera(backCameraTexture);
}
// Set the device camera to use and start it
public void SetActiveCamera(WebCamTexture cameraToUse)
{
if (activeCameraTexture != null)
{
activeCameraTexture.Stop();
}
activeCameraTexture = cameraToUse;
activeCameraDevice = WebCamTexture.devices.FirstOrDefault(device =>
device.name == cameraToUse.deviceName);
image.texture = activeCameraTexture;
image.material.mainTexture = activeCameraTexture;
activeCameraTexture.Play();
}
// Make adjustments to image every frame to be safe, since Unity isn't
// guaranteed to report correct data as soon as device camera is started
void Update()
{
// Skip making adjustment for incorrect camera data
if (activeCameraTexture.width < 100)
{
Debug.Log("Still waiting another frame for correct info...");
return;
}
// Rotate image to show correct orientation
rotationVector.z = -activeCameraTexture.videoRotationAngle;
image.rectTransform.localEulerAngles = rotationVector;
// Set AspectRatioFitter's ratio
float videoRatio =
(float)activeCameraTexture.width / (float)activeCameraTexture.height;
imageFitter.aspectRatio = videoRatio;
// Unflip if vertically flipped
image.uvRect =
activeCameraTexture.videoVerticallyMirrored ? fixedRect : defaultRect;
}
}
Let me know if you face any issue.
Well you have two options: you could either pick portrait or landscape and block screen rotation, or you could automatically rotate your object and stretch it according to the screen boundaries. See Screen.height and Screen.length for more info.
(mCamera.videoRotationAngle + 90) % 360 will rotate the texture properly, then assign a localScale that swaps the height and width of the texture to fix the size.
You need to flip and rotate it. If you something like CameraCaptureKit (https://www.assetstore.unity3d.com/en/#!/content/56673) you will see there is diffirent ways of achieving what you want. In CameraCaptureKit there is a customized RawImage component that essentailly fiddles with the UV coordinates of the RawImahge instead of roatting it. That way you can rotate the image 90 or 270 and flip it without worring if the phone is running in landscape mode or what ever.

JSSOR multiple sliders - broken responsive

I have two JSSOR sliders working except the responsive part only works for one slider.
Even duplicating the responsive code does nothing. Anyone have any ideas?
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
var jssor_slider2 = new $JssorSlider$("slider2_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
For all the code the website is http://garyedwardrotter.com and the portions with the sliders are in the photography section. Just the first two are setup right now and I have used the same exact code/slider setup for both.
Any help is very appreciated, thank you.
Please replace
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
with
if (parentWidth) {
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
}
The answer I found was to repeat this code for the amount of sliders you will be using:
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));
else
window.setTimeout(ScaleSlider, 30);
var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider2.$ScaleWidth(Math.max(Math.min(parentWidth, 800), 300));

JSSOR: Only fits screen on page load, not on resize

The code I am using below only re-sizes the image slider upon page load, but doesn't re-size if the window size has changed, neither if the orientation of a mobile device changes.
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('imageslider', options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(parentWidth);
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
</script>
Thanks in advance jssor
For jquery version,
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
For no jQuery version,
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
else
$Jssor$.$Delay(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
I used this to cover both re-size and orientation change.:
window.addEventListener("orientationchange", function() {ScaleSlider();}, false);
window.addEventListener("resize", function() {ScaleSlider();}, false);

Unity 4.6 image scaled disappeared

I need to resize an image to be sure it is a square.
So I do
var rectTransform = GetComponent<RectTransform>();
var width = rectTransform.rect.width;
var height = rectTransform.rect.height;
if (Math.Abs(width - height) > 0.1f)
{
float size = width < height? width : height;
transform.localScale = new Vector3(size/width,size/height);
}
When I play it I see that the rectTransform has the good size but the sprite as disappear an the image is now transparent, does somebody know about it?
Using unity V4.6b20
Problem solved by doing
var rectTransform = GetComponent<RectTransform>();
var width = rectTransform.sizeDelta.x;
var height = rectTransform.sizeDelta.y;
if (Math.Abs(width - height) > 0.1f)
{
float size = width < height ? width : height;
rectTransform.sizeDelta=new Vector2(size,size);
}