UI cleanup and reorg, one page per example

This commit is contained in:
Sebastian Kügler 2013-03-09 03:44:02 +01:00
parent 749e88af02
commit 365628c648
6 changed files with 212 additions and 192 deletions

View File

@ -30,13 +30,44 @@ PlasmaComponents.Page {
property string shader
property alias shaderText: editor.text
property string pageName: "Shaders"
property string icon: "preferences-desktop-mouse"
property string pageName: "Editor"
property string icon: "accessories-text-editor"
anchors {
fill: parent
margins: _s
}
/*
ShaderEffectSource {
id: effectSource
sourceItem: editorPage
hideSource: hideSourceCheckbox.checked
}
ShaderEffect {
id: mainShader
anchors.fill: editorPage
property variant source: effectSource
property real f: 0
property real f2: 0
property int intensity: 1
smooth: true
}
PlasmaComponents.ToolButton {
iconSource: "dialog-close"
width: _h
height: width
visible: !(mainShader.fragmentShader == "" && mainShader.vertexShader == "")
anchors { top: parent.top; right: parent.right; }
onClicked: {
mainShader.fragmentShader = "";
mainShader.vertexShader = "";
fragmentPage.shader = ""
vertexPage.shader = ""
}
}
*/
PlasmaExtras.Heading {
id: heading
@ -66,7 +97,12 @@ PlasmaComponents.Page {
PlasmaComponents.Button {
id: applyButton
text: "Upload Shader"
onClicked: shader = editor.text
onClicked: {
shader = editor.text
print("Uploading new vertex shader: \n" + shader);
mainShader.vertexShader = shader;
}
anchors {
right: parent.right
bottom: parent.bottom
@ -74,5 +110,13 @@ PlasmaComponents.Page {
}
}
// PlasmaComponents.CheckBox {
// id: hideSourceCheckbox
// text: "Hide Source Item"
// anchors { bottom: parent.bottom; left: parent.left; margins: _s; }
// onCheckedChanged: effectSource.hideSource = checked
// }
}

View File

@ -47,15 +47,11 @@ PlasmaComponents.Page {
}
text: pageName
}
SimpleExample {
id: simpleShader
//parent: root
anchors.fill: examplesPage
parent: examplesPage.parent
opacity: 0.2
//source: effectSource
}
// SimpleExample {
// id: simpleShader
// //parent: root
// //source: effectSource
// }
Image {
id: imageItem
width: 200
@ -64,48 +60,48 @@ PlasmaComponents.Page {
///source: "http://vizzzion.org/blog/wp-content/uploads/2013/01/ktouch.png"
source: "file:///home/sebas/Pictures/Damselfly.jpg"
}
TubeExample {
id: tubeShader
anchors.fill: imageItem
source: ShaderEffectSource {
//sourceRect: Qt.rect(-50, -50, width+100, height+100)
//sourceRect: Qt.rect(10, 20, 50, 80)
sourceItem: imageItem
hideSource: hideSourceCheckbox.checked
}
}
GridView {
id: grid
anchors {
top: heading.bottom;
topMargin: _s
left: parent.left
right: parent.right
bottom: applyButton.top
bottomMargin: _s
}
model: VisualItemModel {
PlasmaComponents.Button {
checkable: true;
text: "Simple";
onClicked: {
simpleShader.visible = checked;
// fragmentPage.shaderText = simpleShader.fragmentShader;
// vertexPage.shaderText = simpleShader.vertexShader;
}
}
PlasmaComponents.Button {
checkable: true;
text: "Tube";
onClicked: {
tubeShader.visible = checked;
mainItem.opacity = checked ? 0.1 : 0.1
// fragmentPage.shaderText = tubeShader.fragmentShader;
// vertexPage.shaderText = tubeShader.vertexShader;
}
}
}
}
// TubeExample {
// id: tubeShader
// anchors.fill: imageItem
// source: ShaderEffectSource {
// //sourceRect: Qt.rect(-50, -50, width+100, height+100)
// //sourceRect: Qt.rect(10, 20, 50, 80)
// sourceItem: imageItem
// hideSource: hideSourceCheckbox.checked
// }
// }
// GridView {
// id: grid
// anchors {
// top: heading.bottom;
// topMargin: _s
// left: parent.left
// right: parent.right
// bottom: applyButton.top
// bottomMargin: _s
//
// }
// model: VisualItemModel {
// PlasmaComponents.Button {
// checkable: true;
// text: "Simple";
// onClicked: {
// simpleShader.visible = checked;
// // fragmentPage.shaderText = simpleShader.fragmentShader;
// // vertexPage.shaderText = simpleShader.vertexShader;
// }
// }
// PlasmaComponents.Button {
// checkable: true;
// text: "Tube";
// onClicked: {
// tubeShader.visible = checked;
// mainItem.opacity = checked ? 0.1 : 0.1
// // fragmentPage.shaderText = tubeShader.fragmentShader;
// // vertexPage.shaderText = tubeShader.vertexShader;
// }
// }
// }
// }
}

View File

@ -25,17 +25,35 @@ import org.kde.qtextracomponents 0.1 as QtExtras
// VertexPage
ShaderEffect {
PlasmaComponents.Page {
id: examplesPage
visible: false
//parent: root
//anchors.fill: source.sourceItem
property variant source: ShaderEffectSource {
sourceItem: mainItem
hideSource: true
//property string shader
property string pageName: "Shader Examples"
property string pageDescription: "Shader Examples"
property string icon: "weather-clear"
anchors {
fill: parent
margins: _s
}
//property variant source: effectSource
}
PlasmaExtras.Heading {
id: heading
level: 1
anchors {
top: parent.top;
left: parent.left
right: parent.right
}
text: pageName
}
PlasmaComponents.Label {
anchors {
top: heading.bottom;
left: parent.left;
right: parent.right;
}
text: pageDescription
}
}

View File

@ -18,21 +18,22 @@
import QtQuick 2.0
import org.kde.plasma.core 0.1 as PlasmaCore
import org.kde.plasma.components 0.1 as PlasmaComponents
import org.kde.plasma.extras 0.1 as PlasmaExtras
import org.kde.qtextracomponents 0.1 as QtExtras
// VertexPage
ShaderExample {
// parent: root
fragmentShader: { " \
void main(void) { \
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.3); \
} \
"
pageName: "Simple shader"
pageDescription: "Paints a red, translucent rectangle"
ShaderEffect {
anchors.fill: parent
anchors.topMargin: 48
opacity: 0.2
fragmentShader: { " \
void main(void) { \
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.3); \
} \
"
}
}
}

View File

@ -18,70 +18,74 @@
import QtQuick 2.0
import org.kde.plasma.core 0.1 as PlasmaCore
import org.kde.plasma.components 0.1 as PlasmaComponents
import org.kde.plasma.extras 0.1 as PlasmaExtras
import org.kde.qtextracomponents 0.1 as QtExtras
// VertexPage
ShaderExample {
//anchors.fill: imageItem
//property real time
property variant mouse
property variant resolution
pageName: "Wave"
pageDescription: "Makes an image wobble"
property int fadeDuration: 250
property real amplitude: 0.04 * 0.4
property real frequency: 20
property real time: 0
// source: ShaderEffectSource {
// sourceItem: imageItem
// hideSource: true
// }
//
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
Behavior on amplitude { NumberAnimation { duration: fadeDuration } }
//vertexShader: ""
fragmentShader: { mainItem.opacity = 0;
"uniform lowp float qt_Opacity;" +
"uniform highp float amplitude;" +
"uniform highp float frequency;" +
"uniform highp float time;" +
"uniform sampler2D source;" +
"varying highp vec2 qt_TexCoord0;" +
"void main() {" +
" highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
"}"
/*
fragmentShader: {
"uniform float time; \
uniform vec2 mouse; \
uniform vec2 resolution; \
void main( void ) \
{ \
// vec2 uPos = ( gl_FragCoord.xy / resolution.xy );//normalize wrt y axis \
// //suPos -= vec2((resolution.x/resolution.y)/2.0, 0.0);//shift origin to center \
// uPos.x -= 8.0; \
// uPos.y -= 0.5; \
// vec3 color = vec3(0.0); \
// float vertColor = 0.0; \
// for( float i = 0.0; i < 15.0; ++i ) { \
// float t = time * (0.9); \
// uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1; \
// float fTemp = abs(1.0 / uPos.y / 100.0); \
// vertColor += fTemp; \
// color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 ); \
// } \
// vec4 color_final = vec4(color, 1.0); \
// gl_FragColor = color_final; \
} \
"
*/
Image {
id: imageItem
anchors.fill: parent
anchors.topMargin: 48
}
}
ShaderEffect {
anchors.fill: imageItem
//property real time
property variant mouse
property variant resolution
property int fadeDuration: 250
property real amplitude: 0.04 * 0.4
property real frequency: 20
property real time: 0
source: ShaderEffectSource {
sourceItem: imageItem
hideSource: true
}
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
Behavior on amplitude { NumberAnimation { duration: fadeDuration } }
//vertexShader: ""
fragmentShader: { mainItem.opacity = 0;
"uniform lowp float qt_Opacity;" +
"uniform highp float amplitude;" +
"uniform highp float frequency;" +
"uniform highp float time;" +
"uniform sampler2D source;" +
"varying highp vec2 qt_TexCoord0;" +
"void main() {" +
" highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
"}"
/*
fragmentShader: {
"uniform float time; \
uniform vec2 mouse; \
uniform vec2 resolution; \
void main( void ) \
{ \
// vec2 uPos = ( gl_FragCoord.xy / resolution.xy );//normalize wrt y axis \
// //suPos -= vec2((resolution.x/resolution.y)/2.0, 0.0);//shift origin to center \
// uPos.x -= 8.0; \
// uPos.y -= 0.5; \
// vec3 color = vec3(0.0); \
// float vertColor = 0.0; \
// for( float i = 0.0; i < 15.0; ++i ) { \
// float t = time * (0.9); \
// uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1; \
// float fTemp = abs(1.0 / uPos.y / 100.0); \
// vertColor += fTemp; \
// color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 ); \
// } \
// vec4 color_final = vec4(color, 1.0); \
// gl_FragColor = color_final; \
} \
"
*/
}
}
}

View File

@ -31,10 +31,6 @@ Item {
property int _s: theme.iconSizes.small
property int _h: theme.iconSizes.desktop
PlasmaCore.DataSource {
id: dataSource
}
Item {
id: mainItem
anchors.fill: parent
@ -49,9 +45,9 @@ Item {
}
height: _h
PlasmaComponents.TabButton { tab: examplesPage; iconSource: examplesPage.icon; }
PlasmaComponents.TabButton { tab: wobbleExample; text: tab.pageName; }
PlasmaComponents.TabButton { tab: simpleExample; text: tab.pageName; }
PlasmaComponents.TabButton { tab: vertexPage; iconSource: vertexPage.icon; }
PlasmaComponents.TabButton { tab: fragmentPage; iconSource: fragmentPage.icon; }
}
PlasmaComponents.TabGroup {
@ -63,54 +59,15 @@ Item {
bottom: parent.bottom
}
//currentTab: tabBar.currentTab
ExamplesPage {
id: examplesPage
WobbleExample {
id: wobbleExample
}
VertexPage {
SimpleExample {
id: simpleExample
}
EditorPage {
id: vertexPage
}
FragmentPage {
id: fragmentPage
}
}
}
ShaderEffectSource {
id: effectSource
sourceItem: mainItem
hideSource: hideSourceCheckbox.checked
}
ShaderEffect {
id: mainShader
anchors.fill: mainItem
property variant source: effectSource
property real f: 0
property real f2: 0
property int intensity: 1
smooth: true
}
PlasmaComponents.CheckBox {
id: hideSourceCheckbox
text: "Hide Source Item"
anchors { bottom: parent.bottom; left: parent.left; margins: _s; }
onCheckedChanged: effectSource.hideSource = checked
}
PlasmaComponents.ToolButton {
iconSource: "dialog-close"
width: _h
height: width
visible: !(mainShader.fragmentShader == "" && mainShader.vertexShader == "")
anchors { top: parent.top; right: parent.right; }
onClicked: {
mainShader.fragmentShader = "";
mainShader.vertexShader = "";
fragmentPage.shader = ""
vertexPage.shader = ""
}
}