Skip to content

Commit c1e82d7

Browse files
casperbakkercasperbakker
committed
Add height support to Dynamic HTML renderer
1 parent da57395 commit c1e82d7

8 files changed

+191
-33
lines changed

‎generate-verified-files.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ function getSaveFilename($value) {
1212
$generatorHTML = new Picqer\Barcode\BarcodeGeneratorHTML();
1313
file_put_contents('tests/verified-files/081231723897-code128.html', $generatorHTML->getBarcode('081231723897', $generatorHTML::TYPE_CODE_128));
1414

15+
file_put_contents('tests/verified-files/12345678903-imb.html', $generatorHTML->getBarcode('12345678903', $generatorHTML::TYPE_IMB));
16+
1517
$generatorDynamicHTML = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
1618
file_put_contents('tests/verified-files/081231723897-dynamic-code128.html', $generatorDynamicHTML->getBarcode('081231723897', $generatorDynamicHTML::TYPE_CODE_128));
1719

20+
file_put_contents('tests/verified-files/12345678903-dynamic-imb.html', $generatorDynamicHTML->getBarcode('12345678903', $generatorDynamicHTML::TYPE_IMB));
21+
1822
$generatorSVG = new Picqer\Barcode\BarcodeGeneratorSVG();
1923
file_put_contents('tests/verified-files/0049000004632-ean13.svg', $generatorSVG->getBarcode('0049000004632', $generatorSVG::TYPE_EAN_13));
2024

‎src/BarcodeGeneratorDynamicHTML.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
class BarcodeGeneratorDynamicHTML extends BarcodeGenerator
66
{
7+
private const WIDTH_PRECISION = 6;
8+
79
/**
810
* Return an HTML representation of barcode.
911
*
@@ -16,18 +18,19 @@ public function getBarcode($barcode, $type, string $foregroundColor = 'black')
1618
{
1719
$barcodeData = $this->getBarcodeData($barcode, $type);
1820

19-
$widthFactor = 100 / $barcodeData->getWidth();
20-
2121
$html = '<div style="font-size:0;position:relative;width:100%;height:100%">' . PHP_EOL;
2222

2323
$positionHorizontal = 0;
2424
/** @var BarcodeBar $bar */
2525
foreach ($barcodeData->getBars() as $bar) {
26-
$barWidth = $bar->getWidth() * $widthFactor;
26+
$barWidth = $bar->getWidth() / $barcodeData->getWidth() * 100;
27+
$barHeight = round(($bar->getHeight() / $barcodeData->getHeight() * 100), 3);
2728

2829
if ($bar->isBar() && $barWidth > 0) {
30+
$positionVertical = round(($bar->getPositionVertical() / $barcodeData->getHeight() * 100), 3);
31+
2932
// draw a vertical bar
30-
$html .= '<div style="background-color:' . $foregroundColor . ';width:' . $barWidth . '%;height:100%;position:absolute;left:' . $positionHorizontal . '%;top:0;">&nbsp;</div>' . PHP_EOL;
33+
$html .= '<div style="background-color:' . $foregroundColor . ';width:' . round($barWidth, self::WIDTH_PRECISION) . '%;height:' . $barHeight . '%;position:absolute;left:' . round($positionHorizontal, self::WIDTH_PRECISION) . '%;top:' . $positionVertical . (($positionVertical > 0) ? '%' : '') . ';">&nbsp;</div>' . PHP_EOL;
3134
}
3235

3336
$positionHorizontal += $barWidth;

‎src/BarcodeGeneratorHTML.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ public function getBarcode($barcode, $type, int $widthFactor = 2, int $height =
2828

2929
if ($bar->isBar() && $barWidth > 0) {
3030
$positionVertical = round(($bar->getPositionVertical() * $height / $barcodeData->getHeight()), 3);
31+
3132
// draw a vertical bar
3233
$html .= '<div style="background-color:' . $foregroundColor . ';width:' . $barWidth . 'px;height:' . $barHeight . 'px;position:absolute;left:' . $positionHorizontal . 'px;top:' . $positionVertical . 'px;">&nbsp;</div>' . PHP_EOL;
3334
}

‎tests/BarcodeDynamicHtmlTest.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,19 @@
44

55
class BarcodeDynamicHtmlTest extends TestCase
66
{
7-
public function test_html_barcode_generator_can_generate_code_128_barcode()
7+
public function test_dynamic_html_barcode_generator_can_generate_code_128_barcode()
88
{
99
$generator = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
1010
$generated = $generator->getBarcode('081231723897', $generator::TYPE_CODE_128);
1111

1212
$this->assertStringEqualsFile('tests/verified-files/081231723897-dynamic-code128.html', $generated);
1313
}
14+
15+
public function test_dynamic_html_barcode_generator_can_generate_imb_barcode_to_test_heights()
16+
{
17+
$generator = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
18+
$generated = $generator->getBarcode('12345678903', $generator::TYPE_IMB);
19+
20+
$this->assertStringEqualsFile('tests/verified-files/12345678903-dynamic-imb.html', $generated);
21+
}
1422
}

‎tests/BarcodeHtmlTest.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,12 @@ public function test_html_barcode_generator_can_generate_code_128_barcode()
1111

1212
$this->assertStringEqualsFile('tests/verified-files/081231723897-code128.html', $generated);
1313
}
14+
15+
public function test_html_barcode_generator_can_generate_imb_barcode_to_test_heights()
16+
{
17+
$generator = new Picqer\Barcode\BarcodeGeneratorHTML();
18+
$generated = $generator->getBarcode('12345678903', $generator::TYPE_IMB);
19+
20+
$this->assertStringEqualsFile('tests/verified-files/12345678903-imb.html', $generated);
21+
}
1422
}

‎tests/verified-files/081231723897-dynamic-code128.html‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
<div style="font-size:0;position:relative;width:100%;height:100%">
2-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:0%;top:0;">&nbsp;</div>
3-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:2.970297029703%;top:0;">&nbsp;</div>
4-
<div style="background-color:black;width:2.970297029703%;height:100%;position:absolute;left:5.9405940594059%;top:0;">&nbsp;</div>
5-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:10.891089108911%;top:0;">&nbsp;</div>
6-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:14.851485148515%;top:0;">&nbsp;</div>
7-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:18.811881188119%;top:0;">&nbsp;</div>
8-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:21.782178217822%;top:0;">&nbsp;</div>
9-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:23.762376237624%;top:0;">&nbsp;</div>
10-
<div style="background-color:black;width:2.970297029703%;height:100%;position:absolute;left:27.722772277228%;top:0;">&nbsp;</div>
11-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:32.673267326733%;top:0;">&nbsp;</div>
12-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:35.643564356436%;top:0;">&nbsp;</div>
13-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:40.594059405941%;top:0;">&nbsp;</div>
14-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:43.564356435644%;top:0;">&nbsp;</div>
15-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:46.534653465347%;top:0;">&nbsp;</div>
16-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:52.475247524752%;top:0;">&nbsp;</div>
17-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:54.455445544554%;top:0;">&nbsp;</div>
18-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:58.415841584158%;top:0;">&nbsp;</div>
19-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:63.366336633663%;top:0;">&nbsp;</div>
20-
<div style="background-color:black;width:3.960396039604%;height:100%;position:absolute;left:65.346534653465%;top:0;">&nbsp;</div>
21-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:70.29702970297%;top:0;">&nbsp;</div>
22-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:72.277227722772%;top:0;">&nbsp;</div>
23-
<div style="background-color:black;width:2.970297029703%;height:100%;position:absolute;left:76.237623762376%;top:0;">&nbsp;</div>
24-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:80.19801980198%;top:0;">&nbsp;</div>
25-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:82.178217821782%;top:0;">&nbsp;</div>
26-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:87.128712871287%;top:0;">&nbsp;</div>
27-
<div style="background-color:black;width:2.970297029703%;height:100%;position:absolute;left:92.079207920792%;top:0;">&nbsp;</div>
28-
<div style="background-color:black;width:0.99009900990099%;height:100%;position:absolute;left:96.039603960396%;top:0;">&nbsp;</div>
29-
<div style="background-color:black;width:1.980198019802%;height:100%;position:absolute;left:98.019801980198%;top:0;">&nbsp;</div>
2+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:0%;top:0;">&nbsp;</div>
3+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:2.970297%;top:0;">&nbsp;</div>
4+
<div style="background-color:black;width:2.970297%;height:100%;position:absolute;left:5.940594%;top:0;">&nbsp;</div>
5+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:10.891089%;top:0;">&nbsp;</div>
6+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:14.851485%;top:0;">&nbsp;</div>
7+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:18.811881%;top:0;">&nbsp;</div>
8+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:21.782178%;top:0;">&nbsp;</div>
9+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:23.762376%;top:0;">&nbsp;</div>
10+
<div style="background-color:black;width:2.970297%;height:100%;position:absolute;left:27.722772%;top:0;">&nbsp;</div>
11+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:32.673267%;top:0;">&nbsp;</div>
12+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:35.643564%;top:0;">&nbsp;</div>
13+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:40.594059%;top:0;">&nbsp;</div>
14+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:43.564356%;top:0;">&nbsp;</div>
15+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:46.534653%;top:0;">&nbsp;</div>
16+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:52.475248%;top:0;">&nbsp;</div>
17+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:54.455446%;top:0;">&nbsp;</div>
18+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:58.415842%;top:0;">&nbsp;</div>
19+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:63.366337%;top:0;">&nbsp;</div>
20+
<div style="background-color:black;width:3.960396%;height:100%;position:absolute;left:65.346535%;top:0;">&nbsp;</div>
21+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:70.29703%;top:0;">&nbsp;</div>
22+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:72.277228%;top:0;">&nbsp;</div>
23+
<div style="background-color:black;width:2.970297%;height:100%;position:absolute;left:76.237624%;top:0;">&nbsp;</div>
24+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:80.19802%;top:0;">&nbsp;</div>
25+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:82.178218%;top:0;">&nbsp;</div>
26+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:87.128713%;top:0;">&nbsp;</div>
27+
<div style="background-color:black;width:2.970297%;height:100%;position:absolute;left:92.079208%;top:0;">&nbsp;</div>
28+
<div style="background-color:black;width:0.990099%;height:100%;position:absolute;left:96.039604%;top:0;">&nbsp;</div>
29+
<div style="background-color:black;width:1.980198%;height:100%;position:absolute;left:98.019802%;top:0;">&nbsp;</div>
3030
</div>

‎tests/verified-files/12345678903-dynamic-imb.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<div style="font-size:0;position:relative;width:100%;height:100%">
2+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:0%;top:33.333%;">&nbsp;</div>
3+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:1.550388%;top:33.333%;">&nbsp;</div>
4+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:3.100775%;top:0;">&nbsp;</div>
5+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:4.651163%;top:0;">&nbsp;</div>
6+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:6.20155%;top:33.333%;">&nbsp;</div>
7+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:7.751938%;top:33.333%;">&nbsp;</div>
8+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:9.302326%;top:33.333%;">&nbsp;</div>
9+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:10.852713%;top:33.333%;">&nbsp;</div>
10+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:12.403101%;top:0;">&nbsp;</div>
11+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:13.953488%;top:0;">&nbsp;</div>
12+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:15.503876%;top:0;">&nbsp;</div>
13+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:17.054264%;top:0;">&nbsp;</div>
14+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:18.604651%;top:0;">&nbsp;</div>
15+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:20.155039%;top:0;">&nbsp;</div>
16+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:21.705426%;top:0;">&nbsp;</div>
17+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:23.255814%;top:0;">&nbsp;</div>
18+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:24.806202%;top:0;">&nbsp;</div>
19+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:26.356589%;top:0;">&nbsp;</div>
20+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:27.906977%;top:0;">&nbsp;</div>
21+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:29.457364%;top:0;">&nbsp;</div>
22+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:31.007752%;top:0;">&nbsp;</div>
23+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:32.55814%;top:0;">&nbsp;</div>
24+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:34.108527%;top:0;">&nbsp;</div>
25+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:35.658915%;top:33.333%;">&nbsp;</div>
26+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:37.209302%;top:0;">&nbsp;</div>
27+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:38.75969%;top:0;">&nbsp;</div>
28+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:40.310078%;top:33.333%;">&nbsp;</div>
29+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:41.860465%;top:0;">&nbsp;</div>
30+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:43.410853%;top:0;">&nbsp;</div>
31+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:44.96124%;top:33.333%;">&nbsp;</div>
32+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:46.511628%;top:33.333%;">&nbsp;</div>
33+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:48.062016%;top:33.333%;">&nbsp;</div>
34+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:49.612403%;top:33.333%;">&nbsp;</div>
35+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:51.162791%;top:0;">&nbsp;</div>
36+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:52.713178%;top:33.333%;">&nbsp;</div>
37+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:54.263566%;top:33.333%;">&nbsp;</div>
38+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:55.813953%;top:33.333%;">&nbsp;</div>
39+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:57.364341%;top:0;">&nbsp;</div>
40+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:58.914729%;top:0;">&nbsp;</div>
41+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:60.465116%;top:33.333%;">&nbsp;</div>
42+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:62.015504%;top:33.333%;">&nbsp;</div>
43+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:63.565891%;top:0;">&nbsp;</div>
44+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:65.116279%;top:33.333%;">&nbsp;</div>
45+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:66.666667%;top:33.333%;">&nbsp;</div>
46+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:68.217054%;top:33.333%;">&nbsp;</div>
47+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:69.767442%;top:0;">&nbsp;</div>
48+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:71.317829%;top:33.333%;">&nbsp;</div>
49+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:72.868217%;top:33.333%;">&nbsp;</div>
50+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:74.418605%;top:33.333%;">&nbsp;</div>
51+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:75.968992%;top:33.333%;">&nbsp;</div>
52+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:77.51938%;top:0;">&nbsp;</div>
53+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:79.069767%;top:33.333%;">&nbsp;</div>
54+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:80.620155%;top:33.333%;">&nbsp;</div>
55+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:82.170543%;top:33.333%;">&nbsp;</div>
56+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:83.72093%;top:0;">&nbsp;</div>
57+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:85.271318%;top:33.333%;">&nbsp;</div>
58+
<div style="background-color:black;width:0.775194%;height:33.333%;position:absolute;left:86.821705%;top:33.333%;">&nbsp;</div>
59+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:88.372093%;top:0;">&nbsp;</div>
60+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:89.922481%;top:0;">&nbsp;</div>
61+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:91.472868%;top:0;">&nbsp;</div>
62+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:93.023256%;top:0;">&nbsp;</div>
63+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:94.573643%;top:33.333%;">&nbsp;</div>
64+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:96.124031%;top:0;">&nbsp;</div>
65+
<div style="background-color:black;width:0.775194%;height:100%;position:absolute;left:97.674419%;top:0;">&nbsp;</div>
66+
<div style="background-color:black;width:0.775194%;height:66.667%;position:absolute;left:99.224806%;top:33.333%;">&nbsp;</div>
67+
</div>

0 commit comments

Comments
 (0)