3-D Stock Viewer, Translucent Windows and more…
Nov 04 2013
The ComActivity Tech Team Challenge
An out-of-hours undertaking by our amazing development team.
The Challenge: Imagine, and use .NET to develop a graphical enhancement to be run in Smart Office that interfaces directly to M3. Focus on creativity and technical skill – stretch the boundaries to see what can be achieved.
Here is one team’s solution.
Team: Kristina, Peter, Peter and Norbert
Viewing a 3-D Stock Item (and More…)
The winning project displays several clever techniques and components which really opened our eyes to what can be done graphically.
This elegant solution, performs a stock update of an item from a link on the M3 MWS060 function. It launches a Smart Office Widget to open the window, which then displays an animated 3-d model of selected stock and ellipse geometry to create a dynamic pie chart that indicates proportions of allocatable and non-allocatable stock. All of this is displayed on a translucent, gradient background with animated colours that change shade as the stock updates.
What we loved:
The number of graphical elements employed in developing this app allowed the team to take out the prize for most popular solution (as voted by the rest of the development team)
The rotating item concept opened our mind to all kinds of potential uses for future 3-D graphics in M3 applications – say for product assembly or use by service technicians. The 3-D item was created using Viewport3D controls and using two sets of 3D models – one for light, which illumintates the model, and one for the item itself. The item was then animated using DoubleAnimation and Vector3DAnimation to control the axis and angle respectively.
The dynamic pie chart is simple, but it’s undeniably powerful. The skill here was in creating the pie chart from scratch using Ellipse geometry for the pie, and Path geometry for the allocatable stock segment.
The translucent screen that changes colour. This is our favourite bit. You don’t notice it until it is pointed out, but the transparency improves the visual integration of the window, and the subtle colour change as the stock is updated is a further enhancement. The gradient colours were achieved using a LinearcolourKeyFrame with the animation of the colours achieved through ColourAnimationsUsingKeyFrames.