IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

danielhagnoul

Julia. Notebook Pluto sur Chrome avec VSCode.

Noter ce billet
par , 05/03/2021 à 10h18 (4223 Affichages)
  • Le 2021-03-03, j'utilise Julia_1.6.0-rc1 sur VS_Code_1.53.2. Ordinateur : W10 Pro, i9-10900F.
  • Préalables, mes billets précédents sur Julia sont supposés connus et assimilés.


Pluto permet de créer une interface utilisateur en exécutant du code Julia dans une page web (codes HTML, CSS, JS), il utilise aussi le langage "markdow".

Paquets

Nous aurons besoin de plusieurs paquets, voici la liste actuelle de mes paquets :

  [336ed68f] CSV v0.8.4
  [159f3aea] Cairo v1.0.5
  [5ae59095] Colors v0.12.6
  [a93c6f00] DataFrames v0.22.5
  [864edb3b] DataStructures v0.18.9
  [0c46a032] DifferentialEquations v6.16.0
  [186bb1d3] Fontconfig v0.4.0
  [ac1192a8] HypertextLiteral v0.5.2
  [7073ff75] IJulia v1.23.2
  [6218d12a] ImageMagick v1.1.6
  [916415d5] Images v0.23.3
  [c8e1da08] IterTools v1.3.0
  [b964fa9f] LaTeXStrings v1.2.0
  [7eb4fadd] Match v1.1.0
  [c03570c3] Memoize v0.4.4
  [ccf2f8ad] PlotThemes v2.0.1
  [91a5bcdd] Plots v1.10.6
  [c3e4b0f8] Pluto v0.12.21
  [7f904dfe] PlutoUI v0.7.2
  [1a8c2f83] Query v1.0.0
  [f269a46b] TimeZones v1.5.3
  [44d3d7a6] Weave v0.10.6
  [1a1011a3] SharedArrays
Dans ce billet nous utiliserons :

  
  [0c46a032] DifferentialEquations v6.16.0
  [ccf2f8ad] PlotThemes v2.0.1
  [91a5bcdd] Plots v1.10.6
  [c3e4b0f8] Pluto v0.12.21
  [7f904dfe] PlutoUI v0.7.2
  [f269a46b] TimeZones v1.5.3
Pluto

On commence par créer le nouveau dossier "mes_notebooks" à l'emplacement adéquat. Chez moi, cet endroit se nomme : "C:\Users\User\Documents\Julia".

Dans l'explorateur de fichier, on clique droit sur "mes_notebooks" et on choisit l'option "Ouvrir avec Code", résultat on ouvre VSCode dans le bon dossier.

Dans ce dossier on crée le fichier "init.jl", contenu ci_dessous :

Code Julia : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
using Pluto
 
Pluto.run()

Ce fichier étant ouvert et le curseur à la fin du fichier, on tape ensemble les touches <maj> et <entrée>. Ce qui ouvre le terminal "Julia REPL" (cela prend un peu de temps la première fois) et exécute le contenu du fichier. Résultat Chrome s'ouvre en affichant Pluto.

Au bas de la page web, cliquer sur "Create a new notebook". Après le chargement, le notebook est disponible, vous pouvez taper du code dans la cellule. Nous allons charger les paquets nécessaires, initier Plots avec GR, mettre en place un thème pour les graphiques et améliorer le contraste (j'ai des problèmes de vues).

Code Julia : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
begin
	using PlutoUI, DifferentialEquations, PlotThemes, Plots
	gr()
	theme(:juno)
 
	html"""<style>
	main {
		max-width: 1000px;
		background-color: rgba(55, 55, 128, .35);
	}
	"""
end

La valeur de "max-width" dépend de la largeur disponible sur votre écran, j'ai un 27 pouces et j'utilise souvent 1500px.

Pour exécuter le contenu de la cellule, il y a deux méthodes disponibles :

  1. Taper ensemble les touches <maj> et <entrée>
  2. Taper ensemble les touches <ctrl> et <entrée>


La deuxième méthode exécute la cellule en cours et ouvre la cellule suivante.

Lorsque le curseur est dans la cellule, il y a de petits boutons presque invisibles pour moi, ils deviennent plus visibles lorsque le curseur s'en approche. On peut supprimer la cellule à droite, on peut exécuter la cellule, en bas à droite, on peut cacher le code en haut à gauche et on peut ouvrir une nouvelle cellule en bas à gauche.

Lorsque vous exécutez la cellule, en bas à droite à côté de la flèche, il y a un compteur de temps, pour l'instant il indique : 6.8 s.

Pour sauvegardez le notebook cliquer en haut sur le texte "Save notebook...", comme nous sommes parti du fichier "init" dans notre dossier "mes_notebooks" il se transforme automatiquement en "C:\Users\User\Documents\Julia\mes_notebooks\" et il ouvre un menu qui propose "init.jl" en première option, bien entendu il faut choisir un autre nom ou cliquer sur l'option "notebook.jl", ce que nous faisons ici.

Fermer Chrome, revenir dans VSCode, placer le curseur dans le terminal "Julia REPL" et taper ensemble sur les touches <ctrl><c> pour fermer la session Pluto. Tuer le terminal pour repartir sur de nouvelles bases.

Nouvelle session Pluto

Le fichier "init.jl" étant ouvert et le curseur à la fin du fichier, on clique ensemble les touches <maj> et <entrée>. Ce qui ouvre le terminal "Julia REPL" et exécute le contenu du fichier. Résultat Chrome s'ouvre en affichant Pluto. Au bas de la page web, cliquer sur "mes_notebooks\notebook.jl". Après le chargement, le notebook est disponible.

Vous pouvez cacher la première cellule, bouton en haut à gauche. Vous pouvez la rouvrir si nécessaire, en cliquant au même endroit.

Nous allons créer un "slider" et afficher sa valeur.

md"m : $(@bind m Slider(1:10, default=5, show_value=true))".

Vous pouvez écrire @bind m Slider(1:10, default=5, show_value=true) mais si vous voulez le nom de la variable devant le "slider" il faut inclure ce code dans le langage "markdown" : md"m : $()".

À vous la suite, voici un lien vers une version statique HTML de mon "notebook" "Mes premiers pas avec Pluto".

Fermer Chrome, revenir dans VSCode, placer le curseur dans le terminal "Julia REPL" et taper ensemble sur les touches <ctrl><c> pour fermer la session Pluto. Tuer le terminal pour repartir sur de nouvelles bases.

Nouvelle session Pluto en ouvrant un "notebook" externe

On commence par copier-coller le code ci-dessous dans votre dossier "mes_notebooks".

Code Julia : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
### A Pluto.jl notebook ###
# v0.12.21
 
using Markdown
using InteractiveUtils
 
# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end
 
# &#9556;&#9552;&#9569; 89df9682-7b94-11eb-39a5-2f696f5ca3ba
begin
	using PlutoUI, Dates, TimeZones, PlotThemes, Plots, DifferentialEquations
	gr()
	theme(:juno)
	TimeZones.build()
 
	html"""<style>
	main {
		max-width: 1000px;
		background-color: rgba(237, 196, 33, .55);
	}
	"""
end
 
# &#9556;&#9552;&#9569; 9529ec10-7ccb-11eb-2747-a7ef8617ee32
md"### ODE Lorentz"
 
# &#9556;&#9552;&#9569; 9689f560-7d88-11eb-3586-fb21f55ed458
begin
	zdt = ZonedDateTime(DateTime("2021-03-05T08:54:48.908+01:00", "yyyy-mm-ddTHH:MM:SS.ssszz"), tz"Europe/Brussels")
	md"Daniel Hagnoul $zdt"
end
 
# &#9556;&#9552;&#9569; a3d3e000-7b94-11eb-27c5-434ad0dbf8ae
function parameterized_lorenz!(du,u,p,t)
     x,y,z = u
     &#963;,&#961;,&#946; = p
     du[1] = dx = &#963;*(y-x)
     du[2] = dy = x*(&#961;-z) - y
     du[3] = dz = x*y - &#946;*z
end;
 
# &#9556;&#9552;&#9569; b20be3c0-7d88-11eb-11b4-fb1858161fb1
md"x : $(@bind x Slider(1:3, default=1, show_value=true))
 
y : $(@bind y Slider(0:3, default=0, show_value=true))
 
z : $(@bind z Slider(0:3, default=0, show_value=true))
 
sigma : $(@bind sigma Slider(6:14, default=10, show_value=true))
 
rho : $(@bind rho Slider(24:32, default=28, show_value=true))
 
beta : $(@bind beta Slider(2.0:0.1:3.0, default=2.67, show_value=true))
 
ts : $(@bind ts Slider(1:5:200, default=80, show_value=true))"
 
# &#9556;&#9552;&#9569; c81f68ce-7b94-11eb-3a16-df6d15044c76
begin
	u0 = [x; y; z]
	tspan = (0.0, ts)
	p = [sigma, rho, beta]
 
	prob = ODEProblem(parameterized_lorenz!, u0, tspan, p)
	sol = solve(prob)
 
	plot(sol, vars=(1,2,3), gridlinewidth=3.0, legend=:none)
end
 
# &#9556;&#9552;&#9569; Cell order:
# &#9567;&#9472;89df9682-7b94-11eb-39a5-2f696f5ca3ba
# &#9567;&#9472;9529ec10-7ccb-11eb-2747-a7ef8617ee32
# &#9567;&#9472;9689f560-7d88-11eb-3586-fb21f55ed458
# &#9568;&#9552;a3d3e000-7b94-11eb-27c5-434ad0dbf8ae
# &#9567;&#9472;b20be3c0-7d88-11eb-11b4-fb1858161fb1
# &#9568;&#9552;c81f68ce-7b94-11eb-3a16-df6d15044c76

Le fichier "init.jl" étant ouvert et le curseur à la fin du fichier, on clique ensemble les touches <maj> et <entrée>. Ce qui ouvre le terminal "Julia REPL" et exécute le contenu du fichier. Résultat Chrome s'ouvre en affichant Pluto.

Revenir dans VSCode, placer le curseur sur le nom du nouveau "notebook", chez moi "lorentz.jl". Faire un clic droit et sélectionner "Copier le chemin". Retourner dans la page Pluto, cliquer dans le menu "Enter Path or URL..." et taper <ctrl><v> pour entrer le chemin de notre nouveau "notebook". Cliquer sur "Open" ouvrira le "notebook Lorentz".

Amuser vous avec les "sliders", pour voir les codes il faut rendre les cellules visibles, ce que vous savez déjà faire.

Code source du "notebook" "Mes premiers pas avec Pluto"

Code Julia : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
### A Pluto.jl notebook ###
# v0.12.21
 
using Markdown
using InteractiveUtils
 
# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
    quote
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
        el
    end
end
 
# &#9556;&#9552;&#9569; 1a109d00-7c01-11eb-3abf-4f4a68e9116d
begin
	using PlutoUI, DifferentialEquations, PlotThemes, Plots
	gr()
	theme(:juno)
 
	html"""<style>
	main {
		max-width: 1000px;
		background-color: rgba(237, 196, 33, .55);
	}
	"""
end
 
# &#9556;&#9552;&#9569; 37f8d590-7cc8-11eb-2268-5d36dc6d9ad2
md"### Mes premiers pas avec Pluto"
 
# &#9556;&#9552;&#9569; 54b4f1a0-7cc8-11eb-1dbd-31683c668a4b
md"##### Un slider"
 
# &#9556;&#9552;&#9569; 015ca210-7c09-11eb-0e19-9114b50da274
md"m : $(@bind m Slider(1:10, default=5, show_value=true))"
 
# &#9556;&#9552;&#9569; 14424450-7cc9-11eb-1df9-dd7e16252857
md"##### Print()"
 
# &#9556;&#9552;&#9569; 4789bbbe-7c0d-11eb-16cc-03feb7b380fa
Print(m .* rand(10))
 
# &#9556;&#9552;&#9569; 2d7d9e10-7cc9-11eb-0535-6533266eeb44
md"##### Conseil pour afficher une valeur"
 
# &#9556;&#9552;&#9569; 0400ceb0-7cc7-11eb-0f77-fd0bddafadba
md"Vous ne pouvez pas utiliser print, println, @show ou |> println directement, le résultat s'afficherai alors dans le terminal VSCode. Il faut utiliser Print() ou with_terminal(), exemple ci-dessous."
 
# &#9556;&#9552;&#9569; 6d761cde-7cc9-11eb-34c0-e76fa559d14a
md"##### with_terminal() do"
 
# &#9556;&#9552;&#9569; 834cb2b2-7cc7-11eb-0302-ed67a6187dc2
with_terminal() do
	@show valeur = 1 + 1 ÷ 2
	1 + 1 ÷ 2 |> println
	println("Le résultat de mon calcul est $(1 + 1 ÷ 2)")
end
 
# &#9556;&#9552;&#9569; 7da729b0-7cc9-11eb-2a19-11d4b2fbb9e0
md"##### Plot"
 
# &#9556;&#9552;&#9569; c62b56f0-7cc6-11eb-2d00-3bffaa0bb1af
plot(1:10, log.(m .* rand(10)))
 
# &#9556;&#9552;&#9569; Cell order:
# &#9567;&#9472;1a109d00-7c01-11eb-3abf-4f4a68e9116d
# &#9567;&#9472;37f8d590-7cc8-11eb-2268-5d36dc6d9ad2
# &#9567;&#9472;54b4f1a0-7cc8-11eb-1dbd-31683c668a4b
# &#9567;&#9472;015ca210-7c09-11eb-0e19-9114b50da274
# &#9567;&#9472;14424450-7cc9-11eb-1df9-dd7e16252857
# &#9567;&#9472;4789bbbe-7c0d-11eb-16cc-03feb7b380fa
# &#9567;&#9472;2d7d9e10-7cc9-11eb-0535-6533266eeb44
# &#9567;&#9472;0400ceb0-7cc7-11eb-0f77-fd0bddafadba
# &#9567;&#9472;6d761cde-7cc9-11eb-34c0-e76fa559d14a
# &#9567;&#9472;834cb2b2-7cc7-11eb-0302-ed67a6187dc2
# &#9567;&#9472;7da729b0-7cc9-11eb-2a19-11d4b2fbb9e0
# &#9567;&#9472;c62b56f0-7cc6-11eb-2d00-3bffaa0bb1af

Licence Creative Commons Attribution 2.0 Belgique

Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Viadeo Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Twitter Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Google Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Facebook Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Digg Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Delicious Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog MySpace Envoyer le billet « Julia. Notebook Pluto sur Chrome avec VSCode. » dans le blog Yahoo

Commentaires