• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Webseite für Siemens CPU

Seite 3
Datei update11.html

<!-- AWP_Start_Fragment Name="Update11" ID="1" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>iframe page</title>
<script type="text/javascript">
function Update()
{
// when loading this page the function Update will be called automatically (see body tag)
// ForceUpdate is a JavaScript-function in the main page demo11.html
// for processing the provided value.
// The webserver will replace the reference to the variable "dynvalue" in the next line by the actual value of that
// PLC variable.
//
// Since this page is set "manual" (in AWP_Start_Fragment - statement at begin of the page), a dedicated
// user program within the PCL is triggered when this page is requested and will then defer the HTTP response
// until the variable value has been changed

// <colon><equalsign><Variablenname><colon> is the common syntax for variable references
parent.ForceUpdate(:="VelocityVariables".dynValue:);
}
</script>
</head>

<body onload="Update()">
</body>

</html>
 
Habe ich durch fetch('control_motor.html',... ersetzt, aber leider kein erfolg. Angefügt die Netzwerkanalyse "Anfrage".
 

Anhänge

  • Screenshot (8).png
    Screenshot (8).png
    354,7 KB · Aufrufe: 3
Der Support hat nur den Link zu dem Beispiel geschickt. Ich habe inzwischen aber ein Javascript optimiertes Tanksimulations Demo gefunden (das Demo von dem ich im Beitrag #6 den Code geschickt habe) Hierbei werden die Buttons mit dem javascript verarbeitet. Es gibt dort 4 Buttons "startButton , stopButton , resetButton und flowrateButton. Ich habe da im Javascript einen testButton eingefügt und der funktioniert auch.
Hier das Javascript:

"use strict"; // prevent lazy programming in JavaScript :)

// image array for plantStatus image
var img_array = new Array();
img_array[0] = new Image();
img_array[0].src = "Images/Status00.png"; // OFF
img_array[0].alt = "Plant Status := OFF"; // OFF
img_array[1] = new Image();
img_array[1].src = "Images/Status01.png"; // ON
img_array[1].alt = "Plant Status := ON"; // ON

// URL for dataFile
var URL = "Script/StartOpti.json"

// every time if the DOM refresh
$(document).ready(function() {

S7Framework.initAuto("#loading_div", $.init);
} );

$.init = function(){

// read Values first time
S7Framework.readData(URL, "init read data", deployValues);

//EVENTHANDLING
// START Button
$("#startButton").click(function(){
var data = '"Web2Plc".start=1'+'&'+'"Web2Plc".stop=0';
S7Framework.writeData(URL, data, "START");
});

// STOP Button
$("#stopButton").click(function(){
var data = '"Web2Plc".start=0'+'&'+'"Web2Plc".stop=1';
S7Framework.writeData(URL, data, "STOP");
})

// RESET Button
$("#resetButton").click(function(){
var data = '"Web2Plc".reset=1';
S7Framework.writeData(URL, data, "RESET");
})

// TEST Button
$("#testButton").click(function(){
var data = '"Web2Plc".test=1';
S7Framework.writeData(URL, data, "TEST");
})

// FLOWRATE Button
$("#flowrateButton").click(function(){
var flowrate = $("#flowrate").val();
if ( (flowrate >= 1 && flowrate <= 10 ) == false)
{
alert("Value must be between 1 and 10!");
return;
}
else{
var data = '"Web2Plc".flowrate=' + flowrate;
S7Framework.writeData(URL, data, "FLOWRATE");
}
})
}


// function to deploy values into Webpage
function deployValues(values)
{
var img;
if (values[0] == false)
{
img = 0;
}
else
{
img = 1;
}

$('#plantStatus').attr({
src: img_array[ img ].src,
title: img_array[ img ].alt,
alt: img_array[ img ].alt
});

$('#actFlowrate').html( values[1] );
$('#tankLevelScale').html( values[2] );
$('#tankLevelScaleImg').width( values[2] + "%");

// read Values cyclically
setTimeout(S7Framework.readData(URL, "init read data", deployValues), 1000);
}
 
Habe noch das StartOpti.json vergessen.

{
"val" : ":="Web2Plc".dataStartString:",
"len" : "1;4;4",
"typ" : "0;2;2",
"str" : ""
}

<!-- AWP_In_Variable Name='"Web2Plc".start' -->
<!-- AWP_In_Variable Name='"Web2Plc".stop' -->
<!-- AWP_In_Variable Name='"Web2Plc".reset' -->
<!-- AWP_In_Variable Name='"Web2Plc".flowrate' -->
<!-- AWP_In_Variable Name='"Web2Plc".test' -->

Die Variable '"Web2Plc".test' habe ich hinzugefügt.
 
Hallo, hier der head-bereich indem die scripte eingebunden werden.
<head>
<title>Userdefined Website - Application Start</title>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link type="text/css" rel="stylesheet" href="Stylesheet/siemens_Stylesheet.css"/>
<link type="text/css" rel="stylesheet" href="Stylesheet/bootstrap.min.css">
<script type="text/javascript" src="jsLib/jquery-2.2.0.min.js" ></script>
<script type="text/javascript" src="jsLib/S7_framework.js" ></script>
<script type="text/javascript" src="Script/StartOpti.js" ></script>
</head>
Im Anhang das gezipte s7framwork script
 

Anhänge

Welches Script soll ich ändern? Das Was Du oben beschrieben hast sieht aus wie das StartOpti.json Beitrag#44
und StartOpti.js wie Beitrag#43
 
Hurra!!! es funktioniert,Super. Wahnsinn, was für ein Aufwand um einen in der Automatisierungstechnik simpelen Button zu erstellen. Die Funktion "Button" ist damit gelöst, jetzt brauche ich noch einen "Switch" Funktionsweise: einmal drücken = 1
nochmal drücken = 0, also toggle Funktion.
Mein nicht funktionierender Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Userdefined Website - Application Start</title>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jsLib/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="jsLib/S7_framework.js"></script>
<script type="text/javascript" src="Script/StartOpti.js"></script>
</head>

<body>
<input type="button" id="frgbtn" value="Freigabe">
<script>
const url = "Script/StartOpti.json";
const btn = document.getElementById('frgbtn');
btn.addEventListener('mousedown', event => {
const swh = '"DB_Motor".freigabe';
if(swh == 0)
{
var data = '"DB_Motor".freigabe=1';
}
else if(swh == 1)
{
var data = '"DB_Motor".freigabe=0'
}
S7Framework.writeData(url, data, "FREIGABE");
});
</script>
</body>
</html>
 
{
"val" : ":="Web2Plc".dataStartString:",
"len" : "1;4;4",
"typ" : "0;2;2",
"str" : ""
}
<!-- AWP_In_Variable Name='"DB_Motor".Motor_vor' -->
<!-- AWP_In_Variable Name='"DB_Motor".freigabe' -->

und die html Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Userdefined Website - Application Start</title>
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jsLib/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="jsLib/S7_framework.js"></script>
<script type="text/javascript" src="Script/StartOpti.js"></script>
</head>
<style>
#frgbtn {
background-color: lightsalmon;
}

#frgbtn.frei-ein {
background-color: lightgreen;
}
</style>

<body>
<input type="button" id="frgbtn" value="Freigabe">

<script>
const url = "Script/StartOpti.json";
const btn = document.getElementById('frgbtn');
btn.addEventListener('click', event => {
if(btn.classList.contains('frei-ein'))
{
var data = '"DB_Motor".freigabe=0';
}
else
{
var data = '"DB_Motor".freigabe=1';
}
btn.classList.toggle('frei-ein');
S7Framework.writeData(url, data, "FREIGABE");
});
</script>
</body>
</html>
 
Ich habe in meiner Visualisierung mehrere Buttons und Switches, ist da sinnvoll wenn ich die Scripte in einen eigenen JS-Datei im Script Ordner lege anstatt auf die HTML-Seite zu legen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben