Added examples for progress control (#1809)

+ removed 'color' property from progress control
+ added CSS class names for value and title in the control
+ minor refman issues
+ Fred comments
+ Rename element documentation example directory names to make them module (mypy)
+ Exclude builder doc examples from mypy file list

.github/workflows/partial-tests.yml

@@ -14,7 +14,7 @@ jobs:
 
       - uses: jpetrucciani/mypy-check@master
         with:
-          mypy_flags:  "--ignore-missing-imports --implicit-optional --no-namespace-packages --exclude (taipy/templates/|generate_pyi.py|tools) --follow-imports skip --disable-error-code import-untyped"
+          mypy_flags:  "--ignore-missing-imports --implicit-optional --no-namespace-packages --exclude (taipy/templates/|tools/|doc/gui/examples/.*/builder.py) --follow-imports skip --disable-error-code import-untyped"
 
       - uses: chartboost/ruff-action@v1
   tests:

.pre-commit-config.yaml

@@ -13,7 +13,7 @@ repos:
         - --ignore-missing-imports
         - --implicit-optional
         - --no-namespace-packages
-        - --exclude=(taipy/templates/|generate_pyi.py|tools)
+        - --exclude=(taipy/templates/|tools/|doc/gui/examples/.*/builder.py)
         - --follow-imports=skip
 -   repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5

doc/gui/examples/blocks/pane_anchor/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_anchor/builder.py

@@ -0,0 +1,31 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = True
+
+with tgb.Page() as page:
+    with tgb.pane("{show_pane}", anchor="top", height="50px"):
+        tgb.text("Here is some text that is displayed at the top of the page in a pane.")
+
+    tgb.text("# Main page content", mode="md")
+
+    tgb.text("This is the content of the page.")
+
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_as_page/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_as_page/builder.py

@@ -0,0 +1,61 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+# Initially invested amount
+initial_investment = 100
+# Number of periods
+periods = 0
+# Number of periods
+final_amount = initial_investment
+# Interest rate by period
+rate = 5
+# Is the interest rate setting panel shown
+show_rate = False
+
+with tgb.Page() as rate_page:
+    tgb.text("Rate (in %):")
+    tgb.number("{rate}")
+
+with tgb.Page() as page:
+    tgb.text("# Interest Calculator", mode="md")
+
+    tgb.pane("{show_rate}", show_button=True, page="_rate_pane")
+
+    tgb.text("Initial amount: ", inline=True)
+    tgb.number("{initial_investment}")
+
+    tgb.text("Periods", inline=True)
+    tgb.number("{periods}", min=0, max=50)
+
+    tgb.text("Final amount: ", inline=True)
+    tgb.text("{final_amount}", format="%.2f", inline=True)
+
+
+# Invoked when any control value (initial_investment, rate, or periods) is changed.
+def on_change(state, var_name: str):
+    # Cumulated interest percentage
+    progress = pow(1 + state.rate / 100, state.periods)
+    state.final_amount = state.initial_investment * progress
+
+
+if __name__ == "__main__":
+    pages = {
+        "main": page,
+        "_rate_pane": rate_page,
+    }
+    Gui(pages=pages).run()

doc/gui/examples/blocks/pane-as-page.py → doc/gui/examples/blocks/pane_as_page/markdown.py

@@ -17,34 +17,33 @@
 
 # Initially invested amount
 initial_investment = 100
-# Interest rate by period
-rate = 5
 # Number of periods
 periods = 0
 # Number of periods
 final_amount = initial_investment
+# Interest rate by period
+rate = 5
 # Is the interest rate setting panel shown
 show_rate = False
 
-pane_page = """
+rate_page = """
 Rate (in %):
 <|{rate}|number|>
 """
 
 page = """
-# Interest Calculator
-
 <|{show_rate}|pane|show_button|page=_rate_pane|>
 
+# Interest Calculator
 Initial amount: <|{initial_investment}|number|>
 
 Periods: <|{periods}|number|min=0|max=50|>
 
-Final amount: <|{final_amount}|format=%.2f|>
+Final amount: <|{final_amount}|text|format=%.2f|>
 """
 
 
-# Invoked when any control value is changed.
+# Invoked when any control value (initial_investment, rate, or periods) is changed.
 def on_change(state, var_name: str):
     # Cumulated interest percentage
     progress = pow(1 + state.rate / 100, state.periods)
@@ -54,6 +53,6 @@ def on_change(state, var_name: str):
 if __name__ == "__main__":
     pages = {
         "main": page,
-        "_rate_pane": pane_page,
+        "_rate_pane": rate_page,
     }
     Gui(pages=pages).run()

doc/gui/examples/blocks/pane_persistent/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_persistent/builder.py

@@ -0,0 +1,30 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+with tgb.Page() as page:
+    with tgb.part("d-flex"):
+        with tgb.pane("{show_pane}", persistent=True, show_button=True, width="150px"):
+            tgb.text("Here is the content of the pane.")
+        with tgb.part():
+            tgb.text("# Main page", mode="md")
+            tgb.text("Here is the content of the page.")
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_persistent/markdown.py

@@ -0,0 +1,33 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+show_pane = False
+
+page = """
+<|d-flex|
+<|{show_pane}|pane|persistent|show_button|width=150px|
+Here is the content of the pane.
+|>
+<|
+# Main page
+Here is the content of the page.
+|>
+|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_simple/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_simple/builder.py

@@ -0,0 +1,38 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+
+# When the button is pressed, set the variable controlling the pane visibility to True
+def on_action(state):
+    state.show_pane = True
+
+
+with tgb.Page() as page:
+    tgb.text("# The **pane** block", mode="md")
+
+    with tgb.pane("{show_pane}"):
+        tgb.text("Here is the content of the pane.")
+
+    tgb.text("This is the content of the page.")
+
+    tgb.button("Show pane")
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/blocks/pane_simple_lambda/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.

doc/gui/examples/blocks/pane_simple_lambda/builder.py

@@ -0,0 +1,32 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+import taipy.gui.builder as tgb
+from taipy.gui import Gui
+
+show_pane = False
+
+with tgb.Page() as page:
+    tgb.text("# The **pane** block", mode="md")
+
+    with tgb.pane("{show_pane}"):
+        tgb.text("Here is the content of the pane.")
+
+    tgb.text("This is the content of the page.")
+
+    tgb.button("Show pane", on_action=lambda s: s.assign("show_pane", True))
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-linear.py

@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 72
+
+page = """
+<|{value}|progress|linear|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-simple.py

@@ -0,0 +1,25 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+value = 72
+
+page = """
+<|{value}|progress|>
+"""
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress-styling-texts.py

@@ -0,0 +1,31 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations under the License.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui, Markdown
+
+value = 66
+
+page = Markdown(
+    "<|{value}|progress|show_value|title=In progress|>",
+    style={
+        ".taipy-progress-value": {
+            "font-style: bold",
+            "color: bold",
+        }
+    },
+)
+
+if __name__ == "__main__":
+    Gui(page).run()

doc/gui/examples/controls/progress_styling_circular/__init__.py

@@ -0,0 +1 @@
+# This file makes this directory a module on its own, mandatody for mypy.