Browse Source

Fix demo tools under high dpi

pull/338/head
falkTX 3 years ago
parent
commit
c874553630
4 changed files with 67 additions and 28 deletions
  1. +24
    -17
      tests/Demo.cpp
  2. +15
    -6
      tests/FileBrowserDialog.cpp
  3. +1
    -1
      tests/NanoImage.cpp
  4. +27
    -4
      tests/widgets/ExampleTextWidget.hpp

+ 24
- 17
tests/Demo.cpp View File

@@ -103,12 +103,13 @@ protected:
void onDisplay() override void onDisplay() override
{ {
const GraphicsContext& context(getGraphicsContext()); const GraphicsContext& context(getGraphicsContext());
const double scaleFactor = getWindow().getScaleFactor();
const int iconSize = bgIcon.getWidth(); const int iconSize = bgIcon.getWidth();


Color(0.027f, 0.027f, 0.027f).setFor(context); Color(0.027f, 0.027f, 0.027f).setFor(context);
Rectangle<uint>(0, 0, getSize()).draw(context); Rectangle<uint>(0, 0, getSize()).draw(context);


bgIcon.setY(curPage*iconSize + curPage*3);
bgIcon.setY(curPage * iconSize + curPage * 3 * scaleFactor);


Color(0.129f, 0.129f, 0.129f).setFor(context); Color(0.129f, 0.129f, 0.129f).setFor(context);
bgIcon.draw(context); bgIcon.draw(context);
@@ -118,7 +119,8 @@ protected:


if (curHover != curPage && curHover != -1) if (curHover != curPage && curHover != -1)
{ {
Rectangle<int> rHover(1, curHover*iconSize + curHover*3, iconSize-2, iconSize-2);
Rectangle<int> rHover(1 * scaleFactor, curHover * iconSize + curHover * 3 * scaleFactor,
iconSize - 2 * scaleFactor, iconSize - 2 * scaleFactor);


Color(0.071f, 0.071f, 0.071f).setFor(context); Color(0.071f, 0.071f, 0.071f).setFor(context);
rHover.draw(context); rHover.draw(context);
@@ -146,13 +148,13 @@ protected:
// draw some text // draw some text
nvg.beginFrame(this); nvg.beginFrame(this);


nvg.fontSize(23.0f);
nvg.fontSize(23.0f * scaleFactor);
nvg.textAlign(NanoVG::ALIGN_LEFT|NanoVG::ALIGN_TOP); nvg.textAlign(NanoVG::ALIGN_LEFT|NanoVG::ALIGN_TOP);
//nvg.textLineHeight(20.0f); //nvg.textLineHeight(20.0f);


nvg.fillColor(220,220,220,220); nvg.fillColor(220,220,220,220);
nvg.textBox(10, 420, iconSize, "Haha,", nullptr);
nvg.textBox(15, 440, iconSize, "Look!", nullptr);
nvg.textBox(10 * scaleFactor, 420 * scaleFactor, iconSize, "Haha,", nullptr);
nvg.textBox(15 * scaleFactor, 440 * scaleFactor, iconSize, "Look!", nullptr);


nvg.endFrame(); nvg.endFrame();
#endif #endif
@@ -226,9 +228,10 @@ protected:
{ {
const uint width = ev.size.getWidth(); const uint width = ev.size.getWidth();
const uint height = ev.size.getHeight(); const uint height = ev.size.getHeight();
const double scaleFactor = getWindow().getScaleFactor();


bgIcon.setWidth(width-4);
bgIcon.setHeight(width-4);
bgIcon.setWidth(width - 4 * scaleFactor);
bgIcon.setHeight(width - 4 * scaleFactor);


lineSep.setStartPos(width, 0); lineSep.setStartPos(width, 0);
lineSep.setEndPos(width, height); lineSep.setEndPos(width, height);
@@ -420,30 +423,31 @@ public:
curWidget(nullptr) curWidget(nullptr)
{ {
const ScopedGraphicsContext sgc(*this); const ScopedGraphicsContext sgc(*this);
const double scaleFactor = getScaleFactor();


wColor = new ExampleColorSubWidget(this); wColor = new ExampleColorSubWidget(this);
wColor->hide(); wColor->hide();
wColor->setAbsoluteX(kSidebarWidth);
wColor->setAbsoluteX(kSidebarWidth * scaleFactor);


wImages = new ExampleImagesSubWidget(this); wImages = new ExampleImagesSubWidget(this);
wImages->hide(); wImages->hide();
wImages->setAbsoluteX(kSidebarWidth);
wImages->setAbsoluteX(kSidebarWidth * scaleFactor);


wRects = new ExampleRectanglesSubWidget(this); wRects = new ExampleRectanglesSubWidget(this);
wRects->hide(); wRects->hide();
wRects->setAbsoluteX(kSidebarWidth);
wRects->setAbsoluteX(kSidebarWidth * scaleFactor);


wShapes = new ExampleShapesSubWidget(this); wShapes = new ExampleShapesSubWidget(this);
wShapes->hide(); wShapes->hide();
wShapes->setAbsoluteX(kSidebarWidth);
wShapes->setAbsoluteX(kSidebarWidth * scaleFactor);


#ifdef DGL_OPENGL #ifdef DGL_OPENGL
wText = new ExampleTextSubWidget(this), wText = new ExampleTextSubWidget(this),
wText->hide(); wText->hide();
wText->setAbsoluteX(kSidebarWidth);
wText->setAbsoluteX(kSidebarWidth * scaleFactor);
#endif #endif
wLeft = new LeftSideWidget(this, this), wLeft = new LeftSideWidget(this, this),
wLeft->setAbsolutePos(2, 2);
wLeft->setAbsolutePos(2 * scaleFactor, 2 * scaleFactor);


resizer = new ResizeHandle(this); resizer = new ResizeHandle(this);


@@ -493,10 +497,12 @@ protected:
{ {
StandaloneWindow::onReshape(width, height); StandaloneWindow::onReshape(width, height);


if (width < kSidebarWidth)
const double scaleFactor = getScaleFactor();

if (width < kSidebarWidth * scaleFactor)
return; return;


Size<uint> size(width-kSidebarWidth, height);
const Size<uint> size(width - kSidebarWidth * scaleFactor, height);
wColor->setSize(size); wColor->setSize(size);
wImages->setSize(size); wImages->setSize(size);
wRects->setSize(size); wRects->setSize(size);
@@ -504,7 +510,7 @@ protected:
#ifdef DGL_OPENGL #ifdef DGL_OPENGL
wText->setSize(size); wText->setSize(size);
#endif #endif
wLeft->setSize(kSidebarWidth-4, height-4);
wLeft->setSize((kSidebarWidth - 4) * scaleFactor, (height - 4) * scaleFactor);
} }


private: private:
@@ -528,8 +534,9 @@ template <class ExampleWidgetStandaloneWindow>
void createAndShowExampleWidgetStandaloneWindow(Application& app) void createAndShowExampleWidgetStandaloneWindow(Application& app)
{ {
ExampleWidgetStandaloneWindow swin(app); ExampleWidgetStandaloneWindow swin(app);
const double scaleFactor = swin.getScaleFactor();
swin.setResizable(true); swin.setResizable(true);
swin.setSize(600, 500);
swin.setSize(600 * scaleFactor, 500 * scaleFactor);
swin.setTitle(ExampleWidgetStandaloneWindow::kExampleWidgetName); swin.setTitle(ExampleWidgetStandaloneWindow::kExampleWidgetName);
swin.show(); swin.show();
app.exec(); app.exec();


+ 15
- 6
tests/FileBrowserDialog.cpp View File

@@ -38,21 +38,26 @@ public:
loadSharedResources(); loadSharedResources();
#endif #endif
setResizable(true); setResizable(true);
setSize(500, 200);
setGeometryConstraints(500, 200, true);
setTitle("FileBrowserDialog"); setTitle("FileBrowserDialog");

const double scaleFactor = getScaleFactor();
setGeometryConstraints(500 * scaleFactor, 200 * scaleFactor, true);
setSize(500 * scaleFactor, 200 * scaleFactor);

done(); done();
} }


protected: protected:
void onNanoDisplay() override void onNanoDisplay() override
{ {
const double scaleFactor = getScaleFactor();

// Selected file // Selected file
beginPath(); beginPath();
fontSize(14);
fontSize(14 * scaleFactor);
textAlign(ALIGN_LEFT | ALIGN_MIDDLE); textAlign(ALIGN_LEFT | ALIGN_MIDDLE);
fillColor(255, 255, 255, 255); fillColor(255, 255, 255, 255);
text(20, getHeight()/2, selectedFile, NULL);
text(20 * scaleFactor, getHeight()/2, selectedFile, NULL);
closePath(); closePath();


// Button background // Button background
@@ -66,7 +71,7 @@ protected:


// Button label // Button label
beginPath(); beginPath();
fontSize(14);
fontSize(14 * scaleFactor);
Rectangle<float> buttonTextBounds; Rectangle<float> buttonTextBounds;
textBounds(0, 0, "Press me", NULL, buttonTextBounds); textBounds(0, 0, "Press me", NULL, buttonTextBounds);
textAlign(ALIGN_CENTER | ALIGN_MIDDLE); textAlign(ALIGN_CENTER | ALIGN_MIDDLE);
@@ -138,8 +143,12 @@ protected:
{ {
const uint width = ev.size.getWidth(); const uint width = ev.size.getWidth();
const uint height = ev.size.getHeight(); const uint height = ev.size.getHeight();
const double scaleFactor = getScaleFactor();


buttonBounds = Rectangle<uint>(width - 120, height/2 - 20, 100, 40);
buttonBounds = Rectangle<uint>(width - 120 * scaleFactor,
height/2 - 20 * scaleFactor,
100 * scaleFactor,
40 * scaleFactor);
} }


void onFocus(const bool focus, CrossingMode) override void onFocus(const bool focus, CrossingMode) override


+ 1
- 1
tests/NanoImage.cpp View File

@@ -85,7 +85,7 @@ public:


setResizable(true); setResizable(true);
setSize(500, 500); setSize(500, 500);
// setGeometryConstraints(500, 500, false);
setGeometryConstraints(500, 500, false, true);
setTitle("NanoImage"); setTitle("NanoImage");
done(); done();




+ 27
- 4
tests/widgets/ExampleTextWidget.hpp View File

@@ -42,23 +42,28 @@ public:
// StandaloneWindow // StandaloneWindow
explicit ExampleTextWidget(Application& app); explicit ExampleTextWidget(Application& app);


// helper
double getScaleFactor();

protected: protected:
void onNanoDisplay() override void onNanoDisplay() override
{ {
const int width = BaseWidget::getWidth(); const int width = BaseWidget::getWidth();
const int height = BaseWidget::getHeight(); const int height = BaseWidget::getHeight();
const double scaleFactor = getScaleFactor();


NanoVG::fontSize(40.0f);
NanoVG::fontSize(40.0f * scaleFactor);
NanoVG::textAlign(NanoVG::Align(NanoVG::ALIGN_CENTER|NanoVG::ALIGN_MIDDLE)); NanoVG::textAlign(NanoVG::Align(NanoVG::ALIGN_CENTER|NanoVG::ALIGN_MIDDLE));
NanoVG::textLineHeight(20.0f);
NanoVG::textLineHeight(20.0f * scaleFactor);


NanoVG::beginPath(); NanoVG::beginPath();
NanoVG::fillColor(220,220,220,255); NanoVG::fillColor(220,220,220,255);
NanoVG::roundedRect(10, height/4+10, width-20, height/2-20, 3);
NanoVG::roundedRect(10 * scaleFactor, height/4 + 10 * scaleFactor,
width - 20 * scaleFactor, height/2 - 20 * scaleFactor, 3 * scaleFactor);
NanoVG::fill(); NanoVG::fill();


NanoVG::fillColor(0,150,0,220); NanoVG::fillColor(0,150,0,220);
NanoVG::textBox(10, height/2, width-20, "Hello World!", nullptr);
NanoVG::textBox(10 * scaleFactor, height/2, width - 20 * scaleFactor, "Hello World!", nullptr);
} }
}; };


@@ -71,6 +76,12 @@ ExampleTextWidget<NanoSubWidget>::ExampleTextWidget(Widget* const parent)
setSize(500, 300); setSize(500, 300);
} }


template<> inline
double ExampleTextWidget<NanoSubWidget>::getScaleFactor()
{
return getWindow().getScaleFactor();
}

// TopLevelWidget // TopLevelWidget
template<> inline template<> inline
ExampleTextWidget<NanoTopLevelWidget>::ExampleTextWidget(Window& windowToMapTo) ExampleTextWidget<NanoTopLevelWidget>::ExampleTextWidget(Window& windowToMapTo)
@@ -80,6 +91,12 @@ ExampleTextWidget<NanoTopLevelWidget>::ExampleTextWidget(Window& windowToMapTo)
setSize(500, 300); setSize(500, 300);
} }


template<> inline
double ExampleTextWidget<NanoTopLevelWidget>::getScaleFactor()
{
return NanoTopLevelWidget::getScaleFactor();
}

// StandaloneWindow // StandaloneWindow
template<> inline template<> inline
ExampleTextWidget<NanoStandaloneWindow>::ExampleTextWidget(Application& app) ExampleTextWidget<NanoStandaloneWindow>::ExampleTextWidget(Application& app)
@@ -90,6 +107,12 @@ ExampleTextWidget<NanoStandaloneWindow>::ExampleTextWidget(Application& app)
done(); done();
} }


template<> inline
double ExampleTextWidget<NanoStandaloneWindow>::getScaleFactor()
{
return Window::getScaleFactor();
}

template class ExampleTextWidget<NanoSubWidget>; template class ExampleTextWidget<NanoSubWidget>;
template class ExampleTextWidget<NanoTopLevelWidget>; template class ExampleTextWidget<NanoTopLevelWidget>;
template class ExampleTextWidget<NanoStandaloneWindow>; template class ExampleTextWidget<NanoStandaloneWindow>;


Loading…
Cancel
Save