Sagemath

Cyrille Piatecki

unread,

Jul 7, 2022, 11:07:34 AM7/7/22

to JSXGraph

I use a lot of computation through Sagemath. It's a very nice tools but as it is written in Python, I have decided to use Jsxgraph which is nearly perfect up to the fact that it is a little bit like Tex. It need a Latex. But I try (with the help of one friend to construct some functions which could simplify the use of it.

Here is a simple question (the question is simple but I anticipate either a No answer or a complex one). All my work is done through Html pages and Sage Cells. If would like to know if it would be possible to insert a SageCell inside a Jsxgraph board (perhaps like a Foregin process) and what would be a dream to be able to use the result into Jsxgraph.

In all cases, it should be possible since even in SageMath all is treated in HTML pages.

Here follow a SageCell preceded by its call in the <Head> of the htlm file

$(function () {

// Convert *every* div of class 'compute' into a Sage cell

sagecell.makeSagecell({inputLocation: 'div.compute',

template: sagecell.templates.restricted, // (minimal)Change this to sagecell.templates.restricted, in case

// you want the students to see the code, but not modify it

evalButtonText: ',Eacute#Générer la solution'});

});

let chapitre="Exo : 7.1";//modifier en fonction du chapitre Il s'agit de la numérotation des exo

let indice=1;

document.addEventListener("DOMContentLoaded", function(event) {

let liste=document.querySelectorAll(".numexo");

for (let elem of liste) {

console.log(elem);

elem.innerText=chapitre+"-"+indice;

indice+=1;

}

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

=========================

%display latex

m=13 #nombre de contraintes

n=9 #nombre de variables

A=matrix(m,n,(

0,1,0,0,0,0,0,0,0,

0,0,1,0,0,0,0,0,0,

0,0,0,1,0,0,0,0,0,

0,0,0,0,1,0,0,0,0,

0,0,0,0,0,1,0,0,0,

0,0,0,0,0,0,1,0,0,

0,0,0,0,0,0,0,1,0,

0,0,0,0,0,0,0,0,1,

0,1,0,-1,-1,0,0,0,0,

0,0,1,0,0,-1,-1,0,0,

0,0,0,1,0,1,0,-1,0,

0,0,0,0,1,0,0,0,1,

1,0,0,0,0,0,0,-1,-1))

bmin=[0,0,0,0,0,0,0,0,0,0,0,0,0]

bmax=[4,6,3,4,2,3,6,6,0,0,0,0,0]

c=matrix(1,n,(1,0,0,0,0,0,0,0,0))

p1 = MixedIntegerLinearProgram(maximization=True, solver = "GLPK") # Création du MILP

# on peut remplacer GLPK par PPL pour obtenir une optimisation fractionnaire.

x = p1.new_variable(integer=False, indices=[0..n-1]) # les nouvelles variables seront x[1]... x[7]}

B = A * x # m

# Construction des contraintes

for i in range(m):

p1.add_constraint(B[i], min=bmin[i], max=bmax[i])

# remove_constraint() pour en retirer une

for i in range(n):

p1.set_min(x[i],0)

p1.set_objective(x[0])# définition de l'objectif

p1.show() # Vérification

</script>

</div>

Alfred Wassermann

unread,

Jul 7, 2022, 11:56:27 AM7/7/22

to JSXGraph

This sounds very interesting and no way impossible. Can you please post a complete (minimal) HTML file so that we can start with?

Best wishes,

Alfred

Cyrille Piatecki

unread,

Jul 8, 2022, 9:17:46 AM7/8/22

to JSXGraph

Alfred, here is the minimal exemple you asked.

<!DOCTYPE html>

<html>

<head>

<title>[chapitre 1 : Introduction]</title>

</head>

<body>

// this is because if you imput two cells in the same html sheet , you will not loose the computation done in the first cell in the second one.

</div>

<br/>

sol=1+1

show(LatexExpr(r"\text{La solution de l'addition est : }"),sol)

</script>

</div>

</body>

</h1>

</html>

Alfred Wassermann

unread,

Jul 15, 2022, 11:59:35 AM7/15/22

to JSXGraph

Dear Cyrille,

here is a partial solution. If one uses the default print() in python/sage, then the output is free of MathJax.

So, in the code below, I use the python JSON module to print the computed data as JSON string.

Then, with JavaScript in the browser the element of class $(".sagecell_stdout") is parsed as JSON string

and the data could be used.

The only problem which remains is that one has to press the button "get data" to start the import after the sage computation is done.

What is needed is an event which tells the browser that the sage data has arrived. I'm not aware of such an event, but I'm no expert in sage at all.

This is a quite simple solution but it has the advantage that the sagecell code is not changed.

Best wishes,

Alfred

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>[chapitre 1 : Introduction]</title>
<script src="https://sagecell.sagemath.org/static/jquery.min.js"></script>
<script src="https://sagecell.sagemath.org/embedded_sagecell.js"></script>
</head>
<body>

<br line-height:10px;></br>
<div class="circle"; div style="display:table-cell; vertical-align">
<font color="#73ffff"><center>cl1</center></font>
</div>
<br/>
<script>sagecell.makeSagecell({"inputLocation": ".sage1", linked: true,evalButtonText: "$\\color{red}{\\triangle}$",autoeval:false});

console.log(window);

</script>
<div class="sage1">
<script type="text/x-sage">

import json

sol=1+1
# show(LatexExpr(r"\text{La solution de l'addition est : }"), sol)
data = {'sol': int(sol)}
print(json.dumps(data))
</script>
</div>
<p>
<button onClick="importData();">Get data</button>
<script>
function importData() {
var msg = JSON.parse($(".sagecell_stdout").text());
console.log(msg, msg.sol);
}
</script>
</body>
</h1>
</html>

Reply all

Reply to author

Forward