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..

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..

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..

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..

We concentrated on adding interesting and useful items to the homepage. One of those pieces of content was a display of our office-specific Slack channels. 

This blog explores what I had to learn and do in order to implement a Slack display inside a SharePoint web part page.

Getting Ready in Slack

My first step was to learn how to communicate with Slack. Knowing that I wanted to keep this display lightweight and I wasn’t too worried about displaying tokens to users on an intranet site, I decided to utilize Slack’s web API. This API uses HTTP-style RPC methods with simple authentication tokens. There is the option to use OAuth 2.0 and negotiate tokens based on users, but for a simple one-way display application, I did not think it necessary. That said, I knew I still needed a token of some sort and didn’t want to use my own, so I set up a Slack Bot user to facilitate the communication. 

Talking with Channels

Now that I had an authentication token, I could actually start communicating with our Slack channels and reading information from them. Since we were already using jQuery on other parts of the site, I could just make a simple ajax call to Slack and start receiving data immediately:

        //Get messages
        $.ajax({
            url: “https://slack.com/api/channels.history?token=” + botAuthToken + “&channel=” + channel + “&count=” + historyAmount + “&pretty=1”
        }).then(function (data) {
            if (data[“ok”] && data[“ok”] === true) {
                slackMessages = data[“messages”];
            }
        });
 

Once I got the messages, I was able to parse them out with the help of the Slack Message documentation. However, I didn’t only want to display text. I also wanted to show users’ profile pictures and any emojis used in messages, especially custom ones like the office dog:

I used the users.list and emojis.list actions to get all of the possibilities, and then constructed the HTML for a post as follows:

<small>for(var key in slackEmojis)

            {

                if(messageText.indexOf(":"+key+":") > 0)

                {

                    messageText = messageText.replace(":"+key+":",'<span class="emoji emoji-sizer" style="background-image:url('+slackEmojis[key]+')" title="'+key+'"> </span>');

                }                

            }

            $("#dmcHomeSlack").append(

                        '<ts-message class="message">'+

                            '<div class="message_gutter">' +

                                '<div class="message_icon">' +

                                    '<a href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" style="background-image: url(\''+ userInfo["profile"]["image_32"]+'\')" aria-hidden="true"></a>' +

                                '</div>' +

                            '</div>' +

                            '<div class="message_content ">' +

                                '<a class="message_sender" href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'">'+ (userInfo["real_name"] !== "" ? userInfo["real_name"] : userInfo["name"])+'</a>' +

                                '<span class="message_body">'+ messageText+'</span>' +

                            '</div>' +

                       '</ts-message>');</small>

<small>for(var key in slackEmojis)

            {

                if(messageText.indexOf(":"+key+":") > 0)

                {

                    messageText = messageText.replace(":"+key+":",'<span class="emoji emoji-sizer" style="background-image:url('+slackEmojis[key]+')" title="'+key+'"> </span>');

                }                

            }

            $("#dmcHomeSlack").append(

                        '<ts-message class="message">'+

                            '<div class="message_gutter">' +

                                '<div class="message_icon">' +

                                    '<a href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" style="background-image: url(\''+ userInfo["profile"]["image_32"]+'\')" aria-hidden="true"></a>' +

                                '</div>' +

                            '</div>' +

                            '<div class="message_content ">' +

                                '<a class="message_sender" href="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'" target="https://dmcinfo.slack.com/team/'+ userInfo["name"]+'">'+ (userInfo["real_name"] !== "" ? userInfo["real_name"] : userInfo["name"])+'</a>' +

                                '<span class="message_body">'+ messageText+'</span>' +

                            '</div>' +

                       '</ts-message>');</small>

This markup takes advantage of the styles that Slack itself uses, so I didn’t have to worry much about writing custom CSS to work on our homepage.

All in all, this was a pretty straightforward implementation. Slack offers plenty of documentation on how to access data, and parsing messages is simple once you start receiving them.

If you’re interested in any additional details, or would like to explore options for your own SharePoint site, don’t hesitate to contact DMC!

The post Displaying Slack Channels in SharePoint appeared first on DMC, Inc..

The blog linked above has much more detail on how we built the automatic bartender, but here’s a short list of some of the tech used:

• Siemens S7-1500 PLC
• Siemens S7-1200 PLC configured using I-Device
• Siemens KP8 key panel
• Philips Hue lightbulbs

And of course, here is our infomercial:

Learn more about DMC’s company culture.

The post Deluxe Drink System appeared first on DMC, Inc..

Tools

• Ruby
• Sass (or Less)
• Node.js
• npm
• Bower
• Grunt or gulp

Ruby

We won’t be using Ruby as a programming language, but we will be needing it to install SASS.

If you’re on Windows, download the latest version of Ruby

If you’re on Linux or OS X, there are instructions you can follow

Or, after installing cURL, run this in a terminal window:

\curl -sSL https://get.rvm.io/ | bash

\curl -sSL https://get.rvm.io/ | bash

Once Ruby has finished installing, no matter what platform you’re on, open a terminal window and run

ruby -v

ruby -v

to ensure it has installed properly.

Sass (Syntactically Awesome Style Sheets) or Less

Sass is basically CSS with a ton of awesome features layered on top. Using Sass, which compiles to clean and efficient CSS, one can make use of extended abilities like variables, mixing, inline imports, and more.

There is another CSS extension called Less, which is an alternative to Sass. I prefer Sass, but you could definitely adapt this tutorial to work with Less as well.

Anyhow, now that Ruby is installed and ready to go, installing Sass is easy.

In a terminal window, type

gem install sass

gem install sass

Once that is finished, run

sass -v

sass -v

to ensure it has installed properly.

Node.js

Node.js is tool that allows one to write simple JavaScript programs that create powerful applications.

We’ll be using Node.js to power npm (node package manager), Bower, and Grunt.

Grab the proper download for your platform

To install Node.js on Windows or OS X, simply run the installers.

On Linux, you can build Node.js by using these steps:

Extract the downloaded archive and open a terminal window

1. Navigate to where you extracted the archive

2. Run

./configure

./configure

3. Run and wait patiently

make

make

4. Run

sudo make install

sudo make install

And you’ll be all set with Node.js.

npm

npm is the official package manager for Node.js. What this means is that using npm, one can install hundreds of different applications and tools that are built with Node.js.

We’ll be using npm to install Bower and Grunt.

npm comes installed with Node.js, so there are no additional steps required to install it.

Bower

Bower, much like npm, is a package manager. However, npm only deals with Node.js packages while Bower titles itself “a package manager for the web.” Using Bower, one can run a simple terminal command to download and install many different web libraries or frameworks, such as jQuery, Bootstrap, FontAwesome, and more.

To install Bower, open a terminal window and type:

npm install -g bower

npm install -g bower

(The -g flag is to install bower globally, so we can call it from the command line anywhere)

Grunt or gulp

Grunt is a task runner that performs the time-consuming, repetitive tasks that come along with website development like minification, SASS compilation, and more. 

Thanks to npm, Grunt is just as easy to install as Bower:

npm install -g grunt-cli

npm install -g grunt-cli

gulp (don’t you ever capitalize that g) is a similar tool that should provide better performance than Grunt because it uses Node.js’s streams.

npm comes in handy once again. Install gulp with:

npm install -g gulp

npm install -g gulp

Beginning Automation

Now that we have all of the tools we need to begin, we can finally start creating an automated build system.

There are tasks associated with web development that quickly become repetitive and mundane. Thankfully, we will no longer have to do these manually!

The tasks that we can now automate are (in no particular order):

• Sass (or Less) compilation (converting our Sass or Less to standard CSS)
• Concatenation (combining multiple files into one)
• Minification (smushing text together to reduce the size, making it load faster)
• Linting (automatically checking code for errors)
• Copying of files (like fonts)
• Adding vendor-specific prefixes to our CSS (ensuring compatibility across browsers)
• Detecting features that we require a user’s browser to have
• More that I can’t think of!

And best of all, the build system will be smart enough to understand when a particular file changes to prevent rebuilding the entire thing.

Stay tuned for the next article! For now, you can always take a look at DMC’s Web Application Development services, where we can harness the technologies outlined above for your needs.

The post Automating Web Development – Tools appeared first on DMC, Inc..

The HTML input types supported by the following JavaScript are text, radio, and checkbox. When a text input is empty, a red bounding box will surround the Nintex input control. The same will happen when a radio choice has no selected option or a checkbox is not checked.

The following JavaScript also includes an override of the jQuery UI datepicker._gotoToday function, such that selecting the “Today” button triggers a date selected event (found on Stack Overflow). Furthermore, the control that the datepicker is attached to also binds an event handler to the datepicker onSelect event that removes the highlighting when a date is selected. This event handler is attached when the control is clicked so that the jQuery UI datepicker will have already been attached at that point. Lastly, there is a timeout on the input mouseup event such that if the “X” at the end of the input is clicked in Internet Explorer 10, that a “cleared” event is triggered (also found on Stack Overflow).

To attach these events to a Nintex control, add the “required” CSS class to it, and include the following CSS in the form’s custom CSS. The color chosen here is thanks to DMC’s web color cheat sheet.

.required {
}
.required-empty {
 border: 2px solid #CC3333;
}

.required {
}
.required-empty {
 border: 2px solid #CC3333;
}

Here is the JavaScript.

NWF$.datepicker._gotoToday = function(id) {
 var target = NWF$(id);
 var inst = this._getInst(target[0]);
 if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
  inst.selectedDay = inst.currentDay;
  inst.drawMonth = inst.selectedMonth = inst.currentMonth;
  inst.drawYear = inst.selectedYear = inst.currentYear;
 }
 else {
  var date = new Date();
  inst.selectedDay = date.getDate();
  inst.drawMonth = inst.selectedMonth = date.getMonth();
  inst.drawYear = inst.selectedYear = date.getFullYear();
  this._setDateDatepicker(target, date);
  this._selectDate(id, this._getDateDatepicker(target));
 }
 this._notifyChange(inst);
 this._adjustDate(target);
}

function validateChoice(control) {
 if (control.find('input[type="radio"]:checked,input[type="checkbox"]:checked').length > 0) {
  control.removeClass('required-empty');
 } else {
  control.addClass('required-empty');
 }
}

function validateText(control, input) {
 if (!input.val()) {
   control.addClass('required-empty');
  } else {
   control.removeClass('required-empty');
  }
}

NWF$(document).ready(function() {
 NWF$('.required').each(function() {
  var control = NWF$(this);
  if (control.find('input[type="radio"]:not([disabled]),input[type="checkbox"]:not([disabled])').length > 0) {
   validateChoice(control);
   control.click(function() {
    validateChoice(control);
   });
  } else {
   var input = control.find('input');
   if (input.attr('disabled')) return;
   validateText(control, input);
   input.bind('keyup cut paste cleared', function() {
    validateText(control, input);
   });
   input.bind('mouseup', function() {
    oldValue = input.val();
    if (oldValue == '') return;
    setTimeout(function() {
     var newValue = input.val();
     if (newValue == '') {
      input.trigger("cleared");
     }
    }, 1);
   });
   if (input.hasClass('nf-date-picker')) {
    input.click(function() {
     input.datepicker('option', 'onSelect', function() {
      control.removeClass('required-empty');
     });
    });
   }
  }
 });
});

NWF$.datepicker._gotoToday = function(id) {
 var target = NWF$(id);
 var inst = this._getInst(target[0]);
 if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
  inst.selectedDay = inst.currentDay;
  inst.drawMonth = inst.selectedMonth = inst.currentMonth;
  inst.drawYear = inst.selectedYear = inst.currentYear;
 }
 else {
  var date = new Date();
  inst.selectedDay = date.getDate();
  inst.drawMonth = inst.selectedMonth = date.getMonth();
  inst.drawYear = inst.selectedYear = date.getFullYear();
  this._setDateDatepicker(target, date);
  this._selectDate(id, this._getDateDatepicker(target));
 }
 this._notifyChange(inst);
 this._adjustDate(target);
}

function validateChoice(control) {
 if (control.find('input[type="radio"]:checked,input[type="checkbox"]:checked').length > 0) {
  control.removeClass('required-empty');
 } else {
  control.addClass('required-empty');
 }
}

function validateText(control, input) {
 if (!input.val()) {
   control.addClass('required-empty');
  } else {
   control.removeClass('required-empty');
  }
}

NWF$(document).ready(function() {
 NWF$('.required').each(function() {
  var control = NWF$(this);
  if (control.find('input[type="radio"]:not([disabled]),input[type="checkbox"]:not([disabled])').length > 0) {
   validateChoice(control);
   control.click(function() {
    validateChoice(control);
   });
  } else {
   var input = control.find('input');
   if (input.attr('disabled')) return;
   validateText(control, input);
   input.bind('keyup cut paste cleared', function() {
    validateText(control, input);
   });
   input.bind('mouseup', function() {
    oldValue = input.val();
    if (oldValue == '') return;
    setTimeout(function() {
     var newValue = input.val();
     if (newValue == '') {
      input.trigger("cleared");
     }
    }, 1);
   });
   if (input.hasClass('nf-date-picker')) {
    input.click(function() {
     input.datepicker('option', 'onSelect', function() {
      control.removeClass('required-empty');
     });
    });
   }
  }
 });
});

Click to learn more about DMC’s Microsoft Consulting Services.

The post Highlighting Required Nintex Fields Dynamically appeared first on DMC, Inc..

This tutorial assumes you’ve already set up a MySQL server.

The installation was quick and easy to follow along with:

1. Open IIS Manager
2. Open Web Platform Installer
3. Search WordPress
4. Click Add next to WordPress
5. Click Options
6. Check the box next to “Enable configuration of all web application parameters” (I’ll explain why later)

   

7. Click Install

The Web Platform Installer will install some prerequisites (PHP) and take you to a configuration screen like so:

Next, you’ll have to enter some database information (which you enabled when you checked that box earlier!) and some keys in order to make your installation of WordPress secure:

Generate these keys

NOTE: You cannot use the dollar sign in these keys under IIS. The generator sometimes uses them. Simply refresh the generator a few times until you’ve found different keys for each without any ‘$’ characters.

Now the Web Platform Installer will run through the steps and install WordPress into your selected configuration.

HOORAY! WordPress should now be up and running on IIS.

In order to get some nice looking URLs, follow this guide.

First things first, I needed to create an awesome theme. Starting to port over DMC’s current website theme, I found an excellent template: bones.

In end, WordPress is powerful, fast, and easy to work with. It’s a possible candidate for the next iteration of the DMC website.

The post HOW TO: Install WordPress on an IIS Server appeared first on DMC, Inc..