[outil] Calculateurs hors ligne en HTML

Répondre
Penn-Maen
Dans le pétrin
Messages : 32
Enregistré le : 04 juin 2019, 12:23

[outil] Calculateurs hors ligne en HTML

Message par Penn-Maen » 24 juil. 2019, 12:43

bonjour,

J'utilise, comme beaucoup ici, la calculette CalcMasa. C'est très bien, mais je suis dans un trou paumé, donc l'accès est parfois... lent...
J'ai essayé le soft de Dann (dans cette même rubrique) : très complet, mais pas simple à prendre en main en ce qui me concerne.

De nos jours, il y a la possibilité de faire des calculs directement dans le html, sans utiliser de script java ou ajax (comme semble le faire calcmasa). Donc pépère (qui ne connait pas grand-chose en HTML et autre langage du WEB) s'est retroussé les manches hier midi et ce midi.
Et je vous propose donc les 2 fichiers joints, que vous pouvez télécharger sur votre phone et ouvrir avec votre navigateur/butineur. Je vous conseille ensuite, une fois les fichiers ouverts, de les marquer en favoris et pourquoi pas les ajouter à l'écran d'accueil de votre navigateur.

1er fichier : Calc_pain.html : permet de calculer les quantités d'ingrédients (pain au levain uniquement)

2nd fichier : Pain_ratio.html : permet de vérifier les ratios selon les quantités d'ingrédient

Chaque modification d'un champ entraine le recalcul automatique du reste.
La présentation est perfectible (adaptation aux taille d'écran, disposition, etc). Le fond d'écran devient rouge quand une valeur n'est pas possible, avec le champ en défaut lui aussi en rouge :
  • La première cause d'erreur est l'utilisation d'un chiffre à virgule là où ce n'est pas autorisé.
  • La seconde est toute simple : il faut utiliser la VIRGULE et pas le point pour les nombres décimaux (c'est peut-être lié à l'OS, je ne sais pas)
Regardez le code source du bouzin si vous voulez l'améliorer. J'ai rédigé ça en partant d'un fichier d'exemple (le lien de la source est dans le fichier) sans presque rien y connaitre, pas de raison que vous n'y arriviez pas ;)

Le forum n'aime pas certaines extensions de fichier, donc j'ai tout collé dans un fichier zip.

Penn-Maen, "fait l'outil à ta main, et pas ta main à l'outil"

PS : ça n'étonnera personne, mais ça ne marche pas sur Internet Explorer 8 sur PC :mrgreen: (firefox c'est OK, et sur phone ça marche au moins avec Opera et Via)

EDIT 25 juillet : fichiers corrigées (il y avait des erreurs dans les calculs comme signalé par Jean-Marc).
Fichiers joints
pain.zip
(2.46 Kio) Téléchargé 25 fois
Modifié en dernier par Penn-Maen le 25 juil. 2019, 07:02, modifié 4 fois.
Haut
Avatar du membre
Mitron
Explosif
Messages : 1105
Enregistré le : 02 févr. 2017, 10:58
Localisation : Alpes Maritimes

Re: [outil] Calculateurs hors ligne en HTML

Message par Mitron » 24 juil. 2019, 14:18

Tu as fait du boulot !
Perso, je me suis fait une feuille de calcul de ce type, dont je me sers depuis pas mal de temps, et qui me va. Mais il y a des copains, connus ou inconnus, qui apprécieront ;)
"Il ne suffit pas qu'un aliment soit bon à manger, encore faut-il qu'il soit bon à penser". Claude Lévi-Strauss
Haut
Avatar du membre
Jean-Marc
Explosif
Messages : 2111
Enregistré le : 03 juin 2016, 14:38
Localisation : Gard

Re: [outil] Calculateurs hors ligne en HTML

Message par Jean-Marc » 24 juil. 2019, 17:17

On dirait qu’il y a un bug mais il est bien possible que ça vienne de moi car j’ai une fâcheuse tendance à être réfractaire à ce genre d’outils et les lire de travers :mrgreen: mais si je prends par exemple les quantités utilisées lors de mes derniers essais je ne retrouve pas les chiffres que je recherche avec cet outil :?
400 g de farine
100 g de levain liquide (100% hydratation soit 25% de levain/poids de farine)
9 g de sel soit 2% du poids total de farine
275 g d’eau
Ce qui fait un poids total de 784 g et un TH de 72,222 % (325g d’eau/450 g de farine)

Si je rentre 784 g de pâte en haut du tableau je ne retrouve pas les différentes quantités à mettre en œuvre dans les autres lignes
Mais je le répète je ne le lis peut-être pas correctement car je peux être un âne bâté dans ce registre...
Haut
Penn-Maen
Dans le pétrin
Messages : 32
Enregistré le : 04 juin 2019, 12:23

Re: [outil] Calculateurs hors ligne en HTML

Message par Penn-Maen » 25 juil. 2019, 06:25

@mitron : j'aime aussi les feuille de calcul, mais s'il faut allumer le PC (10 minutes...) juste pour ça ... :?
@jean-marc : tu as raison, y'a une très grosse boulette quelque part. Mea Culpa. Je vais m'y repencher, j'ai fait ça à la va-vite.

PM, Pénitent au Martinet
Haut
Penn-Maen
Dans le pétrin
Messages : 32
Enregistré le : 04 juin 2019, 12:23

Re: [outil] Calculateurs hors ligne en HTML

Message par Penn-Maen » 25 juil. 2019, 06:34

c'est corrigé. C'est fou comme ça marche mieux si on ne se trompe pas entre division et multiplication :mrgreen:

Je met à jour le fichier du premier post !

Pour ceux que ça intéresse, ci-joint le code source de la page calcul. Vous pouvez la copier et l'enregistrer au format htm ou html sans avoir besoin de télécharger le zip.

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>Pain : Calculs</title>
	<style>
		body{
		  font-family: 'Open Sans',sans-serif;
		  font-weight: 400;
		  font-size: 13px;
		}
		
		:invalid { 
		  background-color: #F0DDDD;
		  border-color: #e88;
		  box-shadow:0 0 5px rgba(255, 0, 0, .8);
		}

		:required {
		  border-color: #88a;
		  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
		}

		form {
		  width:300px;
		  margin: 20px auto;
		}

		input {
		  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		  border:1px solid #ccc;
		  font-size:20px;
		  width:300px;
		  min-height:30px;
		  display:block;
		  margin-bottom:15px;
		  margin-top:5px;
		  outline: none;
		  text-align: right;
		  border-radius:5px;
		}

		input[type=submit] {
		  background:none;
		  padding:10px;
		  cursor: pointer;
		}
		
		label{
		  cursor: pointer;
		}
	</style>
<style class="__css_exfil_protection_filtered_styles"></style></head>
<body>
   <!-- d'après : https://dmouronval.developpez.com/tutoriels/html/formulaires-html5/ -->
	<form oninput="totalfarine.value = (pate.valueAsNumber / (1+(th.valueAsNumber/100))).toFixed(2); 
				   far_ajout.value = (totalfarine.value * (1-(pclevain.valueAsNumber/100) / (1 + (thlevain.valueAsNumber/100)))).toFixed(0);
				   farinelevain.value = (far_ajout.value * (pclevain.valueAsNumber/100) / (1 + (thlevain.valueAsNumber/100))).toFixed(2);
				   totaleau.value = (totalfarine.value * (th.valueAsNumber/100)).toFixed(2);
				   eaulevain.value = (farinelevain.value * (thlevain.valueAsNumber / 100)).toFixed(2);
				   eau.value = (totaleau.value - eaulevain.value).toFixed(0);
				   sel.value = (totalfarine.value * (pcsel.valueAsNumber / 100)).toFixed(2);
				   mlev.value = (far_ajout.value * (pclevain.valueAsNumber/100)).toFixed(0)">

	  <label>Poids de pâte (g) :</label>
	  <input id="pate" name="pate" value="1000" min="1" required="" step="1" type="number">
      
	  <label>Levain (% sur farine) :</label>
	  <input id="pclevain" name="pclevain" value="10" min="1" required="" step="0.1" type="number">
	  
	  <label>TH final (%) :</label>
	  <input id="th" name="th" value="70" min="1" required="" step="0.1" type="number">
	  
	  <label>TH levain (%) :</label>
	  <input id="thlevain" name="thlevain" value="100" min="25" max="150" step="0.1" required="" type="number">
	  
	  <label>Sel (%) :</label>
	  <input id="pcsel" name="pcsel" value="1" required="" step="0.1" type="number">
	  
	  <br>
	  <h2> Masses :</h2>
	  <h3>
	  <label> - Farine à ajouter (g) : </label>
	  <font color="red"><output id="far_ajout" name="far_ajout"></output></font>
	  <br>
	  
	  <label> - Eau à ajouter (g) ___ : </label>
	  <font color="red"><output id="eau" name="eau"></output></font>
	  <br>
	  
	  <label> - Masse de levain (g) : </label>
	  <font color="red"><output id="mlev" name="mlev"></output></font>
	  <br>
	  
	  <label> - Sel (g) ________________ : </label>
	  <font color="red"><output id="sel" name="sel"></output></font>
	  <br>
	  </h3>
	  
	  <h2> Détails :</h2>
	  <h3>
	  <label> - Farine totale (g) : </label> 
	  <font color="red"><output id="totalfarine" name="totalfarine"></output></font>
	  <br>
	  <label> - Eau totale (g) ___ : </label>
	  <font color="red"><output id="totaleau" name="totaleau"></output></font>
	  <br>
	  <label> - Farine du levain (g) ___ : </label>
	  <font color="red"><output id="farinelevain" name="farinelevain"></output></font>
	  <br>
	  <label> - Eau du levain (g) ___ : </label>
	  <font color="red"><output id="eaulevain" name="eaulevain"></output></font>
	  <br>
	  </h3>
	  <br><br>
	 
	</form>

</body></html>
Haut
Avatar du membre
Jean-Marc
Explosif
Messages : 2111
Enregistré le : 03 juin 2016, 14:38
Localisation : Gard

Re: [outil] Calculateurs hors ligne en HTML

Message par Jean-Marc » 25 juil. 2019, 08:06

Penn-Maen a écrit : ↑
25 juil. 2019, 06:34
 C'est fou comme ça marche mieux si on ne se trompe pas entre division et multiplication :mrgreen:
Effectivement, même chez un gaulois réfractaire :D
Haut
Avatar du membre
Lau
Explosif
Messages : 2049
Enregistré le : 08 mars 2016, 08:34
Localisation : Rochefort
Contact :
Contacter Lau

Re: [outil] Calculateurs hors ligne en HTML

Message par Lau » 25 juil. 2019, 18:28

C'est parfait cet outil pour des calculs rapides :)
Haut
Répondre

Retourner vers « Ressources Documentaires »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités