You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# # Code that ALWAYS get executed; either main, or imported as module from other script.
2
+
# print(__name__)
3
+
# print("---")
4
+
5
+
# LIBRARIES / PACKAGES IMPORTS.
6
+
7
+
fromjsimportconsole# Allows usage of 'console.log()' function from JavaScript (JS).
8
+
frompyscriptimportwhen# [PyScript] Allows usage of 'pyscript.when' decorator for Python functions, to handle events: 'https://docs.pyscript.net/2024.8.1/api/#pyscriptwhen'.
9
+
frompyscript.webimportpage# [PyScript] Import 'pyscript.web.page' methods to interact with DOM (as an alternative to plain JS methods.): '', 'https://docs.pyscript.net/2024.8.1/api/#pyscriptwebpage'.
10
+
frompyodide.httpimportopen_url# Fetches URLs.
11
+
importpandasaspd# Dataframes, and csv's.
12
+
frompyscriptimportdisplay# [PyScript] Displays content, using in-function intelligence for proper display: 'https://docs.pyscript.net/2024.8.1/api/#pyscriptdisplay'.
13
+
14
+
# Function to print LOG in both environments: Python, and browser console, via JS.
15
+
# - IMPORTANT: requires import package 'js' ('console' module), to print in console.
16
+
defUDFPrintLog(IMessage: str) ->None:
17
+
18
+
# Prints log in Python console.
19
+
print(IMessage)
20
+
# Prints log in JS console.
21
+
console.log(IMessage)
22
+
23
+
returnNone
24
+
25
+
# Function to manage workflow when button with id '#button_load' is clicked.
page["#pyscript_output_dataset_table"][0].innerHTML=""# Clears any previous result.
31
+
input_dataset_url=page["#input_dataset_url"][0].value# Gets input value (not the 'innerHTML').
32
+
33
+
UDFPrintLog(f"[LOG] Fetching data from: '{input_dataset_url}'.")
34
+
dataset_dataframe=pd.read_csv(open_url(input_dataset_url)) # Reads pandas dataframe, by firstly parsing the provided URL.
35
+
36
+
# Make visible pyscript output sections of dataset and console log. Elements used are 'div's, with 'display' property INITIALLY set to 'none' (or 'hidden' via direct property).
display(dataset_dataframe, target="pyscript_output_dataset_table", append="False") # INJECTS the dataframe in the 'innerHTML' of the target element. With 'append="False"', it REPLACES any previous content there might be, instead of appending it with 'div's if using 'append="True"' (DEFAULT, if ommitted).
42
+
43
+
# MAIN FUNCTION.
44
+
defmain():
45
+
46
+
page_message="This example loads a remote CSV file into a Pandas dataframe, and displays it."
page["#pyscript_output_page_message"][0].innerHTML=page_message# Since using a no-self closing element; e.g. 'div', content is placed as 'innerHTML'.
51
+
page["#input_dataset_url"][0].value=input_dataset_url_default# BE CAREFUL! Since using a self-closing element; e.g. 'input', content is set to its value, not using 'innerHTML'. The latter will return empty; i.e. ''.
52
+
53
+
# CODE EXECUTION.
54
+
55
+
# Code executed ONLY when script is called directly; NOT IMPORTED from other script.
<p><b>Validation of 'pyscript.config' parameters.</b></p>
71
-
<!-- USe of 'span' element / tag to manipulate text; more specifi, as an inline element: 'https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/', 'https://www.w3schools.com/tags/tag_span.asp'. -->
<!-- Use of 'span' element / tag to manipulate text; more specific, as an inline element: 'https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/', 'https://www.w3schools.com/tags/tag_span.asp'. -->
If running ALONE: 'pyscript.display' adds new html element '<script-py>'', right after <script>...</script>: '<script-py id="py-0"><div>...<result_from_pyscript01>...</div></script-py>'.
83
84
- IMPORTANT: 'div' is added to ATTACH result, to ANY PREVIOUS inner content of the target DOM element; in this case '<script-py>', since target DOM wasn't specified in the 'pyscript.display' function.
When both 'script's run sequentially, it adds new html elements, but both results get placed at the end, RIGHT AFTER the LAST <script>...</script> EXECUTED (in case, target DOMs were NOT specified in the 'pyscript.display' functions):
93
94
- For 1st script, html element '<script-py id="py-0"></script-py>', still gets created in-place as regular (i.e. after the corresponding '<script>' element), but EMPTY; i.e. '<script-py id="py-0"></script-py>'.
94
95
- Outputs are ALL created and assigned to LAST html element '<script-py>' (in case, target DOMs were NOT specified in the 'pyscript.display' functions): '<script-py id="py-1"><div>...<result_from_pyscript01>...</div><div>...<result_from_pyscript02>...</div></script-py>'; id="py-0" to "py-1", in this case for x2 pyscripts executions.
If running ALONE: 'pyscript.display' adds new html element '<script-py>'', right after <script>...</script> (without <div>): '<script-py id="py-0">...<result_from_display>...</script-py>'.
- For 1st script, html element '<script-py id="py-0"></script-py>', still gets created in-place as regular (i.e. after the corresponding '<script>' element), but EMPTY; i.e. '<script-py id="py-0"></script-py>'.
118
119
- Created outputs depend on which pyscripts were run with 'append=False'. Any pyscript as such, WILL OVERWRITE ANY PREVIOUS inner content of the target DOM (in case, target DOMs were NOT specified in the 'pyscript.display' functions); in this case, 1st pyscript is overwritten and only results from 2nd pyscript are showed: '<script-py id="py-1">...<result_from_pyscript02>...</script-py>'; id="py-0" to "py-1", in this case for x2 scripts executions.
<h2>Example with 'pyscript.display': review 'pyscript.config' parameters.</h2>
128
-
<!-- USe of 'span' element / tag to manipulate text; more specifi, as an inline element: 'https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/', 'https://www.w3schools.com/tags/tag_span.asp'. -->
<!-- Use of 'span' element / tag to manipulate text; more specific, as an inline element: 'https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/', 'https://www.w3schools.com/tags/tag_span.asp'. -->
0 commit comments