Blog

Nov 10
MVP Summit 2014

Every year, Microsoft invites recipients of MVP awards to the Microsoft campus in Belleview Washington for the MVP Global Summit.  The Summit is an exclusive event for MVPs and RDs to network with each other as well as Microsoft team members.  It is also a great opportunity Microsoft product teams to benefit from ideas of people who are actively working with the products in diverse environments and get direct feedback on future plans. 

This year was AMAZING!  It was impressive to see what Microsoft has planned for Visual Studio and Blend in the development world.  It is a great time to be a developer.  Most of what we saw was under NDA so for now, you will just need to trust me that you will like what is coming.  What I can say is that the messaging around Universal Apps being the future model for app development of any type was clear and consistent. 

What really jazzed me this year is the direction that Microsoft has taken with Windows Embedded and in particular the “Internet of Things”.  Coupled with Microsoft’s Cloud Platform, we got to see many examples of where Microsoft is working to enable very small devices to become our front line in data gathering and notifications.  The Embedded team members talked about some of their work to create intelligent systems in retail and healthcare. These systems are multiple device types that work together to enable workers to focus more on the clients and create better more effective experiences.  In the past, this was done with a lot of disconnected systems with different programming models which leads to bugs and difficult systems to manage and update.  It is truly is starting to look like all the pieces are coming together in a unified model and Microsoft gets how important it is.

Microsoft spoke directly to both the current Embedded clients as well as the new hobbyist and “Maker space” folks.  They highlighted the spaces that they are investing in with amazing potential to empower people to work more efficiently and effectively .  While their message was clear and consistent that they very excited about this space in the future and want to serve all these communities, they were careful not to put any of them in a box.  In other words, although they are working on paths that they feel are beneficial to each community, they encouraged cross experimentation and asked for any and all feedback.  It is clear that the Embedded and IOT teams are excited about technology and innovation from all directions and are working with many consortiums and organizations to enable innovation.

I am pretty new to this space so I am a little more NDA aware than others may have to be and will hold back much of what I saw at the Summit.  I hope to share more blog posts as I actually play with this stuff and more new technology releases are announced.

If you want to learn more about some of the terms I have used, please visit Internet of Things  and Windows Embedded .

To keep up with the latest IOT announcements from Microsoft, follow the IOT team blog or on Twitter, follow @IOTDan and @IOTPranish

If you are in DFW and looking for a space to have access to equipment and be inspired, check out the Dallas Makerspace .

Aug 10
Prototyping Applications with SketchFlow in Blend for Visual Studio 2013

SketchFlow enables rapid creating of dynamic interface mockups very quickly. The SketchFlow workspace is the same as the standard Blend workspace with the inclusion of three panels: the SketchFlow Feedback panel, the SketchFlow Animation panel and the SketchFlow Map panel.

By using SketchFlow to prototype, you can get feedback early in the process. It helps to surface possible issues, lower development iterations, and increase stakeholder buy in. SketchFlow prototypes not only provide an initial look but also provide a way to add additional ideas and input and make sure the team is on track prior to investing in complete development.

When you have completed the prototyping, you can discard the prototype and just use the lessons learned to design the application from or extract individual elements from your prototype and include them in the application. I don't recommend trying to transition the entire project into a development project.

Objects that you add with the SketchFlow style have a hand-sketched look. The sketch style is used to remind stakeholders that this is a prototype. This encourages them to focus on the flow and functionality without getting distracted by design details.

The sketchflow assets are under sketchflow in the asset panel and are identifiable by the postfix "–Sketch". For example "Button-Sketch".

You can mix sketch and standard controls in your interface, if required. Be creative, if there is a missing control or your interface has a different look and feel than the out of the box one, reuse other sketch controls to mimic the functionality or look and feel. Only use standard controls if it doesn't distract from the idea that this is a prototype and not a standard application.

The SketchFlow Map panel provides information about the structure of your application. To create a new screen in your prototype: Right-click the map surface and choose "Create a Connected Screen". Name the screens with names that are meaningful to the stakeholders.

The start screen is the one that has the green arrow. To change the start screen, right click on any other screen and set to start screen. Only one screen can be the start screen at a time.

Rounded screen are component screens to mimic reusable custom controls that will be built into the final application.

You can change the colors of all of the boxes and should use colors to create functional groupings.

 

The groupings can be identified in the SketchFlow Project Settings.

 

To add connections between screens in the SketchFlow Map panel. Move the mouse over a screen in the SketchFlow and a menu will appear at the bottom of the screen node. In the menu, click Connect to an existing screen. Drag the arrow to another screen on the Map.

You add navigation to your prototype by adding connections on the SketchFlow map or by adding navigation directly to items on your interface. To add navigation from objects on the artboard, right click the item then from the menu, choose "Navigate to". This will expose a sub-menu with available screens, backward, or forward.

 

 

 

 

 

 

 

When the map has connected screens, the SketchFlow Player displays the connected screens on the Navigate sidebar. All screens show in the SketchFlow Player Map. To see the SketchFlow Player, run your SketchFlow prototype.

The Navigation sidebar is meant to show the desired user work flow. The map can be used to view the different screens regardless of suggested navigation in the navigation bar. The map is able to be hidden and shown.

 

As mentioned, a component screen is a shared screen that is used in more than one screen and generally represents what will be a custom object in the application. To create a component screen, you can create a screen, right click on it in the SketchFlow Map and choose "Make into component screen". You can mouse over a screen and from the menu that appears underneath, choose create and insert component screen. To use an existing screen, select if from the Asset panel under SketchFlow, Components.

You can use Storyboards and Visual State animations in your SketchFlow project. However, SketchFlow also offers its own animation technique that is simpler and better suited for prototyping.

The SketchFlow Animation panel is above your artboard by default. In SketchFlow animation, you create frames and then position the elements on your interface for each frame. You then specify elapsed time and any effects you want to apply to the transition.

The + at the top is what creates new frames. Once you have a new Frame, select it and change the property you want to animate. In the example above, I changed the Text of the result box. You can adjust the time between frames in the lower area between the frames. The easing and effects functions are changed in the center between each frame. You edit the hold time for frames by clicking the clock icon in the lower left and the hold time will appear on each frame and can be edited. The FluidLayout icon (also located in the lower left) will create smooth transitions.

Next to the FluidLayout icon is the name of that Animation. You can rename the animation by clicking on it and editing the name. The down arrow chevrons next to the name allow you to view the list of all animations in this prototype and select them for editing.

To add the animation to the interface object (such as a button to start the animation), select the PlaySketchFlowAnimationAction from the SketchFlow behaviors in the Assets menu and drag it to an object on your interface. With the PlaySketchFlowAnimationAction that you just added selected in the Objects and Timeline, edit the properties to change the EventName to the event you want and choose the SketchFlowAnimation you want from the drop down list.

You may want to add additional information to your screens that isn't really part of the prototype but is relevant information or a request for clarification or feedback from the reviewer. You do this with annotations or notes. Both appear on the user interface, however, annotations can be switched on or off at design and review time. Notes cannot be switched off.

To add an Annotation, chose the Create Annotation from the Tools menu. The annotation appears on the UI where you will add the notes.

To display or Hide annotations, click the annotation toggle at the bottom right on the artboard . After to toggle annotations on, the identifier of the person who created them appears on the artboard and you must click that to expand the notes.

To add a note to the artboard, simply select the Note-Sketch from Assets ->SketchFlow ->Styles ->Sketch Styles. Drag and drop it to the artboard and place where you want it.

When you are ready for users to review the prototype, you have a few options available. Click File -> Export and choose one of the options from the list: Publish to Sharepoint, Package SketchFlowProject, Export to Microsoft Word, or Export as Images. I suggest you play with as many of the options as you can to see what they do.

 

Both the Sharepoint and Packaged SketchFlowProject allow you to collect feedback from one or more users that you can import into the project. The user can make notes on the UI and in the Feedback area in the bottom left corner of the player.

 

When the user is done adding feedback, it is exported from the right most folder icon in the My Feedback panel. Feeback is imported on a panel named SketchFlow Feedback. To get that panel to show up, select Window -> SketchFlow Feedback. Once you have the panel showing, click the + in the upper right of the panel and find the notes you exported.

When imported, they will show up in a list and on the artboard.

 

To document your prototype, use the Export to Microsoft Word option from the File menu.

That should get you started with prototyping.

 

Jul 21
Burger ITS & friends team snaps up 3rd at Computer Visionaries 2014 Kinect Hackathon

Some of you may not know what a Kinect is or what a Hackathon entails so let me start there.  A Kinect is a motion sensing device that can read a person's body movments and enables a developer to use that information to do something.  It also has voice and video capabilities.  This hackathon was a one day event where groups of developers, designers, and people with software ideas got together to see what they could produce in that one day using the new recently released Kinect.

A big thank you to Computer Vision Dallas and Microsoft for putting together the Computer Visionaries 2014 Kinect Hackathon that took place July 18th and 19th 2014.  Our team had a great time and learned a lot from the Kinect MVP's and Microsoft team.  The Dallas Entrepreneur Center was a fantastic venue. In total, 114 people showed up to form 15 teams.

Burger ITS team members with Ben Lower:  Shawn Weisfeld, Teresa Burger, Robert Burger, Harold Pulcher, Taylor Woolley, Cori Drew (not pictured), and Katlyn Drew (not pictured)

072214_1408_ComputerVis5.jpg 

We arrived Friday after a long day of work/driving.  Originally, our idea was to make a learning game for kids.  It was intended to be multi-simultaneous players dragging and dropping tiles into a canvas area for kids around 5 years old. We quickly learned that we were limited to two simultaneous players. After working on the game for the rest of the evening and into the next morning we decided that a fast multi-player game with hand gestures was not going to happen without going beyond what was provided with the API. If we were going to have something to show, it was time to switch gears.

The next idea on the table was the Photo Anywhere Kiosk. The user can use voice and hand gestures to pick a place they would like to be.  After the user says a place (or anything they want) and then the word "search", the app uses Bing to display a bunch of images for him/her to choose from. With the use of hand gesture (grab and slide to move back and forth and push/pull to select an image) the user can get the perfect image to pose with. I couldn't get a snippet with the hand but when a the app is in use, a hand shows up to cue the user to use their hand to control it's movement.

 

 

Once they chose an image, we use the Kinect background removal feature to super impose the user on that image. When they are in the perfect position, they say "save" to save the image.

 

 

Currently, the image is saved in the images folder on the users account but there are many possibilities such as emailing it, posting to social media, etc..

The competition was great and we were honored to be recognized for third place.

kinectEvent.pdf.jpg 

Other related posts:

A couple of us are continuing to work on the kid's game and are going to make it a Windows 8 multi-player game without Kinect functionality. Stay tuned for more updates.

Jul 07
WPF - Create a custom toggle control with touch and binding support with Blend for Visual Studio 2013

In this article, I create a new toggle control using the following steps:

  • 1.  Import Photoshop file to get look and feel
  • 2.  Create control and template using standard toggle button
  • 3.  Add touch support
  • 4.  Add dependency properties for binding support

   

1.  Start in Expression Blend for Visual Studio 2013 by importing a template created in Photoshop to get the basic look of the button.  After importing, I will rename and group things to my liking.

File –>Import->Import Adobe Photoshop File

2.  Add a standard toggle feature to a page in Expression Blend and right click on it to choose Make into a User Control

Name the new control whatever you want.  For this demonstration, I will use DemoCustomToggle.

To template it to look like what you want, right click on the toggle control in the new user control you just created.  Choose  Edit Template –> Create Empty

A window will pop up for Create ControlTemplate Resource.  Name it whatever you want for my purpose, I am going to use CustomToggleTemplate.  Below the name, you will see a dialog for "Define in" and the choices are Application or This Document.  Choosing Application will allow you to re-use the resource created throughout the application.  For this demo, I am going to place it in this document.

At this point, you will see a blank screen with a blank grid and the bread crumb (shown as 1 in the figure below) will say that you are in the template.  Paste your objects from your import above and manipulate them to get the default view for your toggle.  In my case, I added On and Off wording and set On to be collapsed by default.  I also added some gradient shading and color to my objects.  When you are done, you should see something like what is shown below.

1.  BreadCrumb  2. Base Grid for this Template 3. Added content to make the switch look like you want for the default including the other switch position content with that content being collapsed.

Now it is time to open up the States Panel.  To do this, click the tab at the top (shown as 1 in the image below).  If it is not showing, click window in the file menu and check States

 

The states panel contains all the relevant states for the control you are manipulating.  In my case, I want the switch to appear to switch to the on position and the text to change when the use changes to the Checked state (shown as IsChecked in the control).  To do this, click Checked (2) and change properties on any object you want to in order to get to the desired result.  In my case, I moved the button position to the right and set OffText to Collapsed and changed the OnText to Visible.  It is very important to pay attention to the red around the Design Window (3) with the words, ___ Recording is on.  This indicates any changes you make are being recorded for that state.  Objects that have been changed will show a red dot next to them in the Objects and Timeline window (4).  You can click on each state to see what your control will look like in that state.  When you are done making changed, switch back to base by clicking it (5) .  Then to get out of working on the template, click the base object in the breadcrumb (6).

At this point, your control should work as expected.

3.  At this point, the control works with a mouse but does not respond to touch.  To add touch support, use the UIElement Events. I used TouchMove to figure out the eventual value based on the direction of the touch gesture and TouchLeave to record the new value.

In the XAML, wire up your events:

1: "Fill">

2:

3: "CustomToggle" Content="ToggleButton"

4: Template="{DynamicResource CustomToggleTemplate}"

5: 

6:

7: TouchMove="Control_TouchMove" TouchLeave="Control_TouchLeave"

8: FontFamily="Verdana" Height="80" Width="200"/>

9:

10:

The Code behind should contain

1: private Point LastPosition { get; set; }

2: private Point CurrentPosition { get; set; }

3: private bool TouchSetValue { get; set; }

4:

5: private void Control_TouchMove(object sender, TouchEventArgs e)

6: {

7: var tp = e.GetTouchPoint(null);

8: CurrentPosition = tp.Position;

9: if (CurrentPosition.X < LastPosition.X)

10: {

11: TouchSetValue = false;

12: }

13: else if (CurrentPosition.X > LastPosition.X)

14: {

15: TouchSetValue = true;

16: }

17: LastPosition = tp.Position;

18: }

19: 

20: private void Control_TouchLeave(object sender, TouchEventArgs e)

21: {

22: CustomToggle.IsChecked = TouchSetValue;

23: }

The IsChecked Property can be set in the TouchMove event but it will be triggered multiple times which is why I chose to use a variable and set the IsChecked on the TouchLeave Event.

4.  At this point, your control will now work with a mouse and touch.  Now we need to expose the properties we want to use with out control.  We will create dependency properties.  For this example, we will just expose an IsSwitchedOn property and bind it to the IsChecked property.

1: public static DependencyProperty IsSwitchedOnProperty = DependencyProperty.Register("IsSwitchedOn", typeof(bool?), typeof(CustomToggleControl), null);

2: public bool? IsSwitchedOn

3: {

4: get

5: {

6: return (bool?)GetValue(IsSwitchedOnProperty);

7: }

8: set

9: {

10: SetValue(IsSwitchedOnProperty, value);

11: }

12: 

13: }

In the XAML, we need to bind the IsChecked property to the new exposed IsSwitchedOn property in the control

IsChecked="{Binding IsSwitchedOn, ElementName=UserControl, Mode=TwoWay}"

To learn more about Dependency Properties, start here http://msdn.microsoft.com/en-us/library/ms753358(v=vs.110).aspx

Now your control is ready to be used.

Jun 30
Setting a WPF Image programmatically

Here is one way to mapping images using code behind in WPF

so.ImgMap.Source = new BitmapImage(new Uri(String.Format("../{0}/{1}",ImagePath,ImageName),UriKind.Relative));
In this example, Images must have their Build Action Property set to Resource or Content and not Embedded Resource in Visual Studio.
image
 
There are many options for the Build Action Property and the help file explains them very well.  For this example, the two that matter are Embedded Resource which is the default and Content.

Content - The file is not compiled, but is included in the Content output group. For example, this setting is the default value for an .htm or other kind of Web file or in our case where we want to include the file as a default but the user can still reach it if they know how.

Embedded Resource - This file is embedded in the main project build output as a DLL or executable. It is typically used for resource files.

May 30
Welcome to my blog!

This is where I'll be sharing my thoughts on topics that matter to me. Who knows... I might even share pictures, videos and links to other interesting stuff.

If I catch your interest, let me hear from you.

May 20
Great resources for educators

current as of 5/20/14.  In no particular order. 

Virtual Academy

Free Microsoft Training Delivered by Experts

Dream Spark

Library of software and resources for students

Azure in Education

Microsoft provides grants for educators wanting to use Azure in their curricula.

Woot Studio

Tower Game Starter Kit and Platformer Starter Kit

Nokia DVLUP

Nokia DVLUP.  Have fun, earn rewards, build new ideas.

Faculty Connection

Faculty Resources and community

Microsoft IT Academy

academic institutions and their educators, students and staff get digital curriculum and certifications for fundamental technology skills

Biz Spark

not really for the educators but in continuing education can be  of interest to the students