Clever Geek Handbook

Lorem Ipsum: Schreiben von Hand

Vorwort





Ich entwickle ein Bildungsprojekt. Und dieses Jahr mussten die Kinder auf Englisch schreiben.



Trotz der Tatsache, dass wir zunehmend Texte in elektronischem Format drucken, ist Handschrift im Alltag und im Berufsleben immer noch beliebt.



Rezepte sind sowohl für Kinder als auch für Erwachsene nützlich. Einige lernen noch schreiben, andere trainieren.



Für uns war es wichtig, ein System für die schnelle und bequeme Auswahl von Rezepten zu schaffen. Deshalb haben wir uns entschlossen, unseren eigenen Generator zu bauen.



Das Thema ist interessant, aber im Internet gab es nur sehr wenige Informationen. So entstand die Idee, Anweisungen zum Erstellen eigener Rezepte zu schreiben.



Tor



Das Rad neu erfinden , um einen eigenen Wortgenerator zu erstellen und persönliche Aufgaben für jeden Schüler zu erstellen.



Die Gründe warum



  1. Preis: Ein Set kostet ca. 300 Rubel
  2. Die Fähigkeit, mehr persönliche Aufgaben zu erledigen, je nachdem, was ausgearbeitet werden muss
  3. Es gibt keine besonderen Informationen zu diesem Thema im Internet, es wurde interessant herauszufinden, wie es funktioniert.
  4. Wenn Sie über eine eigene Technologie verfügen, können Sie diese verfeinern (z. B. die Möglichkeit, die Textgröße zu ändern, oder einen Generator für spezielle Aufgaben im Zusammenhang mit Rezepten).


Schöpfungsprozess



Aufgrund der Besonderheiten meines Projekts wurde meine Implementierung auf PCP vorgenommen. Ich bin sicher, dass es viele andere interessante und gute Möglichkeiten gibt, dieses Problem zu lösen.



Formulierung des Problems



Sie sollten immer mit einer einfachen, mit einer Problemstellung beginnen. Was ist ein Rezeptgenerator? Hier ist ein einfaches Diagramm.



Wir geben den Text ein, aus dem Text wird eine PDF-Datei mit dem Design eines Notizbuchblatts und einer handschriftlichen Schrift erstellt, die umrissen werden muss.



  • Text Eingabe
  • Erstellen einer PDF-Datei
  • ( , )




Wenn gewöhnliches HTML uns bei der Eingabe von Text und beim Senden des Formulars hilft, benötigen wir zum Erstellen eines PDF-Dokuments eine spezielle Bibliothek. Mein Blick fiel auf PDF (es ist klein, kostenlos und einfach - ideal zur Lösung unseres Problems).



Es werden Daten gesendet, es gibt einen PDF-Generator, jetzt benötigen Sie eine Schriftart.



Es gibt eine gute Lernkurve für Schriftarten , die unser Problem perfekt löst. Die Schriftart muss auf der fpdf- Site verarbeitet werden , damit Sie sie dem Skript hinzufügen können (die Codierung von cp1252 ist in Ordnung).



Jetzt bleibt das Design des Notizbuchblatts erhalten: Ich habe die Funktion zum Zeichnen von Zellen von der PDF-Site übernommen , die vertikalen Linien dort entfernt und schräge Linien und Ränder hinzugefügt.



Nachdem Sie alle erforderlichen Elemente gesammelt haben, können Sie einen Rezeptgenerator erstellen.



Alles zusammenfügen



Wir gestalten die HTML-Seite mit der Formularübermittlung (ich habe das Design hier aufgenommen ):



  • Lassen Sie uns die Schriftartenauswahlfelder (grau und gepunktet) erstellen.
  • Lassen Sie uns ein Texteingabefeld erstellen
  • Schaltfläche Daten senden


create-training.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;
}






Bearbeiten der Datei mit der Rasterklasse (Erstellen eines Notizbuchblatts):



  • Deaktivieren Sie vertikale Linien
  • Seitenränder hinzufügen (rote Linie, obwohl sie nach dem Drucken immer noch grau ist)
  • Wir setzen die Farbe der Lineale auf Schwarz, da das hellblaue Notebook auf einem Schwarzweißdrucker nicht sichtbar ist, aber auf einer Farbtinte ist es schade
  • Wir schreiben eine geneigte Linie durch die Tangente des Dreiecks. Empirisch gemessen, dass der Winkel 25 Grad betragen sollte


grid.php (geänderte Datei, in der sich früher der Code zum Erstellen des Rasters befand) 



<?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();
    }
	
}
?>


Jetzt erstellen wir die Datei selbst, um Daten zu verarbeiten und Wörter zu generieren:



  • Hinzufügen einer Schriftauswahl über switch ()
  • Passen Sie die Größe des Textes an (hier können Sie bestimmte Werte auswählen, da die A4-Blattgröße immer gleich ist, dies ist kein Bildschirm). Für Kinder ist es besser, einen größeren zu nehmen, da sie noch lernen und es für sie schwierig sein wird, in kleinen Buchstaben zu schreiben


gotopdf2.php (Handler-Datei, in der alles konfiguriert und erstellt wird) 



<?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();

?>


Alles ist fertig! Unten füge ich die erhaltenen Ergebnisse hinzu:





Nur ein Blatt





Normaler grauer Umriss





Gepunkteter Umriss



Ausgabe



Mit minimalen Kosten erhalten wir unseren eigenen Rezeptgenerator. Dann können Sie hier verschiedene interessante Funktionen hinzufügen: Auswahl der Größe und Farbe von Buchstaben, Sprache usw.



Link zu GitHub



P.S. Ich habe ein Projekt auf einem lokalen Server durchgeführt und xampp verwendet


More articles:


All Articles