Skip to content

Commit b23628f

Browse files
author
Callum Smith
committed
Added a dynamic HTML barcode that scales to the size of it's container
1 parent 516df0d commit b23628f

File tree

6 files changed

+89
-0
lines changed

6 files changed

+89
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
vendor
22
composer.lock
33
composer.phar
4+
.phpunit.result.cache

‎Readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ $generatorSVG = new Picqer\Barcode\BarcodeGeneratorSVG();
5757
$generatorPNG = new Picqer\Barcode\BarcodeGeneratorPNG();
5858
$generatorJPG = new Picqer\Barcode\BarcodeGeneratorJPG();
5959
$generatorHTML = new Picqer\Barcode\BarcodeGeneratorHTML();
60+
$generatorHTML = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
6061
```
6162

6263
## Accepted barcode types

‎generate-verified-files.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ 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+
$generatorDynamicHTML = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
16+
file_put_contents('tests/verified-files/081231723897-dynamic-code128.html', $generatorDynamicHTML->getBarcode('081231723897', $generatorDynamicHTML::TYPE_CODE_128));
17+
1518
$generatorSVG = new Picqer\Barcode\BarcodeGeneratorSVG();
1619
file_put_contents('tests/verified-files/0049000004632-ean13.svg', $generatorSVG->getBarcode('0049000004632', $generatorSVG::TYPE_EAN_13));
1720

‎src/BarcodeGeneratorDynamicHTML.php‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?php
2+
3+
namespace Picqer\Barcode;
4+
5+
class BarcodeGeneratorDynamicHTML extends BarcodeGenerator
6+
{
7+
/**
8+
* Return an HTML representation of barcode.
9+
*
10+
* @param string $barcode code to print
11+
* @param string $type type of barcode
12+
* @param string $foregroundColor Foreground color for bar elements as '#333' or 'orange' for example (background is transparent).
13+
* @return string HTML code.
14+
*/
15+
public function getBarcode($barcode, $type, string $foregroundColor = 'black')
16+
{
17+
$barcodeData = $this->getBarcodeData($barcode, $type);
18+
19+
$widthFactor = 100 / $barcodeData->getWidth();
20+
21+
$html = '<div style="font-size:0;position:relative;width:100%;height:100%">' . PHP_EOL;
22+
23+
$positionHorizontal = 0;
24+
/** @var BarcodeBar $bar */
25+
foreach ($barcodeData->getBars() as $bar) {
26+
$barWidth = $bar->getWidth() / $widthFactor;
27+
28+
if ($bar->isBar() && $barWidth > 0) {
29+
// 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;
31+
}
32+
33+
$positionHorizontal += $barWidth;
34+
}
35+
36+
$html .= '</div>' . PHP_EOL;
37+
38+
return $html;
39+
}
40+
}

‎tests/BarcodeDynamicHtmlTest.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?php
2+
3+
use PHPUnit\Framework\TestCase;
4+
5+
class BarcodeDynamicHtmlTest extends TestCase
6+
{
7+
public function test_html_barcode_generator_can_generate_code_128_barcode()
8+
{
9+
$generator = new Picqer\Barcode\BarcodeGeneratorDynamicHTML();
10+
$generated = $generator->getBarcode('081231723897', $generator::TYPE_CODE_128);
11+
12+
$this->assertStringEqualsFile('tests/verified-files/081231723897-dynamic-code128.html', $generated);
13+
}
14+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div style="font-size:0;position:relative;width:100%;height:100%">
2+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:0%;top:0;">&nbsp;</div>
3+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:3.03%;top:0;">&nbsp;</div>
4+
<div style="background-color:black;width:3.03%;height:100%;position:absolute;left:6.06%;top:0;">&nbsp;</div>
5+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:11.11%;top:0;">&nbsp;</div>
6+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:15.15%;top:0;">&nbsp;</div>
7+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:19.19%;top:0;">&nbsp;</div>
8+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:22.22%;top:0;">&nbsp;</div>
9+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:24.24%;top:0;">&nbsp;</div>
10+
<div style="background-color:black;width:3.03%;height:100%;position:absolute;left:28.28%;top:0;">&nbsp;</div>
11+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:33.33%;top:0;">&nbsp;</div>
12+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:36.36%;top:0;">&nbsp;</div>
13+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:41.41%;top:0;">&nbsp;</div>
14+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:44.44%;top:0;">&nbsp;</div>
15+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:47.47%;top:0;">&nbsp;</div>
16+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:53.53%;top:0;">&nbsp;</div>
17+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:55.55%;top:0;">&nbsp;</div>
18+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:59.59%;top:0;">&nbsp;</div>
19+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:64.64%;top:0;">&nbsp;</div>
20+
<div style="background-color:black;width:4.04%;height:100%;position:absolute;left:66.66%;top:0;">&nbsp;</div>
21+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:71.71%;top:0;">&nbsp;</div>
22+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:73.73%;top:0;">&nbsp;</div>
23+
<div style="background-color:black;width:3.03%;height:100%;position:absolute;left:77.77%;top:0;">&nbsp;</div>
24+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:81.81%;top:0;">&nbsp;</div>
25+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:83.83%;top:0;">&nbsp;</div>
26+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:88.88%;top:0;">&nbsp;</div>
27+
<div style="background-color:black;width:3.03%;height:100%;position:absolute;left:93.93%;top:0;">&nbsp;</div>
28+
<div style="background-color:black;width:1.01%;height:100%;position:absolute;left:97.97%;top:0;">&nbsp;</div>
29+
<div style="background-color:black;width:2.02%;height:100%;position:absolute;left:99.99%;top:0;">&nbsp;</div>
30+
</div>

0 commit comments

Comments
 (0)