Dynamically changing a image, stored in the image manager

Hey,

I am trying to change a image source for an image, but it doesn't update. I've already read, that URLs can refreshed by adding a unused 'timer'-query parameter, to force the browser to refresh the image cyclically.
Is there an option to do something like this for an image:

  • hosted on the gateway (uploaded via Image Management from '/system/images/')?
  • when a session or any other property changes

Kind regards

I'm not sure that will work for Image Management, as those are actually stored in the internal config DB. (It's really bad to update that dynamically, too, as the internal DB is both fragile and fundamentally necessary.)

You should use WebDev for dynamic image operations. (Or, perhaps, my Blob Server.)

1 Like

Oh maybe I explained the situation not well enough, or I have a misunderstanding here. I meant having 2 different pictures stored in the internal config DB, with 2 different names.
Now i basically want to exchange one for another on a property change.
Just setting the source different doesn't work, because se image isn't reloaded.

You are going to have to share more about the specifics of your case.

There are 2 images with different names before.jpg and after.jpg via image management.

Also we have 2 different containers, one to show information to the user including the image, one to input data. Genrally only on of 4 input components is displayed, after one field is filled, the next component is visible, until all are entered. (some kind of walk-through or guide)

When entering something on the first input field, there is a OnKeyDown script, with the event.key == Enter, which executes some API calls (try-except to catch errors), writes a Tag and updates the display property of the next input field to 'True'. (To have some kind of guidance for Operators through the input process.)
All of this is working fine.

What I want to do now is, in the same moment, the OnKeyDown is executed, i want the image 'system/image/before.jpg' to be exchanged with 'system/image/after.jpg' (in the user information container).
I'd like to only use one image-component, because we might extend this guide with more pictures and adding a lot of components on top of each other, while playing with the display property doesn't seem to be maintainable and sophisticated

Edit: formatted

We still can't see what is happening. If you can't share actual code and/or view JSON, you may need to open a support ticket and let IA look.

def runAction(self, event):
	import pallets
	import project.manual_stations.validation_checks as validation
	from project.manual_stations.exceptions import BarcodeTypeError, APITransactionError
	
	if event.key == 'Enter':
	
		PalletID = self.props.text.upper()
		environment = self.session.custom.environment
		actor = self.session.custom.actor
		
		try:
			if project.manual_stations.format_data.determine_object_type(PalletID) == 'pallet_id' :#and validation.check_dispatches(PalletID, environment, actor) == 0:			
				
				self.session.custom.PalletInfo.palletID = self.props.text
				self.parent.parent.parent.getChild("Serial").getChild("Input").getChild("Input").focus()
				
				self.parent.parent.parent.parent.getChild("Description").getChild("Image").props.source = '/system/images/Ingress/' + self.session.custom.station.tags.line + '-uniqueID.jpg'
				
			else:
				raise UserWarning('Bitte korrekte PalletID eingeben')
				
		except BarcodeTypeError, error:
			self.session.custom.ErrorHandling.APIErrorBody = error.function_parameters
			self.session.custom.ErrorHandling.ErrorText = error.error
			system.perspective.openPopup('ErrorPopUp', 
										'Components/Popups/APIErrorPopUp', 
										params = {'text' : 'GetThingInfo Error',
													'id' :	'ErrorPopUp'})

You have perspective tagged so it sounds to me like you're just trying to conditionally cycle what image is displayed in an image control.

You can do that with a map transform on the "source" property.

Here's a simple example.

I don't see anything there that manipulates an image component's source. :man_shrugging:

Other notes:

  • Do not use import in event scripts. Use import only at the outer level of project library scripts.

  • Do not use import with project library scripts. Always use fully qualified names of objects in other project library scripts.

  • Avoid using cross-component references with .parent and/or .getChild() and/or .getSibling(). Instead, use view custom properties to hold user input values and bidirectionally bind the input component to the view custom prop. Then your scripts can all use self.view.custom.someProp instead of using fragile component lookups.

2 Likes

this changes the image-source.

okay, will check your note, thanks for the hint.

There's a fundamental thing that often trips new users: Don't tell components what to do. Tell them the situation, and let the component itself do its own thing.

Example in this situation: You're telling the image component what source it should use.
Instead, tell it what happened, and let it load the proper source.

How do you make a component aware of the current situation ?
The most common methodology, and the one you should think of first, is bindings.

So, you just scanned a barcode, and you want an image displayed that reflects the success status of that scan.
Make a custom property that holds whether or not the scan was successful, then bind the image component to that property. Then add an expression or map transform to pick the proper image to be displayed.

The other common way to propagate information to components is messages. You can broadcast a message and let the interested components catch it, and implement whatever logic necessary in a message handler.

5 Likes

There's a fundamental thing that often trips new users: Don't tell components what to do. Tell them the situation, and let the component itself do its own thing.

Yeah, ignition (and scada systems more generally) are half procedural, half declarative/state machines, but they're disguised in imperative languages in a conceptually deceptive way. SQL is a way better model for the internals of Ignition than Python is.

When will Ignition launch Prolog scripting

Meh. This covers pretty much every general-purpose GUI, include Windows, Mac, and X, and the languages that drive them.

Relatedly, React and Elm :slight_smile: