setInterval Odczt wartości z pliku do zmiennej

0

Witam!
To mój pierwszy post i przyznam że na codzień nie mam doczynienia z JS a musze przerobić mały skrypt. Moj pytanie związane jest z odczytem zmiennej umieszczonej wenątrz innego pliku i przkazanie jej do zmiennej lokalne/globalnej w ten sposób aby można było ją dalej wykorzystać.
Bazuje na działającym kodzie opartym o bibliotekę http://justgage.com/

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>DMC Gage Demo</title>
    <script src="js/jquery-2.0.2.min.js"></script>
    <script src="js/raphael.2.1.0.min.js"></script>
    <script src="js/justgage.1.0.1.min.js"></script>
</head>
 
<body>
<div id="g1"></div>
<div id="g2"></div>
     
<script type="text/javascript">
    $(document).ready(function(){
        var g1, g2;
        var g1 = new JustGage({
          id: "g1",
          value: getRandomInt(-100, 100),
          min: -100,
          max: 100,
          title: "Triangle Wave",
          label: "Value"
        });
         
        var g2 = new JustGage({
          id: "g2",
          value: getRandomInt(0, 100),
          min: 0,
          max: 100,
          title: "random data",
          label: ""
        });
 
        $.ajaxSetup({ cache: false });
            setInterval(function() {
                g2.refresh(getRandomInt(50, 100));
                $.get("Zmienna_1.htm", function(result){
                    g1.refresh(parseInt(result));
                    g2.refresh(getRandomInt(50, 100));
                });
            },1500);
    });
</script>
 
</body>
</html>

Plik Zmienna_1.htm dla testu zawiera jedynie liczbę np. 5

Bazując na tym przykładzie chciałbym zastosować funkcję odczytu wartości z pliku w następującym przykładzie http://www.amcharts.com/demos/angular-gauge/#theme-none

0

a co Ci nie pasuje w obecnym rozwiązaniu?
to, co teraz jest zrobione jest najbardziej poprawną formą rozwiązania problemu, zmienne globalne to zło i pewnie wydaje Ci się, że coś sobie ułatwisz, a potem się okaże, że jest wręcz przeciwnie ;)

0

Chodzi mi o to jak wykonać odczyt wartości zmiennej z pliku i wpisać ją do danej zmiennej
Docelowo jak zmodyfikowąć tą cześć skryptu

         // change value every 2 seconds
                setInterval(randomValue, 2000);
            });
            
            // set random value
            function randomValue() {
                var value = Math.round(Math.random() * 200);
                arrow.setValue(value);
                axis.setBottomText(value + " km/h");
            }					
			
        </script>

Próbowałem w ten sposób


    $(document).ready(function(){
        var g1, g2;
        $.ajaxSetup({ cache: false });
            setInterval(function() {
                // g2.refresh(getRandomInt(50, 100));
                $.get("Zmienna_1.htm", function(result){
                    g1.refresh(parseInt(result));
                    // g2.refresh(getRandomInt(50, 100));
                });
            },1500);

var value = g1;
                arrow.setValue(value);

0

Ale ajax jest asynchroniczny (Google: Asynchroniczność oraz AJAX), więc nie możesz tak zrobić i generalnie ideowo się źle za to bierzesz. Dlaczego nie zrobisz po prostu tak?

        var g1, g2;
        $.ajaxSetup({ cache: false });
        setInterval(function() {
            // g2.refresh(getRandomInt(50, 100));
            $.get("Zmienna_1.htm", function(result){
                g1.refresh(parseInt(result));
                // g2.refresh(getRandomInt(50, 100));
                arrow.setValue(result); // Tobie chyba chodziło o podanie tutaj `result`, a nie `g1`.
            });
        },1500);

Mam wrażenie, że próbujesz kodować losowo podmieniając zmienne i kopiując i klejąc jakieś kody. Nie tędy droga, nigdy do tego nie dojdziesz, bo nawet jak Ci się będzie wydawać, że w końcu działa, to w jakimś przypadku działać nie będziesz, a Ty kompletnie nie będziesz miał wiedzy jak zabrać się za naprawianie tego.

Aha, pierwszy post, spoko, ale na przyszłość używaj znaczników code z nazwą języka, co uruchomi kolorowanie kodu. <code class="javascript"></code> albo <code class="html"></code> itd.

0

Dzięki za pomoc ale niestety nie działa. Tak jakby nie wpisywał wartości do zmiennej result Cały czas jest 0.
Wklejam cały kod

Zmienna1.htm

HTML
`

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="amcharts/amcharts.js" type="text/javascript"></script>
        <script src="amcharts/gauge.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            var chart;
            var arrow;
            var axis;
            
			
			
            AmCharts.ready(function () {
                // create angular gauge
                chart = new AmCharts.AmAngularGauge();
                chart.addTitle("Speedometer");
            
                // create axis
                axis = new AmCharts.GaugeAxis();
                axis.startValue = 0;
				axis.axisThickness = 1;
                axis.endValue = 220;
                // color bands
                var band1 = new AmCharts.GaugeBand();
                band1.startValue = 0;
                band1.endValue = 90;
                band1.color = "#00CC00";
                
                var band2 = new AmCharts.GaugeBand();
                band2.startValue = 90;
                band2.endValue = 130;
                band2.color = "#ffac29";
                
                var band3 = new AmCharts.GaugeBand();
                band3.startValue = 130;
                band3.endValue = 220;
                band3.color = "#ea3838";
                band3.innerRadius = "95%";
                
                axis.bands = [band1, band2, band3];
                
                // bottom text
                axis.bottomTextYOffset = -20;
                axis.setBottomText("0 km/h");
                chart.addAxis(axis);
            
                // gauge arrow
                arrow = new AmCharts.GaugeArrow();
                chart.addArrow(arrow);
            
                chart.write("chartdiv");
                // change value every 2 seconds
                // setInterval(randomValue, 1000);
            
            
            // set random value
            // function randomValue() {
                // var value = Math.round(Math.random() * 200);
                // arrow.setValue(value);
                // axis.setBottomText(value + " km/h");
            // }	
			$(document).ready(function(){
			var g1, g2;
			$.ajaxSetup({ cache: false });
            setInterval(function() {
                // g2.refresh(getRandomInt(50, 100));
                $.get("Zmienna1.htm", function(result){
                    g1.refresh(parseInt(result));
                    // g2.refresh(getRandomInt(50, 100));
		arrow.setValue(result);
                });
            },1500);
					
			});
			});
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width:500px; height:400px;"></div>
    </body>

</html>

`

Oraz zgłasza błąd w $(document).ready(function(){

0

zajrzyj w konsolę, użyj też console.log(result), żeby się dowiedzieć, że tam w ogóle jest to, czego oczekujesz, generalnie - debuguj

0

W konsoli mam błąd Uncaught SyntaxError: Unexpected identifier

Sorry ale nic mi to nie mówi...

0

to raczej nie jest cały błąd

0

OK Już działa. Natomiast po zmianie zawartości pliku Zmienna1.htm np z 5 na 50 strasznie "rzuca" wskazówką... dziwne. Występował bład z metoda 'refresh' dlaczego?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
				<script src="jquery-1.10.2.min.js"></script>

        <script src="amcharts/amcharts.js" type="text/javascript"></script>
        <script src="amcharts/gauge.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            var chart;
            var arrow;
            var axis;
            
            AmCharts.ready(function () {
                // create angular gauge
                chart = new AmCharts.AmAngularGauge();
                chart.addTitle("Speedometer");
            
                // create axis
                axis = new AmCharts.GaugeAxis();
                axis.startValue = 0;
				axis.axisThickness = 1;
                axis.endValue = 220;
                // color bands
                var band1 = new AmCharts.GaugeBand();
                band1.startValue = 0;
                band1.endValue = 90;
                band1.color = "#00CC00";
                
                var band2 = new AmCharts.GaugeBand();
                band2.startValue = 90;
                band2.endValue = 130;
                band2.color = "#ffac29";
                
                var band3 = new AmCharts.GaugeBand();
                band3.startValue = 130;
                band3.endValue = 220;
                band3.color = "#ea3838";
                band3.innerRadius = "95%";
                
                axis.bands = [band1, band2, band3];
                
                // bottom text
                axis.bottomTextYOffset = -20;
                axis.setBottomText("0 km/h");
                chart.addAxis(axis);
            
                // gauge arrow
                arrow = new AmCharts.GaugeArrow();
                chart.addArrow(arrow);
            
                chart.write("chartdiv");
                // change value every 2 seconds
                // setInterval(randomValue, 1000);
            });
            
            // set random value
            // function randomValue() {
                // var value = Math.round(Math.random() * 200);
                // arrow.setValue(value);
                // axis.setBottomText(value + " km/h");
            // }
			
			$(document).ready(function(){
						
			$.ajaxSetup({ cache: false });
            setInterval(function() {
                // g2.refresh(getRandomInt(50, 100));
                $.get("Zmienna1.htm", function(result){
                    // arrow.refresh(parseInt(result));
					arrow.setValue(result);
					axis.setBottomText(result + " km/h");

                    // g2.refresh(getRandomInt(50, 100));
                });
            },2000);
			});


			
			
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width:400px; height:300px;"></div>
    </body>

</html>

0

nie wiem po co ten refresh był. a czy to przypadkiem nie przebudowywuje elementu jeszcze raz, w związku z czym na ładną animację nie będzie czasu? ja nie znam tego skryptu, Ty przeczytaj manual do czego refresh w ogóle jest

setInterval Odczt wartości z pliku do zmiennej

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami