I am struggling to set an background image for an QPushButton. No Success till now. Following is my code.
appsWidget::appsWidget(QWidget *parent)
:QWidget(parent)
{
QPushButton *button1 = new QPushButton("SETTINGS",this);
QPushButton *button2 = new QPushButton("TEST",this);
QPushButton *button3 = new QPushButton("IE",this);
button1->setStyleSheet("background-image:url(config.png)"); -> No success
qDebug("appWidget initialized.");
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
this->setLayout(layout);
connect(button1,SIGNAL(clicked()),this,SLOT(setClickIndex1()));
connect(button2,SIGNAL(clicked()),this,SLOT(setClickIndex2()));
connect(button3,SIGNAL(clicked()),this,SLOT(setClickIndex3()));
}
The image I am using in the stylesheet is located in the same project folder.
Do anybody has any solution?
You have to set the flat attribute to true:
button1->setFlat(true);
You also have to set the autofillbackground -
button1->setAutoFillBackground(true);
You may want to look at QToolButton which doesn't require it to be flat in order to render an image. I'm using them in an app I'm writing at the moment and they look very nice:
m_showAddCommentButton = new QToolButton();
m_showAddCommentButton->setAutoFillBackground(true);
palette = m_showAddCommentButton->palette();
palette.setColor(QPalette::Button,QColor(82,110,166));
m_showAddCommentButton->setPalette(palette);
m_showAddCommentButton->setIcon(QIcon(":/uiImages/addComment_50_50.jpg"));
m_showAddCommentButton->setIconSize(QSize(40,40));
m_showAddCommentButton->setToolTip("Comment");
connect(m_showAddCommentButton, SIGNAL(clicked()),
manager, SLOT(showAddComment()));
hLayout->addWidget(m_showAddCommentButton,0);
(My image is stored as a resource)
Your css selector is not correct.
You should do something like:
button1->setStyleSheet("QPushButton{ background-image: url(config.png); }");
You can use brush as palette element to fill background for any widget, for QPushButton that works when button is flat.
QPixmap pixmap("image.jpg");
QPalette palette;
QPushButton *button= new QPushButton(this);
palette.setBrush(button->backgroundRole(), QBrush(pixmap));
button->setFlat(true);
button->setAutoFillBackground(true);
button->setPalette(palette);
Related
The problem is that I am opening workflow designer dynamically from one shell application and I don't have reference to Canvas. I am able to save the WF4 as image but the image is not getting saved properly and contains left & top margins. I followed many articles to get it working but no success. I referred to following article as well.
Saving a canvas to png C# wpf
I am using the below function. I don't have any reference to canvas.
private BitmapFrame CreateWorkflowImage()
{
const double DPI = 96.0;
Visual areaToSave = ((DesignerView)VisualTreeHelper.GetChild(this.wd.View,
0)).RootDesigner;
Rect bounds = VisualTreeHelper.GetDescendantBounds(areaToSave);
RenderTargetBitmap bitmap = new RenderTargetBitmap((int)bounds.Width,
(int)bounds.Height, DPI, DPI, PixelFormats.Default);
bitmap.Render(areaToSave);
return BitmapFrame.Create(bitmap);
}
Please help on this.
I am able to resolve the issue by referring to again the following link
Saving a canvas to png C# wpf
I got the reference to canvas by using following code
Visual canvas= ((DesignerView)VisualTreeHelper.GetChild(this.WorkflowDesigner1.View, 0)).RootDesigner;
This has resolved the border/margin issue.
Please have a look here: http://blogs.msdn.com/b/flow/archive/2011/08/16/how-to-save-wf4-workflow-definition-to-image-using-code.aspx
let’s look at how to generate an image of the workflow definition using the standard mechanism of WPF. After all, workflow designer canvas is a WPF control.
BitmapFrame CreateWorkflowDefinitionImage()
{
const double DPI = 96.0;
// this is the designer area we want to save
Visual areaToSave = ((DesignerView)VisualTreeHelper.GetChild(
this.workflowDesigner.View, 0)).RootDesigner;
// get the size of the targeting area
Rect size = VisualTreeHelper.GetDescendantBounds(areaToSave);
RenderTargetBitmap bitmap = new RenderTargetBitmap((int)size.Width, (int)size.Height,
DPI, DPI, PixelFormats.Pbgra32);
bitmap.Render(areaToSave);
return BitmapFrame.Create(bitmap);
}
The above C# method is very straightforward. Just get the workflow diagram part of the workflow designer and create an in-memory image of it using some WPF API. The next thing is simple: create a file and save the image.
void SaveImageToFile(string fileName, BitmapFrame image)
{
using (FileStream fs = new FileStream(fileName, FileMode.Create))
{
BitmapEncoder encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(image));
encoder.Save(fs);
fs.Close();
}
}
At last, let’s try to invoke the above 2 methods in the OnInitialized() method to hook it up and then close the application.
protected override void OnInitialized(EventArgs e)
{
// ...
this.SaveImageToFile("test.jpg", this.CreateWorkflowDefinitionImage());
Application.Current.Shutdown();
}
I am using Titanium Studio for mobile development.
The following two things used to display image. But may i know the difference between following,
1. Ti.UI.createImageView({ width:100, height:50, Image:'image path' });
2. Ti.UI.createView({ width:100, height:50, backgroundImage:'image path' });
Both displaying specified image.
what is the difference between these two.
craeteView also displaying image then , why we use createImageView.
can any one please..
View is an empty drawing surface or container, which is the base type for all UI widgets in Titanium where as image view is a view used to display a single image or series of animated images. All events of Titanium.UI.ImageView is Inherited from Titanium.UI.View. You can not make an animation using view and also an image view has some additional events like start, stop, pause, load etc.
The main difference is you can show URL image (or Remote image) in ImageView, while you can only show resource image in View
var view = Ti.UI.createView();
var imageView = Ti.UI.createImageView();
//Valid:
view.backgroundImage = 'image.png';
imageView.backgroundImage = 'image.png';
imageView.image = 'http://somesite.com/image.png';
//Invalid:
view.backgroundImage = 'http://somesite.com/image.png';
imageView.backgroundImage = 'http://somesite.com/image.png';
Also, as #Anand said, you can show series of images in ImageView
I have a big layout that contains widgets and layouts of the following structure:
QVBoxLayout
QTableView
QPushButton
I set the margins, padding, and spacing on the layout to 0. The way this renders on Mac OS X, the button doesn't fill all of its space. Instead, there is some padding around it. Magically, the layout seems to know this, and makes sure the table view is exactly as wide as the button is wide:
When I remove the button, the table view returns to its full width:
How can I change it so the button, as well as the table view, become as wide as the layout?
I've played with stylesheet's padding and margin, and while I can use those to make the button wider, the extra padding around the tree view remains. The only solution I have so far is to wrap the button in another widget, and then set its margin and padding to 0 via stylesheet, but then I lose the rounded look.
you have to set layout margins to 0, not QPushButton's margins.
Take a look. this is designer look&feel:
This is QWidget's layout properties:
And this is final widget:
After some more experimentation, I found that it works as expected with a QToolButton instead of a QPushButton. That's not an explanation, but it's a solution.
Hmm. interesting. The following code is for testing your problem but could not find any. it just works as it is.(using Qt 4.8.2 on Mac OSX). The code is self containing. just put it as main.cpp to build application and click show and hide button to test.
#include <QtGui>
class FramedWidget : public QFrame
{
public:
FramedWidget(QWidget* inner, QWidget* parent=0)
: QFrame(parent)
{
setFrameStyle(QFrame::Panel | QFrame::Sunken);
QVBoxLayout* lay = new QVBoxLayout(this);
lay->setContentsMargins(0,0,0,0);
lay->setSpacing(0);
lay->addWidget(inner);
}
};
class LayoutWidget : public QSplitter
{
public:
LayoutWidget(QWidget* parent=0)
: QSplitter(parent)
{
QTableWidget* table = new QTableWidget;
m_button = new QPushButton("Testing...");
QPushButton* showButton = new QPushButton("Show");
QPushButton* hideButton = new QPushButton("Hide");
connect(showButton, SIGNAL(clicked()),
m_button, SLOT(show()));
connect(hideButton, SIGNAL(clicked()),
m_button, SLOT(hide()));
QWidget* tester = new QWidget;
QVBoxLayout* testerLay = new QVBoxLayout(tester);
testerLay->addWidget(table);
testerLay->addWidget(m_button);
QWidget* controller = new QWidget;
QVBoxLayout* controllerLay = new QVBoxLayout(controller);
controllerLay->addWidget(showButton);
controllerLay->addWidget(hideButton);
controllerLay->addWidget(new QTextEdit);
this->addWidget(new FramedWidget(controller));
this->addWidget(new FramedWidget(tester));
}
protected:
QPushButton* m_button;
};
int main(int argc, char** argv)
{
QApplication app(argc, argv);
LayoutWidget* editor = new LayoutWidget;
editor->show();
editor->raise();
return app.exec();
}
Another workaround that preserves the look of a push button is to put the layout in a QFrame container widget and set negative padding in the stylesheet. The container has to be a QFrame or padding won't work.
I have been trying to put an image with a hyperlink on it into a google apps script ui. I first thought of using createAnchor(), but that only allows text. Then I thought of using a button, but as far as I know you cannot open a new tab/window and redirect in a callback function.
I also tried createHTML(), but the element is not handled by it as yet.
I have seen people overlay transparent buttons over images, but still have same issue in callback.
My research has not found an answer to this. Does anyone have any solutions/examples?
Thanks
This worked for me on Chrome20 and IE9
// Container for box and results
var imageContainer = app.createFlexTable();
// Setup the button
var button = app.createButton("ImageButton");
button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
button.setStyleAttribute("position", "absolute");
button.setStyleAttribute("color", "transparent");
button.setStyleAttribute('zIndex','1');
button.setStyleAttribute("border", "0px solid black");
imageContainer.setWidget(0, 0, button);
// image to click
var image = app.createImage("image.jpg").setId(imageId);
imageContainer.setWidget(1,0, image);
The image has a slight (3px) offset. If important, this looks to fix it http://www.w3schools.com/css/css_positioning.asp (use relative for the flex table and top etc for the image and button)
Did you try a transparent Anchor overlaying the image?
function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);
return app.close();
}
app.createAbsolutePanel()
.add(app.createImage('https://www.google.com/images/logos/google_logo_41.png'))
.add(app.createAnchor('','https://www.google.co.uk/intl/en/about/')
.setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity:'0'}))
This is a tested one. It works fine.
It doesn't work with positioning the image (as 'absolute').
It doesn't work with .setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER)
I don't believe this is possible with the widgets available. I would suggest altering your UI's design to utilize an Anchor widget instead.
Use HTML Box if you are coding directly on your page. Click "Edit" to edit your page and go to "Insert>HTML Box" in your menu. It will accept javascript too! There are a few caveats - when using javascript, HTML Box will not accept links...too bad, but too many exploits there.
If you are coding in apps script, you could try to place the image on a panel and use absolute panel and position your link over your image. Another method could be to use the .setStyleAttribute for CSS styling and utilize the zIndex parameter to place a panel over top of your image....like so:
var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI
var popPanel = app.createSimplePanel()
.setStyleAttribute('top','Y')
.setStyleAttribute('left','X')
.setStyleAttribute('zIndex','1')
.setStyleAttribute('position','fixed');
// add your anchor to the popPanel
app.add(panel).add(popPanel);
Not 100% sure if you can make this panel transparent, but you could try something like:
.setStyleAttribute('background',transparent')
or change the opacity via:
.setStyleAttribute('opacity','.5')
Hopes this gives you a few ideas!
I managed to do it with a single Anchor object and using CSS3.
It works on Chrome, I did not test it in other Browsers.
gui.createAnchor("", false, "$DESTINATION_URL$")
.setStyleAttributes({ "display":"block",
"width":"$IMAGE_WIDTH_IN_PIXEL$",
"height":"$IMAGE_HEIGHT_IN_PIXEL$",
"background":"url($URL_OF_THE_IMAGE$)",
"background-size":"100% 100%",
"background-repeat":"no-repeat" })
Of course you have to replace the $......$ with your data.
Thierry
If you first create all your HTML in a string, you can then replace the content of a page with the HTML you want like this:
var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');
Is there a way to add an image in my main app, so that it is on top off a popWindow? The equivalent of the Z-index should render it on top.
So, I've got a popWindow and I want to add an image on top of the popWindow.
If in my main app I use:
var floatingImage:Image = new Image;
floatingImage.source = image_path;
floatingImage.y = 200;
floatingImage.x = 200;
addChild(floatingImage);
Then the image is on top of main App, but it is still below my popWindow.
I would add the image directly to the popWindow, but I'm using FlashEff 2, and for some reason the effect won't work if I have an image in the popUp. So, I thought that I would add the image in the main app and have it float above the popWindow.
Another possibility might be to check somehow if the popWindow is open and then add the image directly to the popWindow.
If anyone has any suggestions, I'd love to hear them.
Thank you.
-Laxmidi
Not really recommended but here is the code. This won't work well with UIComponents just DisplayObjects.
[Embed(source="assets/MyImage.png")]
private var MyImage:Class;
protected function button1_clickHandler(event:MouseEvent):void
{
var image:DisplayObject = new MyImage();
stage.addChild(image);
}