Skip to content

Commit 88341bc

Browse files
codemashercodemasher
committed
🚿 move/fix interactive example
1 parent 278554a commit 88341bc

File tree

5 files changed

+281
-260
lines changed

5 files changed

+281
-260
lines changed

‎examples/html.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<body>
4545
<?php
4646

47-
$data = 'https://www.youtube.com/watch?v=DLzxrzFCyOs&t=43s';
47+
$data = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
4848

4949
$options = new QROptions([
5050
'version' => 5,

‎examples/index.html

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>QR Code Generator</title>
7+
<style>
8+
body{ font-size: 20px; line-height: 1.4em; font-family: "Trebuchet MS", sans-serif; color: #000;}
9+
input, textarea, select{font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 75%; line-height: 1.25em; border: 1px solid #aaa; }
10+
input:focus, textarea:focus, select:focus{ border: 1px solid #ccc; }
11+
label{ cursor: pointer; }
12+
#qrcode-settings, div#qrcode-output{ text-align: center; }
13+
div.qrcode{ margin: 0; padding: 0; }
14+
div.qrcode > div { height: 10px; }
15+
div.qrcode > div > span { display: inline-block; width: 10px; height: 10px; }
16+
</style>
17+
</head>
18+
<body>
19+
20+
<form id="qrcode-settings">
21+
22+
<label for="inputstring">Input String</label><br/><textarea name="inputstring" id="inputstring" cols="80" rows="3" autocomplete="off" spellcheck="false"></textarea><br/>
23+
24+
<label for="version">Version</label>
25+
<input id="version" name="version" class="options" type="number" min="1" max="40" value="5" placeholder="version"/>
26+
27+
<label for="maskpattern">Mask Pattern</label>
28+
<input id="maskpattern" name="maskpattern" class="options" type="number" min="-1" max="7" value="-1" placeholder="mask pattern"/>
29+
30+
<label for="ecc">ECC</label>
31+
<select class="options" id="ecc" name="ecc">
32+
<option value="L" selected="selected">L - 7%</option>
33+
<option value="M">M - 15%</option>
34+
<option value="Q">Q - 25%</option>
35+
<option value="H">H - 30%</option>
36+
</select>
37+
38+
<br/>
39+
40+
<label for="quietzone">Quiet Zone
41+
<input id="quietzone" name="quietzone" class="options" type="checkbox" value="true"/>
42+
</label>
43+
44+
<label for="quietzonesize">size</label>
45+
<input id="quietzonesize" name="quietzonesize" class="options" type="number" min="0" max="100" value="4" placeholder="quiet zone"/>
46+
47+
<br/>
48+
49+
<label for="output_type">Output</label>
50+
<select class="options" id="output_type" name="output_type">
51+
<option value="html">Markup - HTML</option>
52+
<option value="svg" selected="selected">Markup - SVG</option>
53+
<option value="png">Image - png</option>
54+
<option value="jpg">Image - jpg</option>
55+
<option value="gif">Image - gif</option>
56+
<option value="text">String - text</option>
57+
<option value="json">String - json</option>
58+
</select>
59+
60+
<label for="scale">scale</label>
61+
<input id="scale" name="scale" class="options" type="number" min="1" max="10" value="5" placeholder="scale"/>
62+
63+
<div>Finder</div>
64+
<label for="m_finder_light">
65+
<input type="text" id="m_finder_light" name="m_finder_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
66+
</label>
67+
<label for="m_finder_dark">
68+
<input type="text" id="m_finder_dark" name="m_finder_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
69+
</label>
70+
71+
<div>Finder dot</div>
72+
<label for="m_finder_dot_light">
73+
<input disabled="disabled" type="text" id="m_finder_dot_light" name="m_finder_dot_light" class="options" autocomplete="off" spellcheck="false"/>
74+
</label>
75+
<label for="m_finder_dot_dark">
76+
<input type="text" id="m_finder_dot_dark" name="m_finder_dot_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
77+
</label>
78+
79+
<div>Alignment</div>
80+
<label for="m_alignment_light">
81+
<input type="text" id="m_alignment_light" name="m_alignment_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
82+
</label>
83+
<label for="m_alignment_dark">
84+
<input type="text" id="m_alignment_dark" name="m_alignment_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
85+
</label>
86+
87+
<div>Timing</div>
88+
<label for="m_timing_light">
89+
<input type="text" id="m_timing_light" name="m_timing_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
90+
</label>
91+
<label for="m_timing_dark">
92+
<input type="text" id="m_timing_dark" name="m_timing_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
93+
</label>
94+
95+
<div>Format</div>
96+
<label for="m_format_light">
97+
<input type="text" id="m_format_light" name="m_format_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
98+
</label>
99+
<label for="m_format_dark">
100+
<input type="text" id="m_format_dark" name="m_format_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
101+
</label>
102+
103+
<div>Version</div>
104+
<label for="m_version_light">
105+
<input type="text" id="m_version_light" name="m_version_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
106+
</label>
107+
<label for="m_version_dark">
108+
<input type="text" id="m_version_dark" name="m_version_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
109+
</label>
110+
111+
<div>Data</div>
112+
<label for="m_data_light">
113+
<input type="text" id="m_data_light" name="m_data_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
114+
</label>
115+
<label for="m_data_dark">
116+
<input type="text" id="m_data_dark" name="m_data_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
117+
</label>
118+
119+
<div>Dark Module</div>
120+
<label for="m_darkmodule_light">
121+
<input disabled="disabled" type="text" id="m_darkmodule_light" class="options" value="" autocomplete="off" spellcheck="false"/>
122+
</label>
123+
<label for="m_darkmodule_dark">
124+
<input type="text" id="m_darkmodule_dark" name="m_darkmodule_dark" class="jscolor options" value="000000" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
125+
</label>
126+
127+
<div>Separator</div>
128+
<label for="m_separator_light">
129+
<input type="text" id="m_separator_light" name="m_separator_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
130+
</label>
131+
<label for="m_separator_dark">
132+
<input disabled="disabled" type="text" id="m_separator_dark" class="options" value="" autocomplete="off" spellcheck="false"/>
133+
</label>
134+
135+
<div>Quiet Zone</div>
136+
<label for="m_quietzone_light">
137+
<input type="text" id="m_quietzone_light" name="m_quietzone_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
138+
</label>
139+
<label for="m_quietzone_dark">
140+
<input disabled="disabled" type="text" id="m_quietzone_dark" class="options" value="" autocomplete="off" spellcheck="false"/>
141+
</label>
142+
143+
<div>logo space</div>
144+
<label for="m_logo_light">
145+
<input type="text" id="m_logo_light" name="m_logo_light" class="jscolor options" value="ffffff" autocomplete="off" spellcheck="false" minlength="6" maxlength="6"/>
146+
</label>
147+
<label for="m_logo_dark">
148+
<input disabled="disabled" type="text" id="m_logo_dark" class="options" value="" autocomplete="off" spellcheck="false"/>
149+
</label>
150+
151+
<br/>
152+
<button type="submit">generate</button>
153+
</form>
154+
<div id="qrcode-output"></div>
155+
156+
<div><a href="https://play.google.com/store/apps/details?id=com.google.zxing.client.android">ZXing Barcode Scanner</a></div>
157+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
158+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.1.1/jscolor.js"></script>
159+
<script>
160+
((form, output, url) => {
161+
162+
$(form).observe('submit', ev => {
163+
Event.stop(ev);
164+
165+
new Ajax.Request(url, {
166+
method : 'post',
167+
parameters : ev.target.serialize(true),
168+
onUninitialized: $(output).update(),
169+
onLoading : $(output).update('[portlandia_screaming.gif]'),
170+
onFailure : response => $(output).update(response.responseJSON.error),
171+
onSuccess : response => $(output).update(response.responseJSON.qrcode),
172+
});
173+
174+
});
175+
})('qrcode-settings', 'qrcode-output', './qrcode-interactive.php');
176+
</script>
177+
178+
</body>
179+
</html>

‎examples/qrcode-interactive.php

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<?php
2+
/**
3+
* @created 18.11.2017
4+
* @author Smiley <[email protected]>
5+
* @copyright 2017 Smiley
6+
* @license MIT
7+
*/
8+
9+
namespace chillerlan\QRCodePublic;
10+
11+
use chillerlan\QRCode\Data\QRMatrix;
12+
use chillerlan\QRCode\QRCode;
13+
use chillerlan\QRCode\QROptions;
14+
15+
require_once '../vendor/autoload.php';
16+
17+
try{
18+
19+
$moduleValues = [
20+
// finder
21+
QRMatrix::M_FINDER | QRMatrix::IS_DARK => $_POST['m_finder_dark'],
22+
QRMatrix::M_FINDER => $_POST['m_finder_light'],
23+
QRMatrix::M_FINDER_DOT | QRMatrix::IS_DARK => $_POST['m_finder_dot_dark'],
24+
// alignment
25+
QRMatrix::M_ALIGNMENT | QRMatrix::IS_DARK => $_POST['m_alignment_dark'],
26+
QRMatrix::M_ALIGNMENT => $_POST['m_alignment_light'],
27+
// timing
28+
QRMatrix::M_TIMING | QRMatrix::IS_DARK => $_POST['m_timing_dark'],
29+
QRMatrix::M_TIMING => $_POST['m_timing_light'],
30+
// format
31+
QRMatrix::M_FORMAT | QRMatrix::IS_DARK => $_POST['m_format_dark'],
32+
QRMatrix::M_FORMAT => $_POST['m_format_light'],
33+
// version
34+
QRMatrix::M_VERSION | QRMatrix::IS_DARK => $_POST['m_version_dark'],
35+
QRMatrix::M_VERSION => $_POST['m_version_light'],
36+
// data
37+
QRMatrix::M_DATA | QRMatrix::IS_DARK => $_POST['m_data_dark'],
38+
QRMatrix::M_DATA => $_POST['m_data_light'],
39+
// darkmodule
40+
QRMatrix::M_DARKMODULE | QRMatrix::IS_DARK => $_POST['m_darkmodule_dark'],
41+
// separator
42+
QRMatrix::M_SEPARATOR => $_POST['m_separator_light'],
43+
// quietzone
44+
QRMatrix::M_QUIETZONE => $_POST['m_quietzone_light'],
45+
// logo
46+
QRMatrix::M_LOGO => $_POST['m_logo_light'],
47+
];
48+
49+
$moduleValues = array_map(function($v){
50+
if(preg_match('/[a-f\d]{6}/i', $v) === 1){
51+
return in_array($_POST['output_type'], ['png', 'jpg', 'gif'])
52+
? array_map('hexdec', str_split($v, 2))
53+
: '#'.$v ;
54+
}
55+
return null;
56+
}, $moduleValues);
57+
58+
59+
$ecc = in_array($_POST['ecc'], ['L', 'M', 'Q', 'H'], true) ? $_POST['ecc'] : 'L';
60+
61+
$options = new QROptions([
62+
'version' => (int)$_POST['version'],
63+
'eccLevel' => constant('chillerlan\\QRCode\\Common\\EccLevel::'.$ecc),
64+
'maskPattern' => (int)$_POST['maskpattern'],
65+
'addQuietzone' => isset($_POST['quietzone']),
66+
'quietzoneSize' => (int)$_POST['quietzonesize'],
67+
'moduleValues' => $moduleValues,
68+
'outputType' => $_POST['output_type'],
69+
'scale' => (int)$_POST['scale'],
70+
'imageBase64' => true,
71+
'imageTransparent' => false,
72+
]);
73+
74+
$qrcode = (new QRCode($options))->render($_POST['inputstring']);
75+
76+
if(in_array($_POST['output_type'], ['png', 'jpg', 'gif', 'svg'])){
77+
$qrcode = '<img alt="qrcode" src="'.$qrcode.'" />';
78+
}
79+
elseif($_POST['output_type'] === 'text'){
80+
$qrcode = '<pre style="font-size: 75%; line-height: 1;">'.$qrcode.'</pre>';
81+
}
82+
elseif($_POST['output_type'] === 'json'){
83+
$qrcode = '<pre style="font-size: 75%; overflow-x: auto;">'.$qrcode.'</pre>';
84+
}
85+
86+
send_response(['qrcode' => $qrcode]);
87+
}
88+
// Pokémon exception handler
89+
catch(\Exception $e){
90+
header('HTTP/1.1 500 Internal Server Error');
91+
send_response(['error' => $e->getMessage()]);
92+
}
93+
94+
/**
95+
* @param array $response
96+
*/
97+
function send_response(array $response){
98+
header('Content-type: application/json;charset=utf-8;');
99+
echo json_encode($response);
100+
exit;
101+
}

0 commit comments

Comments
 (0)