Skip to content

Commit 87c29d8

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-29-2024 6:26:14 PM
1 parent 5e4892b commit 87c29d8

File tree

16 files changed

+652
-22
lines changed

16 files changed

+652
-22
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2953,7 +2953,7 @@
29532953
</ul>
29542954
</li> <li>Release Notes
29552955
<ul>
2956-
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-javascript/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-javascript/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-javascript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
2956+
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-javascript/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-javascript/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-javascript/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-javascript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
29572957
<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-javascript/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-javascript/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-javascript/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-javascript/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-javascript/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-javascript/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-javascript/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-javascript/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-javascript/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-javascript/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-javascript/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
29582958
<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-javascript/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-javascript/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-javascript/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-javascript/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-javascript/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-javascript/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-javascript/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-javascript/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-javascript/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-javascript/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
29592959
<li>2023 Volume 2 - 22.*

‎ej2-javascript/Release-notes/26.2.7.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
3+
description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
4+
platform: ej2-javascript
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for ##Platform_Name## Release Notes
9+
10+
{% include release-info.html date="July 30, 2024" version="v26.2.7" %}
11+
12+
{% directory path: _includes/release-notes/v26.2.7 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}

‎ej2-javascript/barcode/images/logo.png‎

2.67 KB
Loading

‎ej2-javascript/barcode/qrcodegenerator.md‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99
domainurl: ##DomainURL##
1010
---
1111

12-
# Qrcodegenerator in ##Platform_Name## Barcode control
12+
# QrCodeGenerator in ##Platform_Name## Barcode control
1313

1414
## QR Code
1515

@@ -133,4 +133,53 @@ In barcode generators You can customize the barcode text by using display text p
133133
{% endtabs %}
134134

135135
{% previewsample "page.domainurl/code-snippet/barcode/QrGenerator-cs4" %}
136+
{% endif %}
137+
138+
## Enhancing QR Codes with Icons
139+
140+
141+
The EJ2 Barcode Generator now lets you add a [`logo`](https://ej2.syncfusion.com/javascript/documentation/api/barcode/qRCodeLogo/) or icon to your QR codes, boosting their visual appeal, clarity, and even security. Adding a recognizable icon can make it easier for users to identify the source and can help prevent tampering .
142+
143+
### Supported Image Sources
144+
145+
The [`imageSource`](https://ej2.syncfusion.com/javascript/documentation/api/barcode/qRCodeLogo/#imagesource) property of the `QRCodeLogo` class supports the following image sources:
146+
147+
- **Local image path**: Specify the path to the image file relative to your project's root directory (e.g., `images/syncfusion.png`) or as an absolute path (e.g., `/assets/icons/logo.svg`).
148+
- **Remote image URL**: Provide the web address of the image file (e.g., `https://example.com/image.jpg`).
149+
- **Base64 encoded image data**: Embed the image data directly in the code using a Base64-encoded string (e.g., `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`).
150+
151+
### Logo Dimensions
152+
153+
The [`width`](https://ej2.syncfusion.com/javascript/documentation/api/barcode/qRCodeLogo/#width) and [`height`](https://ej2.syncfusion.com/javascript/documentation/api/barcode/qRCodeLogo/#height) properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability.
154+
155+
**Note:** Always test the readability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.ErrorCorrectionLevel.html) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability.
156+
157+
The following image illustrates QR code with logo:
158+
159+
![logo](images/logo.png)
160+
161+
{% if page.publishingplatform == "typescript" %}
162+
163+
{% tabs %}
164+
{% highlight ts tabtitle="index.ts" %}
165+
{% include code-snippet/barcode/QrGenerator-cs5/index.ts %}
166+
{% highlight html tabtitle="index.html" %}
167+
{% include code-snippet/barcode/QrGenerator-cs5/index.html %}
168+
{% endhighlight %}
169+
{% endtabs %}
170+
171+
{% previewsample "page.domainurl/code-snippet/barcode/QrGenerator-cs5" %}
172+
173+
{% elsif page.publishingplatform == "javascript" %}
174+
175+
{% tabs %}
176+
{% highlight js tabtitle="index.js" %}
177+
{% include code-snippet/barcode/QrGenerator-cs5/index.js %}
178+
{% endhighlight %}
179+
{% highlight html tabtitle="index.html" %}
180+
{% include code-snippet/barcode/QrGenerator-cs5/index.html %}
181+
{% endhighlight %}
182+
{% endtabs %}
183+
184+
{% previewsample "page.domainurl/code-snippet/barcode/QrGenerator-cs5" %}
136185
{% endif %}

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/index.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue','calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
}

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
var barcode = new ej.barcodegenerator.QRCodeGenerator
3+
(
4+
{
5+
width: '200px',
6+
height: '200px',
7+
mode: 'SVG',
8+
value: 'Syncfusion',
9+
logo:{
10+
imageSource: 'https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png',
11+
width: 30,
12+
height: 30,
13+
},
14+
errorCorrectionLevel: 30
15+
}
16+
);
17+
barcode.appendTo('#element');
18+

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/index.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
2+
3+
let barcode = new QRCodeGenerator({
4+
width: '200px',
5+
height: '200px',
6+
mode: 'SVG',
7+
value: 'Syncfusion',
8+
logo:{
9+
imageSource: 'https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png',
10+
width: 30,
11+
height: 30,
12+
},
13+
errorCorrectionLevel: 30
14+
});
15+
barcode.appendTo('#element');
16+
17+
18+

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/js/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>EJ2 Barcode</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript UI Controls">
6+
<meta name="author" content="Syncfusion">
7+
<link href="index.css" rel="stylesheet">
8+
9+
10+
<style>
11+
.barcodeStyle{
12+
height: 150px;
13+
width: 200px;
14+
padding-left: 40%;
15+
padding-top: 9%;
16+
}
17+
</style><script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
18+
</head>
19+
20+
21+
<body>
22+
23+
<div id="container" class="barcodeStyle">
24+
<div id="element"></div>
25+
</div>
26+
27+
28+
<script>
29+
var ele = document.getElementById('container');
30+
if(ele) {
31+
ele.style.visibility = "visible";
32+
}
33+
</script>
34+
<script src="index.js" type="text/javascript"></script>
35+
</body></html>

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/systemjs.config.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
20+
"@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
21+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
22+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
23+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
24+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
25+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
30+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
31+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
32+
"@syncfusion/ej2-barcode-generator": "syncfusion:ej2-barcode-generator/dist/ej2-barcode-generator.umd.min.js"
33+
}
34+
});
35+
36+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
37+
document.getElementById('loader').style.display = "none";
38+
document.getElementById('container').style.visibility = "visible";
39+
});

‎ej2-javascript/code-snippet/barcode/QrGenerator-cs5/ts/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Barcode</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Typescript UI Controls" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
12+
<script src="systemjs.config.js"></script>
13+
</head>
14+
<style>
15+
.barcodeStyle{
16+
height: 150px;
17+
width: 200px;
18+
padding-left: 40%;
19+
padding-top: 9%;
20+
}
21+
</style>
22+
23+
<body>
24+
<div id='loader'>Loading....</div>
25+
<div id='container'class="barcodeStyle">
26+
<div id='element'></div>
27+
</div>
28+
</body>
29+
30+
</html>

0 commit comments

Comments
 (0)