Commit ff01f3f5 authored by Alessandro Portale's avatar Alessandro Portale

Initial import

parents
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Templates 2.1 as T
T.Button {
id: control
text: qsTr("Button")
implicitWidth: background.implicitWidth
implicitHeight: background.implicitHeight
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: "black"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: BorderImage {
id: background
anchors.fill: parent
source: control.down ? "../imagine-assets/button-background-down.png"
: control.enabled ?
"../imagine-assets/button-background.png"
: "../imagine-assets/button-background-disabled.png"
border.left: 20; border.top: 20
border.right: 20; border.bottom: 20
}
}
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Templates 2.1 as T
T.CheckBox {
id: control
implicitWidth: frame.implicitWidth + contentItem.implicitWidth
implicitHeight: frame.implicitHeight
indicator: Item {
Image {
id: frame
source: control.enabled ?
"../imagine-assets/checkbox-frame.png"
: "../imagine-assets/checkbox-frame-disabled.png"
}
Image {
id: indicator
source: control.enabled ?
"../imagine-assets/checkbox-indicator.png"
: "../imagine-assets/checkbox-indicator-disabled.png"
Behavior on opacity {
PropertyAnimation {
duration: 100
easing.type: Easing.InQuad
}
}
}
states: [
State {
name: "unchecked"
when: !control.checked
PropertyChanges {
target: indicator
opacity: 0
}
},
State {
name: "checked"
when: control.checked
PropertyChanges {
target: indicator
opacity: 1
}
}
]
}
background: Rectangle {
id: background
anchors.fill: parent
color: "gray"
opacity: control.down ? 0.2 : 0
}
contentItem: Text {
leftPadding: frame.width
opacity: enabled ? 1.0 : 0.3
text: control.text
font: control.font
visible: control.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Templates 2.1 as T
T.CheckBox {
id: control
implicitWidth: frame.implicitWidth + contentItem.implicitWidth
implicitHeight: frame.implicitHeight
indicator: Item {
Image {
id: frame
source: control.enabled ?
"../imagine-assets/radiobutton-frame.png"
: "../imagine-assets/radiobutton-frame-disabled.png"
}
Image {
id: indicator
source: control.enabled ?
"../imagine-assets/radiobutton-indicator.png"
: "../imagine-assets/radiobutton-indicator-disabled.png"
Behavior on opacity {
PropertyAnimation {
duration: 100
easing.type: Easing.InQuad
}
}
}
states: [
State {
name: "unchecked"
when: !control.checked
PropertyChanges {
target: indicator
opacity: 0
}
},
State {
name: "checked"
when: control.checked
PropertyChanges {
target: indicator
opacity: 1
}
}
]
}
background: Rectangle {
id: background
anchors.fill: parent
color: "gray"
opacity: control.down ? 0.2 : 0
}
contentItem: Text {
leftPadding: frame.width
opacity: enabled ? 1.0 : 0.3
text: control.text
font: control.font
visible: control.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Templates 2.1 as T
T.Slider {
id: control
implicitWidth: 100
implicitHeight: handle.implicitHeight
background: Item {
Rectangle {
id: background
anchors.fill: parent
color: "gray"
opacity: control.pressed ? 0.2 : 0
}
BorderImage {
width: control.width
border.left: 20; border.top: 20
border.right: 20; border.bottom: 20
source: control.enabled ?
"../imagine-assets/slider-background-off.png"
: "../imagine-assets/slider-background-off-disabled.png"
}
BorderImage {
id: groove
width: handle.x + handle.width
border.left: 20; border.top: 20
border.right: 20; border.bottom: 20
source: control.enabled ?
"../imagine-assets/slider-background-on.png"
: "../imagine-assets/slider-background-on-disabled.png"
}
}
handle: Item {
Image {
id: handle
x: control.visualPosition * (control.width - handle.width)
source: control.enabled ?
"../imagine-assets/slider-handle.png"
: "../imagine-assets/slider-handle-disabled.png"
}
}
}
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Templates 2.1 as T
T.Switch {
id: control
implicitWidth: background_on.implicitWidth + contentItem.implicitWidth
implicitHeight: background_on.implicitHeight
background: Rectangle {
id: background
anchors.fill: parent
color: "gray"
opacity: control.down ? 0.2 : 0
}
indicator: Item {
Image {
id: background_on
source: control.enabled ?
"../imagine-assets/switch-background-on.png"
: "../imagine-assets/switch-background-on-disabled.png"
}
Image {
id: background_off
source: control.enabled ?
"../imagine-assets/switch-background-off.png"
: "../imagine-assets/switch-background-off-disabled.png"
opacity: 0
Behavior on opacity {
PropertyAnimation {
duration: 200
}
}
}
Image {
id: indicator
source: control.enabled ?
"../imagine-assets/switch-indicator.png"
: "../imagine-assets/switch-indicator-disabled.png"
Behavior on x {
PropertyAnimation {
duration: 100
easing.type: Easing.InQuad
}
}
}
states: [
State {
name: "off"
when: !control.checked
PropertyChanges {
target: background_off
opacity: 1
}
PropertyChanges {
target: indicator
x: 0
}
},
State {
name: "on"
when: control.checked
PropertyChanges {
target: background_off
opacity: 0
}
PropertyChanges {
target: indicator
x: background_on.width - indicator.width
}
}
]
}
contentItem: Text {
leftPadding: background_on.width
opacity: enabled ? 1.0 : 0.3
text: control.text
font: control.font
visible: control.text
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.0
Item {
id: form
width: 320
height: 330
Pane {
id: pane
anchors.fill: parent
enabled: enabled_checkbox.checked
GridLayout {
anchors.horizontalCenter: parent.horizontalCenter
rows: 3
columns: 2
Switch {
id: switch1
text: "Switch 1"
Layout.preferredHeight: 40
Layout.preferredWidth: 151
checked: true
}
Switch {
id: switch2
text: qsTr("Switch 2")
Layout.preferredHeight: 40
Layout.preferredWidth: 151
checked: false
}
RadioButton {
id: radioButton
text: qsTr("Radio Button 1")
checked: true
}
RadioButton {
id: radioButton2
text: qsTr("Radio Button 2")
}
CheckBox {
id: checkBox1
text: qsTr("Check Box 1")
checked: true
}
CheckBox {
id: checkBox2
text: qsTr("Check Box 2")
}
}
Button {
id: button
y: 190
width: 206
height: 50
text: qsTr("Button")
anchors.horizontalCenter: parent.horizontalCenter
}
Slider {
id: slider
y: 150
width: 299
height: 40
value: 0.5
anchors.horizontalCenter: parent.horizontalCenter
}
}
CheckBox {
id: enabled_checkbox
x: 5
y: 281
text: qsTr("enabled")
checked: true
}
}
# Research: Styling Qt Quick Controls 2 with Photoshop
## The goal of this experiment
This project is an experiment on the way of searching for a suitable workflow which enables a visual designer to style the user interface of a [Qt Quick Controls 2 based application](http://doc.qt.io/qt-5/qtquickcontrols2-index.html) based application. The designer shall not have to leave the design tool (e.g. Photoshop) and the style shall automatically be transferred to the application. This proces is supposed to be repeatable.
## The styling mechanism
The styling mechanism for Qt Quick Controls 2 used by this experiment had been [introduced in Qt 5.8](http://doc.qt.io/qt-5/qtquickcontrols2-customize.html). It requires custom styling code to be part of the application. The styling code essentially loads the images which are generated by Photoshop and styles single controls with those. This example works with Qt 5.8 and 5.9.
The plan is to have that feature of image-based styling [built-into Qt Quick Controls 2](https://codereview.qt-project.org/188127/) in an upcoming Qt version.
## The design tool templates
The other side of the workflow is the design tool template which is provided to a designer for customization. For Photoshop it will be a .psd document with the Qt Quick Controls 2 palette and it sub items laid-out and editable. The structure of the document (e.g. layer names) ensure that the exported images have the right names and formats. Currently, the [built-in Asset Exporter of Photoshop](https://helpx.adobe.com/photoshop/using/generate-assets-layers.html) is employed. We are however also studying other options.
# The workflow in pictures
![style in photoshop](photoshop.png "The style in Photoshop")
The designer can work with the provided style template and thweak it in order to meet the desired look.
![style in ide](ide.png "The style in Qt Creator")
The Qt Quick Designer tool in the Qt Creator IDE provides a preview of the style while the form is being edited.
![style on target](targetdevice.jpg "The styled application on the Target")
The launched application (in this example on an embedded device) is using the style.
The styling has been [demonstrated and videorecorded](https://www.youtube.com/watch?v=M6filklNtbo) on the Embedded World 2017.
This diff is collapsed.
ide.png

72.2 KB