Rotate the text of button

[CalmoSoft]

Hello Mahmoud,

Can we rotate the text of button?

I want to develop further the CalmoSoft Fifteen Puzzle Game.

Greetings,

Gal Zsolt

(~ CalmoSoft ~)

[Bert Mariani]

Hello Calmo

Which one do  you mean

 - rotate the text inside the button from horizontal to vertical 

 - rotate the text inside the button say 45 degrees

 - rotate the button itself  with the text from horizontal to vertical

 - rotate the button itself with the text say 45 degrees.

[CalmoSoft]

Hello Bert, Mahmoud,

I mean : rotate the text inside the button say 90, 180, 270 degrees

or rotate the button itself with the text say 90, 180, 270 degrees.

CalmoSoft Fifteen Puzzle Game in Vista Smalltalk

[Bert Mariani]

Hello Calmo

This is the closest I got.

I was not able to rotate test inside a qpushButton.

qpushButton does not seem to have a translate() or rotate() function

I was only able to do it inside a label

=============================

   if ButtonNbr = 2

drawRect(200,100,50,50)

translate(200,100)

rotate(90)

drawText( 0,0,"Rectangle90")

ok

===========================

On Friday, April 7, 2017 at 9:10:49 AM UTC-4, CalmoSoft wrote:

[CalmoSoft]

Hello Bert,

Thank you very much for your help.

[CalmoSoft]

Hello Bert, Mahmoud,

In Qt it is possible rotate the button.

The QxtPushButton widget is an extended QPushButton with rotation and rich text support:

QxtPushButton 

[Bert Mariani]

Hello Mahmoud,

I see what Calmo is referring to.

Is there any plans to import  [QxtGui module]  into ring

----------------------------------------------

https://libqxt.bitbucket.io/doc/0.6/qxtpushbutton.html

• QxtPushButton ( QWidget * parent = 0 )
• QxtPushButton ( const QString & text, QWidget * parent = 0 )
• QxtPushButton ( const QIcon & icon, const QString & text, QWidget * parent = 0 )
• QxtPushButton ( Qxt::Rotation rotation, const QString & text, QWidget * parent = 0 )

-----------------------------------------

Detailed Description

The QxtPushButton widget is an extended QPushButton with rotation and rich text support.

QxtPushButton is a QPushButton which can be rotated. In addition, QxtPushButton provides rich text support.

------------------------------------------

enum Qxt::Rotation

This enum describes the rotation.

Constant	Value	Description
Qxt::NoRotation	0	No rotation.
Qxt::UpsideDown	180	Upside down (180 degrees).
Qxt::Clockwise	90	Clockwise (90 degrees).
Qxt::CounterClockwise	270	CounterClockwise (-90 degrees). -----------------------------------

On Friday, April 7, 2017 at 9:10:49 AM UTC-4, CalmoSoft wrote:

[Mahmoud Fayed]

Hello Gal and Bert

(1) Just create a label and a button sharing the same dimensions
(2) Create the button before the label
(3) Disable Mouse Events for the Label
(4) Rotate the text in the label

This way you will get the required behavior, Buttons with rotated text.

Source Code : https://github.com/ring-lang/ring/blob/master/samples/other/rotatetextandbutton.ring

The trick in this part

  btn1 = new qPushButton(win1) {
            setgeometry(100,100,400,400)
            settext("")
  }
  label1 = new qlabel(win1) {
            setgeometry(100,100,400,400)
            settext("")
            setAttribute(Qt_WA_TransparentForMouseEvents,True)
   }

To disable the mouse events of the label, We used the setAttribute() Method
Qt_WA_TransparentForMouseEvents is a constant defined in Ring 1.3 qt.rh file
Qt_WA_TransparentForMouseEvents = 51

Attached a Screen Shot

Greetings,
Mahmoud



[CalmoSoft]

Hello Bert, Mahmoud,

Thank you very much for your help but I do not know how to refer to the text of button.

I use the array of buttons. (btn[n])

It is too difficult to make changes to the code.

I am waiting for the QxtPushButton.

I would like something like this:

btn[n].settext("15")

see btn[n].text() + nl

[Mahmoud Fayed]

Hello Gal

A Quick Solution : Create a List to store the button text and use it when
* Setting the button text
* Getting the button text

Greetings,
Mahmoud

[CalmoSoft]

Hello Mahmoud,

Thank you very much for your help.

I try to do it but I still think it would be too difficult.

The code itself is difficult.

(Maybe I give up)

I think we need to add the QxtPushButton to the RingQt.

[Mahmoud Fayed]

Hello Gal

Software development is about managing complexity
For this we have all of these abstraction features like Functions, Classes, etc.

Just create a class that merge between the label and the button then reuse it as you want.

Greetings,
Mahmoud

[Mahmoud Fayed]

Hello Gal

I have already created this example that will solve the problem.

https://github.com/ring-lang/ring/blob/master/samples/other/rotatetextandbutton2.ring

Source Code

Load "guilib.ring"
New qapp {
        win1 = new qwidget() {
                setwindowtitle("Label and Button - Rotate Text")
                setgeometry(100,100,500,500)
                btn1 = new ButtonWithRotatedText(win1)
          btn1 {
            setgeometry(100,100,400,400)
            settext("Test")
            setClickEvent("see btn1.text()")
                }
                showMaximized()
        }
        exec()
}

Class ButtonWithRotatedText

    oButton oLabel  cText=""  nDegree = 30

    func init oParent
        oButton = new qPushButton(oParent)
        oLabel = new qLabel(oParent)
        oLabel.setAttribute(Qt_WA_TransparentForMouseEvents,True)

    func setgeometry x,y,width,height
        oButton.setgeometry(x,y,width,height)
        oLabel.setgeometry(x,y,width,height)

    func setText cValue
        cText = cValue

    func Text
        return cText

    func setRotationDegree nValue
        nDegree = nValue

    func RotationDegree
        return nDegree

    func setClickEvent cEvent
        oButton.setClickEvent(cEvent)

    func braceend
        draw()

    Func draw
                    p1 = new qpicture()
                    color = new qcolor() {
                               setrgb(0,0,255,255)
                    }
                    pen = new qpen() {
                            setcolor(color)
                            setwidth(10)
                    }
                    painter = new qpainter() {
            begin(p1)        
                setpen(pen)
                oFont = font()
                oFont.setpointsize(20)
                setfont(oFont)
                rotate(this.RotationDegree())
                drawtext(0,0,this.Text())          
            endpaint()
                    }
                    oLabel {
            setpicture(p1)  
            show()
              }

Greetings,
Mahmoud




On Tuesday, April 11, 2017 at 1:45:05 PM UTC+3, CalmoSoft wrote:

[CalmoSoft]

Hello Mahmoud,

Thank you very much for your useful help.

Now I try to solve my problem.

(CalmoSoft Fifteen Puzzle Game)

[Bert Mariani]

Hello Mahmoud, 

Thanks for showing how to implement this using "Class"

I added  "Translate"  functions in the "Class" to be able to put the rotation point in the center.

Can you check the code to see if it is clean.

=======================

            btn2 = new ButtonWithRotatedText(win1)           

            btn2 {

                    setgeometry(100,0,LabelSizeX, LabelSizeX)

                    settext("B-2")

                    setTranslate(offSetX, 0)

                    setRotationDegree( 90)

                    setClickEvent("see btn2.text() +nl")

                 }

===================================

    oButton oLabel  cText="We are here"  nDegree = 30  nTransX = 50   nTransY = 0

    func setTranslate( x,y )    

        See "SetTranslate: "+ x  +" "+ y +nl

        nTransX = x

        nTransY = y     

    return

    func TranslateOffsetX()

        See "TranslateOffsetX: "+ nTransX +nl

        return nTransX 

    func TranslateOffsetY()

        See "TranslateOffsetY: "+ nTransY +nl

        return nTransY 

===========================

                        begin(picture)        

                            setpen(pen)

                            oFont = font()

                            oFont.setpointsize(20)

                            setfont(oFont)

                            

                            translate(this.TranslateOffsetX(), this.TranslateOffsetY() )

                            rotate(this.RotationDegree())

                            

                            drawtext(0,0,this.Text())          

                        endpaint()

==========================

On Friday, April 7, 2017 at 9:10:49 AM UTC-4, CalmoSoft wrote:

[Mahmoud Fayed]

Hello Gal

Thank for your kind words
You are welcome :D

Greetings,
Mahmoud

[Mahmoud Fayed]

Hello Bert

Very nice update :D
Please add the sample to this folder
https://github.com/ring-lang/ring/tree/master/samples/other

Keep up the good work :D

Greetings,
Mahmoud

[Bert Mariani]

Hello ALL

Added a function to color the Button  to Class ButtonWithRotatedText

    func setButtonColor(color)  

        colorIt = "background-color: "+ color  

        oButton.setstylesheet(colorIt ) 

    return

----------------------

Example

btn3 = new ButtonWithRotatedText(win1)          

            btn3 {

                    setgeometry(0,100,LabelSizeX, LabelSizeX)

                    settext("C-3")

                    setTranslate(offSetX, 0)

                    setRotationDegree( 180)

                    setButtonColor("Cyan") 

                    setClickEvent("see btn3.text() +nl")

-----------------------------------

On Friday, April 7, 2017 at 9:10:49 AM UTC-4, CalmoSoft wrote: