Javascript functie aanroepen, breekt de andere functies.

Status
Niet open voor verdere reacties.
M

manobiletsky

Nieuwe gebruiker
Lid geworden
17 feb 2018
Berichten
2
In de onderstaande code heb ik geprobeerd om de functie "senddata" aan te roepen, maar dit resulteert in een (jquery) slider die niet meer helemaal werkt.

Ik heb meerdere dingen geprobeerd maar in elk geval stopt de slider functie met werken. Het enige dat ik wil is dat de functie "senddata" word gestart, telkens als de waarde van de slider veranderd.

ik hoop dat iemand kan helpen....

Code: 
<!DOCTYPE html>
<html>
    <head>
    	<title>Wheel.js jQuery Plugin Example</title>
    	<meta charset="utf-8" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="js/jquery.wheel.js"></script>
	<script>var connection = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);
		connection.onopen = function () {
			connection.send('Connect ' + new Date());
		};
		connection.onerror = function (error) {
			console.log('WebSocket Error ', error);
		};
		connection.onmessage = function (e) {
			console.log('Server: ', e.data);
		};
	// Deze functie moet worden aangeroepen vanuit de (naamloze?) funtie verderop**************************************************
		function senddata(t) {
		    var temp = parseInt(document.getElementById('t').value).toString(16);
		    console.log('Temperature set to: ' + temp);
		    connection.send(temp);
	    	}
	</script>
    </head>
    <body>
    <h1 style="margin:30px auto; text-align:center">WiFiDomo Thermostat</h1>
    
        <div class="center-content">
            <div class="wheel">
                <div class="progress"></div>
                <div class="center">
                    <span class="value"></span>
                </div>
                <a href="javascript:void(0)" class="handle"></a>
            </div>
        </div>
        <script>
	    function round(value) {
                    return value.toFixed(1);
		    
	    }
            
            $(function () {
                $(".wheel").wheel({
                    min: 0.0,
                    max: 36.0,
                    step: 5,
                    onChange: function (value) {
                        $(".wheel .value").html(round(value) + "&deg;");
			//De functie senddata() zou vanaf hier moeten worden aangeroepen ****************************************
                    }
                    
                });
            });
        </script>
        
    </body>
</html>
 
Kan je hier wat mee?
Code: 
[B]in head[/B]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

[B]in body[/B]

$(document).ready(function(){
    $('.wheel').on('mousewheel', function(event) {
        // deltaX | deltaY | deltaFactor
        if (event.deltaY < 0) console.log("omlaag");
        if (event.deltaY > 0) console.log("omhoog");
    });
});
 
Laatst bewerkt:
Ik heb dit script geimplementeerd en het werkt. In de console zie ik omhoog of omlaag met het aantal scroll-clicks.

Ik begrijp alleen niet hoe ik dit kan gebruiken om mijn issue op te lossen. (ik ben een newbie in javascript)
Kun je misschien toelichten hoe ik "mijn" code moet aanpassen om de senddata() functie aan te roepen?
 
Bij elke wheel scroll is er een event (-1 is omlaag en +1 is omhoog). Het getalletje is alleen maar het aantal events ofwel het aantal keer dat je aan het wieltje draait. Stel dat je dit doet...
Code: 
$(document).ready(function(){
    $('.wheel').on('mousewheel', function(event) {
        // deltaX | deltaY | deltaFactor
        senddata(event.deltaY);
    });
});
...dan roep je de functie aan met senddata(-1) of senddata(1) afhankelijk of je omlaag of omhoog scrollt. Dit gebeurt bij elke scroll.
Deze waarde (-1 of +1) kan je in je functie gebruiken als variabele t en daar kan je iets mee doen.

De wheel events hebben niets te maken met temp want die haal je rechtstreeks uit de html met temp = parseInt(document.getElementById('t').value).toString(16)

Aanvulling. Als je een variabele wil verhogen of verlagen met de wheel dan zou je dit zo kunnen doen. Zelf even testen want ik heb verder geen info over je Arduino opdracht.

Code: 
$(document).ready(function(){
    var temperatuur;
    $('.wheel').on('mousewheel', function(event) {
        // deltaX | deltaY | deltaFactor
        if (event.deltaY < 0) temperatuur--;
        if (event.deltaY > 0) temperatuur++;
        senddata(temperatuur);
        // document.getElementById('t').value = temperatuur;
    });
});
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan