Kesbath: Pictureboard - Revision history

Ghenne: /* Version 1.19 */

2015-10-13T20:35:53Z

Version 1.19

← Older revision		Revision as of 20:35, 13 October 2015
Line 292:		Line 292:

	The revised code….		The revised code….

	[[File:Kesbath27.png]]		[[File:Kesbath27.png]]

Ghenne: /* Version 1.19 */

2015-10-13T20:35:37Z

Version 1.19

← Older revision		Revision as of 20:35, 13 October 2015
Line 283:		Line 283:
	=== Version 1.19 ===		=== Version 1.19 ===
	From the JQuery Mobile option in the toolbox add a RadioButton… Change the items to Sound On and Sound Off….		From the JQuery Mobile option in the toolbox add a RadioButton… Change the items to Sound On and Sound Off….
	[[File:Kesbath26.png]]		[[File:Kesbath26.png\|600px]]

	Now for the code…		Now for the code…

Ghenne: /* Version 1.15 */

2015-10-13T20:34:59Z

Version 1.15

← Older revision		Revision as of 20:34, 13 October 2015
Line 243:		Line 243:
	The code needed to play it and where to locate it is shown below…		The code needed to play it and where to locate it is shown below…

	[[File:Kesbath28.png\|~~400px~~]]		[[File:Kesbath28.png\|600px]]

	Notice that this needs to be added with an Else statement and before the end if..		Notice that this needs to be added with an Else statement and before the end if..

Ghenne: /* Version 1.15 */

2015-10-13T20:34:48Z

Version 1.15

← Older revision		Revision as of 20:34, 13 October 2015
Line 242:		Line 242:

	The code needed to play it and where to locate it is shown below…		The code needed to play it and where to locate it is shown below…

	[[File:Kesbath28.png\|400px]]		[[File:Kesbath28.png\|400px]]

Ghenne: /* Version 1.15 */

2015-10-13T20:34:35Z

Version 1.15

← Older revision		Revision as of 20:34, 13 October 2015
Line 242:		Line 242:

	The code needed to play it and where to locate it is shown below…		The code needed to play it and where to locate it is shown below…
	[[File:Kesbath28.png]]		[[File:Kesbath28.png\|400px]]

	Notice that this needs to be added with an Else statement and before the end if..		Notice that this needs to be added with an Else statement and before the end if..

Ghenne: /* Version 1.03 */

2015-10-13T20:32:04Z

Version 1.03

← Older revision		Revision as of 20:32, 13 October 2015
Line 86:		Line 86:
	PicShow(1)		PicShow(1)
	End Function		End Function
			</pre>
	Paste the above code in now. However revealing the letter is more complex… It needs two further routines… These pieces of code should be pasted to the end of your program…		Paste the above code in now. However revealing the letter is more complex… It needs two further routines… These pieces of code should be pasted to the end of your program…
	<pre>		<pre>

Ghenne at 20:25, 13 October 2015

2015-10-13T20:25:52Z

← Older revision		Revision as of 20:25, 13 October 2015
Line 7:		Line 7:

	Add 26 Images and one Textbox…. Like this…		Add 26 Images and one Textbox…. Like this…

			[[File:Kesbath24.png]]

	Rearrange the 26 images so that they look like the 26 keys of a Qwerty Keyboard with Image1 in position A and Image26 in position Z (as shown above).		Rearrange the 26 images so that they look like the 26 keys of a Qwerty Keyboard with Image1 in position A and Image26 in position Z (as shown above).
Line 15:		Line 17:

	You will find these on the school network (R:\Subjects\InfoTech\Graphics+\Animations\Alphabets\BAMBOO\BLACK) and as shown here…		You will find these on the school network (R:\Subjects\InfoTech\Graphics+\Animations\Alphabets\BAMBOO\BLACK) and as shown here…

			[[File:Kesbath25.png]]

	There are other folders with alternative collections which you can choose. Copy all 26 to the folder that your AppStudio program is stored in.		There are other folders with alternative collections which you can choose. Copy all 26 to the folder that your AppStudio program is stored in.
Line 59:		Line 63:

	<pre>		<pre>
			Rem Version 1.03
			Dim Display
			Display = 0

	Dim FileLetter, FilePath, FileEnd		Dim FileLetter, FilePath, FileEnd
	FileLetter = Array(" ","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P","Q","R","S","T","U","V","W","X","Y","Z")		FileLetter = Array(" ","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P","Q","R","S","T","U","V","W","X","Y","Z")
Line 69:		Line 77:

	<pre>		<pre>
			Sub Main
			For L = 1 to 26
			ResetImage(L)
			Next
			End Sub

	Function Image01_onmousemove()		Function Image01_onmousemove()
	PicShow(1)		PicShow(1)
	End Function		End Function
	Paste the above code in now. However revealing the letter is more complex… It needs two further routines… These pieces of code should be pasted to the end of your program…		Paste the above code in now. However revealing the letter is more complex… It needs two further routines… These pieces of code should be pasted to the end of your program…
			<pre>
	Sub PicShow(DisplayCode)		Sub PicShow(DisplayCode)
	If Display = 0 Then		If Display = 0 Then
Line 92:		Line 107:
	End Sub		End Sub
	</pre>		</pre>

	Test the above code. When you move the Mouse over the A position the globe changes to the letter A!		Test the above code. When you move the Mouse over the A position the globe changes to the letter A!

Line 100:		Line 116:

	<pre>		<pre>
			Function Image01_onmousemove()
			PicShow(1)
			End Function

	Function Image01_onmouseout()		Function Image01_onmouseout()
	ResetImage(1)		ResetImage(1)
Line 108:		Line 128:
	=== Version 1.05 ===		=== Version 1.05 ===
	These 6 lines of code…		These 6 lines of code…
			<pre>
			Function Image01_onmousemove()
			PicShow(1)
			End Function
			Function Image01_onmouseout()
			ResetImage(1)
			End Function
			</pre>

	Now need to be copied and pasted 25 times. Then the numbers will need to be changed… for Image 2 as below…		Now need to be copied and pasted 25 times. Then the numbers will need to be changed… for Image 2 as below…
Line 118:		Line 146:
	ResetImage(2)		ResetImage(2)
	End Function		End Function
			</pre>
	To 26 as below…		To 26 as below…
			<pre>
	Function Image26_onmouseout()		Function Image26_onmouseout()
	ResetImage(26)		ResetImage(26)
Line 169:		Line 199:
	Now we need to work on being able to test the letter entered to see if it matches the next desired letter. This requires us to perform a test before adding it to the textbox. It would be lengthy to have to keep on changing the 26 onclick functions, though we cannot leave them as they are! Change all 26 functions so that they read like below and add the new subroutine Addletter…		Now we need to work on being able to test the letter entered to see if it matches the next desired letter. This requires us to perform a test before adding it to the textbox. It would be lengthy to have to keep on changing the 26 onclick functions, though we cannot leave them as they are! Change all 26 functions so that they read like below and add the new subroutine Addletter…

	Although the code has changed this does not yet add functionality. Test to see if it works as it did before..		<pre>
			Function Image25_onclick()
			Addletter(25)
			end Function
			Function Image26_onclick()
			Addletter(26)
			End Function

			Sub Addletter(Code)
			TextBox1.value = TextBox1.value + FileLetter(code)
			End Sub
			</pre>
			Although the code has changed this does not yet add functionality.

			Test to see if it works as it did before..

	=== Version 1.13 ===		=== Version 1.13 ===
Line 197:		Line 241:

	The code needed to play it and where to locate it is shown below…		The code needed to play it and where to locate it is shown below…
			[[File:Kesbath28.png]]

	Notice that this needs to be added with an Else statement and before the end if..		Notice that this needs to be added with an Else statement and before the end if..
Line 236:		Line 281:
	=== Version 1.19 ===		=== Version 1.19 ===
	From the JQuery Mobile option in the toolbox add a RadioButton… Change the items to Sound On and Sound Off….		From the JQuery Mobile option in the toolbox add a RadioButton… Change the items to Sound On and Sound Off….
			[[File:Kesbath26.png]]

	Now for the code…		Now for the code…
Line 245:		Line 290:

	The revised code….		The revised code….
			[[File:Kesbath27.png]]


	=== Version 1.2 ===		=== Version 1.2 ===

Ghenne at 20:04, 13 October 2015

2015-10-13T20:04:38Z

← Older revision		Revision as of 20:04, 13 October 2015
Line 5:		Line 5:
	=== Version 1.01 ===		=== Version 1.01 ===
	Open a New Project and save it to your P drive (AppStudio folder). You will need a form height of about 460 and a width of 800.		Open a New Project and save it to your P drive (AppStudio folder). You will need a form height of about 460 and a width of 800.

	Add 26 Images and one Textbox…. Like this…		Add 26 Images and one Textbox…. Like this…

	Rearrange the 26 images so that they look like the 26 keys of a Qwerty Keyboard with Image1 in position A and Image26 in position Z (as shown above).		Rearrange the 26 images so that they look like the 26 keys of a Qwerty Keyboard with Image1 in position A and Image26 in position Z (as shown above).

	So that the code that will be added below works, you need to rename Image1 to Image9 so that they read Image01… Image02 to Image09.		So that the code that will be added below works, you need to rename Image1 to Image9 so that they read Image01… Image02 to Image09.

	You now need 26 animated gif images to represent each letter!		You now need 26 animated gif images to represent each letter!

	You will find these on the school network (R:\Subjects\InfoTech\Graphics+\Animations\Alphabets\BAMBOO\BLACK) and as shown here…		You will find these on the school network (R:\Subjects\InfoTech\Graphics+\Animations\Alphabets\BAMBOO\BLACK) and as shown here…

	There are other folders with alternative collections which you can choose. Copy all 26 to the folder that your AppStudio program is stored in.		There are other folders with alternative collections which you can choose. Copy all 26 to the folder that your AppStudio program is stored in.

	You also need a 27th image, to represent the non displayed letter….		You also need a 27th image, to represent the non displayed letter….

	You could use the Animated globe found in R:\Subjects\InfoTech\Graphics+\Animations.		You could use the Animated globe found in R:\Subjects\InfoTech\Graphics+\Animations.

	Now set the src for all 26 images to the letter that they will contain. That is A for Image1 to Z for Image26. Create a 27th Image and add the Globe to that. This image can be set to hidden.		Now set the src for all 26 images to the letter that they will contain. That is A for Image1 to Z for Image26. Create a 27th Image and add the Globe to that. This image can be set to hidden.

	Test that it works! You should see all 26 animated letters, but not the hidden globe.		Test that it works! You should see all 26 animated letters, but not the hidden globe.

	=== Version 1.02 ===		=== Version 1.02 ===
	Now to add the code that will start to control the images.		Now to add the code that will start to control the images.

	First we need to replace all the letters with the "globe” image. Copy and paste the code from below into the code section.		First we need to replace all the letters with the "globe” image. Copy and paste the code from below into the code section.

	<pre>		<pre>
	Rem Version 1.02		Rem Version 1.02
Line 55:		Line 65:
	</pre>		</pre>
	Copy and paste the lines above into AppStudio. This sets up the 3 parts of the filename for each letter. If you have chosen a different set of letters then you will need to change FilePath = "WAB02L to the first part of the filename. You may need to change the end part to, that is FileEnd = "K.gif"		Copy and paste the lines above into AppStudio. This sets up the 3 parts of the filename for each letter. If you have chosen a different set of letters then you will need to change FilePath = "WAB02L to the first part of the filename. You may need to change the end part to, that is FileEnd = "K.gif"

	Now for the Function that reveals the letter when the mouse moves over it… We will later need 25 more of these functions to carryout the appropriate code for the other 25 Images / letters. This code should be added after this part of your existing program..		Now for the Function that reveals the letter when the mouse moves over it… We will later need 25 more of these functions to carryout the appropriate code for the other 25 Images / letters. This code should be added after this part of your existing program..

Line 85:		Line 96:
	=== Version 1.04 ===		=== Version 1.04 ===
	Now we need to put the globe back in place after the mouse leaves the location…		Now we need to put the globe back in place after the mouse leaves the location…

	To do this we need to add a second function directly after the end Function of onmousemove()		To do this we need to add a second function directly after the end Function of onmousemove()

Line 114:		Line 126:
	End Function		End Function
	</pre>		</pre>
	Carefully make all these changes, though you are recommended to change one button with the 2 functions and test it. That way if you make an mistake it will be easier to spot. Now test to see that every letter reveals itself and covers itself on exit!		Carefully make all these changes, though you are recommended to change one button with the 2 functions and test it. That way if you make an mistake it will be easier to spot. Now test to see that every letter reveals itself and covers itself on exit!

	=== Version 1.06 ===		=== Version 1.06 ===
Line 125:		Line 137:

	Copy and paste the code below the end Function of Function Image26_onmousemove() at the end of V1.05		Copy and paste the code below the end Function of Function Image26_onmousemove() at the end of V1.05

	Test to see if you can click on the A and an ‘A’ appears in the textbox!		Test to see if you can click on the A and an ‘A’ appears in the textbox!

Line 142:		Line 155:
	=== Version 1.1 ===		=== Version 1.1 ===
	We now need to add a piece of text for the user to type in. Add a label at the top of the form and set its text to "The quick brown fox jumped over the lazy dog” – change the colour of the label so that it stands out.		We now need to add a piece of text for the user to type in. Add a label at the top of the form and set its text to "The quick brown fox jumped over the lazy dog” – change the colour of the label so that it stands out.

	Test that it works! Try to type the sentence in and you will notice a problem…		Test that it works! Try to type the sentence in and you will notice a problem…

Line 159:		Line 173:
	=== Version 1.13 ===		=== Version 1.13 ===
	Now we can develop Addletter so that it can do more. For example play a sound if the correct letter is entered or the wrong sound if not… We will now develop this mini program or Sub routine…		Now we can develop Addletter so that it can do more. For example play a sound if the correct letter is entered or the wrong sound if not… We will now develop this mini program or Sub routine…

	We need to see if the letter entered is correct. This is a decision that we must program the computer to make. A way to make the decision is to use an IF statement.		We need to see if the letter entered is correct. This is a decision that we must program the computer to make. A way to make the decision is to use an IF statement.

	We need to test the letter given with the letter in the label1.text.		We need to test the letter given with the letter in the label1.text.

	Yet we need to know which letter to test with. So we need to count the number of characters already in textbox1. This we can do with Len(TextBox1.value) + 1 < The reason for the +1 is that we need to look at the next letter!		Yet we need to know which letter to test with. So we need to count the number of characters already in textbox1. This we can do with Len(TextBox1.value) + 1 < The reason for the +1 is that we need to look at the next letter!
	<pre>		<pre>
Line 178:		Line 195:
	=== Version 1.15 ===		=== Version 1.15 ===
	We need to make the user aware that they have pressed a key and that it has been tested and that it is wrong. Using a negative sound would be a good way to do this. To do this add an Audio1() from the Multimedia part of the toolbox… Add a mp3 sound like UtopiaError from R:\Subjects\InfoTech\Resources+\Sounds\mp3. This must be pasted into the folder where AppStudio is stored and then set the Audio1.src property to this file (Remember to use the P drive). You may use an alternative sound but it needs to be short less than 1 second.		We need to make the user aware that they have pressed a key and that it has been tested and that it is wrong. Using a negative sound would be a good way to do this. To do this add an Audio1() from the Multimedia part of the toolbox… Add a mp3 sound like UtopiaError from R:\Subjects\InfoTech\Resources+\Sounds\mp3. This must be pasted into the folder where AppStudio is stored and then set the Audio1.src property to this file (Remember to use the P drive). You may use an alternative sound but it needs to be short less than 1 second.

	The code needed to play it and where to locate it is shown below…		The code needed to play it and where to locate it is shown below…


	Notice that this needs to be added with an Else statement and before the end if..		Notice that this needs to be added with an Else statement and before the end if..
Line 226:		Line 243:

	The code now uses the text from the label rather than the Image item pressed. This means the text in the textbox will use the same case as the original entry!		The code now uses the text from the label rather than the Image item pressed. This means the text in the textbox will use the same case as the original entry!

	The revised code….		The revised code….

Ghenne at 20:02, 13 October 2015

2015-10-13T20:02:31Z

Show changes

Ghenne at 19:58, 13 October 2015

2015-10-13T19:58:48Z

Show changes