r
/
hugvey
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Start integration of narrative builder

This commit is contained in:
Ruben van de Ven 2019-01-23 15:41:40 +01:00
parent c5227d7f8c
commit 3cc1586ed2
4 changed files with 188 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
hugvey/panopticon.py
View File

@ -17,7 +17,6 @@ from urllib.parse import urlparse
logger = logging.getLogger("panopticon")
web_dir = os.path.join(os.path.split(__file__)[0], '..', 'www')
print(web_dir)
def getWebSocketHandler(central_command):
@ -57,7 +56,6 @@ def getWebSocketHandler(central_command):
def send(self, message):
j = json.dumps(message)
print(self.connections)
[con.write_message(j) for con in self.connections]
# client disconnected

86
www/css/styles.css
View File

@ -1,5 +1,5 @@
body {
font-family: sans-serif;
font-family: "Noto Sans", sans-serif;
margin: 0; }
.btn {
@ -37,15 +37,19 @@ body {
justify-content: center; }
#status .hugvey h1 {
text-align: center;
margin: 0; }
#status .hugvey.hugvey--on h1 {
margin: 0;
font-weight: normal; }
#status .hugvey h1 {
position: absolute;
left: 5px;
top: 5px; }
#status .hugvey.hugvey--off {
background-image: linear-gradient(to top, #575d74, #3572a5); }
#status .hugvey.hugvey--off h1::after {
content: '[off]'; }
#status .hugvey.hugvey--off::after {
content: 'disconnected';
font-style: italic;
color: gray;
text-align: center; }
#story {
position: relative; }
@ -55,4 +59,74 @@ body {
left: 5px; }
#story svg#graph {
width: 100%;
height: 100%; }
height: 100%;
cursor: grab; }
#story svg#graph:active {
cursor: grabbing; }
#story circle {
cursor: pointer;
fill: #77618e; }
#story .startMsg circle {
fill: lightseagreen; }
#story .endMsg circle {
fill: lightslategray; }
#story .orphanedMsg {
fill: lightcoral; }
#story text {
text-anchor: middle;
font-size: 11pt;
font-family: sans-serif;
fill: white; }
#story line {
marker-end: url("#arrowHead");
stroke-width: 2px;
stroke: black; }
#story line.link--noconditions {
stroke-dasharray: 5 4;
stroke: red; }
#story label::after {
content: '';
clear: both;
display: block; }
#story label {
width: 100%;
font-weight: bold;
display: block;
margin: 0 -10px;
padding: 5px 10px; }
#story label input, #story label select {
float: right; }
#story label:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.3); }
#story #msg {
position: absolute;
top: 0;
right: 0;
width: 30%;
max-height: 100%;
overflow-y: auto; }
#story #msg .msg__info, #story #msg .directions > div {
padding: 10px;
margin-bottom: 10px;
background: lightgray; }
#story #nodes g:hover circle,
#story .selectedMsg circle {
stroke: lightgreen;
stroke-width: 8; }
#story .controlDown #nodes g:hover circle,
#story .secondaryMsg circle {
stroke: lightgreen;
stroke-width: 5;
stroke-dasharray: 10 3; }
#story .condition h4 {
text-align: center; }
#story .condition + .condition::before {
content: "OR";
display: block;
border-bottom: solid 2px;
height: 10px;
margin-bottom: 15px;
text-align: center;
text-shadow: 2px 2px 2px lightgray,-2px 2px 2px lightgray,2px -2px 2px lightgray,-2px -2px 2px lightgray; }
#story .condition--add {
/* text-align: center; */ }

1
www/index.html
View File

@ -46,6 +46,7 @@
<div id="btn-save" class="btn">Save</div>
<div id="btn-addMsg" class="btn">Create message</div>
</div>
<div id="msg"></div>
<svg id='graph' viewbox="0 0 1280 1024"
preserveAspectRatio="xMidYMid">
<defs>

112
www/scss/styles.scss
View File

@ -1,5 +1,5 @@
body{
font-family: sans-serif;
font-family: "Noto Sans", sans-serif;
margin: 0;
}
@ -45,20 +45,25 @@ body{
h1{
text-align: center;
margin: 0;
font-weight: normal;
}
&.hugvey--on{
// &.hugvey--on{
h1 {
position: absolute;
left: 5px;
top: 5px;
}
}
// }
&.hugvey--off{
background-image: linear-gradient(to top, #575d74, #3572a5);
h1::after{
content: '[off]'
&::after{
content: 'disconnected';
font-style: italic;
color: gray;
text-align:center;
// font-size: 30pt;
}
}
}
@ -76,5 +81,102 @@ body{
svg#graph{
width: 100%;
height: 100%;
cursor: grab;
&:active{
cursor: grabbing;
}
}
circle{
cursor: pointer;
fill: rgb(119, 97, 142);
}
.startMsg circle{
fill: lightseagreen;
}
.endMsg circle{
fill: lightslategray;
}
.orphanedMsg{
fill: lightcoral;
}
text{
text-anchor: middle;
font-size: 11pt;
font-family: sans-serif;
fill: white;
}
line{
marker-end: url('#arrowHead');
stroke-width: 2px;
stroke: black;
}
line.link--noconditions{
stroke-dasharray: 5 4;
stroke: red;
}
label::after {
content: '';
clear: both;
display: block;
}
label{
width:100%;
font-weight:bold;
display: block;
margin: 0 -10px;
padding: 5px 10px;
}
label input,label select{
float: right;
}
label:nth-child(odd){
background-color: rgba(255,255,255,0.3);
}
#msg{
position: absolute;
top:0;
right:0;
width: 30%;
max-height:100%;
overflow-y: auto;
.msg__info, .directions > div{
padding: 10px;
margin-bottom: 10px;
background:lightgray;
}
}
#nodes g:hover circle,
.selectedMsg circle {
stroke: lightgreen;
stroke-width: 8;
}
.controlDown #nodes g:hover circle,
.secondaryMsg circle {
stroke: lightgreen;
stroke-width: 5;
stroke-dasharray: 10 3;
}
.condition h4{
text-align: center;
}
.condition + .condition::before {
content: "OR";
display: block;
border-bottom: solid 2px;
height: 10px;
margin-bottom: 15px;
text-align: center;
text-shadow: 2px 2px 2px lightgray,-2px 2px 2px lightgray,2px -2px 2px lightgray,-2px -2px 2px lightgray;
}
.condition--add{
/* text-align: center; */
}
}