Best way to read data into a plugin?

[stuartofmt]

Disclaimer: I'm very new to javascript and vue (and unlikely to pursue much beyond this plugin).

I almost have a plugin for DuetLapse3 fully working (I hope).

I cannot work out how to get a configuration value into the vue file.

DuetLapse3 provides its own interface via http which I expose (in the plugin), via an iframe. This works well when I hard-code the url as http://localhost:xxxx or http://ip-address:xxxx

The port number is arbitrary and set in a separate config file for DuetLapse3.

I realize that I cannot read from the DuetLapse3 config file (browser based local file access and all that).

I though perhaps adding a "data": {} section to plugin.json with the target url -- but how to access that in the script section of the vue file?

Or is there a simpler way?

Any code snippets would be extremely helpful.

Thanks in advance.

[MintyTrebor]

@stuartofmt - If I have understood your question correctly then this might help:

There are built in functions in DWC to save and load data from both the SD card and browser cache/cookie. Either would work to store configuration data entered by the user for later retrieval, with the SD card option being browser independent.

From memory if you search the DWC source for examples of 'localstorage' for cache/cookie stuff and 'machineDownload' and 'upload' for SD card functions you should be able to find working examples. Take note of the imported objects that are required to support the built in functions, like 'path'.

If it helps - you can see how I use these built in features in BtnCmd here - look for the loadSettingsFromFile() , and saveSettingsToFile() functions for examples of using the SD card approach, or saveSettings(), and loadSettings() for examples of cache/cookie approach.

[stuartofmt]

@MintyTrebor said in Best way to read data into a plugin?:

@stuartofmt - If I have understood your question correctly then this might help:

There are built in functions in DWC to save and load data from both the SD card and browser cache/cookie. Either would work to store configuration data entered by the user for later retrieval, with the SD card option being browser independent.

Thanks - I will take a look. Perhaps placing the config file for my python script on the SD card and have a single source of info.

[MintyTrebor]

@stuartofmt said in Best way to read data into a plugin?:

Perhaps placing the config file for my python script on the SD card and have a single source of info

Yep that will work, and I use the same approach with my SBCC python code. If you look here, for the python code to create the config file, you should find a working example, with the corresponding DWC code in here.

[stuartofmt]

@MintyTrebor @chrishamm

I am very close but no cigar. Javascript "Promises" but does not deliver.

I need HELP!

I am trying to read a text file (not json) into a string variable so that I can further parse it.

The program works in that it does get the content of the test file (bed.g just for convenience) and resolves the content with console.log().

What it stubbornly refuses to do (despite many, many permutations and my best googling) is put the text of the file into a variable.

Here is the output:

and here is the actual code:

<style scoped>
	.iframe-container {
		position: relative;
		overflow: auto;
		background-color: transparent;
	}
	.iframe-container iframe {
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
</style>

<template>
<div>
    <p>{{version}}<br>
	   {{content}}<br>
	</p>
		<iframe :src= "url" width="100%" height="100%" frameborder="1">
			<span>Your browser does not support iFrames</span>
		</iframe>
</div>
</template>

<script>
import {mapState, mapActions} from 'vuex';
import Path from '../../utils/path.js';
import { DisconnectedError, OperationCancelledError } from '../../utils/errors.js';

const url = 'http://localhost:8084';
const configFile = 'bed.g';

export default {
	data() { 
	return{'version': '4,927','url': url,};
	},
	methods: {
		...mapActions('machine', {machineDownload: 'download'}),
		
                 //file load from @ mintyTrebor modified with return 
		async loadSettingsFromFile() {
			//Load the DuetLapse.config file
			try {
				const setFileName = Path.combine(this.systemDirectory, configFile);
				const response = await this.machineDownload({ filename: setFileName, type: 'text', showSuccess: false, showError: false });
				console.log(response);
				return response;
			} catch (e) {
				if (!(e instanceof DisconnectedError) && !(e instanceof OperationCancelledError)) {
					console.warn(e);
					console.warn("File Does Not Exist");
				}
			}
		}	
	},
	
	// use computed instead of methods cuz we only want it to run once
	computed:{
		...mapState('machine/model', {
		systemDirectory: (state) => state.directories.system
		}),
	content() {
		return this.loadSettingsFromFile();
		}		
	}
}	
</script>

[MintyTrebor]

@stuartofmt This should work:

<style scoped>
	.iframe-container {
		position: relative;
		overflow: auto;
		background-color: transparent;
	}
	.iframe-container iframe {
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
</style>
 
<template>
<div>
    <p>{{version}}<br>
	   {{content}}<br>
	</p>
		<iframe :src= "url" width="100%" height="100%" frameborder="1">
			<span>Your browser does not support iFrames</span>
		</iframe>
</div>
</template>
 
<script>
import {mapState, mapActions} from 'vuex';
import Path from '../../utils/path.js';
import { DisconnectedError, OperationCancelledError } from '../../utils/errors.js';
 
const url = 'http://localhost:8084';
const configFile = 'bed.g';
 
export default {
	data() { 
		return{
			version: '4,927',
			url: url,
			fileContent: null		
		};
	},
	methods: {
		...mapActions('machine', {machineDownload: 'download'}),
		
        //file load from @ mintyTrebor modified with return 
		async loadSettingsFromFile() {
			//Load the DuetLapse.config file
			try {
				const setFileName = Path.combine(this.systemDirectory, configFile);
				const response = await this.machineDownload({ filename: setFileName, type: 'text', showSuccess: false, showError: false });
				console.log(response);
				this.fileContent = await response;
				//return response;
			} catch (e) {
				if (!(e instanceof DisconnectedError) && !(e instanceof OperationCancelledError)) {
					console.warn(e);
					console.warn("File Does Not Exist");
				}
			}
		}	
	},
	
	// use computed instead of methods cuz we only want it to run once
	computed:{
		...mapState('machine/model', {
			systemDirectory: (state) => state.directories.system
		}),
		content() {
			return this.fileContent;
		}		
	},
	mounted() {
		this.loadSettingsFromFile();
	},


}	
</script>

I just quickly tested the above on my dev box and it showed the contents of the file on screen:

Obviously there are other ways of achieving this, this was just a quick example.
I believe the issue is how you were using 'computed' with async functions...

[stuartofmt]

@MintyTrebor said in Best way to read data into a plugin?:

@stuartofmt This should work:
Obviously there are other ways of achieving this, this was just a quick example.
I believe the issue is how you were using 'computed' with async functions...

Many, many thanks! This was driving me crazy.
Onward ..... !!!!