BasicPI

This diagram is absolute nonsence, but it is actually valid. like you can write rubbish code in any language you can do s with diagrams as well. I think the compiler will pick on this due to parameter conflicts, but yet again – these are made by you. This was just a mock up I made to test connection points – the objective with connection points are to control the visual aspect of lines to make diagrams look prettier (more readable) if needed. I am more interested in giving the programmer opportunities than fixating on rules. You have to learn the tool and know what your doing as in any other tool.

Just testing the diagrams in BSA and realizing (yet again) that the mini-editor I was happy with for small description texts will be a big failure on editing source code. Modern source code editors have so much features that I miss in the mini editor + the editor is not easy to use for this purpose at all. The objective here is to write small sniplets of code in assign blocks – and while it is doable  “as is” it also has several issues that needs to be addressed.

1 – I need an editor with syntax support and capability to show the user if code written is correct + add auto-completion and a JIT Compiler.

2 – The editor probably need to be inline – meaning you edit in the “Assign” box and not in the Property Editor.

3 – I have a Assign box and a PLD Source Code box that basically are the same, so I will add language selection and let PScript be default.

4 – I also need a full size editor in separate tabs allowing the user to show only description in the box and edit content in a proper source code editor.

5 – C# users would like to use Visual Studio for editing/debugging C# code etc.

The capability to integrate with manually written code is one of the most important features in BSA and critical to it’s success. But, a full source code editor is a formidable task to take on so I have to find a solution for the short term that is ok’ish. Truth been said the current editor will be ok’ich with a few modifications for smaller code snippets if I can jump into a proper editor for larger work. But, this area of BSA needs attention.

Keep in mind that BSA only have one objective – productivity for software developers like myself.

I only lack Legend and Plot line component to make a plot as I made the rest as part of the Linear gauge. Drawing a line on screen is easy. Drawing a line with thousands of points at 60 FPS (Frames per sec) is not easy. The issue is that data arrives at the CPU and needs to be transferred to something you feed the GPU. In this case data transfer becomes the bottleneck. You can find numerous plots on internet presenting themselves as “high performance” on WPF, but in reality they are not. I will make a “slow” plot that can handle a decent resolution with 10 FPS because that is easy and in most cases all we need. But, I really want an actual high resolution/high performance line plot capable of being used as an Oscilloscope as well. The later will however take some time and research, so it has to wait for now.

The example above is real with except for the lines that are added using PowerPoint for the illustration. In this case I add 7 components – 3 scales, 2 label lists, and 2 line plots. The background on the plots will be removed so you can visualize multiple series with separate scales and make your own custom plots easy. I will add a standard plot, but it is more important that you can make your own custom ones very easy and combine in other users controls for interaction customized to your own needs.

Picture from testing Linear Gauges and playing around…

I won’t recommend making a bar plot the way I did over to left, but funny that I can. Just playing around with various gauge setting to test. This one actually took a bit of time due to all the options included – and still I haven’t covered a fraction of what you can do by assembling your own by grouping individual controls inside a HMI User Control.

The work I do on HMI have two sides to it. One is the C# SDK that contains the controls, the other is BSA designer for the controls – no point being able to draw them on screen unless I can code them in user apps. The SDK part will need to be repeated for every target platform, so it is a bit of work.

Beta testing will start early next year – it is still a bit of work left, but I do see light in the tunnel…

This shows a simplified BSA Workflow. So far I have mostly blogged about the BSA Designer that will read and write a project repository – or more exact an xml file. The content of this file is used by BSA Compiler to generate Errors or Target Source Code. Source Code is generated towards a target SDK that is a pre-made library for the selected target. These can be used by 3rd party compilers to generate executable images.

Errors are feeded back to BSA Designer so that the user can correct them. BSA Compiler will allow you to design and make errors, but it will not create source code unless errors are fixed and the repository support executable accuracy. The rationale behind this is that larger systems needs to be drafted before it is worth adding all details, so the designer will never stop you, but the compiler will. I am considering a JIT style compiler so that errors can be listed as you design, but I will look into that.

BSA Debugger connect directly to the executable using easyIPC and receive feedback as the application executes. This will allow us to monitor or run single step execution on multiple modules simultaneously. Keep in mind that a BSA System might be multiple executables running on Windows, Linux, embedded platforms etc.

I have plenty of loose ends in the Designer (Work todo), but Compiler and SDK are on the table next. I need to get started on these because the design/implementation will drive the last part of the designer – speciall properties.

Some time ago I planned to focus on HMI as first out. That has not changed, but HMI dragged a lot of other stuff with it. My first target is Windows C#/WPF for natural reasons since that is what I use for BSA itself. My 2nd and 3rd target will be STM32 and Qt/QML. I already have  half-made SDK in QML. Part of the SDK’s are the gauges I curently work on.

BSA is generic in nature allowing you to make whatever system you like, but I will focus a lot on real-time, distributed systems and advanced HMI.

This picture shows two Linear Gauges created as User Controls. I have not added the linear slider yet, but these are examples of assembling individual controls as a new user controls. The User Control itself is just a shaped background and all HMI components over that will be part of the user control. In this case I add 2 x Linear Bars, 1 x Scale and 1 x Linear Labels component.

The user control draft an area and this is your design area. You draw the rest of the components on this using the designer or parameters and the content will scale as the user control scale.

Once added to a diagram you will see that UserControl1 and UserControl2 also are added to the left Toolbar and can be re-used straight away. As mentioned before you need to design properties, methods and events for your control as well – this is just the visual design part. These exact gauges are early examples of the build-in Linear Gauge.

As for the Linear gauges – what you see here is just a demo of what they can do. As with Circular components (or any HMI component) you can use the visual designer and fine-tune using the grid system or you can switch to parameterized design. The later allows you to control position, width, height through manually entered parameters for finer control. In the example above you see that distance between individual components are grid10 . The designer also support no-grid or grid5, but some of these details are just better being handled though parameters – it’s up to you.

This temp gauge is just another example. This just shows how capable this system is because I assembled this component in a few seconds while writing this blog. This is five individual components added on screen as a drawing and to change temperature youjust change the height of one of them. Gauges are all about visual effects. I actually surpriced myself with this one 🙂

This took me < 2 min to set up and is just a simple Modbus demo.

1. ComLink1 is a serial port connected to com3 in this case. The component has an auto option that allows it to always be connected that I use in this case.
2. ModbusTable1 define parts of a Modbus map – in this case a single float value located at register 30000. Ths setting also specify base 0 and that 30000 is 0.
3. MyForm is an app as simple as you get with my new Circular Gauge on it. The only detail I am not happy with here is that the name “MyGauge” is a bit hidden.
4. The diagram at bottom start with a timer triggering once per sec calling a Select that read ModbusTable1 using ComLink1. If that works I call an Assign that update the value of MyGauge.

That’s it. If you pay attention you will see that every detail I need to code this application is on the screen.

This shows the Standard Circular Gauge. Starting from left I only show the needle and add component by component – in this case by enabling a checkbox. Background is made half transparent, something all colors support. This is a standard Draw, Drop & Use gauge in case yoiu don’t want the extra fuzz of creating your own custom one. Colors and Needle types, Slider button type as well as range and angles can be adjusted in the designer. The standard gauge is quite capable. This one ends up with a lot of properties, but it is designed to be a srtaight forward, easy to use Gauge.

This is also the standard gauge – just different angle setting and background removed on 4 of the gaugses.

This is just another example – still the standard gauge – three of them.

The last circular component I want to write about is the Slider – a circular slider. I will build Linear Gauge later and after that I want to do the Real Time Plot – all build component by component.

A Circuar Slider is basically only a needle with a larger Inner-/Outer- Radius formed as a small button rather than a needle + it takes user interface to move the button in a circle. This example show an pointer (Orange triangle) that can be used to set values – threshold values or limits etc. You click on the button and drag it. Me in person I am not that big fan of these sliders because I preffer setting values using edit fields. Doing the same with a visual component can be a bit fiddly to get the value you want – but, they have their usage and is easy to make.

One of the challenges I have is that it is a big difference from making a library component and making a BSA supported component. Take Width/Hight/Center/Radius of a circular gauge as an example – this is straight forward in your own code, but doing the same on a visual designer is challenging because the visual designer snap to grids and it can be difficult/impossible to align circular components with diferent radius correctly. The example above is a bit made up, but it illustrate the problem and this is a designer only problem.

The easy solution is to implement a “UseParameters” property forcing the controls to use fixed property values for a reference design. This works – the difference is that you then use a common fixed coordinate reference and ignore size markers in the designer. Dealing with circular designs I find this to be a must.

To make this scalable I need to track design width/height and compute the difference to actual width/height as we draw the components. It is important that we scale by drawing with re-computed coordinates and don’t attempt a zoom that will give a similar, but fuzzy result.

To make it easy to align coordinates I also show reference coordinates for parameterized designs. This challenge was very obvious with circular components that needs to fit together, but I also wonder if I should implement this all over – parameterized design that can override the visual click&drag designer? To switch off the grid will only make things worse as it becomes very difficult to align anything. I already have two grid sizes to assist on this, but parameterized design seems as a savior for those situations where we will struggle with the grid.