Skip to content

Instantly share code, notes, and snippets.

@mochja
Last active September 25, 2023 15:08
Show Gist options
  • Save mochja/c4788a4801885b58c1e38d7fb4c091a9 to your computer and use it in GitHub Desktop.
Save mochja/c4788a4801885b58c1e38d7fb4c091a9 to your computer and use it in GitHub Desktop.
Yoga + OpenGL Example
#include <GLFW/glfw3.h>
#include <yoga/Yoga.h>
#include <stdlib.h>
int main(void)
{
GLFWwindow* window;
/* Initialize the library */
if (!glfwInit())
return -1;
/* Create a windowed mode window and its OpenGL context */
window = glfwCreateWindow(640, 480, "Hello World", NULL, NULL);
if (!window)
{
glfwTerminate();
return -1;
}
/* Make the window's context current */
glfwMakeContextCurrent(window);
/* Loop until the user closes the window */
while (!glfwWindowShouldClose(window))
{
int width, height;
glfwGetFramebufferSize(window, &width, &height);
glViewport(0, 0, width, height);
int windowWidth, windowHeight;
glfwGetWindowSize(window, &windowWidth, &windowHeight);
/* Make it 2D */
glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0, windowWidth, windowHeight, 0, 0, 1);
YGConfigRef config = YGConfigNew();
YGNodeRef root = YGNodeNewWithConfig(config);
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
YGNodeStyleSetPadding(root, YGEdgeAll, 20);
YGNodeStyleSetMargin(root, YGEdgeAll, 20);
YGNodeRef image = YGNodeNew();
YGNodeStyleSetWidth(image, 80);
YGNodeStyleSetHeight(image, 80);
YGNodeStyleSetAlignSelf(image, YGAlignCenter);
YGNodeStyleSetMargin(image, YGEdgeEnd, 20);
YGNodeRef text = YGNodeNew();
YGNodeStyleSetHeight(text, 25);
YGNodeStyleSetAlignSelf(text, YGAlignCenter);
YGNodeStyleSetFlexGrow(text, 1);
YGNodeInsertChild(root, image, 0);
YGNodeInsertChild(root, text, 1);
YGNodeCalculateLayout(root, windowWidth, windowHeight, YGDirectionLTR);
/* Render here */
glClearColor(0.25f, 0.25f, 0.25f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 1.0, 1.0);
glRecti(
YGNodeLayoutGetLeft(root),
YGNodeLayoutGetTop(root),
YGNodeLayoutGetLeft(root) + YGNodeLayoutGetWidth(root),
YGNodeLayoutGetTop(root) + YGNodeLayoutGetHeight(root)
);
glColor3f(0.0, 0.0, 1.0);
glRecti(
YGNodeLayoutGetLeft(root) + YGNodeLayoutGetLeft(text),
YGNodeLayoutGetTop(root) + YGNodeLayoutGetTop(text),
YGNodeLayoutGetLeft(root) + YGNodeLayoutGetLeft(text) + YGNodeLayoutGetWidth(text),
YGNodeLayoutGetTop(root) + YGNodeLayoutGetTop(text) + YGNodeLayoutGetHeight(text)
);
glColor3f(1.0, 0.0, 0.0);
glRecti(
YGNodeLayoutGetLeft(root) + YGNodeLayoutGetLeft(image),
YGNodeLayoutGetTop(root) + YGNodeLayoutGetTop(image),
YGNodeLayoutGetLeft(root) + YGNodeLayoutGetLeft(image) + YGNodeLayoutGetWidth(image),
YGNodeLayoutGetTop(root) + YGNodeLayoutGetTop(image) + YGNodeLayoutGetHeight(image)
);
glFlush();
YGNodeFreeRecursive(root);
YGConfigFree(config);
/* Swap front and back buffers */
glfwSwapBuffers(window);
/* Poll for and process events */
glfwPollEvents();
}
glfwTerminate();
return 0;
}
@mochja
Copy link
Author

mochja commented Apr 7, 2017

image
image
image
image

@mochja
Copy link
Author

mochja commented Apr 7, 2017

Requirements:

  • yoga
  • glfw
  • OpenGL (+Cocoa, IOKit, CoreVideo on OSX)

Building yoga library

git clone https://github.com/facebook/yoga.git
cd yoga
buck build //:yoga
# libyoga is inside buck-out/gen/yoga#default,static

@fy0
Copy link

fy0 commented Aug 21, 2017

coool

@piusayowale
Copy link

Nice

@antopilo
Copy link

Thanks, I very nice and useful example. I appreciate it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment