index.html
1 <html> 2 <head> 3 <title>Embark - SimpleStorage Demo</title> 4 <!-- <link rel="stylesheet" href="css/app.css"> --> 5 <!--<script src="js/jquery.js"></script> --> 6 <!-- <script src="js/bootstrap.js"></script> --> 7 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 8 </head> 9 <body class="container"> 10 11 <div id="root"></div> 12 13 <h3>Embark - Usage Example</h3> 14 15 <ul class="nav nav-tabs" role="tablist" id="myTabs"> 16 <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li> 17 <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li> 18 <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li> 19 </ul> 20 21 <div class="tab-content"> 22 <div role="tabpanel" class="tab-pane active" id="blockchain"> 23 <h3> 1. Set the value in the blockchain</h3> 24 <div class="form-group form-inline"> 25 <input type="text" class="text form-control" value="10"> 26 <button class="set btn btn-primary">Set Value</button> 27 <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p> 28 </div> 29 30 <h3> 2. Get the current value</h3> 31 <div class="form-group"> 32 <div> 33 current value is <span class="value"></span> 34 </div> 35 <button class="get btn btn-primary">Get Value</button> 36 <p>Click the button to get the current value. The initial value is 100.</p> 37 </div> 38 39 <h3> 3. Contract Calls </h3> 40 <p>Javascript calls being made: </p> 41 <div class="logs"> 42 </div> 43 </div> 44 <div role="tabpanel" class="tab-pane" id="storage"> 45 <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div> 46 <div id="storage-controls"> 47 48 <h3>Save text to IPFS</h3> 49 <div class="form-group form-inline"> 50 <input type="text" class="ipfsText text form-control" value="hello world!"> 51 <button class="setIpfsText btn btn-primary">Save</button> 52 <p>generated Hash: <span class="textHash"></span></p> 53 </div> 54 55 <h3>Load text from IPFS given an hash</h3> 56 <div class="form-group form-inline"> 57 <input type="text" class="textHash text form-control" size="60"> 58 <button class="loadIpfsHash set btn btn-primary">Load</button> 59 <p>result: <span class="ipfsText"></span></p> 60 </div> 61 62 <h3>upload file to ipfs</h3> 63 <div class="form-group form-inline"> 64 <input type="file" class="form-control"> 65 <button class="uploadFile set btn btn-primary">upload</button> 66 <p>generated hash: <span class="fileIpfsHash"></span></p> 67 </div> 68 69 <h3>Get file or image from ipfs</h3> 70 <div class="form-group form-inline"> 71 <input type="text" class="fileIpfsHash form-control" size="60"> 72 <button class="loadIpfsFile set btn btn-primary">Load</button> 73 <p>file available at: <span class="ipfsFileUrl"></span></p> 74 <p><img class="ipfsImage" src=""></p> 75 </div> 76 77 <p>Javascript calls being made: </p> 78 <div class="logs"> 79 <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'}) 80 </div> 81 </div> 82 </div> 83 <div role="tabpanel" class="tab-pane" id="communication"> 84 <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div> 85 <div class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of Whisper</div> 86 <div id="communication-controls"> 87 <h3>Listen To channel</h3> 88 <div class="form-group form-inline listen"> 89 <input type="text" class="channel text form-control" placeholder="channel"> 90 <button class="listenToChannel set btn btn-primary">Start Listening</button> 91 <div id="subscribeList"></div> 92 <p>messages received:<p> 93 <div id="messagesList"></div> 94 </div> 95 96 <h3>Send Message</h3> 97 <div class="form-group form-inline send"> 98 <input type="text" class="channel text form-control" placeholder="channel"> 99 <input type="text" class="message text form-control" placeholder="message"> 100 <button class="sendMessage set btn btn-primary">Send Message</button> 101 </div> 102 103 <p>Javascript calls being made: </p> 104 <div class="logs"> 105 <br> EmbarkJS.Messages.setProvider('whisper') 106 </div> 107 </div> 108 </div> 109 </div> 110 111 <script src="js/app.js"></script> 112 </body> 113 </html>