Mapbox show location Paris - nativescript

I get correctly coordinate from this function in Map.ts:
populateForm() {
let pharmaId = this.route.snapshot.params["id"];
this.pharma.pharmagetbyid(pharmaId ).subscribe(
pharmadata=> {
if (pharmadata){
this.pharmadata= pharmadata;
}
}
);
}
In html I write this code in Map.html:
<Mapbox
accessToken="pk.xxxxxxxxxxxxxxx"
mapStyle="traffic_day"
[latitude]="pharmadata.latitude"
[longitude]="pharmadata.longitude"
zoomLevel="7"
delay="450"
showUserLocation="true"
hideCompass="false"
disableZoom="false"
disableRotation="false"
disableScroll="false"
disableTilt="false"
(mapReady)="onMapReady($event)">
</Mapbox>
And this onMapReady() have this code in Map.ts:
onMapReady(args): void {
this.map = args.map;
console.log(args.map)
this.map.addMarkers([
{
lat: this.pharmadata.longitude,
lng: this.pharmadata.latitude,
}
]
);
}
My coordinate are:
"longitude": 4.56, "latitude": 5.65
In map show firstly
and when I zoom map show Marks
Can you suggest me any idea how to show only Marks?


Your lat/long are flipped in your onMapReady function. Your code should look like this:
onMapReady(args): void {
this.map = args.map;
console.log(args.map)
this.map.addMarkers([
{
lat: this.pharmadata.latitude, // Flip these
lng: this.pharmadata.longitude, // two lines
}
]
);
}

Related

Been researching how to configure (define) a script

This is a piece of the script I need configured. It's to automate a game I'm playing. I don't know where to add the values at and for gasmaker its supposed to set up my game object to make 5 or 10 items of petrol and then switch to make 5 items of gasoline
logSomething("loading gasMaker");
gasMakerStart();
}
if (inventoryButler.enabled) {
logSomething("loading inventory butler");
inventoryChecker();
}
logSomething("Finished loading plugins");
} else {
logSomething("Game not found yet");
window.setTimeout(townStarLoadedWatcher,1000);
}
}
function inventoryChecker() {
// Verifies that you have at least a min. amount in inventory
window.inventoryChecker = setInterval(function(){
checkMinInventoryItem(0, inventoryButler.minInventoryCounts);
}, 30000);
}
function gasMakerStart() {
window.gasMakerTimer = setInterval(function(){
gasChecker();
}, 10000);
}
function shopKeeperStart() {
window.shopTenderTimer = setInterval(function(){
startShopKeeper(shopKeeper);
},shopKeeper.sellTimer * 1000);

How to add objectpicker and Camera to my entity in Qt3D?

I need to render some lines and points that hold some data in a 3d scene.
And points need to be picked by mouse, and then get the data in the point.
I first try to define a class inherited from QQuickFramebufferObject, however i find it is difficult to do mouse picking.
I find that it has the ObjectPicker in Qt3D module, so i want to use Qt3D to deal with my work.
My test code below. I defined my GeometryRenderer Object, and set vertices data(just draw two triangles). Like this:
GeometryRenderer {
id: geometry
geometry: Geometry {
boundingVolumePositionAttribute: position
Attribute {
id: position
attributeType: Attribute.VertexAttribute
vertexBaseType: Attribute.Float
vertexSize: 3
count: 4
byteOffset: 0
byteStride: 6 * 4
name: "position"
buffer: vertexBuffer
}
Attribute {
id: color
attributeType: Attribute.VertexAttribute
vertexBaseType: Attribute.Float
vertexSize: 3
count: 4
byteOffset: 3 * 4
byteStride: 6 * 4
name: "color"
buffer: vertexBuffer
}
Attribute {
attributeType: Attribute.IndexAttribute
vertexBaseType: Attribute.UnsignedShort
vertexSize: 1
count: 6
buffer: indexBuffer
}
}
Buffer {
id: vertexBuffer
type: Buffer.VertexBuffer
data: new Float32Array(...)
}
Buffer {
id: indexBuffer
type: Buffer.IndexBuffer
data: new Uint16Array(...)
}
}
And then define a material object like this:
Material {
id: material
effect: Effect {
techniques: Technique {
graphicsApiFilter {
profile: GraphicsApiFilter.CoreProfile
}
renderPasses: RenderPass {
shaderProgram: ShaderProgram {
vertexShaderCode: loadSource("qrc:/shader/hellotriangle.vert")
fragmentShaderCode: loadSource("qrc:/shader/hellotriangle.frag")
}
}
}
}
}
And then in my root Entity:
Entity {
id: root
components: [
RenderSettings {
activeFrameGraph: colorBuffer
pickingSettings.pickMethod: PickingSettings.TrianglePicking
pickingSettings.pickResultMode: PickingSettings.NearestPick
},
InputSettings { }
]
ClearBuffers {
id: colorBuffer
clearColor: Qt.rgba(0.8, 0.8, 0.8, 0.6)
buffers: ClearBuffers.ColorDepthBuffer
RenderSurfaceSelector {
RenderStateSet {
renderStates: DepthTest {
depthFunction: DepthTest.Less
}
}
}
}
}
It works, rendering two triangle. And I want to add Qt3D Camera and ObjectPicker in my scene, How can i make it?
I find that if i use ForwardRenderer(but i couldn't find a way to render my own lines/points vertices) instead of ClearBuffers, the Camera and ObjectPicker works

I want change scrollview rolling speed in react native

Now I use interval make it come true, but it is very incoherence.
If I can just change the method (scroll) speed, it well be nice.
this.interval = setInterval(()=>{
if(!_scroll){
_this.interval && clearInterval(_this.interval);
}
if(totalWide+ScreenWidth >= width ){
_scroll.scrollWithoutAnimationTo();
totalWide=0;
i=0;
}else{
_scroll.scrollTo({x:eachWide*i,animate:true});
totalWide = totalWide + eachWide;
i= i+1;
}
},250)

use decelerationRate property of ScrollView
<ScrollView decelerationRate={0.5}>
</ScrollView>

I got this working by having setInterval call a function(in which you define the logic or the pace at which the scroll should move).
this.interval= setInterval(this.scrollwithSpeed, 100); // Set the function to this timer
scrollwithSpeed() {
position = this.state.currentPosition + x; // x decides the speed and
currentPosition is set to 0 initially.
this.scrollObject.scrollTo(
{ y: position, animated: true }
);
this.setState({ currentPosition: position });
}
Make sure you call clearInterval(this.interval) after it is done.

I would suggest to attach to js requestAnimationFrame (from how far I know it is supported in React Native).
Bellow example will scroll linearly from top to bottom. If You need to scoll to different offset just change distance variable.
startingPoint variable is redundant in scrolling from top to bottom but will stay in example.
scroll() {
if (this.scrollAnimationFrame) {
cancelAnimationFrame(this.scrollAnimationFrame);
}
this.listRef.scrollToOffset({offset: 0, animated: false}); // remove if You don't start scroll from top
const duration = this.scrollTime,
startingPoint = 0, // change if You don't start scroll from top
distance = Scrolling.LINE_HEIGHT * Scrolling.ITEMS_COUNT;
let startTimestamp, progress;
const frameCallback = (timestamp) => {
if (!startTimestamp) {
startTimestamp = timestamp;
}
progress = timestamp - startTimestamp;
this.listRef.scrollToOffset({
offset: distance * (progress / duration) + startingPoint,
animated: false,
});
if (progress < duration) {
this.scrollAnimationFrame = requestAnimationFrame(frameCallback);
}
};
this.scrollAnimationFrame = requestAnimationFrame(frameCallback);
}

You can use reanimated to make it work.
const offsetY = useSharedValue(0);
const animatedProps = useAnimatedProps<FlatListProps<unknown>>(() => {
return {
contentOffset: {
x: 0,
y: offsetY.value,
},
};
});
const handleScroll = () => {
offsetY.value = withTiming(targetIndex * CARD_HEIGHT, {
duration: YOUR_DURATION_HERE,
});
}
return <Animated.FlatList animatedProps={animatedProps} ... />

In UnityScript, why does GUI not get called within hit on collider?

I'm trying to print out text when a user touches a sprite, however, even though I get no errors when building and running the code, the code refuses to printout the text and I cannot understand what I am doing wrong. Please help me understand why it does not print.
It prints the debug text when I touch the sprite, but not the GUI text with total.
This is the code:
#pragma strict
function Start () {
OnGUI();
}
function OnGUI(){
//var total = 0;
//GUI.Label( myRect, total.ToString() ); // Displays "10".
//GUI.Label( myRect, "" + bullets ); // Displays "10".
// GUI.Label(Rect(0,0,Screen.width,Screen.height),"Total:"+total);
}
//function Update () {
//}
var platform : RuntimePlatform = Application.platform;
function Update(){
if(platform == RuntimePlatform.Android || platform == RuntimePlatform.IPhonePlayer){
if(Input.touchCount > 0) {
if(Input.GetTouch(0).phase == TouchPhase.Began){
checkTouch(Input.GetTouch(0).position);
}
}
}else if(platform == RuntimePlatform.WindowsEditor){
if(Input.GetMouseButtonDown(0)) {
checkTouch(Input.mousePosition);
}
}
}
function checkTouch(pos){
var total = 0;
var wp : Vector3 = Camera.main.ScreenToWorldPoint(pos);
var touchPos : Vector2 = new Vector2(wp.x, wp.y);
var hit = Physics2D.OverlapPoint(touchPos);
if(hit){
GUI.Label(Rect(0,0,Screen.width,Screen.height),"Total:");
Debug.Log(hit.transform.gameObject.name);
hit.transform.gameObject.SendMessage('Clicked',0,SendMessageOptions.DontRequireReceiver);
//total = total +1;
}
}

You cannot put a gui item outside the OnGUI Method. You need to set a boolean to turn on the label.
Something along these lines.
OnGUI(){
if(labelbool)
GUI.Label ....
}
check(){
labelbool = true;
}

change button image

I have created a new custom button, can I set a different background image instead of 'circle' or 'triangle' ?
thanks
Chanan
exporting: {
enabled: true,
buttons: {
'realTimeButton': {
id: 'realTimeButton',
symbol: 'diamond',
x: -88,
symbolFill: realTimeColor,
hoverSymbolFill: realTimeColor,
_titleKey: "realTimeButtonTitle",
onclick: function(event) {
// handle change to real time
if ( enable_lastRoundsChart_realtime )
{
// disable real time flag
enable_lastRoundsChart_realtime = 0;
// re-create detail in real time mode disabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// enable plotBand
if ( pb_master_chart )
{
pb_master_chart.options.chart.events.selection.enabled = 'true';
pb_master_chart.options.chart.zoomType = 'x';
}
}
else
{
// enable real time flag
enable_lastRoundsChart_realtime = 1;
// re-create detail in real time mode enabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// update title
this.setTitle({text:"Players/Drops Per Round"}, {text:"Real Time"});
// if master found, remove plotBand and disable master selection
if ( pb_master_chart )
{
// remove plotBand
pb_master_chart.xAxis[0].removePlotBand('mask-before');
pb_master_chart.xAxis[0].removePlotBand('mask-after');
pb_master_chart.xAxis[0].addPlotBand({
id: 'mask-before',
from: -1,
to: 99999,
color: 'rgba(0, 0, 0, 0.2)'
})
// disable selection
pb_master_chart.options.chart.events.selection.enabled = 'false';
pb_master_chart.options.chart.zoomType = null;
}
}
}
},

According to the docs, the shapes are defined in the Highcharts.Renderer.symbols collection. Inspecting this object reveals the following available shapes:
Highcharts.Renderer.prototype.symbols:
arc: function (a,b,c,d,e){var f=e.start,c=e.r||c||d,g=e.end-1.0E-6,d=e.innerR,h=e.open,i=W(f),j=Z(f),k=W(g),g=Z(g),e=e.end-f<Aa?0:1;return["M",a+c*i,b+c*j,"A",c,c,
circle: function (a,b,c,d){var e=0.166*c;return["M",a+c/2,b,"C",a+c+e,b,a+c+e,b+d,
diamond: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d/2,a+c/2,b+d,a,b+d/2,"Z"]}
exportIcon: function (a,b,c,d){return y(["M",a,b+c,"L",a+c,b+d,a+c,b+d*0.8,a,b+d*0.8,"Z","M",a+c*0.5,b+d*0.8,"L",a+c*0.8,b+d*0.4,a+c*0.4,b+d*0.4,a+c*0.4,b,a+c*0.6,b,a+c*0.6,b+d*0.4,a+c*0.2,b+d*0.4,"Z"])}
printIcon: function (a,b,c,d){return y(["M",a,b+d*0.7,"L",a+c,b+d*0.7,a+c,b+d*0.4,a,b+d*0.4,"Z","M",a+c*0.2,b+d*0.4,"L",a+c*0.2,b,a+c*0.8,b,a+c*0.8,b+d*0.4,"Z","M",a+c*0.2,b+d*0.7,"L",a,b+d,a+
square: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c,b+d,a,b+d,"Z"]}
triangle: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d,a,b+d,"Z"]}
triangle-down: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c/2,b+d,"Z"]}
You can also add your own symbol by extending the collection. For example, drawing a simple X:
$.extend(Highcharts.Renderer.prototype.symbols, {
anX: function (a,b,c,d){return["M",a,b,"L",a+c,b+d,"M",a+c,b,"L",a,b+d]}
});
Produces:
Fiddle here.

You have ability to set image as icon
http://jsfiddle.net/Udgb3/
symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',
symbolX:5,
symbolY:0

Resources