├── .github
└── FUNDING.yml
├── screenshots
├── home.jpg
└── preview.jpg
├── README.md
├── LICENSE
├── main.css
└── index.php
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | github: [PhilippMundhenk]
3 |
--------------------------------------------------------------------------------
/screenshots/home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PhilippMundhenk/labeler/HEAD/screenshots/home.jpg
--------------------------------------------------------------------------------
/screenshots/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PhilippMundhenk/labeler/HEAD/screenshots/preview.jpg
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Labeler
2 | Labeler is a quick and dirty web interface wrapping around [ptouch-print](https://git.familie-radermacher.ch/linux/ptouch-print.git), a Linux driver and interfacing tool for Brother P-Touch printer by [Dominic Radermacher](https://dominic.familie-radermacher.ch/projekte/ptouch-print/). Most of the work is done by ptouch-print, Labeler is just a wrapper to use it within a browser. The design is based on the [Placeholders form by Mikael Ainalem](https://codepen.io/ainalem/pen/GRqPwoz). Currently, the set of features is very limited:
3 |
4 | ## Features
5 | - Show tape width installed in printer
6 | - Preview of rendered text
7 | - Single and double line prints
8 |
9 | A number of additional features are supported by ptouch-print that could be integrated (images, fonts, fontsizes, ...). I will do so, as I required them, but am open to PRs.
10 |
11 | ## Gallery
12 | 
13 |
14 | 
15 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Philipp Mundhenk
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | #based on https://codepen.io/ainalem/pen/GRqPwoz
2 |
3 | body {
4 | align-items: center;
5 | background-color: #000;
6 | display: flex;
7 | justify-content: center;
8 | height: 100vh;
9 | }
10 |
11 | .form {
12 | background-color: #15172b;
13 | border-radius: 20px;
14 | box-sizing: border-box;
15 | # height: 550px;
16 | # height: 100%;
17 | padding: 20px;
18 | # width: 320px;
19 | }
20 |
21 | .title {
22 | color: #eee;
23 | font-family: sans-serif;
24 | font-size: 36px;
25 | font-weight: 600;
26 | margin-top: 30px;
27 | }
28 |
29 | .subtitle {
30 | color: #eee;
31 | font-family: sans-serif;
32 | font-size: 16px;
33 | font-weight: 600;
34 | margin-top: 10px;
35 | }
36 |
37 | .input-container {
38 | height: 50px;
39 | position: relative;
40 | width: 100%;
41 | }
42 |
43 | .ic1 {
44 | margin-top: 30px;
45 | }
46 |
47 | .ic2 {
48 | margin-top: 30px;
49 | }
50 |
51 | .ic3 {
52 | margin-top: 30px;
53 | height: auto;
54 | }
55 |
56 | .input {
57 | background-color: #303245;
58 | border-radius: 12px;
59 | border: 0;
60 | box-sizing: border-box;
61 | color: #eee;
62 | font-size: 18px;
63 | height: 100%;
64 | outline: 0;
65 | padding: 4px 20px 0;
66 | width: 100%;
67 | }
68 |
69 | .cut {
70 | background-color: #15172b;
71 | border-radius: 10px;
72 | height: 20px;
73 | left: 20px;
74 | position: absolute;
75 | top: -20px;
76 | transform: translateY(0);
77 | transition: transform 200ms;
78 | width: 76px;
79 | }
80 |
81 | .cut-short {
82 | width: 50px;
83 | }
84 |
85 | .cut-long {
86 | width: 100px;
87 | }
88 |
89 | .input:focus ~ .cut,
90 | .input:not(:placeholder-shown) ~ .cut {
91 | transform: translateY(8px);
92 | }
93 |
94 | .placeholder {
95 | color: #65657b;
96 | font-family: sans-serif;
97 | left: 20px;
98 | line-height: 14px;
99 | pointer-events: none;
100 | position: absolute;
101 | transform-origin: 0 50%;
102 | transition: transform 200ms, color 200ms;
103 | top: 20px;
104 | }
105 |
106 | .input:focus ~ .placeholder,
107 | .input:not(:placeholder-shown) ~ .placeholder {
108 | transform: translateY(-30px) translateX(10px) scale(0.75);
109 | }
110 |
111 | .input:not(:placeholder-shown) ~ .placeholder {
112 | color: #808097;
113 | }
114 |
115 | .input:focus ~ .placeholder {
116 | color: #dc2f55;
117 | }
118 |
119 | .submit {
120 | background-color: #08d;
121 | border-radius: 12px;
122 | border: 0;
123 | box-sizing: border-box;
124 | color: #eee;
125 | cursor: pointer;
126 | font-size: 18px;
127 | height: 50px;
128 | margin-top: 30px;
129 | // outline: 0;
130 | text-align: center;
131 | width: 100%;
132 | }
133 |
134 | .submit:active {
135 | background-color: #06b;
136 | }
137 |
--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Labeler
6 |
7 | &1", $output, $retval);
9 | global $tapeSize;
10 | global $title;
11 | $title="Labeler";
12 | global $error;
13 | $error=false;
14 | if(count($output)<3) {
15 | $errorText="ERROR! Printer not connected or turned off!";
16 | $error=true;
17 | }
18 | else {
19 | $tapeSize=$output[3];
20 | if(strpos($tapeSize, "No media") !== false) {
21 | $tapeSize = "None";
22 | } else {
23 | $tapeSize=str_replace("media width = ", "", $tapeSize);
24 | }
25 | }
26 |
27 | global $preview;
28 | $preview=False;
29 | global $line_one;
30 | $line_one="";
31 | global $line_two;
32 | $line_two="";
33 |
34 | if ($_SERVER['REQUEST_METHOD'] === 'POST') {
35 | $line_one=$_POST['line_one'];
36 | $line_two=$_POST['line_two'];
37 | $cmd="ptouch-print --text";
38 | if(!empty($line_one)){
39 | $cmd=$cmd." \"".$line_one."\"";
40 | }
41 | if(!empty($line_two)){
42 | $cmd=$cmd." \"".$line_two."\"";
43 | }
44 |
45 | if ($_POST['action'] == 'print') {
46 | exec("$cmd 2>&1", $output, $retval);
47 | } else if ($_POST['action'] == 'preview') {
48 | $preview=True;
49 | $cmd=$cmd." --writepng '/srv/http/preview.png'";
50 | $output="";
51 | $retVal=0;
52 | exec("$cmd 2>&1", $output, $retval);
53 | if ($retval != 0) {
54 | print("ERROR!
");
55 | foreach($output as $line) {
56 | print($line);
57 | print("
");
58 | }
59 | print("
");
60 | print("
");
61 | }
62 | }
63 | }
64 | ?>
65 |
66 | ');
96 | print('');
99 | print('');
100 | }
101 | }
102 | ?>
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
--------------------------------------------------------------------------------