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

html: Bildaufruf mit variablen-wert als teil der Dateiname (indirekte Adressierung)

timmertechnik

timmertechnik

Neues Mitglied
Moin Experten,

kann mir jemand eine(n) Lösung(sansatz) geben wie ich der wert eine Variable in der Dateiname "einbau"?

Das anzeigen klappt wunderbar mit:

<div id="VarId1">VALUE1</div>


Nun soll ich ein Bild abhängig vom Variablenwert Anzeigen, anstelle des X soll der wert aus der Variable eingefügt werden:

<img src='Start-Dateien/1000X'.png' width="563" height="215">

damit am ende 10000.png, 10001.png, 10002.png oder 10004.png angezeigt wird.


Ich probiere und Google jetzt schon seit 2 Tage, habe aber noch keine Lösung gefunden die Variable über seine id auf zu rufen und ein zu fügen o.ä.

Vielen Dank
 
meinst du das so
HTML: 
<body>
  <div id="var1">homer</div>
  <div id="aus"></div>
<script>
 wert=document.getElementById('var1').innerHTML;
document.getElementById('aus').innerHTML='<img src="http://sebastian1012.bplaced.net/bilder/'+wert+'.jpeg">';
  </script>
</body>
 
leider nein, von der Variable der auf eine andere Seite definiert wird
HTML: 
<body onload="mainJavaScript()">
        
        <table id="singleVariablesTable" border="1">
            <tr>
                <td>
                    Variablenwert
                </td>
                <td>
                    ID
                </td>
                <td>
                    Variable
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."10000":
                </td>
                <td>
                    VarId1
                </td>
                <td>
                    DB_Anlagenstatus.10000
                </td>
            </tr>
        </table>

    </body>

soll der wert ein TEIL der angezeigter Dateiname werden. :="DB_Anlagenstatus".10000": ist ein wert der aus eine SPS gelesen wird

Dieser Wert kann ich Anzeigen:
HTML: 
Wert der erste Variable (in DIV-element): <div id="VarId1">VALUE1</div>

aber dieser wert soll das X erseten damit ich das richtige Bild Anzeige:
HTML: 
<body>
    
    <!-- Modul 10000 -->
    <div>
    <span style='position:absolute;left:234px;top:825px'>
    <img src='Start-Dateien/1000X.png' width="563" height="215">
    </div>
</body>
 
Ehrlich gesagt verstehe ich es trotzdem nicht ,ich komme trotzdem noch auf das Script in post2 .Statt homer steht dann da dein Wert
DB_Anlagenstatus.10000.

Warten wir mal ab bis einer kommt der ausgeschlafener ist als ich,ich scheckes heute wohl nicht mehr.
 
basti1012 schrieb:
ich komme trotzdem noch auf das Script in post2
Zum Vergrößern anklicken....
Und ich auch...

Was basti mach ist, er ließt den Text aus dem div aus und setzt ihn als Variable. In dem div mit der ID 'aus', gibt er dann das Bild aus.
Ein wenig 'sauberer' geschrieben, sieht der Code so aus.

HTML: 
<body>
  <div id="var1">Variable_aus_Datei</div>
  <img id="aus" src="" alt="">
  <script>
       wert=document.getElementById('var1').innerHTML;
       document.getElementById('aus').setAttribute('src', 'Start-Dateien/1000'+wert+'.png');
  </script>
</body>
Was also soll jetzt falsch daran sein?
http://jsfiddle.net/bk26ta5o/

Schau es dir selbst an. Wenn du dir das src des img-Tags anschaust, ist es genau das, was du willst!
 
Es klappt nicht. Ich Poste mal meine ganze Code, erst mal die Seite die Fertig ist und Funktioniert. Die Seite sammelt und aktualisiert die Daten aus der SPS und stellt Sie in eine Tabelle dar:

HTML: 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
        <title>- Automatic update - Update page</title>
        <script type="text/javascript">
         /* String.trim() is not supported by every browser - thus add this functionality is necessary */
         if (!String.trim)
         {
            String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
         }
       
         /* Main function for calling the subroutines */
         function mainJavaScript()
         {
            updateSingleVariablesTable();
         }
           
         /* Function for updating the variables */
         function updateSingleVariablesTable()
         {
            var table = document.getElementById("singleVariablesTable");
            for(i = 1; i < table.rows.length; i++)
            {
                var tagValue = table.rows[i].getElementsByTagName("td")[0].innerHTML;
                var tagId = table.rows[i].getElementsByTagName("td")[1].innerHTML.trim();
                parent.document.getElementById(tagId).innerHTML = tagValue;
            }
         }
       
         setInterval("document.location.reload()",1000);
        </script>
    </head>
   
    <body onload="mainJavaScript()">
       
        <table id="singleVariablesTable" border="1">
            <tr>
                <td>
                    Variablenwert
                </td>
                <td>
                    ID
                </td>
                <td>
                    Variable
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."10000":
                </td>
                <td>
                    VarId1
                </td>
                <td>
                    DB_Anlagenstatus.10000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."20000":
                </td>
                <td>
                    VarId2
                </td>
                <td>
                    DB_Anlagenstatus.20000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."30000":
                </td>
                <td>
                    VarId3
                </td>
                <td>
                    DB_Anlagenstatus.30000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."40000":
                </td>
                <td>
                    VarId4
                </td>
                <td>
                    DB_Anlagenstatus.40000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."50000":
                </td>
                <td>
                    VarId5
                </td>
                <td>
                    DB_Anlagenstatus.50000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."60000":
                </td>
                <td>
                    VarId6
                </td>
                <td>
                    DB_Anlagenstatus.60000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."90000":
                </td>
                <td>
                    VarId7
                </td>
                <td>
                    DB_Anlagenstatus.90000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."100000":
                </td>
                <td>
                    VarId8
                </td>
                <td>
                    DB_Anlagenstatus.100000
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_1":
                </td>
                <td>
                    VarId9
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_1
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_2":
                </td>
                <td>
                    VarId10
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_2
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Engmatec_3":
                </td>
                <td>
                    VarId11
                </td>
                <td>
                    DB_Anlagenstatus.Engmatec_3
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_1":
                </td>
                <td>
                    VarId12
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_1
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_2":
                </td>
                <td>
                    VarId13
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_2
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_3":
                </td>
                <td>
                    VarId14
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_3
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_4":
                </td>
                <td>
                    VarId15
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_4
                </td>
            </tr>
            <tr>
                <td>
                    :="DB_Anlagenstatus"."Reserve_5":
                </td>
                <td>
                    VarId16
                </td>
                <td>
                    DB_Anlagenstatus.Reserve_5
                </td>
            </tr>
        </table>

    </body>
</html>

Jetzt muss ich mit diesen Daten die verschieden Anlagenzustände mit verschiedene Bilder darstellen. Dazu gibt es für jedes Anlagenteil Bilder die sich nur in der letzte ziffer unterscheiden. Ich bekomme mit der unterstehende Code aber kein Bild angezeigt für 10000. Bei den anderen ist das Bild da, weil ich die Daten direkt aus der SPS hole. Ich muss diesen Umweg gehen weil sonst beim Aktualisieren das Bild ständig flackert.

HTML: 
<html>

<!-- Kopf -->
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
   
    <meta name=Originator content="timmertechnik GmbH">
   
    <title>DAI MARS KEY Anlagenstatus</title>
       
</head>

<!-- Hintergrund und text -->
<div>
    <!-- Überschrift -->
    <br>
    <br>
    <h1>
        <center>
            <font face="Arial">
                <span style="font-size: 72px; margin: 100px 0;"><strong>Anlagenstatus</strong></span>
            </font>
        </center>
    </h1>

    <!-- Logo -->
    <span style='position:absolute;left:1725px;top:25px;width:105px;height:120px'>
        <img width=105 height=120 src="Start-Dateien/Logo.jpg"
    </span>

    <!-- Layout -->
    </span>
        <img src="Start-Dateien/Layout.jpg" width="1925" height="986">
    </span>
</div>

<!-- Anlagenteile -->
<body>
   
    <!-- Modul 10000 -->
    <div>
    <span style='position:absolute;left:234px;top:825px'>
    <img id="aus" src="" alt="klappt nicht" width="563" height="215">
        <script>
            wert=document.getElementById('VarId1').innerHTML;
            document.getElementById('aus').setAttribute('src', 'Start-Dateien/1000'+wert+'.png');
        </script>
    </div>

    <!-- Modul 20000 -->
    <div>
    <span style='position:absolute;left:234px;top:616px'>
    <img src='Start-Dateien/2000:="DB_Anlagenstatus"."20000":.png' width="561" height="216">
    </div>

    <!-- Modul 30000 -->
    <div>
    <span style='position:absolute;left:760px;top:663px'>
    <img src='Start-Dateien/3000:="DB_Anlagenstatus"."30000":.png' width="348" height="168">
    </div>

    <!-- Modul 40000 -->
    <div>
    <span style='position:absolute;left:1100px;top:548px'>
    <img src='Start-Dateien/4000:="DB_Anlagenstatus"."40000":.png' width="556" height="284">
    </div>

    <!-- Modul 50000 -->
    <div>
    <span style='position:absolute;left:778px;top:825px'>
    <img src='Start-Dateien/5000:="DB_Anlagenstatus"."50000":.png' width="448" height="250">
    </div>

    <!-- Modul 60000 -->
    <div>
    <span style='position:absolute;left:1219px;top:825px'>
    <img src='Start-Dateien/6000:="DB_Anlagenstatus"."60000":.png' width="439" height="245">
    </div>

    <!-- Modul 90000 -->
    <div>
    <span style='position:absolute;left:62px;top:478px'>
    <img src='Start-Dateien/9000:="DB_Anlagenstatus"."90000":.png' width="180" height="403">
    </div>

    <!-- Modul 100000 -->
    <div>
    <span style='position:absolute;left:300px;top:450px'>
    <img src='Start-Dateien/10000:="DB_Anlagenstatus"."100000":.png' width="281" height="107">
    </div>
       
    <iframe src="Update_Page.html" style="display:none;" />
</body>

</html>

Ich bin kein Profi und kenne mich nicht aus, trotzdem muss ich es zum laufen bekommen. Bin für jede Hilfe sehr Dankbar!
 
Falls der Code von @Sempervivum auch nicht klappt, dann probier mal das.
Den Code von Sempervivum und änder nur die eine Zeile
Code: 
<script>
var theval = document.getElementById("VarId1").innerHTML.trim();
document.getElementById("theimg").src = 'Start-Dateien/1000' + theval + '.png';
</script>
Ich habe deine Scripte mal ausprobiert und es werden die Zeilenumbrüche mit ausgegeben bzw du hast einfach 2 Leerzeilen damit drinnen . Mit trim() gehen die weg.
*** Link entfernt, weil nicht mehr erreichbar ***

Zum Testen habe ich mein Homer Bild genommen ,was ohne trim() auch nicht lief.
Vielleicht lässt sich im Code noch was Besseres finden als trim(), aber das können die beiden besser sagen als ich, ob es da was gibt.
 
Zuletzt bearbeitet:
Servus,

ich habe exakt das gleiche Problem und suche schon einige Zeit nach der Ursache.

Wurde das Problem gelöst? Hat jemand ein getestetes funktionierendes Beispiel?
 
Ich denke das ist ein reines HTML Problem und daher vermutlich SPS Hintergrundwissen nicht unbedingt nötig.

Ich möcht eine Statusabfrage zur besseren Übersicht grafisch animieren. Das jeweilige Signal hat den zustand 0 oder 1.
Die Daten werden per Java Skript aus der SPS gelesen und dem HTML zur Verfügung gestellt. Per Textausgabe funktioniert auch alles wunderbar, nur mit der Grafik habe ich das Problem.

Das habe ich getestet und funktioniert:
Diese Variabel id="o_mStatusVerbindung" wird per Java Skript aktualisiert und angezeigt wird 0 oder 1
Code: 
<table border="1">
<tr>
<td style="width: 470px"><span class="auto-style4">Verbindungstatus</span> </td>
    <td class="auto-style4"id="o_mStatusVerbindung">mStatusVerbindung:</td>
</tr>   
</table>

So sieht das aus
1641577754913.png

Statt 0 oder 1 sollen diese Grafiken angezeigt werden.

1641577972990.png
Die Lösungsansätze von weiter oben habe ich schon durchgearbeitet, hatte leider kein Erfolg.
 
Das ist die Update_Page.html

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
        <title>Web page demo - Automatic update - Update page</title>
        <script type="text/javascript">
        
         /* String.trim() is not supported by every browser - thus add this functionality is necessary */
         if (!String.trim)
         {
            String.prototype.trim = function () { return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ''); };
         }
        
         /* Main function for calling the subroutines */
         function mainJavaScript()
         {
            updateSingleVariablesTable();
            updateFrame();
         }
            
         /* Function for updating the variables */
         function updateSingleVariablesTable()
         {
            var table = document.getElementById("singleVariablesTable");
            for(i = 1; i < table.rows.length; i++)
            {
                var tagValue = table.rows[i].getElementsByTagName("td")[0].innerHTML;
                var tagId = table.rows[i].getElementsByTagName("td")[1].innerHTML.trim();
                parent.document.getElementById(tagId).innerHTML = tagValue;
            }
         }
        
         /* Function for updating the web page */
         function updateFrame()
         {
            window.setTimeout(function(){location.reload()}, document.getElementById("updateInterval").innerHTML.trim());
         }
        </script>

    </head>
    <body onload="mainJavaScript()">

        <table border="1">
            <tr>
                <td>
                    Update time in milliseconds
                </td>
            </tr>
            <tr>
                <td id="updateInterval" style="height: 28px">
                    1000</td>
            </tr>
        </table>
        <br/>

        <table id="singleVariablesTable" border="1">
            <tr>
                <td>
                    AWP-Command to read variable
                </td>
                <td>
                    ID of the element of the main page which should be updated
                </td>
            </tr>
            <tr>
                <td>
                    :="VarName1":
                </td>
                <td>
                    VarId1
                </td>
            </tr>
            <tr>
                <td>
                    :="VarName2":
                </td>
                <td>
                    VarId2
                </td>
            </tr>
                <tr>
                <td>
                    Value: <br/>
                    :="VarName3":
                </td>
                <td>
                    VarId3
                </td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iTempWasserspeicher:
                </td>
                <td>
                    o_iTempWasserspeicher</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iTempKuehlkoerper:
                </td>
                <td>
                    o_iTempKuehlkoerper</td>
            </tr>
            <tr>
                <td style="height: 28px">
                    :="IO_HmiPhotovoltaik".o_iTempRueckVorHeizstab:
                </td>
                <td style="height: 28px">
                    o_iTempRueckVorHeizstab</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iTempRueckNachHeizstab:
                </td>
                <td>
                    o_iTempRueckNachHeizstab</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iTempVorlaufHeizung:
                </td>
                <td>
                    o_iTempVorlaufHeizung</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iSpannung:
                </td>
                <td>
                    o_iSpannung</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iStrom:
                </td>
                <td>
                    o_iStrom</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iLeistungWs:
                </td>
                <td>
                    o_iLeistungWs</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_iLeistungWd:                 
                </td>
                <td>
                    o_iLeistungWd</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_mStatusVerbindung:                 
                </td>
                <td>
                    o_mStatusVerbindung</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sSTA.mSpeicherHeizungEin:                 
                </td>
                <td>
                    o_sSTA.mSpeicherHeizungEin</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sSTA.mHeizungEin:                 
                </td>
                <td>
                    o_sSTA.mHeizungEin</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sStoerung.mF1:                 
                </td>
                <td>
                    o_sStoerung.mF1</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sStoerung.mF2:                 
                </td>
                <td>
                    o_sStoerung.mF2</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sStoerung.mF3:                 
                </td>
                <td>
                    o_sStoerung.mF3</td>
            </tr>
            <tr>
                <td>
                    :="IO_HmiPhotovoltaik".o_sStoerung.mUeberTempKK:                 
                </td>
                <td>
                    o_sStoerung.mUeberTempKK</td>
            </tr>       

        </table>

    </body>
</html>
 
Das funktioniert prinzipiell
Code: 
parent.document.getElementById(tagId).innerHTML = 'ActorStatus' + tagValue + '.png';

Rückgabewert der Variablen o_mStatusVerbindung ist ActionStatus 1 .png
Wo kommen die Leerzeichen her?

Bildnamen habe ich umbenannt um weiter testen zu können.

Jetzt habe ich versucht den Dateinamen aus der Variable dieser Funktion zu übergeben.
Irgendwas passt hier nicht.

Code: 
<img id="theimg">

<script>
document.getElementById("theimg").src = o_mStatusVerbindung';
</script>
 
Schreibe ich das mit Anführungsstriche oder Hochkomma dann steht der Variablenname o_mStatusVerbindung in "theimg".
Ohne irgendwas erhalte ich die Fehlermeldung, nicht bekannt.

In HTML wird so zugegriffen. "id="o_mStatusVerbindung" und das funktioniert.
Wie muss man das in Java realisieren?

oder anders gefragt: Wie bekomme ich den Inhalt aus o_mStatusVerbindung in theimg damit die richtige Grafik angezeigt wird.
Eigentlich müsste das doch super einfach sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben