diff --git a/doc/gui/extension/example_library/assets/logo.png b/doc/gui/extension/example_library/assets/logo.png new file mode 100644 index 0000000000..0822eff0c8 Binary files /dev/null and b/doc/gui/extension/example_library/assets/logo.png differ diff --git a/doc/gui/extension/example_library/example_library.py b/doc/gui/extension/example_library/example_library.py index acba0aeca4..39bdcd12c5 100644 --- a/doc/gui/extension/example_library/example_library.py +++ b/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", + ] diff --git a/doc/gui/extension/example_library/front-end/scripts/logoAnimation.js b/doc/gui/extension/example_library/front-end/scripts/logoAnimation.js new file mode 100644 index 0000000000..ab7616b5cf --- /dev/null +++ b/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); +}); diff --git a/doc/gui/extension/example_library/front-end/src/LogoWithText.tsx b/doc/gui/extension/example_library/front-end/src/LogoWithText.tsx new file mode 100644 index 0000000000..37339271a3 --- /dev/null +++ b/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 ( +
+ LogoWithText +
{value}
+
+ ); +}; + +export default LogoWithText; diff --git a/doc/gui/extension/example_library/front-end/src/index.ts b/doc/gui/extension/example_library/front-end/src/index.ts index c2de08c126..42799d9516 100644 --- a/doc/gui/extension/example_library/front-end/src/index.ts +++ b/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 }; diff --git a/doc/gui/extension/logo_with_text.py b/doc/gui/extension/logo_with_text.py new file mode 100644 index 0000000000..ad31ab934d --- /dev/null +++ b/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")