Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Use Color / Font,FontSize parameterized tables
Forum Updated to NodeBB v4.3 + New Features

Use Color / Font,FontSize parameterized tables

Scheduled Pinned Locked Moved Solved QML and Qt Quick
13 Posts 2 Posters 3.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • JehyeokJ Offline
    JehyeokJ Offline
    Jehyeok
    wrote on last edited by
    #3

    @p3c0 Thank you for sharing the idea.
    I would like to use a color theme globally.
    So, I structured a color xml and I parsed a xml file to build my color map(QMap).
    And access the color from the Color object from rootcontext.
    Now I am able to set all default theme colors on UI components. :)

    Furthermore, I would like to apply theme changes in run time on the fly.
    Such as, setting dialog -> change theme -> Set button -> Bring another theme color map form XML -> update UI? ->See color changes in Window
    And I succeeded update QMap data (replace a value by new value).
    But, it didn't update UI(repaint, redraw) to see the changes right away.
    I could propagate event when I move tab or invoke events that changes colors. But it is not what I want. I want to see changes right away.

    Do you know how to apply them to all my windows in run time on the fly?

    p3c0P 1 Reply Last reply
    0
    • JehyeokJ Jehyeok

      @p3c0 Thank you for sharing the idea.
      I would like to use a color theme globally.
      So, I structured a color xml and I parsed a xml file to build my color map(QMap).
      And access the color from the Color object from rootcontext.
      Now I am able to set all default theme colors on UI components. :)

      Furthermore, I would like to apply theme changes in run time on the fly.
      Such as, setting dialog -> change theme -> Set button -> Bring another theme color map form XML -> update UI? ->See color changes in Window
      And I succeeded update QMap data (replace a value by new value).
      But, it didn't update UI(repaint, redraw) to see the changes right away.
      I could propagate event when I move tab or invoke events that changes colors. But it is not what I want. I want to see changes right away.

      Do you know how to apply them to all my windows in run time on the fly?

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #4

      @Jehyeok Instead of setting it as a context property I would suggest you to create and register it as a singleton object as explained earlier. This way you can easily bind the properties from the singleton object. And thus on XML update from singleton the binded properties in your QML too gets updated.

      157

      JehyeokJ 1 Reply Last reply
      1
      • p3c0P p3c0

        @Jehyeok Instead of setting it as a context property I would suggest you to create and register it as a singleton object as explained earlier. This way you can easily bind the properties from the singleton object. And thus on XML update from singleton the binded properties in your QML too gets updated.

        JehyeokJ Offline
        JehyeokJ Offline
        Jehyeok
        wrote on last edited by Jehyeok
        #5

        @p3c0 Thank you. I got point. and it wokrs indeed.
        I am able to get the singleton object (ThemeLoader) in qml using 'qmlRegisterSingletonType'.
        ex, MYQML.qml
        import ThemeLoader 1.0
        Text {
        color: ThemeLoader.colorText
        }

        Two more questions,

        1. How I can get the singleton object and call the function in cpp code?
        2. How to notify the changes in MYQML.qml Text by emitting signals when ThemeLoader colorText changes? Also how do you emmit signals when QMap property changes?
        p3c0P 1 Reply Last reply
        0
        • JehyeokJ Jehyeok

          @p3c0 Thank you. I got point. and it wokrs indeed.
          I am able to get the singleton object (ThemeLoader) in qml using 'qmlRegisterSingletonType'.
          ex, MYQML.qml
          import ThemeLoader 1.0
          Text {
          color: ThemeLoader.colorText
          }

          Two more questions,

          1. How I can get the singleton object and call the function in cpp code?
          2. How to notify the changes in MYQML.qml Text by emitting signals when ThemeLoader colorText changes? Also how do you emmit signals when QMap property changes?
          p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #6

          @Jehyeok

          How I can get the singleton object and call the function in cpp code?

          Like this.

          How to notify the changes in MYQML.qml Text by emitting signals when ThemeLoader colorText changes?

          By using Q_PROPERTY. AddNOTIFY to allow QML bindings.

          Also how do you emmit signals when QMap property changes?

          Perhaps in the same way ? Using datatype as QMap in Q_PROPERTY. But IMO instead of using QMap of properties I think its better to use individual properties so that the binding is executed per property.

          157

          JehyeokJ 1 Reply Last reply
          1
          • p3c0P p3c0

            @Jehyeok

            How I can get the singleton object and call the function in cpp code?

            Like this.

            How to notify the changes in MYQML.qml Text by emitting signals when ThemeLoader colorText changes?

            By using Q_PROPERTY. AddNOTIFY to allow QML bindings.

            Also how do you emmit signals when QMap property changes?

            Perhaps in the same way ? Using datatype as QMap in Q_PROPERTY. But IMO instead of using QMap of properties I think its better to use individual properties so that the binding is executed per property.

            JehyeokJ Offline
            JehyeokJ Offline
            Jehyeok
            wrote on last edited by Jehyeok
            #7

            @p3c0
            Thank you for quick reply.
            I take your advice and I will use individual properties. But it doesn't work ...

            Please take a look

            Theme.h
            Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)
            public:
            void setColor(QColor inputcolor)
            {
            m_color= inputcolor;
            emit colorChanged();
            }
            QColor getColor() const
            {
            return m_color;
            }
            signals:
            void colorChanged();
            private:
            QColor m_color;

            Theme.cpp
            // init
            setColor("red")

            // later to see changes, supposed to update color on text
            setColor("blue")

            text.qml
            Text {
            id: text_
            color: Theme.color

            p3c0P 1 Reply Last reply
            0
            • JehyeokJ Jehyeok

              @p3c0
              Thank you for quick reply.
              I take your advice and I will use individual properties. But it doesn't work ...

              Please take a look

              Theme.h
              Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)
              public:
              void setColor(QColor inputcolor)
              {
              m_color= inputcolor;
              emit colorChanged();
              }
              QColor getColor() const
              {
              return m_color;
              }
              signals:
              void colorChanged();
              private:
              QColor m_color;

              Theme.cpp
              // init
              setColor("red")

              // later to see changes, supposed to update color on text
              setColor("blue")

              text.qml
              Text {
              id: text_
              color: Theme.color

              p3c0P Offline
              p3c0P Offline
              p3c0
              Moderators
              wrote on last edited by
              #8

              @Jehyeok That's strange. Does the Theme class haveQ_OBJECT macro ?
              Can you share rest of the code ? When are you changing the color to new one.

              157

              JehyeokJ 1 Reply Last reply
              0
              • p3c0P p3c0

                @Jehyeok That's strange. Does the Theme class haveQ_OBJECT macro ?
                Can you share rest of the code ? When are you changing the color to new one.

                JehyeokJ Offline
                JehyeokJ Offline
                Jehyeok
                wrote on last edited by Jehyeok
                #9

                @p3c0 this is details

                !!!! PS text color has been changed !! but the current top position dialog which triggered the change theme only.
                Not main and existed other windows !! I would like to update colors in all window

                Header
                class SPColors : public QObject
                {
                Q_OBJECT
                Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)
                public:
                SPColors();
                virtual ~SPColors();

                		Q_INVOKABLE QString getTheme() const;
                		Q_INVOKABLE bool setTheme(const QString& theme);
                		void setColor(QColor inputcolor)
                		{
                			color = inputcolor;
                			emit colorChanged();
                		}
                		QColor getColor() const
                		{
                			return color;
                		}
                	signals:
                		void colorChanged();
                
                	private:
                		QString currentTheme_;
                		QColor color;
                	};
                

                CPP
                SPColors::SPColors()
                {
                setColor(QColor("#FFFFFF"));
                }

                setTheme(...String theme) // this is called by other dialog
                {
                if (theme=="white")
                setColor(QColor("#000000"));
                else
                setColor(QColor("#FFFFFF"));
                }

                QML
                Text {
                id: text_
                color: SPColors.color

                p3c0P 1 Reply Last reply
                0
                • JehyeokJ Jehyeok

                  @p3c0 this is details

                  !!!! PS text color has been changed !! but the current top position dialog which triggered the change theme only.
                  Not main and existed other windows !! I would like to update colors in all window

                  Header
                  class SPColors : public QObject
                  {
                  Q_OBJECT
                  Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)
                  public:
                  SPColors();
                  virtual ~SPColors();

                  		Q_INVOKABLE QString getTheme() const;
                  		Q_INVOKABLE bool setTheme(const QString& theme);
                  		void setColor(QColor inputcolor)
                  		{
                  			color = inputcolor;
                  			emit colorChanged();
                  		}
                  		QColor getColor() const
                  		{
                  			return color;
                  		}
                  	signals:
                  		void colorChanged();
                  
                  	private:
                  		QString currentTheme_;
                  		QColor color;
                  	};
                  

                  CPP
                  SPColors::SPColors()
                  {
                  setColor(QColor("#FFFFFF"));
                  }

                  setTheme(...String theme) // this is called by other dialog
                  {
                  if (theme=="white")
                  setColor(QColor("#000000"));
                  else
                  setColor(QColor("#FFFFFF"));
                  }

                  QML
                  Text {
                  id: text_
                  color: SPColors.color

                  p3c0P Offline
                  p3c0P Offline
                  p3c0
                  Moderators
                  wrote on last edited by
                  #10

                  @Jehyeok

                  !!!! PS text color has been changed !! but the current top position dialog only. Not main window !! I would like to update colors in all window

                  Good. Apply the same logic to other windows too.

                  157

                  JehyeokJ 1 Reply Last reply
                  0
                  • p3c0P p3c0

                    @Jehyeok

                    !!!! PS text color has been changed !! but the current top position dialog only. Not main window !! I would like to update colors in all window

                    Good. Apply the same logic to other windows too.

                    JehyeokJ Offline
                    JehyeokJ Offline
                    Jehyeok
                    wrote on last edited by
                    #11

                    @p3c0
                    Oh may you miss-understood.

                    I set this color in the Text component which is used all my windows.
                    MyText.qml
                    Text
                    {
                    color: SPColors.color
                    }

                    DialogA.qml
                    MyText
                    {
                    }
                    DialogB.qml
                    MyText
                    {
                    }

                    I expected to see all text color changes (in dialogA, dialogB).
                    But it is applied only one dialog(DialogA which trigger setTheme and emit colorChanged).
                    Do you know how to apply it in entire windows?

                    p3c0P 1 Reply Last reply
                    0
                    • JehyeokJ Jehyeok

                      @p3c0
                      Oh may you miss-understood.

                      I set this color in the Text component which is used all my windows.
                      MyText.qml
                      Text
                      {
                      color: SPColors.color
                      }

                      DialogA.qml
                      MyText
                      {
                      }
                      DialogB.qml
                      MyText
                      {
                      }

                      I expected to see all text color changes (in dialogA, dialogB).
                      But it is applied only one dialog(DialogA which trigger setTheme and emit colorChanged).
                      Do you know how to apply it in entire windows?

                      p3c0P Offline
                      p3c0P Offline
                      p3c0
                      Moderators
                      wrote on last edited by
                      #12

                      @Jehyeok It should work too. I tested a similar case and it works.

                      Do you know how to apply it in entire windows?

                      The way you tried should work.

                      157

                      JehyeokJ 1 Reply Last reply
                      1
                      • p3c0P p3c0

                        @Jehyeok It should work too. I tested a similar case and it works.

                        Do you know how to apply it in entire windows?

                        The way you tried should work.

                        JehyeokJ Offline
                        JehyeokJ Offline
                        Jehyeok
                        wrote on last edited by
                        #13

                        @p3c0 You are right !!!
                        Beautiful !!

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved