I would like to resize some controls of my App when the CharmsBar (specially the SearchPane) opens. I have made some tests and the width is usually 343 but sometimes it is greater (it depends on the size of the screen, not on the resolution. At least, using the emulator).
Does somebody know if there is a programatic method to get that value?
The width is always 346 but you have to apply the zoom factor to obtain the real width in pixels. And this can be achieved using:
double SearchPaneWidth() {
var scale = Windows.Graphics.Display.DisplayProperties.ResolutionScale;
switch (scale) {
case Windows.Graphics.Display.ResolutionScale.Scale100Percent:
return 1.0 * 346;
case Windows.Graphics.Display.ResolutionScale.Scale140Percent:
return 1.4 * 346;
case Windows.Graphics.Display.ResolutionScale.Invalid:
return 1.8 * 346;
default:
throw new Exception("Unknown resolution scale");
}
}
Related
I would like to rotate long image representing hand of a clock.
I have following code:
val hand = Image(handBitmap).apply {
scaledHeight = 50.0
scaledWidth = 400.0
anchor(.0, 0.5)
addUpdater {
rotation = Angle.fromDegrees( rotation.degrees + 1)
}
}
I expected result like on this image:
but I got this:
What should I change to achieve a hand of clock like effect?
The code seems correct, and seems to work properly with the latest version of KorGE. Which version of KorGE are you using?
As discussed in discord:
The problem was that the anchor point is set to the left, center of the image, while the image itself has a gap:
By adjusting the anchor point (that is a ratio to something that fits the end of the arrow, should fix the issue)
In the case of this image an anchor of anchor(.09, 0.52) could work:
Note also that you can open the debugger by pressing F7 inside the window to actually see the bounds of the image, the anchor point, and the AABB bounds to debug this kind of issues.
Hope this was helpful!
The problem looked more like this:
o
|
o------- -------o
|
o
It occurs when I set scaledHeight and scaledWidth.
Finally setting scale(1.0) helped.
I'm having a problem displaying the elements, in 1920x1080 resolution it looks great but in other ratio such as 1366x768 it became bloated. My goal is to have same look in different aspect ratio.
This is the display design in 1920x1080 resolution
This is the display design in 1366x768 resolution
P.S: I didn't use the font of vuetify, because in my previous project when I use vuetify fonts the font-size is not resizing
Add Breakpoints on every screen sizes that will determine the font size and other elements you want to be responsive on a screen
Ex:
carouselHeight() {
const x = this.$vuetify.breakpoint.name;
//console.log(x)
switch (x) {
case "xl":
return "800";
case "lg":
return "300";
case "md":
return "340";
case "sm":
return "230";
case "xs":
return "150";
default:
return "150";
}
So I'm developing a cross platform React Native app, the app is using allot of images as buttons as per design requirements that need to be given an initial height and width so that their aspect ratios are correct. From there I've built components that use these image buttons and then placed those components on the main screen. I can get things to look perfect on one screen by using tops and lefts/ rights to get the components positioned according to the design requirements that I've been given.
The problem I'm running into is now scaling this main screen for different screen sizes. I'm basically scaling the x and y via the transform property on the parent most view as such. transform: [{ scaleX: .8 }, { scaleY: .8 }] After writing a scaling function that accounts for a base height and current height this approach works for the actual size of things but my positioning is all screwy.
I know I'm going about this wrong and am starting to think that i need to rethink my approach but am stumped on how to get these components positioned correctly on each screen without having to hard code it.
Is there any way to position a view using tops and lefts/rights, lock that in place, then scale it more like an image?
First of all, try using flex as far as you can. Then when you need extra scaling for inner parts for example, you can use scale functions. I have been using a scale function based on the screen size and the pixel density, and works almost flawless so far.
import { Dimensions } from "react-native";
const { width, height } = Dimensions.get("window");
//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const screenSize = Math.sqrt(width * height) / 100;
const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) =>
size + (scale(size) - size) * factor;
export { scale, verticalScale, moderateScale, screenSize };
Then you can import these and use in your components. There are different types of scales, you can try and see the best one for your components.Hope that helps.
I ended up going through each view and converting everything that was using a hard coded height and width pixel to setting the width and then using the property aspectRatio and giving that the hard coded height and widths. That along with implementing a scaling function that gave me a fraction of the largest view, so say .9, and then scaling the main view using transform. People arent kidding when they say this responsive ui stuff is tough.
2022 update -
I resolved this problem on my next app by using flex everywhere & a function called rem that I use everywhere that needs a fixed pixel count. With this I can set the width on an image and define an aspect ratio based on the images original dimensions and get an image that scales to the screen size, it's been super reliable.
static width = Dimensions.get("window").width;
static height = Dimensions.get("window").height;
static orientation = 'PORTRAIT';
static maxWidth = 428;
static rem = size => {
let divisor = window.lockedToPortrait || Styles.orientation === 'PORTRAIT' ? Styles.width : Styles.height;
return Math.floor(size * (divisor / Styles.maxWidth))
};
The maxWidth is a predefined value from the largest device I could find to simulate which was probably an iPhone max.
I have windows 8.0 code and I had handled the UI for ViewStates like Portrait,Landscape, filled and Snapped. But with windows 8.1 a Viewer can move the app into any size. how do i handle the UI in this case. Currently i am doing it like this.
private void QuestionPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
ApplicationViewState currentState = Windows.UI.ViewManagement.ApplicationView.Value;
if (currentState.Equals(ApplicationViewState.Snapped))
{
VisualStateManager.GoToState(this, "Snapped", false);
}
else if (currentState.Equals(ApplicationViewState.FullScreenLandscape))
{
VisualStateManager.GoToState(this, "FullScreenLandscape", false);
}
else if (currentState.Equals(ApplicationViewState.Filled))
{
VisualStateManager.GoToState(this, "Filled", false);
}
else if (currentState.Equals(ApplicationViewState.FullScreenPortrait))
{
VisualStateManager.GoToState(this, "FullScreenPortrait", false);
}
}
Firstly, you need to decide how to categorize your sizes. We decided to go with the following:
Default - landscape full screen.
Portrait - portrait full screen.
Small - snapped/resized to 500 - 683 wide, vertical orientation
Medium - snapped/resized to 684 wide and above, vertical orientation
So basically, the small and medium sizes are a vertical layout, as the height is bigger than the width. When the Medium width becomes larger than its height, then it would be the default landscape size.
We use:DisplayOrientations CurrentOrientation = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().CurrentOrientation; instead of ApplicationViewState for SizeChangedEventArgs.
Then define the sizes as follows:
//Small Size
if (e.NewSize.Width <= 683
&& (CurrentOrientation == DisplayOrientations.Landscape || CurrentOrientation == DisplayOrientations.LandscapeFlipped || CurrentOrientation == DisplayOrientations.None))
You can then play and define which ever sizes you would like.
Instead of basing your layout on ApplicationViewState - make it depend on size and aspect ratio of the window. Think how users would use your app and what layout would work best in these cases. Maybe one layout would be fine or maybe you might want to switch a GridView layout into a ListView one when the window width is smaller than some value - e.g. 500px. Think what's most comfortable to use in these cases. At the very least - test that the layout doesn't fall apart when you resize the app.
I would like to know the physical screen size under Mac OSX. But NSDeviceResolution is always reporting wrong value (72), so the calculation result of resolution / dpi is wrong.
Inside "About This Mac", there is a Mac model string there, mine is "15-inch, Early 2011". So I'm wondering should there be a way (in obj-c probably), to read that string and then I can use that as the physical screen size.
Any help is appreciated.
You can use CGDisplayScreenSize to get the physical size of a screen in millimetres. From that you can compute the DPI given that you already know the resolution.
So e.g.
NSScreen *screen = [NSScreen mainScreen];
NSDictionary *description = [screen deviceDescription];
NSSize displayPixelSize = [[description objectForKey:NSDeviceSize] sizeValue];
CGSize displayPhysicalSize = CGDisplayScreenSize(
[[description objectForKey:#"NSScreenNumber"] unsignedIntValue]);
NSLog(#"DPI is %0.2f",
(displayPixelSize.width / displayPhysicalSize.width) * 25.4f);
// there being 25.4 mm in an inch
That #"NSScreenNumber" thing looks dodgy but is the explicit documented means of obtaining a CGDirectDisplayID from an NSScreen.
Tommy’s answer above is excellent — I’ve ported it to Swift (for my own use) and am posting that here as a reference, but Tommy’s should be consider canonical.
import Cocoa
public extension NSScreen {
var unitsPerInch: CGSize {
let millimetersPerInch:CGFloat = 25.4
let screenDescription = deviceDescription
if let displayUnitSize = (screenDescription[NSDeviceDescriptionKey.size] as? NSValue)?.sizeValue,
let screenNumber = (screenDescription[NSDeviceDescriptionKey("NSScreenNumber")] as? NSNumber)?.uint32Value {
let displayPhysicalSize = CGDisplayScreenSize(screenNumber)
return CGSize(width: millimetersPerInch * displayUnitSize.width / displayPhysicalSize.width,
height: millimetersPerInch * displayUnitSize.height / displayPhysicalSize.height)
} else {
return CGSize(width: 72.0, height: 72.0) // this is the same as what CoreGraphics assumes if no EDID data is available from the display device — https://developer.apple.com/documentation/coregraphics/1456599-cgdisplayscreensize?language=objc
}
}
}
if let screen = NSScreen.main {
print("main screen units per inch \(screen.unitsPerInch)")
}
Please note that the value returned is kind of effectively the ‘points per inch’ (but not for all definitions; see below) and almost never the ‘pixels per inch’ — modern Macs have a number of pixels per point that depends on the current “Resolution” setting in System Preferences and the inherent resolution of the device (Retina displays have a lot more pixels).
What you do know about the return value is that if you draw a line with code like
CGRect(origin: .zero, size: CGSize(width: 10, height: 1)).fill()
the line will be 1 / pointsPerInch.height inches high and 1 / pointsPerInch.width inches wide if you measure it with a very precise ruler held up to your screen.
(For a long time graphics frameworks have defined a ‘point’ as both “1/72nd of an inch in the real world” and also as “whatever the width or height of a box that’s 1 x 1 units ends up being on the current monitor at the current resolution — two definitions that are usually in conflict with each other.)
So for this code I use the word ‘unit’ to make it clear we’re not dealing with 1/72nd of an inch, nor 1 physical pixel.