How to pass variable py-script to javascript?

Technical Topics PyScript
1

I am making a page with HTML and javascript. And I made and executed Python file with physcript. Python files have an if statement, and if certain conditions are met, I want to change the value of javascript in HTML. What should I do?

1 Like
2

from ktsh.tanaka.2020 to whomi

hello.
The first thing to do is to write out “Under what conditions does the value of javascript change?”.
And you should write Python code on it.

Once that is done, it is extremely dangerous to test in a production environment suddenly, so did you try to create a test environment and did the corresponding parameters change? please? It is a good idea to check.

Once that’s done, it’s even better to have your peers and friends use the test environment to review the run results.

Scripts that pass such tests will actually work in production.

Regards, you.
ktsh.tanaka.2020

3

Thank you for reply.
This is my python code

import string
import os

#Program Version
py_current_version = 0
#Server Version
py_server_version = 0

#Get Program Version
f = open("version.txt", "r")

lines = f.readlines()
for line in lines:
    py_current_version = line;
f.close()

#Get Server Version
f = open("https://common.gaon.xyz/proj/MCD/versions.txt", "r")

lines = f.readlines()
for line in lines:
    py_server_version = line;
f.close()

if py_current_version == py_server_version:
    no_update_available = 1
else:
    no_update_available = 0
    os.system('wget https://common.gaon.xyz/MCD/latest.zip')
    update_file_download_complete = 1
    os.system('7z x latest.zip')
    update_complete = 1
    os.system('notepad changelog.txt')

And This is my HTML code

<!DOCTYPE html>
<html>
	<head>
		<title>Updater</title>
		<meta charset="utf-8">
		<!--Load CSS-->
		<!--Load Bootstrap-->
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!--Load Updater Style CSS-->
		<link href="./updater_style.css" rel="stylesheet">
		<!--Load PyScript-->
		<link href="./pyscript/pyscript.css" rel="stylesheet">
		<!--Load jQuery-->
		<script src="./jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<style>
		
		</style>
		<script>
			function wait(sec) {
    			let start = Date.now(), now = start;
    			while (now - start < sec * 1000) {
        			now = Date.now();
    			}
			}

			var no_update_available;
			var update_file_download_complete;
			var update_complete;

			if(no_update_available == 0)
			{
				$("#progress_contents_ptag").text("Update Found!");
				document.getElementById("update_progress").value = 5;
				wait(3);
				$("#progress_contents_ptag").text("Downloading update file...");
				document.getElementById("update_progress").value = 10;

				if(update_file_download_complete == 1)
				{
					$("#progress_contents_ptag").text("Update file download complete!");
					document.getElementById("update_progress").value = 30;
					wait(3);
					$("#progress_contents_ptag").text("Terminating process...");
					document.getElementById("update_progress").value = 50;
					wait(3);
					$("#progress_contents_ptag").text("Extracting update file...");
					document.getElementById("update_progress").value = 80;
					if(update_complete == 1)
					{
						$("#progress_contents_ptag").text("Update completed! It will end in a few seconds.");
						document.getElementById("update_progress").value = 100;
						wait(3);
						exit();
					}
				}
			}
			else if(no_update_available == 1)
			{
				$("#progress_contents_ptag").text("There are no updates. It will end in a few seconds");
				$("#cancle_button").text("Close");
				wait(5);
				exit();
			}
		</script>
		<div id="contents_body">
			<div id="progress_contents">
				<p id="progress_contents_ptag" class="progress_title">Checking Update!</p>
			</div>
			<progress id="update_progress" max="100" value="0"></progress>
			<br><br>
			<button id="cancle_button" type="button" class="btn btn-secondary" onclick="exits()">취소</button>
		</div>

		<script>
			function exits(){
				window.close();
			}
		</script>
		<!--Load Scripts-->
		<!--Load Bootstrap-->
		<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
		<!--Load PyScript-->
		<script src="./pyscript/pyscript.js"></script>
		<py-env>
  - string
  - os
  - path:
  	- ./updater.py
</py-env>
		<!--
		<py-script src="./updater.py"></py-script>
		-->
	</body>
</html>

I made these files to electron. However, there is a problem that progress bar is not displayed.

1 Like
4

from ktsh.tanaka.2020 to whomi

Probably because I didn’t call javascript from python.

Basically, you can call javascript as a Python child process. However, in order to run the opposite process, it will be a python-generated file and you will have to create and load JSON.

In other words, it is correct to call a module written in javascript from a python script. In particular,

function adding (callback, num) {
console.log (num); // Initially 0
callback (num); // wait (num => {n ++; …}, num}; this num’s increment
}

// If you forget callback () and the argument, Nan (Not a number) will be displayed.

// Call wait further in the wait callback function and repeat it.
adding (num => {
num ++;
adding (num => {
num ++;
adding (num => {
num ++;

    }, num);
 }, num);

}, 0);

//Execution result
0
1
2

It looks like this.

Regards, you.
ktsh.tanaka.2020

5

Thank you for reply @ktsh.tanaka.2020 .

It seems difficult, but I’ll give it a try. Thank you for your answer.

6

You can call Javascript functions from Python and access Javascript global variables from Python. The solution is to import the js namespace:

import js

Call a function from Python:

js.MyFunc()

Access global variables (read and write):

js.myVar = 10

<script>
var myVar = 0;
function MyFunc() {
    // do something here
}
</script>
1 Like
7

Thank you for reply @john.hanley .

I tried using your answer, but progress is not increase.

Thank you for answer.

1 Like