Commit 105bde4c authored by Jeroen Vreeken's avatar Jeroen Vreeken
Browse files

Introduce new dt_ui elements.

Moon tracker, Sun tracker and Manual control move to new dt_ui elements.
Fix websocket line break handling
parent 5acb5ce6
......@@ -23,6 +23,7 @@
#include <string.h>
#include <sys/ioctl.h>
#include <unistd.h>
#include <errno.h>
#include "trace.h"
#include "websocket_plugin.h"
......@@ -196,6 +197,8 @@ void *status_thread(void *arg)
char *host;
int port = -1;
int fd = -1;
int pos = 0;
unsigned char linebuf[1000];
free(status);
......@@ -221,7 +224,6 @@ void *status_thread(void *arg)
while (priv->connected) {
unsigned char linebuf[1000];
char *msg;
int r;
fd_set fd_rd;
......@@ -243,16 +245,32 @@ void *status_thread(void *arg)
select(fd + 1, &fd_rd, NULL, NULL, &timeout);
if (FD_ISSET(fd, &fd_rd)) {
r = read(fd, linebuf, 999);
r = read(fd, linebuf + pos, 999 - pos);
if (r > 0) {
linebuf[r] = 0;
asprintf(&msg, "status %s %s",
ident, linebuf);
priv->server->send(priv->server,
MESSAGE_TYPE_TEXT,
(unsigned char *)msg, strlen(msg));
} else {
int i;
for (i = 0; i <r; i++) {
if (linebuf[pos + i] == '\n') {
linebuf[pos + i] = 0;
asprintf(&msg,
"status %s %s\n",
ident, linebuf);
priv->server->send(
priv->server,
MESSAGE_TYPE_TEXT,
(unsigned char *)msg,
strlen(msg));
free(msg);
if (r - i - 1 > 0)
memmove(
linebuf,
linebuf + pos + i + 1,
r - i - 1);
pos -= pos + i +1;
}
}
pos += r;
} else if (errno != EAGAIN) {
close(fd);
fd = -1;
sleep(1);
......
......@@ -20,8 +20,290 @@
*/
var dt_ui_loaded;
if (!dt_ui_loaded) {
dt_ui_loaded = true;
dt_ui_color_text_title = "blue";
dt_ui_color_background = "lightgrey";
dt_ui_color_background_title = "silver";
dt_ui_color_indicator_off = "grey";
dt_ui_color_indicator_green = "#00ff00";
dt_ui_color_indicator_red = "#ff0000";
dt_ui_padding_height_window = 10;
dt_ui_padding_width_window = 10;
eval(load("trace.js"));
function strip_px(pos)
{
return parseInt(pos.replace("px", "")) | 0;
}
function dt_ui_element(elementid)
{
if (elementid === undefined)
return;
var create_element = (this.element === undefined);
this.name = elementid;
if (create_element)
this.element = document.getElementById(elementid);
if (this.element == null) {
this.element = document.createElement("span");
this.element.id = elementid;
}
this.element.style.display = "inline-block";
this.style_display = "inline-block";
this.element.style.cssFloat = "none";
this.element.style.position = "absolute";
this.element.style.left = "0px";
this.element.style.top = "0px";
//debug
// this.element.style.borderStyle = "solid";
// this.element.style.borderWidth = "1px";
this.padding_height = 0;
this.padding_width = 0;
}
dt_ui_element.prototype.add = function (element)
{
if (Array.isArray(element)) {
var i;
for (i = 0; i < element.length; i++) {
this.add(element[i]);
}
} else {
this.element.appendChild(element.element);
element.parent = this;
}
}
dt_ui_element.prototype.width_set = function(w)
{
this.element.style.width = w + "px";
// alert(this.name + ": width_set " + w);
}
dt_ui_element.prototype.width_get = function()
{
// alert(this.name + ": width get: " + this.element.offsetWidth);
return this.element.offsetWidth;
}
dt_ui_element.prototype.height_set = function(h)
{
this.element.style.height = h + "px";
// alert(this.name + ": height_set " + h);
}
dt_ui_element.prototype.height_get = function()
{
return this.element.offsetHeight;
}
dt_ui_element.prototype.top_set = function(t)
{
if (this.parent)
t += this.parent.padding_height;
this.element.style.top = t + "px";
// alert(this.name + ": top_set " + t +" "+ this.parent.padding_height);
}
dt_ui_element.prototype.top_get = function()
{
var t = this.element.offsetTop;
if (this.parent)
t -= this.parent.padding_height;
if (t < 0)
t = 0;
return t;
}
dt_ui_element.prototype.left_set = function(l)
{
// var org = l;
if (this.parent)
l += this.parent.padding_width;
this.element.style.left= l + "px";
// alert(this.name + ": left_set " + l + " " + org +" "+this.parent.padding_width);
}
dt_ui_element.prototype.left_get = function()
{
var l = this.element.offsetLeft;
if (this.parent)
l -= this.parent.padding_height;
if (l < 0)
l = 0;
return l;
}
dt_ui_element.prototype.resize_equal = function(elements)
{
var i;
var maxw = 0;
var maxh = 0;
for (i = 0; i < elements.length; i++) {
maxw = Math.max(maxw, elements[i].element.offsetWidth);
maxh = Math.max(maxh, elements[i].element.offsetHeight);
}
for (i = 0; i < elements.length; i++) {
elements[i].width_set(maxw);
elements[i].height_set(maxh);
}
}
dt_ui_element.prototype.room = function(element)
{
var w;
var h;
w = element.left_get() + element.width_get();
h = element.top_get() + element.height_get();
w += this.padding_width * 2;
h += this.padding_height * 2;
if (w > this.width_get()) {
this.width_set(w);
}
if (h > this.height_get()) {
this.height_set(h);
}
if(this.parent)
this.parent.room(this);
}
dt_ui_element.prototype.align_vertical = function(elements, spacing)
{
var i;
var left = elements[0].left_get();
var top;
spacing = typeof spacing == 'undefined' ? 0 : spacing;
top = elements[0].top_get();
for (i = 0; i < elements.length; i++) {
elements[i].left_set(left);
elements[i].top_set(top);
this.room(elements[i]);
top += elements[i].height_get();
top += spacing;
}
}
dt_ui_element.prototype.align_horizontal = function(elements, spacing)
{
var i;
var top = elements[0].top_get();
var left;
spacing = typeof spacing == 'undefined' ? 0 : spacing;
left = elements[0].left_get();
for (i = 0; i < elements.length; i++) {
elements[i].left_set(left);
elements[i].top_set(top);
// alert(elements[i].name + ": " + left + "," + top);
this.room(elements[i]);
left += elements[i].width_get();
left += spacing;
}
}
dt_ui_element.prototype.background_set = function(color)
{
this.element.style.background = color;
}
dt_ui_element.prototype.visible_set = function(visible)
{
if (visible)
this.element.style.display = this.style_display;
else {
this.element.style.display = "none";
}
}
function dt_ui_title(elementid)
{
dt_ui_element.call(this, elementid);
this.title_set("untitled");
this.element.style.whiteSpace = "nowrap";
this.element.style.borderColor = "black";
this.element.style.borderStyle = "solid";
this.element.style.borderTopWidth = "0px";
this.element.style.borderBottomWidth = "1px";
this.element.style.borderLeftWidth = "0px";
this.element.style.borderRightWidth = "1px";
this.element.style.background = dt_ui_color_background_title;
}
dt_ui_title.prototype = new dt_ui_element();
dt_ui_title.prototype.title_set = function (titletext) {
this.element.innerHTML = "<i>" + titletext + "</i>";
this.element.style.color = dt_ui_color_text_title;
if (this.parent)
this.parent.room(this);
}
function dt_ui_window(elementid)
{
dt_ui_element.call(this, elementid);
this.title = new dt_ui_title(elementid + "_windowtitle");
dt_ui_element.prototype.add.call(this, this.title);
this.content = new dt_ui_element(elementid + "_windowcontent");
this.content.element.style.position = "relative";
dt_ui_element.prototype.add.call(this, this.content);
this.content.top_set(this.title.height_get());
this.content.padding_height = dt_ui_padding_height_window;
this.content.padding_width = dt_ui_padding_width_window;
this.element.style.border = "thin solid black";
this.element.style.background = dt_ui_color_background;
this.element.style.position = "relative";
}
dt_ui_window.prototype = new dt_ui_element();
dt_ui_window.prototype.title_set = function (titletext)
{
this.title.title_set(titletext);
}
dt_ui_window.prototype.add = function (element)
{
this.content.add(element);
}
dt_ui_window.prototype.align_vertical = function(elements, spacing)
{
this.content.align_vertical(elements, spacing);
}
dt_ui_window.prototype.align_horizontal = function(elements, spacing)
{
this.content.align_horizontal(elements, spacing);
}
function dt_ui_value(elementid)
{
dt_ui_element.call(this, elementid);
this.align = "center";
this.element.style.borderStyle = "solid";
this.element.style.borderWidth = "1px";
this.element.style.borderColor = "black";
this.element.style.background = dt_ui_color_background;
this.element.style.alignContent = "center";
this.element.style.textAlign = this.align;
this.element.style.display = "block";
this.style_display = "block";
this.element.innerHTML = "X";
this.element.style.fontFamily = "monospace";
this.element.style.fontSize = "120%";
}
dt_ui_value.prototype = new dt_ui_element();
dt_ui_value.prototype.value_set = function(value)
{
this.element.innerHTML = value;
if (this.parent)
this.parent.room(this);
}
function dt_button(element)
{
this.div = document.getElementById(element);
......@@ -94,6 +376,109 @@ function dt_button_indicator(element)
}
}
function dt_ui_button(elementid)
{
this.element = document.createElement("button");
this.element.id = elementid;
dt_ui_element.call(this, elementid);
this.button_text = new dt_ui_element(elementid + "_text");
dt_ui_element.prototype.add.call(this, this.button_text);
// this.button_text.element.style.borderStyle = "solid";
// this.button_text.element.style.borderWidth = "2px";
this.button_text.element.style.whiteSpace = "nowrap";
this.padding_height = 4;
this.padding_width = 4;
var button_this = this;
this.element.onclick = function()
{
if (button_this.onclick)
button_this.onclick(button_this)
}
}
dt_ui_button.prototype = new dt_ui_element();
dt_ui_button.prototype.text_set = function (text)
{
this.button_text.element.innerHTML = text;
this.button_text.top_set(0);
this.button_text.left_set(0);
this.room(this.button_text);
}
dt_ui_button.prototype.add = function (element)
{
this.button_text.add(element);
this.button_text.top_set(0);
this.button_text.left_set(0);
this.room(this.button_text);
}
dt_ui_button.prototype.color_set = function(color)
{
this.element.style.background = color;
}
dt_ui_button.prototype.room = function (element)
{
if (element == this.button_text)
dt_ui_element.prototype.room.call(this, element);
else
this.button_text.room(element);
}
function dt_ui_indicator(elementid)
{
dt_ui_element.call(this, elementid);
this.element.style.border = "1px inset lightgrey";
this.element.style.borderRadius = "7px";
this.element.style.width = "12px";
this.element.style.height = "12px";
this.element.style.background = dt_ui_color_indicator_off;
}
dt_ui_indicator.prototype = new dt_ui_element();
dt_ui_indicator.prototype.color_set = function(color)
{
this.element.style.background = color;
}
function dt_ui_button_indicator(elementid)
{
dt_ui_button.call(this, elementid);
this.indicator = new dt_ui_indicator(elementid + "_indicator");
dt_ui_button.prototype.add.call(this, this.indicator);
this.button_indicator_text = new dt_ui_element(elementid + "_ind_text");
dt_ui_button.prototype.add.call(this, this.button_indicator_text);
// this.button_indicator_text.element.style.borderStyle = "solid";
// this.button_indicator_text.element.style.borderWidth = "2px";
// this.element.style.borderStyle = "solid";
// this.element.style.borderWidth = "2px";
// this.element.style.borderColor =
// dt_ui_color_indicator_off;
this.text_set("?");
}
dt_ui_button_indicator.prototype = new dt_ui_button();
dt_ui_button_indicator.prototype.text_set = function (text)
{
this.button_indicator_text.element.innerHTML = text;
this.align_horizontal([this.indicator, this.button_indicator_text], 5);
}
dt_ui_button_indicator.prototype.add = function (element)
{
this.button_indicator_text.add(element);
}
dt_ui_button_indicator.prototype.color_set = function(color)
{
this.indicator.color_set(color);
// this.element.style.borderColor = color;
}
function dt_traceval(element)
{
......@@ -247,3 +632,5 @@ function dt_traceval(element)
this.trace.open(url, name, freq);
}
}
} /* dt_ui_loaded */
......@@ -7,10 +7,7 @@
</title>
</head>
<body background="achtergrond.jpg"
onKeyDown="manual_spg_keydown(event)"
onKeyUp="manual_spg_keyup(event)"
>
<body background="achtergrond.jpg" >
<p>
......@@ -370,55 +367,6 @@
</td>
<td>
<!--
Manual control
-->
<div style="background: grey; border:thin solid black" width="50%" id="spg_manual">
<i>
Manual control
</i>
<center>
<table border="0" width="100%">
<tr>
<td rowspan="2"></td>
<td></td>
<th height="40" width="40" id="manual_spg_elp" style="background: #f0f0f0; border: thin solid black">
El +
</th><td></td>
<td rowspan="2"></td>
<td rowspan="2" style="border: thin solid black" >
<center><b>Speed:</b></center><br>
<span id="manual_speed_slow"></span><br>
<span id="manual_speed_medium"></span><br>
<span id="manual_speed_fast"></span><br>
</td>
</tr>
<tr>
<th height="40" width="40" id="manual_spg_azm" style="background: #f0f0f0; border: thin solid black">
Az -
</th>
<th height="40" width="40" id="manual_spg_elm" style="background: #f0f0f0; border: thin solid black">
El -
</th>
<th height="40" width="40" id="manual_spg_azp" style="background: #f0f0f0; border: thin solid black">
Az +
</th>
</tr>
</table>
</center>
</div>
</td>
<td>
<!--
......@@ -486,49 +434,15 @@
<!--
Sun
-->
<div style="background: lightgrey; border:thin solid black" width="50" id="spg_sun">
<i>
Sun setpoint generator
</i>
<div style="border:thin solid black" align="center">
<b>Compensations and switches:</b>
<br>
<span id="sun_enabled"></span>
<span id="sun_dt_model_enabled"></span>
</div>
</div>
</td>
<td>
<!--
Moon
Manual control
-->
<div style="background: lightgrey; border:thin solid black" width="50" id="spg_moon">
<i>
Moon setpoint generator
</i>
<div style="border:thin solid black" align="center">
<b>Compensations and switches:</b>
<br>
<span id="moon_enabled"></span>
<span id="moon_dt_model_enabled"></span>
</div>
<div id="spg_sun"></div>
<div id="spg_moon"></div>
<div id="spg_manual"></div>
</div>
</td>
......@@ -761,11 +675,12 @@ eval(load("shell.js"));
eval(load("auth.js"));
eval(load("auth_status.js"));
eval(load("azel_command.js"));
eval(load("j2000_status.js"));
eval(load("j2000_command.js"));
eval(load("j2000.js"));
eval(load("status.js"));
eval(load("command.js"));
eval(load("manual_command.js"));
eval(load("manual.js"));
eval(load("sun.js"));
eval(load("moon.js"));
eval(load("dt_view.js"));
eval(load("utils.js"));
eval(load("offset.js"));
......@@ -793,13 +708,15 @@ var j2000_command_url = "command.cgi_j2000";
var sat_status_url = "status.cgi";
var sat_command_url = "command.cgi_sat";