Considerations for creating an app for desktop *and* iOS

MacOSX and iOS
1

Hello all,

We’re creating an app that we would like to run (the same layout!) on both the desktop (win/OSX) and iOS.
I know there are some problems with the pixel widths for iOS… Is there any simple way to make sure that the app will run on both and be usable on both resolutions?
Quite a few parts of the app (i.e. the main window) are scalable, but I want to make sure the buttons don’t look humongous on iOS or tiny on the desktop version.

greetings,

  • bram
2

on Android i query the system for the display DPI, then i use this as a calculation basis to size all my UI in terms of mm/inches. So, for example, i might want a button to be 5mm on all platforms, rather han a fixed number of pixels.

I can’t find a simular system call for iOS (anyone?), so right now i have a set of rather guessmatic calculations based on the operating system, screen size etc to determine the dpi.

3

That’s interesting Hugh…
Could you show me a simple example of how you then use this data?
I suppose having the query fior DPI in Juce would be interesting too…

  • bram
4

because the implementation details are horrible, let’s say we’ve got a function

[code]int sizeForMM(int len)
{
// return the number of pixels for `len’ mm
// len -> inches / dpi = points
// return points * displayScale for retina.

}[/code]

then by overriding your LookAndFeel you size things better. Here’s how i change the thumb of the slider.

// overrides int CustomLookAndFeel::getSliderThumbRadius (Slider& slider) { return jmin (sizeForMM(4), slider.getHeight() / 2, slider.getWidth() / 2) + 2; }

I also scale items on popup menus and items in property panels, also by overriding functions of the LookAndFeel,

[code]
/// …
_propHeight = _dpi.sizeForMMScaled(6);
/// …

float getProperyScale() const
{
// XX default preferred height of properties
int ph = 25;

    float s = 1;
    
    if (_dpi.mobileDevice())
    {
        if (_propHeight > ph)
            s = ((float)_propHeight)/ph;
    }
    return s;
}

void getIdealPopupMenuItemSize (const String& text,
                                bool isSeparator,
                                int standardMenuItemHeight,
                                int& idealWidth,
                                int& idealHeight)
{
    float s = getProperyScale();        
    parentT::getIdealPopupMenuItemSize(text, isSeparator,
                                       standardMenuItemHeight*s,
                                       idealWidth, idealHeight);
}

// override
const Font getPopupMenuFont()
{
    float s = getProperyScale();        
    Font f = parentT::getPopupMenuFont();
    f.setHeight(f.getHeight()*s);
    return f;
}

void assignLook(Array<PropertyComponent*>& props) const
{
    if (_dpi.mobileDevice())
    {
        for (int i = 0; i < props.size(); ++i)
        {
            props[i]->setLookAndFeel((Look*)this);
            props[i]->setPreferredHeight(_propHeight);
        }
    }
}[/code]

The code excerpts are just to give you an idea of some methods. I hope you get the gist,

– hugh.