Devlog 27

Almost ready to publish

This devlog I have managed to fix almost all of the bugs I know of, as well as implement a load of quality of life features

• Finally fixed outline width not displaying, because specific Element did not allow for outlines, landed on a fix of displaying an element which does allow outlines, behind the text. Visually it looks identical to how it would look with one element.

• resizing continue beyond the possible, for example dragging the top right dot, past the top left one, which should not be allowed. Decided to fix it by clamping the values. Was quite painful altering the ~300 line function.

• Fixed problem with text leaving the possible input box if the used typed too much, now the box automatically expands by checking the needed height to display all the lines.

• Added a error indicator incase of some unforseen API issue (Hopefully will not appear)

• Image API uses a query to get the image, a problem comes when the query is empty, causing a error, instead I decided to default the query to the cosmos to stay on the theme of stars dancing

Tried to upload a video, but it took an hour just to fail, so instead here is this guy

Devlog 26

Mobile styling finally looks good!!!!!!

I like the new design way better + the fact that it scales well with all screen sizes, while the last one had more edge cases where it breaks.

The website feels way more polished on mobile

Credit slide redesign

Before the credit slide system used a variable of used artists, which worked fine, but needed a lot of functions, for example when removing a image or deleting a slide, to remove the images artists. A bit hard to keep up with it all, and harder to change long term. Decided to redesign it to check every slide, for every image, and then from each images url get the artist.

What is left?

After these 150 hours of making this one project (I thought it would take only 50 ) I only have a small list of stuff I have to do.

• Fix text outline sometimes not appearing
• Searching for empty images breaks the site
• Add a error notifier in case of image searching failing
• Publish the site
• Write a read me
• Give the site to my friends for testing

Devlog 25

I hate bugs

Programming wise and in real life. The past project time has gone into a big list of bug fixes, feature changes, and more styling.

styling

• updated delete slide confirm pop up
• updated choose slide prefab page
• updated save presentation pop up

Small addition to item aligning

I realised that aligning items to the border could be useful, added it, and my first thought: “Woah this was so needed”. Way easier to get your images or text into the corners.

Bug fixes

• Fixed items not aligning with eachoter on the y asis
• Fixed new variable changes getting overrided sometimes
• Fixed bugs with background sometimes not being able to display images

Devlog 24

New image and text variable editing side bar designs

Added the new color pallete to them, as well as cleaned some components up a bit like sliders. As well as fixed some bugs, for example aspect ratio restoring not working, deleting photos not working, some values saving two times

bug hunting continues

• Fixed a bug of the background color for slides not changing when switching slides, so for example making one slide blue, then choosing a new one, that one would also be blue
• Found a bug with horizontal alignment with other objects sometimes not working, will have to fix that
• Fixed bug that allowed bypassing maximal values for outline width and layer

Devlog 23

Huge visual changes 🦆

The previous design was a bit bland and a bit too bright for my eyes. so obviously dark designs are the best.

After trying multiple different layouts and color schemes I have landed on the design seen in the images. Afterwards had to make it scale with *hopefully all computer types (Mobile coming soon)

Font size works a bit wonky cause it has to scale with the presentation it is displayed on, fixed it by scaling the text based on the presentation slide size.

Also changed main presentation system for bigger screen to allow up to 1920x1080 size (before was 800x450 which was small on bigger screens)

Extra changes

• Exporting changes -> fixed exported slides not having accurate font sizes
• Fixed font size not saving when chaged
• Had to change text to allow breaks in the text, but it broke text outlines
• Fixed bug with images sometimes not loading

Like I have most liekely said before, I was not expecting this project to take this long, but now looking back, all the needed features togheter are quite a lot. With this new improved design I am sure that it is the final one and feel like I am getting close to being finished

Devlog 22

Credit slide

From what I have read, the API I use does not force image photographers to be credited. But I think they still deserve the credit. So I made a credit slide generator.

To make it I had to add a system to save and remove photographer each time a image gets added/changed

Then when generating the slide, the saved photographers get instantly placed on the slide.

Devlog 21

Annihilating bugs!!!!! 🐛

The website has had some very annoying bugs, that had been in the website for multiple days. This devlog I have finally destroyed them.

These bugs include:

• The color saving system was saving a value to undo/redo every frame, making one color undo require pressing ctrl + z 100 times
• Being able to unselected selected slides, when it should not be possible
• selecting already selected buttons
• buttons showing up 2x for some reason

Mainly I am proud of the color saving multiple times, cause that is one of the most fun variable to change for text. Issue was with the react component not containing any event for closing the color wheele, so I ended up coming up with my own fix, by checking to see if the color was changed when unselecting the object and then saving it if the color was changed.

Mobile functionality

To my current knowledge, I have finished implementing all buttons/features, except hold tapping to duplicate slides, into the functionality. Moving slide objects, deleting slides, moving slides, all is possible on mobile now

Devlog 20

website adjustments for mobile

I want the website to be available on mobile, so continuing on my recent mobile implementations, there are some more new ones.

• Prefab amounts scaled for screen size -> for example instead of displaying a 2x2 grid, like on the computer, to adjust for increased height for vertical phone use, instead the site displays a 1x3 grid

• font sizes adjusted for mobile devices -> added a aspect ration variable, that gets calculated when loading the site using the screen size

• small css styling changes

Devlog 19

CSS styling is starting to haunt me 👻

A presentation creation site is possibly one of the hardest thing to style for mobile. -> I have started slowly, while already continuing to make a main site style, also start creating mobile styling, just so the site is available more comfortably.

Hardest thing is keeping the presentation aspect ratio, all while having it visible, which has proved quite the challenge on some phone aspect ratios.

New slide prefabs

Currently my idea is to have 4 slide types, one optional slide -> credit slide (for all the photos)

The 4 slide types include

• intro slides
• info slides
• image slides
• outro slides

Now all of them need slide prefabs, to use, so I have also began making those, starting with the intro slides.

Devlog 18

A bit of a bigger devlog

site styling

I am trying out color paletes, and different positions for componets and landed on this idea of having the variable editor tab be on the right of the presentation, to save vertical space.
Will this be how it is in the end? Probably, just with different colors/sizes. I am a fan of the position and think it helps keep more space verticaly for other components.

Presentation exporting form

I did not like how the presentation name text input looked at the top of the screen, so instead I decided to move it to a custom form when exporting the presentation to your files, to then input the presentations name. Looks a bit cleaner, less clutter

Loading bar

When getting a new image or exporting the presentation, sometimes a problem of wait times appears. For presentations, when exporting slides with images, they take waaaay longer to download, so I obviously needed a loading screen. And now it does not feel slow or confusing when exporting or loading new images. The main part is definetly the user getting feedback that the button process was successfull and everything is great.

+ some small changes to

• Presentation exporting
• Some number input styling/text saving
• Icon button changes 📷

Devlog 17

Presentation saving to files!!!

With the functionality of being able to now save created presentations to files., I can say that the website is functional. The saving happens to a powerpoint file, so after saving it is easy to edit in a bunch of ways.

It feels great being able to actually play around and make presentations on something I made myself :D

Sadly, I had to remove corner rounding for images, because there is not a option for rounded corners through my way of saving all of the presentation slides.

picture outlines

Also caused a bit of an issue, there is also no option for adding pictures to slides with an outline, but for that I have built a work around, where the image is a object in the background.

Now, even with this awesome new feature I am quite far from being done, mainly with styling and adding phone support, so that the website is accesible and comfortable on all devices

Devlog 16

Editing tab changes

Failed to find any text alignment icons that I liked currently, so I shall leave that for later.

I think the sliders and color scheme definetly still need work, but I wanted to start working on some more important/new features

Image outlines

Made the image outline system go to all sides, instead of making the picture more right and down. (goofy bug)

Found out image generation was broken

Took a few hours to fix it and then also connect it to data saving.

Devlog 15

Too many bugs that I had not noticed

The worst kind of coding bugs I would say are small tiny ones, well that is what I am now thinking, after having to slowly go through line by line trying to slowly fix a bunch of small bugs.

Most important of the bugs fixed:

• changing the position of selected object sometimes updated every saved previous position of the selected object
• accidentally forgetting one digit in a line of code .-.
• Changing text color or width color, made the save system save the new color each frame ->

Which now I have to create a new way to save the new chosen color, only when I believe the player would have completed their pick, which is a interesting user design to think about. What is realy the best time.

Also started changing the editing tab -> Planning on adding icons, pretty buttons

Devlog 14

More values to ctrl z and ctrl y

I decided to make more presentation changes save, so I had to rewrite some code to allow for saving even more variables.

The system now also works a bit more intuitively

Variable rewriting

While programming I continue to realise with how big this project is starting to get, I did waaay too little planing out on how to keep it easy to add new features.

That is why I took a few hours, to rewrite variable access to some scripts, as well as functions, to make it so I can easily get the needed variables in any script.

This should allow me to make new features way faster

extra changes

some of the more prominent ones:

• fixed saving changes sometimes saving wrong
• fixed some overlapping issues

Devlog 13

Slide duplicating

To easily keep designs the same between multiple slides it is important to be able to duplicate slides, I decided to keep this feature under a left click,

• left click the slide you want to duplicate instead of the regular options like copying and pasting that pop up, a custom selection box opens up, where you can either delete or duplicate the slide.

ctrl c, ctrl v

Slowly started working on copy and pasting functionality, works, but I want to polish it more

more code rewriting

Continuing my previous code cleaning, I have made more chages, to just shorten scripts, make them more readable, as well as simpler, because like a great person once said good code is simple code

Devlog 12

Object alignment based on other objects

Presentations where text is not ordered perfectly can be infuriating, so I knew I hade to make it so you have automatic item alignment based on other item positions.

Currently the it checks all 3 possible alignments on all 3 possible sides, which might end up being a bit too much when there are mutliple objects.

Also made the system a bit cleaner, easy to add/change features -> a continuation of my code cleaning

Half the time while making this feature it kept breaking and tranporting my object to like 10000 pixels away, but that was a funny bug

Devlog 11

Code restructuring

As the project grown in size I have been needing to take a small step back and cleanup a bunch of code.

Bug fixes

The app has a lot of bugs and small issues you would not like in a presentation creator.

I have slowly been working on fixing them, for example selecting slides, the text objects, block the select button.

new features

• Added new hover indicators
• new slide types ->

When adding a new slide I want the player to have a choice from multiple types, that then give prefabs.

Imagine wanting to have a big picture in the slide, well then you chose a new image slide prefab, that should allow for people to create slides as fast as possible.

Devlog 10

New text and image object creation

Just like hinted in the last devlog

Now to prevent objects from stacking making multiple objects, distances them from each other, and then if it can no longer distance it down, that is when there are a lot of way to go about placing it, I decided to randomize it

while making the feature had a bug in the start with new created text overriding already exsisting text

Now it should not happen anymore

Key binds!!!

THE MOST USEFULL KEYBIND IN ANY PROGRAM ctrl+z and crtl+y

I have started implementing keybind functionality, currently ctrl+z and ctrl+y already work, but they need a bit of polish

also did a bunch of bug fixes and small tweaks

Prestyly is slowly crawling to the finish line, hopefully I will be able to finish it in the next 50 hours put into it

And it has to be polished

Devlog 9!!! (so kind of the magical 10th)

Duplicating and deleting objects

Now I think it is self explanatory that it kind of sucks not being able to delete a image, if you do not want to use it, so the presentation creator needed a delete button.

Simply press on the object and then press delete to delete it

These functions were quite easy to add, but the code is slowly becoming very big to keep up, and sending functions between scripts is also.

Started making new text object and new image creating

not done fully yet, but a high chance it will be included in the next devlog

Plans

Every good presentation has some decorations

Right now the only images I get are all with a background, so I am gonna have to think of a way to implement presentation decorations, if you have any ideas, would gradly hear it in the comments

Devlog 8

The magical shift key o-o

Personally when I make presentation for photos I use the shift key a lot, well mainly just so they do not get stretched like cheese

So that is what I have been mainly working on, All of the component scripts slowly keep getting bigger and bigger and I have to then divide them even more just so it is readable.

It is very fun working on these small features that always prove to be teoretically easy, but need a bit of rewriting code to implement

This is a project where a lot can be learned.

Small fixes

• Fixed some alignment issues
• made slide bar display images
• a bunch of small bug fixes

new bugs:

• text objects sometimes do not update when changing one of their text settings.
• some buttons sometimes block other buttons

Every 3 fixed bugs leads to a new bug, hard to sometimes keep track of all the little possibilities.

Devlog 7

An import feature is being able to get objects into the correct position, one of which being the center.

new

I added a slide moving display in the slide list, and when moving text/photos if close enough aligns to the x asis or y asis center.

It was interesting to code, another very specific app detail done. Later will have to update this feature into a aligning based on other projcts.

Devlog 6

You can now move slides :O

I did not think this would be that hard of a feature, but turns out it is not that easy of a feature.

And I still have to add a display that showcases where this slide will now go after letting go of your mouse.

The idea is When I start moving the slide I calculate every slides global x position in the slide tab, then when the mouse moves I check the mouses global x position to then compare with the slides positions to see where it would go.

Basically a bunch of position calculations

slidePositions.current.map((pos, ind) => {      
if (newXPos < pos && found != true) {        
found = true;        
console.log(newXPos, pos);        
if (ind > startingSlidePos.current) {    
updateNewSlidePos(ind - 1);        
} else {          
updateNewSlidePos(ind);        
}}});

Also added image and text scaling using only one axis.

Thought overview

I am very excited at how the website is starting to look. And that you are already able to make real presentation slides, that look good in as little as a minute.

Every single devlog I think of more and more small quality of life feature that most presentation creator tools contain, and this can quickly become a daunting project.

Devlog 5

I possibly made my dumbest programming mistake ever!

My image API gets 15 images each time, now to not have to use the API every time, I deficed that if the user enters the same prompt, the 15 images they already got would be used and just shuffled through. Now to shuffle the array I used

for (let i = 0; i < arr.length * 3; i++) {     
const varPos1 = Math.floor(Math.random() * arr.length);
const varPos2 = Math.floor(Math.random() * arr.length);
const val1 = arr[varPos1];      
arr[varPos1] = arr[varPos2];      
arr[varPos2] = arr[VarPos1];    
}    
console.log(arr);    
return arr;  }

It does not take an expert to find the problem,

So there I sat thinking why when increasing the shown photo ID i kept getting the same image

But now I should not run out of API tokens

devlog 4

Text can now be fancy. Mainly worked on a bar for you to edit selected text, change text color, outline. Was not too bad, but definetly need icons for Bold, italic and underline text.

Thoughts

I am not sure where to put this tab, below of above the main presentation display. well also does it matter, most likely will put it at the top, since that seems most popular, but otherwise, will have to test.

I think it is easy to understand I like ducks from the presentation

one slide made in ~2 minutes, already a success.

movement go brrrr

The website now allows you to move objects around, your text is not stuck in one position, also started working on an editing tab, for image outlines, text color, text width.

problems

The text moving is nice, but I can’t drag select text cause of it, so I have to think of a way to fix it.

Had to write two system for how to calculate mouse movement because the first system limited me on future additions, also broke with multiple objects, which made the object wiggle wiggle between the top left corner and actual position.

User interface is gonna be quite the pain on this project

Devlog 2

For my presentation creator website to make it faster to create stuff I wish to have it cause as little decision fatigue as possible. There will still be options to choose from, but they will not be thrown at you all instantly

Progress

Presentation creating has way more edge cases than I first thought. Just the action of when resizing, each dot works a bit differently, as well as what if you move the dot to be on a dot side it should not be. Have I already implemented this, not at all, not yet, Plan is to first work on full functionality then get all the edge cases.

Now the website also contains

• text and image resizing
• text editing
• slide saving
• slides can now contain images

if you have any cool ideas for features, freely drop it in the comments

Devlog 1

Slowly but surely starting to work like a presentation editor. Now comes the hard part of thinking where/how to display everything, how to show what is customizable, how to tell the user what they are updating. Basicaly user experience.

New

• Slide creating
• Slide displaying
• Slide changing
• A bit of slide editing

Problems

I have already ran into a bit of problems/weird bugs having to think about every work around. I know there will be many more bugs with all the nuances possible, but motivation is at an all time high.

Devlog 0

I always have had a problem with presentation designs, it takes so long just to find one picture that actually works. So, I have decided to fix this problem by making a simpler way to create presentations/presentation styles.

The idea

A simple web page where you create your presentation style is made with you mostly just clicking, no more looking for pictures or design to edit. Choose a good looking design for each slide, get photos instatly added to your slide with just one word input, no uplading files. Then create as many slides as you wish, then being able to export the presentation to a powerpoint file to change specific details in a different website or application. The idea is to make presentation designs creatable in a short lunch break before you have to present it.

progress:

Mainly I have gotten a image fetching API working for text inputs as well as connected the front end and backend, to keep enviornment variables protected in the backend and later possibly add users and databases