Add Monomer logo and badges to README.md (#186)

* Add new Monomer logo and badges to README.md

* Fix sub-title styling

* Add support for loading any image format to use as application icon

* Update Monomer icon image

* Update examples and tutorials to use new icon image

* Adjust logo background color

README.md

@@ -1,15 +1,31 @@
-# Monomer
+<h1 align="center">Monomer</h1>
+
+<h3 align="center">A cross-platform GUI library for Haskell</h3>
+
+<p align="center">
+  <img src="assets/images/monomer-logo.svg" height=250 width=250 alt="Logo" />
+</p>
+
+<p align="center">
+  <a href="https://github.com/fjvallarino/monomer/actions">
+    <img src="https://img.shields.io/github/workflow/status/fjvallarino/monomer/Build" alt="CI badge" />
+  </a>
+  <a href="https://haskell.org">
+    <img src="https://img.shields.io/badge/Made%20in-Haskell-%235e5086?logo=haskell&style=flat-square" alt="made with Haskell"/>
+  </a>
+  <a href="https://haskell.org">
+    <img src="https://img.shields.io/github/license/fjvallarino/monomer?color=111%09193%0965%09" alt="BSD-3-Clause"/>
+  </a>
+</p>
+
+<br/>
 
 An easy to use, cross platform, GUI library for writing native Haskell
 applications.
 
-It provides a framework similar to the Elm Architecture, allowing the creation
+Monomer provides a framework similar to the Elm Architecture, allowing the creation
 of GUIs using an extensible set of widgets with pure Haskell.
 
-## Screenshot
-
-![Project's screenshot](assets/images/monomer-readme.png)
-
 ## Objectives
 
 - Be easy to learn and use.
@@ -77,11 +93,6 @@ PRs are welcome!
 If possible, keep them small and focused. If you are planning on making a large
 change, please submit an issue first so we can agree on a solution.
 
-## Questions?
-
-If you are not sure how something works or you have a usage question, feel free
-to open an issue!
-
 ## License
 
 This library is licensed under the [BSD-3 license](LICENSE).

assets/images/monomer-logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.95339,0,0,0.950482,11.9322,12.2379)">
+        <path d="M492,97.615C492,57.538 459.462,25 419.385,25L92.615,25C52.538,25 20,57.538 20,97.615L20,415.308C20,455.385 52.538,487.923 92.615,487.923L419.385,487.923C459.462,487.923 492,455.385 492,415.308L492,97.615Z" style="fill:rgb(14,17,22);"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-6.44284,8.3975)">
+        <path d="M122.533,169.334L110.834,177.023L122.533,169.334ZM178.633,158.578L190.332,150.889L178.633,158.578ZM299.123,231.173L310.826,238.857C310.836,238.843 310.845,238.828 310.855,238.814L299.123,231.173ZM299.163,231.112L287.461,223.428C287.451,223.442 287.442,223.457 287.432,223.471L299.163,231.112ZM319.035,200.847L307.332,193.163L319.035,200.847ZM327.22,196.43L327.219,210.43L327.22,210.43L327.22,196.43ZM335.404,200.847L347.107,193.163L335.404,200.847ZM355.276,231.112L367.007,223.471C366.998,223.457 366.988,223.442 366.979,223.428L355.276,231.112ZM355.316,231.173L343.585,238.814C343.594,238.828 343.604,238.843 343.613,238.857L355.316,231.173ZM417.28,325.545L428.983,317.861L417.28,325.545ZM361.168,336.293L372.871,328.609L361.168,336.293ZM293.272,336.293L281.569,328.609L293.272,336.293ZM232.491,336.627L220.792,344.316L232.491,336.627ZM163.718,336.293L152.015,328.609L163.718,336.293ZM107.605,325.545L95.903,317.861L107.605,325.545ZM164.933,238.234L176.636,245.918L164.933,238.234ZM194.635,289.206L206.337,296.89L194.635,289.206ZM330.563,289.682L342.266,281.998L330.563,289.682ZM323.876,289.682L335.579,297.366L323.876,289.682ZM282.467,340.83L279.608,327.125L282.467,340.83ZM266.096,281.474L277.799,289.158L266.096,281.474ZM130.715,140.165C111.783,140.165 100.436,161.203 110.834,177.023L134.232,161.644C136.072,164.443 134.064,168.165 130.715,168.165L130.715,140.165ZM170.451,140.165L130.715,140.165L130.715,168.165L170.451,168.165L170.451,140.165ZM190.332,150.889C185.932,144.195 178.46,140.165 170.451,140.165L170.451,168.165C169.034,168.165 167.712,167.452 166.933,166.268L190.332,150.889ZM271.109,273.786L190.332,150.889L166.933,166.268L247.711,289.165L271.109,273.786ZM287.421,223.489L254.393,273.79L277.799,289.158L310.826,238.857L287.421,223.489ZM287.432,223.471L287.392,223.533L310.855,238.814L310.895,238.752L287.432,223.471ZM307.332,193.163L287.461,223.428L310.866,238.796L330.738,208.531L307.332,193.163ZM327.22,182.43C319.697,182.43 312.024,186.017 307.332,193.163L330.738,208.531C329.913,209.787 328.491,210.43 327.219,210.43L327.22,182.43ZM347.107,193.163C342.415,186.017 334.743,182.43 327.219,182.43L327.22,210.43C325.948,210.43 324.526,209.787 323.702,208.531L347.107,193.163ZM366.979,223.428L347.107,193.163L323.702,208.531L343.573,238.796L366.979,223.428ZM367.047,223.533L367.007,223.471L343.545,238.752L343.585,238.814L367.047,223.533ZM428.983,317.861L367.019,223.489L343.613,238.857L405.577,333.229L428.983,317.861ZM409.095,354.71C428.022,354.71 439.371,333.682 428.983,317.861L405.577,333.229C403.739,330.43 405.747,326.71 409.095,326.71L409.095,354.71ZM369.352,354.71L409.095,354.71L409.095,326.71L369.352,326.71L369.352,354.71ZM349.465,343.977C353.863,350.676 361.339,354.71 369.352,354.71L369.352,326.71C370.77,326.71 372.092,327.424 372.871,328.609L349.465,343.977ZM318.861,297.366L349.465,343.977L372.871,328.609L342.266,281.998L318.861,297.366ZM304.974,343.977L335.579,297.366L312.173,281.998L281.569,328.609L304.974,343.977ZM285.087,354.71C293.101,354.71 300.576,350.676 304.974,343.977L281.569,328.609C282.347,327.424 283.669,326.71 285.087,326.71L285.087,354.71ZM283.497,354.71L285.087,354.71L285.087,326.71L283.497,326.71L283.497,354.71ZM280.408,355.04C282.076,355.04 283.722,354.87 285.326,354.535L279.608,327.125C279.898,327.065 280.168,327.04 280.408,327.04L280.408,355.04ZM240.673,355.04L280.408,355.04L280.408,327.04L240.673,327.04L240.673,355.04ZM220.792,344.316C225.191,351.01 232.663,355.04 240.673,355.04L240.673,327.04C242.09,327.04 243.412,327.753 244.19,328.937L220.792,344.316ZM189.622,296.894L220.792,344.316L244.19,328.937L213.02,281.515L189.622,296.894ZM175.42,343.977L206.337,296.89L182.932,281.522L152.015,328.609L175.42,343.977ZM155.533,354.71C163.547,354.71 171.022,350.676 175.42,343.977L152.015,328.609C152.793,327.424 154.115,326.71 155.533,326.71L155.533,354.71ZM115.79,354.71L155.533,354.71L155.533,326.71L115.79,326.71L115.79,354.71ZM95.903,317.861C85.515,333.682 96.864,354.71 115.79,354.71L115.79,326.71C119.138,326.71 121.146,330.43 119.308,333.229L95.903,317.861ZM153.231,230.55L95.903,317.861L119.308,333.229L176.636,245.918L153.231,230.55ZM110.834,177.023L153.233,241.531L176.632,226.152L134.232,161.644L110.834,177.023ZM176.636,245.918C180.576,239.918 180.574,232.15 176.632,226.152L153.233,241.531C151.043,238.199 151.042,233.883 153.231,230.55L176.636,245.918ZM213.02,281.515C205.908,270.694 190.039,270.697 182.932,281.522L206.337,296.89C202.389,302.903 193.573,302.905 189.622,296.894L213.02,281.515ZM342.266,281.998C335.157,271.17 319.282,271.17 312.173,281.998L335.579,297.366C331.629,303.381 322.81,303.381 318.861,297.366L342.266,281.998ZM283.497,326.71C281.849,326.71 280.482,326.943 279.608,327.125L285.326,354.535C285.13,354.576 284.451,354.71 283.497,354.71L283.497,326.71ZM247.711,289.165C254.823,299.986 270.692,299.982 277.799,289.158L254.393,273.79C258.342,267.776 267.158,267.774 271.109,273.786L247.711,289.165Z" style="fill:rgb(74,121,242);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-6.4425,8.3975)">
+        <path d="M122.533,169.334C118.254,162.823 122.924,154.165 130.715,154.165L170.451,154.165C173.747,154.165 176.822,155.824 178.633,158.578L259.41,281.475C260.991,283.88 264.517,283.879 266.096,281.474L299.123,231.173L299.163,231.112L319.035,200.847C320.969,197.902 324.094,196.43 327.22,196.43C330.345,196.43 333.471,197.902 335.404,200.847L355.276,231.112L355.316,231.173L417.28,325.545C421.555,332.056 416.884,340.71 409.095,340.71L369.352,340.71C366.054,340.71 362.978,339.05 361.168,336.293L330.563,289.682C328.984,287.276 325.456,287.276 323.876,289.682L293.272,336.293C291.461,339.05 288.385,340.71 285.087,340.71L283.497,340.71C283.15,340.71 282.806,340.759 282.467,340.83C281.81,340.967 281.122,341.04 280.408,341.04L240.673,341.04C237.376,341.04 234.301,339.381 232.491,336.627L201.321,289.204C199.74,286.799 196.214,286.8 194.635,289.206L163.718,336.293C161.907,339.05 158.831,340.71 155.533,340.71L115.79,340.71C108.001,340.71 103.33,332.056 107.605,325.545L164.933,238.234C165.809,236.901 165.808,235.174 164.932,233.841L122.533,169.334Z" style="fill:white;"/>
+    </g>
+</svg>

examples/books/Main.hs

@@ -190,7 +190,7 @@ main = do
   where
     config = [
       appWindowTitle "Book search",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme customDarkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf",

examples/generative/Main.hs

@@ -112,7 +112,7 @@ main = do
     model = GenerativeModel CirclesGrid False def def
     config = [
       appWindowTitle "Generative",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Remix" "./assets/fonts/remixicon.ttf",
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",

examples/opengl/Main.hs

@@ -94,7 +94,7 @@ main = do
   where
     config = [
       appWindowTitle "OpenGL",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appInitEvent AppInit

examples/ticker/Main.hs

@@ -243,7 +243,7 @@ main = do
   where
     config = [
       appWindowTitle "Ticker",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme customDarkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Remix" "./assets/fonts/remixicon.ttf",

examples/todo/Main.hs

@@ -245,7 +245,7 @@ main = do
   where
     config = [
       appWindowTitle "Todo list",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme customDarkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf",

examples/tutorial/Tutorial01_Basics.hs

@@ -62,7 +62,7 @@ main01 = do
   where
     config = [
       appWindowTitle "Tutorial 01 - Basics",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appInitEvent AppInit

examples/tutorial/Tutorial02_Styling.hs

@@ -106,7 +106,7 @@ main02 = do
   where
     config = [
       appWindowTitle "Tutorial 02 - Styling",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf",

examples/tutorial/Tutorial03_LifeCycle.hs

@@ -102,7 +102,7 @@ main03 = do
   where
     config = [
       appWindowTitle "Tutorial 03 - Merging",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appInitEvent AppInit

examples/tutorial/Tutorial04_Tasks.hs

@@ -87,7 +87,7 @@ main04 = do
   where
     config = [
       appWindowTitle "Tutorial 04 - Tasks",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf"

examples/tutorial/Tutorial05_Producers.hs

@@ -80,7 +80,7 @@ main05 = do
   where
     config = [
       appWindowTitle "Tutorial 05 - Producers",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf",

examples/tutorial/Tutorial06_Composite.hs

@@ -150,7 +150,7 @@ main06 = do
   where
     config = [
       appWindowTitle "Tutorial 06 - Composite",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appInitEvent AppInit

examples/tutorial/Tutorial07_CustomWidget.hs

@@ -168,7 +168,7 @@ main07 = do
   where
     config = [
       appWindowTitle "Tutorial 07 - Custom Widget",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf"
       ]

examples/tutorial/Tutorial08_Themes.hs

@@ -115,7 +115,7 @@ main08 = do
   where
     config = [
       appWindowTitle "Tutorial 08 - Themes",
-      appWindowIcon "./assets/images/icon.bmp",
+      appWindowIcon "./assets/images/icon.png",
       appTheme darkTheme,
       appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
       appInitEvent AppInit

src/Monomer/Main/Platform.hs

@@ -28,12 +28,15 @@ import Control.Monad.Extra (whenJust)
 import Control.Monad.State
 import Data.Maybe
 import Data.Text (Text)
+import Data.Word
 import Foreign (alloca, peek)
 import Foreign.C (peekCString, withCString)
 import Foreign.C.Types
 import SDL (($=))
 
+import qualified Codec.Picture as P
 import qualified Data.Text as T
+import qualified Data.Vector.Storable as V
 import qualified Foreign.C.String as STR
 import qualified SDL
 import qualified SDL.Input.Mouse as Mouse
@@ -149,7 +152,7 @@ setWindowIcon :: SDL.Window -> AppConfig e -> IO ()
 setWindowIcon (SIT.Window winPtr) config =
   forM_ (_apcWindowIcon config) $ \iconPath ->
     flip catchAny handleException $ do
-      iconSurface <- SVR.loadBMP (T.unpack iconPath)
+      iconSurface <- loadImgToSurface (T.unpack iconPath)
       let SVR.Surface iconSurfacePtr _ = iconSurface
       finally
         -- Note: this can use the high-level setWindowIcon once it is available (https://github.com/haskell-game/sdl2/pull/243)
@@ -251,3 +254,18 @@ setDisableCompositorHint disable = void $
       Raw.setHint cHintNameStr cDisableStr
   where
     disableStr = if disable then "1" else "0"
+
+readImageRGBA8 :: FilePath -> IO (P.Image P.PixelRGBA8)
+readImageRGBA8 path = P.readImage path
+  >>= either fail (return . P.convertRGBA8)
+
+loadImgToSurface :: FilePath -> IO SDL.Surface
+loadImgToSurface path = do
+  rgba8 <- readImageRGBA8 path
+  imgData <- V.thaw (P.imageData rgba8)
+
+  let width = fromIntegral $ P.imageWidth rgba8
+      height = fromIntegral $ P.imageHeight rgba8
+      imgSize = SDL.V2 width height
+
+  SDL.createRGBSurfaceFrom imgData imgSize (4 * width) SDL.ABGR8888