Skip to content

Add a couple new UI elements, change UI so items are displayed in order they are added #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
mkokotovich wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add a couple new UI elements, change UI so items are displayed in order they are added #13

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
607350e
Add basic button to call a custom function
mkokotovich Mar 19, 2016
d4e57f5
Make the function_button automatically add the function to the aREST …
mkokotovich Mar 19, 2016
646cc36
Add a Function With Input Button to be able to pass parameters to a f…
mkokotovich Mar 21, 2016
3048efc
Add a variable label that automatically registers the variable with t…
mkokotovich Mar 21, 2016
eeb6cc2
Add items to UI in order they were added
mkokotovich Mar 21, 2016
826754f
Add a bool to add_label that makes the label text smaller
mkokotovich Apr 8, 2016
c211a81
Made margins smaller on smalltext label
mkokotovich Apr 9, 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
314 changes: 264 additions & 50 deletions aREST_UI.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,21 @@ aREST_UI() {

}

typedef struct {
String function_name;
String description;
} function_button_t;

typedef enum {
TYPE_BUTTON=0,
TYPE_FUNCTION_BUTTON,
TYPE_FUNCTION_WITH_INPUT_BUTTON,
TYPE_SLIDER,
TYPE_VARIABLE_LABEL,
TYPE_LABEL
} ui_type_t;


// Get title
void title(String the_title) {
ui_title = the_title;
Expand All @@ -43,6 +58,41 @@ void button(int pin){
buttons[buttons_index] = pin;
buttons_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_BUTTON;
ui_order_index++;
}

// Create function button
void function_button(char *function_name, char *description, int (*f)(String)){

// Setup function
aREST::function(function_name, f);

// Set in function button array
function_buttons[function_buttons_index].function_name = String(function_name);
function_buttons[function_buttons_index].description = String(description);
function_buttons_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_FUNCTION_BUTTON;
ui_order_index++;
}

// Create function button
void function_with_input_button(char *function_name, char *description, int (*f)(String)){

// Setup function
aREST::function(function_name, f);

// Set in function with input button array
func_with_input_buttons[func_with_input_buttons_index].function_name = String(function_name);
func_with_input_buttons[func_with_input_buttons_index].description = String(description);
func_with_input_buttons_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_FUNCTION_WITH_INPUT_BUTTON;
ui_order_index++;
}

void slider(int pin) {
Expand All @@ -54,14 +104,148 @@ void slider(int pin) {
sliders[sliders_index] = pin;
sliders_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_SLIDER;
ui_order_index++;
}

void variable_label(char *variable_name, char *label_text, int *var){

// Initialize var
aREST::variable(variable_name, var);
variable_label_add(variable_name, label_text);
}

// Float variables (Mega & ESP only, or without CC3000)
#if defined(__AVR_ATmega1280__) || defined(__AVR_ATmega2560__) || defined(ESP8266) || defined(CORE_WILDFIRE) || !defined(ADAFRUIT_CC3000_H)
void variable_label(char *variable_name, char *label_text, float *var){

// Initialize variable
aREST::variable(variable_name, var);
variable_label_add(variable_name, label_text);
}
#endif

// String variables (Mega & ESP only, or without CC3000)
#if defined(__AVR_ATmega1280__) || defined(__AVR_ATmega2560__) || defined(ESP8266) || defined(CORE_WILDFIRE) || !defined(ADAFRUIT_CC3000_H)
void variable_label(char *variable_name, char *label_text, String *var){

// Initialize var
aREST::variable(variable_name, var);
variable_label_add(variable_name, label_text);
}
#endif

// Create variable label
void variable_label_add(char *variable_name, char *label_text){

var_labels_names[var_labels_index] = variable_name;
var_labels_text[var_labels_index] = label_text;
var_labels_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_VARIABLE_LABEL;
ui_order_index++;
}

// Create label
void label(char * label_name){
void label(char *label_text, bool small_text=false){

labels_text[labels_index] = label_text;
labels_text_should_be_small[labels_index] = small_text;
labels_index++;

// Set in the ui_order_list
ui_order_list[ui_order_index] = TYPE_LABEL;
ui_order_index++;
}

void add_next_button() {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-primary\" id='btn_on");
addToBuffer(buttons[current_buttons_index]);
addToBuffer("'>On</button></div>");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-danger\" id='btn_off");
addToBuffer(buttons[current_buttons_index]);
addToBuffer("'>Off</button></div>");
addToBuffer("</div>");
current_buttons_index++;
}

int_labels_names[int_labels_index] = label_name;
int_labels_index++;
void add_next_function_button() {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-primary\" id='func_btn");
addToBuffer(current_function_buttons_index);
addToBuffer("'>");
addToBuffer(function_buttons[current_function_buttons_index].description);
addToBuffer("</button></div>");
addToBuffer("</div>");
current_function_buttons_index++;
}

void add_next_function_with_input_button() {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class=\"col-md-2\"><input type='text' id='func_with_input_text");
addToBuffer(current_func_with_input_buttons_index);
addToBuffer("'/></div>");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-primary\" id='func_with_input_btn");
addToBuffer(current_func_with_input_buttons_index);
addToBuffer("'>");
addToBuffer(func_with_input_buttons[current_func_with_input_buttons_index].description);
addToBuffer("</button></div>");
addToBuffer("</div>");
current_func_with_input_buttons_index++;
}

void add_next_slider() {
addToBuffer("<div class=\"row\">");
#if defined(ESP8266)
addToBuffer("<div class=\"col-md-2\"><input type='range' value='0' max='1023' min='0' step='5' id='slider");
#else
addToBuffer("<div class=\"col-md-2\"><input type='range' value='0' max='255' min='0' step='5' id='slider");
#endif
addToBuffer(sliders[current_sliders_index]);
addToBuffer("'></div>");
addToBuffer("</div>");
current_sliders_index++;
}

void add_next_variable_label() {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class='col-md-4 indicator'>");
addToBuffer(var_labels_text[current_var_labels_index]);
addToBuffer(": </div>");
addToBuffer("<div class='col-md-4 indicator' id='");
addToBuffer(var_labels_names[current_var_labels_index]);
addToBuffer("'></div>");
addToBuffer("</div>");
current_var_labels_index++;
}

void add_next_label() {
if (labels_text_should_be_small[current_labels_index])
{
addToBuffer("<div>");
addToBuffer("<div class='col-md-10 smalltext'>");
}
else
{
addToBuffer("<div class=\"row\">");
addToBuffer("<div class='col-md-10 indicator'>");
}
addToBuffer(labels_text[current_labels_index]);
addToBuffer("</div>");
addToBuffer("</div>");
current_labels_index++;
}

void reset_current_indices() {
current_buttons_index = 0;
current_function_buttons_index = 0;
current_func_with_input_buttons_index = 0;
current_sliders_index = 0;
current_var_labels_index = 0;
current_labels_index = 0;
}

// Handle connection
Expand All @@ -75,11 +259,12 @@ virtual void root_answer() {
addToBuffer("src=\"http://code.jquery.com/jquery-2.1.3.min.js\">");
addToBuffer("</script>");
addToBuffer("<script type='text/javascript' src='http://cdn.rawgit.com/Foliotek/AjaxQ/master/ajaxq.js'></script>");
addToBuffer("<style>.row {margin-top: 30px;} .indicator {font-size: 30px; vertical-align: middle;}</style>");
addToBuffer("<style>.row {margin-top: 30px;} .indicator {font-size: 30px; vertical-align: middle;} .smalltext {font-size: 15px; margin-top: 5px; margin-bottom: 15px;}</style>");
addToBuffer("<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">");
addToBuffer("</head><body>");
addToBuffer("<div class=\"container\">");


// Title
if (ui_title.length() != 0) {
addToBuffer("<h1>");
Expand All @@ -90,41 +275,29 @@ virtual void root_answer() {
addToBuffer("<h1>Interface</h1>");
}

// Buttons UI
for (int i = 0; i < buttons_index; i++) {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-primary\" id='btn_on");
addToBuffer(buttons[i]);
addToBuffer("'>On</button></div>");
addToBuffer("<div class=\"col-md-2\"><button class=\"btn btn-block btn-lg btn-danger\" id='btn_off");
addToBuffer(buttons[i]);
addToBuffer("'>Off</button></div>");
addToBuffer("</div>");
}

// // Sliders UI
for (int i = 0; i < sliders_index; i++) {
addToBuffer("<div class=\"row\">");
#if defined(ESP8266)
addToBuffer("<div class=\"col-md-2\"><input type='range' value='0' max='1023' min='0' step='5' id='slider");
#else
addToBuffer("<div class=\"col-md-2\"><input type='range' value='0' max='255' min='0' step='5' id='slider");
#endif
addToBuffer(sliders[i]);
addToBuffer("'></div>");
addToBuffer("</div>");
}

// Labels UI
for (int j = 0; j < int_labels_index; j++) {
addToBuffer("<div class=\"row\">");
addToBuffer("<div class='col-md-3 indicator'>");
addToBuffer(int_labels_names[j]);
addToBuffer(": </div>");
addToBuffer("<div class='col-md-3 indicator' id='");
addToBuffer(int_labels_names[j]);
addToBuffer("'></div>");
addToBuffer("</div>");
reset_current_indices();
// Add all UI elements in order they were added
for (int i = 0; i < ui_order_index; i++) {
switch (ui_order_list[i]) {
case TYPE_BUTTON:
add_next_button();
break;
case TYPE_FUNCTION_BUTTON:
add_next_function_button();
break;
case TYPE_FUNCTION_WITH_INPUT_BUTTON:
add_next_function_with_input_button();
break;
case TYPE_SLIDER:
add_next_slider();
break;
case TYPE_VARIABLE_LABEL:
add_next_variable_label();
break;
case TYPE_LABEL:
add_next_label();
break;
}
}

addToBuffer("</div>");
Expand All @@ -145,6 +318,26 @@ virtual void root_answer() {
addToBuffer("/0');});");
}

// Function Buttons JavaScript
for (int i = 0; i < function_buttons_index; i++) {
addToBuffer("$('#func_btn");
addToBuffer(i);
addToBuffer("').click(function() {$.getq('queue','/");
addToBuffer(function_buttons[i].function_name);
addToBuffer("');});");
}

// Function With Input Buttons JavaScript
for (int i = 0; i < func_with_input_buttons_index; i++) {
addToBuffer("$('#func_with_input_btn");
addToBuffer(i);
addToBuffer("').click(function() {var text = document.getElementById(\"func_with_input_text");
addToBuffer(i);
addToBuffer("\").value; $.getq('queue','/");
addToBuffer(func_with_input_buttons[i].function_name);
addToBuffer("?params=' + text); });");
}

// Sliders JavaScript
for (int i = 0; i < sliders_index; i++) {
addToBuffer("$('#slider");
Expand All @@ -156,14 +349,14 @@ virtual void root_answer() {
addToBuffer("/' + val); });");
}

// Labels JavaScript
for (int j = 0; j < int_labels_index; j++) {
// Variable Labels JavaScript
for (int j = 0; j < var_labels_index; j++) {
addToBuffer("$.getq('queue','/");
addToBuffer(int_labels_names[j]);
addToBuffer(var_labels_names[j]);
addToBuffer("', function(data) { $('#");
addToBuffer(int_labels_names[j]);
addToBuffer(var_labels_names[j]);
addToBuffer("').html(data.");
addToBuffer(int_labels_names[j]);
addToBuffer(var_labels_names[j]);
addToBuffer("); });");
}

Expand All @@ -181,16 +374,37 @@ virtual void root_answer() {
// Buttons array
int buttons[10];
int buttons_index;
int current_buttons_index;

// Function Buttons array
function_button_t function_buttons[10];
int function_buttons_index;
int current_function_buttons_index;

// Function With Input Buttons array
function_button_t func_with_input_buttons[10];
int func_with_input_buttons_index;
int current_func_with_input_buttons_index;

// Buttons array
int sliders[10];
int sliders_index;
int current_sliders_index;

// Indicators array
uint8_t int_labels_index;
int * int_labels_variables[10];
char * int_labels_names[10];

// Variable Labels array
uint8_t var_labels_index;
uint8_t current_var_labels_index;
char * var_labels_names[10];
char * var_labels_text[10];

// Labels array
uint8_t labels_index;
uint8_t current_labels_index;
char * labels_text[10];
bool labels_text_should_be_small[10];

ui_type_t ui_order_list[30];
int ui_order_index;
};

#endif
#endif