Commit 940862ca authored by Adam Procter's avatar Adam Procter

Added tests 7 to 9

parent d8b7bb4f
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="292px" viewBox="0 0 200 292" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#979797" stroke-width="12" x="6" y="6" width="188" height="280"></rect>
</g>
</svg>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Vue 8 app</title>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<script src="js/snap.svg-min.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="app">
<h1>EIGHT - SVG (snap.js) + Vue.js + Deepstream</h1>
<div class="group connectionState">
Connection-State is: <em id="connection-state">{{connectionState}}</em>
</div>
<my-record :ds="ds"></my-record>
</div>
<script>
// Start of VUE + deepstream
const Record = {
template:'<div><form id="myform"><label>Owner</label><input name="owner" type="text" v-model="owner" @input="handleOWNERUpdate()"/><label>X.</label><input name="xpos" type="text" v-model="xpos" @input="handleXUpdate()"/><label>Y.</label><input name="ypos" type="text" v-model="ypos" @input="handleYUpdate()"/></form></div>',
props: ['ds'],
data: function() {
return {
owner:'',
xpos:'',
ypos:'',
}
},
created: function() {
this.record = this.ds.record.getRecord('vue999/datarecord999');
this.record.subscribe(values => {
this.owner = values.personalData.owner;
this.xpos = values.personalData.xpos;
this.ypos = values.personalData.ypos;
})
},
methods: {
handleOWNERUpdate: function() {
this.record.set({
personalData: {
// owner: 'owner',
owner: this.owner,
// 'owner', this.owner
xpos: this.xpos,
ypos: this.ypos
},
// children: ['Evie', 'Elle', 'Megan']
});
},
handleXUpdate: function() {
this.record.set({
personalData: {
// owner: 'owner',
owner: this.owner,
// 'owner', this.owner
xpos: this.xpos,
ypos: this.ypos
},
// children: ['Evie', 'Elle', 'Megan']
});
},
handleYUpdate: function() {
this.record.subscribe({
personalData: {
// owner: 'owner',
owner: this.owner,
// 'owner', this.owner
xpos: this.xpos,
ypos: this.ypos
},
// children: ['Evie', 'Elle', 'Megan']
});
}
}
};
new Vue({
el: '#app',
components: {
'my-record': Record,
},
data: {
ds: null,
connectionState: 'INITIAL'
},
created: function() {
this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
.login()
.on('connectionStateChanged', connectionState => {
this.connectionState = connectionState;
});
},
methods: {
}
})
// Start of SNAP SVG Animation
var lx = 0, ly = 0, ox = 0, oy = 0;
var thisBox;
//var xpos = document.getElementById('xpos');
//var ypos = document.getElementById('ypos');
moveFnc = function(dx, dy, x, y) {
thisBox = this.getBBox();
lx = dx + ox;
ly = dy + oy;
this.transform('t' + lx + ',' + ly);
// this works but want to pass into input element.....
//console.log(thisBox);
// console.log(thisBox.x);
//xpos.innerHTML = thisBox.x;
//ypos.innerHTML = thisBox.y;
oFormObject = document.forms['myform'];
oFormObject.elements["xpos"].value = thisBox.x;
oFormObject.elements["ypos"].value = thisBox.y;
}
startFnc = function(x, y, e) {
}
endFnc = function() {
ox = lx;
oy = ly;
// console.log(this.getBBox());
};
var s = Snap();
var sheet = s.rect(10, 10, 50, 65);
sheet.attr({
fill:"#bada55",
stroke:"#000",
strokeWidth: 3
});
sheet.drag(moveFnc, startFnc, endFnc);
// end of SNAP
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
More Advanced Vue.js project connecting to deepstream hub to store data and sync this between client and datastore. This example creates unique data records or "documents" when you load the page.
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="292px" viewBox="0 0 200 292" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#979797" stroke-width="12" x="6" y="6" width="188" height="280"></rect>
</g>
</svg>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Vue 8 app</title>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<script src="js/snap.svg-min.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="app">
<h1>NINE - SVG (snap.js) + Vue.js + Deepstream</h1>
<div class="group connectionState">
Connection-State is: <em id="connection-state">{{connectionState}}</em>
</div>
<my-record :ds="ds"></my-record>
</div>
<script>
// Start of VUE + deepstream
const Record = {
template:'',
props: ['ds'],
data: function() {
return {
xpos:'',
ypos:'',
}
},
created: function() {
this.record = this.ds.record.getRecord('vue_nine/datarecord_nine');
this.record.subscribe(values => {
this.xpos = values.positionData.xpos;
this.ypos = values.positionData.ypos;
})
},
methods: {
handlePOSUpdate: function() {
this.record.set({
positionData: {
xpos: this.xpos,
ypos: this.ypos
},
});
},
}
};
new Vue({
el: '#app',
components: {
'my-record': Record,
},
data: {
ds: null,
connectionState: 'INITIAL'
},
created: function() {
this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
.login()
.on('connectionStateChanged', connectionState => {
this.connectionState = connectionState;
});
},
methods: {
}
})
// Start of SNAP SVG Animation
var lx = 0, ly = 0, ox = 0, oy = 0;
var thisBox;
moveFnc = function(dx, dy, x, y) {
thisBox = this.getBBox();
lx = dx + ox;
ly = dy + oy;
this.transform('t' + lx + ',' + ly);
}
startFnc = function(x, y, e) {
}
endFnc = function() {
ox = lx;
oy = ly;
handlePOSUpdate();
};
var s = Snap();
var sheet = s.rect(10, 10, 50, 65);
sheet.attr({
fill:"#bada55",
stroke:"#000",
strokeWidth: 3
});
sheet.drag(moveFnc, startFnc, endFnc);
// end of SNAP
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
More Advanced Vue.js project connecting to deepstream hub to store data and sync this between client and datastore. This example creates unique data records or "documents" when you load the page.
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="292px" viewBox="0 0 200 292" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Rectangle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#979797" stroke-width="12" x="6" y="6" width="188" height="280"></rect>
</g>
</svg>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Vue 5 app</title>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<script src="js/snap.svg-min.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="app">
<h1>Seven - SVG</h1>
<img src="/img/rectangle.svg" alt="" width="" height="" border="0" />
</div>
<script>
var lx = 0, ly = 0, ox = 0, oy = 0;
moveFnc = function(dx, dy, x, y) {
var thisBox = this.getBBox();
console.log(thisBox.x, thisBox.y);
lx = dx + ox;
ly = dy + oy;
this.transform('t' + lx + ',' + ly);
}
startFnc = function(x, y, e) {
}
endFnc = function() {
ox = lx;
oy = ly;
// console.log(this.getBBox());
};
var s = Snap();
var sheet = s.rect(10, 10, 50, 65);
sheet.attr({
fill:"#bada55",
stroke:"#000",
strokeWidth: 3
});
sheet.drag(moveFnc, startFnc, endFnc);
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
More Advanced Vue.js project connecting to deepstream hub to store data and sync this between client and datastore. This example creates unique data records or "documents" when you load the page.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment