Cloudnotes Desktop Client article: Enhanced notes List

Today, I released an updated version of Cloudnotes: 1.0.5484.36793. This version, unlike 1.0.5472.20097, has an enhanced list of notes that, compared to the previous monotonous list system, not only shows the summary of the notes, but also extracts the first picture from the notes and displays the picture details:

What do you think? Compared to the previous list of notes, is the design now able to show richer information?

Upgrade to the latest version

If, after reading my first article on Cloudnotes, "cloudnotes: A cloud personal note system ", the previous version of Cloudnotes has been installed and experienced, When you reopen the Cloudnotes desktop client, you will see a notification that a new version of the update is found in the login screen, or in the status bar section of the main interface:

You can click this information to enter the new version of the update system. Unfortunately, the update system will tell you that the update failed because you turned on the Windows 7 User Account Control (UAC) feature and the updater does not have access to the C:\Program Files (x86) directory. The solution has the following two kinds:

1. Go to Control Panel, turn off the user Account Control (UAC) feature
2. " Click here " to download the cloudnotes update package, download, unzip the zip file and overwrite the Updater directory under the Cloudnotes installation directory (for example: C:\Program files (x86) \daxnet\ Cloudnotes desktop client), and then re-enter the upgrade program via the Cloudnotes desktop clients to complete the upgrade

If this is the first time you've seen a cloudnotes and you're trying to use it, just click here . Download version 1.0.5484.36793, which is the latest version as of the time this article was written, contains this latest log list and fixes for the Cloudnotes update program.

Technology implementation

Here's a general introduction to how I implemented this brand-new note-list interface, and a brief look at how to get the application to have access to file system resources under UAC.

Enhanced List of Notes

It was interesting to say that one day I saw a colleague using Evernote and thought it was doing a pretty good job of the Notes list view, as well as thumbnail images:

The feeling is to be able to reflect more notes in a simple view, making it easier for people to find the notes they need to see. I also wondered if my Cloudnotes desktop client could achieve a similar effect.

After some research, I decided to customize the tree control used by the current list of notes: Inherit a custom TreeViewEX type from the System.Windows.Forms.TreeView class, and use Ownerdrawtext's custom painting method to weigh each tree node (TreeNode) To achieve a similar effect.

When TreeNode is redrawn (that is, during Ondrawnode event processing), TreeViewEX redraws the tree node based on the Treenodeexitem data on the current node to achieve the effect shown above. It is not difficult to realize, it is necessary to have patience, the color of the text, positioning, the size of the picture and so on, it takes time to adjust slowly. This part of the code I do not explain more, friends please refer to the Cloudnotes.desktopclient project under the Controls\treeviewex.cs source code file implementation can be. In contrast, the more interesting technical points are:

Get plain text information from HTML

This is the section of the summary text that is used to display notes. Since the notes are stored in HTML format, and the summary only requires the first paragraph of the note text, you need to remove the HTML markup from the HTML and extract the readable plain text information from it. In Cloudnotes, I use the following extension method to implement this function. This method is used by both WEBAPI and desktop clients. As you can see from the code, I only use the first 100 words in my notes as summary information for my notes.

<summary>///Extract The description from the html.///</summary>///<param name= "html" ></param >///<returns></returns>public static string extractdescription (this string html) {var plaintext = html.    Removehtmltags (); Return plaintext.substring (0, plaintext.length < plaintext.length:100);} <summary>///removes all the HTML tags and bad characters from the given HTML string.///</summary>///&lt ;p Aram name= "HTML" >the source HTML string.</param>///<returns></returns>private static string    Removehtmltags (This string html) {html = Httputility.urldecode (HTML);    HTML = httputility.htmldecode (HTML);    HTML = Removetag (HTML, "<!--", "--");    HTML = Removetag (HTML, "<script", "</script>");    HTML = Removetag (HTML, "<style", "</style>");    Replace matches of these regexes with space HTML = tags.replace (HTML, "");    HTML = notokcharacter.replace (HTML, ""); Html= Singlespacedtrim (HTML); return HTML;}

Extract the first picture in a note

To show a thumbnail of a note picture, you first need to extract the first image from your note, and then generate the thumbnail from the image processing function. Words not much to say, directly on the code:

<summary>///the regular expression for extracting the SRC value from an HTML Img tag.///</summary>public Const string Imgsrcformatpattern = @ "]*?src\s*=\s*[" "'"? ([^ ' "" ">]+?) [ ‘""] [^>]*?> ";///<summary>///Extract the thumbnail image from the html.///</summary>///<param name=" h Tml "></param>///<returns></returns>public static string ExtractThumbnailImageBase64 (this String html) {var imagebase64list = html.    Getimgsrcbase64fromhtml ();    string result = NULL;    if (imagebase64list! = null && imagebase64list.any ()) {result = Imagebase64list.first (); } return result; <summary>/////</summary>///<param name= "html" ></param>///<returns></ Returns>private static ienumerable<string> getimgsrcbase64fromhtml (this string html) {var matchesimgsrc = Rege X.matches (HTML, constants.imgsrcformatpattern, Regexoptions.ignorecase | RegexOptions.Singleline);    if (Matchesimgsrc.count = = 0) return null;    list<string> result = new list<string> (); foreach (Match m in matchesimgsrc) {var href = m.groups[1].        Value; var pos = href.        IndexOf ("base64,", stringcomparison.invariantcultureignorecase);        pos + = 7; Result. ADD (href. Substring (pos, href.) Length-pos).    Trim ());  } return result;

The generation of thumbnail images

The production code of the thumbnail is implemented in the TreeViewEX control, the basic idea is actually very simple, that is, according to the picture of the length and width of the reduction can be. The code is as follows:

private static Image fixedsize (image imgphoto, int width, int height, Color clearcolor) {int sourcewidth = Imgphoto.wid    Th    int sourceheight = Imgphoto.height;    int Sourcex = 0;    int sourcey = 0;    int destx = 0;    int desty = 0;    float npercent;    float NPERCENTW;    float Npercenth;    NPERCENTW = ((float) width/(float) sourcewidth);    Npercenth = ((float) height/(float) sourceheight);        if (Npercenth < NPERCENTW) {npercent = Npercenth;    DESTX = convert.toint16 ((Width-(sourcewidth * npercent))/2);        } else {npercent = NPERCENTW;    Desty = convert.toint16 ((Height-(sourceheight * npercent))/2);    } int destwidth = (int) (sourcewidth * npercent);    int destheight = (int) (sourceheight * npercent);    Bitmap Bmphoto = new Bitmap (width, height, pixelformat.format24bpprgb);    Bmphoto.setresolution (Imgphoto.horizontalresolution, imgphoto.verticalresolution);  Graphics Grphoto = Graphics.fromimage (Bmphoto);  Grphoto.clear (Clearcolor);    Grphoto.interpolationmode = Interpolationmode.highqualitybicubic; Grphoto.drawimage (Imgphoto, New Rectangle (Destx, Desty, Destwidth, Destheight), New Rectangle (Sourcex, SOURC    EY, Sourcewidth, sourceheight), GraphicsUnit.Pixel);    Grphoto.dispose (); return Bmphoto;}

Have the application have permission to access file system resources under UAC

This is an issue that was encountered in the previous version of the Cloudnotes Desktop Client update program. If the user installs Cloudnotes in the system directory, the updater encounters an error when attempting to update the version of the Cloudnotes desktop client, prompting that it cannot be updated. The root cause is that user Account Control (UAC) is enabled on the Windows system, even if the account that is currently logged on to the system is an administrator, and does not mean that the user has Administrator rights on all resources in the system. In this case, even an administrator-initiated update cannot copy the downloaded and unzipped files to the system directory.

To solve this problem, you need to be in the. NET application is specified as Requireadministrator in the manifest of the requestedExecutionLevel, the following standard dialog box pops up when the update is executed. Let the user confirm the behavior of the application:

Just click the "Yes" button to complete the update.

Changing the manifest is really simple, just on the application project, through the Visual Studio Add Project dialog box, You can add the App.manifest file and change the requestedExecutionLevel in the file to Requireadministrator:

For Cloudnotes Webapi and other content of the desktop client, please directly on the Https://github.com/daxnet/CloudNotes site directly view the source code. Do not understand the place can leave a message here.

Next??

I'm going to do a step-by-step function and performance improvement on cloudnotes, and there's too much to do next. Every time I complete a new feature update, I'm going to post a blog post about it. If there are no new features, I will also introduce the relevant technical implementation of the existing features. For the time being, the following feature improvements are intended to be progressively available in the next release:

• Local cache and Server synchronization system-every time you open and save notes, you are connected directly to the server, not only increasing server load, but also the user experience is not fluent
• Plug-in system-any interested friends can be through the plug-in system, for the Cloudnotes desktop client to write plug-ins, for example, directly crawl the page into a log, etc.
• Trust and note sharing services between users
• Document Structure View-provides hierarchical view of the document structure by parsing HTML documents, making it easy for users to write with Cloudnotes

Wait a minute ... etc... Let's look forward to it.

Cloudnotes Desktop Client article: Enhanced notes List