Add a CSS corner if the contrast between QR margin and page background is too low
This commit is contained in:
Miraty
parent
fa72b74713
commit
2a6a4ad056
28
index.php
28
index.php
@ -76,6 +76,8 @@ if (
|
||||
require_once "less.php/lib/Less/Autoloader.php";
|
||||
Less_Autoloader::register();
|
||||
|
||||
$colorScheme['theme'] = $theme;
|
||||
|
||||
$options = array('cache_dir' => 'css/', 'compress' => true);
|
||||
$cssFileName = Less_Cache::Get(array("style.less" => ""), $options, $colorScheme);
|
||||
?>
|
||||
@ -194,6 +196,12 @@ if (
|
||||
|
||||
if (!empty($params['txt'])) {
|
||||
|
||||
$rgbBgColor = array(
|
||||
'r' => hexdec(substr($params['bgColor'],0,2)),
|
||||
'g' => hexdec(substr($params['bgColor'],2,2)),
|
||||
'b' => hexdec(substr($params['bgColor'],4,2)),
|
||||
);
|
||||
|
||||
require "barcode-generator/Utils/QrCode.php";
|
||||
$qrCode = new QrCode();
|
||||
if (!is_null($params['margin']))
|
||||
@ -207,11 +215,7 @@ if (
|
||||
'g' => hexdec(substr($params['mainColor'],2,2)),
|
||||
'b' => hexdec(substr($params['mainColor'],4,2)),
|
||||
))
|
||||
->setBackgroundColor(array(
|
||||
'r' => hexdec(substr($params['bgColor'],0,2)),
|
||||
'g' => hexdec(substr($params['bgColor'],2,2)),
|
||||
'b' => hexdec(substr($params['bgColor'],4,2)),
|
||||
))
|
||||
->setBackgroundColor($rgbBgColor)
|
||||
->setImageType(QrCode::IMAGE_TYPE_PNG);
|
||||
$dataUri = $qrCode->getDataUri();
|
||||
$qrSize = $qrCode->getSize() + 2 * $qrCode->getPadding();
|
||||
@ -224,7 +228,19 @@ if (
|
||||
</div>
|
||||
|
||||
<div class="centered" id="showOnlyQR">
|
||||
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $dataUri ?>"></a>
|
||||
<a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode"<?php
|
||||
|
||||
// Compute the difference between the QR code and theme background colors
|
||||
$diffLight = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-light'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-light'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-light'],-2,2)));
|
||||
$diffDark = abs($rgbBgColor['r']-hexdec(substr($colorScheme['bg-dark'],-6,2))) + abs($rgbBgColor['g']-hexdec(substr($colorScheme['bg-dark'],-4,2))) + abs($rgbBgColor['b']-hexdec(substr($colorScheme['bg-dark'],-2,2)));
|
||||
|
||||
// Determine whether a CSS corner is needed to let the user see the margin of the QR code
|
||||
$contrastThreshold = 64;
|
||||
if ($diffLight < $contrastThreshold)
|
||||
echo " class='needLightContrast'";
|
||||
if ($diffDark < $contrastThreshold)
|
||||
echo " class='needDarkContrast'";
|
||||
?> src="<?= $dataUri ?>"></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
35
style.less
35
style.less
@ -104,6 +104,41 @@ a {
|
||||
|
||||
#qrCode {
|
||||
max-width: 480px;
|
||||
@width: 2px;
|
||||
@lenght: 16px;
|
||||
padding: @width;
|
||||
|
||||
&.needLightContrast {
|
||||
@media @light {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-light @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
|
||||
&.needDarkContrast {
|
||||
@media @dark {
|
||||
background:
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 100%,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 0 0,
|
||||
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 100% 0,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 0 100%,
|
||||
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @lenght @lenght;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
|
||||
@ -6,7 +6,7 @@ $themeDimensionsIcons = array(16, 32, 48, 64, 96, 128, 192, 256, 384, 512);
|
||||
$colorScheme = array(
|
||||
// Light theme
|
||||
"text-light" => "#2a2a2a",
|
||||
"bg-light" => "white",
|
||||
"bg-light" => "#ffffff", // Must be a long hexadecimal color
|
||||
"bgField-light" => "#eeeeee",
|
||||
"bgHelp-light" => "#ececec",
|
||||
"bgTextarea-light" => "#e5e5e5",
|
||||
@ -15,9 +15,10 @@ $colorScheme = array(
|
||||
"border-light" => "#65666b",
|
||||
"borderHover-light" => "#46484e",
|
||||
"borderFocus-light" => "#2a2a2a",
|
||||
"borderQr-light" => "gray",
|
||||
// Dark theme
|
||||
"text-dark" => "white",
|
||||
"bg-dark" => "#2a2a2a",
|
||||
"bg-dark" => "#2a2a2a", // Must be a long hexadecimal color
|
||||
"bgField-dark" => "#31363B",
|
||||
"bgHelp-dark" => "#151616",
|
||||
"bgTextarea-dark" => "#232629",
|
||||
@ -25,5 +26,6 @@ $colorScheme = array(
|
||||
"textareaPlaceholder-dark" => "#bababa",
|
||||
"border-dark" => "#5f5f5f",
|
||||
"borderHover-dark" => "#808080",
|
||||
"borderFocus-dark" => "white"
|
||||
"borderFocus-dark" => "white",
|
||||
"borderQr-dark" => "gray",
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user