Add dark theme and icons

CMakeLists.txt

@@ -2,7 +2,7 @@ cmake_minimum_required(VERSION 2.8)
 
 project(dust3d)
 
-file(GLOB_RECURSE sources 
+file(GLOB_RECURSE SOURCES 
   src/glw_osx.m
   src/glw_internal.h
   src/glw_style.h
@@ -29,17 +29,21 @@ file(GLOB_RECURSE sources
   src/draw.c
   src/skeleton.h
   src/skeleton.c
+  src/icons.h
+  src/icons.c
   src/editor.c
+  src/lodepng.h
+  src/lodepng.c
 )
 
 IF(APPLE)
-  add_executable(dust3d MACOSX_BUNDLE ${sources})
+  file(GLOB_RECURSE RES_SOURCES "${CMAKE_CURRENT_SOURCE_DIR}/res/*.png")
+  add_executable(dust3d MACOSX_BUNDLE ${SOURCES} ${RES_SOURCES})
+  SET_SOURCE_FILES_PROPERTIES(${RES_SOURCES} PROPERTIES MACOSX_PACKAGE_LOCATION Resources)
   find_package(OpenGL REQUIRED)
   include_directories(${OPENGL_INCLUDE_DIRS})
   target_link_libraries(dust3d ${OPENGL_LIBRARIES})
   set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -framework AppKit -framework Quartz")
-  set_target_properties(dust3d PROPERTIES
-    MACOSX_BUNDLE_INFO_PLIST ${CMAKE_CURRENT_SOURCE_DIR}/src/Info.plist)
-  install(TARGETS dust3d
-    DESTINATION ".")
+  set_target_properties(dust3d PROPERTIES MACOSX_BUNDLE_INFO_PLIST ${CMAKE_CURRENT_SOURCE_DIR}/src/Info.plist)
+  install(TARGETS dust3d DESTINATION ".")
 ENDIF (APPLE)

README.md

@@ -67,7 +67,8 @@ This todo already done in the B-Mesh algorithm implementation.
   <img src="screenshot/dust3d_imgui.png" width="280" height="266">  
   **Feb 11, 2017:**  
   Qt removed, so C++ removed, but Objective-C imported for just support the OpenGL environment on OSX.  
-  <img src="screenshot/dust3d_glw_preview.png" width="278" height="167">  
+  <img src="screenshot/dust3d_glw_preview.png" width="278" height="167"><img src="screenshot/dust3d_glw_preview_dark.png" width="284" height="244">  
+
 
 - [ ] Render rigid animation  
 - [ ] png exporter for isometric 2.5D game  

icons/README.md

@@ -0,0 +1,6 @@
+**Icons are not made by me, so if you want use these icons please check the listed license details inside current folder.**  
+
+The following command line is using [squeezer](https://github.com/huxingyi/squeezer) to pack all the icons to one png.  
+```sh
+./squeezerw files --verbose --width 128 --height 128 --border 0 --allowRotations 0 --outputTexture ../res/icons.png --outputInfo ../src/icons.c --infoHeader "//THIS FILE IS GENERATED AUTOMATICALLY BY https://github.com/huxingyi/squeezer, PLEASE DONT MODIFY IT MANUALLY.\n\n#include \"icons.h\"\n\nconst int iconTable[][ICON_ITEM_MAX] = {\n" --infoFooter "\n};\n" --infoBody "  {%w, %h, %x, %y, %l, %t, %c, %r} /*\"%n\"*/" --infoSplit ",\n"
+```

icons/licenses/open-iconic/ICON-LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Waybury
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

icons/licenses/open-iconic/README.md

@@ -0,0 +1,114 @@
+[Open Iconic v1.1.1](http://useiconic.com/open)
+===========
+
+### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons)
+
+
+
+## What's in Open Iconic?
+
+* 223 icons designed to be legible down to 8 pixels
+* Super-light SVG files - 61.8 for the entire set 
+* SVG sprite—the modern replacement for icon fonts
+* Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
+* Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
+* PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.
+
+
+## Getting Started
+
+#### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections.
+
+### General Usage
+
+#### Using Open Iconic's SVGs
+
+We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute).
+
+```
+<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
+```
+
+#### Using Open Iconic's SVG Sprite
+
+Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
+
+Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `<svg>` *tag and a unique class name for each different icon in the* `<use>` *tag.*  
+
+```
+<svg class="icon">
+  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
+</svg>
+```
+
+Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `<svg>` tag with equal width and height dimensions.
+
+```
+.icon {
+  width: 16px;
+  height: 16px;
+}
+```
+
+Coloring icons is even easier. All you need to do is set the `fill` rule on the `<use>` tag.
+
+```
+.icon-account-login {
+  fill: #f00;
+}
+```
+
+To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/).
+
+#### Using Open Iconic's Icon Font...
+
+
+##### …with Bootstrap
+
+You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}`
+
+
+```
+<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
+```
+
+
+```
+<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
+```
+
+##### …with Foundation
+
+You can find our Foundation stylesheets in `font/css/open-iconic-foundation.{css, less, scss, styl}`
+
+```
+<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
+```
+
+
+```
+<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
+```
+
+##### …on its own
+
+You can find our default stylesheets in `font/css/open-iconic.{css, less, scss, styl}`
+
+```
+<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
+```
+
+```
+<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
+```
+
+
+## License
+
+### Icons
+
+All code (including SVG markup) is under the [MIT License](http://opensource.org/licenses/MIT).
+
+### Fonts
+
+All fonts are under the [SIL Licensed](http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web).

src/editor.c

@@ -12,19 +12,20 @@
 #include "draw.h"
 #include "skeleton.h"
 #include "bmesh.h"
+#include "icons.h"
 
 #define GEN_ID __LINE__
 
 #define ED_MODE_EDIT            0
 #define ED_MODE_ANIMATION       1
 
-#define ED_BACKGROUND_COLOR     0x2b2b2b
+#define ED_BACKGROUND_COLOR     0x141414
 
 #define ED_SIDEBAR_WIDTH        400
 #define ED_SPACING              10
 
 #define ED_TOPBAR_HEIGHT        100
-#define ED_TOOLBAR_HEIGHT       50
+#define ED_TOOLBAR_HEIGHT       (glwImLineHeight(win) * 1.2)
 
 #define ED_GL_BACKGROUND_COLOR  GLW_BACKGROUND_COLOR
 
@@ -69,6 +70,26 @@ static int drawBmeshBone(bmesh *bm, bmeshBone *bone) {
   return 0;
 }
 
+#define ED_CANVAS_BORDER_COLOR      0
+#define ED_CANVAS_OUTER_COLOR       0
+#define ED_CANVAS_BACKGROUND_COLOR  0
+
+static void drawCanvas(int x, int y, int width, int height) {
+  int left = x;
+  int top = y;
+  int right = x + width - 1;
+  int bottom = y + height - 1;
+  glColor3f(glwR(ED_CANVAS_BORDER_COLOR),
+    glwG(ED_CANVAS_BORDER_COLOR),
+    glwB(ED_CANVAS_BORDER_COLOR));
+  glBegin(GL_QUADS);
+    glVertex2f(left, top);
+    glVertex2f(right, top);
+    glVertex2f(right, bottom);
+    glVertex2f(left, bottom);
+  glEnd();
+}
+
 static void display(glwWin *win) {
   editor *ed = glwGetUserData(win);
   
@@ -87,10 +108,11 @@ static void display(glwWin *win) {
   }
   
   {
-    char *titles[] = {"Library", "Property", 0};
+    char *titles[] = {"Tool", 0};
+    int icons[] = {ICON_TOOL, 0};
     glwImTabBox(win, GEN_ID, ED_SPACING / 2, ED_TOPBAR_HEIGHT, ED_SIDEBAR_WIDTH,
       ed->height - ED_TOPBAR_HEIGHT - ED_SPACING / 2,
-      titles, 0);
+      titles, icons, 0);
   }
   
   {
@@ -98,33 +120,34 @@ static void display(glwWin *win) {
     int y = ED_TOPBAR_HEIGHT;
     int width = ed->width - ED_SIDEBAR_WIDTH - ED_SPACING / 2 - ED_SPACING - ED_SPACING / 2;
     int height = ed->height - ED_TOPBAR_HEIGHT - ED_SPACING / 2;
-    char *titles[] = {"Edit View", "Animation View", 0};
+    char *titles[] = {"Skeleton", "Animation", "Config", 0};
+    int icons[] = {ICON_MONITOR, ICON_PENCIL, ICON_EYE, 0};
     ed->mode = glwImTabBox(win, GEN_ID,
       x, y, width, height,
-      titles, ed->mode);
+      titles, icons, ed->mode);
     if (ED_MODE_EDIT == ed->mode) {
-      int glWinY = glwImNextY(win);
-      int bottomY = y + height - ED_TOOLBAR_HEIGHT;
-      glwImBottomBar(win, GEN_ID, x, bottomY, width, ED_TOOLBAR_HEIGHT);
+      int toolBarY = glwImNextY(win) - 1;
+      int glWinY = toolBarY + ED_TOOLBAR_HEIGHT;
+      glwImToolBar(win, GEN_ID, x, toolBarY, width, ED_TOOLBAR_HEIGHT);
       ed->showBallChecked = glwImCheck(win, GEN_ID, x + ED_SPACING + ED_SPACING,
-        bottomY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
+        toolBarY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
         "Ball",
         ed->showBallChecked);
       ed->showBoneChecked = glwImCheck(win, GEN_ID,
         glwImNextX(win) + ED_SPACING,
-        bottomY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
+        toolBarY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
         "Bone",
         ed->showBoneChecked);
       ed->showMeshChecked = glwImCheck(win, GEN_ID,
         glwImNextX(win) + ED_SPACING,
-        bottomY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
+        toolBarY + (ED_TOOLBAR_HEIGHT - glwImLineHeight(win)) / 2 + 2,
         "Mesh",
         ed->showMeshChecked);
       
       ed->renderLeft = x + 1;
       ed->renderTop = glWinY;
       ed->renderWidth = width - 3;
-      ed->renderHeight = bottomY - glWinY;
+      ed->renderHeight = height - ED_TOOLBAR_HEIGHT;
       
       if (0 == ed->skl) {
         ed->skl = skeletonCreate();
@@ -157,15 +180,16 @@ static void display(glwWin *win) {
       }
       
       glEnable(GL_SCISSOR_TEST);
-      glScissor(ed->renderLeft, ED_SPACING / 2 + ED_TOOLBAR_HEIGHT + 1,
+      glScissor(ed->renderLeft, ED_SPACING / 2 + 1,
         ed->renderWidth, ed->renderHeight);
       glPushMatrix();
-      glTranslatef(x + 1, glWinY, 0);
+      glTranslatef(ed->renderLeft, ed->renderTop, 0);
       
+      /*
       glColor3f(glwR(ED_GL_BACKGROUND_COLOR),
         glwG(ED_GL_BACKGROUND_COLOR),
         glwB(ED_GL_BACKGROUND_COLOR));
-      glRecti(0, 0, ed->renderWidth, ed->renderHeight);
+      glRecti(0, 0, ed->renderWidth, ed->renderHeight);*/
       
       glMatrixMode(GL_PROJECTION);
       glLoadIdentity();
@@ -279,7 +303,7 @@ int main(int argc, char *argv[]) {
   ed.cameraDistance = 14.4;
   ed.showMeshChecked = 1;
   
-  ed.win = glwCreateWindow(0, 0, 0, 0);
+  ed.win = glwCreateWindow(0, 0, 600, 480);
   glwSetUserData(ed.win, &ed);
   glwReshapeFunc(ed.win, reshape);
   glwDisplayFunc(ed.win, display);

src/glw.c

@@ -2,8 +2,11 @@
 #include <stdlib.h>
 #include <stdio.h>
 #include <math.h>
+#include <CoreFoundation/CoreFoundation.h>
 #include "glw_internal.h"
 #include "glw_style.h"
+#include "icons.h"
+#include "lodepng.h"
 
 #ifndef M_PI
 #define M_PI 3.14159265
@@ -45,6 +48,44 @@ void glwDrawSystemText(glwWin *win, int x, int y, char *text,
   glDisable(GL_TEXTURE_2D);
 }
 
+static int glwGetLineHeight(glwWin *win) {
+  glwSystemFontTexture *systemFontTexture = glwGetSystemFontTexture(win);
+  return systemFontTexture->originSize.height * (1 + GLW_VER_AUTO_MARGIN * 2);
+}
+
+void glwDrawSystemIcon(glwWin *win, int x, int y, int icon,
+    unsigned int color) {
+  glwWinContext *ctx = glwGetWinContext(win);
+  float texLeft, texWidth, texTop, texHeight;
+  icon--;
+  glEnable(GL_TEXTURE_2D);
+  glBindTexture(GL_TEXTURE_2D, ctx->iconTexId);
+  glColor3f(glwR(color), glwG(color), glwB(color));
+  texLeft = (float)iconTable[icon][ICON_ITEM_LEFT] / ICON_IMAGE_WIDTH;
+  texTop = (float)iconTable[icon][ICON_ITEM_TOP] / ICON_IMAGE_WIDTH;
+  texWidth = (float)iconTable[icon][ICON_ITEM_WIDTH] / ICON_IMAGE_WIDTH;
+  texHeight = (float)iconTable[icon][ICON_ITEM_HEIGHT] / ICON_IMAGE_WIDTH;
+  x += iconTable[icon][ICON_ITEM_TRIM_OFFSET_LEFT];
+  y += (iconTable[icon][ICON_ITEM_TRIM_OFFSET_TOP] +
+    (glwGetLineHeight(win) - iconTable[icon][ICON_ITEM_ORIGINAL_HEIGHT]) / 4);
+  glBegin(GL_QUADS);
+    glTexCoord2f(texLeft, texTop);
+    glVertex2i(x, y);
+  
+    glTexCoord2f(texLeft + texWidth, texTop);
+    glVertex2i(x + iconTable[icon][ICON_ITEM_WIDTH], y);
+  
+    glTexCoord2f(texLeft + texWidth, texTop + texHeight);
+    glVertex2i(x + iconTable[icon][ICON_ITEM_WIDTH],
+      y + iconTable[icon][ICON_ITEM_HEIGHT]);
+  
+    glTexCoord2f(texLeft, texTop + texHeight);
+    glVertex2i(x,
+      y + iconTable[icon][ICON_ITEM_HEIGHT]);
+  glEnd();
+  glDisable(GL_TEXTURE_2D);
+}
+
 void glwMouseEvent(glwWin *win, int button, int state, int x, int y) {
   glwImGui *imGUI = glwGetImGUI(win);
   imGUI->mouseButton = button;
@@ -131,6 +172,40 @@ void glwInitSystemFontTexture(glwWin *win) {
   glwDestroyFont(font);
 }
 
+void glwInitSystemIconTexture(glwWin *win) {
+  glwWinContext *ctx = glwGetWinContext(win);
+  if (0 == ctx->iconTexId) {
+    char filename[1024];
+    unsigned int err;
+    unsigned char *imageData = 0;
+    unsigned int width = 0;
+    unsigned int height = 0;
+    GLuint texture = 0;
+    snprintf(filename, sizeof(filename), "%s/icons.png", ctx->root);
+    err = lodepng_decode32_file(&imageData, &width, &height,
+      filename);
+    if (err) {
+      fprintf(stderr, "%s: lodepng_decode32_file error: %s\n", __FUNCTION__,
+        lodepng_error_text(err));
+      return;
+    }
+    glEnable(GL_TEXTURE_2D);
+    glGenTextures(1, &texture);
+    glBindTexture(GL_TEXTURE_2D, texture);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+    glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_ADD);
+    glTexImage2D(GL_TEXTURE_2D, 0, 4,
+      (GLsizei)ICON_IMAGE_WIDTH,
+      (GLsizei)ICON_IMAGE_HEIGHT, 0,
+      GL_RGBA, GL_UNSIGNED_BYTE, imageData);
+    free(imageData);
+    ctx->iconTexId = (int)texture;
+    ctx->iconTexWidth = width;
+    ctx->iconTexHeight = height;
+  }
+}
+
 static glwVec2 glwRoundedCorners[GLW_SMALL_ROUNDED_CORNER_SLICES] = {{0}};
 
 static void createRoundedCorners(glwVec2 *arr, int num) {
@@ -512,15 +587,18 @@ int glwImCheck(glwWin *win, int id, int x, int y, char *text, int checked) {
   return (imGUI->activeId == id && oldActiveId != id) ? !checked : checked;
 }
 
-static int glwCalcListMaxWidth(glwWin *win, char **list, int *height,
-    int *len) {
+static int glwCalcListMaxWidth(glwWin *win, char **titles, int *icons,
+    int *height, int *len) {
   int i;
   int itemWidth = 0;
   int maxItemWidth = 0;
 
-  for (i = 0; list[i]; ++i) {
-    glwSize textSize = glwMeasureSystemText(win, list[i]);
+  for (i = 0; titles[i]; ++i) {
+    glwSize textSize = glwMeasureSystemText(win, titles[i]);
     itemWidth = textSize.width * (1 + GLW_HOR_AUTO_MARGIN * 2);
+    if (icons && icons[i]) {
+      itemWidth += iconTable[icons[i]][ICON_ITEM_ORIGINAL_WIDTH];
+    }
     if (itemWidth > maxItemWidth) {
       maxItemWidth = itemWidth;
     }
@@ -532,6 +610,10 @@ static int glwCalcListMaxWidth(glwWin *win, char **list, int *height,
     }
   }
   
+  if (maxItemWidth < GLW_MIN_TAB_WIDTH) {
+    maxItemWidth = GLW_MIN_TAB_WIDTH;
+  }
+  
   return maxItemWidth;
 }
 
@@ -545,7 +627,7 @@ int glwImButtonGroup(glwWin *win, int id, int x, int y, int parentWidth,
   int listLen = 0;
   int offset;
   int maxItemWidth = 0;
-  maxItemWidth = glwCalcListMaxWidth(win, list, &height, &listLen);
+  maxItemWidth = glwCalcListMaxWidth(win, list, 0, &height, &listLen);
   width = maxItemWidth * listLen;
   left = listLen > 1 ? x + (parentWidth - width) / 2 :
     x + maxItemWidth * GLW_HOR_AUTO_MARGIN;
@@ -600,7 +682,7 @@ int glwImButtonGroup(glwWin *win, int id, int x, int y, int parentWidth,
 }
 
 int glwImTabBox(glwWin *win, int id, int x, int y, int width, int height,
-    char **list, int sel) {
+    char **titles, int *icons, int sel) {
   glwImGui *imGUI = glwGetImGUI(win);
   int tabWidth = 0;
   int tabHeight = 0;
@@ -609,14 +691,23 @@ int glwImTabBox(glwWin *win, int id, int x, int y, int width, int height,
   int listLen = 0;
   int offset;
   int maxItemWidth = 0;
-  maxItemWidth = glwCalcListMaxWidth(win, list, &tabHeight, &listLen);
+  maxItemWidth = glwCalcListMaxWidth(win, titles, icons, &tabHeight, &listLen);
   tabWidth = maxItemWidth * listLen;
-  left = x + maxItemWidth * GLW_HOR_AUTO_MARGIN / 2;
+  left = x;
   imGUI->nextX = x;
   imGUI->nextY = y + tabHeight;
   glwImGUIActiveIdCheck(imGUI, id, left, y, tabWidth, tabHeight);
-  for (i = 0, offset = left; list[i]; ++i) {
-    glwSize textSize = glwMeasureSystemText(win, list[i]);
+  glwDrawRectGradientFill(x + 1, y + tabHeight,
+    width - 2, height - tabHeight - 2,
+    GLW_TAB_FILL_GRADIENT_COLOR_2, GLW_TAB_FILL_GRADIENT_COLOR_2);
+  glwDrawHLine(x, y + tabHeight - 1, width, 1, GLW_BORDER_COLOR_1);
+  glwDrawHLine(x, y + height - 1, width, 1, GLW_BORDER_COLOR_1);
+  glwDrawVLine(x, y + tabHeight, 1, height - tabHeight,
+    GLW_BORDER_COLOR_1);
+  glwDrawVLine(x + width - 1, y + tabHeight, 1, height - tabHeight,
+    GLW_BORDER_COLOR_1);
+  for (i = 0, offset = left; titles[i]; ++i) {
+    glwSize textSize = glwMeasureSystemText(win, titles[i]);
     if (imGUI->activeId == id) {
       int hit = glwPointTest(imGUI->mouseX, imGUI->mouseY, offset, y,
         maxItemWidth, tabHeight, 0);
@@ -625,27 +716,27 @@ int glwImTabBox(glwWin *win, int id, int x, int y, int width, int height,
       }
     }
     if (sel == i) {
-      glwDrawTopRoundedRectGradientFill(offset, y,
-        maxItemWidth, tabHeight,
-        GLW_BUTTON_CORNER_RADIUS,
-        GLW_TAB_FILL_GRADIENT_COLOR_1, GLW_TAB_FILL_GRADIENT_COLOR_2);
       glwDrawTopRoundedRectBorder(offset, y,
         maxItemWidth, tabHeight,
         GLW_BUTTON_CORNER_RADIUS, GLW_BORDER_COLOR_1);
+      glwDrawTopRoundedRectGradientFill(offset + 1, y + 1,
+        maxItemWidth - 2, tabHeight,
+        GLW_BUTTON_CORNER_RADIUS,
+        GLW_TAB_FILL_GRADIENT_COLOR_1, GLW_TAB_FILL_GRADIENT_COLOR_2);
     }
+    if (icons && icons[i]) {
+      int iconIdx = icons[i] - 1;
+      glwDrawSystemIcon(win, offset + textSize.height / 2,
+        y + tabHeight * GLW_VER_AUTO_MARGIN, icons[i], GLW_SYSTEM_FONT_COLOR);
+      glwDrawSystemText(win, offset + textSize.height / 2 +
+          iconTable[iconIdx][ICON_ITEM_ORIGINAL_WIDTH] + textSize.height / 2,
+        y + tabHeight * GLW_VER_AUTO_MARGIN, titles[i], GLW_SYSTEM_FONT_COLOR);
+    } else {
       glwDrawSystemText(win, offset + (maxItemWidth - textSize.width) / 2,
-      y + tabHeight * GLW_VER_AUTO_MARGIN, list[i], GLW_SYSTEM_FONT_COLOR);
+        y + tabHeight * GLW_VER_AUTO_MARGIN, titles[i], GLW_SYSTEM_FONT_COLOR);
+    }
     offset += maxItemWidth;
   }
-  glwDrawRectGradientFill(x + 1, y + tabHeight,
-    width - 2, height - tabHeight - 2,
-    GLW_BACKGROUND_COLOR, GLW_BACKGROUND_COLOR);
-  glwDrawHLine(x, y + tabHeight - 1, width, 1, GLW_BORDER_COLOR_1);
-  glwDrawHLine(x, y + height - 1, width, 1, GLW_BORDER_COLOR_1);
-  glwDrawVLine(x, y + tabHeight, 1, height - tabHeight,
-    GLW_BORDER_COLOR_1);
-  glwDrawVLine(x + width - 1, y + tabHeight, 1, height - tabHeight,
-    GLW_BORDER_COLOR_1);
   return sel;
 }
 
@@ -688,8 +779,7 @@ int glwImNextY(glwWin *win) {
 }
 
 int glwImLineHeight(glwWin *win) {
-  glwSystemFontTexture *systemFontTexture = glwGetSystemFontTexture(win);
-  return systemFontTexture->originSize.height * (1 + GLW_VER_AUTO_MARGIN * 2);
+  return glwGetLineHeight(win);
 }
 
 void glwSetUserData(glwWin *win, void *userData) {
@@ -745,3 +835,5 @@ int glwMouseY(glwWin *win) {
   glwWinContext *ctx = glwGetWinContext(win);
   return ctx->y;
 }
+
+

src/glw.h

@@ -55,7 +55,7 @@ int glwImButtonGroup(glwWin *win, int id, int x, int y, int parentWidth,
     char **list, int sel);
 int glwImPanel(glwWin *win, int id, int x, int y, int width, int height);
 int glwImTabBox(glwWin *win, int id, int x, int y, int width, int height,
-  char **list, int sel);
+  char **titles, int *icons, int sel);
 int glwImToolBar(glwWin *win, int id, int x, int y, int width, int height);
 int glwImBottomBar(glwWin *win, int id, int x, int y, int width, int height);
 int glwImNextX(glwWin *win);

src/glw_internal.h

@@ -30,6 +30,10 @@ typedef struct glwWinContext {
   void *userData;
   int x;
   int y;
+  int iconTexId;
+  int iconTexWidth;
+  int iconTexHeight;
+  char root[1024];
 } glwWinContext;
 
 typedef struct glwSystemFontTexture {
@@ -56,6 +60,8 @@ unsigned char *glwRenderTextToRGBA(char *text, glwFont *font, glwSize size,
 void glwDrawText(int x, int y, char *text, glwFont *font);
 void glwDrawSystemText(glwWin *win, int x, int y, char *text,
     unsigned int color);
+void glwDrawSystemIcon(glwWin *win, int x, int y, int icon,
+    unsigned int color);
 glwSize glwMeasureSystemText(glwWin *win, char *text);
 void glwInitSystemFontTexture(glwWin *win);
 void glwInitPrimitives(void);
@@ -68,5 +74,6 @@ void glwDrawButtonBackground(float x, float y, float width, float height,
 void glwMouseEvent(glwWin *win, int button, int state, int x, int y);
 glwImGui *glwGetImGUI(glwWin *win);
 glwWinContext *glwGetWinContext(glwWin *win);
+void glwInitSystemIconTexture(glwWin *win);
 
 #endif

src/glw_osx.m

@@ -80,6 +80,9 @@ glwWinContext *glwGetWinContext(glwWin *win) {
     if (self->pendingReshape) {
       if (self->context.onReshape) {
         self->pendingReshape = 0;
+        if (!self->context.iconTexId) {
+          glwInitSystemIconTexture((glwWin *)self.window);
+        }
         if (!self->systemFontTexture.texId) {
           glwInitSystemFontTexture((glwWin *)self.window);
         }
@@ -229,6 +232,7 @@ glwFont *glwCreateFont(char *name, int weight, int size, int bold) {
     encoding:NSMacOSRomanStringEncoding];
   NSFont *font = [[[NSFontManager sharedFontManager] fontWithFamily:fontFamily 
     traits:(bold ? NSBoldFontMask : NSUnboldFontMask) weight:weight size:size] retain];
+  //NSLog(@"%@",[[[NSFontManager sharedFontManager] availableFontFamilies] description]);
   return (glwFont *)font;
 }
 
@@ -281,6 +285,13 @@ glwWin *glwCreateWindow(int x, int y, int width, int height) {
   view->context.scaleX = 1;
   view->context.scaleY = 1;
   
+  CFBundleRef mainBundle = CFBundleGetMainBundle();
+  CFURLRef resourcesURL = CFBundleCopyResourcesDirectoryURL(mainBundle);
+  CFURLGetFileSystemRepresentation(resourcesURL, TRUE,
+    (UInt8 *)view->context.root,
+    sizeof(view->context.root));
+  CFRelease(resourcesURL);
+  
   [window setAcceptsMouseMovedEvents:YES];
   [window setContentView:view];
   [window setDelegate:view];

src/glw_style.h

@@ -1,15 +1,15 @@
 #ifndef GLW_STYLE_H
 #define GLW_STYLE_H
 
-#define GLW_SYSTEM_FONT_NAME    "Helvetica"
-#define GLW_SYSTEM_FONT_WEIGHT  5
-#define GLW_SYSTEM_FONT_SIZE    21
-#define GLW_SYSTEM_FONT_COLOR   0x8f8f8f
+#define GLW_SYSTEM_FONT_NAME    "PT Sans Narrow" //"Monaco" //"Helvetica"
+#define GLW_SYSTEM_FONT_WEIGHT  10
+#define GLW_SYSTEM_FONT_SIZE    20
+#define GLW_SYSTEM_FONT_COLOR   0xb9b9b9
 
 #define GLW_SMALL_ROUNDED_CORNER_SLICES 5
 
-#define GLW_BORDER_COLOR_1 0x161616
-#define GLW_BORDER_COLOR_2 0x161616
+#define GLW_BORDER_COLOR_1 0x000000
+#define GLW_BORDER_COLOR_2 0x000000
 
 #define GLW_FILL_GRADIENT_COLOR_1 0x424242
 #define GLW_FILL_GRADIENT_COLOR_2 0x242424
@@ -33,6 +33,8 @@
 #define GLW_VER_AUTO_MARGIN 0.15
 
 #define GLW_BACKGROUND_COLOR 0x373737
-#define GLW_TOOLBAR_BACKGROUND_COLOR 0x252525
+#define GLW_TOOLBAR_BACKGROUND_COLOR GLW_TAB_FILL_GRADIENT_COLOR_2
+
+#define GLW_MIN_TAB_WIDTH 120
 
 #endif

src/icons.c

@@ -0,0 +1,28 @@
+//THIS FILE IS GENERATED AUTOMATICALLY BY https://github.com/huxingyi/squeezer, PLEASE DONT MODIFY IT MANUALLY.
+
+#include "icons.h"
+
+const int iconTable[][ICON_ITEM_MAX] = {
+  {12, 16, 0, 96, 2, 0, 16, 16} /*"unlock.png"*/,
+  {16, 16, 0, 32, 0, 0, 16, 16} /*"unlink.png"*/,
+  {16, 14, 8, 112, 0, 0, 16, 16} /*"undo.png"*/,
+  {14, 16, 0, 80, 0, 0, 16, 16} /*"trash.png"*/,
+  {16, 16, 0, 16, 0, 0, 16, 16} /*"tool.png"*/,
+  {12, 12, 28, 16, 2, 2, 16, 16} /*"stop.png"*/,
+  {16, 16, 112, 0, 0, 0, 16, 16} /*"reload.png"*/,
+  {16, 16, 96, 0, 0, 0, 16, 16} /*"plus.png"*/,
+  {12, 12, 16, 28, 2, 2, 16, 16} /*"play.png"*/,
+  {14, 16, 0, 64, 0, 0, 16, 16} /*"pin.png"*/,
+  {16, 16, 80, 0, 0, 0, 16, 16} /*"pencil.png"*/,
+  {12, 12, 16, 16, 2, 2, 16, 16} /*"pause.png"*/,
+  {16, 16, 64, 0, 0, 0, 16, 16} /*"monitor.png"*/,
+  {16, 4, 16, 40, 0, 6, 16, 16} /*"minus.png"*/,
+  {12, 14, 12, 96, 2, 0, 16, 16} /*"lock.png"*/,
+  {16, 16, 48, 0, 0, 0, 16, 16} /*"link.png"*/,
+  {8, 16, 0, 112, 4, 0, 16, 16} /*"info.png"*/,
+  {16, 16, 32, 0, 0, 0, 16, 16} /*"image.png"*/,
+  {16, 16, 16, 0, 0, 0, 16, 16} /*"folder.png"*/,
+  {14, 16, 0, 48, 0, 0, 16, 16} /*"file.png"*/,
+  {16, 16, 0, 0, 0, 0, 16, 16} /*"eyedropper.png"*/,
+  {16, 12, 14, 48, 0, 2, 16, 16} /*"eye.png"*/
+};

src/icons.h

@@ -0,0 +1,48 @@
+#ifndef ICONS_H
+#define ICONS_H
+
+typedef enum {
+  ICON_ITEM_WIDTH,
+  ICON_ITEM_HEIGHT,
+  ICON_ITEM_LEFT,
+  ICON_ITEM_TOP,
+  ICON_ITEM_TRIM_OFFSET_LEFT,
+  ICON_ITEM_TRIM_OFFSET_TOP,
+  ICON_ITEM_ORIGINAL_WIDTH,
+  ICON_ITEM_ORIGINAL_HEIGHT,
+  ICON_ITEM_MAX
+} iconItem;
+
+#define ICON_IMAGE_WIDTH  128
+#define ICON_IMAGE_HEIGHT 128
+
+typedef enum {
+  ICON_UNKNOWN,
+  ICON_UNLOCK,
+  ICON_UNLINK,
+  ICON_UNDO,
+  ICON_TRASH,
+  ICON_TOOL,
+  ICON_STOP,
+  ICON_RELOAD,
+  ICON_PLUS,
+  ICON_PLAY,
+  ICON_PIN,
+  ICON_PENCIL,
+  ICON_PAUSE,
+  ICON_MONITOR,
+  ICON_MINUS,
+  ICON_LOCK,
+  ICON_LINK,
+  ICON_INFO,
+  ICON_IMAGE,
+  ICON_FOLDER,
+  ICON_FILE,
+  ICON_EYEDROPPER,
+  ICON_EYE,
+  ICON_MAX
+} iconId;
+
+const int iconTable[ICON_MAX][ICON_ITEM_MAX];
+
+#endif