However, between the JSX syntax, component lifecycle, and state management, learning to use React effectively sometimes feels like learning a language in and of itself. 

If you’re getting your feet wet in React, here are some of DMC’s top tips for making components.

1. Make Lots of Components

React’s component-based structure allows very convenient segmentation of different portions of a user interface. However, it can often be unclear where one component should end and where another component should begin. If you were to recreate this page in React, would the Categories listing be a component or just a portion of a component for the whole page? Would each section be a component? Would each link?

Often, large components that have a lot of different functionality mixed is a sign of a newer React developer. Just as with object-oriented code, breaking down classes or functions to their essentials and handing off the specifics to helpers makes the code a lot more readable and easier to maintain. 

In our experience, if you’re asking the question, “Should this be a separate component?” the answer is probably yes.

Regarding hard and fast rules, the following guidelines have served us well. You should pull UI code into a unique component if:

• You want to use the same (or a parameterized version of the same) element elsewhere in your application
• You want each item in a list of data to have a similar display (in other words, you want to map a list of data to it)
• It forms its own functionally or visually distinct section or subsection

For example, you could implement the Categories sidebar on this site doing something similar to the following. This approach is hard to read, debug, and maintain – splitting each UI section in a map into its separate components would be better.

render() {
    return (
        <div>
            <h1>Categories</h1>
            {this.props.categories.map(category => (
                <div>
                    <h2>{category.name}</h2>
                    <ul>
                        {category.subCategories.map(subCategory => (
                            <div>
                                <li className="bullet">{subCategory.name}</li>
                                {subCategory.subSubCategories.map(subSubCategory => (
                                    <div>
                                        <li className="indented-bullet">{subSubCategory}</li>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

render() {
    return (
        <div>
            <h1>Categories</h1>
            {this.props.categories.map(category => (
                <div>
                    <h2>{category.name}</h2>
                    <ul>
                        {category.subCategories.map(subCategory => (
                            <div>
                                <li className="bullet">{subCategory.name}</li>
                                {subCategory.subSubCategories.map(subSubCategory => (
                                    <div>
                                        <li className="indented-bullet">{subSubCategory}</li>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

2. Make Lots of Functional Components

As you make more components, you’ll need to lift state up by lifting shared state up to the closest common ancestor. Sometimes, you’ll only need to pull one value out of a component’s state and leave it otherwise unchanged. But often, a component that doesn’t have any state remains. If this is the case, it is an excellent opportunity to convert to functional components.

We find that functional components (components which are used as a function call rather than as a class instance) are often more concise and better broken up than components that rely heavily on state. Functional components are also simple to debug. It’s clear what to render on the page based on what’s passed into the component.  

As you begin to convert your components over to functional versions, you may notice you have separate components for data management and display. Dividing components into two categories is a whole different way of thinking, best explained by Dan Abramov.

3. Consider a State Management Library

As your state begins to lift higher and higher in your application, you will flow through Container components to drive Presentational components. You may start to notice that a portion of the component state drives the display of another component nested deeply within its children components.

If the state of your application is already far from the display it drives, then it’s likely time to consider a state management library.

State management libraries allow you to interact with the (likely centrally-held) state of your application consistently and predictably. It minimizes the need to pass so many props as well as to update functions between components. Redux is probably the most popular option for managing state in React applications, but there are many options out there (including MobX and Unstated).

Integrating a state management library can simplify complex interactions between states for different components, but tends to produce more ‘boiler-plate’ code.

4. Make Some Async Components

On the other hand, if your app is comparatively small or you don’t want the overhead of a component management library, you may end up using the component lifecycle methods to give a component asynchronous functionality. The component can then interact with some external data source on its own.

Let’s say that we’re building a sidebar for a grid of houses. Whenever a user clicks on the row for the house, the sidebar fetches the data for that house from some external source and displays it. Here’s what a container component for that might look like:

interface State {
    house?: House;
}

interface Props {
    houseId: number;
}

class HouseSidebarContainer extends React.Component<Props, State> {
    constructor (props: Props) {
        super(props);
        this.state = {
        };

        this.loadHouse = this.loadHouse.bind(this);
    }

    async componentDidMount(){
        await this.loadHouse(this.props.houseId);
    }

    async componentDidUpdate(prevProps: Props){
        if (prevProps.houseId !== this.props.houseId) {
            await this.loadHouse(this.props.houseId);
        }
    }

    render () {
        return this.state.house 
            ? <HouseDisplay {...house} />
            : <LoadingSpinner />;
    }

    async loadHouse(houseId: number) {
        let houseData = await fetchHouse(houseId);
        if (houseData) {
            this.setState({house: houseData})
        }
    }
}

interface State {
    house?: House;
}

interface Props {
    houseId: number;
}

class HouseSidebarContainer extends React.Component<Props, State> {
    constructor (props: Props) {
        super(props);
        this.state = {
        };

        this.loadHouse = this.loadHouse.bind(this);
    }

    async componentDidMount(){
        await this.loadHouse(this.props.houseId);
    }

    async componentDidUpdate(prevProps: Props){
        if (prevProps.houseId !== this.props.houseId) {
            await this.loadHouse(this.props.houseId);
        }
    }

    render () {
        return this.state.house 
            ? <HouseDisplay {...house} />
            : <LoadingSpinner />;
    }

    async loadHouse(houseId: number) {
        let houseData = await fetchHouse(houseId);
        if (houseData) {
            this.setState({house: houseData})
        }
    }
}

The significant thing to recognize is that the render function cannot be asynchronous, so any asynchronous logic must be handled outside of the render function and updated in state.

The other thing to remember is that changing the props (in this case, the viewed house) doesn’t trigger a remount of the component, and must be watched manually by the componentDidUpdate function.

5. Use Other People’s Components

Now that you’re getting pretty good at making your own React components, it’s time to avoid it as much as possible! I’m joking, but it’s important not to spend too much of your time on components that are common to a lot of applications.

Simple items, like breadcrumbs, don’t take too long to implement, but that time can pile up when you implement each one yourself. More complex items, like a datepicker, may take substantial development effort to implement. The good news is that someone has done this before, and you can take advantage of their experience. The bad news is that it can be challenging to identify the best implementation out there, and using a component that’s buggy or has a poor API can cost you as much time as implementing it yourself.

This time loss is especially true for simple components: it may take just as long to fit in a simple third-party component with options that don’t quite fit as it does to write the component yourself. In such instances, larger sets of components with similar interfaces (a component library) can speed up development.

When you start working on a new app, it’s worth your time to investigate using a component library, which will allow you to use a wide set of components with similar interfaces and uniform styles. There’s a wide variety out there, each with its pros and cons. 

Based on our experience, we recommend picking a library that already looks similar to the app you want to build. While most libraries offer some way to customize their styling, if you have to make a lot of styling changes to each component, you haven’t saved much time over implementing your own components. Component libraries we’ve enjoyed recently include React Material-UI, Semantic UI, and Reactstrap.

Even if you pick the best possible library for your project, it’s unlikely to contain every single UI component you need. You’re likely to need to pick up at least one or two components a la carte, like a chart, datepicker, or a treeview.

Just like when using any external dependency, you’ll want to make sure that whatever you pick is being actively used and maintained, that the API makes sense to you, and that the license fits the needs of your application.

Learn more about DMC’s Application Development Services

The post 5 Great Ways to Get Started with React Components appeared first on DMC, Inc..

Web-based Control and Monitoring

The most appealing aspect of Beckhoff’s platform is that it leverages the internet to allow end users to control and monitor their PLCs from anywhere. Interfacing with industrial controllers via the internet is a common request for DMC, and the TwinCAT HMI makes this easier than ever before with integrated server- and client-side development connecting easily to the underlying PLC access. The key benefit is that a web-based HMI can be accessed from any number of different clients – a traditional monitor screen nearby the device being controlled, a tablet carried around the area by a supervisor, or even a mobile phone halfway around the world. The HMI includes a responsive grid designed to facilitate development for multiple device sizes.

WYSIWYG Web Page Design

As any web developer can tell you, managing the location and arrangement of content on the page can be one of the most time-consuming aspects to do manually. Development for TwinCAT gets around these issues using a What You See Is What You Get style editor, paired with other features to make life easy for developers. Selecting and arranging components is as simple as dragging them in from a menu. The HMI features dozens of prebuilt components, including commonly used displays and controls, as well as advanced charts. We walked through a demo project using several different charts, which update live when linked with the PLC data, making it very easy to display live system data of all sorts to your end users.

Development in Visual Studio

This is a good point to bring up the ease of development afforded by the IDE. Development for the HMI is integrated directly into Visual Studio, which is very familiar to DMC from our extensive .NET development. The Visual Studio pane and menu system’s familiarity makes navigation quick, and Beckhoff’s custom screens are also very easy to use. Integrating development into a widely used and well-regarded editor allows engineers to develop a simple web-based HMIs for their PLCs without requiring extensive knowledge of web technologies. However, developers familiar with web technologies (like DMC) still have access to the generated results, allowing us to tailor a solution to the exact needs of our clients.

Easy Extension and Customization

As mentioned, Beckhoff’s existing framework controls allow for rapid development, especially for simple applications. However, the HMI is also very extensible, allowing for flexible and very custom solutions. DMC took an additional course in designing extensions for custom applications. The extensibility allows for custom Javascript interactive controls, in the case that the provided components don’t quite fit the bill. Further, the HMI allows for custom server controls in C#, which allows us to develop connect to any system, use any library, or employ any custom code from our .NET expertise. The flexibility of these extensions, combined with the ease of creating a simple solution, makes us very excited to work on projects with this new HMI.

Thanks to Zachary Daulton and co. at Beckhoff for hosting us and giving us a preview of the software!

The post DMC Attends Inaugural TwinCAT HMI Training appeared first on DMC, Inc..

1. Passing props
 

Probably the most common usage of the spread operator in a React app is in passing props down to a child component. So long as the object you’re spreading includes all the properties the child component requires, the child component will use those and ignore the extraneous ones.

This allows for much more concise code than breaking out each property that the child inherits from the parent. Note: we use Typescript in our applications, and these examples will use it as well for clarity.

interface LabeledButtonProps extends ButtonProps {
    labelText: string;
}

const LabeledButton = (props: LabeledButtonProps) => (
    <div>
        {props.labelText}
        <Button {...props} />
    </div>
);

interface LabeledButtonProps extends ButtonProps {
    labelText: string;
}

const LabeledButton = (props: LabeledButtonProps) => (
    <div>
        {props.labelText}
        <Button {...props} />
    </div>
);

2. Generating multiple component instances with common props
 

If you have multiple component instances with some attributes in common, and others which differ, it can be helpful to pull them out into one object which is referenced by all instances. For example, instead of the following:

render () {
    return (
        <div>
            <Button height={20} width={40} color="red" text="Press Here"/>
            <Button height={20} width={40} color="red" text="Or Here!"/>
            <Button height={20} width={40} color="red" text="(Even Here)"/>
        </div>
    );
}

render () {
    return (
        <div>
            <Button height={20} width={40} color="red" text="Press Here"/>
            <Button height={20} width={40} color="red" text="Or Here!"/>
            <Button height={20} width={40} color="red" text="(Even Here)"/>
        </div>
    );
}

You can instead abstract the common props:

render () {
    let commonButtonAttributes: PartialButtonProps = {
        height: 20, width: 40, color: 'red'
    }
    return (
        <div>
            <Button {...commonButtonAttributes} text="Press Here"/>
            <Button {...commonButtonAttributes} text="Or Here!"/>
            <Button {...commonButtonAttributes} text="(Even Here)"/>
        </div>
    );
}

render () {
    let commonButtonAttributes: PartialButtonProps = {
        height: 20, width: 40, color: 'red'
    }
    return (
        <div>
            <Button {...commonButtonAttributes} text="Press Here"/>
            <Button {...commonButtonAttributes} text="Or Here!"/>
            <Button {...commonButtonAttributes} text="(Even Here)"/>
        </div>
    );
}

Similarly, you can map a function which generates an instance of the component using these common props over an array of the unique elements (shown in example 4), which is preferable for longer or dynamic element lists.
 

3. Setting the state with dynamic key name
 

Leaving our button for a moment, another place where we frequently use the spread operator is in functions to handle change events for forms. We typically use the same function to handle changes for all fields in a form, to minimize code repetition.

The following syntax allows setting a property in the state with a dynamic key name while maintaining the other properties previously in the state:

handleChange(name: string, value: string | number) {
    this.setState({ ...this.state, [name]: value });
}

handleChange(name: string, value: string | number) {
    this.setState({ ...this.state, [name]: value });
}

As a note, this pattern is not necessary if using React without using Typescript. This is also a good point to emphasize the importance of order when using the spread operator. I like to think of the spread operator as literally spreading out (in order) the items in an object or list.

If you’re trying to overwrite an existing property, as I am in this case, it’s important to make sure it’s after the spread operator, or the existing property will overwrite your new value!
 

4. Adding a single item to the start or the end of an array
 

The spread operator can also be used working with arrays, which can be very useful in a React application. One situation we encounter frequently is adding an element to an array which is subsequently mapped and rendered. Doing so with the spread operator is simpler and cleaner than doing so with Javascript’s push() or concat().

For example, if our button list always needs to include a cancel button, we could do the following:

const ButtonList = (buttonTexts: string[]) =>
    [...buttonTexts, 'Cancel'].map((buttonText, index) =>
        <Button
            key={index}
            text={buttonText}
            {...commonButtonAttributes}
        />
    );

const ButtonList = (buttonTexts: string[]) =>
    [...buttonTexts, 'Cancel'].map((buttonText, index) =>
        <Button
            key={index}
            text={buttonText}
            {...commonButtonAttributes}
        />
    );

5. Stripping properties using destructuring
 

Our final favorite use of the spread operator is to strip properties from an existing object to make a new object without setting properties individually. We’ve found this most useful when making calls to an API, when we want to be careful to send only the data we intend.

Specifying all the properties we want on the new object can be quite verbose:

let locationUpdate = {
    name: this.state.name,
    address: this.state.address,
    locationId: this.state.locationId,
    etc…
}

let locationUpdate = {
    name: this.state.name,
    address: this.state.address,
    locationId: this.state.locationId,
    etc…
}

Instead, by using destructuring with the rest syntax, we can specify the properties we want to exclude from the new object.

let { isLoading, availableLocations, ...locationUpdate } = this.state;

let { isLoading, availableLocations, ...locationUpdate } = this.state;

Conclusion

Javascript’s spread operator is a powerful tool to minimize boilerplate in a React application and make it easy to read and maintain in addition to its natural performance benefits.

If you’re interested in working with DMC on a React application, feel free to contact us.

The post 5 Great Uses of the Spread Operator in a React App appeared first on DMC, Inc..

In this post, I will walk through how to create a simple frame-accurate video scrubber for video segments in a browser client using the HTML5 video element.

The inspiration for this scrubber implementation comes from this Github post: Frame Accurate Scrubbing, which describes a method that would extract frames on the backend and serve them up to a client for accurate scrubbing.

There are many great open-source packages that make for a simple frame grabbing implementation on the backend, and most of these packages rely on FFMPEG to decode video. 

Since GPL distributes FFmpeg, this is an approach that can be incompatible with projects that aren’t destined to be open source or also distributed under GPL. By using the HTML5 video element to extract frames, we can avoid FFPMEG’s viral GPL license as well as the hassle of writing the video decoder ourselves.

Environment

The examples below show the JSX markup of the development we did in React JS.

Prerequisites

This implementation requires a known framerate for the video you want to use. Additionally, I did this development using a Chrome browser, which supports the MP4 video format that I was using. Make sure that your browser supports your desired video format for HTML5 video.

With that out of the way, let’s get started!

HTML5 Video Element as Video Decoder

Create an HTML5 Video component on your page, but keep it hidden. Store a reference to this video player. Also, create a div to hold the extracted frames.

render() {
  return (
    <div className="video-scrubber">
      <video
        src={"video.mp4"}
        muted={true}
        hidden={true}
        controls={false}        
        onSeeked={this.extractFrame} 
        ref={(element) => { this.videoElement = element }}>
      </video>

      <div className="video-scrubber-frame-container"  
        ref={(element) => this.frameContainerElement = element}>
      </div>  
    </div>
  )    
}

render() {
  return (
    <div className="video-scrubber">
      <video
        src={"video.mp4"}
        muted={true}
        hidden={true}
        controls={false}        
        onSeeked={this.extractFrame} 
        ref={(element) => { this.videoElement = element }}>
      </video>

      <div className="video-scrubber-frame-container"  
        ref={(element) => this.frameContainerElement = element}>
      </div>  
    </div>
  )    
}

Create canvas representations of the video frames. Seek to one frame at a time using the known framerate of the video. The video component’s onSeeked event triggers the extractFrame function that draws the current video frame onto a canvas element.

loadVideoFrames = () => {
  // Exit loop if desired number of frames have been extracted 
  if (this.frames.length >= frameCount){
    this.setState({
      visibleFrame = 0 
    })

    // Append all canvases to container div
    this.frames.forEach((frame) => {this.frameContainerElement.appendChild(frame)})
    return
  }

  // If extraction hasn’t started, set desired time for first frame 
  if (this.frames.length === 0){
    this.requestedTime = 0
  }
  else{
    this.requestedTime = this.requestedTime + this.frameTimestep
  }

  // Send seek request to video player for the next frame.
  this.videoElement.currentTime = this.requestedTime
}
 
 
extractFrame = () => {
  // Create DOM canvas object
  var canvas = document.createElement('canvas')
  canvas.className = "video-scrubber-frame"
  canvas.height = videoHeight
  canvas.width = videoWidth
      
  // Copy current frame to canvas
  var context = canvas.getContext('2d');
  context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);  
  this.frames.push(canvas)

  //  Load the next frame
  loadVideoFrames()
}

loadVideoFrames = () => {
  // Exit loop if desired number of frames have been extracted 
  if (this.frames.length >= frameCount){
    this.setState({
      visibleFrame = 0 
    })

    // Append all canvases to container div
    this.frames.forEach((frame) => {this.frameContainerElement.appendChild(frame)})
    return
  }

  // If extraction hasn’t started, set desired time for first frame 
  if (this.frames.length === 0){
    this.requestedTime = 0
  }
  else{
    this.requestedTime = this.requestedTime + this.frameTimestep
  }

  // Send seek request to video player for the next frame.
  this.videoElement.currentTime = this.requestedTime
}
 
 
extractFrame = () => {
  // Create DOM canvas object
  var canvas = document.createElement('canvas')
  canvas.className = "video-scrubber-frame"
  canvas.height = videoHeight
  canvas.width = videoWidth
      
  // Copy current frame to canvas
  var context = canvas.getContext('2d');
  context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);  
  this.frames.push(canvas)

  //  Load the next frame
  loadVideoFrames()
}

Define styling that will layer the canvases on top of each other.

.video-scrubber-frame-container {
    position: relative;
}

.video-scrubber-frame {
    left: 0;
    position: absolute;
    top: 0;
}

.video-scrubber-frame-container {
    position: relative;
}

.video-scrubber-frame {
    left: 0;
    position: absolute;
    top: 0;
}

Implement Scrubbing Functionality

Add mouse event listeners to handle scrubbing action. Here we create another canvas that will sit on top of all our frames to attach our listeners to.

// Create mouseover canvas
var mouseEventCanvas = document.createElement('canvas')

// Set canvas attributes
mouseEventCanvas.className = "video-scrubber-frame"
mouseEventCanvas.height = videoHeight
mouseEventCanvas.width = videoWidth
mouseEventCanvas.onmousemove = this.onMouseDown
mouseEventCanvas.onmousedown = this.onMouseDown

// We set the z-index to be greater than that of the other frames
mouseEventCanvas.style['z-index'] = 2

// Append to document
this.frameContainerElement.appendChild(mouseEventCanvas)

// Create mouseover canvas
var mouseEventCanvas = document.createElement('canvas')

// Set canvas attributes
mouseEventCanvas.className = "video-scrubber-frame"
mouseEventCanvas.height = videoHeight
mouseEventCanvas.width = videoWidth
mouseEventCanvas.onmousemove = this.onMouseDown
mouseEventCanvas.onmousedown = this.onMouseDown

// We set the z-index to be greater than that of the other frames
mouseEventCanvas.style['z-index'] = 2

// Append to document
this.frameContainerElement.appendChild(mouseEventCanvas)

Toggle z-index of visible canvases according to mouse positioning over the frames. For our scrubber, we are listening for a mousedown event that moves on the frames. As a user drags their mouse across the frames, we toggle the visible frame value stored in our React component state.

onMouseDown = (event) => {
  // Bail early if we aren't clicking and dragging
  if (event.type === "mousemove" && event.buttons === 0) {
    return 
  }

  event.preventDefault()
  
  const frameRect = this.mouseEventCanvas.getBoundingClientRect()
  const x = event.clientX - frameRect.left
  const y = event.clientY - frameRect.top

  if (event.buttons === 1){ // Left button down
    var frameRequested = Math.floor((x / frameRect.width) 
* this.fullResolutionFrames.length)      
    if (frameRequested !== this.state.visibleFrame && frameRequested >= 0){
      this.setState({
        visibleFrame: frameRequested,
      })
    }
  }
}

onMouseDown = (event) => {
  // Bail early if we aren't clicking and dragging
  if (event.type === "mousemove" && event.buttons === 0) {
    return 
  }

  event.preventDefault()
  
  const frameRect = this.mouseEventCanvas.getBoundingClientRect()
  const x = event.clientX - frameRect.left
  const y = event.clientY - frameRect.top

  if (event.buttons === 1){ // Left button down
    var frameRequested = Math.floor((x / frameRect.width) 
* this.fullResolutionFrames.length)      
    if (frameRequested !== this.state.visibleFrame && frameRequested >= 0){
      this.setState({
        visibleFrame: frameRequested,
      })
    }
  }
}

We check for a changed visibleFrame value in the React component lifecycle and change the z-indexes of the appropriate frames.

componentWillUpdate(nextProps, nextState){
  // set the visible frame
  if (nextState.visibleFrame !== this.state.visibleFrame){
    if (this.state.visibleFrame < this.frames.length){
      this.frames[this.state.visibleFrame].style['z-index'] = 0 
    }   
    if (nextState.visibleFrame < this.frames.length){   
      this.frames[nextState.visibleFrame].style['z-index'] = 1 
    }
  }
}

componentWillUpdate(nextProps, nextState){
  // set the visible frame
  if (nextState.visibleFrame !== this.state.visibleFrame){
    if (this.state.visibleFrame < this.frames.length){
      this.frames[this.state.visibleFrame].style['z-index'] = 0 
    }   
    if (nextState.visibleFrame < this.frames.length){   
      this.frames[nextState.visibleFrame].style['z-index'] = 1 
    }
  }
}

There you have it! A simple video scrubber in a client browser.

Learn more about DMC’s Web Application Development services.

The post Frame Accurate Video Scrubbing in the Client appeared first on DMC, Inc..

While working on a recent Windows application, DMC wanted to add an extra layer of security to our application by protecting our SQL CE database files with a password. Although the process of creating a “.SDF” file from an existing database is simple, there are a few additional steps that are required when adding password protection. 

After finding no good resources on this process anywhere on the internet, I decided to document the process here.

This walkthrough will use the SQL Server Compact Toolbox for Runtime 4.0 which you can download.

Step 1: Create an empty, password protected .SDF file

Right click on No SQL Compact Data Connections Found and select Add SQL Server Compact 4.0 Connection…

A small window will pop up where you will enter your desired password. After your password has been entered, click Create at the top of the window where you will name your new .SDF file. 

Finally, click Close at the bottom of the window in order for your new empty .SDF to be created.

Your password protected .SDF file will now appear on the left-hand side in the main window of the toolbox. 

Step 2: Export your existing SQL Server Database to a .SQLCE file.

Right click on SQL Server Compact Data Connections and select Script SQL Server Database Schema and Data…

A window will popup that requires you to enter information to connect to your existing SQL Server DB. 

Enter the server name and select the database name from the drop-down menu. 

Finally, click Ok and name your new .SQLCE file. 

In the next popup, select the tables from your existing database which you want to export by clicking the appropriate check boxes. This will vary based on your application. 

Step 3: Move the exported data into your new password protected SDF.

Next, right-click on your new password protected DB that has been created on the left side of the toolbox and select Open SQL Editor”. 

An editor will open up on the main part of the screen.

Select Open and navigate to the location of the .SQLCE file you just created.

Once this step is completed, you will see text commands opened in the main window. 

Click Execute and wait for this operation to complete. Once completed, you will be able to verify the operation was successful by expanding Tables in the left-hand side tree view and checking that the correct tables have been added.

SQL Server Database has now successfully been moved into a password protected .SDF file!

As a final note, when using this in your Windows application you must enter the .SDF’s password. Microsoft provides information about how to accomplish this. 

Learn more about DMC’s Custom Software & Hardware development services. 

The post Creating a Password Protected SDF File from an Existing SQL Database appeared first on DMC, Inc..

What the Heck is Docker?

Docker acts very much like VirtualBox or VMware, but stripped down and more single-purposed. It runs tiny Linux VMs that are “snapshots” of applications with all the setup already completed for you (Windows VMs are actually supported now, too). 

Why is Docker Useful?

Using Docker’s extensive repository of prebuilt images, one can really quickly and easily get a variety of applications running on their system. Without Docker, there’s usually a good amount of setup that must be done for any given application, such as WordPress or MySQL. With Docker, it only takes a few commands to get going. Beyond this, Docker can also be used to automate the setup/teardown of different software configurations – which is what we’ll be doing today.

Why use Docker for Development?

Developers work with a lot of different technologies, languages, and system configurations. If one were to install all of the various servers, databases, languages, runtimes, and applications on their host machine, there’s bound to be a conflict somewhere: a port being used by another application, resources being used when switching from one type of a development to another, etc. Since Docker is a self-contained environment, your host machine is not modified and things are much less likely to break because of the aforementioned issues.

Getting Started

Alright, enough questions! Let’s get started setting up Docker with WordPress and MySQL. This can aid in development because the container(s) we create can be shared between developers.

Depending on your host machine, the setup instructions for Docker vary. All of my development was using Linux (specifically Ubuntu MATE 16.04.2 LTS). 

1. First things first, install Docker. Docker’s documentation is quite good, so take a look and then continue on.
2. We’ll also be using something called Docker Compose which lets you easily setup and link multiple containers. Windows and Mac users should install Docker Toolbox, while Linux users should follow the instructions here.
3. Once that’s done, it’s smooth sailing. Create a directory where you want your WordPress and MySQL database to live. Create a file named docker-compose.yml and paste the following inside:

   version: '3'
   
   services:
      db:
        image: mysql:5.7
        volumes:
          - ./data/mysql:/var/lib/mysql
        ports:
          - "3306:3306"
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: wordpress
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wordpress
          MYSQL_PASSWORD: wordpress
   
      wordpress:
        depends_on:
          - db
        image: wordpress:latest
        volumes:
          - ./data/wordpress:/var/www/html
        ports:
          - "8000:80"
        restart: always
        environment:
          WORDPRESS_DB_HOST: db:3306
          WORDPRESS_DB_PASSWORD: wordpress
   

4. Save the file. This file describes the Docker images (mysql:5.7 and wordpress:latest) as well as where each of these images will store their data, and on what ports one can access them. 
5. Now let the magic happen. Open a terminal window where you created your docker-compose.yml file and type docker-compose up -d (the -d switch tells docker-compose to run in the background).
6. Open up a browser window, navigate to https://static.dmcinfo.com/ and you should be presented with the WordPress setup screen!
7. Congrats. You’ve just used Docker to setup a development environment that you can assemble and disassemble within minutes. Get hacking!

What’s Next?

Since this post was solely about setting up Docker for WordPress development, I’ve barely scratched the surface of all of the cool things Docker can do or how it can be used beyond just the development phase. If you’d like to see a particular post about Docker, let me know in the comments!

It’s also worth mentioning that there’s other software that shares the same space of Docker (containerization, virtualization, etc.). One particularly interesting software is Vagrant which essentially manages your Docker containers (or VirtualBox, VMWare, or even Amazon EC2 VMs). Vagrant can be used for provisioning (setting up VMs and handling configuration), and makes rapid deployment painless. 

I encourage you to explore further: Docker, Vagrant

Learn more about DMC’s web application development services. 

The post Setting Up Docker for WordPress Development appeared first on DMC, Inc..

Installation

1. Download and install the BLE SDK and the BLE Update Tool using the default location and agree to licenses. 

   These installs provide the complier and some example code as well as the download tool to push the compiled code to the Bluetooth chip. Wait to restart your system until you have completed the next step of installing Visual Studio Code.

   

2. Download and install Visual Studio Code using the default location and agree to licenses. 

   I recommend selecting Add “Open with Code” action to Windows Explorer file context menu and Add “Open with Code” action to Windows Explorer directory context menu from the list of Additional Tasks. This will provide quick right-click functionality to open our BGScript project later.

   

3. Restart your system now so that the BLE SDK, the BLE Update Tool, and Visual Studio Code can finish their installations. 

Configure Tools

Now that all our tools are installed, let’s configure VScode so that we can compile and download our BGScript code straight from the editor. 

1. Open Windows explorer, and navigate to: 

   C:\Bluegiga\ble-1.4.2-130\example\<your device>\bgdemo 

   If you didn’t use the default location for the BLE SDK, or if the version of the SDK has been updated, your path will be different. I’m using the BLE113, so my path is:

   C:\Bluegiga\ble-1.4.2-130\example\dkble113\bgdemo

2. Right click in the window and select Open with Code. This will open all of the files in the folder in a new instance of VScode. 

   

3. In VScode, type the hot key Ctrl+Shift+P to open the Command Palette, and then type Task to bring up the options with the keyword “Task”.

   

4. Select Tasks: Configure Task Runner. This opens some of the defaults tasks in VSCode, but we want to create a custom one, so select Others. This will create a .vscode folder in our working directory with a tasks.json file. 

   

   The task.json defines all the parameters and functionality of the task. It is configured by default to print “Hello World” to the terminal in VScode.

   

5. Type Ctrl+Shift+B. This will run our new task, and you should see the terminal open in VScode and display “Hello World”

   We’ll update this task to compile our BGScript software instead of the default functionality when we type Ctrl+Shift+B. Since we’ll also need a task to download the compiled hex file to the Bluetooth module, we’ll need to modify this single task to handle multiple tasks. 

6. Download the attached task.json file and replace your current tasks.json file. With this new file, instead of calling the ‘echo’ command, we’ll call the Windows ‘cmd’ command and pass it different executables and files based on which task we want to run. 

Running Tasks

For the top level ‘args’, we use /C as a placeholder for the actual arguments we’ll pass based on the task we want to run. Each task inside the main task has an arbitrary name and arguments to pass back to the cmd command. 

1. Pass the first task, defined as Build

   The “isBuildCommand”: true tells VScode that if we type Ctrl+Shift+B, it should run this specific task. There are a few other hot key tasks, but this is the only one we’ll use. 

2. Pass the next task, defined as Download. This task will download the compiled code to the module. 
3. Remember to change the path if you didn’t keep the default installation directory. 

   Looking back at the args for the Build command, we can see that it will call the bgbuild executable that was installed with the SDK.

4. Make sure you don’t have multiple BGScript projects in a single directory. 

When the bgbuild.exe is called, it expects a bgproj file that it will compile. The *.bgproj gets the first bgproj file from the working directory.

Download Task

The args for the Download task are in the command line update tool (bleupdate-cli.exe), which was part of the SDK installation. 

The bleupdate-cli.exe takes a command, (list, update, get, set) as its first argument. Since we want to update the module, we’ll pass ‘update’ as the command and pass the compiled hex file which was created from our Build task. 

Again, make sure there is only a single .hex file in the working directory to ensure we’re downloading the correct hex file. 

Viewing the Output

The last task combines both features into a single task that will build the project and then immediately download it to the Bluetooth module.

Now, if you type Ctrl+Shift+B, you should see the output of bgbuild.exe for the demo application that we’re working with. 

1. Type Ctrl+Shift+P to download the hex file so we can run the task from the command palette, then type Tasks: Run Task and click Enter. You’ll then see a list of the three tasks that we have defined. 
2. Select Download to download the already compiled hex file, or select Build & Download to recompile the project before downloading. 

Keybinding Shortcut

Now we can quickly compile our BGScript project with Ctrl+Shift+B, but it’s quite a bit of typing to run the other tasks, so let’s create a quick key binding shortcut so that when we press the F6 key, we’ll immediately be presented with our available tasks, and then we can select the one we want.

1. Open the command palette again with Ctrl+Shift+P and type Keyboard. The only option should be Preferences: Open Keyboard Shortcuts. Select it, and two files should open next to each other.

   

2. In the keybindings.json file on the right, enter {“key”: “f6”, “command”: “workbench.action.tasks.runTask”} inside the square brackets.
3. Save the keybindings.json and close it. Close the Default Keyboard Shortcuts file as well.

Pressing F6 will now open the command palette with our available tasks available to select.

Now that VScode functions more like an IDE rather than a basic text editor, in the next blog I’ll go through setting up text highlighting to make development easier.

Learn more about DMC’s Custom Software and Hardware Services.

The post BlueGecko BGScript Development with VScode appeared first on DMC, Inc..

This is accomplished by writing messages to a RAM buffer on the microcontroller that the J-Link is capable of reading through the standard ARM debug interface. This means that RTT requires a low-performance overhead (essentially a memcopy) and does not interfere with the execution of a user program. Additional details about implementation and performance can be found on SEGGER’s website.

Project Integration

In order to integrate RTT into a project, you simply need to copy the relevant source files and include them in your project. These files can be found in the J-Link Software and Documentation Pack under Samples\RTT\RTT. At a minimum, the following files are required:

• SEGGER_RTT.h
• SEGGER_RTT.c
• SEGGER_RTT _Conf.c

Optionally, a user can include:

• SEGGER_RTT _printf.c (adds lightweight printf support to protocol)
• SEGGER_RTT_syscalls_X.c (overrides system calls for X compiler)

Once copied into the project, you can configure the system for your specific use case, or leave it to its defaults and simply use the standard SEGGER_RTT_Read(), SEGGER_RTT_Write(), and SEGGER_RTT_printf() functions. There are several configuration options and additional features available that are out of the scope of this article and are well documented on SEGGER’s website and in the source files.

Running RTT Terminal

Your debug outputs can be viewed in several ways once your code is compiled and running. The simplest way is to open the J-Link RTT Viewer application installed on your computer and select Existing Session. This will connect you to your current active debug session and begin collecting messages.

Note: For EFM32 kits, you must start the RTTViewer prior to initiating a debug session

Logging with RealTerm

Once you have the RTT viewer displaying messages, the next step is to log those messages to a file. We are going to accomplish this by utilizing RTT’s available telnet connection. You can connect a Telnet client to localhost:19021 whenever RTT is running. In this case, we will use the application RealTerm. Once RealTerm is installed, open it, connect to localhost:19021, and then begin capturing information to a log file.

Note: Depending on the debugger and IDE used, RTT may not start on its own, and you will need to open the RTT Viewer application prior to connecting over Telnet.

Viewing with Baretail

The last trick I want to show off is the ability to view the above log files in real-time. This can be done using the application BareTail, which allows you to view text files in real-time as they are being edited and also highlight specific messages or characters.

Comparison to UART and J-Link debugger

Finally, we can compare the use of RTT to other standard debugging practices such as a dedicated UART or debugging with breakpoints by looking at each option’s pros.

Segger RTT:

• Low overhead
• No additional pins/connections to MCU
• Simple to implement
• Doesn’t alter program flow

Dedicated UART:

• Doesn’t require an exposed debug connection and J-link hardware
• Doesn’t alter program flow

Breakpoints:

• No additional pins/connections to MCU
• Provides complete information (call stack, variable values, execution order)

Learn more about DMC’s Embedded Development and Programming expertise.

The post Using Segger Real Time Transfer with an EFM32 appeared first on DMC, Inc..

First of all, this article assumes you know/have the following things:

1. Intermediate C# and .NET development experience or knowledge
2. A license for Revit (preferably 2013 or later) so you can actually test your add-in
3. A license for Visual Studio (I’ll be using 2015 for this example). You can develop Revit macros using Revit’s built-in code editor, but developing add-ins (external commands and external applications) pretty much requires Visual Studio.

The first thing you’ll want to do is set up your development machine. I chose to use a virtual machine (VM) running Windows 8, for reasons that are beyond the scope of this article. Make sure you check the system requirements for the version of Revit that you’re developing for. Install Revit and your chosen version of Visual Studio, and you’re ready to get started.

To create a new Revit add-in, open up Visual Studio and start a new Class Library project.

Visual Studio is kind enough to provide us with a class, named “Class1.cs”.

Either rename it, or delete it and replace it with another class (.cs) file, and make sure the new class is named something that makes sense. I’m naming mine “RevitTutorialExternalCommand”. Once that’s done, we’re going to make our new class implement the interface “IExternalCommand”.

As you probably know, that squiggly red underline means Visual Studio doesn’t recognize that reference. This is because IExternalCommand is an interface from the Revit API libraries. So to use it, we’ll have to add a reference in our project to the Revit API dlls. You can find these in the directory where you installed Revit. The files we’re looking for are RevitAPI.dll and RevitAPIUI.dll. These are the two libraries that you’ll use most often when developing add-ins for Revit.

Once we’ve added references in our project to these files, we can add the line:

using Autodesk.Revit.UI;

to our class file.

Now we still have the red squiggly underline; as you probably guessed, Visual Studio now recognizes the interface name, but it’s warning us that we’re not correctly implementing the interface. In order for our class to implement it, we have to add the Execute method to the class. This method has the following signature:

public Result Execute(
    ExternalCommandData commandData,
    ref string message,
    ElementSet elements)

public Result Execute(
    ExternalCommandData commandData,
    ref string message,
    ElementSet elements)

The access modifier has to be public in order for Revit to be able to run our add-in. This method essentially serves as the entry point for your add-in – this is the equivalent of “public static void Main()”. There’s one more thing we should do before actually writing code – add an attribute that determines the transactional behavior of the external command. This attribute is in the namespace Autodesk.Revit.Attributes, so you’ll want to add that to your using statements. Revit transactions are outside the scope of this article, but the short version is that anything your add-in does to change the file that it’s working with has to be done within the scope of a transaction, so the TransactionMode enum that we supply to the Transaction attribute allows us to decide whether a transaction is automatically wrapped around our entire add-in, or whether we have to manually start and commit Transactions. It’s usually a good idea to use Manual, so that’s what I’m showing here.

Finally, let’s write some code to make this add-in actually DO something. We’ll keep it simple for this first tutorial: we’ll just display a message box for the user.

In the above image, you can see I’ve used a class called TaskDialog’s “Show” method, and passed it two strings as its parameters. The first parameter is the “title” displayed at the top of the message box. The second parameter is the content text of the message box. At the end of our Execute method, we return an Autodesk.Revit.UI.Result, an enum with three possible values: “Cancelled”, “Succeeded”, and “Failed”. We’ll return Succeeded for now.

Finally, we’ll build our solution, start Revit, and try it out.

But wait, there’s a problem… When we have add-ins loaded, there’s supposed to be an “Add-ins” menu tab at the top, right next to “Modify”. You can see in the above picture that it’s not there. This is because we haven’t actually deployed our add-in so that it can be loaded by Revit. We need to do two things to make this happen: 

1. Write an add-in file (an XML file with a “.addin” extension) that Revit reads when it starts up in order to determine which add-ins are to be loaded
2. Build our project to produce a dll file, and place it somewhere accessible (we’ve already done this one)

Let’s go ahead and write that .addin file. You can do this using Notepad, Notepad++, or any other text editor. When creating the file, you need to put it in the add-ins folder for your targeted version of Revit, which can be found at C:\Users\[YOUR USERNAME]\AppData\Roaming\Autodesk\Revit\Addins\[YOUR REVIT VERSION YEAR]. So for me, it’s C:\Users\Christopher Olsen\AppData\Roaming\Autodesk\Revit\Addins\2014. The AppData folder is usually hidden by default, so you’ll have to make sure Windows Explorer is configured to show hidden files and folders.

As mentioned before, this .addin file is in XML format.

Our root element here is the RevitAddIns tag. Within this tag, you’ll place one or more Addin tags (yes, you can use one file to specify multiple add-ins for Revit to load). The “Type” attribute on the Add-in tag is for specifying what kind of add-in this is. The two most popular options are “Command” and “Application”. Since we’ve written an external command (as indicated by the fact that we used the IExternalCommand interface), we’ll use the “Command” value for this attribute.

Nested inside the AddIn tag, we have several important elements. The Text tag is where we specify the display name for our add-in in the “External Commands” drop-down menu in Revit. The Assembly tag must contain the file path to the dll for our add-in – in this example, I’ve pointed it toward the dll file in my project’s obj\Debug folder in order to make testing and debugging easier. AddInId is essentially the ID of your add-in, and must be unique for a session of Revit – the best way to do this is to generate a new GUID in visual studio (you can do this by going to the Tools menu, and clicking on “Create GUID”. You don’t have to put this GUID in your code somewhere, but it’s common practice to place it in a comment right above your class definition.

Next, we have the FullClassName tag, which must contain the namespace and class name for your external command. The VendorID tag is required, and is supposed to be unique for a given session of Revit – Autodesk recommends using the url of your company’s website. Finally, VendorDescription is a more verbose description of your company – if your external command throws an unhandled exception, Revit will display an error message on screen that ends with “For more info, contact this knucklehead that developed the add-in: [VendorDescription]”. I’ve paraphrased the actual text of the error message, for comical effect.

And that’s it. There are many more things we can specify in that .addin file, but these are the core ones you’ll really want to use. Other tags you can add to this file include the path to an image that will be displayed for your add-in in the external command drop-down menu. For a full run-down, check out the table on Autodesk’s knowledge base website.

Now, if we open Revit, we see that the “Add-Ins” tab has been added, and clicking on the “External Tools” drop-down shows us our add-in. If we click on it, our external command’s “Execute” method runs, and we get our message box.

Now that we’ve got the super basic stuff out of the way, we can turn our attention to doing something meaningful in a Revit add-in. In my next blog post, we’ll go over how we can have our user select elements, and how we can then perform operations on those elements.

Learn more about how DMC can help you develop custom software.

The post The Revit API: Creating Your First Add-In appeared first on DMC, Inc..

While there are some guides available that give you similar information, I found it a bit difficult to get started developing MVC modules in DNN. For reference, the articles I used are at the bottom of this blog.

Here’s an overview of the steps we’ll take to get started.

1. Prerequisites
2. Templates
3. Setup
4. Build
5. Installation
6. Next Steps
7. References

1. Prerequisites

For this quick start, you’ll need a few things before we can dive in.

First, you’ll need to have Visual Studio 2015 installed. The express editions have been reported to be incompatible with the templates we’ll be using later, but this may not be true by the time you’re reading this.

Next, you’ll need to have IIS (Internet Information Services) setup with a local installation of DNN (version 8 or higher). There are many tutorials on how to do this around the web. You’ll need to install IIS and Microsoft SQL Server, then you can install DNN by downloading the latest _install.zip from DNN’s GitHub releases.

Once those are all set up, you’re ready to go.

2. Templates

You could create a module from scratch. But why would you do that when a DNN expert created templates for you to use? Download the templates from the Visual Studio Gallery and run through the installation procedure.

3. Setup

Now that everything is set up, we can actually dive into creating the module. 

In Visual Studio, select File -> New -> Project

In the New Project window, select Templates -> Visual C# -> DotNetNuke and you’ll see a listing of the types of projects the templates have provided.

To create an MVC module, we’ll select DotNetNuke 8 C# DAL2 MVC Module. There are three other fields we must configure: Name, Location, and Solution name.

Name: Enter a name for your project (it’s best not to use any spaces or special characters for this)

Location: This is important to point this to the correct folder in DNN: /DesktopModules/MVC/. Depending on your installation directory, the folder should be something like C:\Dev\Projects\DMC_Website\Alpha\DesktopModules\MVC\ where “Alpha” is the root of your DNN installation.

Solution name: We’re not actually going to be using this field. Uncheck the box on the right that says “Create directory for solution” and the solution name textbox will be greyed out.

Confirm your settings look similar to mine and then click OK.

A Project Setup Wizard dialog box will appear asking for some project information. Many of these are self explanatory, so I will only address the two that are a bit tricky.

Namespace: Whatever namespace you want your module to live in. The templates will automatically include your project name in the namespace, so no need to enter it here. Make sure you include the last period. E.g. DMC.

Local Dev URL: By default this is set up to point to dnndev.me, which is actually set up to point back to 127.0.0.1 (your localhost). What you enter here depends on what settings you’ve set your DNN install up with. For my installation, I access my local DNN install through http://localhost./ Therefore, I am going to enter localhost as my Local Dev URL.

Initial values

Updated values (note: the owner website field includes https:// but the textbox isn’t large enough to display it. Be sure to include it in your URL.)

Once all fields have been complete, click OK.

4. Build

Now that the initial project setup is complete, you’ll be presented with a web page in Visual Studio that says * Important *. These are steps that you should read carefully and follow to ensure your project will work correctly. I’ll provide a quick overview of these steps in case the original wording is confusing for anyone.

First, check IIS to see if any of your folders were converted to virtual directories or applications. To do this, open IIS, expand your site’s dropdown and check what icon is displayed next to your DesktopModules folder or the MVC folder inside of the DesktopModules folder. If it’s anything other than a yellow folder, right click it and click remove.

Next, in Visual Studio, right click and delete the web.config files that are in the solution.

You can now build the module! change the solution configuration dropdown from Debug to Release and then select Build -> Build

You’ll get an install .zip file in your module’s install/ directory.

5. Installation

Now, in DNN, go to Hosts -> Extensions and click Install Extension, selecting your install .zip file that you previously built.

If everything goes well, then the module is now installed and can be placed on any page.

6. Next Steps

Once you’ve dragged the module into a page, you’ll see a demo application that includes multiple views, database interaction, and more. Simply build the project in debug mode to automatically copy the new DLL to the /bin folder.

7. References

• Chris Hammond’s DNN posts
• DNN Community Blogs
• DNN MVC Module Development

While you’re here, check out DMC’s Web Application Development and ASP.NET & ASP.NET MVC Development services so we can get started on your next DNN MVC module!

The post 6 Easy Steps to Get Started with MVC Module Development in DNN 8 appeared first on DMC, Inc..