I'm making user interface using QML.
I was asked to use 9.png image files for this UI.
The size of this image is 82X94 pixels and I have to use this image for 1280X92 background.
I wrote the source code below.
Image {
id: bgMode
x: 0; y: 0
width: 1280; height: 92
source: "qrc:/res/img/bg_mode.9.png"
}
However, this code breaks the image while stretching it vertically.
I'm supposed to stretch the image without making it like slimy dough.
I thought there would be some program which edits 9 patch image files.
So I googled and found this.
Hoever, I couldn't run this program using JRE.
The error message says it cannot find 'com.alee.extended.ninepatch.NinePatchEditorFrame'.
I gave up using this program here.
I googled if QML supports 9 patch image.
Image Style type seems relevant, but I couldn't figure out how to actually use it.
This stackoverflow page recommends BorderImage type. So I wrote source code below.
BorderImage {
id: bgMode
x: 0
y: 0
width: 1280; height: 92
verticalTileMode: BorderImage.Round
horizontalTileMode: BorderImage.Stretch
border.left: 1; border.right: 1
source: "qrc:/res/img/bg_mode.9.png"
}
But this code still breaks the image.
How to use 9 patch images on QML?
Is there something I'm missing or doing wrong?
On the Qt documentation page you have very good explanation. https://doc.qt.io/qt-5/qml-qtquick-borderimage.html
The only thing you need to know is where those 2 vertical and two horizontal lines are placed (distance from the edge of the image).
border { left: 30; top: 30; right: 30; bottom: 30 }
Image will be spitted into 9 regions. If you do not want to stretched them horizontally but repeat use horizontalTileMode: BorderImage.Repeat property. Other modes are listed here https://doc.qt.io/qt-5/qml-qtquick-borderimage.html#horizontalTileMode-prop
Related
I'm designing this for a touchscreen, so the scrollbar handles need to be extra big, but so far, this is all I can get:
In the constructor of the list widget:
myScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
myScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
myScrollArea->verticalScrollBar()->setFixedWidth(pitch_height);
myScrollArea->setWidget(this);
pitch_height is the size of the icons. I figured that'd be about right for the scrollbar too. Something roughly like this:
Use style sheets to modify scroll bar
QScrollBar:vertical {
width: 100px;
}
Relevant documentation:
Customizing QScrollBar
Qt Style Sheets Reference
A few years ago I made some CSS code customization on my forum. Since then (probably, due to updates or some other reason), right now it doesn't show it right (the way it was). The idea is that I've got one color of a bg where there's a name of a poster and his avatar and then there's another color where there's text that he writes (verbiage of the post itself). I'm attaching the print screen on which I show what exactly do I mean.
Also I would tell what I did so far to achieve the effect (though it's not exactly right at the moment).
In file Themes/default/css/index.css (line 1921) I added this line of code:
background:url('http://idevsky.com/images/post_bg.png') repeat-y;
And also I changed the height to 0px from 11px in two places:
line 972 and line 987
You can see it if you go to:
http://idevsky.com/forum/index.php
Test account credentials:
j.smith qwerty
Then you click on John Smith (the only board) and then you go to "test" thread (the only one there).
There're 3 different colors:
1) the one where the poster name and avatar is (#dfecf5), it's the way it should be.
2) then there's one that covers the majority of post text area (#ebf3fb), it's the right color, it just doesn't spread right
3) then there's one irrelevant (wrong) color (#f0f4f7) which you can hardly see in the second post (the one that j.smith wrote) and it starts from the arrow point to the right.
print screen
Just remove your image and give it a background color also give your poster class a background color.
.post_wrapper {
background: white;
}
.poster {
background: aliceblue;
}
Search index.css and you change the background-color of .windowbg and .windowbg2 in the CSS file to #ebf3fb as the following:
.windowbg, #preview_body {[enter image description here][1]
color: #000;
background-color: #ebf3fb;
}
.windowbg2 {
color: #000;
background-color: #ebf3fb;
}
Check out this picture to help you find the code:
http://i.stack.imgur.com/MfJaB.png
It appears to me that if the map container is placed anywhere but the top left corner of the page, pinch zoom is no longer centered properly. I have encountered this problem on iPad 2 (Safari 5.1), iPhone 5 (Safari 7.0), Sony Xperia tablet Z (Chrome 34.0).
If i have missed something obvious as comes to forcing this thing into expected behavior, I would be delighted to have this pointed out to me. Otherwise I'm inclined to call this a Here bug.
This simple fiddle replicates the issue when used with a touch screen device
http://jsfiddle.net/Thernys/E97rn/
And since apparently code is required with a fiddle link, I replicate the relevant parts of the super simple example.
HTML
<body>
<!-- add a number of <br/> if you like -->
<div id='mapContainer'></div>
</body>
CSS
#mapContainer {
width: 200px;
height: 200px;
float: right;
}
JS
var nMap = new nokia.maps.map.Display(
document.getElementById('mapContainer'), {
zoomLevel: 10,
center: [52.51, 13.4],
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.zoom.Gesture()
],
}
);
I've faced this exactly same issue. After some research I realized that it's occurring because the map container wasn't placed in the cartesian origin of the document (top: 0, left:0). I don't know if this is a bug of the API or if there's any configuration that fixes it.
The workaround I found out was to create the map inside an iframe element and make sure it occupies the entire width.
I was not sure if it was me, that was not using the right attributes to style controls via CSS. But today I tested one example from the Ensemble application and noticed it was not working there either.
The one I find most difficult to set right is: -fx-text-fill
To change the text color of a label for example:
#pill-left:selected .label {
/* -fx-text-fill: black; */
-fx-text-fill:red;
-fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );
}
No matter what I put there, the text always uses the default value color.
I'm using JavaFx 2.1. Maybe this is already fixed in 2.2, but I figure I should point that out, as it is something very basic.
95% sure this is a bug.
The workarround you need to use -fx-fill: red; instead of -fx-fill-text
Ok, after some extensive testing, I managed to make it work using StyleSheets.
The key is to remove the .label attribute and use just the control's ID, appending the states (:hover, :selected, etc) as needed.
#pill-left {
-fx-padding: 5;
-fx-text-fill:red;
-fx-border-image-source: url("left-btn.png");
-fx-border-image-slice: 4 4 4 4 fill;
-fx-border-image-width: 4 4 4 4;
-fx-border-image-insets: 0;
-fx-border-image-repeat: stretch;
-fx-background-color: null !important;
}
#pill-left:hover, #pill-left:hover:selected { -fx-text-fill:blue; }
#pill-left:selected {
-fx-text-fill:green;
-fx-border-image-source: url("left-btn-selected.png"); }
As this is all based on code examples taken directly from the ensemble project, that we assume is correct. Many programmers are going to find themselves pulling their hair like I did over this issue.
Anyhow, this is an important lesson learnt on how to use styleSheets with Javafx, avoiding when possible to use anything else than the ID to specify some attributes like the text color.
I am creating a GUI using Qt. I use stylesheets to change the positions of close-button and float-button to the left side of the titlebars of DockWidgets in Mac OS X. My code looks like this:
QString macOSXButtonStyle = "";
#ifdef MACOSX
macOSXButtonStyle = "QDockWidget::close-button, QDockWidget::float-button { subcontrol-position: left; } QDockWidget::close-button { left: 4px; } QDockWidget::float-button { left: 20px; }";
#endif
activeDockWidget->setStyleSheet(macOSXButtonStyle);
Repositioning does work. But the buttons appear smaller than before:
Before:
(source: cargath at www.informatik.uni-bremen.de)
After:
(source: cargath at www.informatik.uni-bremen.de)
I tried resizing them with different combinations of icon-size, size, width and height, but nothing seems to work. Any idea what's causing the problem / how i could fix it?
Styling a default QDockWidget with your style doesn't seem to have any effect on icon size under Win 7 or Ubuntu 10.14, using Qt4.7.
Looking closely at the before and after pictures, the difference seems to be in height - the icons have the same baseline, and the toolbar is the same height. If explicitly changing the height hasn't worked, I wonder if some vertical padding might have been introduced somewhere? Is there any other Mac-specific styling in the app?
You could try explicitly setting padding: 0 in that style. Zero should be the default, so this many not change anything.
I was in the same situation, and I was able to restore the icons size by adding
QDockWidget
{
icon-size: 20px;
}
(Tested with both Qt 4.7 and Qt 4.8.)