Expose Ignition tags to WebDev applications

I have successfully created a simple WebApp written in HTML / javascript which is hosted on the ignition gateway via the WebDev module.

I have used ajax GET and POST methods in the WebApp to talk to SQL tables via python resources.

What i am trying to do now is be able to write a GET / POST script in python resource that will allow me to read and write Ignition tags from the WebApp.

I tried a basic example of sending a tagPath string from the WebApp and tried reading the tag and sending the value back. But ran into the issue of not being able to pass “/” as part of a tagPath variable in an ajax GET method.

What is the best way to properly expose tags to a web interface?

Here is the example i have tried, hardcoding the tagPath into the python resource directly (still doesn’t work).

Javascript code in WebApp:

function.getTag(tagPath){
    formData = {"tagPath": tagPath};

    $.ajax({
        type: "GET", 
        url: "../python/tag",
        data: formData,
        success: function(result){
            console.log(result);
        },
        error: function(){
            console.log("Error with getTag function");
        },
        contentType: "application/x-www-form-urlencoded"
    });
}

Python GET method Code in Ignition WebDev module ‘tag’ resource:

def doGet(request, session):
	import system
	
	#tagPath = request['params']['tagPath']
	#tagVal = system.tag.read('temp/'+tagPath).value
	
	tagVal = system.tag.read('temp/testMemReal').value
	return {'json': system.util.jsonEncode(tagVal)}

Have you tried using the tag provider in the tag path?

Ah yep, adding [default] to start of the tagpath worked, and i can now read and write tags.
Awesome, thanks!

Is it possible to read and write Array or Dataset tags through this method? Doesn’t seem to be working.

Not sure… might need to be on 7.9 for it to work.

HI Kevin,

Can you please help the value what i have to place in tagpath…

@Kevin.Herron
i want to update tag history data into the chart with ajax but i couldn't update the next data into the ajax, can you please help me on that

i have updated the code below

	endTime = system.date.now()
	startTime = system.date.addMinutes(endTime, -30)
	path1 =['[SPA_SCADA]WB001/FIN001/Bpl1/FP001/BOO001/Status/Actual_Speed'] 
	dataSet = system.tag.queryTagHistory(paths=path1, startDate=startTime, endDate=endTime, returnSize=10, aggregationMode="Maximum", returnFormat='Wide')
	pydata = system.dataset.toPyDataSet(dataSet)
	t_stamp = map(lambda row: str(row[0]),pydata)
	speed = map(lambda row: str(round(row[1],1)),pydata)
#	return{'json':{'t_Stamp1':str(t_stamp),'speed1':str(speed)}}
	

	html = """
	<html>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
	
	<div id="chart"></div>
	<script type="text/javascript">

        var options = {
          series: [
          {
            name: "Speed",
            data: """+str(speed)+"""
          }
        ],
          chart: {
          height: 350,
          type: 'line',
          dropShadow: {
            enabled: true,
            color: '#000',
            top: 18,
            left: 7,
            blur: 10,
            opacity: 0.2
          },
          toolbar: {
            show: false
          }
        },
        colors: ['#77B6EA', '#545454'],
        dataLabels: {
          enabled: true,
        },
        stroke: {
          curve: 'smooth'
        },
        title: {
          text: 'Average High & Low Temperature',
          align: 'left'
        },
        grid: {
          borderColor: '#e7e7e7',
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        markers: {
          size: 1
        },
        xaxis: {
          categories: """+str(t_stamp)+""",

        },
        yaxis: {
          title: {
            text: 'Temperature'
          },
          min: 5,
          max: 250
        },
        legend: {
          position: 'top',
          horizontalAlign: 'right',
          floating: true,
          offsetY: -25,
          offsetX: -5
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
        
			function updateChartSeries() {
			  
			  // Replace data to existing Chart
			  chart.updateSeries([
			    {
			      name: "Speed",
			      data: """+str(speed)+"""
			    }
			  ]);
			}
        
        setInterval(updateChartSeries,1000);

This has got nothing to do with the topic, you should start a new topic with your question..