diff --git a/CardCreator.pde b/CardCreator.pde index 7dee175..29d50e0 100644 --- a/CardCreator.pde +++ b/CardCreator.pde @@ -1,173 +1,173 @@ -/** - * CardCreator.pde - * - * This script aids in playing card design by using a customizable card - * template, building each card file with information provided in two - * spreadsheets. - * - * @author Andrew Albers - * @version 1.0 - * @since 2014-08-30 - */ - -PGraphics cardMain; -PGraphics fontPlacer; -PImage cardPic; -PFont font; -Table content; -Table template; -int maxWid = 0; -int maxHei = 0; -ArrayList elements; - -/** - * Reads csv files, defines card dimensions to accomodate - * largest x + width and largest y + height of elements - * in template.csv - * - * TODO: Let user choose other card sizes to generate - * TODO: Add bleed area to card sizes for printing. - */ -void setup(){ - getCardValues(); - cardMain = createGraphics(maxWid,maxHei); - noLoop(); -} - -/** - * Kicks off card creation safter setup. - */ -void draw(){ - createAllCards(); -} - -/** - * Passes each row in the content.csv file to createCard() - */ -void createAllCards() { - println("Creating All Cards"); - for (TableRow conRow : content.rows()) { - createCard(conRow); - } - println("Done. Check the CardCreator directory for updated cards."); -} - -/** - * Builds a single card, placing each element in the order it appears in - * template.csv. Saves the finished image with the filename given under - * "Name" in the content.csv file. - * - * @param conRow a row in the user-created content.csv file - */ -void createCard(TableRow conRow) { - cardMain.clear(); - println("creating ", conRow.getString("saveFile")); - for(int i = 0; i < elements.size(); i++){ - //calls drawImg() if "Img" is in element name - if(elements.get(i).indexOf("Img") != -1){ - drawImg(conRow.getString(elements.get(i)), template.getRow(i)); - } - //calls drawText() if "Text" is in element name - else if(elements.get(i).indexOf("Text") != -1){ - drawText(conRow.getString(elements.get(i)), template.getRow(i)); - } - } - saveCard(conRow.getString("saveFile")); -} - -/** - * Saves a file to a given filename. - * - * @param filename - */ -void saveCard(String filename){ - cardMain.save(filename); -} - -/** - * Draws text given a text string, an x and y position, - * a width, height, and font. Optionally it will also squish - * the text given an hSquish (horizontal squish percentage). - * Also added an (optional) colorHex value. Default is white. - * - * @param t text to print - * @param row template.csv attributes for this text element - */ -void drawText(String t, TableRow row) { - int x = int(row.getString("x")); - int y = int(row.getString("y")); - int w = int(row.getString("w")); - int h = int(row.getString("h")); - - //get the text color or default to white - String hexStr = "FF" + row.getString("colorHex"); - if(hexStr.equals("")){ - hexStr = "FFFFFFFF"; - } - color col = unhex(hexStr); - - //get the horizontal squish value or defualt to 1 - float hSquish = float(row.getString("hSquish")); - if(Float.isNaN(hSquish) || hSquish <= 0) { - hSquish = 1; //set hSquish to 1 if undefined or <= 0 - } - - String text = t; - font = loadFont(row.getString("font")); - fontPlacer = createGraphics(int(w/hSquish),h); - fontPlacer.beginDraw(); - fontPlacer.textFont(font); - fontPlacer.textSize(int(row.getString("size"))); - fontPlacer.textAlign(LEFT,TOP); - fontPlacer.fill(col); - //provide extra horizontal space for text if 0 < hSquish < 1... - fontPlacer.text(text,0,0,int(w/hSquish),h); - fontPlacer.endDraw(); - //... and then compresses to the stated width - cardMain.image(fontPlacer.get(),x,y,w,h); -} - -/** - * Draws an image given a filename, an x and y position, - * a width, and height. - * - * @param filename the image file to draw - * @param row template.csv attributes for this image element - */ -void drawImg(String filename, TableRow row) { - if(filename.length() != 0){ - cardPic = loadImage(filename); - int x = int(row.getString("x")); - int y = int(row.getString("y")); - int w = int(row.getString("w")); - int h = int(row.getString("h")); - cardMain.image(cardPic,x,y,w,h); - } -} - -/** - * Reads template.csv and content.csv, stores their values in - * two tables: template and content. - * - * TODO: Allow multiple template.csv/content.csv files to be - * read. ie generate landscape and portrait-formatted - * cards at the same time - */ -void getCardValues(){ - elements = new ArrayList(); - template = loadTable("template.csv", "header"); - for (TableRow row : template.rows()) { - //add to the list of elements - elements.add(row.getString("element")); - - // - if(int(row.getString("x"))+int(row.getString("w")) > maxWid){ - maxWid = int(row.getString("x"))+int(row.getString("w")); - } - if(int(row.getString("y"))+int(row.getString("h")) > maxHei) { - maxHei = int(row.getString("y"))+int(row.getString("h")); - } - } - content = loadTable("content.csv", "header"); -} +///** +// * CardCreator.pde +// * +// * This script aids in playing card design by using a customizable card +// * template, building each card file with information provided in two +// * spreadsheets. +// * +// * @author Andrew Albers +// * @version 1.0 +// * @since 2014-08-30 +// */ +// +//PGraphics cardMain; +//PGraphics fontPlacer; +//PImage cardPic; +//PFont font; +//Table content; +//Table template; +//int maxWid = 0; +//int maxHei = 0; +//ArrayList elements; +// +///** +// * Reads csv files, defines card dimensions to accomodate +// * largest x + width and largest y + height of elements +// * in template.csv +// * +// * TODO: Let user choose other card sizes to generate +// * TODO: Add bleed area to card sizes for printing. +// */ +//void setup(){ +// getCardValues(); +// cardMain = createGraphics(maxWid,maxHei); +// noLoop(); +//} +// +///** +// * Kicks off card creation safter setup. +// */ +//void draw(){ +// createAllCards(); +//} +// +///** +// * Passes each row in the content.csv file to createCard() +// */ +//void createAllCards() { +// println("Creating All Cards"); +// for (TableRow conRow : content.rows()) { +// createCard(conRow); +// } +// println("Done. Check the CardCreator directory for updated cards."); +//} +// +///** +// * Builds a single card, placing each element in the order it appears in +// * template.csv. Saves the finished image with the filename given under +// * "Name" in the content.csv file. +// * +// * @param conRow a row in the user-created content.csv file +// */ +//void createCard(TableRow conRow) { +// cardMain.clear(); +// println("creating ", conRow.getString("saveFile")); +// for(int i = 0; i < elements.size(); i++){ +// //calls drawImg() if "Img" is in element name +// if(elements.get(i).indexOf("Img") != -1){ +// drawImg(conRow.getString(elements.get(i)), template.getRow(i)); +// } +// //calls drawText() if "Text" is in element name +// else if(elements.get(i).indexOf("Text") != -1){ +// drawText(conRow.getString(elements.get(i)), template.getRow(i)); +// } +// } +// saveCard(conRow.getString("saveFile")); +//} +// +///** +// * Saves a file to a given filename. +// * +// * @param filename +// */ +//void saveCard(String filename){ +// cardMain.save(filename); +//} +// +///** +// * Draws text given a text string, an x and y position, +// * a width, height, and font. Optionally it will also squish +// * the text given an hSquish (horizontal squish percentage). +// * Also added an (optional) colorHex value. Default is white. +// * +// * @param t text to print +// * @param row template.csv attributes for this text element +// */ +//void drawText(String t, TableRow row) { +// int x = int(row.getString("x")); +// int y = int(row.getString("y")); +// int w = int(row.getString("w")); +// int h = int(row.getString("h")); +// +// //get the text color or default to white +// String hexStr = "FF" + row.getString("colorHex"); +// if(hexStr.equals("")){ +// hexStr = "FFFFFFFF"; +// } +// color col = unhex(hexStr); +// +// //get the horizontal squish value or defualt to 1 +// float hSquish = float(row.getString("hSquish")); +// if(Float.isNaN(hSquish) || hSquish <= 0) { +// hSquish = 1; //set hSquish to 1 if undefined or <= 0 +// } +// +// String text = t; +// font = loadFont(row.getString("font")); +// fontPlacer = createGraphics(int(w/hSquish),h); +// fontPlacer.beginDraw(); +// fontPlacer.textFont(font); +// fontPlacer.textSize(int(row.getString("size"))); +// fontPlacer.textAlign(LEFT,TOP); +// fontPlacer.fill(col); +// //provide extra horizontal space for text if 0 < hSquish < 1... +// fontPlacer.text(text,0,0,int(w/hSquish),h); +// fontPlacer.endDraw(); +// //... and then compresses to the stated width +// cardMain.image(fontPlacer.get(),x,y,w,h); +//} +// +///** +// * Draws an image given a filename, an x and y position, +// * a width, and height. +// * +// * @param filename the image file to draw +// * @param row template.csv attributes for this image element +// */ +//void drawImg(String filename, TableRow row) { +// if(filename.length() != 0){ +// cardPic = loadImage(filename); +// int x = int(row.getString("x")); +// int y = int(row.getString("y")); +// int w = int(row.getString("w")); +// int h = int(row.getString("h")); +// cardMain.image(cardPic,x,y,w,h); +// } +//} +// +///** +// * Reads template.csv and content.csv, stores their values in +// * two tables: template and content. +// * +// * TODO: Allow multiple template.csv/content.csv files to be +// * read. ie generate landscape and portrait-formatted +// * cards at the same time +// */ +//void getCardValues(){ +// elements = new ArrayList(); +// template = loadTable("template.csv", "header"); +// for (TableRow row : template.rows()) { +// //add to the list of elements +// elements.add(row.getString("element")); +// +// // +// if(int(row.getString("x"))+int(row.getString("w")) > maxWid){ +// maxWid = int(row.getString("x"))+int(row.getString("w")); +// } +// if(int(row.getString("y"))+int(row.getString("h")) > maxHei) { +// maxHei = int(row.getString("y"))+int(row.getString("h")); +// } +// } +// content = loadTable("content.csv", "header"); +//} diff --git a/child_button.pde b/child_button.pde new file mode 100644 index 0000000..35aafe4 --- /dev/null +++ b/child_button.pde @@ -0,0 +1,29 @@ +public class Button extends ChildPanel +{ + Button ( String nm , int xx , int yy , int ww , int hh ) + { + name = nm; + x = xx; + y = yy; + wid = ww; + hei = hh; + drawPG = createGraphics( wid, hei ); + } + + public void clickThis() + { + println("clicked on ", name); + } + + public void hoverThis() + { + println("hovering on ", name); + } + + public void updateThis() + { + drawPG.strokeWeight(2); + drawPG.fill(150); + drawPG.rect( 0 , 0 , wid , hei ); + } +} diff --git a/child_menuitem.pde b/child_menuitem.pde new file mode 100644 index 0000000..51624de --- /dev/null +++ b/child_menuitem.pde @@ -0,0 +1,39 @@ +public class MenuItem extends ChildPanel +{ + Element element; + + MenuItem ( int xx, int yy, int ww , int hh , Element e) + { + x = xx; y = yy; wid = ww; hei = hh; element = e; + drawPG = createGraphics( wid, hei ); + } + + public void clickThis() + { + selectElement( element ); + } + + public void hoverThis() + { + hoverElement(element); + } + + public void updateThis() + { + y = (element.index * hei) - scrollDist; + drawPG.fill( 210 ); + if (element.selected) + { + drawPG.fill( 255 ); + } + else if(element.hovered) + { + drawPG.fill(215); + } + drawPG.rect( 0 , 0 , wid , hei ); + + drawPG.noStroke(); + drawPG.fill( 0 ); + drawPG.text( element.name, 25, 25 ); + } +} diff --git a/content_handler.pde b/content_handler.pde new file mode 100644 index 0000000..112c502 --- /dev/null +++ b/content_handler.pde @@ -0,0 +1,19 @@ +public class ContentHandler +{ + Table table; + + ContentHandler ( ) + { + getContent(); + } + + void getContent() + { + getContentTable("content.csv"); + } + + void getContentTable( String filename ) + { + table = loadTable(filename, "header"); + } +} diff --git a/data/content.csv b/data/content.csv index 5c5b363..8bfe278 100644 --- a/data/content.csv +++ b/data/content.csv @@ -1 +1 @@ -saveFile,ImgBackground,ImgPicture,TextName,TextMain,ImgIcon,TextItalic card_Tinker.tif,temp_red.png,tinker.png,Tinker,Tinker's card text goes here. Tinker's card text goes here. Tinker's card text goes here.,icon1.png,Some italicized text about the Tinker here card_Tailor.tif,temp_blue.png,tailor.png,Tailor,Tailor's card text goes here. Tailor's card text goes here. Tailor's card text goes here. Tailor's card text goes here.,icon1.png,"""Gobbla bjaljf awle gwe a fsdflwoe fjwoe""" card_Soldier.tif,temp_red.png,soldier.png,Soldier,Soldier's card text goes here. Soldier's card text goes here. Soldier's card text goes here.,icon2.png,Some italicized text about the soldier could go here card_Spy.tif,temp_blue.png,spy.png,Spy,Spy's card text goes here. Spy's card text goes here. Spy's card text goes here.,icon2.png,"Italicized stuff about the Spy. ""Quote quote quote.""" \ No newline at end of file +saveFile,Background,Picture,Name,Main,Icon,Italic card_Tinker.tif,temp_red.png,tinker.png,Tinker,Tinker's card text goes here. Tinker's card text goes here. Tinker's card text goes here.,icon1.png,Some italicized text about the Tinker here card_Tailor.tif,temp_blue.png,tailor.png,Tailor,Tailor's card text goes here. Tailor's card text goes here. Tailor's card text goes here. Tailor's card text goes here.,icon1.png,"""Gobbla bjaljf awle gwe a fsdflwoe fjwoe""" card_Soldier.tif,temp_red.png,soldier.png,Soldier,Soldier's card text goes here. Soldier's card text goes here. Soldier's card text goes here.,icon2.png,Some italicized text about the soldier could go here card_Spy.tif,temp_blue.png,spy.png,Spy,Spy's card text goes here. Spy's card text goes here. Spy's card text goes here.,icon2.png,"Italicized stuff about the Spy. ""Quote quote quote.""" \ No newline at end of file diff --git a/data/template.csv b/data/template.csv index 0a2cb45..9267b77 100644 --- a/data/template.csv +++ b/data/template.csv @@ -1 +1,7 @@ -element,x,y,w,h,font,size,hSquish,colorHex ImgBackground,0,0,675,1050,,,1, ImgPicture,54,163,566,507,,,1, TextName,170,75,400,200,Sansation-Bold-48.vlw,60,0.6, TextMain,60,710,550,215,Sansation-Regular-48.vlw,45,0.6, ImgIcon,50,50,100,100,,,1, TextItalic,100,925,500,100,Sansation-Italic-48.vlw,35,0.6,FFE268 \ No newline at end of file +element,type,x,y,w,h,font,fontsize,hSquish,colorHex +Background,image,0,0,675,1050,,0,1.0,FFFFFF +Picture,image,55,163,560,505,,0,1.0,FFFFFF +Name,text,174,79,434,56,Sansation-Bold-48.vlw,60,0.6, +Main,text,60,707,554,183,Sansation-Regular-48.vlw,45,0.6, +Icon,image,50,50,100,100,,0,1.0,FFFFFF +Italic,text,58,942,550,42,Sansation-Italic-48.vlw,35,0.6,3344FF diff --git a/element.pde b/element.pde new file mode 100644 index 0000000..73dc5a3 --- /dev/null +++ b/element.pde @@ -0,0 +1,67 @@ +public class Element +{ + String name; + int type; + int index; + + int x; + float realX; + int y; + float realY; + int wid; + float realWid; + int hei; + float realHei; + + float hSquish = 1.0; + String fontString = ""; //this is a String for the font file to load. + PFont font; + int fontSize = 0; + String colorString = "FFFFFF"; + color col = unhex("FFFFFFFF"); + + boolean selected = false; + boolean hovered = false; + + Element (String nn, int tt, int idx, int xx, int yy, int ww, int hh) + { + name = nn; + type = tt; + index = idx; + x = xx; + realX = x; + y = yy; + realY = y; + wid = ww; + realWid = wid; + hei = hh; + realHei = hei; + } + + /** + * Sets extra font variables if this is a text type element + */ + void setFont(String fstr, int fsiz, float hsq, String cstr) + { + fontString = fstr; + fontSize = fsiz; + font = loadFont(fstr); + hSquish = hsq; + colorString = cstr; + col = unhex("FF" + cstr); + } + + void move( int dx, int dy ) + { + realX += dx; + realY += dy; + } + + void updatePosition() + { + x = int(realX); + y = int(realY); + wid = int(realWid); + hei = int(realHei); + } +} diff --git a/global_functions.pde b/global_functions.pde new file mode 100644 index 0000000..e711516 --- /dev/null +++ b/global_functions.pde @@ -0,0 +1,91 @@ +void zoom(float zm) +{ + zoom *= zm; + canvas.x += int(25 * ( zm - 1 )); + canvas.y += int(25 * ( zm - 1 )); + canvas.wid = int(canvas.canvasWid * zoom); + canvas.hei = int(canvas.canvasHei * zoom); + constrainOffsets(); +} + +void constrainOffsets() +{ + canvas.x = constrain(canvas.x , int(-0.8 * canvas.wid), width - 50); + canvas.y = constrain(canvas.y , int(-0.8 * canvas.hei), height - 50); +} + +void addElement() +{ + Element e = new Element("New Element", IMG, elements.size(), 2, 2, 200, 250); + elements.add(e); + listbox.addItem(e); + content.table.addColumn(e.name); +} + +void removeElement() +{ + int selectedId = selectedElement; + if (selectedId != NONE) + { + Element e = elements.get(selectedId); + content.table.removeColumn(e.name); + listbox.removeItem(e); + } +} + +void selectElement(Element e) +{ + if( selectedElement != NONE) + { + elements.get(selectedElement).selected = false; + } + e.selected = true; + selectedElement = e.index; +} + +void hoverElement(Element e) +{ + if( e == null ) + { + if( hoveredElement != NONE) + { + elements.get(hoveredElement).hovered = false; + } + hoveredElement = NONE; + } + else + { + if( hoveredElement != NONE) + { + elements.get(hoveredElement).hovered = false; + } + e.hovered = true; + hoveredElement = e.index; + } +} + +public void handleArrowPress( ) +{ + int selectedId = selectedElement; + canvas.handleArrowPress( selectedId ); +} + +public void toggleDrawHighlights() +{ + canvas.toggleHighlight(); +} + +void toggleDrawContent() +{ + canvas.toggleContent(); +} + +void saveTemplate() +{ + template.saveTemplate(); +} + +public void itemClicked ( int i, Object item ) +{ + lastItemClicked = item; +} diff --git a/global_variables.pde b/global_variables.pde new file mode 100644 index 0000000..79ba2c6 --- /dev/null +++ b/global_variables.pde @@ -0,0 +1,19 @@ +int NONE = -1; // for deselected items, +int IMG = 1; // element types +int TXT = 2; + +int BORDER_TOP = 1; +int BORDER_LEFT = 2; +int BORDER_BOTTOM = 3; +int BORDER_RIGHT = 4; + +int border_select_width = 5; +int move_step = 1; + +Object lastItemClicked; +float zoom = 0.6; + +int scrollDist = 0; + +int selectedElement = NONE; +int hoveredElement = NONE; diff --git a/panel.pde b/panel.pde new file mode 100644 index 0000000..84726f2 --- /dev/null +++ b/panel.pde @@ -0,0 +1,39 @@ +public abstract class Panel +{ + int x; + int y; + int wid; + int hei; + PGraphics drawPG; + String name = "No Name"; + + public abstract void clickThis(); + public abstract boolean click( int mx , int my ); + + public abstract void hoverThis(); + public abstract boolean hover( int mx , int my); + + public abstract void updateThis(); + public abstract void updateDraw(); + public abstract void drawToBuffer( PGraphics parentPG); + + public void updateDrawPG() + { + drawPG = createGraphics( wid, hei ); + drawPG.beginDraw(); + updateDraw(); + drawPG.endDraw(); + } + + public boolean isInPanel( int mx , int my ) + { + /** + * Returns true if the given mouse X and mouse Y lie in this panel + */ + boolean isHere = (mx > x && mx < (x + wid) && my > y && my < (y + hei)); + return isHere; + } +} + + + diff --git a/panel_child.pde b/panel_child.pde new file mode 100644 index 0000000..d506a6a --- /dev/null +++ b/panel_child.pde @@ -0,0 +1,43 @@ +public abstract class ChildPanel extends Panel +{ + public boolean click( int mx , int my ) + { + /** + * Returns true if the click occurred in this panel + * calls class-specific click function with mouse X and mouse Y + */ + boolean clickedInHere = isInPanel( mx , my ); + if ( clickedInHere ) + { + clickThis(); + } + return clickedInHere; + } + + public boolean hover( int mx , int my ) + { + /** + * Returns true if the click occurred in this panel + * calls class-specific click function with mouse X and mouse Y + */ + boolean hoveredInHere = isInPanel( mx , my ); + if ( hoveredInHere ) + { + hoverThis(); + } + return hoveredInHere; + } + + public void updateDraw() + { + updateThis(); + } + + public void drawToBuffer( PGraphics parentPG ) + { + /* + * draws thisPG to the parentPG + */ + parentPG.image( drawPG , x , y ); + } +} diff --git a/panel_parent.pde b/panel_parent.pde new file mode 100644 index 0000000..1cd5be9 --- /dev/null +++ b/panel_parent.pde @@ -0,0 +1,73 @@ +public abstract class ParentPanel extends Panel +{ + ArrayList childPanels = new ArrayList(); + + public boolean click( int mx , int my ) + { + /* + * Passes relative click info to all children until it finds one clicked + * by the mouse. + */ + boolean clickedInHere = isInPanel( mx , my ); + + if( clickedInHere ) + { + boolean clickedChild = false; + for( int i = 0; i < childPanels.size() && !clickedChild ; i++ ) + { + clickedChild = childPanels.get(i).click( mx - x, my - y); + } + if( !clickedChild ) + { + clickThis(); + } + } + return clickedInHere; + } + + public boolean hover( int mx , int my) + { + /* + * Passes relative mouse position to all children until it finds the one hovered + */ + boolean hoveredInHere = isInPanel( mx , my ); + + if( hoveredInHere ) + { + boolean hoveredChild = false; + for( int i = 0; i < childPanels.size() && !hoveredChild ; i++ ) + { + hoveredChild = childPanels.get(i).click( mx - x, my - y); + } + if( !hoveredChild ) + { + hoverThis(); + } + } + return hoveredInHere; + } + + public void updateDraw() + { + updateThis(); + for( Panel p : childPanels) + { + p.updateDrawPG(); + } + } + + public void drawToBuffer( PGraphics parentPG ) + { + /* + * Begins drawing drawPG and passes this to children to + * draw on, before passing the final image to its own parent + */ + drawPG.beginDraw(); + for( Panel p : childPanels ) + { + p.drawToBuffer( drawPG ); + } + drawPG.endDraw(); + parentPG.image( drawPG , x , y ); + } +} diff --git a/parent_canvas.pde b/parent_canvas.pde new file mode 100644 index 0000000..deeffdf --- /dev/null +++ b/parent_canvas.pde @@ -0,0 +1,349 @@ +public class TemplateCanvas extends ParentPanel +{ + PGraphics fontPlacer; + PImage cardPic; + PFont drawFont; + + Table contents; + + int canvasWid; + int canvasHei; + + int contentExample = 0; + + boolean doHighlight = true; + boolean doContent = true; + boolean isDragging = false; + + int[] resizing = {NONE,NONE}; //horizontal direction, vertical direction + float widHeiRatio; + float prevX2; + float prevY2; + + int lastMX; + int lastMY; + + TemplateCanvas (String nm, Table conts, int xx, int yy, int canW, int canH) + { + name = nm; x = xx; y = yy; wid = int(canW * zoom); hei = int(canH * zoom); + canvasWid = canW; + canvasHei = canH; + contents = conts; + drawPG = createGraphics(wid,hei); + } + + public void updateThis() + { + wid = int(canvasWid * zoom); + hei = int(canvasHei * zoom); + drawCanvas(); + drawElements(); + } + + public void drawCanvas() + { + drawPG.fill(150); + drawPG.rect(0, 0, wid, hei); + } + + void drawElements() + { + for ( Element e : elements ) + { + e.updatePosition(); + + int cx = int(e.x * zoom); + int cy = int(e.y * zoom); + int cwid = int(e.wid * zoom); + int chei = int(e.hei * zoom); + + drawPG.noStroke(); + if (doContent && contentExample != NONE) + { + drawContent(e , cx , cy , cwid , chei); + } + if (doHighlight) + { + drawHighlight(e , cx , cy , cwid , chei); + } + drawSelectBorder(e , cx , cy , cwid , chei); + } + } + + void drawHighlight( Element e , int cx , int cy , int cwid , int chei ) + { + int alpha = 50; + if ( e.hovered ) + { + drawPG.fill(255,255,255,100); + } + else if ( e.type == IMG ) + { + drawPG.fill(100,255,100,alpha); + } + else if ( e.type == TXT ) + { + drawPG.fill(100,100,255,alpha); + } + drawPG.rect( int(e.x * zoom), int(e.y * zoom), int(e.wid * zoom), int(e.hei * zoom)); + } + + void drawContent( Element e , int cx , int cy , int cwid , int chei ) + { + TableRow conRow = contents.getRow(contentExample); + if ( e.type == IMG ) + { + try { + String imgFile = conRow.getString(e.name); + cardPic = loadImage(imgFile); + drawPG.image(cardPic, cx, cy, cwid, chei); + } catch ( Exception ex ) { + } + } + else if ( e.type == TEXT ) + { + float hSquish = e.hSquish; + fontPlacer = createGraphics(int(cwid/hSquish),chei); + fontPlacer.beginDraw(); + fontPlacer.textFont(e.font); + fontPlacer.textSize(constrain(e.fontSize * zoom,0,chei)); + fontPlacer.textAlign(LEFT,TOP); + fontPlacer.fill(e.col); + try { + String textToPlace = conRow.getString(e.name); + fontPlacer.text( textToPlace , 0 , 0 , int(cwid/hSquish) , chei); + } catch ( Exception ex ) { + } + fontPlacer.endDraw(); + drawPG.image( fontPlacer.get() , cx , cy , cwid, chei); + } + } + + void drawSelectBorder( Element e , int cx , int cy , int cwid , int chei ) + { + if ( e.selected ) + { + drawPG.stroke(200); + drawPG.strokeWeight(2); + drawPG.fill(255,255,255,50); + if( isDragging ) + { + drawPG.stroke(200,200,200,255); + drawPG.strokeWeight(1); + drawPG.fill(255,255,255,100); + } + drawPG.rect( cx, cy, cwid, chei); + } + } + + boolean handleDragged(int mx, int my , int selectedId) + { + if (selectedId != NONE) + { + if (resizing[0] != NONE || resizing[1] != NONE) + { + resizeElement(elements.get(selectedId) , mx, my ); + } + else if ( isDragging ) + { + dragElement(elements.get(selectedId), mx, my); + } + else + { + setResizing(elements.get(selectedId), mx, my); + if(resizing[0] != NONE || resizing[1] != NONE) + { + beginResizing(elements.get(selectedId), mx, my); + } + else + { + beginDragging(mx, my); + isDragging = true; + } + } + } + else if( isDragging ) + { + dragCanvas(mx,my); + } + else + { + beginDragging(mx, my); + } + return isDragging; + } + + void beginResizing(Element e, int mx, int my) + { + widHeiRatio = e.realWid/e.realHei; //keep in mind in case user hits SHIFT + prevX2 = e.realX + e.realWid; + prevY2 = e.realY + e.realHei; + beginDragging(mx,my); + } + + void beginDragging(int mx, int my) + { + isDragging = true; + resetLastMouse(mx,my); + } + + void resizeElement(Element e , int mx, int my ) + { + if(resizing[1] == BORDER_TOP) + { + e.realY += (my - lastMY); + e.realHei -= (my - lastMY); + if(keyPressed && keyCode == SHIFT) + { + e.realWid = e.realHei * widHeiRatio; + e.realY = prevY2 - e.realHei; + } + } + else if(resizing[1] == BORDER_BOTTOM) + { + e.realHei += (my - lastMY); + if(keyPressed && keyCode == SHIFT) + { + e.realWid = e.realHei * widHeiRatio; + } + } + + if(resizing[0] == BORDER_RIGHT) + { + e.realWid += (mx - lastMX); + if(keyPressed && keyCode == SHIFT) + { + e.realHei = e.realWid / widHeiRatio; + } + } + else if(resizing[0] == BORDER_LEFT) + { + e.realX += (mx - lastMX); + e.realWid -= (mx - lastMX); + if(keyPressed && keyCode == SHIFT) + { + e.realHei = e.realWid / widHeiRatio; + e.realX = prevX2 - e.realWid; + } + } + resetLastMouse(mx,my); + e.realWid = constrain(e.realWid, 3, 3000); + e.realHei = constrain(e.realHei, 3, 3000); + println("e.realWid = ", e.realWid, " e.realHei = ", e.realHei); + } + + void dragCanvas(int mx, int my) + { + x += (mx - lastMX); + y += (my - lastMY); + resetLastMouse(mx,my); + constrainOffsets(); + } + + void dragElement(Element e, int mx, int my) + { + e.realX += (mx - lastMX); + e.realY += (my - lastMY); + resetLastMouse(mx,my); + } + + void resetLastMouse(int mx, int my) + { + lastMX = mx; + lastMY = my; + } + + void hoverThis() + { + println("Hovering on ", name); + } + + void clickThis() + { + if( isDragging ) + { + isDragging = false; + resizing[0] = NONE; + resizing[1] = NONE; + } + else + { +// println("Clicked ", name); + } + } + + void handleArrowPress(int selectId) + { + if(selectId != NONE) + { + Element e = elements.get(selectId); + if(keyCode == UP) + { + e.move(0, -1 * ceil( move_step ) ); + println("moving up"); + } + else if(keyCode == DOWN) + { + e.move(0, ceil(move_step )); + } + else if(keyCode == LEFT) + { + e.move( -1 * ceil(move_step ) , 0); + } + else + { + e.move( ceil(move_step ) , 0); + } + } + else if(doContent) + { + if(keyCode == LEFT) + { + contentExample = (contentExample + contents.getRowCount() -1) % contents.getRowCount(); + } + else if(keyCode == RIGHT) + { + contentExample = (contentExample + 1) % contents.getRowCount(); + } + } + } + + void setResizing( Element e, int mx, int my) + { + resizing[0] = NONE; + resizing[1] = NONE; + + int dispX = int(e.x * zoom); + int dispY = int(e.y * zoom); + int dispW = int(e.wid * zoom); + int dispH = int(e.hei * zoom); + + if( abs(mx - dispX) < border_select_width) + { + resizing[0] = BORDER_LEFT; + } + else if( abs(mx - (dispX + dispW)) < border_select_width ) + { + resizing[0] = BORDER_RIGHT; + } + + if( abs(my - dispY) < border_select_width) + { + resizing[1] = BORDER_TOP; + } + else if( abs(my - (dispY + dispH)) < border_select_width ) + { + resizing[1] = BORDER_BOTTOM; + } + } + + void toggleHighlight() + { + doHighlight = !doHighlight; + } + + void toggleContent() + { + doContent = !doContent; + } +} diff --git a/parent_interface.pde b/parent_interface.pde new file mode 100644 index 0000000..d6aab5d --- /dev/null +++ b/parent_interface.pde @@ -0,0 +1,33 @@ +public class Interface extends ParentPanel +{ + + Interface(String nm , ArrayList panels) + { + name = nm; x = 0; y = 0; wid = width; hei = height; + drawPG = createGraphics(wid, hei); + childPanels = panels; + } + + public void refresh() + { + updateDrawPG(); + drawToBuffer( bufferPG ); + } + + void updateThis() + { + wid = width; + hei = height; + drawPG.background(100); + } + + void clickThis() + { + println("Clicked ", name); + } + + void hoverThis() + { + println("Hovering on ", name); + } +} diff --git a/parent_scrollmenu.pde b/parent_scrollmenu.pde new file mode 100644 index 0000000..16a32e9 --- /dev/null +++ b/parent_scrollmenu.pde @@ -0,0 +1,183 @@ +public class Listbox extends ParentPanel +{ + int listHeight; + + int itemHeight; + int itemWidth; + + int scrolltabWidth = 15; + int scrolltabHeight; + int scrolltabX; + int scrolltabY; + + int maxScrollDist = 0; + int listStartAt = 0; + + Listbox ( String nm , int xx, int yy, int ww, int hh, int ih ) + { + name = nm; x = xx; y = yy; wid = ww; hei = hh; + wid = ww; + hei = hh; + drawPG = createGraphics(wid, hei); + + itemHeight = ih; itemWidth = wid - scrolltabWidth; + + refreshItems(); + + calculateListHeight(); + updateScrollTab(); + + // register it + Interactive.add( this ); + } + + public void refreshItems( ) + { + childPanels = new ArrayList(); + for( Element e : elements ) + { + addItem( e ); + } + } + + public void addItem ( Element e ) + { + MenuItem item = new MenuItem( 0 , 0 , itemWidth , itemHeight , e); + childPanels.add( item ); + } + + public void removeItem ( Element item ) + { + elements.remove(item); + selectedElement = NONE; + hoveredElement = NONE; + } + + // called from manager + void mouseScrolled ( float step ) + { + scrollDist += (step*5); + scrollDist = constrain( scrollDist, 0, maxScrollDist <= 0 ? 0 : maxScrollDist ); + } + + void updateThis () + { + updatePosition(); + drawPG.background(200); + drawPG.noStroke(); + drawPG.fill( 100 ); + drawPG.rect( 0 , 0 - scrollDist, wid , listHeight ); + + //draw scrollbar + drawPG.stroke(80); + drawPG.fill(100); + drawPG.rect(itemWidth, 0, wid, hei); + drawPG.fill(200); + drawPG.rect(scrolltabX, scrolltabY, scrolltabWidth, scrolltabHeight); + } + + /** + * update x position and list height in case window is resized + */ + void updatePosition(){ + x = width - wid; + hei = height - y - 100; + updateMaxScrollDist(); + updateScrollTab(); + } + + void updateMaxScrollDist() + { + calculateListHeight(); + maxScrollDist = listHeight - hei; + } + + void calculateListHeight(){ + listHeight = itemHeight * elements.size(); + } + + void updateScrollTab() + { + scrolltabHeight = int(float(hei * hei) / float(listHeight)); + scrolltabHeight = constrain(scrolltabHeight, 0, hei); + scrolltabX = itemWidth; + scrolltabY = int(float(hei * scrollDist) / float(listHeight)); //tabY is relative to drawPG + } + +// boolean handleMoved ( int mx, int my) +// { +// if(isInPanel(mx,my)) +// { +// if(inItem(mx,my)) +// { +// hoverItem(my); +// } +// return true; +// } +// else +// { +// unHover(); +// return false; +// } +// } + + void hoverThis() + { + hoverElement( null ); + println("Hovering on ", name); + } + +// void hoverItem( int my ) +// { +//// int listClick = my + scrollDist - y; +//// int index = ceil(listClick / itemHeight); +//// if ( index >= elements.size()) +//// { +//// if( hoverItem != NONE ) +//// { +//// elements.get(hoverItem).hovered = false; +//// hoverItem = NONE; +//// } +//// } +//// else +//// { +//// if(hoverItem != NONE) +//// { +//// elements.get(hoverItem).hovered = false; +//// } +//// hoverItem = index; +//// elements.get(hoverItem).hovered = true; +//// } +// } +// +// void unHover() +// { +//// if( hoverItem != NONE) +//// { +//// elements.get(hoverItem).hovered = false; +//// hoverItem = NONE; +//// } +// } + + void clickScrollBar( int my ) + { + println("clicked the scrollbar"); + } + + void clickThis() + { + } + + boolean inItem( int mx, int my) + { + boolean isInItem = (mx < x + itemWidth); + return isInItem; + } + + boolean inScrollbar( int mx, int my) + { + boolean isInArea = (mx >= x + itemWidth); + return isInArea; + } +} + diff --git a/parent_toolbar.pde b/parent_toolbar.pde new file mode 100644 index 0000000..2a184b3 --- /dev/null +++ b/parent_toolbar.pde @@ -0,0 +1,43 @@ +public class Toolbar extends ParentPanel +{ + Toolbar(String nm, int xx, int yy, int ww, int hh ) + { + name = nm; x = xx; y = yy; wid = ww; hei = hh; + drawPG = createGraphics(wid, hei); + addButtons(); + } + + void addButtons() + { + Button a = new Button( "Button A", 5, 5, 30, 25); + addButton( a ); + Button b = new Button( "Button B", 40, 5, 30, 25); + addButton( b ); + Button c = new Button( "Button C", 75, 5, 30, 25); + addButton( c ); + Button d = new Button( "Button D", 110, 5, 30, 25); + addButton( d ); + } + + void addButton( Button b ) + { + childPanels.add( b ); + } + + void updateThis() + { + x = width - wid; + drawPG.fill(200); + drawPG.rect(0, 0, wid, hei); + } + + void clickThis() + { + println("Clicked ", name); + } + + void hoverThis() + { + println("Hovering on ", name); + } +} diff --git a/template_handler.pde b/template_handler.pde new file mode 100644 index 0000000..a76a936 --- /dev/null +++ b/template_handler.pde @@ -0,0 +1,235 @@ +public class TemplateHandler +{ + Table tempTable; + ArrayList elements; + + TemplateHandler ( ) + { + elements = new ArrayList(); + getTemplate(); + } + + /** + * Looks in the data directory for a template file. + * Passes this to get Template elements to load. + * + * TODO: have this search intelligently for previously + * created template files, not just template.csv + */ + void getTemplate() + { + getTemplateElements("template.csv"); + } + + void saveTemplate() + { + Table newTable = createTemplate(); + for ( Element e : elements ) + { + TableRow newRow = newTable.addRow(); + newRow.setString("element", e.name); + if(e.type == TXT) + { + newRow.setString("type", "text"); + } + else if(e.type == IMG) + { + newRow.setString("type", "image"); + } + newRow.setInt("x", e.x); + newRow.setInt("y", e.y); + newRow.setInt("w", e.wid); + newRow.setInt("h", e.hei); + newRow.setString("font", e.fontString); + newRow.setInt("fontsize", e.fontSize); + newRow.setFloat("hSquish", e.hSquish); + newRow.setString("colorHex", e.colorString); + } + saveTable(newTable, "data/template.csv"); + } + + Table createTemplate() + { + Table nTable = new Table(); + nTable.addColumn("element"); + nTable.addColumn("type"); + nTable.addColumn("x"); + nTable.addColumn("y"); + nTable.addColumn("w"); + nTable.addColumn("h"); + nTable.addColumn("font"); + nTable.addColumn("fontsize"); + nTable.addColumn("hSquish"); + nTable.addColumn("colorHex"); + return nTable; + } + + /** + * Reads a template file and stores the element names + * in an ArrayList called 'elements'. All info goes in + * Table 'tempTable' + * + * @param filename name of template file to open + */ + void getTemplateElements(String filename) + { + tempTable = loadTable(filename, "header"); + + int idx = 0; + for (TableRow row : tempTable.rows()) + { + String name = getElemName(row.getString("element")); + int type = getType(row.getString("type")); + int x = getX(row.getString("x")); + int y = getY(row.getString("y")); + int w = getHei(row.getString("w")); + int h = getWid(row.getString("h")); + + Element e = new Element(name, type, idx, x, y, w, h); + idx += 1; + + if (type == TXT) + { + String font = getFont(row.getString("font")); + int fontSize = getFontSize(row.getString("fontsize")); + float hSquish = getHSquish(row.getString("hSquish")); + String col = getColor(row.getString("colorHex")); + e.setFont(font, fontSize, hSquish, col); + } + + elements.add(e); + } + } + + /** + * Input functions + * These sanitize messed-up data in template.csv + * and return correct (or default) values + * + * @param element attribute string + */ + String getElemName(String ss) + { + String name = ss; + if ( name.equals("") ) //if given a blank name + { + name = "New Element"; //set name as 'New Element' + } + return name; + } + + int getType(String t) + { + int type = IMG; + if( t.equals("text")) + { + type = TXT; + } + else if( t.equals("image")) + { + type = IMG; + } + return type; + } + + int getX(String xx) + { + int x = 0; + try { + x = int(xx); + } catch (Exception e) { + println("Expected an integer value for x. Got ", xx); + } + return x; + } + + int getY(String yy) + { + int y = 0; + try { + y = int(yy); + } catch (Exception e) { + println("Expected an integer value for y. Got ", yy); + } + return y; + } + + int getWid(String ww) + { + int wid = 50; + try { + wid = int(ww); + } catch (Exception e) { + println("Expected an integer value for w. Got ", ww); + } + if(wid <= 0) //set to minimum value + { + wid = 5; + } + return wid; + } + + int getHei(String hh) + { + int hei = 50; + try { + hei = int(hh); + } catch (Exception e) { + println("Expected an integer value for h. Got ", hh); + } + if(hei <= 0) + { + hei = 5; //set to minimum value + } + return hei; + } + + String getFont(String f) + { + String font = f; + try { + PFont test = loadFont(font); + } catch (Exception e) { + println("Unable to find the font", f, "in the data folder. Add it in Processing by going to Tools > CreateFont"); + } + return font; + } + + int getFontSize(String fsiz) + { + int fontSize = 15; + try { + fontSize = int(fsiz); + } catch (Exception e) { + println("Expected an integer value for fontsize. Got ", fsiz); + } + return fontSize; + } + + float getHSquish(String hs) + { + float hSquish = 1; + try { + hSquish = float(hs); + } catch (Exception e) { + println("Expected a decimal or blank value for hSquish. Got ", hs); + } + if( Float.isNaN(hSquish) || hSquish <= 0 ) //if hSquish is not a number or <= 0 + { + hSquish = 1; //set to default value + } + return hSquish; + } + + String getColor(String chex) + { + String col = "FFFFFF"; + try { + col = chex; + color test = unhex("FF" + col); //assumes an alpha value of 100% + } catch (Exception e) { + println("Expected a hex value like BBFF3D for colorHex. Got ", chex); + } + return col; + } +} diff --git a/user_interface.pde b/user_interface.pde new file mode 100644 index 0000000..ffb5e38 --- /dev/null +++ b/user_interface.pde @@ -0,0 +1,111 @@ +import de.bezier.guido.*; + +PGraphics bufferPG; +Listbox listbox; +ContentHandler content; +TemplateHandler template; +TemplateCanvas canvas; +Toolbar tools; +Interface mainInterface; + +ArrayList elements; + +void setup () +{ + size(1000, 700); + bufferPG = createGraphics(width, height); + frameRate(30); + frame.setResizable(true); + + // make the manager + Interactive.make( this ); + + // create a list box + template = new TemplateHandler(); + + elements = template.elements; + + listbox = new Listbox("element menu", width - 150 , 35 , 150 , 400 , 50 ); + content = new ContentHandler( ); + canvas = new TemplateCanvas("canvas", content.table, 200, 30, 675, 1050); + tools = new Toolbar("toolbar", width - 150 , 0 , 150 , 35 ); + + ArrayList parentPanels = new ArrayList(); + parentPanels.add(canvas); + parentPanels.add(listbox); + parentPanels.add(tools); + + mainInterface = new Interface("main interface", parentPanels); +} + +void draw () +{ + bufferPG = createGraphics(width, height); + bufferPG.clear(); + bufferPG.beginDraw(); + mainInterface.refresh(); + + bufferPG.endDraw(); + image(bufferPG,0,0); +} + +void mouseMoved() +{ + mainInterface.hover( mouseX , mouseY ); +} + +void mouseDragged() +{ + if (canvas.handleDragged(mouseX,mouseY,selectedElement)){ + + } +} + +void mouseReleased() +{ + mainInterface.click(mouseX,mouseY); +} + +void keyPressed () +{ + if( key == 'a' ) + { + addElement(); + } + else if( keyCode == 8 ) + { + println("delete clicked"); + removeElement(); + } + else if ( key == 's' ) + { + saveTemplate(); + } + else if ( key == 'h' ) + { + toggleDrawHighlights(); + } + else if ( key == 'c' ) + { + toggleDrawContent(); + } + else if ( key == CODED ) + { + if ( keyCode == UP || keyCode == DOWN || keyCode == LEFT || keyCode == RIGHT) + { + handleArrowPress(); + } + } +} + +void keyReleased () +{ + if(key == '=') + { + zoom(1.25); + } + else if(key == '-') + { + zoom(0.8); + } +}