QML Tableview horizontal scrollbar - c++

I am using TableView QML component, where each column width is set to the table total width divided by number of columns. This introduces some fraction parts and in result, a horizontal scrollbar is almost always visible in the bottom.
But I don't want to disable scrollbar as I have ability of changing column width and because of that scrollbar may be needed. So my problem is about initial showing of this TableView component. I want to get rid of that scrollbar when component is shown first time, but don't disable it for future usage.
I am new to QML and don't know all aspects of it, but solution that came to me is to set width of each column as I do, then for the last one get sum of all previous columns and set it's width to parent.width - that sum. Can you please help me to understand how can I implement this using QML?

columnWidthProvider is calculated once at adding column. I cant reproduce your bug with this. contentWidth become same as width
TableView {
id: table
anchors.fill: parent
columnWidthProvider: function (column) {
console.log(parent.width , columns, parent.width / columns)
// wdth is 0 here
return parent.width / columns
}
ScrollBar.horizontal: ScrollBar {
policy: ScrollBar.AsNeeded
}
//....
}
But i had same issue in another view. Solution was:
Flickable {
id:view
ScrollBar.horizontal: ScrollBar {
policy: (view.width - view.contentWidth < -3) ?
ScrollBar.AlwaysOff : ScrollBar.AsNeeded}
}
}

Related

google visualizations, add label to gantt chart

https://developers.google.com/chart/interactive/docs/gallery/ganttchart
Is it possible to add labels on the Gantt chart durations, like the below screenshot?
As WhiteHat said, there is no built-in option.
For my specific case (I always have the same structure in my Gantt graph) I did the following (to place some DIVs on top of the bars - with these DIVs you can do whatever you want):
// callback after draw (afterDraw() function is called after chart is drawn)
google.visualization.events.addListener(chart, 'ready', afterDraw);
function afterDraw(){
// the container element to append our generated DIVs (with the labels)
// it has to be outside the SVG element, but inside the chart container
var toContainer = $('#chart_div > div > div');
// in order to create DIVs to place them on top of the bars, we first need to get bars SVG/RECTs positions and sizes
// in my case, the RECT elements with the necessary top/left/width/height are in the 6th G element
$( "#chart_div g:eq(5) rect" ).each(function() {
toContainer.append("<div style='top:"+$(this).attr('y')+"px; left: "+$(this).attr('x')+"px; width: "+$(this).attr('width')+"px; height: "+$(this).attr('height')+"px;text-align: center;position:absolute;line-height:2' >Some text</div>");
});
}

Is there a way to reassign a grid layout to a label?

I have created a GUI with the aid of Tkinter that has created a 3 [C]olomn by 8 [R]ow, (I have placed the borders of the 'cells' in red) and output is like so:
Just to calrify:
Where the "logo [E]" is (C1,R1) & (C1,R2) are rowspanned and where the "main window" is from (C2,R3) to (C3,R8) are colomnspanned and rowspanned.
All are Label widget except for (C1,R3 to C1,R8), which are button widgets with a command to display a string in "Main Window" (gray area).
My aim is to make the "Main Window"(gray area) display only in different grid layouts based on the selected button on the left. So for example I would like to make the grey have a grid layout of 2col by 4 row when C1,R6 is pressed, or when C1,R3 is pressed the grid layout to be 2Cx6R all in the gray area.
Q: Is there a way of re-gridding a label? If so how? Or an alternative approach?
ADDENDUM:
Ideally I would like to update the GREEN area with different number of row and column configurations. For example: When Micro Audit is touched, the Green area will configure itself to have 4 rows by 2 columns, and when Find Item is selected, it will only 3 rows with 1 column, etc. :

Crop the area used for title in google's area chart

The area chart used for the title is too big. I see the area used for allow the tooltip when there is a high value, but if is possible to cut the area used for the title, maybe the tooltip will render from top to bottom.
Is it possible to crop the area used for title (and maybe something more), like:
I just want the "chart draw" area, the red part should be cropped.
Tried titlePosition: 'none', but it didn't work.
Thanks.
The part of your chart that you labeled "chart draw" is controlled by the chartArea option:
chartArea: {
top: 25,
height: '80%'
}
Each sub-option (height, width, top, left) can be either a number (pixels) or a string (percent of total chart height or width). Use these options to enlarge the chartArea's height and/or shrink the area devoted to the chart title.

Overlapping MenuItems in Cocos2d CCMenu

I am trying to make a Menu that contains 13 MenuItemImages in two columns (the last one is in the middle).
The frame width/ design resolution width is 480 pixels. MenuItemImage width is 180 pixels.
here is my code :
CCMenu* testMenu = CCMenu::createWithArray(testMenuItems);
testMenu->alignItemsInColumns(2,2,2,2,2,2,1);
CCSize size1 = CCDirector::sharedDirector()->getWinSize();
testMenu->setPosition(ccp(size1.width / 2, size1.height/2));
but the two columns are slightly overlapping. (the right one is above the left one)
here is the result of my code:
I would like it to be properly spaced with some padding between the two columns.
Please help me out I am new to Cocos2d-x.
the alignItemsInColumns will align menu itens based on itens center, against menu width.
In your case, you have 2 options:
1) Increase your menu width (by default, their size will be based on screen size. Change the menu.contentSize.width)
2) Change the anchor point of left itens to ccp(.7,.5) and right itens to ccp(.3,.5) for example

How can I create a 3 state custom push button?

I need to create a custom push button which will have 3 different background images corresponding to the following states:
normal
mouse over
mouse down
I would like to have a QHBoxLayout with 3 parts for left side, right side and middle side (stretching side) for the button.
Inside the middle size, I would like to have a label to show the text.
I need this button to have a "clicked" event as well.
I have been doing a lot of search to achieve this but I am really lost. I tried many things including custom widget from QWidget or styling QPushButton with stylesheets but I failed to achieve having 3 images for 3 mouse states and the clicked event.
I am looking for help.
You can use the border-image property, by composing a single image for each state like this:
| |
Left Image | Middle Image | Right Image
| |
then by specifying the left and right image sizes as the border slice sizes and in the border widths of the stylesheet. For example, if the right images were 25 pixel wide and the left ones 20, you would have:
QPushButton {
border-image: url(:/normal.png) 0 25 0 20 stretch stretch;
border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover {
border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed {
border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}
The values represent the distance between the top, right, bottom and left sides of the image.
well,first,you should have 3 picture for 3 states,and then you can use function setStyleSheet .
QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}"
"QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}"
"QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");