QRCode: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[file:Image.jpg]]
[[File:Qrcode.png]]


== Description ==
== Description ==


The Image control is used to display an image. The image can be any common format, including jpg, bmp, gif or png. The image is scaled to fit the bounds.
The QRCode control is used to display a [https://en.wikipedia.org/wiki/QR_code QR Code]. QR Codes are widely used to make scannable web links, but have other uses as well.


To add an image to your app, choose the Image icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the button: usually, just onclick.
To add an image to your app, choose the QRCode icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the button: usually, just onclick.


Images should be in your project folder or a subfolder.  
The options argument on setValue is optional. Properties of it are:
{| class="wikitable"
|+ Options
|-
! name !! value
|-
| modules || Bitmatrix class with modules data
|-
| version || Calculated QR Code version. 1-40. Suitable value will be calculated.
|-
| errorCorrectionLevel || Error Correction Level. "L", "M", "Q", "H".
|-
| maskPattern || Calculated Mask pattern. Possible values are 0, 1, 2, 3, 4, 5, 6, 7.
|-
| segments || Generated segments. [https://github.com/soldair/node-qrcode See detailed docs].
|-
| toSJISFunc || Helper function used internally to convert a kanji to its Shift JIS value. Provide this function if you need support for Kanji mode.
|-
| margin || Define how much wide the quiet zone should be. Default 4.
|-
| scale || Scale factor. A value of 1 means 1px per modules (black dots). Default 4.
|-
| small || Relevant only for terminal renderer. Outputs smaller QR code. Default false.
|-
| width || Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over ''scale''.
|-
| color.dark || Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light. Default #0000ff
|-
| color.light || Color of light module. Value must be in hex format (RGBA). Default #ffffff.
|}


If you want to display an image at actual size, set width and height to auto. Otherwise, the image will be scaled to the size you specify.
QRCode defaults to 115 x 115 pixels, but can be made larger.
 
For more control of images at runtime, use the [[PictureBox]] control.
 
If you are using AppStudio on Mac OS or on Windows 10, the color profile of your images needs to be set to a standard value, such as Adobe RGB. You will get error message (which can be ignored) until you fix this. The message you will get will be something like "AppStudio Warning iCCP: known incorrect sRGH profile". Use an image processing app to correct the color profile of your image.
 
=== Organizing Images in your Project ===
 
The easiest way to organize your images is to put all them all in a folder named images, in your project folder.
 
Then, drag the folder from the Finder into AppStudio's Project Explorer window. Now all your images will be included with your project when you deploy.
 
[[File:Dragimagefolder.png]]
 
=== Display a QR Code ===
 
QR Codes can be used to read in a line of text or a URL. Using an API from Google, it is easy to display  in a QR Code.
 
If you would like to display a QR Code offline, or without using the Google API, use the QRCode control.
<pre>
text = "http://www.nsbasic.com"
url = "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="
Image1.src = url + text
</pre>
[[File:Qrcode.png]]


QR Code uses the [https://github.com/soldair/node-qrcode soldair/node-qrcode] library.
== Properties ==
== Properties ==


Line 40: Line 46:
{| class="wikitable"
{| class="wikitable"
|-
|-
| src || Sets the image to be displayed. For example, "mario.jpg". The file should be in the current project or a subfolder of it.
| setValue(''text'' [,''options'']) || The ''text'' to be converted to a QR Code. Can be a URL or any other text string. ''options'' is optional - see above. Run Time.
|-
| value || The text to be converted to a QR Code. Can be a URL or any other text string. Design Time.
|}
|}


Line 47: Line 55:
Standard [[events|events]] are supported.  
Standard [[events|events]] are supported.  


== Example (Basic) ==
== Example ==


<pre>
<tabber>
Rem Image Example
JavaScript=
Function Image1_onmouseover()
<syntaxhighlight lang="JavaScript">
   Msgbox "Over!"
//Image Example
End Function
Image1.onclick= function() {
</pre>
   alert("Click!");
}


To change an image at runtime, use  
// To change an image at runtime, use one of:
<pre>
QRCode1.setValue(Input1.value);
Image1.src = "a.jpg"
options = {width:200, margin: 1};
</pre>
QRCode1.setValue(Input1.value, options);


To get the name of the image clicked on:
// The functions can also be called directly:
<pre>
QRCode.toCanvas(QRCode1, "george", options)
Function Image1_onclick()
</syntaxhighlight>
   MsgBox event.currentTarget.id
|-|
BASIC=
<syntaxhighlight lang="vb.net">
Function QRCode1_onclick()
   Msgbox "Click!"
End Function
End Function
</pre>


== Example (JavaScript) ==
' To change a QRCode at runtime, use one of:
<pre>
QRCode1.setValue(Input1.value)
//Image Example
options = {width:200, margin: 1}
Image1.onmouseover = function() {
QRCode1.setValue(Input1.value, options)
  alert("Over!");
}
</pre>


To change an image at runtime, use
' The functions can also be called directly:
<pre>
QRCode.toCanvas(QRCode1, "george", options)
Image1.firstChild.src = "a.jpg";
</pre>


To get the name of the image clicked on:
</syntaxhighlight>
<pre>
</tabber>
Image1.onclick = function() {
  alert(event.currentTarget.id);
}
</pre>


== Output ==
== Output ==

Latest revision as of 12:14, 28 December 2021

Description

The QRCode control is used to display a QR Code. QR Codes are widely used to make scannable web links, but have other uses as well.

To add an image to your app, choose the QRCode icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the button: usually, just onclick.

The options argument on setValue is optional. Properties of it are:

Options
name value
modules Bitmatrix class with modules data
version Calculated QR Code version. 1-40. Suitable value will be calculated.
errorCorrectionLevel Error Correction Level. "L", "M", "Q", "H".
maskPattern Calculated Mask pattern. Possible values are 0, 1, 2, 3, 4, 5, 6, 7.
segments Generated segments. See detailed docs.
toSJISFunc Helper function used internally to convert a kanji to its Shift JIS value. Provide this function if you need support for Kanji mode.
margin Define how much wide the quiet zone should be. Default 4.
scale Scale factor. A value of 1 means 1px per modules (black dots). Default 4.
small Relevant only for terminal renderer. Outputs smaller QR code. Default false.
width Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale.
color.dark Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than color.light. Default #0000ff
color.light Color of light module. Value must be in hex format (RGBA). Default #ffffff.

QRCode defaults to 115 x 115 pixels, but can be made larger.

QR Code uses the soldair/node-qrcode library.

Properties

Standard properties are supported, plus:

setValue(text [,options]) The text to be converted to a QR Code. Can be a URL or any other text string. options is optional - see above. Run Time.
value The text to be converted to a QR Code. Can be a URL or any other text string. Design Time.

Events

Standard events are supported.

Example

//Image Example
Image1.onclick= function() {
  alert("Click!");
}

// To change an image at runtime, use one of:
QRCode1.setValue(Input1.value);
options = {width:200, margin: 1};
QRCode1.setValue(Input1.value, options);

// The functions can also be called directly:
QRCode.toCanvas(QRCode1, "george", options)


Function QRCode1_onclick()
  Msgbox "Click!"
End Function

' To change a QRCode at runtime, use one of:
QRCode1.setValue(Input1.value)
options = {width:200, margin: 1}
QRCode1.setValue(Input1.value, options)

' The functions can also be called directly:
QRCode.toCanvas(QRCode1, "george", options)

Output

Related Items

PictureBox

Retrieved from "https://wiki.appstudio.dev/index.php?title=QRCode&oldid=11294"