Test and measurement

Intensity Graph `<smart-intensity-graph>`

IntensityGraph displays a matrix as colour on an x and a y axis, with a colour ramp that says what the colours mean and cursors that read the cell under them: the display a spectrogram, a thermal image, a die map or a sensor array ends in.

Getting Started with Vue IntensityGraph Component

Smart.Industrial supports Vue 3.2.38 and later, with Vite. Vue uses the custom elements directly, so there is no wrapper to install.

The complete demo in Vue is on the demo page, file by file.

Scaffold with Vite (Vue 3)

The official scaffolding tool creates the project:

npm create vue@latest

The tool asks about TypeScript, Router, Pinia and other options. The defaults are enough for the sample.

cd <your-project-name>
npm install
npm install smart-industrial
npm run dev

Vue + TypeScript

A TypeScript project has vite.config.ts in place of vite.config.js, with the same configuration.

Teach Vue about custom elements

The isCustomElement option of the Vue plugin passes smart-* tags to the browser as custom elements. Without it, Vue looks for a Vue component named smart-intensity-graph and warns that it cannot resolve it. Other plugins that the scaffold added, such as vueDevTools(), stay in the list.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('smart-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

App.vue example

The sample replaces src/App.vue. It imports the stylesheets and the module that defines <smart-intensity-graph>, sets the properties the demo sets and handles the cursorChange event.

<script setup>
import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/modules/smart.intensitygraph.js';

// Raised when a cursor is moved by the operator, with the pointer or the
// keyboard.
function onCursorChange(event) {
  const { id, x, y } = event.detail;
  console.log('cursorChange', id, x, y);
}
</script>

<template>
  <smart-intensity-graph
    theme="industrial"
    label="ST-2112 run-up"
    mode="chart"
    :historyLength="240"
    xLabel="Time"
    xUnit="s"
    yLabel="Frequency"
    yUnit="Hz"
    zLabel="Level"
    zUnit="dB"
    colorMap="inferno"
    @cursorChange="onCursorChange"
  ></smart-intensity-graph>
</template>

Strings are plain attributes. Numbers and booleans are bound with a colon, such as :historyLength="240". A plain attribute would hand the property a string, and a property that takes a number or a boolean rejects a string with an error.

A listener for an event with an uppercase letter in its name, such as @cursorChange, needs Vue 3.2.38 or later. Earlier versions listen for cursor-change, which the component never raises.

With TypeScript, the script tag is <script setup lang="ts"> and the handler's parameter is typed as CustomEvent.

Run and build

The development server runs at http://localhost:5173/:

npm run dev

The production build goes to ./dist:

npm run build