SD Card upload files on www

Inhar

Hi everyone,

I keep trying a lot of time to get the files of the SD Card related with the Duet Web Control-master files. I saw that in Duet Web Control-master are files like .vue and in the SD Card file appear all in .css and .js . I need to know how can I get this format from my .vue files.

I want to do a plugin and I need firstly know how are related those two files, because there are different archives.

Also I need to know how can I minimize the codes. In SD Card file are archives like "app.e2701cec.css" and in there are more than one code together.

Please, I need help, it can be a very good chance for all of us and for the web.

Phaedrux

Perhaps @chrishamm will have more specific guidance, but take a look at this example plugin

https://github.com/Duet3D/DSF-Plugins/tree/main/EndstopsMonitor

Inhar

@Phaedrux oh, thank you very much, but I have a problem. I don´t know how to use the commands of npm like "npm run serve" for example. I need an app for that? Or where can I execute this commands?

chrishamm

@Inhar You must compile the web interface when changes have been made and that is achieved by running npm run build in the root directory of the web interface. See npm for further details.

There are lots of tutorials for web development using NodeJS on the internet, I suggest you make yourself familiar with it before you continue with DWC customisations.

Inhar

@chrishamm thank you, I get it.

I have a new question, I need help also with a concrete thing. I´m looking for a button that sends a M command automatically. I want a button, that when you press it, you send the command M587 with S, P, I, J and K. I know this command is for memorize the nertworks data, and I know also I have a button in the "consoles send code input" but I want to do in other part.

Let see if you can understand me:
I have a table done, with 5 text boxes and a button. You enter the name of the wifi, the password, the IP direction... each one on his text box. And when you press the button, I want to send the command M587 with all the information. How can I do this?

Thank you!

Inhar

@chrishamm here you have the code I have written.

Only the part of the script, I need the functions work right.

import { mapState, mapActions, mapGetters } from 'vuex'

export default {
computed: {
...mapState('machine',['sendCode'])
...mapGetters(['isConnected'])
},
data(){
return{
networks:[
{ssid: '',
password: '',
direccionIP: '',
NetMask: '',
GetWay: ''}
],
nuevoWifi: '',
nuevaContraseña: '',
nuevaDireccion: '',
nuevaNetMask: '',
nuevaGetWay: '',
waitingForCode: false
}
},
props: {
code: {
type: String,
required: true
},

},
methods: {
...mapActions('machine',['sendCode']),
agregarWifi() {
    this.networks.push({
      ssid: this.nuevoWifi,password: this.nuevaContraseña,direccionIP: this.nuevaDireccion,NetMask: this.nuevaNetMask,GetWay: this.nuevaGetWay
    });
	this.nuevoWifi = '';
	this.nuevaContraseña = '';
	this.nuevaDireccion = '';
	this.nuevaNetMask = '';
	this.nuevaGetWay = '';
            waitingForCode=false
  },
guardarWifi(){
	if (!this.isConnected) {
		return;
	}
		this.waitingForCode = true;
		try{
			this.sendcode({code:`M587 S${this.ssid} P${this.password} I${this.direccionIP} K${this.netMask} J${this.GetWay}`});
		}catch (e) {
				// handled before we get here
		}
		this.waitingForCode = false;
	}
}, //this is another form I was thinking, here I have to include props(log and noWait)
async eliminarWifi(index){
	this.networks.splice(index,1);
	if (!this.waitingForCode) {
		this.waitingForCode = !this.noWait;
		try{
			await this.sendcode({code:`M588 S${this.nuevoWifi}`, log:this.log, showSuccess: !this.noWait});
		}catch (e) {
				// handled before we get here
		}
		this.waitingForCode = false;
	}	
}
}

};
</script>

Inhar

@chrishamm I want to send you also the part of the template, but I cant.

I need only the part of the buttons. I have only this:

chrishamm

@inhar Please encapsulate code parts next time in blocks starting and ending with ```, that will make your code better to read. Here a slighly improved version (but still untested):

<script>
'use strict'

import { mapState, mapActions, mapGetters } from 'vuex'

export default {
	computed: {
	...mapState('machine',['sendCode'])
	...mapGetters(['isConnected'])
	},
    data(){
        return{
        networks:[ 
            {ssid: '',
            password: '',
            direccionIP: '',
            NetMask: '',
            GetWay: ''}
		],
            nuevoWifi: '',
            nuevaContraseña: '',
            nuevaDireccion: '',
            nuevaNetMask: '',
            nuevaGetWay: '',
			waitingForCode: false
		}
    },
    methods: {
	...mapActions('machine',['sendCode']),
    agregarWifi() {
        this.networks.push({
          ssid: this.nuevoWifi,password: this.nuevaContraseña,direccionIP: this.nuevaDireccion,NetMask: this.nuevaNetMask,GetWay: this.nuevaGetWay
        });
		this.nuevoWifi = '';
		this.nuevaContraseña = '';
		this.nuevaDireccion = '';
		this.nuevaNetMask = '';
		this.nuevaGetWay = '';
                waitingForCode=false
      },
	async guardarWifi(){
		if (this.isConnected && !this.waitingForCode) {
			this.waitingForCode = true;
			try{
				await this.sendCode({code:`M587 S${this.ssid} P${this.password} I${this.direccionIP} K${this.netMask} J${this.GetWay}`});
			} finally {
				this.waitingForCode = false;
			}
		}
	}, //this is another form I was thinking, here I have to include props(log and noWait)
	async eliminarWifi(index){
		if (this.isConnected && !this.waitingForCode) {
			try{
				await this.sendCode(`M588 S${this.nuevoWifi}`);
				this.networks.splice(index,1);
			} finally {
				this.waitingForCode = false;
			}
		}	
	}
    } 
};
</script>

There were a few errors in your code like mixed async/sync calls, bad casing (sendcode instead of sendCode), and references to non-existing fields, so I suspect that's why it didn't work for you.

Inhar

@chrishamm I have done the plugin. The plugin is a Wifi Saver. You enter the wifi´s name, the password, and also you have the option to insert the IP adress, Net Mask and Get Way, but they are not required. When you enter de datas, you have a button that when you press it sends a M587 code remembering the networks data. You can also delete this networks data pressing another button.
The reason that I create this plugin is to have facilities when you want to remember a network in the web page.

What do you think about it?