Start integration of narrative builder
This commit is contained in:
Ruben van de Ven
parent
c5227d7f8c
commit
3cc1586ed2
4 changed files with 188 additions and 13 deletions
|
|
@ -17,7 +17,6 @@ from urllib.parse import urlparse
|
||||||
logger = logging.getLogger("panopticon")
|
logger = logging.getLogger("panopticon")
|
||||||
|
|
||||||
web_dir = os.path.join(os.path.split(__file__)[0], '..', 'www')
|
web_dir = os.path.join(os.path.split(__file__)[0], '..', 'www')
|
||||||
print(web_dir)
|
|
||||||
|
|
||||||
|
|
||||||
def getWebSocketHandler(central_command):
|
def getWebSocketHandler(central_command):
|
||||||
|
|
@ -57,7 +56,6 @@ def getWebSocketHandler(central_command):
|
||||||
|
|
||||||
def send(self, message):
|
def send(self, message):
|
||||||
j = json.dumps(message)
|
j = json.dumps(message)
|
||||||
print(self.connections)
|
|
||||||
[con.write_message(j) for con in self.connections]
|
[con.write_message(j) for con in self.connections]
|
||||||
|
|
||||||
# client disconnected
|
# client disconnected
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: "Noto Sans", sans-serif;
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
@ -37,15 +37,19 @@ body {
|
||||||
justify-content: center; }
|
justify-content: center; }
|
||||||
#status .hugvey h1 {
|
#status .hugvey h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0; }
|
margin: 0;
|
||||||
#status .hugvey.hugvey--on h1 {
|
font-weight: normal; }
|
||||||
|
#status .hugvey h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
top: 5px; }
|
top: 5px; }
|
||||||
#status .hugvey.hugvey--off {
|
#status .hugvey.hugvey--off {
|
||||||
background-image: linear-gradient(to top, #575d74, #3572a5); }
|
background-image: linear-gradient(to top, #575d74, #3572a5); }
|
||||||
#status .hugvey.hugvey--off h1::after {
|
#status .hugvey.hugvey--off::after {
|
||||||
content: '[off]'; }
|
content: 'disconnected';
|
||||||
|
font-style: italic;
|
||||||
|
color: gray;
|
||||||
|
text-align: center; }
|
||||||
|
|
||||||
#story {
|
#story {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
@ -55,4 +59,74 @@ body {
|
||||||
left: 5px; }
|
left: 5px; }
|
||||||
#story svg#graph {
|
#story svg#graph {
|
||||||
width: 100%;
|
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; */ }
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,7 @@
|
||||||
<div id="btn-save" class="btn">Save</div>
|
<div id="btn-save" class="btn">Save</div>
|
||||||
<div id="btn-addMsg" class="btn">Create message</div>
|
<div id="btn-addMsg" class="btn">Create message</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="msg"></div>
|
||||||
<svg id='graph' viewbox="0 0 1280 1024"
|
<svg id='graph' viewbox="0 0 1280 1024"
|
||||||
preserveAspectRatio="xMidYMid">
|
preserveAspectRatio="xMidYMid">
|
||||||
<defs>
|
<defs>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
body{
|
body{
|
||||||
font-family: sans-serif;
|
font-family: "Noto Sans", sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -45,20 +45,25 @@ body{
|
||||||
h1{
|
h1{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hugvey--on{
|
// &.hugvey--on{
|
||||||
h1 {
|
h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.hugvey--off{
|
&.hugvey--off{
|
||||||
background-image: linear-gradient(to top, #575d74, #3572a5);
|
background-image: linear-gradient(to top, #575d74, #3572a5);
|
||||||
h1::after{
|
&::after{
|
||||||
content: '[off]'
|
content: 'disconnected';
|
||||||
|
font-style: italic;
|
||||||
|
color: gray;
|
||||||
|
text-align:center;
|
||||||
|
// font-size: 30pt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -76,5 +81,102 @@ body{
|
||||||
svg#graph{
|
svg#graph{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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; */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue