Clever Geek Handbook

Lorem Ipsum：手書き

序文





私は教育プロジェクトを開発しています。そして今年、子供たちは英語で書く必要がありました。



私たちがますます電子形式でテキストを印刷しているという事実にもかかわらず、手書きはまだ日常生活や職業生活で人気があります。



レシピは子供と大人の両方にとって便利なものです。まだ書くことを学んでいる人もいれば、訓練している人もいます。



処方箋を素早く便利に選択するためのシステムを作ることは私たちにとって重要でした。そのため、独自のジェネレーターを作成することにしました。



このトピックは興味深いものですが、インターネット上にはほとんど情報がありませんでした。そこで、独自のレシピを作成するための指示を書くというアイデアが生まれました。



ゴール



車輪を再発明するには、独自の単語ジェネレーターを作成して、各学生の個人的な割り当てを作成します。



理由



  1. 価格：1セットで約300ルーブル
  2. 何を解決する必要があるかに応じて、より個人的なタスクを発行する機能
  3. インターネット上にはこのトピックに関する特定の情報はありません。それがどのように機能するかを理解することは興味深いものになりました。
  4. 独自のテクノロジーがある場合は、それを改良できます（たとえば、テキストサイズを変更する機能や、レシピに関連する特別なタスクのジェネレーターを追加します）。


作成のプロセス



私のプロジェクトの特殊性のために、私の実装はPCPで行われました。この問題を解決するために、他にも多くの興味深くて良いオプションがあると確信しています。



問題の定式化



常に、問題の説明を含む単純なものから始める必要があります。レシピジェネレーターとは何ですか？これが簡単な図です。



テキストを入力すると、ノートブックシートのデザインと手書きのフォントを使用してテキストからpdfファイルが作成されます。



  • テキスト入力
  • pdfファイルの作成
  • ( , )




通常のhtmlがテキストの入力とフォームの送信の両方に役立つ場合、pdfドキュメントを生成するには、特別なライブラリが必要です。fpdfに目を向けました（小さく、無料で、シンプルです。問題を解決するのに理想的です）。



データ送信があり、pdfジェネレーターがあります。今度はフォントが必要です。私たちの問題を完全に解決



する優れたフォント学習曲線があります。フォントをスクリプトに追加できるように、fpdfサイトでフォントを処理する必要があります（cp1252エンコーディングで問題ありません）。



ノートブックシートのデザインを取得する必要があります。fpdfサイトからセルを描画する機能を使用し、そこで垂直線を削除し、斜線とマージンを追加しました。



最後に、必要な要素をすべて収集したら、レシピジェネレーターを作成できます。



すべてを一緒に入れて



フォーム送信を使用してhtmlページを設計します（ここで設計を行いました）：



  • フォント選択フィールド（灰色と点線）を作成しましょう
  • テキスト入力フィールドを作成しましょう
  • データ送信ボタン


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






グリッドクラスを使用してファイルを編集する（ノートブックシートを作成する）：



  • 垂直線を無効にする
  • サイドマージンを追加します（印刷後も灰色のままですが、赤い線）
  • 白黒プリンターのノートブックライトブルーは見えないので、定規の色を黒に設定しましたが、カラーインクでは残念です
  • 三角形の接線を通る傾斜線を書きます。角度は25度でなければならないことを経験的に測定しました


grid.php（グリッドを作成するためのコードがあった場所に変更されたファイル） 



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


次に、データを処理して単語を生成するためのファイル自体を作成します。



  • スイッチ（）を介してフォント選択を追加する
  • テキストのサイズを調整します（ここでは、特定の値を選択できます。A4シートのサイズは常に同じであり、画面ではありません）。子供はまだ学習中であり、小さな文字で書くのが難しいため、大きい方を選択することをお勧めします。


gotopdf2.php（すべてが構成および作成されるハンドラーファイル） 



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

?>


すべての準備ができました！以下に、得られた結果を添付します。





シートのみ





通常の灰色の輪郭





点線の輪郭



出力



最小限のコストで、独自のレシピジェネレーターを入手できます。次に、ここにさまざまな興味深い機能を追加できます。文字のサイズと色、言語などを選択します。



GitHubP.S



。へのリンク 私はローカルサーバーでプロジェクトを行っていました。xamppを使用しました


More articles:


All Articles