Commit 38823ecf authored by Rob Myers's avatar Rob Myers

Sketching out more dapps.

parent 7318b497
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bitmap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/shared.css">
<link rel="stylesheet" href="css/bitmap.css">
</head>
<body>
<div id="updating">Updating...</div>
<div id="status"></div>
<div id="representations">
<canvas id="bitmap"></canvas>
</div>
<!-- Here so we don't have to try to click outside the canvas. -->
<div id="background" onclick="showGui(event, -1)"></div>
<div class="gui" id="bitmap-gui">
<h2>Update Bitmap</h2>
<div id="bitmap-gui-bitmap" class="center-block">
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/shared.js"></script>
<script src="js/bitmap.js"></script>
</body>
</html>
#bitmap {
background-color: grey;
width: 75vmin;
height: 75vmin;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#bitmap-gui {
width: 520px;
height: 590px;
}
#bitmap-gui-bitmap {
width: 480px;
height: 480px;
}
.bitmap-gui-pixel {
float: left;
width: 30px;
height: 30px;
border: 0;
margin: 0;
padding: 0;
background-color: lightgrey;
}
.bitmap-gui-pixel-on {
background-color: black;
}
This diff is collapsed.
#grid {
background-color: grey;
width: 75vmin;
height: 75vmin;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#gui-grid-preview {
background-color: grey;
width: 100px;
height: 100px;
}
#grid-gui {
width: 400px;
height: 590px;
}
#palette-gui {
width: 600px;
height: 550px;
}
.rep-btn {
width: 8em;
}
#vote-for-colour {
}
#set-representation {
text-align: center;
transform: translateY(45%);
}
#representations {
}
.representation {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.full-height {
width: 90vw;
height: 90vh;
}
.two-rows-of-six {
width: 90vw;
height: 30vw;
}
#stripes {
}
.stripe {
}
#squares {
}
.square {
}
#spots {
border-collapse: separate;
border-spacing: 10px;
}
.spot {
border-radius: 100%;
}
#ratio-area {
background-color: black;
width: 50%;
height: 25vw;
position: absolute;
}
#ratio-background {
background-color: gray;
width: 98vw;
height: 25vw;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#ratio-gui {
width: 400px;
height: 460px;
}
#ratio-gui-preview-ratio-area {
background-color: black;
width: 50%;
height: 42px;
position: absolute;
}
#ratio-gui-preview-ratio-background {
background-color: gray;
width: 100%;
height: 42px;
margin: 0 auto;
}
body {
margin: 0;
font-family: sans-serif;
}
#background {
float: left;
width: 100vw;
height: 100vh;
position: absolute;
}
@keyframes updating {
from { color: white; }
to { color: lightgray; }
}
#updating {
/* Center the text vertically */
position:absolute;
left:0; right:0;
top:50%;
transform: translateY(-50%);
/* And horizontally */
text-align: center;
color: white;
animation: updating 1s infinite alternate;
font-size: 72px;
text-shadow: 0 0 1em black;
z-index: 2000;
}
#status {
}
.gui {
float: left;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin: auto;
padding: 0 20px;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
}
.centre {
width: 100%;
height: 100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.circle {
fill: white;
r: 18%;
cx: 50%;
cy: 50%;
}
#stroke {
stroke: black;
/*stroke-linecap: round;
stroke-width: 10;
stroke-dasharray: 50,50;*/
}
#stroke-gui {
width: 500px;
height: 640px;
/*visibility: visible;*/
}
#stroke-gui-preview {
width: 460px;
height: 72pt;
/*border: 1px solid lightgrey;*/
}
#stroke-gui-preview-stroke {
stroke: black;
/*stroke-linecap: round;
stroke-width: 10;
stroke-dasharray: 50,50;*/
}
#symbol {
background-color: lightgrey;
text-align: center;
line-height: 100%;
font-size: 75vmin;
width: 75vmin;
height: 75vmin;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#symbol-gui {
width: 500px;
height: 400px;
/*visibility: visible;*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>grid</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/shared.css">
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<div id="updating">Updating...</div>
<div id="status"></div>
<div id="representations">
<canvas id="grid"></canvas>
</div>
<!-- Here so we don't have to try to click outside the canvas. -->
<div id="background" onclick="showGui(event, -1)"></div>
<div class="gui" id="grid-gui">
<h2>Update Grid</h2>
<canvas class="center-block" id="gui-grid-preview"></canvas>
<form>
<div class="form-group">
<label class="gui-label"
for="grid-gui-rows">Row co-ordinates</label>
<input class="form-control"
type="text"
id="grid-gui-rows">
</div>
<div class="form-group">
<label class="gui-label"
for="grid-gui-columns">Column co-ordinates</label>
<input class="form-control"
type="text"
id="grid-gui-columns">
</div>
<div class="form-group">
<label for="gui-gas-account">Account to pay gas from</label>
<select class="form-control" id="gui-gas-account"></select>
</div>
<button type="button" class="btn btn-primary"
onClick="userSelectedUpdate()">Update</button>
&nbsp;
<button type="button" class="btn btn-default"
onClick="userSelectedCancel()">Cancel</button>
</form>
<p><b><i>Note that updating the stroke will cost gas!</i></b></p>
<p>To update the Grid, alter the values above entering them as comma-separated values from 1 to 100, e.g. 1,20,50,98. Then press
&quot;Update&quot;.</p>
<p>If you do not wish to update the Grid, just press
&quot;Cancel&quot;.</p>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/shared.js"></script>
<script src="js/grid.js"></script>
</body>
</html>
//code.stephenmorley.org
function Colour(){this.getIntegerRGB=function(){var a=this.getRGB();return{r:Math.round(a.r),g:Math.round(a.g),b:Math.round(a.b),a:a.a}};this.getPercentageRGB=function(){var a=this.getRGB();return{r:100*a.r/255,g:100*a.g/255,b:100*a.b/255,a:a.a}};this.getCSSHexadecimalRGB=function(){var a=this.getIntegerRGB(),h=a.r.toString(16),k=a.g.toString(16),a=a.b.toString(16);return"#"+(2==h.length?h:"0"+h)+(2==k.length?k:"0"+k)+(2==a.length?a:"0"+a)};this.getCSSIntegerRGB=function(){var a=this.getIntegerRGB();return"rgb("+a.r+","+a.g+","+a.b+")"};this.getCSSIntegerRGBA=function(){var a=this.getIntegerRGB();return"rgba("+a.r+","+a.g+","+a.b+","+a.a+")"};this.getCSSPercentageRGB=function(){var a=this.getPercentageRGB();return"rgb("+a.r+"%,"+a.g+"%,"+a.b+"%)"};this.getCSSPercentageRGBA=function(){var a=this.getPercentageRGB();return"rgba("+a.r+"%,"+a.g+"%,"+a.b+"%,"+a.a+")"};this.getCSSHSL=function(){var a=this.getHSL();return"hsl("+a.h+","+a.s+"%,"+a.l+"%)"};this.getCSSHSLA=function(){var a=this.getHSL();return"hsla("+a.h+","+a.s+"%,"+a.l+"%,"+a.a+")"};this.setNodeColour=function(a){a.style.color=this.getCSSHexadecimalRGB()};this.setNodeBackgroundColour=function(a){a.style.backgroundColor=this.getCSSHexadecimalRGB()}}RGBColour.prototype=new Colour;function RGBColour(a,h,k,n){function m(a,b){if(0==b)var d=0;else switch(a){case c.r:d=(c.g-c.b)/b*60;0>d&&(d+=360);break;case c.g:d=(c.b-c.r)/b*60+120;break;case c.b:d=(c.r-c.g)/b*60+240}return d}var l=void 0===n?1:Math.max(0,Math.min(1,n)),c={r:Math.max(0,Math.min(255,a)),g:Math.max(0,Math.min(255,h)),b:Math.max(0,Math.min(255,k))},b=null,d=null;this.getRGB=function(){return{r:c.r,g:c.g,b:c.b,a:l}};this.getHSV=function(){if(null==b){var a=Math.max(c.r,c.g,c.b),d=a-Math.min(c.r,c.g,c.b);b={h:m(a,d),s:0==a?0:100*d/a,v:a/2.55}}return{h:b.h,s:b.s,v:b.v,a:l}};this.getHSL=function(){if(null==d){var a=Math.max(c.r,c.g,c.b),b=a-Math.min(c.r,c.g,c.b),f=a/255-b/510;d={h:m(a,b),s:0==b?0:b/2.55/(.5>f?2*f:2-2*f),l:100*f}}return{h:d.h,s:d.s,l:d.l,a:l}}}HSVColour.prototype=new Colour;function HSVColour(a,h,k,n){var m=void 0===n?1:Math.max(0,Math.min(1,n)),l=(a%360+360)%360,c=Math.max(0,Math.min(100,h)),b=Math.max(0,Math.min(100,k)),d=null,e=null;this.getRGB=function(){if(null==d){if(0==c)var a=b,f=b,g=b;else{var e=l/60-Math.floor(l/60),h=b*(1-c/100),k=b*(1-c/100*e),e=b*(1-c/100*(1-e));switch(Math.floor(l/60)){case 0:a=b;f=e;g=h;break;case 1:a=k;f=b;g=h;break;case 2:a=h;f=b;g=e;break;case 3:a=h;f=k;g=b;break;case 4:a=e;f=h;g=b;break;case 5:a=b,f=h,g=k}}d={r:2.55*a,g:2.55*f,b:2.55*g}}return{r:d.r,g:d.g,b:d.b,a:m}};this.getHSV=function(){return{h:l,s:c,v:b,a:m}};this.getHSL=function(){if(null==e){var a=(2-c/100)*b/2;e={h:l,s:c*b/(50>a?2*a:200-2*a),l:a};isNaN(e.s)&&(e.s=0)}return{h:e.h,s:e.s,l:e.l,a:m}}}HSLColour.prototype=new Colour;function HSLColour(a,h,k,n){var m=void 0===n?1:Math.max(0,Math.min(1,n)),l=(a%360+360)%360,c=Math.max(0,Math.min(100,h)),b=Math.max(0,Math.min(100,k)),d=null,e=null;this.getRGB=function(){if(null==d)if(0==c)d={r:2.55*b,g:2.55*b,b:2.55*b};else{var e=50>b?b*(1+c/100):b+c-b*c/100,f=2*b-e;d={r:(a+120)/60%6,g:a/60,b:(a+240)/60%6};for(var g in d)d.hasOwnProperty(g)&&(d[g]=1>d[g]?f+(e-f)*d[g]:3>d[g]?e:4>d[g]?f+(e-f)*(4-d[g]):f,d[g]*=2.55)}return{r:d.r,g:d.g,b:d.b,a:m}};this.getHSV=function(){if(null==e){var a=c*(50>b?b:100-b)/100;e={h:l,s:200*a/(b+a),v:a+b};isNaN(e.s)&&(e.s=0)}return{h:e.h,s:e.s,v:e.v,a:m}};this.getHSL=function(){return{h:l,s:c,l:b,a:m}}};
\ No newline at end of file
This diff is collapsed.
/* Bitmap - A bitmap.
Copyright (C) 2017 Rob Myers <[email protected]>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
if (typeof web3 === 'undefined') {
var _pixelValues = '1000000000000001000000000000010000000000000000000000000000000110000000100000000000000000100000100000000001000000000000000000000000000000000000000000000000000000000011100000000000000000000000000000111110000000000000000000000000000000000000101000000000000111'.split('');
var getNetworkPixelValues = function (callback) {
callback(_pixelValues);
};
var commitNetworkPixelValues = function (newPixels) {
_pixelValues = newPixels;
};
}
var pixelValues;
var symbol = '';
var indexForCoords = function (x, y) {
return (y * 16) + x;
};
var drawPixels = function (pixels, ctx, shapeFun, cellSize, on, off) {
for (var y = 0; y < 16; y++) {
for (var x = 0; x < 16; x++) {
var value = pixels[indexForCoords(x, y)];
if (value == '1') {
ctx.fillStyle = on;
} else {
ctx.fillStyle = off;
}
var h = x * cellSize;
var v = y * cellSize;
shapeFun(ctx, h, v, cellSize);
}
}
};
var drawRect = function (ctx, h, v, cellSize) {
ctx.beginPath();
ctx.rect(h, v, h + cellSize, v + cellSize);
ctx.fill();
};
var drawCircle = function (ctx, h, v, cellSize) {
var radius = cellSize / 2;
ctx.beginPath();
ctx.arc(h + radius, v + radius, radius, 0, 2 * Math.PI, false);
ctx.fill();
};
var drawSymbol = function (ctx, h, v, cellSize) {
ctx.font = "" + cellSize + "px sans";
ctx.fillText(symbol, h, v + cellSize);
};
var drawPixelsRepresentation = function () {
var canvas = $("#bitmap").get(0);
var ctx = canvas.getContext("2d");
canvas.width = 1600;
canvas.height = 1600;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
drawPixels(pixelValues, ctx, drawSymbol, canvas.width / 16, 'black', 'white');
};
var guiPixelValues;
var guiClickHandler = function (i) {
return function () {
if (guiPixelValues[i] == "1") {
guiPixelValues[i] = "0";
} else {
guiPixelValues[i] = "1";
}
setGuiBitmapState();
};
};
var createGuiBitmap = function () {
var bitmap = $("#bitmap-gui-bitmap");
for (var i = 0; i < 256; i++) {
var id = "gui-pixel-" + i;
pixel = $('<div id="'
+ id
+ '" class="bitmap-gui-pixel"></div>');
bitmap.append(pixel);
pixel.on('click', guiClickHandler(i));
}
};
var setGuiBitmapState = function () {
var bitmap = $("#bitmap-gui-bitmap")[0];
for (var i = 0; i < 256; i++) {
var pixel = $("#gui-pixel-" + i);
if (guiPixelValues[i] == "1") {
pixel.addClass("bitmap-gui-pixel-on");
} else {
pixel.removeClass("bitmap-gui-pixel-on");
}
}
};
var guiDisplayHookFun = function () {
getNetworkPixelValues(function (pixels) {
guiPixelValues = pixels;
setGuiBitmapState();
});
};
window.onload = function () {
sharedInit(guiDisplayHookFun);
createGuiBitmap();
getNetworkPixelValues(function (pixels) {
pixelValues = pixels;
drawPixelsRepresentation();
});
};
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/* DemocraticPalette - A palette that anyone can vote for the colours of.
Copyright (C) 2016, 2017 Rob Myers <[email protected]>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
////////////////////////////////////////////////////////////////////////////////
// Mocking
////////////////////////////////////////////////////////////////////////////////
if (typeof web3 === 'undefined') {
var _palette = [[0, 0, 255], [255, 0, 0], [0, 255, 255],
[0, 128, 0], [96, 255, 0], [0, 0, 96],
[0, 96, 0], [32, 255, 0], [128, 255, 128],
[0, 255, 0], [128, 255, 0], [255, 0, 128]];
var _voteIndex = 0;