mkrieger/asn-qr-code-label-generator
1
0
Fork 0
mirror of https://github.com/tmaier/asn-qr-code-label-generator.git synced 2026-03-14 16:43:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added color picker

Browse source
This commit is contained in:
Benjamin da Silva Moreira 2026-01-03 12:44:33 +01:00
parent b2c263c11d
commit 790ac71407
6 changed files with 59 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.idea/.gitignore generated vendored Normal file
View file

@ -0,0 +1,3 @@
# Default ignored files
/shelf/
/workspace.xml

9
.idea/asn-qr-code-label-generator.iml generated Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/misc.xml generated Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="openjdk-21" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/asn-qr-code-label-generator.iml" filepath="$PROJECT_DIR$/.idea/asn-qr-code-label-generator.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

27
index.html
View file

@ -22,6 +22,10 @@
size: A4; size: A4;
} }
} }
.colorPicker {
height: 42px;
}
</style> </style>
</head> </head>
<body class="print:p-0" x-data="qrCodeApp()"> <body class="print:p-0" x-data="qrCodeApp()">
@ -156,6 +160,20 @@
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
/> />
</div> </div>
<div>
<label
for="color"
class="mb-2 block text-sm font-medium text-gray-900"
>Color</label
>
<input
type="color"
id="color"
x-model="color"
@input="updateUrl()"
class="w-full rounded-lg border focus:border-blue-500 focus:ring-blue-500 colorPicker"
/>
</div>
<div> <div>
<div class="flex items-start"> <div class="flex items-start">
<div class="flex h-5 items-center"> <div class="flex h-5 items-center">
@ -225,6 +243,7 @@
'text-[2.4mm]': label.text.length == 9, 'text-[2.4mm]': label.text.length == 9,
'text-[2.1mm]': label.text.length >= 10, 'text-[2.1mm]': label.text.length >= 10,
}" }"
:style="'color: ' + color"
x-text="label.text" x-text="label.text"
></div> ></div>
</div> </div>
@ -261,6 +280,7 @@
startNumber: 1, startNumber: 1,
prefix: "ASN", prefix: "ASN",
leadingZeros: 4, leadingZeros: 4,
color: "#000000",
borderToggle: false, borderToggle: false,
labels: [], labels: [],
@ -277,6 +297,9 @@
const val = parseInt(params.get("leadingZeros"), 10); const val = parseInt(params.get("leadingZeros"), 10);
if (!isNaN(val) && val >= 0) this.leadingZeros = val; if (!isNaN(val) && val >= 0) this.leadingZeros = val;
} }
if (params.has("color")) {
const val = params.get("color");
}
if (params.has("borderToggle")) { if (params.has("borderToggle")) {
this.borderToggle = params.get("borderToggle") === "true"; this.borderToggle = params.get("borderToggle") === "true";
} }
@ -287,6 +310,7 @@
params.set("startNumber", this.startNumber); params.set("startNumber", this.startNumber);
params.set("prefix", this.prefix); params.set("prefix", this.prefix);
params.set("leadingZeros", this.leadingZeros); params.set("leadingZeros", this.leadingZeros);
params.set("color", this.color);
params.set("borderToggle", this.borderToggle); params.set("borderToggle", this.borderToggle);
const newUrl = `${window.location.pathname}?${params.toString()}`; const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.replaceState({}, "", newUrl); window.history.replaceState({}, "", newUrl);
@ -303,8 +327,9 @@
.toString() .toString()
.padStart(leadingZerosInt + 1, "0"); .padStart(leadingZerosInt + 1, "0");
let text = this.prefix + paddedNumber; let text = this.prefix + paddedNumber;
let color = this.color.replace("#", "");
// See https://goqr.me/api/doc/create-qr-code/ // See https://goqr.me/api/doc/create-qr-code/
let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent( let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&color=${color}&data=${encodeURIComponent(
text text
)}`; )}`;