Javascript inject in Perspective... have fun

[victordcq]

Soo i'll just link this here...
You can do whatever with it, but its not really gonna be clean or easy xD Have fun

Perspective Mouse Click & Drag

Soooo.... i was playing around a bit and i found something to inject js in perspective. I know i know Its kinda terrible and requires some knowlegde about the perspective react props... But this seems like it would fit here. A little demo, not to complex for drag and drop. Im writing it to a sessionprop, seems to be easier than trying to find the view props. dndjsinject.zip (7.5 KB) @nader.chinichian

WARNING
Dont let userinput enter in here

[nminchin]

You magician! If I knew any JavaScript I would certainly try this out, haha, but this seems VERY cool! It would be cool if you could write it back to the view...

[victordcq]

At first sight i found the page context and session context. But the page context isn't really the same as the view... There is a function findView(resourcePath: string, mountPath: string) in it though... So i bet you could find it... It would require a lot more javascript though, so probably not idea to try and code that inside a markdown string xD

[victordcq]

Here ya go xd

Perspective Mouse Click & Drag

Gotcha const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; you can than do things like view.custom.read('yourprop'), view.custom.write('yourprop', thevalue), view.props.write('yourprop', thevalue), view.params.read('key') you could dig into the children/root too, but you should probably just use bindings to the custom props unless you know what you…

[victordcq]

Gonna try to keep this topic updated with all my cool injectings
Version 8.1.22 svg clicker

New Feature: Perspective Piping

welp... i just had to try it out didnt it Required version 8.1.22 Behold! JS INJECTED SVG CLICKER jsInjectedSvgClicker.zip (3.6 KB) edit: I made the value of the binding become the name it writes to in the view.custom props Be sure to set the custom prop back to null after handling your event so you can trigger the onchange events on the prop It should only detect things inside this view. Haven't fully tested it though.

[cmallonee]

This seems like something geared more toward Ignition Exchange, as opposed to sporadic forum postings.

[Kevin.Herron]

Let's say... keep it to one thread, instead of creating new ones.

[kgamble]

@cmallonee

This seems like something geared more toward Ignition Exchange

I am surprised that the JS Injection hack would even be approved into the exchange! lol

[nminchin]

@kgamble

even be approved

Shhhh!
We might find this thread just...

[victordcq]

WARNING
Dont let userinput enter in here

Edited the top for this too.

[Roger_Henley]

Have you tried to determine if the device running the perspective screen had geolocation functionality and if so were you able to get device location? With something like this: ```
function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
getCurrentPosition
}
}
Navigator.geolocation snippet:

For my use case I would not want a map, just longitude and latitude coordinates.  Would use them to confirm location, then check location against a variable set to confirm the user is in a location that will allow certain on page functionality to become accessible. Purpose is to write a perspective screen to handle hourly employees clock in / out, but only allow if user is on site or within a certain range of the facility they were clocking into. Would need to get the long and lat values to run a comparison. Link above suggests:  ```
function show_map(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
}

[victordcq]

session settings have geolocation already
https://docs.inductiveautomation.com/display/DOC81/Session+Properties

[victordcq]

Anyways this seems weird to use it for checkins...
Dont you need to be on the company ip addres already to enter perspective xd (be in wifi range)
Or are you hosting it online?
In which case this is not very secure

[Roger_Henley]

Victor,

Thank you for pointing that out. What do you do for a living? Are you interested in work? I have a couple of Ignition projects I would be interested in hiring someone to create for me.

Roger E. Henley II

VP Engineering & Technology

Whiskey House

rhenley@whiskeyhouse.com

304-932-8706

[nminchin]

I haven't found a reliable way to focus a component on View load (tried onStartup events on both the popup View and the input component, as well as on custom prop value change scripts on the input component...), outside of JS.. so here is what I use:

[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "SetFocusById"
    },
    "position": {
      "shrink": 0,
      "basis": 0
    },
    "custom": {
      "domIdToFocus": "setpointInputField"
    },
    "propConfig": {
      "props.source": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "{this.custom.domIdToFocus}"
          },
          "transforms": [
            {
              "code": "\tcode =  \"<img style='display:none' src='/favicon.ico' onload=\\\"const element = document.getElementById('\" + value + \"');if (element) { element.focus(); }\\\"></img>\"\n\treturn code",
              "type": "script"
            }
          ]
        }
      }
    }
  }
]

[bmusson]

JavaScript injection?

system.perspective.runJavaScriptAsync | Musson Industrial

[nminchin]

haha, I know this is a thing and NEED to start using it.. let me try

@bmusson

I've tried this with both blocking and async and no worky. It prints "focusing element" to the console but doesn't actually focus it on launch of the popup (tried same things as above: onStartup scripts and on custom prop script transform and onChange script with a binding just setting it to 1, non-persistent value). Calling the function from a button on the view works though. How would I make it work on load?

def onChange(...):
	function = '''(domId)=>{
		const element = document.getElementById(domId);
		console.log(element)
		if (element){
			console.log('focusing element');
			element.focus();
		}
	}'''
	system.perspective.runJavaScriptBlocking(function, {'domId': self.custom.domIdToFocus})

I presume the markdown hack works because the markdown component has to load first, presumably along with all the other componnets including the input field to focus, and it adds in the "img" component into the div after these have all loaded, so the onLoad script can then find the focus element and actually focus it. This seems to be the issue with other methods; the component to focus isn't actually loaded and/or displayed when the focus function is called.

[bmusson]

@nminchin

I presume the markdown hack works because the markdown component has to load first, presumably along with all the other componnets including the input field to focus, and it adds in the "img" component into the div after these have all loaded, so the onLoad script can then find the focus element and actually focus it. This seems to be the issue with other methods; the component to focus isn't actually loaded and/or displayed when the focus function is called.

Yup, you're exactly right, runJavaScriptAsync won't work for this

@nminchin

How would I make it work on load?

I do have one other option: use the events.target.lifecycle.onMount callback of the Portal component.

Musson Industrial's Embr-Periscope Module

Portal Component This update adds a Portal component, that uses React's createPortal to add children wherever you want them. This allows you to: Add elements inside existing components/views. Decouple the design time structure of your views from the runtime structure of the HTML elements. Develop re-usable views from the outside in. Examples Example, Basic Usage This example demonstrates how the elements of the Portal are added to the target. Example, Alert Information This example …

The Portal component doesn't have any documentation written yet... but, basically, it allows you to interact with a DOM element and directly insert children.

A side-feature is the events.target.lifecycle functions. Here, you can add functions that will run when the target element loads, unloads, or updates. For example:

# element (DOM ID or arrow function that returns a reference to a node).
TextField
# events.target.lifecycle.onMount
(element) => element.focus()

This is pretty much the same thing as the Markdown component injection version though, just with a little more hand-holding.

Edit:
There is an issue with the Portal component that hasn't been fixed yet; it doesn't listen for DOM changes after the first render. This means the Portal component must load after the target.
Until this issue is fixed, the Portal component doesn't have an advantage over the Markdown injection technique. Once it's fixed, it won't be load order sensitive.

[nminchin]

That's pretty cool! I didn't really know what I would use the Portal for when you first released it. The examples you showed like adding alarm decorations to components were cool (nice styling), but I didn't see how it would be applicable at scale e.g. for multiple devices with alarms with different conditions/priority/etc. I'm sure there are some cool use-cases for it though. But really, I wanted to use it purely because of its name

Edit: with a module, is it possible to add custom event listeners, e.g. add an onActuallyLoaded handler to run after the component has actually fully loaded and displayed?

[bmusson]

@nminchin

I didn't really know what I would use the Portal for when you first released it.

Honestly, same .

I’ve used the onMount functionality way more than the actual portal feature.

@nminchin

Edit: with a module, is it possible to add custom event listeners, e.g. add an onActuallyLoaded handler to run after the component has actually fully loaded and displayed?

Maybe? Let me mull it over.
That seems to be a commonly requested feature.

My goal has been to make all of Embr’s components have this in the form of the events properties. All of them will have events.dom and events.lifecycle, but some have extras (like the Portal’s target or the chart’s chart lifecycle events).