Wavesurfer.js : waveform width - wavesurfer.js

Is there an efficient way to change a wave width ?
I'd like to make the wave smaller and the option minPxPerSec is working until a certain value,
bellow that value the wave have the same width, as if there was a threshold
( unless the option fillParent is set to false, but it's make the wave truncated ).
edit : here is an exemple of truncated waveform
as you can hear and see, the wave is finish before the audio
var wavesurfer = WaveSurfer.create({
container: '#waveform',
fillParent: false,
minPxPerSec: 10,
});

I find how to change the wave width, it is pretty simple in fact :
set fillParent to true, give the minPxPerSec that you want, and change the container width !

Related

Cypress:Can we set tolerance level for matchImageSnapshot

I am using cy.matchImageSnapshot for my image comparison testing.
Sometimes it fails for slight differences. Is there any way to mention a tolerance level so that for Eg. up to 80% match i can still pass test like that?
My code looks like below
cy.get('.itl-exit-info-panel > .ngcope').root().matchImageSnapshot('MyDashboard2');
Is there a better way?
Thanks in advance
Yes, it should be possible to set the tolerance level through few config parameters. Here is a sample,
matchImageSnapshot('MyDashboard2', {
failureThreshold: 0.03, // threshold for entire image
failureThresholdType: 'percent', // percent of image or number of pixels
customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
capture: 'viewport', // capture viewport in screenshot
});
I would suggest you to read through the documentation here - https://github.com/palmerhq/cypress-image-snapshot#options

What is the syntax of ImageResize()

I have data that change in size and want to display them in the same window. The command
void ImageResize( BasicImage im, Number num_dim, Number... )
seems like a potential fit, but the syntax is not clear at all.
Let's say I have 512x5 data set and now it needs to be 367x5.
The , Number...) indicates that this command takes a different number of parameters, all of them interpreted as number parameters. Commands which do this, usually use one of their other parameters to specify how many such parameters follow.
A typical example for this is also the SliceN command.
In this particular case, the command not only allows you to change the size of the dimensions in the image, but also the number of dimensions. It is a very useful command to f.e. change a 2D image into a 3D stack or the like.
The command ImageResize( BasicImage im, Number num_dim, Number... ) does several things:
It replaces im in-place, so the meta-data, display and window remains the same
It adjusts the dimension calibration when the dimension size is changed. Here, the assumption is, that the field-of-view before and
after the resize is the same. (The command can be used to easily scale
images as shown in the example below.)
All values of the image im are set to zero. ( If you need to keep the values, you need to act on an image clone!)
Example 1: Resizing image with bilinar interpolation
image before := GetFrontImage()
number sx, sy
before.GetSize(sx,sy)
number factor = 1.3
image after := before.ImageClone()
after.ImageResize( 2, factor*sx, factor*sy ) // Adjusts the empty container with meta-data
after = warp(before, icol/factor, irow/factor ) // interpolate data
after.ShowImage()
Example 2: Extend 2D image into 3D stack
number sx = 100
number sy = 100
image img := RealImage("2D",4,sx,sy)
img = iradius* Random()
img.ShowImage()
OKDialog("Now into a stack...")
number sz = 10
img.ImageResize(3,sx,sy,sz) // All values are zero now!
img = iradius * Random()

Appcelerator view hiding animation

I am trying to integrate animation in a module where, when the dismiss button is clicked, the entire pendingTasksBar view's height turn to 0dp but at a stretch of 300ms. This is what i have tried so far. Can someone please help me out here?
function hidePendingTasksBar(){
log.trace("[tasks] >> [hidePendingTasksBar]");
var animationObj = Ti.UI.createAnimation({
height : "0dp",
duration : 300
});
$.pendingTasksBar.animate(animationObj);
//.pendingTasksBar.height = "0dp";
}
Height property must be a Number, and you are using a String. I think that's the problem. Try using 0 instead of "0dp".
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Animation-property-height
Setting height to 0 as number should work. And if it doesn't work, then you can safely use matrix transformation to decrease height or to increase it to same height again as below:
var matrix = Ti.UI.create2DMatrix();
matrix = matrix.scale(1, 0);
// to decrease height
$.pendingTasksBar.animate({
duration : 300,
transform : matrix
});
// to reset height
$.pendingTasksBar.animate({
duration : 300,
transform : Ti.UI.create2DMatrix() // use empty matrix & it will reset original matrix or UI.
});

Algorithm keystroke dynamics

I have a third party keyboard app who's algorithm I'm trying to understand from a key map data file I have. It monitors the way you tap on your keyboard and then it adjusts the tappable area behind the scenes so as to accept user input more accurately. I'm now trying to similarly mimick this keyboard concept for a small game I am making.
This is the tappable character map the keyboard app rendered:
Here's an example of a character map for the keyboard letter V
{
"v" :
{
"characters" : [ "v" ],
"feature-threshold-multiplier" : 1.0,
"initial-scale-multiplier" : 1.0,
"mean" :
{
"dof" : 40,
"mode" : [ 210.0367889404297, 138.3223266601562 ]
},
"precision" :
{
"dof" : 40,
"mode" :
[
0.003064915072172880,
-0.0009184600203298032,
-0.0009184600203298032,
0.006329041905701160
]
},
"prior-mean" : [ 207.0, 142.50 ],
"prior-precision" : [ 0.004667554982006550, 0.0, 0.0, 0.004667554982006550 ]
}
}
Question
What I'm trying to figure out now is which part of the data set determines the size of the tappable area and which part determines the rotation.
My findings
Some things I have noticed which may help others in helping me understand what the keys and their values actually relate to:
I have found that precision -> mode contains two values which are always the same for every single character map.
I have noticed that there is a dof key for both the mean and
mode array, and they are always the same.
So far a friend has been able to figure out what one of the key values mean which contribute to the positioning of each tappable key.
The mean -> modecontains the x and y position.
This link shows a code output rendering of the character dataset given.
http://codepen.io/martinlindhe/pen/yebpgO
You'll notice that the output matches the exact positioning of the tappable key map shown below.
I can only guess here but my bet is:
pos = 210.0367889404297, 138.3223266601562
is position (corner or center) and
0.0030649150721728800,-0.0009184600203298032
-0.0009184600203298032, 0.0063290419057011600
are 2 x 2D basis vectors (so size and orientation of your tapping area) and size = 40 (which more or less matches position). I see 2 possible layouts (row-major or column-major) but your data is symmetric so no way to tell which one it is as both are:
u = 40 * ( 0.0030649150721728800,-0.0009184600203298032)
v = 40 * (-0.0009184600203298032, 0.0063290419057011600)
As you did not provide any info about coordinate system and also the position does not match the image at all (you post most likely scaled image) I can not verify any of them. The only thing that is visible is u is ~2 times the size of v and as this is for a V key (I assume) then I see it like this (infered from all data you provided):
as you can see the u vector is mirrored (god knows why).
To verify you should check/compare more than just single key. To get the scaling I would chose W,Z,M,O as they form almost a rectangle covering almost whole keyboard... And also check differently rotated keys to verify the weird mirroring.

How to maintain and apply aspect ratio of images in extjs4

I am working in extjs4. I am trying to display image by using following component=
xtype : 'image',
height : 600,
width : 800,
src :me.imageSrc
Where,me.imageSrc is having image path. But sometimes image is shown as blurred or expanded if image's height and width is too large. So how to calculate aspect ratio and apply it in extjs4 in order to show images properly.
In order to get the size of the loaded image you need to listen the "load" event on the image element, in the listener callback you have access to the with and height.
Here's the code that makes the magic:
var img = imageCmp.imgEl
img.on('load',function(){
Ext.Msg.alert('IMG Size',img.getWidth()+'x'+img.getHeight());
});
Here's a working example:
http://jsfiddle.net/crysfel/utUA2/
Make sure you remove the hardcoded width and height ;)

Resources