I'm integrating a modified SDK 3.0 sample into a big app in which I'm working.
When I detect whatever Trackable2DObject and show an ImageDrawable (for example, the surf table), this ImageDrawable appears from the z-index very slowly.
Is there any way to disable this animation?
Thanks in advance!
EDIT: My JS code only contains this:
var World = {
loaded: false,
init: function initFn() {
this.createOverlays();
},
createOverlays: function createOverlaysFn() {
// Initialize Tracker
this.tracker = new AR.Tracker("assets/wul4bus.wtc", {
onLoaded: this.worldLoaded
});
// Create overlay for page one
var imgOne = new AR.ImageResource("assets/redsys_marker_orange.png");
var overlayOne = new AR.ImageDrawable(imgOne, 0.5, {
zorder: 0,
offsetX: -0.15,
offsetY: 0,
onClick: this.createClickTrigger
});
var titleLabel = new AR.Label("Bus", 0.07, {
zOrder: 1,
offsetX: -0.15,
offsetY: 0.04,
style: {
textColor: '#FFFFFF',
fontStyle: AR.CONST.FONT_STYLE.BOLD
}
});
var pageOne = new AR.Trackable2DObject(this.tracker, "002", {
drawables: {
cam: [overlayOne, titleLabel]
}
});
},
createClickTrigger: function createClickTriggerFn() {
document.location = "architectsdk://product?id=1236";
},
worldLoaded: function worldLoadedFn() {
document.body.removeChild(document.getElementById('loadingMessage'));
}
};
World.init();
As you see, there is no AR.PropertyAnimation class along this code. Anyway, a small animation succedeed sometimes when the target is discovered, and trackable object appears a bit slowly, slower than SDK 2 IMHO. It happens with some Trackable2DObject more than others.
Please have a look at the API Reference of the Wikitude SDK.
You will find details around Animations there.
If you need a Sample collection and platform specific stuff, have a look at the Wikitude Documentation page.
Kind regards,
Andreas
Related
I'm trying to use getUserMedia to show the cam live stream on a web page. It works (if I save the stream to a file, it is ok) but the video tag show only a static green image as preview. Is anyone facing the same problem?
My setup:
Samsung S8 (SM-G950F)
Android 9
Chrome 107.0.5304.91
HTML
<video autoplay="true" width="100%" id="video-test"></video>
JS
var video = document.querySelector("#video-test");
navigator.mediaDevices.getUserMedia({
video: {
mandatory: { minFrameRate: 10, minWidth: 100, minHeigth: 100 },
}
})
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!", err0r);
});
Result
Thank you
Ah, the green screen of death. Why is it green? Because it's trying to display an all-zero YUV image.
Your constraints in your call to .getUserMedia() are incorrect. mandatory is no longer a thing. You need something like this:
{
video: {
width: { min: 100, ideal: 320 },
height: { min: 100, ideal: 240 },
frameRate: { min: 10, ideal: 10 }
}
}
It's an inconvenient truth that you have to muck around to get constraints values that work on many different platforms. And, you have to accept what gUM gives you. If you demand exact constraints using something like frameRate: { exact: 10 } you may get an OverconstrainedError exception, or some other exception.
I have a custom animation that expands a Cell inside a TableView. I also refresh the tableView size before/after the animation as appropriate. This works on UWP, and I don't have a Mac yet, so I can't test it on IOS.
This doesn't work at all on Android. It does not refresh the tableRoot to update the size of it, nor does it seem to play the expanding animations.
I say the second part, because when I lock the tableview to the full size it doesn't play.
The animation itself is pretty straight forward:
private void AnimateLinearRowAppear(VisualElement visual, double targetHeight = 40, TableRoot _tableRoot, bool visible)
{
visual.IsVisible = visible;
TableRootRefresher(_tableRoot);
Animation _animation;
_animation = new Animation(
(d) => visual.HeightRequest = d, 0, targetHeight);
_animation.Commit(visual, "The Animation", 16, 250, Easing.Linear, (target, b) =>
{
_animation = null;
});
}
Any one have any ideas as to why it doesn't work on Android?
Unless I'm mistaken this is for cross platform development.
Do I have to write an interface and call each of my animations in a platform specific way?
Oh, this is the latest version of Xamarin 2.3.4.270.
Thanks for any help in advance!
I'm calling the animation from an event such as a specific picker selection or switch.
Switch.toggled += (sender, e) =>
{
AnimationChooser(celltochange,switch.toggle, tableRootCellIsPartOf);
}
AnimationChooser decides if we're playing the appearing or disappearing animation and is working correctly.
private void AnimationChooser(Cell celltoChange, bool stateOfSwitch, TableRoot _tableRoot)
{
var visual = (celltoChange as ViewCell).View
if(visual.IsVisible && stateOfSwitch)
{ AnimateLinearRowDissappear(visual, 40 ,_tableRoot, stateOfSwitch);}
else AnimateLinearRowAppear(visual,40,_tableRoot,stateOfSwitch);
}
TableRootRefresher(TableRoot _tableRoot)
{
Var tempRoot = _tableRoot;
_tableRoot = null;
_tableRoot = tempRoot:
}
The XAML:
<TableView>
<TableRoot x:Name="root">
<TableSection>
<SwitchCell x:Name="switch"/>
<EntryCell x:Name="toAppear" HieghtRequest="0" IsVisible="False"/>
</TableSection>
</TableRoot>
</TableView>
Here is a sample project.
I have used the below codesnippet animation working fine for me.
//animate changed the opacity from 1 to 0.
//XFtabbody is my UI elements
var animation = new Animation(v => XFTabBody.Opacity = v, 1, 0);
Action<double, bool> finished = animate;
animation.Commit(XFTabBody, "aa", 0, 100, Easing.Linear, finished);
void animate(double d, bool b)
{
XFTabBody.Children.Clear();
}
I'm trying to implement font scaling in Steroids+Angular1.3.15 (AppGyver) hybrid app. I decided to use $localStorage to store current font size. It all works great on android devices but not on iOS.. Actually in iOS it works for the newly opened WebViews but not the ones that are already displayed.
Links for font scaling:
<a class="font-size font-small" data-remote="true" ng-class="{current: fontSize == 'rem-base-small'}" ng-click="setFontSize('rem-base-small')">A</a>
<a class="font-size font-medium" data-remote="true" ng-class="{current: fontSize == 'rem-base-medium'}" ng-click="setFontSize('rem-base-medium')">A</a>
<a class="font-size font-large" data-remote="true" ng-class="{current: fontSize == 'rem-base-large'}" ng-click="setFontSize('rem-base-large')">A</a>
and in my controller:
$scope.fontSize = $localStorage.fontSize || 'rem-base-medium'
$scope.setFontSize = function(size) {
$localStorage.fontSize = size
$scope.fontSize = size
}
I use myfontsize directive on <html> tag to update UI. My directive looks like so:
var sharedStuff = angular.module('sharedStuff', ['ngStorage'])
sharedStuff.directive('myfontsize', function($localStorage) {
function link(scope, element, attrs) {
var format,
timeoutId;
function updateClass() {
element.removeClass('rem-base-large')
element.removeClass('rem-base-medium')
element.removeClass('rem-base-small')
$localStorage.fontSize = $localStorage.fontSize || "rem-base-medium"
element.addClass($localStorage.fontSize)
}
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateClass();
});
element.on('$destroy', function() {
clearInterval(timeoutId);
});
// start the UI update process; save the timeoutId for canceling
timeoutId = setInterval(function() {
updateClass(); // update DOM
}, 1000);
}
return {
link: link
};
})
If somebody could shed some light on why it works on android but it doesn't on iOS, I would be much obliged. Alternatively if you have better solution to achieve my goal and don't mind sharing, please do :)
I'm doing an application for Android and IOS. In this application, I have a window, and I add/remove different views with the content.
I want that the first view will be only in portrait mode, whereas the rest of the views can be in any orientation.
How can I do it?
With titanium SDK 3.1.2 it works more or less on IOS:
My window:
var appWindow = Titanium.UI.createWindow({
top : 0,
left : 0,
height : utils.getScreenHeight(),
width : utils.getScreenWidth(),
backgroundColor : "#393a3a",
//fullscreen : true,
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT],
});
Then, when I want to load a view:
var openWindow = function(e) {
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
if (e.win == 'Home') {
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
orientacion = 0;
activeView = Home.Constructor(appWindow);
} else if (e.win == 'configuracion') {
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
orientacion = 0;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
activeView = Configuracion.Constructor(appWindow);
} else if (e.win == 'Circle') {
activeView = Circle.Constructor(appWindow);
}
appWindow.add(activeView);
};
Now, I want to use SDK 3.1.3 to support IOS 7, and it doesn't work, none of the views allow to rotate.
Do you know how I can do this?
Thank you very much
I did not have any luck with changing a windows orientationModes on runtime too. The docs say that the window property orientationModes as well as its method setOrientationModes have to be set before opening the window.
So switching from views to windows is not an option?
If you want a window to allow orientations different from those defined in tiapp.xml, you have to set orientationModes on every window individually:
// This window allows orientations defined in tiapp.xml
var appWin = Ti.UI.createWindow({
backgroundColor = '#FFF'
});
appWin.open();
// This window is portrait only
var win = Ti.UI.createWindow({
backgroundColor: '#FFF',
orientationModes: [Ti.UI.PORTRAIT]
});
win.open();
// If this window is opened it allows multiple orientations
var newWindow = Ti.UI.createWindow({
backgroundColor: '#FFF',
orientationModes: [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
newWindow.open()
This is tested with SDK 3.1.3.
Edit
To make this work on Android, you have to force a heavyweight window by either setting fullscreen: true or navBarHidden: true
You can create a custom AndroidManifest.xml and set screenOrientation attribute for the activities you want.-
android:screenOrientation="portrait"
More information here
With titanium SDK 3.1.2 I put the following code for:
Titanium.UI.orientation = Titanium.UI.PORTRAIT;
appWindow.orientationModes = [Titanium.UI.PORTRAIT];
and then, when you load other view, then put:
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
Original Title but too long for post:
"ASP.NET MVC 4, Razor, JQuery, JQueryMobile, Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers. Changing scroller width and height does not work on some phones."
The crash issue happens on Android 2.1.
It does not happen on iPhone, HTC EVO 4G LTE or other HTCs.
Changing the scroller width and height does not work on HTCs. If I change to landscape then the scroller is the same size as it should be in portrait. If I change it back to portrait then the scroller is the size it should have been in landscape.
Here is the JQuery/Mobiscroll code:
function createDatePicker(selector){
if($("#input_date_1").scroller('isDisabled') != 'undefined'){
var scrollWidth = ($("div[id='main_content']").width()) / 4;
var scrollHeight = scrollWidth / 2.5;
$("#input_" + selector).scroller({
preset: 'date',
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 11, 31),
theme: 'android',
display: 'inline',
mode: 'scroller',
dateOrder: 'mmddyy',
width: scrollWidth,
height: scrollHeight,
onChange: function (valueText, inst) {
var lbl = $("#lbl_" + selector);
var date = $("#input_" + selector).scroller('getDate');
lbl.text(date.toDateString());
}
});
}
function setDatePickerWidthAndHeight(){
var scrollWidth = ($("div[id='main_content']").width()) / 4;
var scrollHeight = scrollWidth / 2.5;
var selectorBase1 = "date_1";
$("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth);
$("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight);
}
$(function () {
createDatePicker('date_1');
$(window).bind('orientationchange', function (event) {
setTimeout(setDatePickerWidthAndHeight(),100);
});
});
I am including these scripts in #section scripts {} which is rendered at the bottom of the page ( not sure if that is relevant ).
Any help would be appreciated.
It turns out the problem was that the older Android phones do not like the resize event the way it was written above.... and newer phones did not like the orientationchange event. The code at this link made everything work perfectly:
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
And here is how I used it:
//
// usage:
//$(window).smartresize(function () {
// // code that takes it easy...
//});
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr) {
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced() {
var obj = this, args = arguments;
function delayed() {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function (fn, threshold, execAsap) { return fn ? this.bind('resize', debounce(fn, threshold, execAsap)) : this.trigger(sr); };
})(jQuery, 'smartresize');
$(function () {
createDatePicker('date_1');
$(window).smartresize(function () {
setDatePickerWidthAndHeight();
}, 200);
});
I found the link in the answer of this post: window.resize in jquery firing multiple times
Thanks!