Improved "time of day" UI

This commit is contained in:
Michaël Lemaire 2015-08-20 01:15:08 +02:00
parent bbec14d904
commit 5c90e1ef07
23 changed files with 316 additions and 96 deletions

View file

@ -37,6 +37,24 @@ MainModelerWindow::MainModelerWindow()
water = new WaterModeler(this); water = new WaterModeler(this);
render_process = new RenderProcess(this, render_preview_provider); render_process = new RenderProcess(this, render_preview_provider);
// Bind file buttons
QObject *button_new = findQmlObject("tool_file_new");
if (button_new) {
connect(button_new, SIGNAL(clicked()), this, SLOT(newFile()));
}
QObject *button_save = findQmlObject("tool_file_save");
if (button_save) {
connect(button_save, SIGNAL(clicked()), this, SLOT(saveFile()));
}
QObject *button_load = findQmlObject("tool_file_load");
if (button_load) {
connect(button_load, SIGNAL(clicked()), this, SLOT(loadFile()));
}
QObject *button_exit = findQmlObject("tool_file_exit");
if (button_exit) {
connect(button_exit, SIGNAL(clicked()), this, SLOT(exit()));
}
} }
MainModelerWindow::~MainModelerWindow() MainModelerWindow::~MainModelerWindow()
@ -76,6 +94,32 @@ void MainModelerWindow::setState(const QString &stateName)
rootObject()->setProperty("state", stateName); rootObject()->setProperty("state", stateName);
} }
void MainModelerWindow::newFile()
{
getScenery()->autoPreset();
renderer->reset();
}
void MainModelerWindow::saveFile()
{
getScenery()->saveGlobal("saved.p3d");
}
void MainModelerWindow::loadFile()
{
Scenery loaded;
if (loaded.loadGlobal("saved.p3d") == Scenery::FILE_OPERATION_OK)
{
loaded.copy(scenery);
renderer->reset();
}
}
void MainModelerWindow::exit()
{
QGuiApplication::instance()->exit();
}
void MainModelerWindow::keyReleaseEvent(QKeyEvent *event) void MainModelerWindow::keyReleaseEvent(QKeyEvent *event)
{ {
if (getState() == "Render Dialog") if (getState() == "Render Dialog")
@ -113,30 +157,28 @@ void MainModelerWindow::keyReleaseEvent(QKeyEvent *event)
{ {
if (event->modifiers() & Qt::ControlModifier) if (event->modifiers() & Qt::ControlModifier)
{ {
QGuiApplication::instance()->exit(); exit();
} }
} }
else if (event->key() == Qt::Key_N) else if (event->key() == Qt::Key_N)
{ {
if (event->modifiers() & Qt::ControlModifier) if (event->modifiers() & Qt::ControlModifier)
{ {
getScenery()->autoPreset(); newFile();
renderer->reset();
} }
} }
else if (event->key() == Qt::Key_S) else if (event->key() == Qt::Key_S)
{ {
if (event->modifiers() & Qt::ControlModifier) if (event->modifiers() & Qt::ControlModifier)
{ {
getScenery()->saveGlobal("saved.p3d"); saveFile();
} }
} }
else if (event->key() == Qt::Key_L or event->key() == Qt::Key_O) else if (event->key() == Qt::Key_L or event->key() == Qt::Key_O)
{ {
if (event->modifiers() & Qt::ControlModifier) if (event->modifiers() & Qt::ControlModifier)
{ {
getScenery()->loadGlobal("saved.p3d"); loadFile();
renderer->reset();
} }
} }
else if (event->key() == Qt::Key_Z) else if (event->key() == Qt::Key_Z)

View file

@ -25,6 +25,12 @@ public:
inline OpenGLRenderer *getRenderer() const {return renderer;} inline OpenGLRenderer *getRenderer() const {return renderer;}
inline ModelerCameras *getCamera() const {return cameras;} inline ModelerCameras *getCamera() const {return cameras;}
public slots:
void newFile();
void saveFile();
void loadFile();
void exit();
protected: protected:
virtual void keyReleaseEvent(QKeyEvent *event) override; virtual void keyReleaseEvent(QKeyEvent *event) override;

View file

@ -4,9 +4,8 @@ import QtQuick.Layouts 1.1
Item { Item {
default property alias children : inner_layout.children default property alias children : inner_layout.children
property alias spacing : inner_layout.spacing
property int value property int value
width: 100
height: 32
ExclusiveGroup { ExclusiveGroup {
id: choice_group id: choice_group

View file

@ -7,18 +7,23 @@ Rectangle {
property bool checked: false property bool checked: false
property ExclusiveGroup exclusiveGroup: null property ExclusiveGroup exclusiveGroup: null
property int value property int value
property int padding: 4
color: "#333333" color: "#333333"
radius: padding * 2
signal toggled(bool value) signal toggled(bool value)
width: 20 width: 40
height: 20 height: 40
Image { Image {
anchors.fill: parent id: icon_image
source: parent.icon source: parent.icon
antialiasing: true width: parent.width - 2 * parent.padding
height: parent.height - 2 * parent.padding
anchors.centerIn: parent
antialiasing: true
} }
MouseArea { MouseArea {
@ -35,6 +40,12 @@ Rectangle {
onCheckedChanged: choice_item.toggled(checked) onCheckedChanged: choice_item.toggled(checked)
Behavior on color {
PropertyAnimation {
duration: 200
}
}
states: [ states: [
State { State {
name: "Checked" name: "Checked"
@ -42,7 +53,7 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: choice_item target: choice_item
color: "#999999" color: "#dddddd"
} }
} }

View file

@ -4,22 +4,21 @@ BaseRectangle {
property ToolbarButton tool property ToolbarButton tool
id: panel id: panel
enabled: false
width: 200 width: 200
height: parent.height - 100 height: primary_toolbar.current ? primary_toolbar.current.height : 10
color: "#a0909090" color: "#40909090"
anchors.right: parent.right anchors.left: primary_toolbar.current ? primary_toolbar.current.right : parent.left
anchors.verticalCenter: parent.verticalCenter anchors.top: primary_toolbar.current ? primary_toolbar.current.top : parent.top
states: [ states: [
State { State {
name: "Active" name: "hidden"
when: tool.selected when: !tool.selected
PropertyChanges { PropertyChanges {
target: panel target: panel
enabled: true enabled: false
} }
} }

View file

@ -10,4 +10,3 @@ Rectangle {
} }
} }
} }

View file

@ -0,0 +1,11 @@
import QtQuick 2.0
Toolbar {
enabled: false
height: parent.height - primary_toolbar.height
anchors.left: primary_toolbar.left
anchors.top: primary_toolbar.bottom
onEnabledChanged: primary_toolbar.current = this
}

View file

@ -1,29 +1,22 @@
import QtQuick 2.0 import QtQuick 2.0
BaseRectangle { Toolbar {
id: camera_choice id: camera_choice
width: 200 horizontal: false
height: 50
color: "#90888888" color: "#90888888"
objectName: "camera_choice" objectName: "camera_choice"
Row { ToolbarButton {
id: inner_space id: camera_choice_render
anchors.centerIn: parent picture: "images/tab_display.png"
spacing: 15 hovertext: qsTr("Final render camera")
selected: true
}
ToolbarButton { ToolbarButton {
id: camera_choice_render id: camera_choice_topdown
picture: "images/tab_display.png" picture: "images/display_topdown.png"
hovertext: qsTr("Switch to the final camera") hovertext: qsTr("Top-down camera")
selected: true
}
ToolbarButton {
id: camera_choice_topdown
picture: "images/display_topdown.png"
hovertext: qsTr("Switch to the top-down camera")
}
} }
states: [ states: [

View file

@ -0,0 +1,15 @@
import QtQuick 2.0
Image {
signal clicked()
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
parent.clicked();
}
}
}

View file

@ -3,10 +3,11 @@ import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
BasePanel { BasePanel {
width: 70 id: daytime
width: 100
objectName: "atmosphere_daytime" objectName: "atmosphere_daytime"
default property real value: day_night.value == 2 ? 1.0 : slider.value * 0.54 + 0.23; default property real value: day_night.value == 2 ? 0.0 : slider.value * 0.54 + 0.23;
signal changed(real value) signal changed(real value)
onValueChanged: { onValueChanged: {
@ -20,15 +21,19 @@ BasePanel {
ColumnLayout ColumnLayout
{ {
anchors.fill: parent height: parent.height
anchors.margins: 10 anchors.horizontalCenter: parent.horizontalCenter
spacing: 20 spacing: 20
Item {height: 1}
BaseChoice { BaseChoice {
id: day_night id: day_night
width: parent.width
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: 10
width: 90
height: 40
BaseChoiceItem { BaseChoiceItem {
icon: "images/icon_atmosphere_day.png" icon: "images/icon_atmosphere_day.png"
@ -47,7 +52,97 @@ BasePanel {
Layout.maximumWidth: 15 Layout.maximumWidth: 15
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
visible: day_night.value == 1
} }
Grid {
id: clock
property int hour: daytime.value * 86400 / 3600
property int minute: (daytime.value * 86400 - 3600 * hour) / 60
property int second: daytime.value * 86400 - 3600 * hour - 60 * minute
rows: 3
columns: 5
rowSpacing: 4
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_up.png"
onClicked: slider.value += (1.0 / 24.0) / 0.54
}
Item {width: 1; height: 1}
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_up.png"
onClicked: slider.value += (1.0 / 3600.0) / 0.54
}
Item {width: 1; height: 1}
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_up.png"
onClicked: slider.value += (1.0 / 86400.0) / 0.54
}
Text {
text: (clock.hour > 9 ? "" : "0") + clock.hour.toString()
font.pixelSize: 14
}
Text {
text: " : "
font.pixelSize: 14
}
Text {
text: (clock.minute > 9 ? "" : "0") + clock.minute.toString()
font.pixelSize: 14
}
Text {
text: " : "
font.pixelSize: 14
}
Text {
text: (clock.second > 9 ? "" : "0") + clock.second.toString()
font.pixelSize: 14
}
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_down.png"
onClicked: slider.value -= (1.0 / 24.0) / 0.54
}
Item {width: 1; height: 1}
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_down.png"
onClicked: slider.value -= (1.0 / 1440.0) / 0.54
}
Item {width: 1; height: 1}
ClickableImage {
width: 20
height: 10
source: "qrc:/images/arrow_down.png"
onClicked: slider.value -= (1.0 / 86400.0) / 0.54
}
}
Item {height: 1}
} }
states: [
State {
name: "night"
when: day_night.value == 2
PropertyChanges {
target: slider
enabled: false
}
PropertyChanges {
target: clock
enabled: false
}
}
]
} }

View file

@ -1,7 +1,7 @@
import QtQuick 2.2 import QtQuick 2.2
BasePanel { BasePanel {
width: 20 width: 40
BaseSlider { BaseSlider {
objectName: "water_height" objectName: "water_height"
@ -9,5 +9,6 @@ BasePanel {
maximumValue: 1 maximumValue: 1
orientation: Qt.Vertical orientation: Qt.Vertical
anchors.fill: parent anchors.fill: parent
anchors.margins: 10
} }
} }

View file

@ -3,13 +3,16 @@ import QtQuick 2.0
BaseRectangle { BaseRectangle {
default property alias children : inner_space.children default property alias children : inner_space.children
width: 70 property bool horizontal: false
height: parent.height width: horizontal ? parent.width : 60
height: horizontal ? 60 : parent.height
color: "#50888888" color: "#50888888"
Column { Grid {
id: inner_space id: inner_space
spacing: (parent.height - children.length * tool_terrain.height) / (children.length + 1) columns: parent.horizontal ? children.length : 1
rows: parent.horizontal ? 1 : children.length
spacing: (parent.horizontal ? (parent.width - children.length * tool_terrain.width) : (parent.height - children.length * tool_terrain.height)) / (children.length + 1)
anchors.centerIn: parent anchors.centerIn: parent
} }

View file

@ -59,6 +59,7 @@ Item {
onEntered: { onEntered: {
parent.hovered = true; parent.hovered = true;
tooltip_widget.hovertext = hovertext; tooltip_widget.hovertext = hovertext;
tooltip_widget.hovered = this;
} }
onExited: { onExited: {
parent.hovered = false; parent.hovered = false;

View file

@ -1,16 +1,31 @@
import QtQuick 2.0 import QtQuick 2.0
BaseRectangle { BaseRectangle {
property var hovered
property string helptext property string helptext
property string hovertext property string hovertext
width: content.width width: content.width + 10
height: content.height height: content.height + 10
enabled: content.deftext ? true : false
anchors.margins: 5
color: "#99000000" color: "#99000000"
Text { Text {
id: content id: content
color: "white" color: "white"
text: parent.helptext || parent.hovertext font.bold: true
font.pixelSize: 12
property string deftext: parent.helptext || parent.hovertext
property string oldtext
text: deftext || oldtext
anchors.centerIn: parent
onDeftextChanged: {
if (deftext)
{
oldtext = deftext;
}
}
} }
} }

View file

@ -28,5 +28,14 @@
<file>RenderDialog.qml</file> <file>RenderDialog.qml</file>
<file>CameraChoice.qml</file> <file>CameraChoice.qml</file>
<file>BaseRectangle.qml</file> <file>BaseRectangle.qml</file>
<file>BaseSecondaryToolbar.qml</file>
<file>images/icon_exit.png</file>
<file>images/icon_file_load.png</file>
<file>images/icon_file_new.png</file>
<file>images/icon_file_save.png</file>
<file>images/tab_file.png</file>
<file>images/arrow_down.png</file>
<file>images/arrow_up.png</file>
<file>ClickableImage.qml</file>
</qresource> </qresource>
</RCC> </RCC>

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 834 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 760 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -11,66 +11,58 @@ OpenGLView {
Tooltip { Tooltip {
id: tooltip_widget id: tooltip_widget
anchors.top: parent.top anchors.top: primary_toolbar.bottom
anchors.right: parent.right anchors.right: primary_toolbar.right
} }
Toolbar { Toolbar {
id: primary_toolbar id: primary_toolbar
horizontal: true
color: "#90888888" color: "#90888888"
property var current
anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
ToolbarButton {
id: tool_display
picture: "images/tab_display.png"
hovertext: qsTr("Display options")
}
ToolbarButton { ToolbarButton {
id: tool_terrain id: tool_terrain
picture: "images/tab_terrain.png" picture: "images/tab_terrain.png"
hovertext: qsTr("Terrain edition")
} }
ToolbarButton { ToolbarButton {
id: tool_textures id: tool_textures
picture: "images/tab_textures.png" picture: "images/tab_textures.png"
hovertext: qsTr("Terrain textures")
} }
ToolbarButton { ToolbarButton {
id: tool_water id: tool_water
picture: "images/icon_water.png" picture: "images/icon_water.png"
hovertext: "Water tools" hovertext: qsTr("Water tools")
} }
ToolbarButton { ToolbarButton {
id: tool_atmosphere id: tool_atmosphere
picture: "images/icon_atmosphere.png" picture: "images/icon_atmosphere.png"
hovertext: "Atmosphere/weather tools" hovertext: qsTr("Atmosphere/weather control")
} }
ToolbarButton { ToolbarButton {
id: tool_clouds id: tool_clouds
picture: "images/tab_clouds.png" picture: "images/tab_clouds.png"
hovertext: qsTr("Cloud layers")
} }
ToolbarButton { ToolbarButton {
id: tool_render id: tool_render
picture: "images/tab_render.png" picture: "images/tab_render.png"
hovertext: qsTr("Rendering")
} }
}
Toolbar {
id: display_toolbar
enabled: false
anchors.left: primary_toolbar.right
ToolbarButton { ToolbarButton {
id: tool_display_topdown id: tool_file
picture: "images/display_topdown.png" picture: "images/tab_file.png"
hovertext: qsTr("Top-down view") hovertext: qsTr("File")
helptext: qsTr("Drag the mouse on the map to change the viewpoint.")
} }
} }
Toolbar { BaseSecondaryToolbar {
id: water_toolbar id: water_toolbar
enabled: false
anchors.left: primary_toolbar.right
ToolbarButton { ToolbarButton {
id: tool_water_level id: tool_water_level
@ -79,10 +71,8 @@ OpenGLView {
} }
} }
Toolbar { BaseSecondaryToolbar {
id: atmosphere_toolbar id: atmosphere_toolbar
enabled: false
anchors.left: primary_toolbar.right
ToolbarButton { ToolbarButton {
id: tool_atmosphere_daytime id: tool_atmosphere_daytime
@ -91,10 +81,8 @@ OpenGLView {
} }
} }
Toolbar { BaseSecondaryToolbar {
id: render_toolbar id: render_toolbar
enabled: false
anchors.left: primary_toolbar.right
ToolbarButton { ToolbarButton {
id: tool_render_quick id: tool_render_quick
@ -104,10 +92,43 @@ OpenGLView {
} }
} }
BaseSecondaryToolbar {
id: file_toolbar
ToolbarButton {
id: tool_file_new
objectName: "tool_file_new"
picture: "images/icon_file_new.png"
hovertext: qsTr("Generate a new scene")
}
ToolbarButton {
id: tool_file_save
objectName: "tool_file_save"
picture: "images/icon_file_save.png"
hovertext: qsTr("Save the current scene to a file")
}
ToolbarButton {
id: tool_file_load
objectName: "tool_file_load"
picture: "images/icon_file_load.png"
hovertext: qsTr("Load a scene from a file")
}
ToolbarButton {
id: tool_file_exit
objectName: "tool_file_exit"
picture: "images/icon_exit.png"
hovertext: qsTr("Exit the program")
}
}
CameraChoice { CameraChoice {
id: camera_choice id: camera_choice
anchors.bottom: main_ui.bottom height: 150
anchors.horizontalCenter: main_ui.horizontalCenter anchors.right: main_ui.right
anchors.verticalCenter: main_ui.verticalCenter
} }
RenderDialog { RenderDialog {
@ -126,15 +147,6 @@ OpenGLView {
} }
states: [ states: [
State {
name: "Display Mode"
when: tool_display.selected
PropertyChanges {
target: display_toolbar
enabled: true
}
},
State { State {
name: "Water Mode" name: "Water Mode"
when: tool_water.selected when: tool_water.selected
@ -162,6 +174,15 @@ OpenGLView {
enabled: true enabled: true
} }
}, },
State {
name: "File Mode"
when: tool_file.selected
PropertyChanges {
target: file_toolbar
enabled: true
}
},
State { State {
name: "Render Dialog" name: "Render Dialog"