{"id":20682185,"url":"https://github.com/bluecadet/cinder-bluecadetviews","last_synced_at":"2025-06-27T11:32:57.711Z","repository":{"id":46651273,"uuid":"62168040","full_name":"bluecadet/Cinder-BluecadetViews","owner":"bluecadet","description":"Scene graph Cinder block with touch management and various tools for UI dev","archived":false,"fork":false,"pushed_at":"2022-12-06T00:02:59.000Z","size":31537,"stargazers_count":11,"open_issues_count":31,"forks_count":3,"subscribers_count":9,"default_branch":"develop","last_synced_at":"2025-03-29T15:04:35.546Z","etag":null,"topics":["cinder","scene-graph","touch"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluecadet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-28T19:22:42.000Z","updated_at":"2021-12-07T18:55:05.000Z","dependencies_parsed_at":"2023-01-23T05:31:03.769Z","dependency_job_id":null,"html_url":"https://github.com/bluecadet/Cinder-BluecadetViews","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluecadet%2FCinder-BluecadetViews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluecadet%2FCinder-BluecadetViews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluecadet%2FCinder-BluecadetViews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluecadet%2FCinder-BluecadetViews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluecadet","download_url":"https://codeload.github.com/bluecadet/Cinder-BluecadetViews/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250237851,"owners_count":21397403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cinder","scene-graph","touch"],"created_at":"2024-11-16T22:12:57.614Z","updated_at":"2025-04-22T12:20:50.325Z","avatar_url":"https://github.com/bluecadet.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cinder-BluecadetViews\n\nThis block presents a set of classes to build an interactive scene graph and a set of base implementations to more easily create app UIs in Cinder.\n\nThe scene graph is composed of individual views, which can have children and each have basic animatable properties like `position`, `scale`, `rotation` and `alpha`. Children inherit their parents' transformations.\n\nIn addition to nested transformations and drawing, this block connects to the text and touch blocks to provide `TextView` and `TouchView`.\n\nTo combine all pieces conveniently, this block comes with a `BaseApp` class that provides a basic implementation with a root view, touch manager and various utilities.\n\nBuilt for and tested with [Cinder v0.9.2 dev](https://github.com/cinder/Cinder/). See [notes below](#notes) for setup instructions.\n\n![](docs/media/class-hierarchy.png)\n\n## Key Features\n\n### Scene Graph\n\n* Add/remove children to/from `BaseView`s and all its subclasses\n* Conversion from/to local/global coordinate spaces\n* Simple event system to bubble messages up the graph\n* Index management (e.g. move child to front/back)\n* Inherited transformations, alpha and tint\n\n### Touch Management\n\n* Support for TUIO, native touch and mouse events\n* Touch simulator for stress-testing tapping and dragging\n* Multi-touch simulator for mouse input (e.g. to scale/rotate)\n* Extendable plugin architecture (e.g. for TangibleEngine pucks or third-party gesture libraries like GestureWorks)\n* Shape-based hit detection with ability to override on a per-class basis\n\n### Core App Classes\n\n* Define screen layout for multi-screen matrices\n* Pan and zoom around your app using keyboard shortcuts with a minimap with touchable views\n* Central, extendable settings manager to load common and custom JSON and CLI settings like FPS, V-Sync, Screen Layout, etc.\n\n### BaseView\n\nA basic, rectangular view with an optional size and background color that can contain children and be added as a child to other `BaseView`s.\n\n* Animatable properties: `position`, `scale`, `rotation`, `tint`, `alpha`, `backgroundColor`\n* Transform origin for rotating and scaling around a local point\n* `update()` and `draw()` loops\n\n### TouchView\n\n* Extends `BaseView` with added touch capabilities\n* Touch *began*, *updated* and *ended* events, overrideable protected methods and explicit signals \n* Distinction between dragging and tapping with distance and time thresholds\n\n### TextView\n\n* Multi-line text layout with basic inline styling support\n* HTML tags: `\u003cb\u003e`, `\u003ci\u003e`, `\u003cbr\u003e`, `\u003cp\u003e`\n* Styles: `fontFamily`, `fontStyle`, `fontWeight`, `fontSize`, `leadingOffset`, `textColor`, `textAlign`, `textTransform`\n* Automatic word-wrapping and other layout modes (single line, strip line-breaks, multi-line clip, multi-line auto-wrap)\n* `string` and `wstring` support\n* Layout-caching minimizes re-calculation of layout while maintaining ability to call methods like `getSize()` at any time\n* *Windows only, requires [Cinder-BluecadetText](/bluecadet/Cinder-BluecadetText)*\n\n### MaskView\n\n* A `MaskView` can use any `BaseView` as a mask for its child views\n* `REVEAL` and `HIDE` masked content modes (essentially stencil or knockout)\n* Uses GL stencils, so doesn't support semi-transparency, but does allow for more custom shapes than GL scissor\n* Most view subclasses can be used individually and combined as masks\n\n### SettingsManager\n\nThe SettingsManager provides an easy means to map JSON settings to app parameters, override them via command line parameters for development and load/save them to/from JSON via InterfaceGl params.\n\n### View Samples\n\n![](docs/media/view-types-sample.gif)\n\n### Misc Features\n\n| Multi-Screen Support | Virtual Touches \u0026 Stress Testing |\n|---|---|\n| ![](docs/media/debug-multi-screen.gif) | ![](docs/media/debug-touch-stress-test.gif) |\n| Bezel compensation, debug layout, mini-map, keyboard-based panning/zooming. | Built-in support to create virtual touches and stress test your app. Can also be used to simulate complex touch patterns like capacitive fiducials. |\n\n| Multi-Touch Simulation | Debug Info | Plugin Support |\n|---|---|--|\n| ![](docs/media/debug-multi-touch-sim.gif) | ![](docs/media/debug-view-info.gif) | ![](docs/media/debug-plugins.gif) |\n| Simulate multiple touches with your mouse cursor. | Display view bounds, position, transform origin, type and name or id. | Simulate, intercept and manipulate touches with custom plugins. |\n\n## Getting Started\n\nClone the block and check the dependencies below to make sure you're all set to start your first project.\n\nYou can use the boilerplate below for your main application file:\n\n```c++\n#include \"cinder/app/App.h\"\n#include \"cinder/app/RendererGl.h\"\n#include \"cinder/gl/gl.h\"\n\n#include \"bluecadet/core/BaseApp.h\"\n#include \"bluecadet/views/TouchView.h\"\n\nusing namespace ci;\nusing namespace ci::app;\nusing namespace std;\n\nusing namespace bluecadet::core;\nusing namespace bluecadet::views;\nusing namespace bluecadet::touch;\n\nclass BaseAppSampleApp : public BaseApp {\npublic:\n\tstatic void prepareSettings(ci::app::App::Settings* settings);\n\tvoid setup() override;\n\tvoid update() override;\n\tvoid draw() override;\n};\n\nvoid BaseAppSampleApp::prepareSettings(ci::app::App::Settings* settings) {\n\t// Optional: Override the shared settings manager instance with your subclass\n\tSettingsManager::setInstance(myApp::MyAppSettingsManager::get());\n\t\n\t// Initialize the settings manager with the cinder app settings and the settings json\n\tSettingsManager::get()-\u003esetup(settings);\n}\n\nvoid BaseAppSampleApp::setup() {\n\n\tBaseApp::setup();\n\n\t// Optional: configure your root view\n\tgetRootView()-\u003esetBackgroundColor(Color::gray(0.5f));\n\n\t// Sample content\n\tauto button = make_shared\u003cTouchView\u003e();\n\tbutton-\u003esetPosition(400.f, 300.f);\n\tbutton-\u003esetSize(200.f, 100.f);\n\tbutton-\u003esetBackgroundColor(Color(1, 0, 0));\n\tbutton-\u003egetSignalTapped().connect([=](...) { CI_LOG_I(\"Button tapped\"); });\n\tgetRootView()-\u003eaddChild(button);\n}\n\nvoid BaseAppSampleApp::update() {\n\t// Optional override. BaseApp::update() will update all views.\n\tBaseApp::update();\n}\n\nvoid BaseAppSampleApp::draw() {\n\t// Optional override. BaseApp::draw() will draw all views.\n\tBaseApp::draw();\n}\n\n// Make sure to pass a reference to prepareSettings to configure the app correctly. MSAA and other render options are optional.\nCINDER_APP(BaseAppSampleApp, RendererGl(RendererGl::Options().msaa(4)), BaseAppSampleApp::prepareSettings);\n\n```\n\n## Tinderbox Template\n\nTo make setup easier, this block includes a template called `Bluecadet App`. When you open TinderBox to create a new project, select `Bluecadet App` from the `Template` dropdown at the first step:\n\n![docs/media/tinderbox-template.png](docs/media/tinderbox-template.png)\n\nThis will create a base app class and a settings manager for you. The default namespace for the settings manager is `bluecadet`, which you're free to change.\n\nFor maximum compatibility, you should include the `OSC` and `TUIO` blocks via *copy* and not as *relative*:\n\n![docs/media/tinderbox-includes.png](docs/media/tinderbox-includes.png)\n\nDue to a TinderBox bug, your `SettingsManager` subclass header will be located in `Header Files` in your VS project. You can simply drag it to `Source Files`.\n\n### Cinder Path\n\nTo support maximum compatibility across machines, we encourage you to use the provided `ProjectConfig.props` property sheet included in the template (at `templates/BluecadetApp/ProjectConfig.props`) to define your Cinder path on each computer independently.\n\nTo use it, open your Visual Studio project:\n1. Open the Property Manager view via *Views \u003e Other Windows \u003e Property Manager*\n2. Select *Add Existing Property Sheet*\t\n3. Add the `ProjectConfig.props` file that should be in your app's root directory now (assuming you used the *Bluecadete App* template to create the project)\n4. Try to build your project (it should fail)\n5. Double-click the build error that says `Cinder path is not configured correctly ('C:\\Users\\...'). Please enter your Cinder path in 'C:\\Users\\...\\UserConfig.props'.`\n6. Enter your relative or absolute path to the Cinder root directory in `\u003cCinderDir\u003e...\u003c/CinderDir\u003e`\n7. Rebuild\n\nFor your convenience, the template includes a `.gitignore` file that will automatically be copied to your project directory to ignore the auto-generated `UserConfig.props` file, which is machine-specific.\n\n## Custom Subviews\n\nOut of the box, Cinder-BluecadetViews supplies the most basic types of views needed to stub out an interactive application. Eventually, you'll want to write your own `BaseView` subclasses that override `update()` or `draw()`.\n\nBelow is a simple example:\n\n### PathView.h\n\n```c++\n#pragma once\n\n#include \"bluecadet/views/BaseView.h\"\n\ntypedef std::shared_ptr\u003cclass PathView\u003e PathViewRef;\n\nclass PathView : public bluecadet::views::BaseView {\n\npublic:\n\tPathView(ci::Path2d path) : mPath(path) {}\n\t~PathView() {}\n\nprotected:\n\tvoid update(const FrameInfo \u0026 frame) override;\n\tvoid draw() override;\n\n\tci::Path2d mPath;\n};\n```\n\n### PathView.cpp\n\n```c++\n#include \"PathView.h\"\n\nusing namespace ci;\nusing namespace ci::app;\nusing namespace std;\n\nvoid PathView::update(const FrameInfo \u0026 frame) {\n\t// update your view on each frame if you'd like\n\t// no need to call base view implementation.\n\t// FrameInfo contains the time since the previous\n\t// update call (deltaTime) and the time the app\n\t// has been running (absoluteTime).\n}\nvoid PathView::draw() {\n\t// no need to call base-view implementation\n\t// unless you want to draw a solid rect of\n\t// getSize() and getBackgroundColor()\n\t// bluecadet::views::BaseView::draw();\n\t\n\t// you could set the color to the current background color\n\t// but by default getTint() and getAlpha() are used\n\t// gl::ScopedColor color(getBackgroundColor());\n\t\n\t// this will draw the path using the current color, which\n\t// defaults to getDrawColor() (combination of tint and alpha)\n\tgl::draw(mPath);\n}\n```\n\n\n## Dependencies\n\n* Cinder-BluecadetText (https://github.com/bluecadet/Cinder-BluecadetText)\n* Cinder OSC block\n* Cinder TUIO block\n\n## Notes\n\nVersion 1.7.0\n\nBuilt for [Cinder v0.9.2 dev](https://github.com/cinder/Cinder/) and [Cinder v0.9.1](https://github.com/cinder/Cinder/tree/v0.9.1). Samples require VS 2015 v140 toolset, but tested with VS 2013 v120 as well.\n\nCinder setup instructions:\n\n```bash\n# Cinder dev\ngit clone --depth 1 --recursive https://github.com/cinder/Cinder.git\n\n# Cinder 0.9.1 stable\n# git clone -b v0.9.1 --depth 1 --recursive https://github.com/cinder/Cinder.git\n\n# Bluecadet blocks + dependencies\ncd Cinder/blocks\ngit clone git@github.com:bluecadet/Cinder-BluecadetText.git\ngit clone git@github.com:bluecadet/Cinder-BluecadetViews.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluecadet%2Fcinder-bluecadetviews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluecadet%2Fcinder-bluecadetviews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluecadet%2Fcinder-bluecadetviews/lists"}