You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by skvsarathyourfriend <sk...@gmail.com> on 2014/04/16 11:24:06 UTC
Auto changing the gaps,font size based on application DPI in
Flexmobile
I am working on a mobile app for multi resolutions,for which the components
in the screen should adjust itself (Text font,gaps)based on the application
DPI. How can i do this?
Thanks
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Running AIR apps in iOS Simulator - How To
Posted by agm65 <ag...@gmx.de>.
it works very very well. no large css! yippi! awsome!
thanks alot!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Running AIR apps in iOS Simulator - How To
Posted by Erik Thomas <er...@icloud.com>.
Have you ever tried to set up and use the XCode iOS Simulator to test your app, and to see if the DPI mapping makes your app look good on all of them? If you haven't yet tackled it, this might be of some help to you (if you develop on MacOS). You can create other scripts that call this one in a loop with all devices if you want to launch them all to see how your app lays out on each one.
The reason I created this script is because I use IntelliJ IDEA and it doesn't support selecting a target simulator device when using iOS Simulator, and the only workaround is to set an environment variable with the device name you want in a shell and launching the IntelliJ app from the shell, i.e., $ open -a "IntelliJ....app" which is very inconvenient. Here is my feature request for this to be added to IntelliJ IDEA <https://youtrack.jetbrains.com/issue/IDEA-209027>.
Requirements:
MacOS
Flex SDK 4.16.1
AIR SDK 32 (in this example we point to the iOS SDK 12.1 version of the simulator)
To use an older SDK, change the XCODE_SIM_SDK assignment from .../iPhoneSimulator12.1.sdk to .../iPhoneSimulator.sdk.
When you run the script you'll see...
$ ./sim.sh "iPad Pro (12.9-inch) (3rd generation)"
Packaging for iOS Simulator: iPad Pro (12.9-inch) (3rd generation)...
Uninstalling app from iOS Simulator if exists...
Installing on iOS Simulator...
Launching app on iOS Simulator...
Usage: ./sim.sh "iPad Pro (12.9-inch) (3rd generation)"
To get a list of simulator devices that you can pass to sim.sh, do this:
$xcrun simctl list devices
== Devices ==
-- iOS 12.1 --
iPhone 5s (ADB3343E-C7FE-4AE5-9765-D093C9936B90) (Shutdown)
iPhone 6 (5E6C728C-64BF-4AD7-9A37-A34D416D8ABE) (Shutdown)
iPhone 6 Plus (9A3816FB-0319-476D-A916-F82F0446B1E6) (Shutdown)
iPhone 6s (5D4E1908-A7A4-465E-B5C3-618D5E22A334) (Shutdown)
iPhone 6s Plus (B913BBF2-4A1F-4E22-A10F-017062F204A4) (Shutdown)
iPhone 7 (C49F37AE-6A8C-4098-AE10-C6BD05454D6C) (Shutdown)
iPhone 7 Plus (795BCC5F-8AE7-4B34-B937-8904D44003F1) (Shutdown)
iPhone 8 (2D14F1ED-62B1-47B6-8823-C50AB861E0A5) (Shutdown)
iPhone 8 Plus (D570AFFD-D8DD-4C66-8D25-878759CBB234) (Shutdown)
iPhone SE (95A0E23F-B7D3-4A71-B3A8-B57808678D4B) (Shutdown)
iPhone X (822CEC4C-CF15-429A-8BFB-0BC69F5A0CE3) (Shutdown)
iPhone XS (7A3EDBA6-5A90-4626-9140-DB1C7C650B63) (Shutdown)
iPhone XS Max (8368B225-9E7D-454A-A726-452120A018C5) (Shutdown)
iPhone XR (285CBE47-656C-427A-9A42-21EE78C90135) (Shutdown)
iPad Air (B0D2085D-0B75-495E-9F9E-D0AFC52785F6) (Shutdown)
iPad Air 2 (F36F5E8F-39B6-49D9-A062-D69337973BAE) (Booted)
iPad (5th generation) (D2044591-EB6B-4ABC-90D4-3D1C58E46001) (Shutdown)
iPad Pro (9.7-inch) (ED4405C9-5F7E-4583-9717-BFA08709FC49) (Shutdown)
iPad Pro (12.9-inch) (3A10023B-7730-4F4E-AF7C-B0094B95DDF8) (Shutdown)
iPad Pro (12.9-inch) (2nd generation) (79493241-8938-42C6-AEF5-BDF4D087FA3F) (Shutdown)
iPad Pro (10.5-inch) (A79319D2-BDF3-459B-B737-8B7194691860) (Shutdown)
iPad (6th generation) (78D1258E-571C-4E96-9376-FF983EC0212E) (Shutdown)
iPad Pro (11-inch) (0D4EBB0C-059E-4320-BEDB-14E5A0591641) (Shutdown)
iPad Pro (12.9-inch) (3rd generation) (8AE329BE-DE28-4FEE-A0ED-983E435E980B) (Shutdown)
Copy the full name without the (UUID) or device status, and pass it to your bash script.
Copy the following bash code to a sim.sh file, change all the assigned env vars, and chmod +x the file to execute. Oh, be sure the quotes are straight, not curly after pasting. Finally, note that the package command requires signing cert values, but they are ignored by the simulator, so just leave the package command values for -keystore "keep_this_as_is" and -storepass "keep_this_as_is" so the ADT command won't fail param validation phase.
Assumes you already built the app so there is an output directory with your swf, etc.
Begin File:
# !/bin/bash
# Edit the following assignments to your own, keeping in mind to use full paths, or source your .bash_profile to use ~/
CURRENT_FLEX_SDK="/Users/ethomas/linqto/FlexSDKs/SDK4.16.1-32-43"
IPA_PATH="/Users/ethomas/linqto/FlexDev/keiretsu/out/production/keiretsu/keiretsuforum.ipa"
APP_DESCR_PATH="/Users/ethomas/linqto/FlexDev/keiretsu/out/production/keiretsu/keiretsu-app.xml"
APP_BUNDLE_ID=com.linqto.keiretsuforum.debug
XCODE_SIM_SDK="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator12.1.sdk"
ADT_EXTRA_PARAMS="-extdir /Users/ethomas/linqto/FlexDev/EventANE \
-C /Users/ethomas/linqto/FlexDev/keiretsu/out/production/keiretsu Main.swf \
-C /Users/ethomas/linqto/FlexDev/keiretsu/appicons . \
-C /Users/ethomas/linqto/FlexDev/keiretsu/launchscreens . \
-C /Users/ethomas/linqto/FlexDev/keiretsu Assets.car"
function adt() {
java -Dapplication.home=${CURRENT_FLEX_SDK} -Dfile.encoding=UTF-8 -Djava.awt.headless=true \
-Duser.language=en -Duser.region=en -Xmx1024m -jar ${CURRENT_FLEX_SDK}/lib/adt.jar "$@"
}
function installApp() {
echo "Installing on iOS Simulator..."
adt -installApp -platform ios \
-platformsdk $XCODE_SIM_SDK \
-device ios-simulator \
-package $IPA_PATH &>/dev/null
}
if [ "$1" != "" ]; then
export AIR_IOS_SIMULATOR_DEVICE="$1"
fi
echo "Packaging for iOS Simulator: ${AIR_IOS_SIMULATOR_DEVICE}..."
adt -package \
-target ipa-debug-interpreter-simulator \
-storetype PKCS12 \
-keystore "keep_this_as_is" \
-storepass "keep_this_as_is" $IPA_PATH $APP_DESCR_PATH \
-platformsdk $XCODE_SIM_SDK \
$ADT_EXTRA_PARAMS
if [ "$?" != "0" ]; then
echo "Failed to package the app!"
exit 1
fi
echo "Uninstalling app from iOS Simulator if exists..."
adt -uninstallApp -platform ios \
-platformsdk $XCODE_SIM_SDK \
-device ios-simulator \
-appid $APP_BUNDLE_ID
installApp
if [ "$?" != "0" ]; then
# For some reason, this command often fails with bogus plist error, but do it again and it works
installApp
fi
if [ "$?" != "0" ]; then
# Nope failed twice, something else is going on
echo "Failed to install the app!"
exit 1
fi
echo "Launching app on iOS Simulator..."
adt -launchApp -platform ios \
-platformsdk $XCODE_SIM_SDK \
-device ios-simulator -appid $APP_BUNDLE_ID
if [ "$?" != "0" ]; then
echo "Failed to launch the app!"
exit 1
fi
Re: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by Erik Thomas <er...@icloud.com>.
You shouldn't need to change any css. A 12 - 14pt font face in 160dpi is about like the typical body text you'll see in most mobile apps. But if your app is running on a 480 dpi display that 14pt font (still the same property setting or css) will appear roughly the same size as the typical body text you'll see in most mobile apps.
You never need to change font sizes or use any css directives to change font sizes, ever. It's unnecessary because the designers of Flex/Flash were smart about making it easy for your app to look good on all devices without changing any settings but the runtime DPI.
Oh, and if you don't extend the default RuntimeDPIProvider with your own settings, it will still map higher DPIs to scaled fonts and layouts.
The only real need for your own RuntimDPIProvider is where the defaults aren't quite as good as you want.
I always develop AIR apps with applicationDPI="160" which makes my optimal font sizes feel more like fonts you might set in a Word document, so instead of a high application DPI where your font has to be like 30pt for regular text, you can work with more intuitive sizes, e.g., 12-14pt for body text, 16 for h3, 18 for h2 and 20 for h1, or something like that.
Anyway, don't over think this. All the hard work has been done for you.
On Mar 19, 2019, at 11:54 AM, agm65 <ag...@gmx.de> wrote:
Hi Erik,
thanks alot for your answer.
For my better understanding: The runtimeDPI value is the value of my device
and it sets my applicationDPI value to one of those 6 values (120-640). And
this applicationDPI value is used in the css to switch my font sizes etc?
So with defining new ranges i can finetune my settings.
got it?
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by agm65 <ag...@gmx.de>.
Hi Erik,
thanks alot for your answer.
For my better understanding: The runtimeDPI value is the value of my device
and it sets my applicationDPI value to one of those 6 values (120-640). And
this applicationDPI value is used in the css to switch my font sizes etc?
So with defining new ranges i can finetune my settings.
got it?
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Re: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by Erik Thomas <er...@icloud.com>.
You can override the default DPI mappings that scale your app to devices with different DPIs. In your Application MXML file, add this property:
runtimeDPIProvider="com.yournamehere.CustomRuntimeDPIProvider"
And implement a class that extends the default RuntimeDPIProvider. These are settings one of my apps actually uses (with a starting applicationDPI setting of 160. It makes the portrait only iphone layout look good on an iPad as well as some of the super hi res devices that are coming out.
public class CustomRuntimeDPIProvider extends RuntimeDPIProvider {
override public function get runtimeDPI():Number {
if (Capabilities.screenDPI > 550) {
return DPIClassification.DPI_640;
} else if (Capabilities.screenDPI > 400) {
return DPIClassification.DPI_480;
} else if (Capabilities.screenDPI > 250) {
return DPIClassification.DPI_320;
}
return super.runtimeDPI;
}
}
You can experiment to fine-tune the right scaling based on DPI and to find the right starting applicationDPI. But essentially, all your layouts and fonts will scale together based on the runtimeDPI settings. This allows you to develop for a single applicationDPI, and different devices with higher DPI will show larger fonts, etc.
On Mar 19, 2019, at 9:15 AM, agm65 <ag...@gmx.de> wrote:
Hi all,
what is the difference between runtimeDPI and application DPI?
I have some problems with very large displays like the google pixel2.
It runs with 480 dpi. Everything looks to small with my 480 dpi settings. If
i use the values for 640dpi it looks good.
Any idea? And where to find the multidpi gaps?
thx alot!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
RE: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by agm65 <ag...@gmx.de>.
Hi all,
what is the difference between runtimeDPI and application DPI?
I have some problems with very large displays like the google pixel2.
It runs with 480 dpi. Everything looks to small with my 480 dpi settings. If
i use the values for 640dpi it looks good.
Any idea? And where to find the multidpi gaps?
thx alot!
--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
RE: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by Maurice Amsellem <ma...@systar.com>.
So in this case, only the css rules matching application-dpi: 160 will apply, and the value will be scaled by runtimeDPI/applicationDPI.
Maurice
-----Message d'origine-----
De : skvsarathyourfriend [mailto:skvsarathyourfriend@gmail.com]
Envoyé : jeudi 17 avril 2014 09:43
À : users@flex.apache.org
Objet : RE: Auto changing the gaps,font size based on application DPI in Flexmobile
Yeah i have assaigned a 160 to application-dpi at application level.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144p6161.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
RE: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by skvsarathyourfriend <sk...@gmail.com>.
Yeah i have assaigned a 160 to application-dpi at application level.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144p6161.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
RE: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by Maurice Amsellem <ma...@systar.com>.
Did you set applicationDPI to 160 at the application level?
Something like:
<s:Application ...... applicationDPI=160 >
.. your app code
Maurice
-----Message d'origine-----
De : skvsarathyourfriend [mailto:skvsarathyourfriend@gmail.com]
Envoyé : jeudi 17 avril 2014 08:57
À : users@flex.apache.org
Objet : Re: Auto changing the gaps,font size based on application DPI in Flexmobile
I am using CSS for changing font size dynamically based on DPI of the screen.
@media (application-dpi: 160)
{
s|RichEditableText {
fontSize: 10;
}
s|Label {
fontSize: 25;
}
}
@media (application-dpi: 240)
{
s|RichEditableText {
fontSize: 30;
}
s|Label {
fontSize: 30;
}
}
@media (application-dpi: 320)
{
s|RichEditableText {
fontSize: 20
}
s|Label {
fontSize: 40;
}
}
But for the different DPI mobiles,the fontsize not changing.For 160 DPI only its affecting.
Thanks.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144p6158.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by skvsarathyourfriend <sk...@gmail.com>.
I am using CSS for changing font size dynamically based on DPI of the
screen.
@media (application-dpi: 160)
{
s|RichEditableText {
fontSize: 10;
}
s|Label {
fontSize: 25;
}
}
@media (application-dpi: 240)
{
s|RichEditableText {
fontSize: 30;
}
s|Label {
fontSize: 30;
}
}
@media (application-dpi: 320)
{
s|RichEditableText {
fontSize: 20
}
s|Label {
fontSize: 40;
}
}
But for the different DPI mobiles,the fontsize not changing.For 160 DPI only
its affecting.
Thanks.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144p6158.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Auto changing the gaps,font size based on application DPI in Flexmobile
Posted by Ronny Shibley <rs...@codefish.com>.
MultiDPIVerticalLayout and MultiDPIHorizontalLayout is an amazing approach
I wasn't aware about...
I personally use Dynamic Layouts all percentages and set the Gap to 0. I
take a reference width or height depending on Orientation and I use it in
my s:Spacer in the VGroup or HGroup.
<s:VGroup id="refGroup" height="100%"/>
<s:HGroup id="ohterGroup" width="{refGroup.height/2}"/>
<s:Spacer height="{refGroup.height/10}"/>
Not sure about the repercussions of this approach but works great for me...
Regarding fontSize i leave it to up auto DPI scaling...
Kind Regards,
Ronny Shibley, Eng
Software Architect | Codefish | www.codefish.com
t +961 5 450824 | m +961 70 250650
On Wed, Apr 16, 2014 at 12:38 PM, Maurice Amsellem <
maurice.amsellem@systar.com> wrote:
> Text / fonts => use css and media queries
> Gaps => use MultiDPIHorizontalLayout / MultiDPIVerticalLayout.
>
> Another approach, which is easier IMO, is to set an "authoring" DPI to
> your application ( using applicationDPI at the application level),
> and then set all your measures (fonts, gaps, widths,etc) according to this
> reference DPI.
>
> Here is an article that explains the pros and cons of each approach:
> https://blogs.adobe.com/jasonsj/2011/05
>
> Maurice
>
> -----Message d'origine-----
> De : skvsarathyourfriend [mailto:skvsarathyourfriend@gmail.com]
> Envoyé : mercredi 16 avril 2014 11:24
> À : users@flex.apache.org
> Objet : Auto changing the gaps,font size based on application DPI in
> Flexmobile
>
> I am working on a mobile app for multi resolutions,for which the
> components in the screen should adjust itself (Text font,gaps)based on the
> application DPI. How can i do this?
>
> Thanks
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
RE: Auto changing the gaps,font size based on application DPI in
Flexmobile
Posted by Maurice Amsellem <ma...@systar.com>.
Text / fonts => use css and media queries
Gaps => use MultiDPIHorizontalLayout / MultiDPIVerticalLayout.
Another approach, which is easier IMO, is to set an "authoring" DPI to your application ( using applicationDPI at the application level),
and then set all your measures (fonts, gaps, widths,etc) according to this reference DPI.
Here is an article that explains the pros and cons of each approach:
https://blogs.adobe.com/jasonsj/2011/05
Maurice
-----Message d'origine-----
De : skvsarathyourfriend [mailto:skvsarathyourfriend@gmail.com]
Envoyé : mercredi 16 avril 2014 11:24
À : users@flex.apache.org
Objet : Auto changing the gaps,font size based on application DPI in Flexmobile
I am working on a mobile app for multi resolutions,for which the components in the screen should adjust itself (Text font,gaps)based on the application DPI. How can i do this?
Thanks
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Auto-changing-the-gaps-font-size-based-on-application-DPI-in-Flexmobile-tp6144.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.