Musson Industrial's Embr-Periscope Module

3rd Party Modules
124

I've unfortunately been using another far inferior SCADA platform for a few months now... (so bad that I've had Claude working in the background developing a completely new designer for it to make it somewhat bearable :distorted_face:) however I've played off and on with getting Claude to also build some things for me with Client Resources. The ease and power of this new resource cannot be understated!

I got Claude to build me a (hopefully) performant tag history tree View for filtering and selecting history tags to add to a power chart.

Many features I simply couldn't have done without Javascript provided by Client Resources in your module @bmusson (thanks again!):

  • Tree Scroller: Scrolls the tree so the selected item is visible when a script selects it, for example on Next or Previous match. The tree doesn't do this by itself.
  • Tree Key Navigation: keyboard navigation and multi-select
  • Tree Node Styling: Show each tag's tooltip beside each tree label in dimmed italic text
  • Tree Drag/Drop Tags: Drag/drop of tags out of the tree onto a powerchart with a form to select the pen naming convention to use (this is one of my favourite parts, see screenshot below - pen naming has always been awful in the power chart)

image
image804×808 47 KB

Full details, as summarised by Claude, are below.

Summary

Loading tags and performance

  • Shows every tag with history enabled in one tag provider, set by the provider param (default default). The tags are found with one system.tag.query rather than browsing the tag tree folder by folder.
  • The list of tags is built on the gateway, cached, and shared by every session. It's rebuilt after cacheSeconds (default 600 s), or when someone presses Refresh.
  • Tags load in the background, with a "Loading history tags…" banner and a spinner meanwhile.
  • Only the branches you've expanded are sent to the browser. A collapsed folder or UDT gets one placeholder child so it still shows its expand arrow, and its real contents load when you expand it. This keeps the view fast with tens of thousands of tags.
  • The footer shows the number of history tags and nodes, how many are shown when filters are on, and when the cache was built and how long it took.

How the tree looks

  • Folders, UDT instances and each tag type (Memory, OPC, Expression, Query, Derived, Reference) have their own icon from the tagicons library.
  • The selected row's icon gets a small white tile so the pixel-art icons stay clean on the highlight colour.
  • TreeLabelNotes (client resource) shows the first line of each tag's tooltip beside its name, in dimmed italic text. It's turned on by the showTooltips param and cut off at 120 characters. Tooltips are read live, so bound or parameterised tooltips show their runtime value.
  • The tree remembers which branches are expanded, including ones you open or close with the mouse.

Search

  • Typing in the filter box searches tag and folder names, ignoring case. If the text contains /, it matches against the full path instead.
  • The .* toggle switches to regular-expression search. An invalid pattern shows its error in place of the match count.
  • A match counter shows "3 / 120" or "No matches", with Previous and Next buttons that wrap around. Going to a match expands the tree down to it, selects it and shows its details.
  • TreeScroller (client resource) scrolls the tree so the current match is visible. Without it, a match selected from a script can stay off-screen.
  • Only matches hides everything except the matches and the folders above them. Everything inside a matched folder or UDT still shows.
  • The Clear button empties the filter.

Advanced Filters (the collapsible section)

  • UDTs: only show tags inside instances of the chosen UDT types. Each option shows how many instances it has.
  • Tag Types: filter by tag type, for example Expression or Memory, with tag counts.
  • Data Types: filter by plain data-type names (Integer, Decimal, Boolean, Text and so on), with counts.
  • All three let you pick several values, have a clear icon, and combine with each other and with the search.
  • The ignorePaths param leaves out whole folders. Their tags aren't counted in the filter options either.
  • The filter settings and whether the section is open are kept between sessions.

Keyboard navigation (TreeKeyNav, client resource)

  • Tab to the tree to focus it. A focus ring appears for keyboard focus only.
  • Up/Down move between items and Home/End jump to the first or last item.
  • Right expands an item or moves to its first child. Left collapses it or moves to its parent.
  • Shift with a move key extends the selection.
  • Ctrl with a move key moves a dashed focus marker without changing the selection. Then Space selects, Ctrl+Space adds or removes, and Shift+Space extends to the marked item.
  • Ctrl+A selects every visible item.
  • Cmd works as Ctrl on a Mac.
  • Each key acts like a real mouse click, so the tree's own click events, selection and expand/collapse all behave normally.

Dragging tags onto a Power Chart (TreeDragTags + ChartTagDrop, client resources)

  • You can drag any selected item: a single tag, a folder or a UDT instance. It carries every tag under it that a chart can plot (Integer, Decimal or Boolean).
  • Only the tags the tree is currently showing are carried, so the search, Only matches and the filters all apply.
  • With several items selected, dragging any of them carries all of their tags. Tags under more than one selected item are only added once.
  • One drag carries at most 1,000 tags. A label under the pointer shows what you're dragging, for example "RACK02 (37 tags)".
  • The tag list for the drag is built on the gateway each time the selection changes. Until it arrives, the items can't be dragged, so a quick drag can't carry the previous selection's tags.
  • Double-click an item to add its tags to every Power Chart on the page that accepts dropped tags, without dragging.
  • The chart gets a dashed outline while you drag over it.
  • On drop, a pen-naming dialog appears:
    • Choose how many parent folders go before each name: Name only, +1 parent, and so on, up to the full path.
    • Optionally use each tag's tooltip instead of its name. Tags without a tooltip keep their name.
    • A preview shows the result on one of the tags being added, and the add button reads "Add 37 tags" (or however many). There's also a Cancel button.
    • Your choice is saved in the browser and selected again next time. Hold Alt while dropping or double-clicking to skip the dialog and reuse your last choice.
  • On the gateway, a pen is added for each tag:
    • Each pen uses the historian the tag is stored in.
    • Tags already on the chart are skipped.
    • If two pens would get the same name, the later ones get "(2)", "(3)" and so on.
    • Pen colours cycle through 10 colours, and each pen is a step-after line.
6 Likes
125

That’s super cool!

Also, I’ve got some massive improvements coming to the Client Resource editor:

3 Likes