Try switch UI Design to reality


notify

Design is not about visual it’s about build great product

So When You hear a User Interface word You think about visual and how staff look like but the truth is it’s about build great product Can User use it and understand how to use it even without look to manuals, by put interface into reality a lot of experts are advised the designers to learn programming to make it reality
but what about us (developers) , we must know how designers thinking to but a powerful product , user Can Use it.

Software Is A Tool.

So in thinking in that I’m try to make some reality interfaces with qml and QtQuick 2.0, I’m not professional or something like that but I’m try to change the way I’m thinking in UI(User Interface) and build my Own interface I’m start before Notify UI in doing that, I made photojouranl I still work in it you can watch the video in Youtube , but I’m finish the Notify UI and here we are !!.

Some pictures inspired me to do UI and the transitons animation I created ; I use sequential animation in it and some simple property such as X , Y or Opacity and Rotation and also I use parallel animation too to make fluid UI it’s pretty easy by qml, So I have to do a lot of work to reach The Top 😉 again thank you and I hope You like it.

Advertisements

qml prototype awesome tutorial


qml is great tools in qt in my tutorial qt Qt Style sheets Tutorial I’m using Css to create prototype for application to windows “form login” and i follow some steps to do that and finally I did it now I’ll do different thing in qml I will make special specs to make slider follow my steps and we will make with us amazing component let’s start :
in the beginning

Step 1: open Qt Creator and in file new project, in “Qt Quick Project” choose “Qt Quick UI” and name it slide.

Step 2: open slide.qml and make it empty because we want make it with own.

Step 3: now we will make this.

before it type the parent window and we will back to it later this the code



import QtQuick 1.0

Rectangle {
id: parentrect
width: 400
height: 350
}

this will be the parent window lets back to our slide first we will make two rectangle inside each other first own it the outer one I’ll make it round by type radius : 13 and the insider make it the radius : 16 so it will same like in the image second the secret in the slider to appear like it has edges and the ball in side it it’s the color and gradient the inner rectangle will be color and i put it’s color : “#ffffff” with opacity: 0.740 and border.color: “#807d76” the outer will make by color or gradient as you like here i use color but my self when i used gradient it’s appear amazing so i let color: “#ecdddd” and or what you like and to the both I’ll make the smooth : true and clip : true so it appear like in the image the code for outer and inner rectangle is :



Rectangle {
id:outerrect
x: 120
y: 142
width: 173
height: 51
color: "#ecdddd"
radius: 13
opacity: 1
smooth: true
clip: true
}

Rectangle {
id: innerrect
x: 125
y: 148
width: 163
height: 40
radius: 16
opacity: 0.740
scale: 1
border.width: 1
clip: true
smooth: true
border.color: "#807d76"
}

Step 4: we will make the ball in the slider.

we make make the ball with gradient to same like a ball first the radius to the ball is radius : 40 and the opacity : 0.260 and I’ll make the smooth : true , I’ll use two position in gradient position :0 the color will be color: “#f5eaea” and position : 1 the color will be color: “#dd0b0b” finally I’ll put border.color: “#8b7c7c” so it will be like what you see now and the code for ball will be:



Rectangle {
id:ballrect
x: 187
y: 148
width:40
height:40
radius: 40
smooth: true
gradient: Gradient {
GradientStop {
position: 0
color: "#f5eaea"
}

GradientStop {
position: 1
color: "#dd0b0b"
}
}
opacity: 0.260
border.color: "#8b7c7c"
}

Step 5: back to the parent window I’ll make it appear beautiful just for fun I’ll put gradient in it , I will let you try it this is the code for the parent window .



Rectangle {
id: parentrect
width: 400
height: 350
gradient: Gradient {
GradientStop {
position: 0
color: "#ad8e8e"
}

GradientStop {
position: 0.430
color: "#8d5050"
}

GradientStop {
position: 1
color: "#250404"
}
}
border.color: "#000000"
opacity: 0.850

Final step : I will use drag in qt system to enable to drag the ball in the slider horizontal in the the rectangle inner rectangle so I’ll use MouseArea in qml and in it put the anchors.fill to parent the windows parent and in the drag.target to the ball and drag.axis will be the X axis and maxdrag and mindrag to put it in the range between the inner rectangle; this is the code for mouse area.



MouseArea {
//hoverEnabled: false
anchors.fill: parent
drag.target: ball
drag.axis: Drag.XAxis
drag.maximumX: innerrect.x + innerrect.width - 40
drag.minimumX: innerrect.x
}

So the final result :

The complete code :



// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.0
import QtQuick 1.1

Rectangle {
id: parentrect
width: 400
height: 350
gradient: Gradient {
GradientStop {
position: 0
color: "#ad8e8e"
}

GradientStop {
position: 0.430
color: "#8d5050"
}

GradientStop {
position: 1
color: "#250404"
}
}
border.color: "#000000"
opacity: 0.850

Rectangle {
id:outerrect
x: 120
y: 142
width: 173
height: 51
color: "#ecdddd"
radius: 13
opacity: 1
smooth: true
clip: true
}

Rectangle {
id: innerrect
x: 125
y: 148
width: 163
height: 40
radius: 16
opacity: 0.740
scale: 1
border.width: 1
clip: true
smooth: true
border.color: "#807d76"
}

Rectangle {
id:ball
x: 187
y: 148
width:40
height:40
radius: 40
smooth: true
gradient: Gradient {
GradientStop {
position: 0
color: "#f5eaea"
}

GradientStop {
position: 1
color: "#dd0b0b"
}
}
opacity: 0.260
border.color: "#8b7c7c"
}

MouseArea {
anchors.fill: parent
drag.target: ball
drag.axis: Drag.XAxis
drag.maximumX: innerrect.x + innerrect.width - 40
drag.minimumX: innerrect.x
}
}

Now you can drag the slider and make beautiful element and prototype to your application thanks again to your time any mistake i did please tell me or send to me and accept my apologies to didn’t type anything for long time thank you again.

eslam mahgoub

Qt Stylesheets Tutorial


Stylesheets add spicy flavor to your boring Qt GUIs.

A Lot of people’s make projects by qt and didn’t release the beautiful Thing to decorate The GUIs with CSS’ish style sheets. Inspired by the web, stylesheets are a great way to stylize your Qt GUI, In this tutorial, we’ll create an example dialog in Qt using Designer and stylesheets. This tutorial assumes that you can get around in Qt Designer, and that you understand a little about Qt layouts.

Step 1 Create a new empty form, named MyLoginForm.

Step 2 Add a QFrame to your form, and apply a vertical layout to your form (any layout will work actually: vertical, horizontal or grid). Give your form about 30 pixels of layout margin around its perimeter. Name the QFrame “mainFrame”. When dealing with stylesheets, it’s convenient to name your widgets in Designer, even if you don’t plan to use them by name in your code (we won’t be writing any code besides CSS in this tutorial).

Step 3 In Designer’s object inspector, right-click on the top-level entry in the tree (called “MyLoginForm”), and select “Change styleSheet…” from the menu. You’ll get a little editor dialog like this:

This is where we specify the style sheet for our form. You can put a style sheet on any widget in your form, but I prefer to do all my stylizing at the parent widget (“MyLoginForm” in this case). I prefer to do it this way because you’ll never have to go hunting to find your style sheet — it’s all in one place in your form. Since stylesheets cascade down to the child widgets, you can stylize any widget in your form from this point.

Side note: “CSS” stands for “Cascading Style Sheets”

Let’s type in some CSS into the style sheet editor, like this:

#myloginForm {
background: Grayrgb(47,0,71);
min-width: 400;
max-width: 400;
min-height: 340;
max-height: 340;
}
#mainFrame {
border: 2px solid Grayrgb(47,0,71);
border-radius: 40px;
background: white;
}
After clicking OK on the editor dialog, you should see this:

If your’s doesn’t look like this, you may have forgotten to change the parent widget’s name to “MyLoginForm” or the QFrame’s name to “mainFrame” (yes, capitalization does matter — Qt stylesheets are case sensitive). Or you may have mistyped something into the CSS dialog.
One cool feature is that you get to preview the style changes right as you make them. You don’t have to compile, save, or run anything. Designer does a very good job of showing your stylesheet changes live (WYSIWYG for you old-timers).
Let me explain what we just did. In CSS, a pound sign, ‘#’, in front of a name is how we stylize an individual widget by that name. In our example, #MyLoginForm identifies the parent widget (i.e., the background area). All we did there is give it a gray and grade of the color background with background: grayrgb(47,0,71);.
For #mainFrame, we gave it a thick gray border, a white background, and rounded corners.

Step 4 Let’s add some widgets to make this dialog actually do something. Drag and drop a pair of QLineEdits, QLabels, and a single QPushButton on the form inside “mainFrame” and arrange them roughly like this:

Step 5 Now apply a grid layout to “mainFrame”. Just select “mainFrame” by clicking on it (taking care not to accidentally select one of the QLineEdits or QLabels instead). Then click the grid layout button in Designer’s toolbar (optionally, you can go to the menu bar and click “Form” -> “Lay Out in a Grid”, or just press Ctrl+5 for you keyboard hackers).

Then give your layout some margin. I used 50 pixels of margin and 15 pixels for both vertical and horizontal spacing.

This is what you should have now:

Step 5 Now apply a grid layout to “mainFrame”. Just select “mainFrame” by clicking on it (taking care not to accidentally select one of the QLineEdits or QLabels instead). Then click the grid layout button in Designer’s toolbar (optionally, you can go to the menu bar and click “Form” -> “Lay Out in a Grid”, or just press Ctrl+5 for you keyboard hackers).

Then give your layout some margin. I used 50 pixels of margin and 15 pixels for both vertical and horizontal spacing.

This is what you should have now:

Step 6 Let’s stylize those boring QPushButton and QLineEdits. Add this to the style sheet for MyLoginForm:
QLineEdit {
padding: 1px;
border-style: solid;
border: 2px solid gray;
border-radius: 8px;
}

QPushButton {
color: white;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88d, stop: 0.1 #99e, stop: 0.49 #77c, stop: 0.5 #66b, stop: 1 #77c);
border-width: 1px;
border-color: #339;
border-style: solid;
border-radius: 7;
padding: 3px;
font-size: 10px;
padding-left: 5px;
padding-right: 5px;
min-width: 50px;
max-width: 50px;
min-height: 13px;
max-height: 13px;
}

Notice that we didn’t use the pound sign this time. When you omit the pound sign, you are specifying a “class” of widgets to stylize instead of a single widget by name. So in this case, we stylized all widgets of type “QLineEdit” and “QPushButton” (and any widget that may inherit from those widgets too).

That gives the QPushButton a cool gradient look and rounds the edges of the QLineEdits, like this:

Step 7 Now let’s make that boring white background a gradient instead. Replace the “background: white;” line in the “#mainFrame” section with this instead:

background: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #eef, stop: 1 #ccf);

Now you should see this:

Step 8 Since stylizing is all about detail and little tweaks, let’s mess a bit with the label font and the background color by changing the background for “#MyLoginForm” to “background: white”, and adding this:

QLabel{
font: 75 italic 12pt “Monotype Corsiva”;
}
Now we get our finished product:

and I made another one take a look :

Isn’t it great how much you can do in Designer with style sheets? There are even things you can do with style sheets that can’t be done without writing lots of yucky C++ code. For example, you can change the border style of just a single side of a QFrame.
Oddities
There is one gotcha to keep in mind when using style sheets: Once you use a style sheet, it will often override other properties, like the “font” property or the “frameStyle” property. Keep this in mind when Designer changes properties you didn’t expect.
Conclusion
Now that I have discovered the power of style sheets in Qt, I use them whenever possible. What cool things have you done with Qt style sheets?