I am trying to set an individual Frame which defines the visible area of the Map.
Currently all the annotations are shown with mapView.showAnnotations but they aligned to fit in the whole iPad screen view. So they are partially hidden by Floating UI Elements (Green). Also the center of the screen is aligned to be the center of the iPad screen.
What I try to accomplish: I want something like a defined rectangle inside the Map to be the only regarded area in the map. But the Map itself (blue) shall still be shown behind the UI Elements.
I thought it would be able to accomplish this by using setVisibleMapRect but when I ever I try to use this it does not take any effect. Is setVisibleMapRectactually the needed method to solve this problem?
The actual answer I found out later is defining
mapView.layoutMargins = UIEdgeInsets(top: X, left: X, bottom: X, right: X)
so the map wont use the space defined by the margin
For others finding this via google, looking for a solution with MapKit JS:
In MapKit JS, the property to modify is called padding:
var map = new mapkit.Map("map");
// When showing the translucent side panel, shift the map content a little to the right.
if (window.innerWidth >= 768) {
map.padding = new mapkit.Padding({top: 0, left: 600, bottom: 0, right: 0})
}
Documentation: mapkit.Padding
Related
I'm using the Drag Source and Drag Target features from https://vaadin.com/docs/latest/create-ui/dnd (Vaadin 23).
I want to realize a moving operation on a map. This means I got points on a map (as custom Vaadin components) and ...
when dragging them the source position should be hidden (this could be done via point.addDragStartListener(...); as far as I can see)
when dropping them I need to know the drop position relative to the map as x/y coordinates (e.g. clientX and clientY).
As result, the component should be moved from the dragging start position to the drop position. It's parent div has the style attribute position: relative; and the component itself has an absolute position with top and left coordinates in px, e.g.: position: absolute; top: 183px; left: 254px;. With the drop event I have to update the top and left values in the css styling and therefore I need the coordinates of the drop position.
I can't see a suitable method in dropTarget.addDropListener(...); to get the coordinates. Do you have any hint / code samples for me? Thanks!
I found a solution:
dropTarget.getElement().addEventListener("drop", this::onDrop)
.addEventData("event.offsetX")
.addEventData("event.offsetY");
And an apropriate method onDrop:
private void onDrop(DomEvent event) {
JsonObject eventData = event.getEventData();
double x = eventData.getNumber("event.offsetX");
double y = eventData.getNumber("event.offsetY");
[do some stuff...]
}
I am using iOS charts library and in my application there could be lots of x axis values for my bar chart view but, I need to show few of them. I have tried to do it with barChartView.setVisibleXRangeMaximum(12) though it is causing some weird issues. (Like Bar chart's bar fill all x-axis) Instead of using that function I am trying to use zoom property barChartView.zoom(scaleX: 4, scaleY: 0, x: 0, y: 0) . However, I am not sure how many x axis values come when I draw the chart. In some cases, it's 60,84 or 800. How can I calculate right zoom ratio to accomplish for showing 10-12(any number between them enough for me) x-Axis values?
You might want to use:
barChartView.setVisibleXRange(minXRange: 10.0, maxXRange: 12.0)
instead of:
barChartView.setVisibleXRangeMaximum(12.0)
I'd really like to be able to decrease the amount of padding at the top of all my level 2 reveal.js slides (version 2.6.2). It doesn't appear to be possible to customise this with CSS because the offset is a negative number calculated dynamically.
e.g. in http://fommil.github.io/scalax14/#/5/1 I would like to reclaim at least 200 pixels at the top. The top parameter is currently being calculated to be -350px but I'd really rather it was closer to -500px.
Is there a way to do this with config?
Reveal keeps the aspect ratio of the resolution you entered in the config.
If you want your slides to have less padding, there are multiple ways:
disable centering:
center: true, // add this in init or config
slides get positioned at the top of the page, and all the padding happens at the bottom
use a 4:3 format for your slides
width: 1024, // add this in init or config
height: 768,
this will move all padding to sides of the page (well, assuming the browser window is not resized) as long as the page ratio is wider than 4:3
create fully responsive slides:
var resizeSlide = function() {
Reveal.configure({
width: window.innerWidth,
height: window.innerHeight
});
}
setInterval(resizeSlide, 1000);
you will then need to make your slides responsive to changes in slide format, but this will make them utilize the full page for the presentation.
I'm using setInterval and not onResize because onResize just don't work on mobile and some browser/os combination (i.e. chrome on windows 8.1 when using keyboard shortcut and desktop hotspots to resize the window)
I ran in to this problem on a recent project when the guys in the art department noticed deteriorating image quality. I'm not sure what's causing it however we were able to remedy the issue by removing the ScrollView it was nested in. But this is not a viable solution as we will need to nest images within views nested within scrollviews.
My code looked something like:
<View>
<ScrollView>
<View>
<ImageView image="someImage.png" />
</View>
</ScrollView>
</View>
When we removed the ImageView from both the nested ScrollView and it's direct parent view it renders fine. I've created a repo with a simple project illustrating this. The dulling effect is most noticeable on the coloring of the letters, the white drop shadow on the text and the blurring of the grey border.
https://bitbucket.org/bwellons/blurry-images
Is this a bug that needs reporting or is there documentation somewhere that says "don't do it this way" that I don't know of?
Regards
Brant
I think this is caused by not defining bounds (width, height) and anchors (top, left, right, bottom) of views in a consistent manner, for example, if I just change this:
".parent": {
width: '100%',
height : 59,
}
To this:
".parent": {
top : 0,
width: '100%',
height : 59
}
The blurring goes away. I think this is happening because you are mixing relative and absolute view layout techniques (percentages and absolute pixels) in a tightly bound box (the .parent view is the exact same height as the child image view) which is causing the layout calculations underneath to fudge a little when they draw the image inside the parent view.
I say this because this also works to noticeably eliminate the blur, by allowing more room for transformation error:
".parent": {
width: '100%',
height : 62 // Added 3 pixels of padding
}
Here are some other methods that work as well, by either using the same layout mechanism for both width and height, or giving more room for transforms:
".parent": {
width: '100%',
height : '50%' // Dont do this, but shows the point
}
".parent": {
bottom : 0,
width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally
height : 59
}
So generally, stay away from mixing percentages and absolute values in nesting view chains dimensions, unless you are willing to give some wiggle room in the parent, or define anchors (top, left, right, bottom) to make the drawing transformations work out.
Disclaimer: I only base this statement on about 15-20 different limited layout tests and my own experience (I did not go through native code, yet) so this is by no means science.
I'm learning Corona SDK and am new to lua as well (i mainly do ruby and some javascript).
I have a bar that i want to fill up as the user does stuff. I've set it up as follows:
--outer rectangle
powerBar = display.newRect(210, 6, 24, 9)
powerBar.strokeWidth = 1
powerBar:setStrokeColor(254,203,50)
powerBar:setFillColor(0,0,0,0)
--inner rectangle which fills up
powerBarFill = display.newRect(211,7,0,7)
powerBarFill:setFillColor(234,183,30)
When the "stuff" happens, i add 1 to powerBarFill.width, which i thought would make it grow from left to right. But, it's actually growing out from the centre, ie its x is in the centre and the width extends either side from that.
Whats the best way to keep the left side static and grow the right side? Can i set it so that it's x position is actually on the left hand side rather than in the middle? Seems like that might do it.
cheers in advance
I've run into this problem as well when creating a progress bar. The problem is with the rect's reference point. The default reference point is in the center of an object, as you've noticed. You can use object:setReferencePoint() to change it. I believe you want to use the display.BottomLeftReferencePoint value:
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
Keep in mind that you have to set this value before you set your x,y values. So in your case you'll need to set the reference point after creating the rectangle, and then assign values to x,y again (even though you already did this in the newRect constructor):
powerBar = display.newRect(210, 6, 24, 9)
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
powerBar.x, powerBar.y = 210, 6
If it's width is from the X position on both sides:
1) It should start at:
Centre - (Width when it's full / 2)
2) Every frame, add:
incrs = 1 --Amount to increase by
width = width + incrs
x = x + incrs / 2