[Solved] Disable forum thread mouseover preview - About xda-developers.com

EDIT: 2015-11-29
Updated the userscript again to, instead of disable the title altogether, move it to the actual link. This way it can still be seen by mousing over the link, but not while your mouse is just lazing around in the middle of the page.
See post #7 for the latest userscript code.
http://forum.xda-developers.com/showpost.php?p=64059286&postcount=7
EDIT: 2011-10-22
I finally got unlazy and actually looked at the source code myself and discovered that it was just a 'title' tag on a table causing the popup. I wrote up a userscript that renames the 'title' tag to 'title-backup', thus preventing Chrome from displaying the mouseover box on thread titles.
If anyone else wants to use this userscript, here are the links that you'll need for it. I wrote this for the Chrome browser, but as long as your browser is up to date and you have a script handler installed, it should work.
Blank Canvas Script Handler - Chrome Extension that loads userscripts, similar to GreaseMonkey for those familiar with it.
https://chrome.google.com/webstore/detail/pipnnjjknlabchljabhmnpdfpdobpnkk
My userscript. You just need to have some kind of script handler installed to use it, such as the above Blank Canvas.
http://userscripts.org/scripts/show/116101
ORIGINAL:
Does anyone know how to disable the mouseover thread preview popup when viewing a list of forum threads with the Chrome browser? It's something I've been searching for months with no answer found. It's an annoying feature for me that blocks the thread titles for items around my mouse pointer.
Here is a picture of what I'm talking about...
http://i54.tinypic.com/5pkbvc.jpg

As far as I know, it's not something that you can disable. It's probably a forum-wide setting that can't be changed for individuals.

I finally delved into the code myself and discovered a simple solution. I've updated the first post with the details.

Jackalo said:
I finally delved into the code myself and discovered a simple solution. I've updated the first post with the details.
Click to expand...
Click to collapse
Thank you, the popups are gone!

Thanks Jackalo, that popup thread preview was driving me nuts, too!

Considering that userscripts.org is no more, I decided to copy/paste the code for my userscript here.
It's also mirrored at userscripts-mirror.org via the following URL...
http://userscripts-mirror.org/scripts/show/116101
Code:
// ==UserScript==
// @name xda-developer Mouseover Remover
// @namespace Jackalo
// @description Remove 'title' mouseover tooltips from the forum thread lists to prevent them from blocking your view
// @version 1.0
// @updateURL http://userscripts.org/scripts/source/116101.meta.js?1.0
// @include http://forum.xda-developers.com/*
// ==/UserScript==
// id = td_threadtitle_######, where # is a unique numeric number for each thread
// querySelectorAll allows regular expression matching! Match and make a list of any ID that starts with 'td_threadtitle_'
var idToFix = document.querySelectorAll('[id^=td_threadtitle_]');
// Iterate through that list of ID's that need to be fixed
for (i = 0; i < idToFix.length; i++)
{
// Make a backup copy of the data in case someone needs to view it from the source code for whatever reason
idToFix[i].setAttribute('title-backup', idToFix[i].title);
// Remove the 'title' attribute from the <td>
idToFix[i].removeAttribute('title');
}

Updated to be even better
I got annoyed with my previous fix of removing the title altogether. I tweaked the userscript to move the 'title' tag from div.thread-info-cell to be directly on the a.threadTitle link. Setting the 'title' attribute on a link is valid in HTML5 from what I read, and appears to work for me in Chrome and Firefox. I'm sure it requires a newer IE version (newer than 9 probably).
What this gives is that when you mouseover a thread-row box, the mouse hover text will not appear until your mouse is over the link thread link itself. Solves my original issue of having a, possibly quite large, box pop up and cover some of the page to where I couldn't read the titles of the other threads on the page, but still allows me to hover my mouse over the thread link itself to see the title text.
Magnificent thing, userscripts are.
Code:
// ==UserScript==
// @name xda-developer Mouseover Remover
// @namespace Jackalo
// @version 2.0
// @description Move 'title' mouseover tooltips from thread-row to thread-title-cell to prevent them from blocking your view when your mouse is not over a link directly
// @author Jackalo
// @match http://forum.xda-developers.com/*
// @match https://forum.xda-developers.com/*
// @grant none
// ==/UserScript==
/* jshint -W097 */
'use strict';
var threadRows = document.querySelectorAll('div.thread-row');
for (i = 0; i < threadRows.length; i++)
{
var title = threadRows[i].querySelector('div.thread-info-cell').title;
threadRows[i].querySelector('div.thread-info-cell').removeAttribute('title');
threadRows[i].querySelector('div.thread-info-cell div.thread-title-cell a.threadTitle').setAttribute('title', title);
}

Related

Help me understand C++ code with notifications (beers offered)

Hi,
I need to use the C++ version of this. The code should gather information and show this in a notification.
The notification works but I want to receive the choice the user made in the html form.
I know I need to use the hwsink, a message map, and some events but cannot find info (book, example, etc.) how.
Could some one finish this code so I can test what has been chosen. If NOT, please give me an C++ example from which I can learn/copy. I have been searching on google for days now
Thx, for your help
BTW:
I started with this http://www.krvarma.com/?p=146 downloaded code but was a bit to complicated. In it is all I need but i would like it to be in 1 cpp file.
I'm offering 2 beers if you have the solution
Code:
#include "stdafx.h"
#include <stdlib.h>
#include "resource.h"
// {4E8A9888-D15C-4395-9C9A-B4B572F20081}
static const GUID NOTIFICATION_GUID =
{ 0x4e8a9888, 0xd15c, 0x4395, { 0x9c, 0x9a, 0xb4, 0xb5, 0x72, 0xf2, 0x0, 0x81 } };
int _tmain(int argc, _TCHAR* argv[])
{
SHNOTIFICATIONDATA stcNtData = {0};
stcNtData.cbStruct = sizeof(stcNtData);
stcNtData.dwID = 1;
stcNtData.npPriority = SHNP_INFORM;
stcNtData.csDuration = 15;
// stcNtData.hicon = LoadIcon((HINSTANCE)GetModuleHandle(NULL), MAKEINTRESOURCE(IDI_ICON2));
stcNtData.clsid = NOTIFICATION_GUID;
//What todo here... stcNtData.hwndSink = hWnd;
stcNtData.grfFlags = SHNF_SILENT | SHNF_TITLETIME | SHNF_CRITICAL | SHNF_FORCEMESSAGE;
stcNtData.pszTitle = L"ReRemind";
//stcNtData.pszHTML = TEXT("<html><body>This is a sample application to show the SHNotificationAdd API")
// TEXT("<p><b>This line should be bold</b>.<br><i>This one should be italics.</i><br>")
// TEXT("This is a line with a <a href='cmd:10000'>link</a></p>")
// TEXT("<p>This is a line with <input type='button' name='cmd:10001' value='Click'></p><br><br><br><br>");
stcNtData.pszHTML = TEXT("<form method='get' action='TestBubble://Test'>")
TEXT("<table width=100% cellspacing=0 cellpadding=0>")
TEXT("<tr><td colspan=2>")
TEXT("<b>Choose a fruit:</b><p>")
TEXT("<input type='radio' value='0' id='Apples' checked name='Fruit'><label for='Apples'>Apples</label><br>")
TEXT("<input type='radio' value='1' id='Oranges' name='Fruit'><label for='Oranges'>Oranges</label></p></td><td>")
TEXT("<input type='submit' value='Submit' name='Submit'>")
TEXT("</td></tr><tr><td width=42>")
TEXT("<a href='cmd:12288'>Settings</a></td></tr></table></form><br><br><br><br>");
SHNotificationAdd(&stcNtData);
Sleep(15000);
SHNotificationRemove(&NOTIFICATION_GUID, 1);
return 0;
}
I'm offering beers now. No need to finish it, just give me some hints
Hi,
as I understand your article (http://www.krvarma.com/?p=146)
you need to create window, then assign it's HWND
to SHNOTIFICATIONDATA member HWND hwndSink;
then "The system will send WM_COMMAND with wParam set to 1000 to the hwndSink window." so - you need to handle WM_COMMAND in your window and check wParam - if it is equal to your parameter, then this message means "system sends you user choice from your html".
serfer222 said:
Hi,
as I understand your article (http://www.krvarma.com/?p=146)
you need to create window, then assign it's HWND
to SHNOTIFICATIONDATA member HWND hwndSink;
then "The system will send WM_COMMAND with wParam set to 1000 to the hwndSink window." so - you need to handle WM_COMMAND in your window and check wParam - if it is equal to your parameter, then this message means "system sends you user choice from your html".
Click to expand...
Click to collapse
Exactly as i understand it.
So I tried copying code from that article into my code but got stuck with really not understandable compiler errors. I think I need to find a good book explaining this message map.
The first thing I do not understand is that I only want to show the notification bubble (is working). If I create a windows handle (how?) will this overwrite the current screen (this is something I do not want).
window can be invisible.
I'm Win32 programmer, and I don't know exactly about WinCE.
If you are using VisualC++, I think you should use MFC, it's very easy to create window and then create message handler for this window.
search google for some
"WinCE c++ tutorial" and you will find how to create window and setup message loop. (add "Hello world" phrase to your search - this is usually used as very first example)
for example: http://www.codeproject.com/KB/mobile/ltwtdlg.aspx
serfer222 said:
window can be invisible.
I'm Win32 programmer, and I don't know exactly about WinCE.
If you are using VisualC++, I think you should use MFC, it's very easy to create window and then create message handler for this window.
search google for some
"WinCE c++ tutorial" and you will find how to create window and setup message loop. (add "Hello world" phrase to your search - this is usually used as very first example)
for example: http://www.codeproject.com/KB/mobile/ltwtdlg.aspx
Click to expand...
Click to collapse
Can you switch between MFC, ATL, etc. ? I know they are some kind of libraries but thought "don't look at it, there too much to learn/understand anyway ".
I've search but somehow you think there is the solution and then you learn the hard way, it's very old code. Will search further offcourse and I am reading a chapter on classes and if I can find; messages.
it's already very easy to handle messages without any MFC overload. Just check the uMsg parameter in your DefWindowProc. If you create a new Win32 project in Visual C++ wizard then you see what it's looking like. This is mandatory knowledge. Usually first thing you learn after Hello World. If you didn't know about message processing in Windows/Wince then it's the same like sitting in a car and don't know how to turn the keys.
Do you know how to open dsm file in textbox???
RAMMANN said:
it's already very easy to handle messages without any MFC overload. Just check the uMsg parameter in your DefWindowProc. If you create a new Win32 project in Visual C++ wizard then you see what it's looking like. This is mandatory knowledge. Usually first thing you learn after Hello World. If you didn't know about message processing in Windows/Wince then it's the same like sitting in a car and don't know how to turn the keys.
Click to expand...
Click to collapse
Thats how I feel exactly. It's strange. I read quickly thru 3 books about C++ and no mention of these messages. C#/Basic are easier to understand because of all the examples.
Found these:
- http://www.youtube.com/watch?v=kWVGqV2Yklw
- http://www.youtube.com/watch?v=cbe6yxBHEiU
The video does explain that the linked example doesn't look so different. What a lot of source code Ms creates for you..
If created a WIN32 smart device project and DefWindowsProc is only called when to pass the message to other programs. I need the windows handle for the notification and NOT display the window.
But again it's a bit to much for me at this moment. I haven't got a solution yet..Could somebody help me with not displaying this window. I would still like to use the windows handle to make sure I get the callbakcs to the WM_COMMAND.
Yes - I think you only need at end of WinMain before SHNotificationRemove
to add:
Code:
while (GetMessage(&msg, NULL, 0, 0))
{
if (!TranslateAccelerator(msg.hwnd, hacc, &msg))
{
TranslateMessage(&msg);
DispatchMessage(&msg);
}
Then a new function:
Code:
/* Redefine generic HANDLE_WM_ACTIVATE macro for Pocket PC */
#undef HANDLE_WM_ACTIVATE
#define HANDLE_WM_ACTIVATE(hwnd,wParam,lParam,fn) \
(SHHandleWMActivate((hwnd), (wParam), (lParam), &g_sai, 0), /*return*/ 0L)
/* Redefine generic HANDLE_WM_SETTINGCHANGE macro for Pocket PC */
#undef HANDLE_WM_SETTINGCHANGE
#define HANDLE_WM_SETTINGCHANGE(hwnd,wParam,lParam,fn) \
(SHHandleWMSettingChange((hwnd), (wParam), (lParam), &g_sai), /*return*/ 0L)
static LRESULT CALLBACK MainWndProc(HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam)
{
switch (msg)
{
HANDLE_MSG(hwnd, WM_CREATE, Main_OnCreate);
HANDLE_MSG(hwnd, WM_ACTIVATE, /* SHHandleWMActivate()*/ 0);
HANDLE_MSG(hwnd, WM_SETTINGCHANGE, /* SHHandleWMSettingChange() */ 0);
HANDLE_MSG(hwnd, WM_PAINT, Main_OnPaint);
HANDLE_MSG(hwnd, WM_COMMAND, Main_OnCommand);
HANDLE_MSG(hwnd, WM_DESTROY, Main_OnDestroy);
[B]// Remark: Here you can add more messages - also for what user has chosen.[/B]
default:
return DefWindowProc(hwnd, msg, wParam, lParam);
}
}
and then the message handlers like this:
Code:
static BOOL Main_OnCreate(HWND hwnd, CREATESTRUCT *pcs)
{
SHMENUBARINFO mbi;
memset(&mbi, 0, sizeof(mbi));
mbi.cbSize = sizeof(mbi);
mbi.hwndParent = hwnd;
mbi.nToolBarId = IDR_MNU_MAIN;
mbi.hInstRes = g_hInstance;
if (!SHCreateMenuBar(&mbi)) /* create the menu bar */
return FALSE;
g_hwndMB = mbi.hwndMB;
return TRUE;
}
But your Compiler should already make such a project by default and you can simple add the code fom _tmain to WinMain, which you've posted above.
Greetz
Micha
Thank you, yesterday I debugged and and debugged trying to understand how this works but the debugger doesn't stop always in all source code.
If f.i. you click on the screen I expected this to be an event, but the debugger didn't stop at all. Is there a command to always stop when a line of code is processed? Now it only stops when I have set a break point. I want to see every line processed...
I will try to implement your suggestions. For a newby it still looks difficult I hope someday I will look back to this and say "wow, that was so easy".
ajhvdb said:
Thank you, yesterday I debugged and and debugged trying to understand how this works but the debugger doesn't stop always in all source code.
If f.i. you click on the screen I expected this to be an event, but the debugger didn't stop at all. Is there a command to always stop when a line of code is processed? Now it only stops when I have set a break point. I want to see every line processed...
I will try to implement your suggestions. For a newby it still looks difficult I hope someday I will look back to this and say "wow, that was so easy".
Click to expand...
Click to collapse
Well, actually that's the reason why breakpoints exist. To stop the debugger and allow you look at the running code..... or what else did you think??
RAMMANN said:
Well, actually that's the reason why breakpoints exist. To stop the debugger and allow you look at the running code..... or what else did you think??
Click to expand...
Click to collapse
I want to say "stop and show at the current code line".
For example you start your program, goto the appropiate window, type in some data and NOW before you click on SAVE. You say to your debugger "catch this/coming event".
Debugger would stop if you'd handle this event and set break point to 1st command of this function.
then yo can go step by step through each line of code.
and hey: it's not soo easy,which I posted.But your Compiler (vs2008 or PellesC or whatever) would make this automatically for you and you only have to copy your part of code into WinMain of this automatic processed code.
The "Managers" then can help you also to add eventhandlers automatically.
you only have to set Breakpoints to the automatic processed Event-Handle-Function - them you can see,if this event is triggered like you want it.
You only think from the wrong direction
Ok, I learned a lot.
(The VS2008 debugger has bugs. If I set a breakpoint on line 100, and start debug, line 109 has the breakpoint. It looks like only the original code can be debugged)
I did start a new project and used the tips from above. I can catch a click on a link ahref field in the notification bubble.
I have disabled the screen so only the bubble is shown
Now I need to catch the menu button and more important the data in the html form (input type radio) in the notification bubble. For this I need to convert the param to a structure...!
I also need to extend the "while getmessage" loop with a timer. If 15 seconds have passed, I need to step out of the loop and quit automatically.
A lot of searching again.
BTW.
Thx all for helping me. Not really one tip did it, you all guided me a bit. If you think your tip helped me a lot then send me a PM with your paypal code. You can also send me your address/or your businessaddress. I will send you a small present/surprise related to my country (Holland).
in Germany we have a good cheese, too and the sense of a community like this great one,is for helping each other-especially beneath developers.
And it's always a question of finding out,how to manage something new
All the best for your further development.
Micha
Attached is the code of my subproject. I will update it if those last points are done. Hope it helps others.
If someone has a link or example code for those points. (or improvements of my code) please let me know.

Truetype fonts in evC++

Hi gents.
I want to ask you,how can I use external font loaded from ttf file in my app,developed under Embedded Visual C++?
I need to easily change color and size of the font and using the DrawText() function make an output into current DC.
Can someone make an example for me please?
Thank you.
Here's the bare bones of it ,you'll have to flesh it out to suit. It might not be perfect but it works.
Global Variable
Code:
HFONT g_hfont;
Forward declaration of EnumFontProc()
Code:
int CALLBACK EnumFontsProc(LOGFONT *lplf, TEXTMETRIC *lptm, DWORD dwType, LPARAM lpData);
In WM_PAINT print it out. I'll use Wingdings. The name in the EnumFonts must match the actual name of the font as declared in the TTF file.
Code:
case WM_PAINT:
RECT rt;
hdc = BeginPaint(hWnd, &ps);
GetClientRect(hWnd, &rt);
EnumFonts(hdc,TEXT("Wingdings"),(FONTENUMPROC) EnumFontsProc,NULL);
SelectObject(hdc,g_hfont);
DrawText(hdc,TEXT("12345"),5, &rt, DT_SINGLELINE | DT_VCENTER | DT_CENTER);
DeleteObject(g_hfont);
EndPaint(hWnd, &ps);
break;
In EnumFontsProc set the font to the first font given. Returning 0, ends the enumeration, non zero, give me the next.
To change the size do it here by changing lplf->lfHeight and lplf->lfWidth
Code:
int CALLBACK EnumFontsProc(LOGFONT *lplf, TEXTMETRIC *lptm, DWORD dwType, LPARAM lpData)
{
g_hfont = CreateFontIndirect(lplf);
return 0;
}
To load and release your font add the code below to the message handling sections.
Code:
WM_CREATE:
AddFontResource(TEXT("\\Storage Card\\myfont.TTF"));
WM_DESTROY:
RemoveFontResource(TEXT("\\Storage Card\\myfont.TTF"));
Here's the proof it works, (with Wingdings anyway!)
Thanks man,I will try it ASAP.
Well,is it possible to read the ttf file directly from exe resource also?
I am still learning C++,so some things are a bit unclear for me. Can you please post this source?
This stuff is explained fully at:
http://msdn.microsoft.com/en-us/library/aa911455.aspx
I've just taken a few shortcuts with it.
The zip file contains the main .cpp file of the above project. It does not include the AddFontResource or RemoveFontResource statements.
Create a shell WinMo application and replace the main program .cpp file with it.
AddFontResource can only accept the path to a True Type font TTF file as an argument.
The thing you have got to get your head around are CALLBACK routines, they are used during most enumeration routines, and are widely used in Win32 for all sorts of things. A Win32 app's WndProc it itself a callback routine. In the case of EnumFonts, you pass the address of the callback routine to the enumerating function, which will call your function once for every instance it finds that matches your request. You terminate the sequence by returning 0 or it will carry on until there are no instances left. You have to decide what to do with the results. In my case I take the first Wingding font I'm offered, then quit.
Be aware that there is little, or no error handling in this code. I cobbled it together pretty quickly to prove the point.
I remember reading somewhere that if you drop the .TTF file in the Windows directory, and do a soft reset, then Windows will pick it up as a resident font, so the AddFontResource and RemoveFontResource functions are not required. EnumFonts() should know about it, and present it accordingly.
Well,thank you very much for that,but can you please provide me full project source,including all the files? With working project,I can better understand the font loading principle.
Unfortunately,I am too busy nowadays to discover something,that I don't understand well,so every time save is a big plus for me. Thank you very much again.
Attached,
But, it is a VS 2008 Smart Device project. EVC won't read it.
You will have to create a shell hello world project in EVC and copy the modified code in the panels above from TestFont.CPP.
Hello.
Actually i've got it working,but I still cannot discover,how to resize the font.
Where should I exactly put the lfWidth and lfHeight?
I am now a bit confused of that.
This is my code:
Functions and declarations of HFONT,CALLBACK,WM_CREATE,WM_DESTROY are present as you described.
void ShowNumber(HDC hdc, int Value,int xrect,int yrect,int wrect,int hrect,HBITMAP source)
{
EnumFonts(hdc,TEXT("Sam's Town"),(FONTENUMPROC) EnumFontsProc,NULL);
SelectObject(hdc,g_hfont);
TCHAR szText[MAX_LOADSTRING];
int width,height;
rtText.right=wrect;rtText.bottom=hrect;width=wrect-xrect;height=hrect-yrect;
TransparentImage(hdc,xrect,yrect,width,height,source,xrect,yrect,width,height,RGB(255,0,255));
SetBkMode(hdc,TRANSPARENT);
if(Value<10) wsprintf (szText, TEXT ("0%d"),Value);else wsprintf (szText, TEXT ("%d"),Value);
rtText.left=xrect ;rtText.top=yrect ;SetTextColor(hdc,RGB(0,0,0)); DrawText(hdc,szText,2,&rtText,DT_SINGLELINE | DT_LEFT | DT_TOP);
DeleteObject(g_hfont);
}
int CALLBACK EnumFontsProc(LOGFONT *lplf, TEXTMETRIC *lptm, DWORD dwType, LPARAM lpData)
{
g_hfont = CreateFontIndirect(lplf);
return 0;
}
Click to expand...
Click to collapse
This doesn't work:
lplf.lfWidth=0;
g_hfont = CreateFontIndirect(lplf);
Click to expand...
Click to collapse
Actually I want to put one more parameter into ShowNumber() function,which will tell the function the size of the font.
You are nearly there...........
The code to set the font size will have to go in here.......
Code:
int CALLBACK EnumFontsProc(LOGFONT *lplf, TEXTMETRIC *lptm, DWORD dwType, LPARAM lpData)
{
lplf->lfHeight=14;
lplf->lfWidth=8;
g_hfont = CreateFontIndirect(lplf);
return 0;
}
Or whatever your values are, I just picked 8 and 14 as examples. If these values are passed as variables to another function above, store them as global variables, and use them here.
As lplf is passed to this function as a pointer to a LOGFONT structure, you have to use the -> operator to access its members. lplf.lfHeight won't work as you mentioned, that is for predeclared or static structures.
These values have to be changed here in the EnumFontsProc() routine before the font is created, as we are passing that pointer to create the font.
Good Luck!!
P.S. While we are here, let's tidy it up a bit.
Replace:
Code:
if(Value<10) wsprintf(szText,TEXT ("0%d"),Value);else wsprintf (szText,TEXT("%d"),Value);
with
Code:
wsprintf(szText, TEXT ("02%d"),Value);
A very big thanks for that.
I am still beginner in C++,so something can look very comic for others.
My beloved programming language is Pascal.
I really didn't think,that -> is an operator,I've just mentioned,you wrote it as something else(something like "to")
You are more than welcome.
Some features in C/C++ are not immediately obvious, but the real battle is fighting your way through the Win32 programming model, trying to get it to do what you want. Sometimes the simplest of things become maddeningly complicated, but the effort to do it properly is usually worth the effort.
Glad you got it working, best wishes, stephj.
Hello a bit later.
First of all,thank your for your explanation and now I am using this method successfuly.
I want to ask you now,if there is a way to get fixed pitch of the font,that is truetype. With standart font I can achieve with this...
lf.lfPitchAndFamily = (tm.tmPitchAndFamily & 0xf0) | TMPF_FIXED_PITCH;
I am using font,that displays numbers in "digital" mode(7-segment display) and I get the number "1" very narrow in comparison with others(actually it is narrow on any kind display,but is displayed on right segments,so "01" has adequate spacing on hard display). Now I get "0l_" instead of "0_l",that's not preferable.
Thanks in advance for reactions.
I don't think there the above method will work as each character has it own width associated with it.
A simpler approach, a bit of a pain, but which should work, is to draw/print the numeric value out one character at a time using DrawText(). Set a RECT structure up to hold the coordinates of the top left and bottom right of the area for each character.
Setting uFormat to DT_RIGHT will force the character to right align in the RECT area, so the '1' should appear correctly. Move the left and right values along a fixed amount for each character. A bit of trial and error will be involved first until you get the values just right.
Good luck, stephj.

[SDK] XFControls - Advanced UI SDK [UPDATED w/ Sense UI Example!]

This is an Advanced UI SDK for developing finger-friendly Application UIs.
The reason for developing this SDK was mainly to learn about programming for Windows Mobile and the Compact Framework 3.5. I also developed this SDK because I could not find good UI controls that gave total display control to the programmer while taking care of all of the Physics, windowing, and frame buffering AND was open source.
Finally, this SDK was originally developed as part of the XDAFacebook application that I am currently developing.
I am releasing this SDK and its source so that people can have a good foundation to build finger-friendly Windows Mobile applications, and so that programmers starting off in the Windows Mobile world won't have to start from scratch when creating useful UI Controls.
Here are some of the features and uses of this SDK.
Features:
Fully customizable
Easily create custom UI Controls
Resolution independent
Full physics for rendering smooth scrolling
Uses:
Quickly create UI controls
Develop full UI SDKs
Learn basic UI programming for .net CF 3.5
I ask that if you use these controls, please provide feedback so that everyone can benefit!
Thank you and I hope you find these controls useful!
SDK Documentation
Even though the controls are easy to implement, they can seem intimidating at first. Here is an over-view of the core pieces to the SDK:
The IXFItem Interface:
Here are Properties of the interface
PHP:
XFPanelBase Parent { get; set; } // The item's List container
XFItemState State { get; set; } /* An Enum to describe the current item's state
This could include things like [B]Selected[/B] or [B]Normal[/B]*/
Bitmap Buffer { get; set; } // This is the item's cache buffer. Allows for speedy rendering
XFItemStyle Style { get; set; } // CSS like style object. Allows for easy customization
XFItemType ItemType { get; set; } /* Enum to label the type of the current object.
For example, [B]Clickable[/B] or [B]Display[/B] meaning the item won't change*/
The following are the methods that need to be implemented
PHP:
int GetHeight(); /* This returns the height of the item. This value is usually calulated
but in some instances is static. The value should be cached because this method
is called several times during the rendering process.*/
void ResetHeight(); // What ever needs to be done to reset the height cache
void ItemPaint(Graphics g, int x, int y); // Where the magic happens. More on this later
XFItemClickResult GetClickResult(); // An enum is return with what the action of clicking this item was.
The main part of the interface is the ItemPaint method. This method is called from the XFPanelList and passes a Graphics object created from the Buffer Bitmap of the Item. In this method, you do all of your graphics logic, drawing it with the supplied graphics object. The x and y are any offset numbers that should influence when the objects are based. Most of the time, these numbers will be 0, 0.
Because the programmer has total control over how the item is rendered, special care must be used when creating the items, to draw all the features with respect to the XFItemStyle object. This object usually is created in CTOR. An example of the XFItemStyle object being created in one of the SenseUI XFItem's CTORs:
PHP:
public SenseItem()
{
ItemType = XFItemType.Clickable;
Style = new XFItemStyle()
{
BoarderBottomColor = Color.FromArgb(189, 182, 189),
DashStyleBottom = System.Drawing.Drawing2D.DashStyle.Dash,
TextColor = Color.Black,
TextFont = new Font(FontFamily.GenericSansSerif, 8, FontStyle.Regular),
SelectedTextFont = new Font(FontFamily.GenericSansSerif, 8, FontStyle.Regular),
SecondaryTextFont = new Font(FontFamily.GenericSansSerif, 7, FontStyle.Regular),
SelectedSecondaryTextFont = new Font(FontFamily.GenericSansSerif, 7, FontStyle.Regular),
SecondaryTextColor = Color.FromArgb(57, 52, 57),
SelectedTextColor = Color.White,
SelectedBackgroundColor = Color.FromArgb(43, 36, 43),
SelectedSecondaryTextColor = Color.FromArgb(182, 178, 182),
Padding = 11,
PaddingBottom = 12,
PaddingLeft = 10,
PaddingRight = 16
};
}
You will also notice that the ItemType is also set here.
How you use the Style is a little more involved. In the ItemPaint, the programmer should base all of the features off of what is in the Style object. Here is an example of how the above Style object was used in the ItemPaint method:
PHP:
public void ItemPaint(Graphics g, int x, int y)
{
int width = Parent == null ? Screen.PrimaryScreen.WorkingArea.Width : Parent.Width;
XFControlUtils.DrawBoarders(Style, g, 0, 0, width, GetHeight());
int currX = Style.PaddingLeft;
int currY = Style.PaddingTop;
int mHeight = 0;
int sHeight = 0;
if (Icon != null)
currX += _iconSize + Style.PaddingLeft;
SizeF mText = new SizeF();
if (!string.IsNullOrEmpty(MainText))
{
mText = XFControlUtils.GetEllipsisStringMeasure(width - currX - Style.PaddingRight, MainText, Style.TextFont);
MainText = XFControlUtils.EllipsisWord(width - currX - Style.PaddingRight, MainText, Style.TextFont);
}
SizeF sText = new SizeF();
if (!string.IsNullOrEmpty(SecondaryText))
{
sText = XFControlUtils.GetEllipsisStringMeasure(width - currX - Style.PaddingRight, SecondaryText, Style.SecondaryTextFont);
SecondaryText = XFControlUtils.EllipsisWord(width - currX - Style.PaddingRight, SecondaryText, Style.SecondaryTextFont);
}
mHeight = (GetHeight() / 2) - ((int)mText.Height / 2);
if (!string.IsNullOrEmpty(SecondaryText))
{
mHeight = (GetHeight() / 2) - _textSpace - (int)mText.Height;
sHeight = (GetHeight() / 2) + _textSpace;
}
if (State == XFItemState.Selected)
{
XFControlUtils.DrawBackgroundSelected(Style, g, x, y, width, GetHeight());
if (!string.IsNullOrEmpty(MainText))
using (SolidBrush b = new SolidBrush(Style.SelectedTextColor))
g.DrawString(MainText, Style.SelectedTextFont, b, currX, mHeight);
if (!string.IsNullOrEmpty(SecondaryText))
using (SolidBrush b = new SolidBrush(Style.SelectedSecondaryTextColor))
g.DrawString(SecondaryText, Style.SelectedSecondaryTextFont, b, currX, sHeight);
}
else
{
if (!string.IsNullOrEmpty(MainText))
using (SolidBrush b = new SolidBrush(Style.TextColor))
g.DrawString(MainText, Style.TextFont, b, currX, mHeight);
if (!string.IsNullOrEmpty(SecondaryText))
using (SolidBrush b = new SolidBrush(Style.SecondaryTextColor))
g.DrawString(SecondaryText, Style.SecondaryTextFont, b, currX, sHeight);
}
if (Icon != null)
XFControlUtils.DrawAlphaFirstPix(g, Icon, Style.PaddingLeft, Style.PaddingTop);
}
That is as complex as it gets. Other than doing normal Event Handling for ClickReturns, this is all that is required to create beautiful UI Controls for your application.
I hope that this helps! Feel free to PM me or post a reply if you need further clarification.
Class List
Form Controls:
XFPanelContainer - The main control that interacts with the Form.
XFPanels:
XFPanelBase - Basic building block. Handles most of the generic functionality
XFPanelList - Can add IXFItem items.
XFPanelHeader - The top header bar for an XFPanelContainer
XFItems
IXFItem - Interface that all XFItems inherate
XFItemSimpleText - Simple item that displays text
XFItemBack - Special item that allows a panel to slide back
XFItemLoading - Item that allows for work to be down in the background.
XFControlUtils: Library of static, useful utilities for this SDK
DrawAlpha - Draws an image with a supplied Graphics object with a specific level of opacity
DrawAlphaFirstPix - Draws an image and renders all pixels that are the same color as pixel (1,1) are 100% transparent
DrawJustifiedString - draws a justified string
GetEllipsisStringMeasure - Takes a string and if it is more than the supplied width, clips the string and adds a trailing "..." at the end
EllipsisWord - same as the GetEllipsisStringMeasure, except it ellipsis at the words and not at the char level.
GetSizedString - Takes a string and adds "\n" so that the string wraps according to the supplied width
Many Others!
Sense UI Example
Here is a working example. I made this Sense UI example in about 3 hours 15 hours. It isn't complete but gives a good example of how to/why use this SDK. There are 3 screenshots of what this demo looks like.
I'll explain some of the pieces of code when I get some time later today.
The other great example of how to use this SDK is the XFAFacebook Application.
The source for this project is located @ http://code.google.com/p/xda-winmo-facebook/source/browse/#svn/trunk/XFSenseUI
There are a few screenshots of the XDAFacebook application included.
Finally, a quick start tutorial.
Start a new Smart Device project.
Add a reference to the XFControls.dll
Place the following lines of code in the Form1 constructor (after the InitializeComponent()
Code:
XFPanelContainer container = new XFPanelContainer();
container.Dock = DockStyle.Fill;
Controls.Add(container);
XFPanelList list = new XFPanelList();
container.SetMainPanel(list);
list.ShowScrollbar(true);
for (int i = 0; i < 50; i++)
{
list.Add("This is item " + i);
}
Run the project and you will get an output like the "SimpleText.png"
It's that easy!
UPDATE: I've added the XFSense to the Google Code page and have made some pretty extensive updates to it. I've added a few controls including sliders, toggles, checkboxes and radio buttons. It still isn't complete but I will be working to make it a full fledge Sense SDK.
Stay tuned!
Releases:
Initial Release - 9/1/10
When major updates occur, the DLLs will be posted here. The best thing to do is pull the source from the Google Code page and use that.
This will guarantee the freshes code will be used for your projects
Instructions:
Download and unzip the latest XFControls.zip from below.
Add the .dll as a reference.
Program!
The source can be found at: http://code.google.com/p/xda-winmo-facebook/source/browse/#svn/trunk/XDAFacebook/XFControls
List of downloads:
10/6/10 - Updated for speed and better scrolling! - XFControls 0.2.zip
9/1/10 - Initial upload - XFControls 0.1.zip
Other things I might have missed
Reserved Other
Sounds interesting! Definitely looking forward to some screenshots.
kliptik said:
Sounds interesting! Definitely looking forward to some screenshots.
Click to expand...
Click to collapse
Screenshots are up!
Only 3 downloads?! Hmmm.... I figured more people would be interested in a finger-friendly and open source UI SDK...
Is there something wrong with my posts? Are they too confusing?
Let me know what I can do to help! This has taken me a good deal of time to write and I would hope that it would be of use to someone else...
joe_coolish said:
Only 3 downloads?! Hmmm.... I figured more people would be interested in a finger-friendly and open source UI SDK...
Is there something wrong with my posts? Are they too confusing?
Let me know what I can do to help! This has taken me a good deal of time to write and I would hope that it would be of use to someone else...
Click to expand...
Click to collapse
Just DL'd a copy. I'm super swamped at the moment trying to get the next release of KD-Font out, but I'll try and check this out when I get a chance.
Thank you for your contribution!
I will definitely give this a test run at some point. Good work!
you have to add you own graphics to this sdk?
janneman22 said:
you have to add you own graphics to this sdk?
Click to expand...
Click to collapse
yes, this is a UI SDK. it is used to create user controls. The core code handles all the caching and physics, but the programmer must create the actual controls. including the graphics. look at the sense UI example to see how you can implement your own custom UI controls. like i said in the post, it only took about 3 hours to create those controls. most of which was spent creating graphics.
joe_coolish said:
yes, this is a UI SDK. it is used to create user controls. The core code handles all the caching and physics, but the programmer must create the actual controls. including the graphics. look at the sense UI example to see how you can implement your own custom UI controls. like i said in the post, it only took about 3 hours to create those controls. most of which was spent creating graphics.
Click to expand...
Click to collapse
oh right. but does it place controls in the toolbox, or have you to create the controls hard coded?
i could help you to make some grapics packages for this sdk
Ok, I've updated the binaries to be the latest and greatest. The scrolling is super smooth and things are starting to look pretty good!
I also will be updating the XFSense and I'll probably be extending it a little more because I plan on bringing it into the XDA Facebook app.
As always, let me know what you think!
EDIT: Oh, and to answer the question about adding objects to the toolbox, I have not added the OCX files (or whatever they are) so that they can be added to the tool box. But, after you've added the container and the panels, everything is logic after that, so adding the items to the toolbox really doesn't benefit too much.
As far as graphics, I would love help with graphics! Send me a PM and we'll talk!
joe_coolish said:
Here is a working example. I made this Sense UI example in about 3 hours. It isn't complete but gives a good example of how to/why use this SDK. There are 3 screenshots of what this demo looks like.
I'll explain some of the pieces of code when I get some time later today.
The other great example of how to use this SDK is the XFAFacebook Application.
The source for this project is located @ http://code.google.com/p/xda-winmo-facebook/source/browse/
There are a few screenshots of the XDAFacebook application included.
Finally, a quick start tutorial.
Start a new Smart Device project.
Add a reference to the XFControls.dll
Place the following lines of code in the Form1 constructor (after the InitializeComponent()
Code:
XFPanelContainer container = new XFPanelContainer();
container.Dock = DockStyle.Fill;
Controls.Add(container);
XFPanelList list = new XFPanelList();
container.SetMainPanel(list);
list.ShowScrollbar(true);
for (int i = 0; i < 50; i++)
{
list.Add("This is item " + i);
}
Run the project and you will get an output like the "SimpleText.png"
It's that easy!
Click to expand...
Click to collapse
Very nice control. I downloaded the sample (had problem with missing XFControl project but downloaded it from code.google).
Have a couple questions, how would i go about adding image to a child panel?
What I'm trying to so is have about 75 items on the main screen and each item will have sub-panel, when clicking on sub-panel I need to have label x2 and image.
Also when compiling the project I get error:
"Error 1 'XFControls.XFPanels.XFPanelHeader' does not contain a definition for 'BackgroundImage' and no extension method 'BackgroundImage' accepting a first argument of type 'XFControls.XFPanels.XFPanelHeader' could be found (are you missing a using directive or an assembly reference?) C:\downloads\C#\XFSenseUI\XFSenseUIDemo\Form1.cs 39 24 XFSenseUIDemo"
Alright, I'll post an example if I get some time in a bit. But as for the error, it is because the Core XFControls has been modified since the last time I updated this thread. You can download the freshes code from the google code page or use the attached DLL. I'd suggest the Google Code page, since it gets updated more frequently. But then you get all the XDAFacebook with it, so it can also be negative.
Basically to add an image to an XFItem to be added to the XFPanelList, you can either create your own item by inheriting from the IXFItem and doing all the image manipulation in the ItemDraw() method.
For an example of how to do that, look at the XFItemImageDisplay item in the XFControls.XFPanels.XFPanelItems namespace.
If you need something specific, let me know and I'll see if I can whip up an example
I'm new to C# and the compact framework so sample would be good...
Thanks
JarekG said:
I'm new to C# and the compact framework so sample would be good...
Thanks
Click to expand...
Click to collapse
Ok, could you describe how you want the control to look? Also, what you want to supply to the constructor? IE a path for an image, upper text, lower text, maybe even some style things. ETC

[Q] How to delete/add an item from a ListBox?

Hi there,
I have a ListBox bounded to a query (linq to xml)
Dim CASDAs XDocument = XDocument.Load("./Data/CASD.xml")
Dim CAS_Query As System.Collections.IEnumerable = From query In Cartridge_Doc.Descendants("Cartridges") Order By _
CStr(query.Element("AA")) Descending, CStr(query.Element("AA"))
Select New Cartridge_Data With {.AA1 = CStr(query.Element("AA")), _
.BB1= CStr(query.Element("BB")), _
.CC1 = CStr(query.Element("CC"))}
Me.ListBox_1.ItemsSource = CAS_Query
Now, what I need to do is to select an item and have the option to delete it.
So far, I always got a run-time exception when trying this
Me.ListBox_1.Items.Remove(Me.ListBox_1.SelectedItem)
System.InvalidOperationException was unhandled
Message=Operation not supported on read-only collection.
So far I have tried a lot of options without any luck.
Any help will be greatly appreciated!
Thanks in advance.
Stick your Linq result in an ObservableCollection, bind this to the Listbox and delete the item directly from the underlaying collection.
emigrating said:
Stick your Linq result in an ObservableCollection, bind this to the Listbox and delete the item directly from the underlaying collection.
Click to expand...
Click to collapse
Please, can you poost a little code to do that? I'm fairly new to this collections world.
On the other hand, once the item got deleted, how the Listbox gets refreshed?
Thanks!
You have to set up an NotifyPropertyChanged class to keep the listbox updated with your collection. The default phone list application template that comes with Visual Studio shows you how to do this. I think its's in c# though and it looks like you're coding in VB. I'm sure there's examples in VB you can find on the web with a little searching.
Ren13B said:
You have to set up an NotifyPropertyChanged class to keep the listbox updated with your collection. The default phone list application template that comes with Visual Studio shows you how to do this. I think its's in c# though and it looks like you're coding in VB. I'm sure there's examples in VB you can find on the web with a little searching.
Click to expand...
Click to collapse
My ListBox takes its data from an XML file via query.
Which strategy do you think is the best?
To first delete the Xelement then refresh the ListBox?
Or deleting from the item from the ListBox, then update the XML file?
Sorry but I have all the samples from MS and didn't find any phone list one.
Any code will be greatly appreciated!
Oops. It's called "Windows Phone Databound Application". Attached is a screenshot of the project if it makes it easier for you to find it.
It's hard to post code because I don't know what your xaml looks like and bindings have to be set there for it to work. The best thing you can do is load the above project and play around with it.
You never have to refresh the items in the listbox. A bound listbox updates itself when an item in the collection changes. Change the collection and your listbox will reflect those changes. The NotifyPropertyChanged class is what triggers the listbox to update itself.
I do C#, not VB but the following should give you some idea.
Code:
public class Model : INotifyPropertyChanged
{
public string Title { get; set; }
public string Blurb { get; set; }
public event PropertyChangedEventHandler PropChanged;
public void NotifyPropertyChanged(String _propName)
{
if (null!=PropChanged)
{ PropChanged(this, new PropertyChangedEventArgs(_propName)); }
}
}
The above is your model, create any properties you need there - i.e. one per item of data in your XML file.
Next, you need to create an ObservableCollection somewhere, for the sake of simplicity let's stick it in your MainPage.xaml.cs file for now, so;
Code:
public partial class MainPage : PhoneApplicationPage
{
public ObservableCollection<Model> Items { get; set; }
public MainPage()
{
InitializeComponent();
this.Items = new ObservableCollection<Model>();
MyListBox.ItemsSource = this.Items;
WebClient wc = new WebClient();
wc.OpenReadCompleted += wc_OpenReadCompleted;
wc.OpenReadAsync(new Uri("http://your.server.here/datafile.xml");
}
public void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
using (Stream s = e.Result)
{
XDocument xd = Xdocument.Load(s);
var XMLdata = (from q in doc.Descendants("Item") select new Model()
{
Title = (string)q.Element("Title"),
Blurb = (string)q.Element("Blurb")
}
foreach (Model m in XMLdata)
{
this.Items.Add(m);
}
}
}
public MyListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox lb = (ListBox)sender;
if (lb.SelectedIndex == -1)
return;
this.Items.Remove(lb.SelectedItem)
}
}
This will create a collection named Items as well as tell your ListBox (named MyListBox) to get it's data from said collection. Then it will read (asynchroniously) the XML file from the web and copy each item of data into your collection.
When you select an item in your ListBox it will be deleted from the ObservableCollection which in turn will remove it from the view (ListBox). At this stage you want to include code to also remove this from your actual XML file and so on of course. But the idea is that you work on your Collection only and your View will update based on what is changed - automagically.
Please note, the above code may or may not work out of the box. Written directly here on the forums so it hasn't gone thru VS2010's excellent IntelliSense. Also, the above code is in no way the most efficient way of doing certain things, but it gives you an idea as to what code you need to write to handle your scenario.
While I wrote this I see you've got an answer above which directs you to the VS template - use that and everything should become clear. All you have to remember is that perform operations on the Collection - not directly on the ListBox and you'll be fine.
Emigrating and Ren13B,
Thanks to both of you for the help. Very appreciated!
Will take both advices to see what comes up.
Thanks!

[Q] visual studio 2010 code help

been trying to figger out how to write this code for the better part of a day and just cant figger it out. hopefuly someone here can help.
its nothing complex by far, just my lack of knowledge lol.
so,
from the MainPage.xaml, i have a button that i want to link to "item2" on PanoramaPage1.xaml.
i know that this:
NavigationService.Navigate(new Uri("/PanoramaPage1.xaml", UriKind.Relative));
will get me to the Panorama page, but is there a way so ig goes right to item2?
ive tried code like:
NavigationService.Navigate(new Uri("/PanoramaPage1.xaml(item2.SelectedIndex)", UriKind.Relative));
NavigationService.Navigate(new Uri("/PanoramaPage1.xaml(item2)", UriKind.Relative));
NavigationService.Navigate(new Uri("/PanoramaPage1.xaml/item2", UriKind.Relative));
Etc...
but nothing is working for me.
thanx for any help.
poy
Create a property holding the pivotpage you'd like to go to, perhaps _selectedPivotPage. Then set this, to whatever number you need, before calling Navigate() and add something like this.PivotControl.SelectedIndex = _selectedPivotPage to Page_Loaded() in PivotPage1.xaml.cs (or whatever page you're calling).
i really didnt understand much of what you just said... lol
is there anyway you could give me an example?
I've made a quick project which shows this:
http://dl.dropbox.com/u/129101/Panorama.zip
The idea is this:
In the PanoramaPage1's xaml, you add a name for the panorama so you can refer to it in code.
In the PanoramaPage1's xaml.cs, you override the OnNavigatedTo function, which is called when the page is about to be displayed:
// <summary>
/// Overrides PhoneApplicationPage's OnNavigatedTo function, which is called when the page is about to be displayed.
/// </summary>
/// <param name="e"></param>
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
//item2 is the second item, but 0 indexed.
myPanorama.DefaultItem = myPanorama.Items[1];
base.OnNavigatedTo(e);
}
Edit:
This may not be what you're asking. If you're trying to figure out how to send a value which affects the next page (for example change the title of the next page, pass an object, etc), you probably want this example instead
http://dl.dropbox.com/u/129101/Panorama_querystring.zip
williammel said:
Edit:
This may not be what you're asking. If you're trying to figure out how to send a value which affects the next page (for example change the title of the next page, pass an object, etc), you probably want this example instead
http://dl.dropbox.com/u/129101/Panorama_querystring.zip
Click to expand...
Click to collapse
This is exactly what i needed. Thank you sooo much!
poy
No problem. If you're planning on passing complex objects (or any really) you can store them in app.xaml.cs and cut down on the typing, and the time it takes to use the object (since it doesn't have to generate a dictionary you have to query)
Something like this:
Public static string navigationParam;
Or
Public static object navigationobj;
And in any file:
App.navigationparam = "item2";
or
App.navigationobj = (object)myclassvariable;
And just do the opposite to get the item back.

Categories

Resources