Merge pull request #2297 from Avaiga/docs/get_resource

Adding example for get_resource for taipy extension

doc/gui/extension/example_library/example_library.py

@@ -9,12 +9,19 @@
 # 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.
 
+import base64
+
 from taipy.gui.extension import Element, ElementLibrary, ElementProperty, PropertyType
 
 
 class ExampleLibrary(ElementLibrary):
     def __init__(self) -> None:
         # Initialize the set of visual elements for this extension library
+
+        logo_path = self.get_resource("assets/logo.png")
+        with open(logo_path, "rb") as f:
+            logo_base64 = base64.b64encode(f.read()).decode("utf-8")
+
         self.elements = {
             # A static element that displays its properties in a fraction
             "fraction": Element(
@@ -51,6 +58,13 @@ def __init__(self) -> None:
                 # The name of the React component (VisualLabelList) that implements this custom
                 # element, exported as LabeledItemList in front-end/src/index.ts
                 react_component="VisualLabelList",
+            ),
+            "logo_with_text": Element(
+                "text",
+                {
+                    "text": ElementProperty(PropertyType.string),
+                    "logo_path": ElementProperty(PropertyType.string, default_value=logo_base64),
+                },
             )
         }
 
@@ -77,4 +91,7 @@ def get_elements(self) -> dict:
 
     def get_scripts(self) -> list[str]:
         # Only one JavaScript bundle for this library.
-        return ["front-end/dist/exampleLibrary.js"]
+        return [
+            "front-end/dist/exampleLibrary.js",
+            "front-end/scripts/logoAnimation.js",
+        ]

doc/gui/extension/example_library/front-end/scripts/logoAnimation.js

@@ -0,0 +1,26 @@
+const style = document.createElement('style');
+style.innerHTML = `
+@keyframes logoAnimation {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.5);
+    }
+}
+
+.logo-animate {
+    animation: logoAnimation 2s infinite alternate;
+}
+`;
+document.head.appendChild(style);
+
+document.addEventListener("DOMContentLoaded", () => {
+    const checkForElement = setInterval(() => {
+        const logoImage = document.querySelector('img[alt="LogoWithText"]');
+        if (logoImage) {
+            logoImage.classList.add('logo-animate');
+            clearInterval(checkForElement);
+        }
+    }, 100);
+});

doc/gui/extension/example_library/front-end/src/LogoWithText.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useDynamicProperty } from "taipy-gui";
+
+interface CaptionProps {
+    text: string;
+    defaultText: string;
+    logoPath: string;
+}
+
+const styles = {
+    container: {
+        display: "flex",
+        alignItems: "center",
+    },
+    logo: {
+        width: "4em",
+        height: "4em",
+        marginRight: "10px",
+    },
+};
+
+const LogoWithText = ({ text, defaultText, logoPath }: CaptionProps) => {
+    const value = useDynamicProperty(text, defaultText, "");
+
+    return (
+        <div style={styles.container}>
+            <img
+                src={`data:image/png;base64,${logoPath}`}
+                alt="LogoWithText"
+                style={styles.logo}
+            />
+            <div>{value}</div>
+        </div>
+    );
+};
+
+export default LogoWithText;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -9,5 +9,6 @@
 import ColoredLabel from "./ColoredLabel";
 import GameTable from "./GameTable";
 import VisualLabelList from "./VisualLabelList";
+import LogoWithText from "./LogoWithText";
 
-export { ColoredLabel as ExampleLabel, GameTable, VisualLabelList };
+export { ColoredLabel as ExampleLabel, GameTable, VisualLabelList, LogoWithText };

doc/gui/extension/logo_with_text.py

@@ -0,0 +1,22 @@
+# 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.
+from example_library import ExampleLibrary
+
+from taipy.gui import Gui
+
+name = "Taipy"
+
+page = """
+<|{name}|logo_with_text|>
+"""
+
+if __name__ == "__main__":
+    Gui(page, libraries=[ExampleLibrary()]).run(title="Logo with text")