Windows, Web and Mobile Developmenthttps://vortexwolf.wordpress.com
Articles about applications developmentSat, 06 Jan 2018 20:05:51 +0000enhourly1http://wordpress.com/https://s2.wp.com/i/buttonw-com.pngWindows, Web and Mobile Developmenthttps://vortexwolf.wordpress.com
Fixing jqPlot chart to toggle (show and hide) slices in Pie charts.https://vortexwolf.wordpress.com/2015/04/24/fixing-jqplot-chart-to-toggle-show-and-hide-slices-in-pie-charts/
https://vortexwolf.wordpress.com/2015/04/24/fixing-jqplot-chart-to-toggle-show-and-hide-slices-in-pie-charts/#respondFri, 24 Apr 2015 04:59:02 +0000http://vortexwolf.wordpress.com/?p=497]]>I found a question on stackoverflow where one guy found out that the enhancedLegendRenderer plugin didn’t work with jqPlot Pie Charts. He also posted a jsFiddle example where you can show/hide lines in the Line chart by clicking on legend items, but it doesn’t work with the Pie chart. I decided to investigate why it happens.

By looking at jqPlot source code I found out that the EnhancedLegendRenderer generates items 1:1 to chart series.

if (idx < series.length) {
s = series[idx];

Let’s look at the example. The Line chart with 6 lines has 6 series (series.length = 6).

The EnhancedLegendRenderer would generate only 1 item for the Pie chart. This wouldn’t look good,and jqPlot automatically disabled EnhancedLegendRenderer and applied PieLegendRenderer instead which doesn’t have much functionality.

I rewrote this renderer for Pie charts and called it EnhancedPieLegendRenderer. Here is the final result:

The link to fixed *.js files will be posted at the end of this article.
At first I created a new file, copy-pasted the code of enhancedLegendRenderer, renamed the class name, and then I replaced all “series.length” by “series[0].data.length” because as I described, Pie charts have only 1 series, but many items.
For example, I replaced the code that calculates the number of rows and columns, it looked so before:

—————
After this it started to show the legend, but the show/hide functionality didn’t work.
I decided to add a 3rd parameter to the data array which determines whether the slice is visible or not.
From

Then I replaced “handleToogle” function of EnhancedPieLegendRenderer to show/hide correctly. Here it sets the 3rd parameter above, for example, from “[‘Sony’,7,true]” to “[‘Sony’,7,false]”, and then redraws the chart:

]]>https://vortexwolf.wordpress.com/2015/04/24/fixing-jqplot-chart-to-toggle-show-and-hide-slices-in-pie-charts/feed/0vortexwolfjqplot pie chart with enhanced legendAlgorithm for placing plus and minus signs between digits so that the result is 100https://vortexwolf.wordpress.com/2013/12/07/algorithm-plus-minus-result-100/
https://vortexwolf.wordpress.com/2013/12/07/algorithm-plus-minus-result-100/#commentsSat, 07 Dec 2013 12:29:30 +0000http://vortexwolf.wordpress.com/?p=482]]>Yesterday I found the following programming problem:Write a program that outputs all possibilities to put + or – or nothing between the numbers 1,2,…,9 (in this order) such that the result is 100.

But the page in the link provides only answers without an algorithm, that’s why I decided to write it myself.
At first let’s simplify the problem and use only ‘+’ and ‘-‘ operations, without concatenation of numbers. Then we will have some kind of a tree with 2 branches for each node, the left branch is ‘+’ operation, the right branch is ‘-‘ operation. For numbers [1 2 3 4] and sum=6 the tree will look like this:

Then we should modify the algorithm so that besides ‘+’ and ‘-‘ we can put ‘nothing’ between numbers. We will have the tree above, but with 3 child nodes for each node instead of 2. Also the ‘nothing’ operator will build slightly different nodes. Here is their comparison:

‘+’ operator: [1 2 3 4] sum 100 -> [2 3 4] sum 99

‘-‘ operator: [1 2 3 4] sum 100 -> [-2 3 4] sum 99

‘nothing’ operator: [1 2 3 4] sum 100 -> [12 3 4] sum 100

For the ‘+’ operator we call “findPaths(99, 2, index+1)”, for nothing operator we will call “findPaths(100, 12, index+1)”. Here is the updated algorithm:

Also there is another algorithm: to generate an array with all possible combinations, then parse each row and check its sum.
It is quite slower, but it is more generic and can work for other operations:

This algorithm has a high complexity and requires 3^8 (=6561) comparisons. But I can’t find a better algorithm so checking all combinations seems to be the best way to solve it.

]]>https://vortexwolf.wordpress.com/2013/12/07/algorithm-plus-minus-result-100/feed/2vortexwolftree_for_1234How I use Google Analytics for Mobile Appshttps://vortexwolf.wordpress.com/2013/12/01/how-i-use-google-analytics-for-mobile-apps/
https://vortexwolf.wordpress.com/2013/12/01/how-i-use-google-analytics-for-mobile-apps/#respondSun, 01 Dec 2013 18:36:40 +0000http://vortexwolf.wordpress.com/?p=448]]>Google Analytics is a service that collects information about web site visits and then displays it in the form of charts and tables. In this post I will enumerate reports and pages that I use for my Android application.

Visits by country

It is the main report and it can be seen by using Audience->Geo->Location. It will display the countries on the map as well as in the table.
Also if you click on any country in the list, it will display the list of areas (or states) and the list of cities.
It is very similar to the Google Play statistics which shows installs by country:
But Google Analytics has more data and shows real usage instead of one-time installs.

Android OS versions

Android versions can be viewed without custom reports, but the sequence of actions is quite tricky Audience->Technology->Browser & OS->click Primary Dimension: Operating System->click Anroid row.
It is similar to the Google Play statistics which shows install by Android version:

Device brands

Shows the most popular companies that produce Android phones and tablets.Audience->Mobile->Devices->click Primary Dimension: Mobile Device Branding.
After clicking on a company name the list of device names will be displayed (but it displays incomprehensive codes like GT-I9300 instead of actual names).

So each activity class is considered to be a web page and you can see page views report by using Behavior->Site Content->All Pages
My Android app has 9 activities and in the table I can see how often users visit specific activities and how much time they spend on each activity.

Various actions performed by users

I used to track user actions a year ago, but stopped to do this because it was difficult to use this functionality and collected information was useless anyway.
Here is an example of a user event: your app has a button “Download file” and you want to know how often it is clicked. So you can use the following code:

“UI” is the topmost category that groups all events related to user interface. You can give any name to this category, no matter whether it is “UI” or “User Interface”

The next parameter is the name of the action, here it is “Download File”, other actions can be “View Image”, “Click Close Button”, etc.

The third parameter is optional, but you can add some other information too, for example, whether this event was induced by clicking the button on the page, or by using a context menu, or by using the action bar.

The forth parameter is optional too, I just pass 0.

Then you can see received evens in the section Behavior->Events->Top Events. At first you will see the list of categories (1st parameter), then you can click on any category and see the list of actions (2nd parameter), and each action contains the list of labels (3rd parameter)

Custom Reports: Android OS versions

You can create your own reports as well by clicking on the Customization tab. Here is an example how to reproduce the OS versions report which I described above.
To the Metric Groups section add the following metrics: Unique Visitors, Visits, Pages / Visit, Avg. Visit Duration.
To the Dimension Drilldowns section add: Operating System Version Mobile Device Info
The configuration process will look like this:
And your customized report will look like this:

Some downloadable dashboards and reports

]]>https://vortexwolf.wordpress.com/2013/12/01/how-i-use-google-analytics-for-mobile-apps/feed/0vortexwolfvisits_locationinstalls_countryandroid_os_versionsinstalls_versionandroid_devices_brandsvisits_pagesanalytics_eventscustom_report_os_versionscustom_report_os_versions_viewSilverlight video player. YouTube style.https://vortexwolf.wordpress.com/2013/07/03/silverlight-video-player-youtube-style/
https://vortexwolf.wordpress.com/2013/07/03/silverlight-video-player-youtube-style/#commentsWed, 03 Jul 2013 17:14:37 +0000http://vortexwolf.wordpress.com/?p=431]]>In the previous article I explained how to implement a simple video player with some controls. It works well, but it has a generic style. In this article I’ll explain how to restyle the video player so that it looks the same as YouTube player.

The final result is in the picture below, and at this link you can see how it looked before.

The simplest way to copy the YouTube style is to enable HTML5 video in account settings, find such video and explore the video page by Firebug or Chrome Developer Tools. Then you should convert html elements and styles to their Silverlight counterparts.

This is just a bitmap image which is taken from a css sprite. CSS sprites are large images which clue together all images used by site. Sprites do not work in Silverlight, so it is necessary to crop a separate image from the sprite and use it instead.
The code above can be rewritten in Silverlight in this way:

PNG images you can find in the source code file which I’ve attached at the end of this post.
YouTube buttons had also styles for a focused state, but focus works differently in Silverlight, so I didn’t use them in my example.

In the code above ‘html5-volume-panel’ is the whole slider, and ‘html5-volume-slider-foreground’ is the thumb (white rectangle) in the middle.
Silverlight has its own Slider control and its default style you can find here. The default Slider template has lots of code, but you don’t need the largest part of it in this example.
The thumb can be implemented so:

I should say that the Silverlight Slider control behaves quite differently from html sliders: it handles mouse clicks incorrectly. Instead of changing position of the thumb, it only moves it for a small distance. The only way to fix this issue is to write your own control, which is quite a complex task and requires some time. So far for this example I leave it as a known issue.

Source code and sample page

]]>https://vortexwolf.wordpress.com/2013/07/03/silverlight-video-player-youtube-style/feed/1vortexwolfSilverlight_youtube_styleSilverlight MediaElement tutorial. Creating a video and audio player.https://vortexwolf.wordpress.com/2013/06/25/silverlight-mediaelement-tutorial-creating-a-video-and-audio-player/
https://vortexwolf.wordpress.com/2013/06/25/silverlight-mediaelement-tutorial-creating-a-video-and-audio-player/#commentsTue, 25 Jun 2013 12:43:17 +0000http://vortexwolf.wordpress.com/?p=405]]>Video in Silverlight is played by using the built-in MediaElement class. You might have seen some video frameworks like Silverlight Media Framework, Expression Encoder Player or Open Video Player, they all are based on this class. Though these frameworks look quite complex, in reality they are just wrappers around the built-in MediaElement or SmoothStreamingMediaElement classes and all that they do is adding design, control buttons and some extra functionality like advertisement and diagnostics. So you can build such video player by yourself.

The simplest media player

It will start playing video as soon as the page is loaded and the video fills the entire page uniformly (keeping its aspect ratio).

If it doesn’t work, make sure that the address of your page looks like `http://…` and not `file://…`. You can fix the url in this way by adding a web application project to your solution and running it.

Now I will explain how to improve the code above so that it looks more like a video player.

Play/Pause buttons

You should disable auto playing (the AutoPlay property) and also implement a grid layout with 2 buttons. Here is the xaml code:

It should work like this: if you click the play button – video starts playing and the pause button appears; if you click the pause button – video stops playing and the play button appears. I have added 2 event handlers and here is the C# code of them:

Media length and position text

This feature requires creating a ViewModel. It is because there is no PositionChanged event, so you should create a model property and bind it to the Position property of the MediaElement class.
Here is the xaml code which is bound to 3 properties: Position, PositionText and DurationText.

Playing progress bar

The text label with position and length is a good indicator, but it would be better to add a bar which displays a red line indicating played video and a gray line indicating buffered video as you have seen it on youtube.

In code behind I update the position bar and buffered bar when they change. Note that I use the DownloadProgressChanged event instead of the BufferingProgressChanged event, because BufferingProgress is related to 5 buffered seconds, whereas DownloadProgress means the whole video length.

Changing position after clicking on the progress bar

So we have a playing progress bar, but it doesn’t react if we click it. It is easy to fix, I will just add a MouseLeftButtonUp event handler to the progress bar. It calculates the mouse position and changes the media position accordingly.

There can be one issue: if the video is not downloaded yet and you click at the end – you will have to wait a long time until the video has been compeletely downloaded. The player should send HTTP-range requests, but sometimes it does, sometimes it doesn’t. Anyway, Smooth Streaming don’t have such issues.

Displaying errors and state information

Sometimes video cannot be played because of buffering or if errors occur. Such information should be displayed to users so that they know what is happening.
It can be implemented by using TextBlock controls and some events.

Source code and sample

]]>https://vortexwolf.wordpress.com/2013/06/25/silverlight-mediaelement-tutorial-creating-a-video-and-audio-player/feed/4vortexwolfSimplest_MediaElementMediaElement_PlayPauseMediaElement_VolumeMediaElement_PositionTextMediaElement_PlayProgressBarMediaElement_ErrorMessageWindows Phone select and upload image to a website over HTTP POSThttps://vortexwolf.wordpress.com/2013/06/04/windows-phone-select-and-upload-image-to-a-website-over-http-post/
https://vortexwolf.wordpress.com/2013/06/04/windows-phone-select-and-upload-image-to-a-website-over-http-post/#commentsTue, 04 Jun 2013 13:43:48 +0000http://vortexwolf.wordpress.com/?p=399]]>You have often seen photo sharing websites where you can attach images and after clicking the submit button the local images will be uploaded to the server. It is implemented by using HTML forms which send HTTP requests automatically. But if your application is not a web application written in HTML, you should write HTTP requests by yourself. You should do that in Windows Phone too.

So the full sequence consists of 2 actions: 1 – select an image, 2 – upload it to the server.
At first, you should select an image from the gallery.
The code is simple, just use the built-in PhotoChooserTask class:

Then you should use the HttpWebRequest class to post the selected image to the server. This class alone is not enough, so you should write lots of extra code to make it work. I have implemented a special class for this purpose, the code is based on this answer on stackoverflow.com, you can just copy it to your project.

A sparkline is a very small line chart, typically drawn without axes or coordinates.

Though this chart is not included by default to the Silverlight Toolkit library, it is very easy to implement such chart by styling the built-in Line chart. Here is an example which I’ve implemented:

At first I’ve changed the default control template of the Chart control, I’ve removed all paddings, the chart title, and reduced the minimum height and width of the chart. Also I’ve changed the DataPoint template (made them invisible) and the Polyline template (reduced its thickness). Here is the XAML code:

This code is almost all that you need to create a sparkline chart. All that is left is to remove axes. It wasn’t a trivial thing, so I used some kind of a hack: I set their width (for Y axis) and height (for X axis) to zero.

]]>https://vortexwolf.wordpress.com/2013/05/07/silverlight-sparkline-chart/feed/0vortexwolfsilverlight_sparkline_sample19 invitations to careers.stackoverflow.com giveawayhttps://vortexwolf.wordpress.com/2013/04/26/19-invitations-to-careers-stackoverflow-com-giveaway/
https://vortexwolf.wordpress.com/2013/04/26/19-invitations-to-careers-stackoverflow-com-giveaway/#commentsFri, 26 Apr 2013 19:08:45 +0000http://vortexwolf.wordpress.com/?p=388]]>Maybe careers.stackoverflow.com will be useful for someone, so I have 19 invitations that I don’t need. Just click at this link: accept invitation.

The proposal remains valid as long as you see this post. If I don’t have invitations, I will delete the post.

]]>https://vortexwolf.wordpress.com/2013/04/26/19-invitations-to-careers-stackoverflow-com-giveaway/feed/1vortexwolfinvitations carreer stackexchangeWindows Phone Marketplace app submittinghttps://vortexwolf.wordpress.com/2013/04/22/windows-phone-marketplace-app-submitting/
https://vortexwolf.wordpress.com/2013/04/22/windows-phone-marketplace-app-submitting/#respondMon, 22 Apr 2013 14:20:43 +0000http://vortexwolf.wordpress.com/?p=375]]>In this article I will show how the windows phone marketplace looks and how to publish apps there.

When you click the Submit App link, you will see the following page:

If you click the square with the number 1, you will see the App Info page:

All that you need to fill out is the App Alias field (i.e. the name of your application) and the Category combobox. That’s all, you can go to the second step:

If you click the square with the number 2, you will see a page with the Browse link where you should upload your xap file:

After that the page will become much longer and will contain several sections. The first section displays information about your xap file:

In the second section you can write a description of your application that will be displayed to end users:

And finally, you should upload a square 300×300 icon and at least 1 screenshot of your application:

Then your application will be submitted and it takes 3 days until it is reviewed and either approved or rejected.

After the application is approved and is visible on the marketplace, you can update your application in a similar way. The update process is almost the same and you will need to wait 3 days as well.

]]>https://vortexwolf.wordpress.com/2013/04/22/windows-phone-marketplace-app-submitting/feed/0vortexwolfmainpageappinfoappinfo_createduploadxamlxaml_uploaded1xaml_uploaded2xaml_uploaded3Windows Phone display images from URLhttps://vortexwolf.wordpress.com/2013/04/04/windows-phone-display-images-from-url/
https://vortexwolf.wordpress.com/2013/04/04/windows-phone-display-images-from-url/#respondThu, 04 Apr 2013 15:14:22 +0000http://vortexwolf.wordpress.com/?p=361]]>The built-in Image element is quite good for loading and displaying images from the web, because it loads them asynchronously in the background thread and doesn’t freeze UI.

In this example I will show how to display a loading indicator while the image is loading and an error message if the image loading has failed.

You shouldn’t use the Source property in the XAML markup, instead you should set the Source property in the code-behind.

At first I create the BitmapImage instance, after the creation of this object I subscribe to its events ImageFailed and ImageOpened. Then I display the loading indicator (the ShowLoading method). And as soon as the line ‘this.imageView.Source = bitmap’ is called, the image loading process starts. After some time either ShowError or ShowImage will be called.