How to add Custom images

hi just replace the image on the plugin directory, hope you got enough knowledge about the wp directory structure.

Just look for the folder thermometer if not mistaken. Look for the images folder then replace the image there, note: make it the same filename.

Thanks for your quick reply. I have made changes as your way.After changing i my images is shown like this .
Please take a look : https://portfolio.dtunes.pw/
in the sidebar.
The process color is not fill up the total images.How can i do it?Please help me.
Thanks

cant access the site. the color fill is made by javascript in an html canvas.

Can you give me the js code or where should i change?.I can’t find it.please give me direction.
thanks
eyouth.ace

you have to customize the the script. and make a some test on how much width it would occupy the image. right now the color fill can be made through a square or rectangle and not a custom drawing just like yours. you need to modify the code to make it wat you want.

where i will find the code in your plugin directory. Please indicates that.

yes you can find that there – thermometer.js

Here is your thermometer.js code:

which code i need to install :

// JavaScript Document
var wpchimg;
var wpch_target;
var wpch_current;

function drawLiquid(ctx, iTempToYCoord) {
	/* Draw red rectangle to represent the fluid in the glass tube
	 * Coordinates you Y and are fixed!
	 * TODO: Calculare Y coord base on image X,Y
	 * Fixes : calculations to apply for this plugin only...
	 */

	var iX_POS = 82,
		iY_POS = 11,
		iY_OFFSET = 400,
		iWIDTH = 30;

	ctx.fillStyle = "rgb(211, 5, 5)";

	// Draw rectangle from 0 to Current value

	var ratio = 275 / wpch_target;

	iTempToYCoord = wpch_current * ratio;

	var y_start_coord = (275 - iTempToYCoord) + 50

	//Self explanatory...

	if (navigator.userAgent.match(/msie/i) && navigator.userAgent.match(/6/)) {
		var _mtop =  Math.round( -(120 + iTempToYCoord) + (iTempToYCoord * .175));
		jQuery('#wpch_cti_img').css({ 'margin-top' : _mtop+'px', 'position' : 'absolute' });
	}else{
		var _mtop =  Math.round( -(120 + iTempToYCoord) + (iTempToYCoord * .175));
		jQuery('#wpch_cti_img').css({ 'margin-top' : _mtop+'px', 'position' : 'absolute' });
	}

	ctx.fillRect(iX_POS, y_start_coord, iY_POS, iTempToYCoord );

	ctx.stroke();
}

function imgOnLoaded() {
	/* Simply grabs a handle to the canvas element and
	 * check the context (Canvas support).
	*/

	var canvas = document.getElementById('thermometer'),
		ctx = null,
		iTemp = 0,
		iRatio  = 0,
		iTempToYCoord = 0;

	// Canvas supported?
	if (canvas.getContext) {

		ctx = canvas.getContext('2d');

		// Draw the loaded image onto the canvas
		ctx.drawImage(wpchimg, 0, 0);

		// Draw the liquid level
		drawLiquid(ctx, iTempToYCoord);

	} else {
		alert("Canvas not supported!");
	}
}

function draw() {
	/* Main entry point got the thermometer Canvas example
	 * Simply grabs a handle to the canvas element and
	 * check the conect (Canvas support).
	 */

	var canvas = document.getElementById('thermometer');

	if ( !canvas ){ return; }

	// Create the image resource
	wpchimg = new Image();

	// Canvas supported?
	if (canvas.getContext) {
		// Setup the onload event
		wpchimg.onload = imgOnLoaded;

		// Load the image
		wpchimg.src = jQuery('#wpch_therm_img').attr('src');

	} else {
		alert("Canvas not supported!");
	}
}

function setTempAndDraw() {
	/* Function called when user clicks the draw button
	 */
	//var _current = document.getElementById('wpch_cti_img');
	var temp = document.getElementById('wpch_cur_data_txt_value'),
		slider = document.getElementById('wpch_slider');

	if (temp !== null && slider !== null) {
		temp.value = slider.value;
		wpch_current = slider.value;
		var _symbol = jQuery('#wpch_frm_data_currency option:selected').text();
		jQuery('#wpch_cti_img').text(_symbol+''+slider.value);
		draw();
	}
}

please give me direction.

These are the variables on the liquid fill.

Try to do some test on the iWIDTH for maximum width.

var iX_POS = 82,
iY_POS = 11,
iY_OFFSET = 400,
iWIDTH = 30;

This is the color of the fill

ctx.fillStyle = “rgb(211, 5, 5)”;

Just try to do some test.. on that. you can also do some test on the percentage maybe later.

Thanks for your help.I will inform you later.
Again thanks

Thanks