I have a fixed size panel (derived from wxPanel) on which i blit images / draw geometric shapes. This is present in a frame (derived from wxFrame).
Now i want the panel (appinterface) to be centered inside the frame whenever the frame is maximized/resized. Also the empty space in all four directions should have a tiled background (seamless).
I can center using sizers, horizontal & vertical boxsizers, but how do i fill empty space.
This is my code which only centers the panel horizontally currently.
wxBoxSizer *sizer = new wxBoxSizer(wxHORIZONTAL);
appInterface = new Interface((wxFrame *)this, kFrameWidth - 20, kFrameHeight - 110);
sizer->Add(1, 1, 1, wxEXPAND);
sizer->Add(appInterface, 1, wxEXPAND | wxALIGN_CENTER);
sizer->Add(1, 1, 1, wxEXPAND);
SetSizer(sizer);
SetAutoLayout(true);
I guess i can't add background to frame and i can't add a panel inside panel, because if it were possible, then it would be easy to solve my problem.
NOTE:Things inside appinterface are drawn using absolute coordinates, so it wouldn't be easy to simply draw in center.
Related
I have a Grid containing some Labels inside Frames to make it look like a table. This grid is inserted in a vertical Box in which direct child Labels are centered correctly (they are packed in the box in the same way as the Grid).
My simplified code is this:
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
window = Gtk.Window()
g = Gtk.Grid() # this should be in the horizontal center of the window
g.attach(Gtk.Label("This should be centered but it is not."), 0, 0, 1, 1)
b = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
b.pack_start(g, True, False, 0) # The same behavior with: b.pack_start(g, True, True, 0)
b.pack_start(Gtk.Label("This label is centered as it should be. Try to resize the window."), True, False, 0)
window.add(b)
window.connect("delete-event", Gtk.main_quit)
window.show_all()
Gtk.main()
and this is the GUI it produces:
You must use Alignment and Expand properties/methods to set behaviors of child containers.
With Gtk.Box you defined expand as True and Fill as False for both childs but the first one is a container, Gtk.Grid. When you added the label to the Grid you did not set any expand or fill flags.
Not sure how you want the labels to behave when resizing the window but to have the label which is inside the Gtk.Grid to be centered horizontally then you can set the Gtk.Label horizontal expand as true or set the Gtk.Grid Alignment as Centered.
Example - Setting Gtk.Label horizontal expand as True:
g = Gtk.Grid() # this should be in the horizontal center of the window
l = Gtk.Label("This should be centered but it is not.")
l.set_hexpand(True)
g.attach(l, 0, 0, 1, 1)
However, if you "grow" the window vertically, the labels will separate from each other. I would suggest that you use glade and play with both expand and widget alignment.
Result:
I'm trying to align some controls in my wxPython app to bottom of a panel. Here's sample of my code:
def __DoLayout(self):
vsizer = wx.BoxSizer(wx.VERTICAL)
hsizer = wx.BoxSizer(wx.HORIZONTAL)
hsizer2 = wx.BoxSizer(wx.HORIZONTAL)
hsizer.Add(self.prog, 0, wx.ALL|wx.EXPAND, 5)
hsizer2.Add(self.text, 0, wx.ALL|wx.EXPAND, 5)
#hsizer.Add(self.timer, 0, wx.EXPAND|wx.ALIGN_RIGHT)
vsizer.Add(hsizer2, 0, wx.EXPAND)
vsizer.Add(hsizer, 0, wx.ALIGN_BOTTOM|wx.EXPAND)
self.SetSizer(vsizer)
I would like the bottom horizontal sizer (hsizer) to stretch to bottom, or the top one to stretch placing bottom sizer on the bottom (that would actually be better).
[EDIT: Proposed sulution description]
The proportion parameter defines the ratio of how will the widgets change in the defined orientation. Let's assume we have three buttons with the proportions 0, 1, and 2. They are added into a horizontal wx.BoxSizer. Button with proportion 0 will not change at all. Button with proportion 2 will change twice more than the one with proportion 1 in the horizontal dimension.
From zetcode
Solution proposed by Renae Lider
With reluctance, but as #renae-lider who answered the question has not posted an answer.
Change the 0 to 1 in this line :
vsizer.Add(hsizer2, 1, wx.EXPAND)
This is the proportion parameter.
The proportion parameter defines the ratio of how will the widgets change in the defined orientation.
Let's assume we have three buttons with the proportions 0, 1, and 2. They are added into a horizontal wx.BoxSizer. Button with proportion 0 will not change at all. Button with proportion 2 will change twice more than the one with proportion 1 in the horizontal dimension.
Can I change the scrollregion on a Python turtle canvas? I want the drawing to move with it, not just the coordinates to shift. The appearance I'm going for is side-scroller like, where the screen's display region moves to center the turtle onscreen.
I've tried using turtle.setworldcoordinates(llx, lly, urx, ury), but, from the documentation, "This performs a screen.reset()". I've also looked at this SO question , but this involves scroll bars, will not center the turtle easily, and has a limited canvas space. What I'm looking for is something that:
Moves the display region to center the turtle
Also moves the drawing
Has an infinite scroll region
does not display scroll bars
can be called quickly with a function
My best guess would be to be able to have an infinite scrolled canvas somehow, then hide the scroll bars and set them according to turtle position.
Is this possible in Python 2.7? I don't mind if it uses tkinter as well.
EDIT: 6-3-15
I found the canvas.xview and canvas.yview functions, but they don't seem to work once I define screen = turtle.TurtleScreen(canvas), and TurtleScreen has no xview or yview functions. I can't seem to make this work.
Then I found turtle.ScrolledCanvas(). This seems ideal except it has no methods for setting scroll manually from the program. Can I set the scroll manually on a turtle.ScrolledCanvas()???
The position of a canvas can be changed without a reset using canvas.place() method. It will move the turtle and the drawings too, so the turtle needs to be relocated after every move.
The next code moves the canvas with Left and Right arrows and draws a circle with Space, while keeping the turtle in the center. No ScrolledCanvas needed, just a very large standard canvas:
import turtle
import Tkinter as tk
def keypress(event):
global xx, canvas, t, speed
ev = event.keysym
if ev == 'Left':
xx += speed
else:
xx -= speed
canvas.place(x=xx)
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
return None
def drawCircle(_):
global t
t.pendown()
t.fillcolor(0, 0, 1.0)
t.fill(True)
t.circle(100)
t.fill(False)
t.fillcolor(0, 1, 0)
t.penup()
# Set the main window
window = tk.Tk()
window.geometry('500x500')
window.resizable(False, False)
# Create the canvas. Width is larger than window
canvas = turtle.Canvas(window, width=2000, height=500)
xx = -500
canvas.place(x=xx, y=0)
# Bring the turtle
t = turtle.RawTurtle(canvas)
t.shape('turtle') # nicer look
t.speed(0)
t.penup()
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
# key binding
window.bind('<KeyPress-Left>', keypress)
window.bind('<KeyPress-Right>', keypress)
window.bind('<KeyPress-space>', drawCircle)
drawCircle(None)
speed = 3 # scrolling speed
window.mainloop()
Having a real infinite scrolling would require to redraw every item in the canvas every time with the required offset, instead of actually moving or scrolling the canvas. Functions like create_image() can give the illusion of movement with static backgrounds, but it resets the drawings.
I want to draw a rectangle with rounded corners (border radius same for all 4 corners) with a specific color filling the entire rectangle, and a separate border color (say border is 1 px wide).
From my observation, Qt provides three methods - fillRect and drawRect and drawRoundedRect. I have tried them, they don't work like I want to. There is no method like fillRoundedRect. Which means that I can draw a rounded rectangle but it won't be filled with the color I want.
How do I do it? And also, I read that due to some aliasing problems, the corners are often rendered as unequal. How do I set it as equal for all four? Will painter.setRenderHint(QPainter::Antialiasing) suffice? Or do I have to do anything else?
You can create a QPainterPath, add the rounded rect to it, and then fill and stroke it:
QPainter p(this);
p.setRenderHint(QPainter::Antialiasing);
QPainterPath path;
path.addRoundedRect(QRectF(10, 10, 100, 50), 10, 10);
QPen pen(Qt::black, 10);
p.setPen(pen);
p.fillPath(path, Qt::red);
p.drawPath(path);
Note that even with antialiasing, 1 px border will probably never really look good, especially on a low DPI desktop monitor, on a high DPI mobile device it will be almost invisible.
If you create the rectangle as QRectF(9.5, 9.5, 100, 50) it will look better with 1 px antialiased border, because it will "snap" on the right pixel:
The answer above (from #dtech) works great, but can sometimes end up with an uneven border around the roundedRect. Using QPainter.strokePath() instead of QPainter.drawPath() can fix this issue.
Here is a python implementation of QPushButton, with paintEvent reimplemented:
# I use PySide6, but whatever library should work.
from PySide6.QtWidgets import QPushButton
from PySide6.QtGui import QPainter, QPainterPath, QBrush, QPen
from PySide6.QtCore import Qt, QRectF
class RoundedButton(QPushButton):
def __init__(self, text, bordersize, outlineColor, fillColor):
super(RoundedButton, self).__init__()
self.bordersize = bordersize
self.outlineColor = outlineColor
self.fillColor = fillColor
self.setText(text)
def paintEvent(self, event):
# Create the painter
painter = QPainter(self)
painter.setRenderHint(QPainter.Antialiasing)
# Create the path
path = QPainterPath()
# Set painter colors to given values.
pen = QPen(self.outlineColor, self.bordersize)
painter.setPen(pen)
brush = QBrush(self.fillColor)
painter.setBrush(brush)
rect = QRectF(event.rect())
# Slighly shrink dimensions to account for bordersize.
rect.adjust(self.bordersize/2, self.bordersize/2, -self.bordersize/2, -self.bordersize/2)
# Add the rect to path.
path.addRoundedRect(rect, 10, 10)
painter.setClipPath(path)
# Fill shape, draw the border and center the text.
painter.fillPath(path, painter.brush())
painter.strokePath(path, painter.pen())
painter.drawText(rect, Qt.AlignCenter, self.text())
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