I am working on a mobile application and using sencha touch charts. By default horizontal bar chart is fitting exactly into screen. If there are more number of bars,then bars are appearing very thin and looking odd. I want to fix bar width to have uniform look and feel irrespective of number of bars being displayed. No matter even user need to scroll down to see entire chart. I have tried below option in series configuration, but it did not work.
style : {
size : 30
}
Please help me.
Thanks,
Nag.
am able to change the bar width by setting barWidth option in touchcharts-debug.js by refering to the following link
http://docs.sencha.com/touch-charts/1-0/source/Bar.html
but the axis labels are not rendering properly labels are fitting into screen
I tried this code in my interactions to render the labels, it's working fine
{
type: 'panzoom',
showOverflowArrows: false,
//axes: ['bottom'],
axes: {
bottom: false,
left: {
startZoom: 2
}
}
}
Related
When I draw a simple donut chart and increase the font sizes of the labels they get unevenly placed.
Tried to compensate with the settings but that just make one of the labels even more misplaced. Is this a bug or can it be fixed?
{
donut: true,
labelOffset: -5
}
http://jsfiddle.net/gx55mo6b/2/
I am trying to use mask on my QWidget. I want to overlay existing widget with row of buttons - similar to Skype
Notice that these buttons don't have jagged edges - they are nicely antialiased and widget below them is still visible.
I tried to accomplish that using Qt Stylesheets but on pixels that should be "masked out" was just black colour - it was round button on black, rectangular background.
Then I tried to do this using QWidget::mask(). I used following code
QImage alpha_mask(QSize(50, 50), QImage::Format_ARGB32);
alpha_mask.fill(Qt::transparent);
QPainter painter(&alpha_mask);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(25,25), 24, 24);
QPixmap mask = QPixmap::fromImage(alpha_mask);
widget.setMask(mask.mask());
Sadly, it results in following effect
"Edges" are jagged, where they should be smooth. I saved generated mask so I could investigate if it was the problem
it wasn't.
I know that Linux version of Skype does use Qt so it should be possible to reproduce. But how?
One possible approach I see is the following.
Prepare a nice high resolution pixmap with the circular button icon over transparent background.
Paint the pixmap on a square widget.
Then mask the widget leaving just a little bit of margin beyond the border of the circular icon so that the widget mask jaggedness won't touch the smooth border of the icon.
I managed to get a nice circular button with not so much code.
Here is the constructor of my custom button:
Button::Button(Type t, QWidget *parent) : QPushButton(parent) {
setIcon(getIcon(t));
resize(30,30);
setMouseTracking(true);
// here I apply a centered mask and 2 pixels bigger than the button
setMask(QRegion(QRect(-1,-1,32,32),QRegion::Ellipse));
}
and in the style sheet I have the following:
Button {
border-radius: 15px;
background-color: rgb(136, 0, 170);
}
With border-radius I get the visual circle and the mask doesn't corrupt the edges because it is 1 pixel away.
You are using the wrong approach for generating masks. I would generate them from the button images themselves:
QImage image(widget.size(), QImage::Format_Alpha8);
widget.render(&image);
widget.setMask(QBitmap::fromImage(image.createMaskFromColor(qRgba(0, 0, 0, 0))));
I'm drawing texts and computing their bounding boxes. I always want the texts to show their face to the camera and so I'm using following lines:
textArr.forEach(function(text) {
var textGeo = d.geometry;
text.lookAt(camera.position)
})
It's working fine but it rotates from top left corner and I can't change the axis of rotation:
How can I make it rotate from center of the text while using .lookAt()?
Try center the pivot using
THREE.GeometryUtils.center(textGeo)
I have a Rally.ui.cardboard.CardBoard as an item in an Ext.tab.Panel. When there are enough cards to cause a vertical scrollbar to appear, eating 16px of width, instead of fitting the new width dynamically, a horizontal scrollbar appears too. This doesn't happen when the CardBoard is rendered to document.body.
I've been looking for the right set of config options to make the TabPanel and its child items[] resize automatically. After two days trying in vain, I'm about to give up and just force a width of 1902px for PCs and 2862px for Macs. If anyone has a better idea, I'm more than willing to try it... anything at this point.
We could find no way to do this through config options alone, so we ended up listening to the App's own resize event and updated the panel size. In the App config we have this, and it does the trick:
listeners: {
resize: function( app, width, height, oldWidth, oldHeight, eOpts ) {
if (app.TabPanel) {
app.TabPanel.setWidth(window.innerWidth);
app.TabPanel.setHeight(window.innerHeight);
}
}
}
If anyone has a better solution that only uses config options and the framework does the resizing, I'd still like to see it, as the above is an ugly hack even if it works.
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).