Using CYpress I'm trying to simulate a signature action on one of the form I'm automating. Could someone help me understand how can I draw a line.
I'm trying below, doesn't work. Just puts a dot.
cy.get("[data-testid='xyz']").trigger('mousedown', 'center').click({release:false}).trigger('mouseup',5,5).trigger('mouseleave');
If you are getting a dot, you may get a line by adding a mousemove
cy.get("[data-testid='xyz']")
.trigger('mousedown', 'center')
.trigger('mousemove',5,5) // from center to just inside top left
.trigger('mouseup')
click({release:false}) isn't a valid option, but hopefully mousedown will stay down until mouseup,
Find your exact coordinates, Try It:
cy.get("[datatestid='xyz']").trigger('mousedown','center')
.click({release:false})
.trigger('mousemove',{ clientX: 200, clientY: 300 })
.trigger('mouseup',5,5)
.trigger('mouseleave');
Courtesy:https://softans.com/draw-a-line-using-cypress/
it's important to include the eventConstructor: 'MouseEvent' param
const draw = () => {
cy.get(CANVAS)
.should('exist')
.trigger('mousedown', {
x: 10,
y: 300,
force: true,
eventConstructor: 'MouseEvent',
})
.trigger('mousemove', {
x: 10,
y: 240,
force: true,
eventConstructor: 'MouseEvent',
})
.trigger('mouseup', {
x: 10,
y: 240,
force: true,
eventConstructor: 'MouseEvent',
});
};
Related
I´ve been trying to enable tooltips on some imported 3D models, but it isnt working.
I already enabled tooltips in threbox, and I enabled tooltips in the options for the 3d element, as shown below.
tb = new Threebox(
map,
mbxContext,
{
realSunlight: true,
enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models
}
);
var proptions = {
obj: './models/er.glb',
type: 'gltf',
scale: 10,
units: 'meters',
rotation: { x: 90, y: 0, z: 0 }, //default rotation
anchor: 'center',
adjustment: { x: 0, y: 0, z: 0.4 },
enableToltips: true
}
When i load the object i did the following:
tb.loadObj(proptions, function (model) {
model.setCoords(place);
model.addTooltip("A radar in the middle of nowhere", true);
model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
tb.add(model);
});
Although the object appears in the render, when I put the mouse above or i click it nothing shows the tooltip.
What am I missing ?
EDIT:
Following #jscastro response i changed the import in the top of my html page to <link href="./threebox-plugin/examples/css/threebox.css" rel="stylesheet" /> (the path is the correct to where the file is)
I also removed the enableTooltip: true in proptions.
Despite that it still does not work, Below i will leave the code as it is:
var origin = [-8.4, 41.20, 1];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: origin,
zoom: 11,
pitch: 30,
antialias: true
});
//Things related to dateTime ommited
window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
realSunlight: true,
enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models
}
);
map.on('style.load', async function () {
await importarLinhas();
// stats
// stats = new Stats();
// map.getContainer().appendChild(stats.dom);
animate();
map.addLayer({
id: 'custom_layer',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, mbxContext) {
var eroptions = {
obj: './models/stationBus.fbx',
type: 'fbx',
scale: 0.01,
units: 'meters',
rotation: { x: 90, y: 20, z: 0 }, //default rotation
anchor: 'center',
adjustment: { x: -0.1, y: -0.1, z: 0.4 }
}
var poptions = {
obj: './models/Busstop.fbx',
type: 'fbx',
scale: 0.03,
units: 'meters',
rotation: { x: 90, y: 20, z: 0 }, //default rotation
anchor: 'center',
adjustment: { x: -0.1, y: -0.1, z: 0.1 }
}
var proptions = {
obj: './models/er.glb',
type: 'gltf',
scale: 2.7,
units: 'meters',
rotation: { x: 90, y: 0, z: 0 }, //default rotation
anchor: 'center',
adjustment: { x: 0, y: 0, z: 0.4 }
}
allNos.forEach((element) => { //For each one of a list that i fill first
//center of where the objects are
var place = [element.lng, element.lat, 0];
//cylinder as "base" for each one of the 3d Models
**//in here i cant do the Tooltip for the object**
const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.15, 32);
const material = new THREE.MeshLambertMaterial({ color: 0x5B5B5B });
const cylinder = new THREE.Mesh(geometry, material);
var baseOptions = {
obj: cylinder,
anchor: 'center',
adjustment: { x: 0, y: 0, z: -0.4 }
}
let base = tb.Object3D(baseOptions);
base.setCoords(place);
base.setRotation({ x: 90, y: 0, z: 0 })
//The text is just for the test
base.addTooltip("A radar in the middle of nowhere", true);
// base.castShadow = true;
window.tb.add(base);
//next i check what type of element it is
//it can only be one at the same time, so i use different models for each type
if (element.tipo === "p") {
window.tb.loadObj(poptions, function (model) {
model.setCoords(place);
model.addTooltip("A radar in the middle of nowhere", true);
model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
// model.castShadow = true;
window.tb.add(model);
});
}
if (element.tipo === "er") {
window.tb.loadObj(eroptions, function (model) {
model.setCoords(place);
model.addTooltip("A radar in the middle of nowhere", true);
model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
// model.castShadow = true;
window.tb.add(model);
});
}
if (element.tipo === "pr") {
window.tb.loadObj(proptions, function (model) {
model.setCoords(place);
model.addTooltip("A radar in the middle of nowhere", true);
model.setRotation({ x: 0, y: 0, z: Math.floor(Math.random() * 100) })
// model.castShadow = true;
window.tb.add(model);
});
}
});
},
render: function (gl, matrix) {
window.tb.setSunlight(date, origin.center);
window.tb.update();
}
})
map.addLayer(createCompositeLayer());
map.on('SelectedFeatureChange', onSelectedFeatureChange);
});
EDIT
I downloaded the page you shared in the chat, and I found many different issues and mistakes in your code.
1. You're using the wrong property to enable the selection of 3D objects, you use enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection, that is for Mapbox fill-extrusions features as said in the comment, but not for 3D models and objects, you have to use enableSelectingObjects: true. Only adding this, your problem with the tooltips on mouse over will be solved.
tb = new Threebox(
map,
mbxContext,
{
realSunlight: true,
enableSelectingObjects: true, //enable 3D models over/selection
enableTooltips: true // enable default tooltips on fill-extrusion and 3D models
}
);
But I have found other issues...
2. Your models scale initialization is too small, so you are hiding them below the big shapes you have created. The scale of your bus stop is scale: 0.01 and you define a place which is on the ground var place = [element.lng, element.lat, 0];, so it's hidden inside this CylinderGeometry
If you use scale: 1 you will see how your bus stops raises from the cylinder.
3. Same with the bus, you initialize them with scale: 1, which make them be hidden below the tubes and cylinders you have created. If you initialize them with scale: 10, and you elevate them 5 meters from the floor let truck = model.setCoords([lngB, latB, 4]); then you will see them raising.
4. Your models have a wrong initialization params mixing anchor and adjustment. anchor: center will center the pivotal center of your object properly, but then you apply negative values to x and y (which means decenter the object), and a z value that elevates the pivotal center adjustment: { x: -0.1, y: -0.1, z: 0.4 }. If you want your model on altitude use the 3rd coord in setCoords.
5. Your Cylinders and Tubes for the bus stops and bus lines are huge, and also they have the wrong init params, as you set them below the ground level -0.4 units adjustment: { x: 0, y: 0, z: -0.4 } (something supported by Mapbox but very bad resolved and producing weird effects. My recommendation would be to make them almost flat and at the ground level with no adjustment param. const geometry = new THREE.CylinderGeometry(0.6, 0.6, 0.01, 32);.
Summarizing, check all of these changes and let me know if it works.
I am using c3.js to show temperature values, as a range I expect values from -30 to +50 degrees.
This works fine so far, but I am unhappy with the graphical representation.
I would like to have my X axis meet the Y axis at 0 and not at -30. Is this possible with c3.js? I already had a look at the manual and the examples, but I didn't find anything regarding offsetting the axis in this way.
You can hide default axis (1) and add custom line at zero (2).
See in action (jsfiddle)
var chart = c3.generate({
data: {
columns: [
['sample', 30, 20, -10, 40, 15, -25]
]
},
axis: {
x: {
show: false // (1)
},
y: {
max: 50,
min: -30,
// center: 0,
}
},
grid: {
y: {
lines: [{ value: 0, text: 'zero' }] // (2)
},
},
});
Related docs:
http://c3js.org/reference.html#axis-x-show
http://c3js.org/reference.html#grid-y-lines
Animations using Animated with React Native can get pretty large and take up a lot of space, especially if you have several of them. Is there a way to have them in a separate file and if so how would they be called?
Animated.sequence([
Animated.timing(this.state.move,{
toValue: {x: 50, y: 100},
duration:400
}),
Animated.timing(this.state.move,{
toValue: {x: 0, y: 0,
duration:400,delay:400
}),
]).start()
OK I figured out how to do it. Create a separate file like this:
import React, { Component } from 'react';
import {
Animated,
} from 'react-native';
var Anims = {
firstAnim(move) {
Animated.sequence([
Animated.timing(move,{
toValue: {x: 50, y: 100},
duration:400
}),
Animated.timing(move,{
toValue: {x: 0, y: 0,
duration:400,delay:400
}),
]).start()
}
}
module.exports = Anims;
Then require it like this:
const Animations=require('./animations.js');
And call it like this:
Animations.firstAnim(this.state.move);
I am making a stacked multi chart bar graph like this one
http://nvd3.org/examples/multiBar.html
Till now I am able to push my values on Y- axis and X axis too but the problem I am facing is that the all the values are not getting displayed on the x axis but only 10 values are getting displayed . I am using nvD3 library in my angular code . and displaying date on x axis.
$scope.options1 = {
chart: {
type: 'multiBarChart',
height: 600,
margin: {
top: 20,
right: 20,
bottom: 200,
left: 45
},
clipEdge: false,
duration: 500,
stacked: true,
groupSpacing: 0.1,
useInteractiveGuideline: true,
showMaxMin: false,
xAxis: {
axisLabel: 'Timeline',
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
},
xScale:d3.time.scale(),
rotateLabels: '-70'
},
yAxis: {
axisLabel: 'Pending Bills',
axisLabelDistance: -20,
groupSpacing: 0.1,
tickFormat: function(d) {
return d3.format(',f')(d);
}
}
}
};
generating ticking value array using this function
$scope.options1.chart.xAxis.tickValues = function() {
var xTick = _.map(data.data.data[0].values, function(value) {
return value.x;
});
xTick = _.sortBy(xTick, function(date){ return new Date(date); });
console.log(xTick);
return xTick;
}
the output of the console.log(xTick) is something like this which is all dates -
["2015-09-01", "2015-09-02", "2015-09-03", "2015-09-04", "2015-09-05",
"2015-09-06", "2015-09-07", "2015-09-08", "2015-09-09", "2015-09-10",
"2015-09-11", "2015-09-12", "2015-09-13", "2015-09-14", "2015-09-15",
"2015-09-16", "2015-09-17", "2015-09-18", "2015-09-19", "2015-09-20",
"2015-09-21", "2015-09-22", "2015-09-23", "2015-09-24", "2015-09-25",
"2015-09-26", "2015-09-27", "2015-09-28", "2015-09-29", "2015-09-30",
"2015-10-01", "2015-10-02", "2015-10-03", "2015-10-04", "2015-10-05",
"2015-10-06", "2015-10-07", "2015-10-08", "2015-10-09", "2015-10-10",
"2015-10-11", "2015-10-12", "2015-10-13", "2015-10-14", "2015-10-15",
"2015-10-16", "2015-10-17", "2015-10-18", "2015-10-19", "2015-10-20"]
as much I read about the it. all the dates should be get plotted on x axis but they are not
If you want to display all the ticks on X-Axis, you can add this option to your chart options :
"reduceXTicks": false,
For extended option page you can visit :
Angular NVD3 - MultiBarChart
Hope it helps.
chart: {
type: 'chartType',
xAxis: {
ticks:8
}
}
You can try "ticks" property if you want to display a specific number of ticks on the axis.
I'm using Phaser 2.3.0 and I want to know the bounds of a rotated sprite.
But when I change sprite.rotation, the values of sprite.getBounds() don't change:
sprite = game.add.sprite(0, 0, "img"); // game.load.spritesheet("img", "grid.png", 32, 32);
console.log(sprite.getBounds()); // Object { x: 0, y: 0, width: 32, height: 32, type: 22 }
sprite.rotation = 0.52; // 30°
console.log(sprite.getBounds()); // Object { x: 0, y: 0, width: 32, height: 32, type: 22 }
What's wrong?
How can I get the correct bounds?
As far as I know, getBounds() will return the smallest possible rectangle that the object fits in and since Phaser.Rectangle doesn't have a rotation property, you will get the same rectangle both times.
It's being 6 years since this question, but just for the people who end up here after a Google search, the right answer is that the getBounds() is based on the object's worldTransform which is updated at the end of the render() cycle. So changing something in the object and in the next line trying to get its bounds will give you the old value. The solution is to wait a frame or call updateTransform():
const sprite = game.add.sprite(0, 0, "img");
console.log(sprite.getBounds());
// Phaser.Rectangle { x: 0, y: 0, width: 32, height: 32, type: 22 }
sprite.rotation = 0.52; // 30°
sprite.updateTransform();
console.log(sprite.getBounds());
// Phaser.Rectangle {x: -15.900164410999576, y: 0, width: 43.67037816068437, height: 43.67037816068437, type: 22}
https://photonstorm.github.io/phaser-ce/Phaser.Sprite.html#getBounds
Keep in mind that if the object is inside an hierarchy of objects, you should call updateTransform() in the highest object.