Refactoring for automated creation of Gui elements

README.md

@@ -3,3 +3,20 @@
 [![Build Status](https://travis-ci.org/local-projects/ofxInterface.svg?branch=master)](https://travis-ci.org/local-projects/ofxInterface) [![Build status](https://ci.appveyor.com/api/projects/status/u1m369pj4mmr8xvu?svg=true)](https://ci.appveyor.com/project/armadillu/ofxinterface)
 
 flexible and lightweight GUI helper with a scene-graph and a multitouch manager for OpenFrameworks
+
+Compatible with openFrameworks 0.11.0+
+
+Generate all project files using the openFrameworks Project Generator.
+
+## Features
+
+* tool to create a touch focused interface
+* includes standard components like button and keyboard (see [definitions](https://github.com/brinoausrino/ofxInterface/blob/master/components.md))
+* create a GUI from json
+
+## Required Addons
+
+* [ofxAnimatable](https://github.com/armadillu/ofxAnimatable)
+* [ofxAssetManager](https://github.com/brinoausrino/ofxAssetManager)
+* [ofxEasing](https://github.com/arturoc/ofxEasing)
+* [ofxFontStash2](https://github.com/armadillu/ofxFontStash2)

addon_config.mk

@@ -0,0 +1,72 @@
+# All variables and this file are optional, if they are not present the PG and the
+# makefiles will try to parse the correct values from the file system.
+#
+# Variables that specify exclusions can use % as a wildcard to specify that anything in
+# that position will match. A partial path can also be specified to, for example, exclude
+# a whole folder from the parsed paths from the file system
+#
+# Variables can be specified using = or +=
+# = will clear the contents of that variable both specified from the file or the ones parsed
+# from the file system
+# += will add the values to the previous ones in the file or the ones parsed from the file 
+# system
+# 
+# The PG can be used to detect errors in this file, just create a new project with this addon 
+# and the PG will write to the console the kind of error and in which line it is
+
+meta:
+	ADDON_NAME = ofxInterface
+	ADDON_DESCRIPTION = flexible and lightweight GUI helper with a scene-graph and a multitouch manager
+	ADDON_AUTHOR = galsasson, armadillu, brinoausrino
+	ADDON_TAGS = "sceneManager" "gui" "multitouch"
+	ADDON_URL = https://github.com/brinoausrino/ofxInterface
+
+common:
+	# dependencies with other addons, a list of them separated by spaces 
+	# or use += in several lines
+	ADDON_DEPENDENCIES = ofxAnimatable
+	ADDON_DEPENDENCIES += ofxAssetManager
+	ADDON_DEPENDENCIES += ofxEasing
+	ADDON_DEPENDENCIES += ofxFontStash2
+
+	# include search paths, this will be usually parsed from the file system
+	# but if the addon or addon libraries need special search paths they can be
+	# specified here separated by spaces or one per line using +=
+	#  ADDON_INCLUDES += 
+
+	# any special flag that should be passed to the compiler when using this
+	# addon 
+	#  ADDON_CFLAGS
+
+	# any special flag that should be passed to the linker when using this
+	# addon, also used for system libraries with -lname
+	# ADDON_LDFLAGS =
+
+	# linux only, any library that should be included in the project using
+	# pkg-config
+	# ADDON_PKG_CONFIG_LIBRARIES =
+
+	# osx/iOS only, any framework that should be included in the project
+	# ADDON_FRAMEWORKS =
+
+	# source files, these will be usually parsed from the file system looking
+	# in the src folders in libs and the root of the addon. if your addon needs
+	# to include files in different places or a different set of files per platform
+	# they can be specified here
+	# ADDON_SOURCES =
+
+	# some addons need resources to be copied to the bin/data folder of the project
+	# specify here any files that need to be copied, you can use wildcards like * and ?
+	# ADDON_DATA = 
+
+	# when parsing the file system looking for libraries exclude this for all or
+	# a specific platform
+	# ADDON_LIBS_EXCLUDE =
+
+
+linux64:
+linux:
+linuxarmv6l:
+linuxarmv7l:
+android/armeabi:
+android/armeabi-v7a:

components.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2020-09-08T11:09:36.963Z" agent="5.0 (Windows)" etag="nS96L1PQQ1butBaztEAk" version="13.6.9"><diagram id="be4Yalyn5d9W6AmkbnY-" name="Page-1">7ZpNU9swEIZ/TY7t+CtfxxJCSwsMM2mHclTiJTYoXo8ik5hfXxlLsRWFGBoc+5AT1nplye/uI8lLOu5osf7OSBxcow+041j+uuOedxzHsXqO+JNZ0txi246bW+Ys9KWtMEzCF5BGS1qT0Iel5sgRKQ9j3TjDKIIZ12yEMVzpbg9I9VFjMgfDMJkRalrvQp8HuXXg9Av7DwjngRrZ7g3zOwuinOWbLAPi46pkcscdd8QQeX61WI+AZuopXfJ+F2/c3UyMQcTf0+H+5/z6xud/LvE8PCOPtv3ij7/IYDwTmsgXlpPlqVIAfCGIbCLjAc4xInRcWM8YJpEP2TCWaBU+V4ixMNrC+AicpzK6JOEoTAFfUHkXIv9bFivRjDCC3HIRUiofueSEceUxpTh7UsaSUz7xbLZvCiRNS0zYDPaoohKNsDnwPX7OJowCAMAFcJaKfgwo4eGzPg8iE3G+8StiJS5kuD4QOtsIHT7cCACNAOrhWQUhh0lMXgVYCWr1UMiHAuOw3q+j+d6yg6e6KOYtScCqAMhWVAQleHpWTVI5hlQ7haqQRtfxEKGkMJuloSTMsHdMYbqtwF/DWy4A23SXlgi1AOhrxCfi7x0J/9eu4q1IWnKIMYz4svTk28xQ0KVyQeXQcGvV/5C7uMjHL1Jo8yL/n1WekVUjpMhuSZSdDppanaQC7g7ojrsa9U7Q7VCl/xkwGenvWPpe5Ay2oppDLnsVgf0olcY4FVhW+NfDZd9IvN+w5gmDVhwbbE+XpHlQBydQd6gyrAVU1zsOqMY4FaBW+NcD6tBIvCsybXLvVKvWoG2IqjLBiVFdljfieCCk3uA4kBrjVEBa4V8PpLb5AX6NfkJhTGEBUoA2fYe3gFa3CTiFXCz9m/X/2lXN+/K98/UG0ayVdnZUndoAtVzaKr9LD6b/sCCb1ZbsmHkZxUnzTLhd/XvYcxtnotsIE+uQl5AQrXuV0eK6ACJrtJYHr6ZNTk8R952b3KftK2b5ZBIuYgqjAGZPwBpnyBu2jqFTSWWnLPXUVHqOHv+6ToHGOFWlzv3+NZ0CzaLKZMaQUjIVxGLESRi1gNnuVh24BWfBU3Vlpyz1lFf62/8HqIlZY5wKZiv8a2LWrK9M8IH/gnSKhPmNw9q32garGuwEqy5LPWWWoXUcWI1xKmCt8K8HVscss0xo6LdgTx14x8NUNItfCuXSFj+4csf/AA==</diagram></mxfile>

components.md

@@ -0,0 +1,143 @@
+# ofxInterface - components
+
+![the components](components.png "Interface base components")
+
+## Properties
+
+### Node
+
+The base element.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| id            | string        | unique identifier (should always be set) |
+| position      | ofVec2f       | position in px|
+| size          | ofVec2f       | size in px |
+| plane         | float         | the bigger the more in front (default 10) |
+| renderClip    | bool          | clip element parts out of element size |
+| active        | bool          | set element visible and enabled |
+
+### ModalElement
+
+Element that describes buttons, checkers and radios.
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| type          | string        | ether "button","checker" or "radio" |
+| colorActive   | ofColor       | color for activated state|
+| colorInactive | ofColor       | color for inactive state|
+| colorSelected | ofColor       | color for selected state|
+
+### TextInput
+
+An editable Text.
+
+Inherits from ModalElement.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| font          | string        | id of the font |
+| maxChars      | int           | maximum length of input|
+| description   | string        | text when line empty|
+
+### SimpleChecker
+
+A simple checkbox ;) -
+
+Inherits from ModalElement.
+
+### ColorPanel
+
+A colored panel
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| strokeWidth   | float         | stroke width  |
+| borderRadius  | float         | border radius |
+| color         | ofColor       | panel color |
+| strokeColor   | ofColor       | border color |
+
+### TextureNode
+
+A Node that displays a texture
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| texture   | string         | texture id  |
+| tint  | string         | texture tinting (color id is set)|
+| blendmode         | string       | "alpha","none","add","multiply","screen" and "subract" allowed |
+| strokeColor   | ofColor       | border color |
+
+### Label
+
+A short text
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| font          | string        | id of the font |
+| text      | string           | text to be drawn|
+| alignment   | string        | "left","center" or "right"|
+| shadow   | object        | activate dropshadow|
+
+#### shadow parameters
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| size          | float         | shadow size (bigger is blurrier)|
+| x             | float         | x-offset|
+| y             | float         | y-offset|
+| color         | ofColor       | shadow color |
+
+### ScrollableContainer
+
+A container to contain elements bigger than screen size.
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| sizeScrollableArea          | ofVec2f        | the scrollable area size |
+| bgColor      | ofColor           | background color|
+| scrollActiveColor   | ofColor        | scrollbar color when selected|
+| scrollInactiveColor   | ofColor        | scrollbar color when not selected|
+
+### SoftKeyboard
+
+An on-screen keyboard.
+
+Inherits from Node. Height of Element depends on width and is automatically set.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| font          | string        | id of the font |
+| bgColor       | ofColor       | background color|
+| colorActive   | ofColor       | key background color when enabled|
+| colorInactive | ofColor       | key background color when disabled|
+| colorSelected | ofColor       | key background color when selected|
+| borderRadius  | float         | border radius (also effects keys)|
+| borderWidth   | float         | border width (also effects keys)|
+| margin        | float         | space between border and keys|
+| padding       | float         | space between keys|
+
+
+### TextureNode
+
+A simple Slider.
+
+Inherits from Node.
+
+| property      | type          | description  |
+| ------------- |---------------| -----|
+| direction     | string         | "horizontal", "vertical" |
+| colorActive   | ofColor       | key background color when enabled|
+| colorInactive | ofColor       | key background color when disabled|
+| colorSelected | ofColor       | key background color when selected|
+| colorSelected | ofColor       | key background color when selected|
+| lineWidth     | int           | thickness of the bar|

example-advanced/addons.make

@@ -1,2 +1,5 @@
+ofxAnimatable
+ofxAssetManager
+ofxEasing
+ofxFontStash2
 ofxInterface
-ofxAnimatable

example-basic/addons.make

@@ -1 +1,5 @@
-ofxInterface
+ofxAnimatable
+ofxAssetManager
+ofxEasing
+ofxFontStash2
+ofxInterface

exampleJson/addons.make

@@ -0,0 +1,5 @@
+ofxAnimatable
+ofxAssetManager
+ofxEasing
+ofxFontStash2
+ofxInterface

exampleJson/bin/data/assets.json

@@ -0,0 +1,18 @@
+{
+    "textures":{
+        "folder":"textures",
+        "info":"files [[id,path]]",
+        "files":[
+            ["cat1","cat1.jpg"]
+        ]
+    },
+    "fonts":{
+        "folder":"fonts",
+        "info":"files [[id,path]]",
+        "files":[
+            ["Verdana","verdana.ttf"],
+            ["Franklin Gothic","frabk.ttf"]
+        ]
+    }
+
+}

exampleJson/bin/data/gui.json

@@ -0,0 +1,83 @@
+{
+    "elements":[
+        {
+            "id":"background",
+            "class":"colorPanel",
+            "color":"bg",
+            "size":[1280,768]
+        },{
+            "id":"Head",
+            "class":"label",
+            "font":"Headline",
+            "position":[80,44],
+            "size":[1280,40],
+            "text":"GUI from json"
+        },{
+            "id":"text",
+            "class":"textField",
+            "size":[820,40],
+            "position":[80,100],
+            "text":[
+                "<style id='Text'>A Text<br/>",
+                "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</style>"
+            ]
+        },{
+            "id":"button",
+            "class":"modalElement",
+            "position":[80,160],
+            "size":[32,32],
+            "colorActive":"black",
+            "colorSelected":"white",
+            "colorInactive":"black",
+            "info": "sub elements can be defined",
+            "elements":[
+                {
+                    "id":"description",
+                    "class":"labelSmall",
+                    "position":[40,10],
+                    "text": "a button"
+                }
+            ]
+        },{
+            "id":"checker",
+            "class":"simpleChecker",
+            "position":[250,160],
+            "size":[32,32],
+            "colorActive":"black",
+            "colorSelected":"white",
+            "colorInactive":"black",
+            "elements":[
+                {
+                    "id":"description",
+                    "class":"labelSmall",
+                    "position":[40,10],
+                    "text": "a simpleChecker"
+                }
+            ]
+        },
+        {
+            "id":"pic1",
+            "class":"texture",
+            "position":[950,44],
+            "texture":"cat1",
+            "size":[150,150] 
+        }
+        ,{
+            "id":"input",
+            "class":"textInput",
+            "position":[80,300],
+            "size":[300,50],
+            "font":"Input",
+            "maxChars":20,
+            "description":"write something" 
+        },{
+            "id":"keyboard",
+            "class":"softKeyboard",
+            "position":[80,380],
+            "size":[1000,500],
+            "font":"Keyboard"
+
+        }
+
+    ]
+}