2017-02-10 00:38:02 +00:00
< html >
< head >
< title > Embark - SimpleStorage Demo< / title >
2017-12-14 00:24:20 +00:00
<!-- <link rel="stylesheet" href="css/app.css"> -->
2018-03-02 22:25:56 +00:00
<!-- <script src="js/jquery.js"></script> -->
2017-12-14 00:24:20 +00:00
<!-- <script src="js/bootstrap.js"></script> -->
2018-07-26 01:17:54 +00:00
< script src = "https://code.jquery.com/jquery-3.3.1.js" > < / script >
2017-02-10 00:38:02 +00:00
< / head >
< body class = "container" >
2018-01-17 00:17:52 +00:00
< div id = "root" > < / div >
2017-02-10 00:38:02 +00:00
< h3 > Embark - Usage Example< / h3 >
< ul class = "nav nav-tabs" role = "tablist" id = "myTabs" >
< li role = "presentation" class = "active" > < a href = "#blockchain" aria-controls = "blockchain" role = "tab" data-toggle = "tab" > Blockchain< / a > < / li >
2017-06-27 20:01:54 +00:00
< 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 >
< 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 >
2017-02-10 00:38:02 +00:00
< / ul >
< div class = "tab-content" >
< div role = "tabpanel" class = "tab-pane active" id = "blockchain" >
< h3 > 1. Set the value in the blockchain< / h3 >
< div class = "form-group form-inline" >
< input type = "text" class = "text form-control" value = "10" >
< button class = "set btn btn-primary" > Set Value< / button >
< p > Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.< / p >
< / div >
< h3 > 2. Get the current value< / h3 >
< div class = "form-group" >
< div >
current value is < span class = "value" > < / span >
< / div >
< button class = "get btn btn-primary" > Get Value< / button >
< p > Click the button to get the current value. The initial value is 100.< / p >
< / div >
< h3 > 3. Contract Calls < / h3 >
< p > Javascript calls being made: < / p >
< div class = "logs" >
< / div >
< / div >
< div role = "tabpanel" class = "tab-pane" id = "storage" >
2017-06-27 20:01:54 +00:00
< 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 >
< div id = "storage-controls" >
2017-02-10 00:38:02 +00:00
< h3 > Save text to IPFS< / h3 >
< div class = "form-group form-inline" >
< input type = "text" class = "ipfsText text form-control" value = "hello world!" >
< button class = "setIpfsText btn btn-primary" > Save< / button >
< p > generated Hash: < span class = "textHash" > < / span > < / p >
< / div >
< h3 > Load text from IPFS given an hash< / h3 >
< div class = "form-group form-inline" >
< input type = "text" class = "textHash text form-control" size = "60" >
< button class = "loadIpfsHash set btn btn-primary" > Load< / button >
< p > result: < span class = "ipfsText" > < / span > < / p >
< / div >
< h3 > upload file to ipfs< / h3 >
< div class = "form-group form-inline" >
< input type = "file" class = "form-control" >
< button class = "uploadFile set btn btn-primary" > upload< / button >
< p > generated hash: < span class = "fileIpfsHash" > < / span > < / p >
< / div >
< h3 > Get file or image from ipfs< / h3 >
< div class = "form-group form-inline" >
< input type = "text" class = "fileIpfsHash form-control" size = "60" >
< button class = "loadIpfsFile set btn btn-primary" > Load< / button >
< p > file available at: < span class = "ipfsFileUrl" > < / span > < / p >
< p > < img class = "ipfsImage" src = "" > < / p >
< / div >
< p > Javascript calls being made: < / p >
< div class = "logs" >
< br > EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
< / div >
2017-06-27 20:01:54 +00:00
< / div >
2017-02-10 00:38:02 +00:00
< / div >
< div role = "tabpanel" class = "tab-pane" id = "communication" >
2017-06-27 20:01:54 +00:00
< div class = "error alert alert-danger" role = "alert" > The node you are using does not support Whisper< / div >
< div class = "errorVersion alert alert-danger" role = "alert" > The node uses an unsupported version of Whisper< / div >
< div id = "communication-controls" >
2017-02-10 00:38:02 +00:00
< h3 > Listen To channel< / h3 >
< div class = "form-group form-inline listen" >
< input type = "text" class = "channel text form-control" placeholder = "channel" >
< button class = "listenToChannel set btn btn-primary" > Start Listening< / button >
< div id = "subscribeList" > < / div >
< p > messages received:< p >
< div id = "messagesList" > < / div >
< / div >
< h3 > Send Message< / h3 >
< div class = "form-group form-inline send" >
< input type = "text" class = "channel text form-control" placeholder = "channel" >
< input type = "text" class = "message text form-control" placeholder = "message" >
< button class = "sendMessage set btn btn-primary" > Send Message< / button >
< / div >
< p > Javascript calls being made: < / p >
< div class = "logs" >
< br > EmbarkJS.Messages.setProvider('whisper')
< / div >
2017-06-27 20:01:54 +00:00
< / div >
2017-02-10 00:38:02 +00:00
< / div >
< / div >
2018-01-17 00:17:52 +00:00
< script src = "js/app.js" > < / script >
2017-02-10 00:38:02 +00:00
< / body >
< / html >
