Perspective HTML Injection

[bmusson]

So... while doing some module debugging, I noticed Ignition trying to access a non-existent folder <install-directory>\data\modules\com.inductiveautomation.perspective\injectables.

After creating the folder manually, Ignition then tried to access:

injectables\head_top.txt
injectables\head_bottom.txt
injectables\body_top.txt
injectables\body_bottom.txt

And what do you know, any HTML you put in these files will be directly loaded in the DOM of all Perspective sessions .

PS: Please don't send the hit squad .

[pascal.fragnoud]

Oh this is gonna be fun !

edit: It's been 11h and we still haven't heard from Victor.
I'm guessing he's currently being held in custody for of all the server fires in his area.

[PGriffith]

TL;DR: This has been possible forever. You're certainly allowed to do it (we can't stop you) but I'll present the following caveats as reasons we haven't and won't document this:

1. You can completely break Perspective, pretty easily, with this
2. We don't want you to have to know HTML or JS to develop in Perspective
3. We don't want people doing silly stuff like trying to dynamically modify these
4. Anything you do use this for should be considered unsupported. If we ever broke this functionality, it would likely be because we offered a supported, first-party solution, so I wouldn't necessarily worry about it dropping out from underneath you, but also, don't even think about contacting support if you do use this and something goes wrong.

[victordcq]

I had exams xd

Does look interesting though. could be usefull to track some general things on every page. Tho it being loaded everywhere is not super versatile

[pascal.fragnoud]

Yea, right...
You don't wanna say IA orange clockworked you for a week somewhere in a damp basement, I get it.

[victordcq]

xD It was AI actual not IA im following a course for AI (artifical intellengce)

[justinedwards.jle]

@victordcq

AI actual

Nope. Unfortunately, AI doesn't stand for Actual Intelligence.

[victordcq]

Well for many specific applications AI is a lot smarter than us.
But yes the all purpose general super AI isnt there yet

[victordcq]

reading up on some of the recent questions...

This could be usefull for:

[FEATURE] Perspective Workstation: Show numeric/text input on-screen keyboard for touchscreens

We’ve just started rolling out Perspective Workstation on touchscreens and have noticed that there’s no onscreen keyboard that pops up when a user tries to enter a new setpoint into a numeric input field. We have to ensure that Windows 10 is set to tablet mode, and tell the operators to click on the onscreen keyboard icon in the windows tray to enter values… however then the keyboard covers the bottom half of the Perspective screen, 50% of the time which is where the input component is located, …

Perspective - Font Scaling with SVG?

CSS can't know things like container sizes reliably because of how rendering order and style cascading works in the browser, fundamentally. So you would have to have JS running on the page to dynamically report the actual container size in order to run an actual dynamic font size calculation the way Vision does. But we don't allow you to write arbitrary JS in Perspective, because we didn't want folks to have to become web developers.

[justinedwards.jle]

@victordcq

following a course for AI

I'm with ya. I've been learning it too.

[bmusson]

Hear me out……

banner ads

[victordcq]

it would be super easy to add in google adds or something yes...
i dont think you'll be able to sell that to your clients though xd

watch this add for 10 sec before you can press the emergency stop button
Clash of clans...

[victordcq]

does this get loaded in on the login page too? could be usefull to highjack that page for 3th party login methodes or something

(if you know what you are doing ofc)

[bmusson]

Back again with some highly-questionable antics.

head_top.txt

<script>

const root = document.querySelector(':root');

document.addEventListener("mousemove", (e) => {
  root.style.setProperty("--mousemove-clientX", e.clientX + "px");
  root.style.setProperty("--mousemove-clientY", e.clientY + "px");

  root.style.setProperty("--mousemove-pageX", e.pageX + "px");
  root.style.setProperty("--mousemove-pageY", e.pageY + "px");
  
  root.style.setProperty("--mousemove-screenX", e.screenX + "px");
  root.style.setProperty("--mousemove-screenY", e.screenY + "px");
});

document.addEventListener("mousedown", (e) => {
  root.style.setProperty("--mousedown-clientX", e.clientX + "px");
  root.style.setProperty("--mousedown-clientY", e.clientY + "px");

  root.style.setProperty("--mousedown-pageX", e.pageX + "px");
  root.style.setProperty("--mousedown-pageY", e.pageY + "px");
  
  root.style.setProperty("--mousedown-screenX", e.screenX + "px");
  root.style.setProperty("--mousedown-screenY", e.screenY + "px");
});

document.addEventListener("mouseover", (e) => {
  root.style.setProperty("--mouseover-id", '"' + e.target.id + '"');
});

</script>

This makes the mousemove and mousedown positions available as CSS custom properties on the root.

Edit:
This can be used to create performant dragging functionality, by moving the mousemove values into session properties.

  window.__client.page.sessionCustom.write('mousemove', {
    clientX: e.clientX,
    clientY: e.clientY,
    pageX: e.pageX,
    pageY: e.pageY,
    screenX: e.screenX,
    screenY: e.screenY
  });

In this example:

1. While dragging, the position of the box is set using CSS properties for a smooth experience.
2. While dragging, in the background, the position of the box is stored in tags using the onMouseMoved component event.
3. All non-dragging sessions use the tag values for the position of the box. (Animation could also be applied to the non-dragging sessions to smooth the movement out).

[victordcq]

i guess this is simpler to implement with limited js knowledge, than the mutation observers and js i used.
But my js dnd method is correcter to do than use this css hack. But i guess its not as easy to make it general.

ive not really experimentent with the general html page yet, i kinda forgot about it cuz i was busy at the time you created this. But this made me interested again, tobad im kinda busy again