Does anyone have an example of SetViewKeyContent? It sounds like I should be able to create a custom set of keys using this, but the help doesn’t really say much. Can you specify say keys 1…9,0 + ‘.’ and only have those visible?
Thank you!
Does anyone have an example of SetViewKeyContent? It sounds like I should be able to create a custom set of keys using this, but the help doesn’t really say much. Can you specify say keys 1…9,0 + ‘.’ and only have those visible?
Thank you!
I’d also like to know for about the GHIElectronics.NETMF.Glide.UI.keyboard class for FEZ Cobra:
I am stuck at what strings to put in the string array for special function keys
And to add to the mix:
Why are there 3 views {Letters,Numbers, Symbols} yet 4 resource images are required. to support it.
How is Upper/Lowercase supported and switched withing Views?
I’ve updated the custom keyboard example to include setting the key content:
http://www.ghielectronics.com/glide/example/6/
There are three views but upper/lowercase requires two resources which makes it four altogether.
1 - uppercase
2 - lowercase
3 - numbers
4 - symbols
Upper/lowercase is a true and false state within the Letters view.
Thanks Josh, appreciated.
I just debugged the SetViewKeyContent content
and keywords are below for special keys:
“togglecase”
“backspace”
“tonumbers”
“space”
“return”
and (but unverified)
“tosymbols”
“toletters”
In addition:
Can you check the following keys, as they don’t appear correctly in the textBlock
Symbol.sqrt
Symbol.pi
Symbol.Euro
Symbol.trademark
Thanks
I am finding that the background images are not filling the full width (480px) of the 4.3" Fez Cobra screen. It’s shrunk!
Is there a way to control/resolve this? I can’t see an obvious way,
I check the Height=192 & Width=480 of the Keyboard object, and they appear to be fine!
(also verified keyheight =48= 192/4)
Are you trying to make the default keyboard fit the 4.3" screen? I need more details with what you’re trying to achieve.
Hi Josh, yes
I have posted a video, the tail end of which shows the 480x192 keyboard gif files does not fill the screen width (leaving about 3/4" empty gap on either side)
Making it harder to touch buttons,
Touch and display are synchronised though, on testing every button.
PS: How do I get email notifications when you post a reply? Netduino forums allow a WATCH which is great if its a topic you want to follow.
Haven’t had any progress to day on fixing this and suggestions welcome.
I understand now. The default keyboard’s images are designed for 320 x 240. In order to get a bigger keyboard for your 4.3" screen you need to create such images then set a custom keyboard. Trying to set a bigger keyboard using the default images won’t work. I updated the title to this example:
http://www.ghielectronics.com/glide/example/6/
It shows how to do a custom keyboard. What we forgot to mention was that it was an example for the 4.3" display. If you follow that example and download the ZIP file at the bottom of the page you can get the bigger keyboard you seek!
Hi Josh,
I don’t follow:
I have the Fez Cobra 4.3" display which is setup for 480x272 resolution on GHI firmware startup, running 4.1.6
The keyboard images in the examples are 480x192 gif in size so would assume they are intended for the 480x272 screen, Leaving (272-192=80) pixels for the data entry field.
How are these gif’s designed for a 320x240? are you applying some scale factor to shrink them to fit?
What has me partialy confused is the XML uses:
<Window Name="window" Width="320" Height="240" BackColor="dce3e7">
yet the c# code uses:
Keyboard keyboard = new Keyboard(480, 192, 3, 48, 0);
PS; Thanks for adding the WATCH! makes life easier! appreciated
I’ve attached my 4.3" 480x272 code, as I am not using the XML designer:
/// <summary>
///
/// </summary>
public enum Entry_Type
{
NUMERIC = 0,
ALPHA = 1,
ALPHA_NUMERIC = 2,
ALPHA_NUMERIC_SYMBOLS = 3
}
public Keyboard InitKeyboard(Entry_Type eType)
{
//Facts:
// - All GIF image resources (Keyboard_480x272_*) are 480x192 pixels designed for screen 480x272
int iW = 480;
int iH = 192;
int iKeyboardInputHieght = 272 - iH;
int iViews = 3; //{Letters, Numbers, Symbols}
int iKeyHieght = 48;
int iKeySpacing = 0;
mKeyboard = null;
#region KEYWIDTH_SETUP
//-----------------------------------------------------------------------------------------
// Each array entry represents a row of keys on the keyboard top-down (0-3)
// Each array within these entries contains the widths of the keys for that row.
// For example: keyWidth[0] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }
// represents the first row (0) which contains the keys Q, W, E, R, T, Y, U, I, O, P
//-----------------------------------------------------------------------------------------
int[][] keyWidth_Letters = new int[4][];
int[][] keyWidth_Numbers = new int[4][];
int[][] keyWidth_Symbols = new int[4][];
// Letters
// {
// Keyboard_480x272_Up_Uppercase,
// Keyboard_480x272_Up_Lowercase,
// Keyboard_480x272_Down_Uppercase,
// Keyboard_480x272_Down_Lowercase
// }
keyWidth_Letters[0] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Letters[1] = new int[9] { 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Letters[2] = new int[9] { 72, 48, 48, 48, 48, 48, 48, 48, 72 }; //sum = 480
keyWidth_Letters[3] = new int[5] { 72, 48, 240, 48, 72 }; //sum = 480
// Numbers
// {
// Keyboard_480x272_Down_Numbers,
// Keyboard_480x272_Up_Numbers
// }
keyWidth_Numbers[0] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Numbers[1] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Numbers[2] = new int[9] { 72, 48, 48, 48, 48, 48, 48, 48, 72 }; //sum = 480
keyWidth_Numbers[3] = new int[5] { 72, 48, 240, 48, 72 }; //sum = 480
// Symbols
// {
// ,
//
// }
keyWidth_Symbols[0] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Symbols[1] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }; //sum = 480
keyWidth_Symbols[2] = new int[9] { 72, 48, 48, 48, 48, 48, 48, 48, 72 }; //sum = 480
keyWidth_Symbols[3] = new int[5] { 72, 48, 240, 48, 72 }; //sum = 480
#endregion
#region KEYCONTENTS_SETUP
//-----------------------------------------------------------------------------------------
// Each array entry represents a row of keys on the keyboard top-down (0-3)
// Each array within these entries contains the widths of the keys for that row.
// For example: keyWidth[0] = new int[10] { 48, 48, 48, 48, 48, 48, 48, 48, 48, 48 }
// represents the first row (0) which contains the keys Q, W, E, R, T, Y, U, I, O, P
//-----------------------------------------------------------------------------------------
string[][] keyContents_Letters = new string[4][];
string[][] keyContents_Numbers = new string[4][];
string[][] keyContents_Symbols = new string[4][];
// Letters
// {
// Keyboard_480x272_Up_Uppercase.gif,
// Keyboard_480x272_Up_Lowercase.gif,
// Keyboard_480x272_Down_Uppercase.gif,
// Keyboard_480x272_Down_Lowercase.gif
// }
keyContents_Letters[0] = new string[10] { "q", "w", "e", "r", "t", "y", "u", "i", "o", "p" };
keyContents_Letters[1] = new string[9] { "a", "s", "d", "f", "g", "h", "j", "k", "l" };
keyContents_Letters[2] = new string[9] { Keyboard.ActionKey.ToggleCase, "z", "x", "c", "v", "b", "n", "m", Keyboard.ActionKey.Backspace };
keyContents_Letters[3] = new string[5] { Keyboard.ActionKey.ToNumbers, ",", Keyboard.ActionKey.Space, ".", Keyboard.ActionKey.Return };
// Numbers
// {
// Keyboard_""0x2""_Down_Numbers,
// Keyboard_""0x2""_Up_Numbers
// }
keyContents_Numbers[0] = new string[10] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "0" };
keyContents_Numbers[1] = new string[10] { "@ ", "#", "$", "%", "&", "*", "-", "+", "(", ")" };
keyContents_Numbers[2] = new string[9] { Keyboard.ActionKey.ToSymbols, "!", "\"", "'", ":", ";", "/", "?", Keyboard.ActionKey.Backspace };
keyContents_Numbers[3] = new string[5] { Keyboard.ActionKey.ToLetters, ",", Keyboard.ActionKey.Space, ".", Keyboard.ActionKey.Return };
// Symbols
// {
// note the following symbols do not appear on eth screen correctly in 4.1.3 sqtr"√", pi"π", euro"€",trademark"®"s
// }
keyContents_Symbols[0] = new string[10] { "~", "`", "|", "•", "√", "π", "÷", "×", "{", "}" };
keyContents_Symbols[1] = new string[10] { Keyboard.ActionKey.Tab, "£", "¢", "€", "º", "^", "_", "=", "[", "]" };
keyContents_Symbols[2] = new string[9] { Keyboard.ActionKey.ToNumbers, "™", "®", "©", "¶", "\\", "<", ">", Keyboard.ActionKey.Backspace };
keyContents_Symbols[3] = new string[5] { Keyboard.ActionKey.ToLetters, ",", Keyboard.ActionKey.Space, ".", Keyboard.ActionKey.Return };
#endregion
// We must call this to set the key content.
iViews = 3;
mKeyboard = new Keyboard(iW, iH, iViews, iKeyHieght, iKeySpacing);
mKeyboard.DefaultKeyContent();
int w =mKeyboard.Width;
int h = mKeyboard.Height;
Keyboard.View v = mKeyboard.CurrentView;
// Each view with keys in a up position.
mKeyboard.BitmapUp = new Bitmap[4]
{
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Up_Uppercase),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Up_Lowercase),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Up_Numbers),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Up_Symbols)
};
// Each view with keys in a down position.
mKeyboard.BitmapDown = new Bitmap[4]
{
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Down_Uppercase),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Down_Lowercase),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Down_Numbers),
Resources.GetBitmap(Resources.BitmapResources.Keyboard_480x272_Down_Symbols)
};
mKeyboard.SetViewKeyWidth(Keyboard.View.Letters, keyWidth_Letters);
mKeyboard.SetViewKeyWidth(Keyboard.View.Numbers, keyWidth_Numbers);
mKeyboard.SetViewKeyWidth(Keyboard.View.Symbols, keyWidth_Symbols);
//keyboard.SetViewKeyContent(Keyboard.View.Letters, keyContents_Letters);
//keyboard.SetViewKeyContent(Keyboard.View.Numbers, keyContents_Numbers);
//keyboard.SetViewKeyContent(Keyboard.View.Symbols, keyContents_Symbols);
//mKeyboard.SetView(Keyboard.View.Letters);
mKeyboard.CalculateKeys();
return mKeyboard;
}
public Window_Keyboard(Entry_Type Type, string sDefaultValue, Microsoft.SPOT.Presentation.Media.Color BackColour = Microsoft.SPOT.Presentation.Media.Color.White)
{
mResponse = Actions.NOTHING;
mResponseText = sDefaultValue;
mBackColour = BackColour;
mType = Type;
string [] sButtonText;
sButtonText = new string[1];
sButtonText[0] = "ERROR";
}
public Window Show()
{
mKeyboard = InitKeyboard(mType);
mWindow = new Window("window_test", 480, 272);
mWindow.BackColor = mBackColour;
mCanvas = new Canvas();
//Get the TextBlock
mTextBox = new TextBox("answer", 255, 0, 0, 480, 60);
mTextBox.TapEvent += new OnTap(Glide.OpenKeyboard);
//t.TapEvent += new OnTap(keyboard_TapEvent);
//Add a value changed handler.
//### works sometimes and crashes the keyboard on others! ###
//mTextBox.ValueChangedEvent += new OnValueChanged(textBox_ValueChangedEvent);
mInput = new Window_Input(mWindow, 1, Window_Input.Entry_Type.DECIMAL, "Fuel added", "0.0", "Litres", 0, 100, 480, 50, FontManager.FontType.droid_reg12 );
mInput2 = new Window_Input(mWindow, 1, Window_Input.Entry_Type.ALPHA_UPPER, "State", "", "UPPERCASE", 0, 200, 480, 50, FontManager.FontType.droid_reg12);
//(TextBox)window.GetChildByName("answer");
//Add a tap event handler to open the keyboard.
mWindow.AddChild(mTextBox);
return mWindow;
}
// Print out the new value.
private void textBox_ValueChangedEvent(object sender)
{
//TextBox textBox = (TextBox)mWindow.GetChildByName("answer");
//textBox.Text = textBox.Text.ToUpper();
mResponseText = mTextBox.Text;
mResponse = Actions.USER_PRESS_BTN_ENTER;
}
using System;
using System.Threading;
using System.Collections;
//using Microsoft.SPOT;
using GHIElectronics.NETMF.Glide;
using GHIElectronics.NETMF.Glide.Display;
using GHIElectronics.NETMF.Glide.UI;
namespace TW_Glide
{
/// <summary>
/// Input that attaches Glide.Keyboard to data entry
/// </summary>
public class Window_Input
{
private Window mWindow;
/// <summary>
/// String Variables
/// </summary>
private string mResponseText;
/// <summary>
/// Enumeration variables
/// </summary>
private Actions mResponse;
private Entry_Type mType;
private FontManager.FontType mFont;
private Microsoft.SPOT.Presentation.Media.Color mColor;
/// <summary>
///
/// </summary>
public enum Actions
{
NOTHING = 0,
USER_PRESS_BTN_ENTER = 1,
}
public const double SPACING_PC =0.05;
/// <summary>
///
/// </summary>
public enum Entry_Type
{
INTEGER = 10,
DECIMAL = 11,
ALPHA = 20,
ALPHA_UPPER = 21,
ALPHA_LOWER = 22,
ALPHA_NUMERIC = 30,
ALPHA_NUMERIC_UPPER = 31,
ALPHA_NUMERIC_SYMBOLS = 40,
ALPHA_NUMERIC_SYMBOLS_UPPER = 41
}
/// <summary>
/// String Response
/// </summary>
public string ResponseText
{
get
{
mResponseText = mInput.Text;
return mResponseText;
}
}
/// <summary>
/// Specific Custom variables
/// </summary>
string msLabel;
string msValue;
string msEngUnits;
TextBlock mLabel; //Text to left of Input
TextBox mInput; //Input Data Entry Field
TextBlock mUnits; //Engineering Units to right of Input
/// <summary>
/// Enumerated Response
/// </summary>
public Actions Response
{
get
{
return mResponse;
}
}
/// <summary>
///
/// </summary>
/// <param name="iID"></param>
/// <param name="eType"></param>
/// <param name="sLabel"></param>
/// <param name="sEngUnits">Engineering Units</param>
/// <param name="sValue">Start Value</param>
/// <param name="iX">X coord for whole object {label + input + Units}</param>
/// <param name="iY">Y coord for whole object {label + input + Units}</param>
/// <param name="iW">Width for whole object {label + input + Units}</param>
/// <param name="iH">Height for whole object {label + input + Units}</param>
public Window_Input(Window W, int iID, Entry_Type eType, string sLabel = "Default Label", string sValue = "", string sEngUnits = "", int iX = 0, int iY = 0, int iWidth = 480, int iHeight = 272, FontManager.FontType eFont = FontManager.FontType.droid_reg12, Microsoft.SPOT.Presentation.Media.Color eColor = Microsoft.SPOT.Presentation.Media.Color.Black)
{
int x, y, w, h;
int iWidthL, iWidthI, iWidthEU; //PC = Percentage from 0.00-1.00
msLabel = sLabel;
msValue = sValue;
msEngUnits = sEngUnits;
mWindow = W;
mType = eType;
mResponseText = msValue;
mResponse = Actions.NOTHING;
mFont = eFont;
mColor = eColor;
///use any color test
Microsoft.SPOT.Presentation.Media.Color MyFuchsia = Microsoft.SPOT.Presentation.Media.ColorUtility.ColorFromRGB(255, 0, 255);
mColor = MyFuchsia;
//sum total = iWidth (when include 2 x SPACING)
iWidthL = (int) ((0.4 - SPACING_PC)*iWidth);
iWidthI = (int) ((0.4)*iWidth);
iWidthEU = (int) ((0.2 - SPACING_PC)*iWidth);
//Layout: {Label} {Input Field} {Units}
x = iX + (int)(SPACING_PC * iWidth);
y = iY;
w = iWidthL;
h = iHeight;
mLabel = new TextBlock("textblock_label" + iID.ToString(), 255, x, y, w, h);
mLabel.Text = sLabel;
mLabel.TextAlign = HorizontalAlignment.Left;
mLabel.TextVerticalAlign = VerticalAlignment.Middle;
mLabel.Font = FontManager.GetFont(mFont);
mLabel.FontColor = mColor; //Microsoft.SPOT.Presentation.Media.Color.{black|white}
x = iX + (int)(SPACING_PC * iWidth) + iWidthL;
y = iY;
w = iWidthI;
h = iHeight;
mInput = new TextBox("textbox_data" + iID.ToString(), 255, x, y, w, h);
mInput.Text = sValue;
//can not allign!
x = iX + (int)(SPACING_PC * iWidth) + iWidthL + iWidthI + (int)(SPACING_PC * iWidth);
y = iY;
w = iWidthEU;
h = iHeight;
mUnits = new TextBlock("textblock_units" + iID.ToString(), 255, x, y, w, h);
mUnits.Text = sEngUnits;
mUnits.TextAlign = HorizontalAlignment.Left;
mUnits.TextVerticalAlign = VerticalAlignment.Middle;
//add keyboard to Input field
mInput.TapEvent += new OnTap(Input_SetupKeyboardRestrictions);
//mInput.TapEvent += new OnTap(Glide.OpenKeyboard);
mInput.ValueChangedEvent += new OnValueChanged(Input_ValueChangedEvent);
mWindow.AddChild(mLabel);
mWindow.AddChild(mInput);
mWindow.AddChild(mUnits);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
private void Input_SetupKeyboardRestrictions(object sender)
{
//remove any existing restrictions
//Glide.Keyboard.Restricted = null;
if (mType == Entry_Type.ALPHA_UPPER)
{
Glide.Keyboard.SetView(Keyboard.View.Letters);
Glide.Keyboard.Uppercase = true;
Glide.Keyboard.Restricted = new string[] { Keyboard.ActionKey.ToNumbers, Keyboard.ActionKey.ToSymbols, Keyboard.ActionKey.ToggleCase, Keyboard.ActionKey.Tab };
}
if (mType == Entry_Type.ALPHA_NUMERIC_UPPER)
{
Glide.Keyboard.SetView(Keyboard.View.Letters);
Glide.Keyboard.Uppercase = true;
Glide.Keyboard.Restricted = new string[] { Keyboard.ActionKey.ToSymbols, Keyboard.ActionKey.ToggleCase, Keyboard.ActionKey.Tab };
}
if (mType == Entry_Type.ALPHA_LOWER)
{
Glide.Keyboard.SetView(Keyboard.View.Letters);
Glide.Keyboard.Uppercase = false;
Glide.Keyboard.Restricted = new string[] { Keyboard.ActionKey.ToNumbers, Keyboard.ActionKey.ToSymbols, Keyboard.ActionKey.ToggleCase, Keyboard.ActionKey.Tab };
}
if (mType == Entry_Type.ALPHA_NUMERIC)
{
Glide.Keyboard.SetView(Keyboard.View.Letters);
Glide.Keyboard.Uppercase = true;
Glide.Keyboard.Restricted = new string[] {Keyboard.ActionKey.ToSymbols};
}
if (mType == Entry_Type.INTEGER)
{
Glide.Keyboard.SetView(Keyboard.View.Numbers);
Glide.Keyboard.Restricted = new string[] { Keyboard.ActionKey.ToSymbols, Keyboard.ActionKey.ToggleCase, Keyboard.ActionKey.Tab, Keyboard.ActionKey.ToLetters, Keyboard.ActionKey.Space, ".", ",", "@ ", "#", "$", "%", "&", "*", "-", "+", "(", ")", "!", "\"", "'", ":", ";", "/", "?" };
}
if (mType == Entry_Type.DECIMAL)
{
Glide.Keyboard.SetView(Keyboard.View.Numbers);
Glide.Keyboard.Restricted = new string[] { Keyboard.ActionKey.ToSymbols, Keyboard.ActionKey.ToggleCase, Keyboard.ActionKey.Tab, Keyboard.ActionKey.ToLetters, Keyboard.ActionKey.Space, ",", "@ ", "#", "$", "%", "&", "*", "-", "+", "(", ")", "!", "\"", "'", ":", ";", "/", "?" };
}
if (mType == Entry_Type.ALPHA_NUMERIC_SYMBOLS)
{
Glide.Keyboard.SetView(Keyboard.View.Letters);
Glide.Keyboard.Uppercase = true;
Glide.Keyboard.Restricted = new string[] {Keyboard.ActionKey.Tab};
}
Glide.Keyboard.CalculateKeys();
//daisychain events
Glide.OpenKeyboard(sender);
}
// Print out the new value.
private void Input_ValueChangedEvent(object sender)
{
string sVal = mInput.Text;
double dVal = 0.0;
int iVal = 0;
if (mResponseText.Equals(sVal))
{
//If there is a need to CORRECT the USER input, it will force a secondary ValueChangeEvent, and if
//not detected will return here forever, so need to only CHANGE the mInput object when indeed there is a change ONLY
mResponse = Actions.USER_PRESS_BTN_ENTER;
return;
}
if (sVal.Equals(""))
{
//nothing to process (done pressed without data entry)
mResponse = Actions.USER_PRESS_BTN_ENTER;
mResponseText = "";
return;
}
if ((mType == Entry_Type.ALPHA_UPPER) || (mType == Entry_Type.ALPHA_NUMERIC_UPPER))
{
mResponseText = sVal.ToUpper();
}
if (mType == Entry_Type.ALPHA_LOWER)
{
mResponseText = sVal.ToLower();
}
if (mType == Entry_Type.ALPHA_NUMERIC)
{
mResponseText = sVal;
}
if (mType == Entry_Type.INTEGER)
{
try
{
iVal = Convert.ToInt16(sVal);
}
catch(Exception)
{
iVal = 0;
}
//either d format
mResponseText = iVal.ToString();
}
if (mType == Entry_Type.DECIMAL)
{
try
{
dVal = Convert.ToDouble(sVal);
}
catch (Exception)
{
dVal = 0.0;
}
//d.ddd format
mResponseText = dVal.ToString("F3");
}
if (mType == Entry_Type.ALPHA_NUMERIC_SYMBOLS)
{
//1:1
mResponseText = sVal;
}
mResponse = Actions.USER_PRESS_BTN_ENTER;
mInput.Text = mResponseText;
}
}
}
Hi Guys,
I’ve had no progress on getting the 480 pixel wide keyboard resource working on the 480 wide LCD (4.3" Fez Cobra) in 480x272 mode. (it still does not display the resource image full screen width)
What I find odd is that if this example was designed for 4.3" 230 wide screen, then why supply it with 480x272 GIF file images?
If this is designed for use with the 230 wide screen, why isn’t the gif resource also 230 pixels wide?
What width resource should I create in order for it to work on 4.3" 480x272 screens? (480 * 480/230) pixels? Seems an odd way to go about things.
responses welcome.
Has anyone been able to get the Keyboard example working better than my one below?
I’m using Fez Cobra 4.3" in 480x272 mode.
Managed to solve the problem - after a few hair pulling weeks!
ref: http://www.ghielectronics.com/glide/example/6/
I had modified the example and not done the following line:
Glide.Keyboard = mKeyboard;
As Glide’s dll must have a standard set of 320x240 images to load by default, I was invoking these and not my ‘custom’ images and code.
CLOSED