Archive for category Computers and Internet

Remove the Stimulsoft Reports WinRT Charms

Usually when you prepare you’re Application for publishing on the Windows Store you make the finishing touches and add the Settings Charms and the About and Settings dialogs.

But on the Page where the Stimulsoft ReportViewer is present you have a surprise, it has his own charms for Localizations and About, so how do you remove that?

Just add this line on page initialization :

StiSettingsPaneHelper.Destroy();

Happy codding!

Advertisements

Leave a comment

Customize the Stimulsoft Reports WinRT ReportViewer control

The Stimulsoft Reports are great especially that they are the single reporting solution for WinRT ( at the moment ) so in order to remove the orange border and the report background I had to  use tools like Silverlight Spy or XAML Spy to have a look at the Visual Tree to identify the border and the Background Path and then make a method that will get that object and change it or remove it.

I do have my own visual tree helpers but I also found a good and simple solution that will help me get each visual element.

You can find more details on how this works from here .

I am guessing that you’ve already installed the Stimulsoft Reports.WinRT and that you already have the library’s that you need and have all the project setup , or you can have a look at this  video .

Now I used the XAML spy, took a look and so that my border is the second Border and the container that have the background is the first Grid.

private void RemoveBorderFromReport()
{
IEnumerable<Windows.UI.Xaml.Shapes.Path> paths = ViewerControl.GetVisuals().OfType<Windows.UI.Xaml.Shapes.Path>();
//remove background
if (paths != null)
{
paths.ElementAt(0).Data = null;
}
Border border = ViewerControl.GetVisuals().OfType<Border>().ElementAt(1);
 
if (border != null)
{
border.BorderThickness = newThickness(0);
}
if (border != null)
{
border.CornerRadius = newCornerRadius(0);
}
Grid grid = ViewerControl.GetVisuals().OfType<Grid>().ElementAt(0);
grid.Background = newLinearGradientBrush();
}
 
Before                                          After
                    
 
 Is a bit Hacky but is the only solution I know.
Happy codding!

Leave a comment

Custom skin for Windows Phone 7 Emulator

If you have a windows phone 7 and develop application then I guess you will like to have an emulator that looks exactly like you’re phone.

This is exactly what I am going to  show ho to do in this blog post.

Note: If you don’t care how to make one and you want the HTC Motzart skin  then just downland the files from here  HTC Mozart Emulator and add them in ” C:\Program Files (x86)\Microsoft XDE\1.0″.

But if you want to know how is made and how to make you’re custom skin then read all post.

Important: Please make a backup of the existing WM7_Skin.xml , just in case, or just take them from here  “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Emulation”,  if you want to have the original skin.

So let’s understand what is happening:

The emulator image of the emulator is stored on “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Emulation” but the images are also stored here “C:\ProgramData\Microsoft\XDE\1.0″ .

The images that are taken by the emulator are actually taken from  ” C:\Program Files (x86)\Microsoft XDE\1.0″ , this is the magic place.

We will  edit   WM7_Skin.xml  to reference the images and replace the  WM7_Skin_Down.png , WM7_Skin_Up.png and WM7_Skin_Mask.png with some images that should meet some exact specifications:

1.The display screen from the image should be the same dimensions ( 480/800).

2.The  mask image colored rectangles should be exactly over the buttons in our image.

3. The XML file should reference our new images and screen start position.

Let’s do it now:

1 Search an image and edit it to meet the requirements

 The image should have a minimum resolution of 610/1109 (I found this image http://microsoftfeed.com/wp-content/uploads/2010/10/Windows-Phone-7-HTC-7-Mozart-Front.jpg)

Now we will edit this image so that the screen size is exactly 480/800 and  for this I will use Paint.NET is free and darn good, much simpler than Photoshop.

Important : We make the image as png with transparent background.

To edit this I will open the image add a new layer draw a rectangle of 480/800 and shrink the image until the screen is the same as the rectangle , crop to the new image  size  and save the image as png .

Before edit                                                                                                                                                              After Edit

 

Final image 

2. Now we edit the mask image to be as the original images and so that mask rectangles will be over the buttons.

To do that I am going open the image in Paint.Net add a new layer and paste the mask image , and then I will use the Magic Wand to remove and delete the white background.

Then we move the image on this layer so that rectangles are exactly over the buttons and then we make all the image to be white using the Paint Bucket.

Select the layer with the mask , select the white background with the Magic Wand and then delete that, so you will end up with the colored rectangles only and is more easy to center.

Resulting Mask image

After the mask is created we make the  Down image by editing the image and adding filling the image buttons with the same color as in original Down image.

Resulting Down Image

3. Now to edit the XML file.

In this image we see the relation between the physical file’s and the xml so all we have to do is to open the xml in notepad or some editor and just write the new filenames and very important to get the exact location where the screen  is starting in my case 60 and 164, but if you make a mistake you will see in the Emulator and edit the xml again.

After we have the the images in the same folder and the xml is edited we can make a try to see our new  Emulator.

Original Emulator                                                           Custom Emulator

                                       

Here is an archive with the files for HTC Mozart Emulator

Leave a comment

Simple HTML Progress Bar using CSS3 and JavaScript

Since Silverlight is such a good technology to build very beautiful applications but since not all users have Silverlight installed, and to avoid any reason for a user to run away from the  site I have to make some Silverlight to HTML conversions.

So one of those is a simple Progress Bar that I need in HTML.

While searching the internet I’ve found some interesting example but a bit complicated for what I have in mind and I thought this should not be so complicated after-all.

The Progress Bar:

Here is the video for this with a bit more explination: http://www.youtube.com/watch?v=4rHa2w8Wz7k

I need tow containers , one is the progress bar container and another one is the fill, one script that will take the id’s of those containers, get the current value for which we need to set the progress.

I used 2 div’s for this and fill them with a gradient color, and a bit of JavaScript logic to calculate the width of the fill area.

The Html looks like this:

  <div id="progresBarContainer" class="progressBarContainerClass">
        <div id="progresBarFill" class="progressBarClass">
        </div>
    </div>
    <input type="text" id="inputText" />
    <input type="button" onclick="setValue()" />

The classes of the elements look like this:

.progressBarContainerClass
{
 height: 25px;
 width: 250px;
 border: 1px solid black;
 border-radius: 3px 3px 3px 3px;
 -moz-border-radius: 3px 3px 3px 3px;
 -webkit-box-shadow: 0px 0px 5px #999;
 -moz-box-shadow: 0px 0px 5px #999;
 box-shadow:0px 0px 3px 1px rgba(0,0,0,0.3);
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #D8D6D5), color-stop(0.8, #999999));
 background: -moz-linear-gradient(top, #D8D6D5 20%, #999999 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D6D5', endColorstr='#999999');
}
.progressBarClass
{
 display: inline-block;
 border: 1px solid none;
 height: 100%;
 border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 2px 2px 2px 2px;
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #514BF2), color-stop(0.8, #5142BF));
 background: -moz-linear-gradient(top, #514BF2 20%, #5142BF 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#514BF2', endColorstr='#5142BF');
}

And the script that will control this is split in tow parts:

  • in one script we instantiate the ProgressBar object and pass in the id of the tow main elements and the limits in witch the progress bar will operate and start the animation to the calculated value.
 function setValue() {
            var progressBar = new ProgressBar("progresBarContainer", "progresBarFill", 0, 100);
            var currentValue = $("#inputText").val();
            var progressWidth = progressBar.GetWidth(currentValue);
            progressBar.fillElement.animate({ width: progressWidth }, 500, "easeOutCubic", null);
        }
  • and the script that contains the ProgressBar object and makes the calculation.
function ProgressBar(idContainer, idFill, minValue, maxValue) {
    //case 1 from minus to plus
    //case 2 from minus to minus
    //case 3 from plus to plus 
    //case 1,2 are not treated here 

    this.maxValue = maxValue;
    this.minValue = minValue;
    this.idContainer = idContainer;
    this.width = $("#" + idContainer).width();
    this.fillElement = $("#" + idFill);

    this.GetWidth = function (currentValue) {
        ///
        ///		Calculate the progressBarFill width
        ///
        ///	

        //currentValue is smaller or equal to 0
        if (currentValue <= this.minValue) {
            return this.minValue * (this.width / 100); ;
        }

        //currentValue is smaller then maximum
        if (currentValue < this.maxValue) {
            return currentValue * (this.width / 100);
        } //currentValue is bigger then maximum
        else {
            return this.maxValue * (this.width / 100);
        }
    };
}

And this is it 🙂

Here is one way that you can structure this in you’re project.

And here is the result. 🙂

8 Comments

Visual studio 2010 Hangs when adding new item in MVC application

After some research and the reading of Sara Ford’s Blog and looking un the windows logs where was this:
“The data source ‘{130bada6-e128-423c-9d07-02e4734d45d4}’ specifies no supporting providers or a set that are not registered.”

and in the VS log located here: %APPDATA%\Microsoft\VisualStudio\10.0\ActivityLog.xml  i’ve noticed something related to TestSolution.

It’s looks this:

I’ve created a new MVC 2.0 project and added a test project to it but I’ve unloaded the test project after it was created.

After I had deleted completely the Test project everything was normal , no more VS Hanging.

Leave a comment

Live Streaming in Silverlight 4

A few days ago I started to deep into live streaming in Silverlight since I needed to insert a live IP broadcasting webcam in a Silverlight project.

As we know there is MediaElement that has a limited supported formats and a first approach was to provide the Source of the MedialElement with the link to the video live stream.

The problem in all this was that the webcam provided a stream in .mjpg format witch is not supported by Silverlight.

So I started to do research campaign on Google and went over IIS Smooth Streaming , which was very nice to see how easy you can make a smooth stream from a video at high resolution, but this was not fit to my problem from to main reasons:

1. I had no hardware aces to my webcam so I can make a Live Broadcasting Project in Expression Encoder

2. my stream was real live stream not a video that I could encode

3. I had no Server to encode the live stream

clip_image002

Here is the clasic wey with an existing video How Do I: Getting Started with Smooth Streaming 

So the solution was either to make the webcam somehow broadcast a Silverlight supported format or to do an live encoding without using a Windows Server.

The encoding can be made either using ffmpeg.exe of using VLC media player.

I started to experiment different links an types of formatting supported by Silverlight ad I arrived to the conclusion that this is very good and looks good in Silverlight

http://91.121.173.78:8254;stream.nsv :sout=#transcode vcodec=WMV2,vb=5000,fps=30,scale=1,acodec=wma2,ab=128,channels=1,samplerate=44100}:std{access=mmsh,mux=asfh,dst=MyIP:PortNo} :no-sout-rtp-sap :no-sout-standard-sap :sout-keep

The link is from a live broadcasting TV named Hit Music TV , and the rest is the settings configured and generated in\by VLC.

To make a very simple test:

1. make a Silverlight project,

2. add a MediaElement

3. Open VLC , start a live stream Like This

4. Very important thing -> set the media Source like this

clip_image004

Where MediaUrl is the uri to the Live stream

Also pay attention to the port on which you start the local stream , usually is 8080.

The thing that I didn’t like about all this is that every time I waned to start a VLC stream I had to manually introduce the parameter for the stream, and all settings, so I’ve found the way to lunch the VLC from command line and start the stream directly from a WPF application.

To facilitate all this and show all this in a more presentable way I had created a small Silverlight 4 application and an Expander with the links for the Stream Sources and a window so you can create either a Media element or a Medial Player control to display the stream from the provided link.

Here is a video that illustrates the functionality of this small project.

Since the point here is Live stream in Silverlight I, will not get into project details here.

Here is a video of projects Silverlight and WPF.

  

Leave a comment

Talking about Implementing Model-View-ViewModel in Silverlight – Pixel8 – Infragistics Community

Leave a comment