QRCode: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
← Older editNewer edit →
No edit summary
No edit summary
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.
 
Images should be in your project folder or a subfolder.  
 
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.
 
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 ===
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.


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.
QR Code default to 115 x 115 pixels.
 
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]]


== Properties ==
== Properties ==
Line 40: Line 14:
{| 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.
| value || The text to be converted to a QR Code. Can be a URL or any other text string.
|}
|}


Line 50: Line 24:


<pre>
<pre>
Rem Image Example
Function QRCode1_onclick()
Function Image1_onmouseover()
   Msgbox "Click!"
   Msgbox "Over!"
End Function
End Function
</pre>
</pre>


To change an image at runtime, use  
To change a QRCode at runtime, use  
<pre>
<pre>
Image1.src = "a.jpg"
QRCode1.setValue(Input1.value)
</pre>
 
To get the name of the image clicked on:
<pre>
Function Image1_onclick()
  MsgBox event.currentTarget.id
End Function
</pre>
</pre>


Line 71: Line 37:
<pre>
<pre>
//Image Example
//Image Example
Image1.onmouseover = function() {
Image1.onclick= function() {
   alert("Over!");
   alert("Click!");
}
}
</pre>
</pre>
Line 78: Line 44:
To change an image at runtime, use  
To change an image at runtime, use  
<pre>
<pre>
Image1.firstChild.src = "a.jpg";
QRCode1.setValue(Input1.value);
</pre>
 
To get the name of the image clicked on:
<pre>
Image1.onclick = function() {
  alert(event.currentTarget.id);
}
</pre>
</pre>


Revision as of 15:14, 14 September 2016

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.

QR Code default to 115 x 115 pixels.

Properties

Standard properties are supported, plus:

value The text to be converted to a QR Code. Can be a URL or any other text string.

Events

Standard events are supported.

Example (Basic)

Function QRCode1_onclick()
  Msgbox "Click!"
End Function

To change a QRCode at runtime, use 

QRCode1.setValue(Input1.value)

Example (JavaScript)

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

To change an image at runtime, use 

QRCode1.setValue(Input1.value);

Output

Related Items

PictureBox

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