Web log de Serge Boisse
On line depuis 1992 !
Des idées pour faire des progress bar dans Obsidian.
cf programmation de Plugins Obsidian
cf. http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
et https://freefrontend.com/css-progress-bars/
label for="file">File progress:</label>
<progress id="file" max="100" value="35"> toto </progress>
le toto est la valeur pour les navigateurs qui ne supportent pas l'elément progress.
valeur indéfinie:
<progress max="100">
<strong>Progress: 60% done.</strong>
</progress>
CSS dans le tag : (noter qu'on dit black pour le fond mais il s'affiche orange !') width et height fonctionnent
<progress id="file" max="100" value=45
style="
background: black;
width:300px;
height:30px;
">
toto </progress>
plus compliqué :
We are on page ProgressBar.
soit un exemple de liste de tâches
pour récupérer la fraction de tâches complétées sur une page qui en contient, on peut utiliser la commande suivante (ajouter un = au début du code avant le ")
"tâches terminées <progress value='" + (length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text)) * 100 + "' max='100'></progress>" + " " + round((length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text)) * 100) + "%"
tâches terminées 67%(pour la mise à jour de la barre de progression il peut être nécessaire de repasser en mode édition puis vue, ou d'éditer le code js)
On peut utiliser un générateur de barres en
ligne (noter le changement de couleur
rouge->jaune->vert selon value !)
="![progress](https://progress-bar.dev/"+90+"/?width=200)"
il faut donner quelques metadata. pas transcendant ☹.
(Code Dataview) :
TABLE without id
Progress_Bar AS "Progress Bar", Progress
FROM ""
where Status = "Currently-reading"
SORT Progress desc
| 1 | |
|---|---|
| 10 |
Il ya quand même des gens qui font des trucs pas mal avec ça
: https://forum.obsidian.md/t/project-tracking-metaedit-dataview-and-kanban/19343
Il y a maintenant un plugin progressbar (pas testé) : https://github.com/quorafind/obsidian-task-progress-bar
const slider = dv.el("input");
const valelt=dv.el("i","50%");
const progress = dv.el("progress");
slider.type="range";
slider.style='width:80%;height:15px;background:#ff8;';
progress.value = 0.5;
progress.style = 'width:80%;height:50px;';
slider.addEventListener('input', (e) =>{testSlider(e.target.value)});
function testSlider(val) {
valelt.innerHTML=val+"%";
progress.value = val/100.
}
Auteur: Serge Boisse
Date: Le 26/08/2023 à 22:30
Type: info/astuces/programmer/javascript
Tags: programmation,langages,javascript,astuces,js
Commentaires (0) :
Page :Ajouter un commentaire (pas besoin de s'enregistrer)
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.