Sara/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-09-18 20:46:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added an image to the example

Browse source
This commit is contained in:
Matthew Jennings 2025-05-11 16:44:13 +03:00
parent 0249d0034b
commit c936efaecb
3 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
examples/playdate-project-example/Source/star.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

36
examples/playdate-project-example/clay-video-demo-playdate.c
View file

@ -6,7 +6,8 @@
// //
// Note: The playdate console also does not support dynamic font sizes - fonts must be // Note: The playdate console also does not support dynamic font sizes - fonts must be
// created at a specific size with the pdc tool - so any font size set in the clay layout // created at a specific size with the pdc tool - so any font size set in the clay layout
// will have noe ffect. // will have no effect.
#include "pd_api.h"
#include "../../clay.h" #include "../../clay.h"
#include <stdlib.h> #include <stdlib.h>
@ -32,6 +33,7 @@ void RenderHeaderButton(Clay_String text) {
typedef struct { typedef struct {
Clay_String title; Clay_String title;
Clay_String contents; Clay_String contents;
LCDBitmap* image;
} Document; } Document;
typedef struct { typedef struct {
@ -44,9 +46,10 @@ Document documentsRaw[MAX_DOCUMENTS];
DocumentArray documents = { .length = MAX_DOCUMENTS, .documents = documentsRaw }; DocumentArray documents = { .length = MAX_DOCUMENTS, .documents = documentsRaw };
void ClayVideoDemo_Initialize(void) { void ClayVideoDemoPlaydate_Initialize(PlaydateAPI* pd) {
documents.documents[0] = (Document){ documents.documents[0] = (Document){
.title = CLAY_STRING("Squirrels"), .title = CLAY_STRING("Squirrels"),
.image = pd->graphics->loadBitmap("star.png", NULL),
.contents = CLAY_STRING( .contents = CLAY_STRING(
"The Secret Life of Squirrels: Nature's Clever Acrobats\n" "The Secret Life of Squirrels: Nature's Clever Acrobats\n"
"Squirrels are often overlooked creatures, dismissed as mere park " "Squirrels are often overlooked creatures, dismissed as mere park "
@ -128,6 +131,7 @@ void ClayVideoDemo_Initialize(void) {
}; };
documents.documents[1] = (Document){ documents.documents[1] = (Document){
.title = CLAY_STRING("Lorem Ipsum"), .title = CLAY_STRING("Lorem Ipsum"),
.image = pd->graphics->loadBitmap("star.png", NULL),
.contents = CLAY_STRING( .contents = CLAY_STRING(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
"eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim " "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim "
@ -140,6 +144,7 @@ void ClayVideoDemo_Initialize(void) {
}; };
documents.documents[2] = (Document){ documents.documents[2] = (Document){
.title = CLAY_STRING("Vacuum Instructions"), .title = CLAY_STRING("Vacuum Instructions"),
.image = pd->graphics->loadBitmap("star.png", NULL),
.contents = CLAY_STRING( .contents = CLAY_STRING(
"Chapter 3: Getting Started - Unpacking and Setup\n" "Chapter 3: Getting Started - Unpacking and Setup\n"
"\n" "\n"
@ -192,7 +197,7 @@ void ClayVideoDemo_Initialize(void) {
}; };
} }
Clay_RenderCommandArray ClayVideoDemo_CreateLayout(int selectedDocumentIndex) { Clay_RenderCommandArray ClayVideoDemoPlaydate_CreateLayout(int selectedDocumentIndex) {
Clay_BeginLayout(); Clay_BeginLayout();
@ -324,10 +329,27 @@ Clay_RenderCommandArray ClayVideoDemo_CreateLayout(int selectedDocumentIndex) {
} }
}) { }) {
Document selectedDocument = documents.documents[selectedDocumentIndex]; Document selectedDocument = documents.documents[selectedDocumentIndex];
CLAY_TEXT( CLAY({
selectedDocument.title, .layout = {
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK }) .layoutDirection = CLAY_LEFT_TO_RIGHT,
); .childGap = 4,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_BOTTOM }
}
}) {
CLAY_TEXT(
selectedDocument.title,
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK })
);
CLAY({
.layout = {
.sizing = {
.width = CLAY_SIZING_FIXED(32),
.height = CLAY_SIZING_FIXED(30)
}
},
.image = { .imageData = selectedDocument.image, .sourceDimensions = { 32, 30 } }
}) {}
}
CLAY_TEXT( CLAY_TEXT(
selectedDocument.contents, selectedDocument.contents,
CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK }) CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY, .textColor = COLOR_BLACK })

4
examples/playdate-project-example/main.c
View file

@ -69,7 +69,7 @@ int eventHandler(PlaydateAPI* pd, PDSystemEvent event, uint32_t eventArg) {
(Clay_ErrorHandler){HandleClayErrors} (Clay_ErrorHandler){HandleClayErrors}
); );
Clay_SetMeasureTextFunction(PlayDate_MeasureText, &textUserData); Clay_SetMeasureTextFunction(PlayDate_MeasureText, &textUserData);
ClayVideoDemo_Initialize(); ClayVideoDemoPlaydate_Initialize(pd);
} }
return 0; return 0;
@ -108,7 +108,7 @@ static int update(void *userdata) {
pd->system->getElapsedTime() pd->system->getElapsedTime()
); );
Clay_RenderCommandArray renderCommands = ClayVideoDemo_CreateLayout(selectedDocumentIndex); Clay_RenderCommandArray renderCommands = ClayVideoDemoPlaydate_CreateLayout(selectedDocumentIndex);
Clay_Playdate_Render(pd, renderCommands, textUserData.font); Clay_Playdate_Render(pd, renderCommands, textUserData.font);
return 1; return 1;