Clever Geek Handbook

Lorem Ipsum: écrire à la main

Préface





Je développe un projet pédagogique. Et cette année, les enfants avaient besoin d'écrire en anglais.



Malgré le fait que nous imprimons de plus en plus de textes au format électronique, l'écriture manuscrite est toujours populaire dans la vie quotidienne et professionnelle.



Les recettes sont une chose utile pour les enfants et les adultes. Certains apprennent encore à écrire, d'autres sont en formation.



Il était important pour nous de créer un système permettant une sélection rapide et pratique des prescriptions. Par conséquent, nous avons décidé de fabriquer notre propre générateur.



Le sujet est intéressant, mais il y avait très peu d'informations sur Internet. L'idée est donc venue d'écrire des instructions pour créer vos propres recettes.



objectif



Pour réinventer la roue, créez votre propre générateur de mots, créez des devoirs personnels pour chaque élève.



Les raisons pour lesquelles



  1. Prix: un ensemble coûte environ 300 roubles
  2. La capacité d'exécuter des tâches plus personnelles en fonction de ce qui doit être élaboré
  3. il n'y a pas d'informations particulières à ce sujet sur Internet, il est devenu intéressant de comprendre comment cela fonctionne.
  4. Lorsque vous avez votre propre technologie, vous pouvez l'affiner (ajouter la possibilité de changer la taille du texte, par exemple, ou un générateur de tâches spéciales liées aux recettes)


Processus de création



En raison des particularités de mon projet, mon implémentation a été faite sur PCP, je suis sûr qu'il existe de nombreuses autres options intéressantes et bonnes pour résoudre ce problème.



Formulation du problème



Vous devriez toujours commencer par un simple, avec un énoncé du problème. Qu'est-ce qu'un générateur de recettes? Voici un diagramme simple.



Nous entrons le texte, un fichier pdf est créé à partir du texte avec la conception d'une feuille de cahier et une police manuscrite, qui doit être décrite.



  • Saisie de texte
  • Créer un fichier pdf
  • ( , )




Si le html ordinaire nous aide à saisir à la fois le texte et à envoyer le formulaire, alors pour générer un document PDF, nous avons besoin d'une bibliothèque spéciale, mes yeux sont tombés sur fpdf (il est petit, gratuit et simple - idéal pour résoudre notre problème).



Il y a l'envoi de données, il y a un générateur de pdf, maintenant vous avez besoin d'une police.



Il existe une bonne courbe d'apprentissage des polices qui résout parfaitement notre problème. La police devra être traitée sur le site fpdf afin que vous puissiez l'ajouter au script (l'encodage cp1252 convient).



Maintenant, il reste à obtenir le design de la feuille de cahier: j'ai pris la fonction de dessin de cellules du site fpdf , supprimé les lignes verticales, ajouté des lignes obliques et des marges.



Enfin, après avoir rassemblé tous les éléments nécessaires, vous pouvez créer un générateur de recettes.



Mettre tous ensemble



Nous concevons la page html avec la soumission du formulaire (j'ai pris le design ici ):



  • Faisons les champs de sélection de police (gris et pointillés)
  • Faisons un champ de saisie de texte
  • Bouton Envoyer des données


create-exercice.html 



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="decor" action="gotopdf2.php" method="post">

  <div class="form-left-decoration"></div>
  <div class="form-right-decoration"></div>
  <div class="circle"></div>
  <div class="form-inner">
	<h3>   </h3>
		<p> <input type="radio" name="type_letter_propisi" value=0 checked></p>
		<p> <input type="radio" name="type_letter_propisi" value=1></p>  
    <h3>  :</h3>
	<textarea name="data1"rows="10"></textarea>
    <input type="submit" value=" ">
  </div>
</form>
</body>
</html>


style.css 



* {box-sizing: border-box;}
body {background: #f69a73;}
.decor {
  position: relative;
  max-width: 400px;
  margin: 50px auto 0;
  background: white;
  border-radius: 30px;
}
.form-left-decoration,
.form-right-decoration {
  content: "";
  position: absolute;
  width: 50px;
  height: 20px;
  background: #f69a73;
  border-radius: 20px;
}
.form-left-decoration {
  bottom: 60px;
  left: -30px;
}
.form-right-decoration {
  top: 60px;
  right: -30px;
}
.form-left-decoration:before,
.form-left-decoration:after,
.form-right-decoration:before,
.form-right-decoration:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 20px;
  border-radius: 30px;
  background: white;
}
.form-left-decoration:before {top: -20px;}
.form-left-decoration:after {
  top: 20px;
  left: 10px;
}
.form-right-decoration:before {
  top: -20px;
  right: 0;
}
.form-right-decoration:after {
  top: 20px;
  right: 10px;
}
.circle {
  position: absolute;
  bottom: 80px;
  left: -55px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
}
.form-inner {padding: 50px;}
.form-inner input{
  display: inline;
  width: normal;
  padding: 0 20px;
  margin-bottom: 10px;
  background: #E9EFF6;
  line-height: 40px;
  border-width: 0;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
}

.form-inner textarea {
  display: block;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 10px;
  background: #E9EFF6;
  line-height: 40px;
  border-width: 0;
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
}
.form-inner input[type="submit"] {
  margin-top: 30px;
  background: #f69a73;
  border-bottom: 4px solid #d87d56;
  color: white;
  font-size: 14px;
}
.form-inner textarea {resize: none;}
.form-inner h3 {
  margin-top: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #707981;
}






Édition du fichier avec la classe grid (création d'une feuille de cahier):



  • Désactiver les lignes verticales
  • Ajouter des marges latérales (ligne rouge, même si elle sera toujours grise après l'impression)
  • Nous définissons la couleur des règles sur noir, car le cahier bleu clair sur une imprimante noir et blanc ne sera pas visible, mais sur une encre de couleur, c'est dommage
  • Nous écrivons une ligne inclinée passant par la tangente du triangle. Empiriquement mesuré que l'angle doit être de 25 degrés


grid.php (fichier modifié où il y avait le code pour créer la grille) 



<?php
require_once('fpdf182/fpdf.php');

class PDF_Grid extends FPDF {
    var $grid = false;
	var $inclined = false;
	var $border = true;
	var $i_hl= 0;
	var $i_hl_up= 13.5;
	
	
    function DrawGrid()
    {
        if($this->grid===true){
            $spacing = 5;
        } else {
            $spacing = $this->grid;
        }
		$this->SetDrawColor(0,0,0);
        $this->SetLineWidth(0.35);
		$h_limit=$this->h-20;
        for($i=$this->i_hl;$i<$h_limit;$i+=$spacing){						//print _ horizontal lines
            $this->Line(0,$i,$this->w,$i);
        }
		for($i=$this->i_hl_up;$i<$h_limit;$i+=$spacing){						//print up_ horizontal lines 13.5
            $this->Line(0,$i,$this->w,$i);
        }

		//Create inclined lines
		$tan_treangle_inc_line=tan(deg2rad(25));
		if($this->inclined == true){							//print / inclined lines
			$this->SetDrawColor(0,0,0);
			for($i=4;$i<=55;$i+=7)
				$this->Line(12*$i*$tan_treangle_inc_line, 0, 0, 12*$i);
		}
		if($this->border == true){								//print |  right border line
			$this->SetDrawColor(255,0,0);						//red border
			$this->Line(185, 0, 185, 300);
		}
		
    }

    function Header()
    {
        if($this->grid)
            $this->DrawGrid();
    }
	
}
?>


Maintenant, nous créons le fichier lui-même pour traiter les données et générer des mots:



  • Ajout de sélections de polices via le commutateur ()
  • ajuster la taille du texte (ici vous pouvez sélectionner des valeurs spécifiques, puisque la taille de la feuille A4 est toujours la même, ce n'est pas un écran), pour les enfants, il est préférable d'en prendre un plus grand, car ils apprennent encore et il leur sera difficile d'écrire en minuscules


gotopdf2.php (fichier Handler où tout est configuré et créé) 



<?php
require_once('gridphp.php');

$pdf=new PDF_Grid();
	
	/*
	//   
	*/
	
	$pdf->inclined = true;		//  
	$pdf->SetMargins(5,5,25);	// 
	$pdf->grid = 18;			//       
	$pdf->AddPage();
	
	
	/*
	//   ( )
	*/

	switch ($_POST['type_letter_propisi']) {
    case 0:		// 												
		$pdf->AddFont('LearningCurve-Bold','','learning_curve_bold_ot_tt.php');
		$pdf->SetFont('LearningCurve-Bold','',36);
		$pdf->SetTextColor(140,140,140);
		break;
	case 1:		// 														
		$pdf->AddFont('LearningCurve-dashed','','learning_curve_dashed_ot_tt.php');
		$pdf->SetFont('LearningCurve-dashed','',36);
		$pdf->SetTextColor(0,0,0);
		break;
	default:
		$pdf->Write(18,",     ");
		break;
	}
	$text_propisi = mb_convert_encoding($_POST['data1'], "cp1252");
	$pdf->Write(18,"$text_propisi");		//    


$pdf->Output();

?>


Tout est prêt! Ci-dessous je joins les résultats obtenus:





Juste une feuille





Contour gris normal Contour





pointillé



Production



Avec un coût minime, nous obtenons notre propre générateur de recettes. Ensuite, vous pouvez ajouter diverses fonctions intéressantes ici: choisir la taille et la couleur des lettres, la langue, etc.



Lien vers GitHub



P.S. Je faisais un projet sur un serveur local, utilisé xampp


More articles:


All Articles