1

I developed an contract as follows and I got "certificate of guarantee". It means that it works well. Now I want to design a web application as UI to interact with smart contract. I did it with HTML and JavaScript. However, it does not work properly. Can you mention which part of html or JavaScript is wrong ? (I need to set and get "energy" and "power" values.)

Smart Contract code :

pragma solidity ^0.4.15;

import './Ownable.sol';

contract Weechain is Ownable{

  using SafeMath for uint256;

  uint256 public energyTotalSupply;
  uint256 public powerTotalSupply;

  struct Device {
    uint256 energyValue;
    uint256 powerValue;
  }
  mapping(address => Device) amount;

  event setEnergyEvent(address indexed device, uint256 energy); 
  event setPowerEvent(address indexed device, uint256 power);
  event setPayloadEvent(uint256 indexed SQN, string payload);

  // Constructor
  function Weechain() {

    energyTotalSupply = 0;
    powerTotalSupply = 0;

    amount[owner].energyValue = energyTotalSupply;
    amount[owner].powerValue = powerTotalSupply;
  }

  function amountOfenergy(address dev) constant returns (uint256 energy) {
    return amount[dev].energyValue;
  }
  function amountOfpower(address dev) constant returns (uint256 power) {
    return amount[dev].powerValue;
  }

  function setPayload(uint256 SQN, string payload) public returns (bool) {

    emit setPayloadEvent(SQN, payload);

    return true;
  }

  function setEnergy(address dev, uint256 energy) public returns (bool) {
    require(dev != address(0));

    amount[dev].energyValue = amount[dev].energyValue + energy;
    energyTotalSupply = energyTotalSupply + energy;

    emit setEnergyEvent(dev, energy);

    return true;
  }

    function setPower(address dev, uint256 power) public returns (bool) {
    require(dev != address(0));

    amount[dev].powerValue = amount[dev].powerValue + power;
    powerTotalSupply = powerTotalSupply + power;

    emit setPowerEvent(dev, power);

    return true;
  }

}

My HTML and JavaScript code :

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Weechain Smart Contract</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script src="./node_modules/web3/dist/web3.min.js"></script>

</head>
<body>
    <div class="container">

        <h1>Weechain Instructor</h1>
        <p>Output: <span id="owner"></span>
        </p>
        <h2 id="instructor"></h2>

        <label for="name" class="col-lg-2 control-label">Address</label>
        <input id="Address" type="text"> <!--name will be changed to device address-->

        <label for="name" class="col-lg-2 control-label">Energy</label>
        <input id="Energy" type="text"> <!--age will be changed to energy value type = "text" will be type = "number"-->

        <button id="buttonSet">Set</button>

        <button id="buttonGet">Get</button>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script>
       if (typeof web3 !== 'undefined') {
           web3 = new Web3(web3.currentProvider);
       } else {
           web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
       }

       web3.eth.defaultAccount = web3.eth.accounts[0];
/*
       var CoursetroContract = web3.eth.contract([{"constant":false,"inputs":[{"name":"_fName","type":"string"},{"name":"_age","type":"uint256"}],"name":"setInstructor","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getInstructor","outputs":[{"name":"","type":"string"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"}]);
*/
    var CoursetroContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"energyTotalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"dev","type":"address"}],"name":"amountOfenergy","outputs":[{"name":"energy","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"powerTotalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"dev","type":"address"},{"name":"energy","type":"uint256"}],"name":"setEnergy","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"SQN","type":"uint256"},{"name":"payload","type":"string"}],"name":"setPayload","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"dev","type":"address"}],"name":"amountOfpower","outputs":[{"name":"power","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"dev","type":"address"},{"name":"power","type":"uint256"}],"name":"setPower","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"device","type":"address"},{"indexed":false,"name":"energy","type":"uint256"}],"name":"setEnergyEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"device","type":"address"},{"indexed":false,"name":"power","type":"uint256"}],"name":"setPowerEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"SQN","type":"uint256"},{"indexed":false,"name":"payload","type":"string"}],"name":"setPayloadEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_by","type":"address"},{"indexed":true,"name":"_to","type":"address"}],"name":"ChangementOwnership","type":"event"}]);

       var Coursetro = CoursetroContract.at('0x9ea9de4056ae3defda58ca02257e7b6218f2e6eb');

       $("#buttonGet").click(function() {
       Coursetro.amountOfenergy('0xbacbc6e824272c7c501d930d8bb2a9e4d1a80312', function(error, result) {
           if (!error) {
               $("#instructor").html(result[0])+' ('+result[1]+')');
               console.log(result);
           } else
                console.log(error);
       });

       });

       $("#buttonSet").click(function() {
           //Coursetro.setPayload($("#name").val(), $("#age").val());
           Coursetro.setEnergy($("#Address").val(), $("#Energy").val());
           //Coursetro.setPayload($("#name").val());
       });

    </script>

</body>
</html>

NOTE : I have also created a Github repository for this project including smart contract, HTML and JavaScript code HERE : https://github.com/s1241/GUI-for-Smart-Contract

2

I don't have 50 reputation to ask a comment question, but I'm assuming the issue you're running into is because your setters need to be promises and require a .then(function(response, error) {}) chain.

So you're not waiting for the response to come back and immediately trying to get the values(which will not be set).

This site might help: https://coursetro.com/posts/code/99/Interacting-with-a-Smart-Contract-through-Web3.js-(Tutorial)

Promises: https://developers.google.com/web/fundamentals/primers/promises

  • Thank you, but I used exactly this tutorial code to develop my HTML and Javascript application. And I call my functions like this tutorial. You can see my code. If u think something is wrong plz let me know. – Questioner May 2 '18 at 17:31
  • Yes the issue is that you're setting and immediately getting after. You need to set it, then wait for the transactions to confirm, so it's written onto the ethereum net, then get the changes after the confirmation of the transaction. Create two buttons, one for setting, and another one for getting. Click on the get after your transaction has been confirmed and mined – Danny May 2 '18 at 19:14
  • Thank you. In fact, I created two set buttons (set energy and set power) but I do not know how to create for get such that after click the retuned value of my function is shown in a tex box. Do u know how to do? Thanks. – Questioner May 2 '18 at 19:32
  • Yeah you need to either access a public variable on your contract or create a getFunction to get whatever you need. See the tutorial above? They have a function in their contract function getInstructor() view public returns (string, uint) { return (fName, age); } – Danny May 2 '18 at 19:40
  • Yed I saw it. but in its html and javascript there is no "button" to to call getInstructor() function. See end of my javascript code (Weechain.amountOfenergy(function(error, result) ....) where I did exactly like this tutorial. isn't it ? – Questioner May 2 '18 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.