Virtual Keyboard for Avalonia UI preview

We are soon releasing Avalonia version of our Virtual Keyboard control. It synthesizes keyboard events through Avalonia event routing system, so it should work on any platform supported by Avalonia UI. Unlike MindFusion Windows keyboard controls, events can be sent only to input controls in current process, and not to external processes.

In addition, language support cannot be generated automatically via OS APIs as in Windows controls, but we’ll be creating character maps for each language. Currently supported cultures that can be assigned to VirtualKeyboard.InputLocale property are en-US, fr-FR, de-DE and nl-NL.

If anyone is interested in trying the preview version, please install the nuget package –

https://www.nuget.org/packages/MindFusion.Keyboard.Avalonia/

Continue reading

MindFusion Releases Xamarin Charts

MindFusion Xamarin Chart has been released with the complete set of features needed to create and customize a wide selection of charts. The control boasts a variety of chart types like radar, polar, line, bubble, bar, column, doughnut, step, scatter etc. Part of the library are also a dashboard component and a component for financial charts.

3D Xamarin Chart

3D Xamarin Chart

Each chart type exposes numerous options to be customized in order to answer fully the requirements of the user. The control is packed with many samples that demonstrate different aspects of a chart type and offer ready-to-use code. The API is documented in details, with helpful tutorials and guides.

The chart component supports flexible data interface, which allows any data source to be used as a provider of chart data as long as it implements the Series interface. Predefined are a set of the most common data sources like XML, numeric lists, DateTime values, SQL database fields.

The innovative approach to styling lets developers control each aspect of the chart’s looks. They can alter the styling on the tiniest elements or concentrate on the bigger picture and create a global theme which can be reused.

Xamarin Bubble Chart

Xamarin Bubble Chart

The component is free to try without feature restrictions for a period of 60 days. Each license includes 12 month upgrade subscription. You can find out more about MindFusion Xamarin chart component at http://mindfusion.eu/xamarin-chart.html

About MindFusion: MindFusion has provided quality software tools for thousands of organizations and individuals for over a decade. With focus on lean software design and excellent technical support, MindFusion has been preferred by many Fortune 500 companies and world-known names from all industries and fields of business. MindFusion programming components are easy to use, with plenty of options to be customized and make development much faster and successful.

Design custom shapes with WPF Diagram

Watch here the video for this tutorial.

This tutorial will run you through the process of creating custom WPF diagram shapes using the built-in Shape Designer. Keep in mind that the Designer is intended as a sample and is limited in terms of functionality. The designer is available inside the installation of MindFusion.Diagramming for WPF but is also included in this tutorial for convenience. For the purposes of this tutorial, we will create an ‘AND Gate’ circuit diagram shape as illustrated by the following image:

Circuit shapes

Run the Shape Designer application through the ShapeDesign.exe. The Shape Designer opens up with a single rectangular shape ready to be modified.

Diagramming WPF Circuit Shapes 1

The Shape Designer does not currently support shape renaming (remember, it’s just a sample), therefore create a new shape through the Shapes menu and name it ‘AndGate’.

Diagramming WPF Circuit Shapes 2

Select the newly created shape from the list on the left. In the editor select the right segment of the shape’s rectangle and press the DEL button on the keyboard. This will delete the segment and make the shape triangular.

Diagramming WPF Circuit Shapes 3

Adjust the end points of the shape segments so that it gets deflated on both sides. To adjust a segment, hover it with the mouse (so that its adjustment handles appear), then drag the handles.

Diagramming WPF Circuit Shapes 4

Select the arc primitive from the list on the right side of the screen. Drag this primitive over the top segment of the shape (until it gets highlighted in red) then drop.

Diagramming WPF Circuit Shapes 5

This will replace the line segment with an arc. Repeat the same process for the bottom segment of the shape.

Diagramming WPF Circuit Shapes 6

Adjust the middle point of both segments so that the shape looks protruded. Then drag three line primitives from the list on the right to the editor pane. Be careful not to drop the primitives over existing elements because this will replace the elements.

Diagramming WPF Circuit Shapes 7

Align the newly created line primitives with the existing shape.

Diagramming WPF Circuit Shapes 8

From the list with anchor points at the right side of the application, drag two anchor points from the first kind (input only) and one anchor point from the second kind (output only) and drop them inside the editor. Align the anchor points with the end points of the line segments created in the previous step.

Diagramming WPF Circuit Shapes 9

This will conclude the creation of the ‘AND Gate’ shape. You can test the shape in the preview diagram at the bottom of the screen.

Diagramming WPF Circuit Shapes 10

Save the shape library. Using the same approach, recreate the other circuit shapes from the image above. The following screenshot illustrates the complete library.

Diagramming WPF Circuit Shapes 11

The shape designer along with the shape library containing the circuit shapes can be downloaded from the link below:

Design Circuit Shapes

You are welcome to ask any questions about the WpfDiagram control at MindFusion discussion board or per e-mail at support@mindfusion.eu.

Click here here to visit the official page of the control.

We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.

MindFusion Chart Control for WinForms, V4.0 Beta

MindFusion is proud to present you the beta version of Charting for WinForms, V4.0. MindFusion has entirely redesigned the control to create the most agile, lean and smart charting tool on the market. Below is a brief synopsis of the new chart for WinForms component.

New data model
Data that should be drawn in charts is read through an interface called Series, whose instances can be assigned to the Series properties of Chart and SeriesRenderer classes. You could implement this interface in your own model classes to avoid duplicating data. The library includes several pre-defined series classes that let you specify data via IList or array objects. For example, BarSeries lets you specify lists of values, inner labels and top labels, and PointSeries lets you specify data as a list of points.

Radar chart with multiple series.

Radar chart with multiple series.

New rendering model
Chart graphics are drawn inside Plot components by SeriesRenderer -derived objects. Each plot can contain multiple series renderers from same or different types. For example, you can draw area, line and bar graphics in same plot by adding AreaRenderer, LineRenderer and BarRenderer objects to its SeriesRenderers collection. Concrete Chart classes automatically generate a series renderer of appropriate type for their Series.

Dashboard
The Dashboard control can contain multiple plots, axes, legends, images, gauges and text blocks arranged in dynamic layout. Individual components can be added to dashboard’s default RootPanel or LayoutPanel containers, or for more complex layouts add intermediary panels such as GridPanel and StackPanel to the default ones.

The new WinForms Chart  has a built-in dashboard control.

The new WinForms Chart has a built-in dashboard control.

Print and export
The Dashboard control and Chart controls that derive from it expose Print and PrintPreview methods for printing on paper. Call the ExportImage and CreateImage methods to generate bitmap image of the dashboard. The ExportPdf method exports the chart to a PDF (Portable Document Format) file. The ExportSvg method exports the chart to an SVG (Scalable Vector Graphics) file.

Styling
Values of appearance properties can come from several places in the component hierarchy. SeriesRenderer -derived objects can use attributes from their local SeriesStyle, from plot’s SeriesStyle, or from the *Series properties in current Theme. Component classes use either their local properties or ones defined in the theme. By default, appearance properties in SeriesRenderer and Component classes have null values, which makes the drawing code use values from the theme.

You can download the beta version directly from the link below. The archive file contains the control’s libraries, samples in C# and documentation.

Download Chart for WinForms, V4.0 Beta Version

Your feedback is valuable for us. Please use the forum or e-mail support@mindfusion.eu. to share your opinion, ask questions or submit a problem.

About Chart for WinForms: This is a smart WinForms dashboard control that lets you add the perfect chart or gauge to your application in a few easy steps. The control provides an elegant data model, which supports equally well arrays, xml, any .NET data source, lists or any other data model class, that you create by implementing the Series interface.

MindFusion WinForms Chart boasts an innovative rendering model, where each chart graphics is drawn by its own SeriesRenderer on a Plot. Each Plot supports unlimited number of chart or gauge series of any type. Plots, together with axes, legends, gauges, images, and text blocks can be combined in a Dashboard with the built-in dashboard control. Styling the chart is done on various levels – from appearance properties in each SeriesRenderer to more general settings in the Component classes. The control supports themes and comes with a set of stylish themes, which you can customize as you wish or create new ones from scratch.

Persisting the chart is possible in several ways – printing, export to PDF or to Svg images – all of them performed with a single method call.

The newly designed chart control is offered with unchanged prices and license scheme – check it here.

A Monthly Calendar in Java With Events and Recurring Appointments

This is a step-by-step guide that teaches you how to:

  • Setup the MindFusion Scheduler for Java library to display a single
    month calendar.
  • Attach and handle an event when the user clicks a calendar cell.
  • Create and setup recurrent events/appointments.
  • Perform custom drawing on a specific cell.

The sample builds a monthly calendar, which responds to a user click on a calendar cell by creating a recurrent appointment. The appointment is repeated on each subsequent day of the week for unlimited number of months.

When the user selects a given calendar cell (the 6th day of the month), a special icon appears. The icon is rendered using custom drawing.

Note: In this tutorial we use the words “appointment” and “event” interchangeably. Let’s start:

1. How to Setup the Calendar

All packages of the calendar are included in a single *.jar file – JPlanner.jar In our sample we will reference the following packages:

import com.mindfusion.common.*;
import com.mindfusion.common.Rectangle;
import com.mindfusion.drawing.*;
import com.mindfusion.drawing.awt.AwtImage;
import com.mindfusion.scheduling.*;
import com.mindfusion.scheduling.awt.*;
import com.mindfusion.scheduling.model.*;

For detailed reference about the packages and the classes of the schedule library check the online help.

Here are the first settings for our schedule:

  calendar = new AwtCalendar();
  calendar.beginInit();
  //set the current time
  calendar.setCurrentTime(DateTime.now());
  DateTime today = DateTime.today();
  //set the current date
  calendar.setDate(today);
  // Select the current date
  calendar.getSelection().set(DateTime.today());

We create a new calendar and signal that initialization starts. The time and date shown at the application start are the current date and time. We also select the cell with the current date.

Let’s make the calendar show exactly one month:

calendar.setCurrentView(CalendarView.SingleMonth);

By default each cell in a single month view has its header size set to 0, which makes the current date show in the center of the cell. As a consequence any events in the cell won’t have space to be rendered.

Java Scheduler: the header takes all the cell's height

Java Scheduler: the header takes all the cell’s height

Since we plan to create appointments on user click, we must push the header to the top and free cell space for drawing the events. This is very easy to do, just set:

calendar.getMonthSettings().getDaySettings().setHeaderSize(20);

Now the header is 20 px. and the rest will be for our appointments.

Java Scheduler: the header is 20px.

Java Scheduler: the header is 20px.

For now we are ready initializing the calendar.

calendar.endInit();

2. Handling User Clicks.

User clicks are handled with the dateClick event. We need an instance of the CalendarAdapter and there we associate the dateClick event with a method – onDateClicked. The event is fired when a date is selected.

 calendar.addCalendarListener(new CalendarAdapter(){
            public void dateClick(ResourceDateEvent e) {
                onDateClicked(e);
            }

        });

3. Create an Appointment and a Recurrence.

The first part of our event handler method is:

protected void onDateClicked(ResourceDateEvent e) {

    int dayIndex = e.getDate().getDayOfWeek();

    Appointment item = new Appointment();
    item.setStartTime(e.getDate());
    item.setEndTime(e.getDate());
    item.setHeaderText(events[dayIndex]);
    item.getStyle().setBrush(brushes[dayIndex]);

Here we create an Appointment and set its start and end date to the date which was clicked. The ResourceDateEvent keeps data about the date, the resource, if any and other useful information. The header text is the text, which will be rendered at the appointment. The style object contains appearance data for the cell and we use the setBrush
method to change the background of the appointment.

The second part of the method creates the Recurrence object:

      recurrence = new Recurrence();
      recurrence.setPattern(RecurrencePattern.Weekly);
      recurrence.setDaysOfWeek(getDayOfWeek(dayIndex));
      recurrence.setStartDate(e.getDate());
      recurrence.setRecurrenceEnd(RecurrenceEnd.Never);
      item.setRecurrence(recurrence);

The recurrence is once a week. There’s additional work to be done when we set the day of the week with setDaysOfWeek. The method accepts as an argument one of the DaysOfWeek enumeration values and we have to convert the index of the day to such value.

private int getDayOfWeek ( int i ) {

        switch (i) {
            case 1:
                return DaysOfWeek.Monday;
            case 2:
                return DaysOfWeek.Tuesday;
            case 3:
                return DaysOfWeek.Wednesday;
            case 4:
                return DaysOfWeek.Thursday;
            case 5:
                return DaysOfWeek.Friday;
            case 6:
                return DaysOfWeek.Saturday;
        }

        return DaysOfWeek.Sunday;

    }

Finally, let’s add the item with the recurrence pattern to the schedule items collection:

 calendar.getSchedule().getItems().add(item);

4. Custom Drawing a Cell’s Header

The last thing that needs to be done is to draw the icon on the special 6th day of each month. We will perform item drawing and we add to the calendar initialization code this line:

 calendar.setCustomDraw(CustomDrawElements.CalendarItem);

Now we are ready to handle the draw event:

   //add a listener for custom draw
       calendar.addCalendarListener(new CalendarAdapter()
        {
            @Override()
            public void draw(DrawEvent e) {
                onDraw(e);
            }
        });

Below is the first part of the handler method:

 private void onDraw(DrawEvent e)
    {
 if(e.getDate().getDay() == 6 )
            {
                java.awt.Image img = null;

                try {
                    // Read the image file from an input stream
                    InputStream is = new BufferedInputStream(
                            new FileInputStream("../cake.png"));
                    img = ImageIO.read(is);

                } catch (IOException ioe) {
                }

Here we read an image from an InputStream. The calendar method for drawing images requires mindfusion.scheduling.AwtImage and we must convert the java image:

AwtImage awtImage = new AwtImage(img);

Then we get the bounds of the drawing area and render the image:

   //gets the bounds of the drawing area
    Rectangle r = e.getBounds();
             
   //draw the image
   e.getGraphics().drawImage(awtImage, e.getBounds().getLeft(), e.getBounds().getTop(), 32, 32);

 }

The image is 32 x 32 pixels and gets clipped in the appointment.

Java Scheduler: the appointment's height is not enough.

Java Scheduler: the appointment’s height is not enough.

We’ll have to resize the item header to give it more space:

calendar.getItemSettings().setSize(32);

And now everything works just fine:

MindFusion Java Calendar: Month View with Events

MindFusion Java Calendar: Month View with Events

The sample is available for download from here:

Monthly Calendar in Java with Recurrent Appointments and Events

About Scheduling for Java Swing: A programming class library written entirely in Java that lets you build the most sophisticated schedules, calendars and task managers fast and easy. The component boasts a comprehensive feature set that includes custom-typed events, undo/redo functionality, scrolling, tool tips and much more. You can choose among six view styles, which are easy to change and customize. The appearance of each schedule is completely customizable and supports themes, user-assigned mouse cursors and a variety of font, pen and brush options.

A detailed list with the features of the tool is available at the Scheduling for Java Swing features page. The trial version includes a variety of samples and you have plenty of sample code to study. Online documentation with useful tutorials is also available.

The library is royalty-free, source-code is also available. You can see a list of the current prices here. Check the discount page for a list of the available discounts.