Skip to content

Implement tableviewer app #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

Implement tableviewer app #13

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
977f01d
began implementing tableviewer jquery plugin
Apr 15, 2016
0dc6072
Added tableviewer example. Created a tableviewer list that's automati…
Apr 16, 2016
a8c2aba
keys, values, and types are separated into separate columns. Added a …
Apr 17, 2016
773e8e7
styled tableviewer. Added titles.
Apr 18, 2016
fb1cec0
Capitalized type. Type label is a combination of array type and lengt…
Apr 19, 2016
3e7fe65
combined keys values and types into one column
Apr 21, 2016
96bcf6d
You can expand/collapse tables
Apr 23, 2016
0b7f171
formatted tableviewer
Apr 23, 2016
a5ed3a0
refactored _putValue
Apr 24, 2016
9b4d003
Turned number and booleans into inputs
Apr 24, 2016
b8d1fb6
Strings are now inputs. Improved how number and string inputs are res…
Apr 24, 2016
033531c
Added array elements
Apr 25, 2016
6ce288e
Changing input values updates networktables
Apr 25, 2016
1197903
Numbers inputs are correctly sent over networktables
Apr 25, 2016
3bda9c4
Added modal for putting values in networktables
Apr 27, 2016
1844a5a
added context menu for adding values
Apr 27, 2016
beed2db
tables and arrays are collapsed by default
Apr 27, 2016
148d5b2
Made root collapsable. You can add values off of root
Apr 27, 2016
baa37e2
When tables/arrays are expanded numbers/string are resized
Apr 27, 2016
0dcd1a1
tableviewer is now sorted by keys
Apr 28, 2016
a7a0df6
removed test print
Apr 28, 2016
86e1122
tableviewer doesn't break on firefox
Apr 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion MANIFEST.in
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
recursive-include example *
recursive-include pynetworktables2js/js *
recursive-include pynetworktables2js/js *
recursive-include pynetworktables2js/css *
30 changes: 30 additions & 0 deletions example/www/tableviewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/networktables/css/tableviewer.css"/>
</head>
<body>

<div id="tableviewer"></div>

<!-- This starts the NetworkTables websocket, it can be accessed from multiple
pages simultaneously -->
<script src="/networktables/networktables.js"></script>

<!-- Obviously, you will want to copy this file locally in a real
dashboard, as the Driver Station won't have internet access -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script src="/networktables/tableviewer.js"></script>


<script type="text/javascript">
"use strict";

var $tableviewer = $('#tableviewer').tableviewer();

</script>

</body>
</html>
109 changes: 109 additions & 0 deletions pynetworktables2js/css/tableviewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@

.tableviewer ul, .tableviewer li {
list-style: none;
}

.tableviewer ul {
padding-left: 0;
}

.tableviewer li.boolean, .tableviewer li.number, .tableviewer li.string {
padding-left: 25px;
}

.tableviewer li.table, .tableviewer li.array {
padding-left: 19px;
}

.tableviewer > ul {
padding-left: 0;
}

.tableviewer button.expanded, .tableviewer button.collapsed {
background: none;
border: none;
outline: none;
}

.tableviewer button.expanded::before {
content: "▼";
}

.tableviewer button.collapsed::before {
content: "▶";
}

.tableviewer button.collapsed + ul, .tableviewer button.collapsed + span + ul {
display: none;
}


.tableviewer .key::after {
content: ":";
display: inline-block;
padding: 0 10px;
}

.tableviewer span.type {
text-transform: capitalize;
color: #aaa;
font-size: x-small;
margin-left: 13px;
display: inline-block;
bottom: 2px;
position: relative;
}

.tableviewer .number span.type {
margin-left: 0;
}


.tableviewer input[type=number] {
position: relative;
border: none;
outline: none;
padding-left: 10px;
width: 100%;
text-overflow: ellipsis;
}

.tableviewer li.string, .tableviewer li.number {
display: flex;
flex-wrap: nowrap;
align-items: center;
}

.tableviewer li.string .key, .tableviewer li.number .key {
display: flex;
}

.tableviewer input[type="number"]::-webkit-outer-spin-button,
.tableviewer input[type="number"]::-webkit-inner-spin-button {
position: absolute;
left: -5px;
}


.tableviewer input[type=text] {
width: 100%;
border: none;
outline: none;
text-overflow: ellipsis;
margin: 0 3px;
}

.tableviewer .phantom-input {
position: absolute;
visibility: hidden;
-webkit-user-select: none;
}

.tableviewer input, .tableviewer .phantom-input {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}

.tableviewer .array ul .type {
display: none;
}
Loading