WIP Layout Builder

[liquid8d]

I'm still here!

So awhile back, I teased a layout builder that I started working on. It took awhile but it's finally starting to take shape. Here's a quick preview:

https://youtu.be/33RyalIlNpk

This is pretty rough right now, but basic design is working for text and images and it won't take much to export the code (you can see the code builder at the end).. of course it will take quite a bit more to add other objects, sounds, event triggers and animations.. but I'm pretty happy with where it's going. Ideally, it will push you to design in multiple aspects - showing/hiding/adjusting the objects you add for each respective setup. I'm also hoping to do simplify surfaces to essentially make them different layouts and show and hide them on different events. Additional objects could be added fairly easily as you create code to create the html element equivalent, and tell it the code to export out the object.

If you have comments, suggestions, thoughts.. let me know!


UPDATE:

The editor is live and a work in progress. You can try it right now at:
http://goodiesfor.me/attractmode/builder

[jedione]

thank god
 you are a huge asset to this site.....bro

cant wait to try it!...........peace

[liquid8d]

OK, this is very preliminary, but give it a shot! Basically just text, images, artwork and lists right now:

http://goodiesfor.me/attractmode/builder/



You'll notice a lot of bugs, not-implemented things, etc... but let me know what you think

[mahuti]

Really cool. Not much to say yet. I looked at the code view... if anything else, this will be a handy tool for showing off some underutilized methods, properties and best practices. 

[bionictoothpick]

This is more fun than looking at the manual!

It will definitely increase my familiarity. Maybe I'll even redo my magazine theme.

Thank you. 

[liquid8d]

Hey all,

I did an update to the online version, check it out!

http://goodiesfor.me/attractmode/builder/

This update adds:
 * resizable menu
 * new move/resizing/snap library interactjs which means..
 * gridlines with snapping
 * a builtin pixel.png in media for background rectangles
 * image coloring
 * some additional data/magic token info
 * cosmetic/ui updates and bug fixes

The biggest issues you'll notice right now is that moving/resizing doesn't work properly when you change zoom and the resize grab area is a little much which makes it hard to drag/resize smaller objects..

Let me know what you think!

[verion]

This is really impressive!

---

But I've selected 16/9 layout and changed resolution to 1920x1080
And it seems that an object (image) with 1024px width is 100% screen width - it looks like 1920x1080 setting is not applied
Am I missing something? An apply button? Or reload?

View code shows proper:
fe.layout.width = 1920
fe.layout.height = 1080

but image that is 1024x100px is 100% layout width
and if I place another image with 1920px width it looks like cut @1024px

[liquid8d]

yeah right now I am using a lower 1024x576 for 16x9. I'll work on what aspect or specific resolutions are available as I get further along

Right now for testing, the layout automatically is setting 640x480 i believe.. but I'm getting there

[liquid8d]

Got some more done.. now supporting additional file types, which adds fonts!



By the way.. I've now added the code to github. Might be kinda pointless to start submitting issues just yet since I have so much to do, but if you notice major things for the generic stuff that is implemented now or just want to check out the code, feel free:

Github:
https://github.com/liquid8d/am-builder

Online Version:
http://goodiesfor.me/attractmode/builder/

[liquid8d]

more fixes, including sliders for colors, improved grid, sidebar for multiple menus:

[liquid8d]

I've done a bunch of updates:
 - video support! (just turn on video_playing for an artwork object)
 - style and video flags updated and can now be multiple values
 - some listbox style fixes
 - the 'Data' menu is now 'Navigate' (some options are moving over to the Dev tab)

clear/save/resume layout
- you can now save progress and resume it in a later session. This saves your fonts and media as well
- this could be buggy

Still just text, images, artwork, listboxes for now... gonna start clearing any issues with those and I can start looking at other things.

Go on, you know you wanna try it:
http://goodiesfor.me/attractmode/builder/

[liquid8d]

OK, few more fixes:
 - media and fonts are now moved to a Files tab on the left side
 - you can now rename your objects - double-click to enter a new name
 - fix where colors on images weren't saving correctly
 - fixes for save/resume with artwork

Now I need to start focusing on fixing the drag/resize issues when zoomed in/out, using touch on mobile devices and loading the layout with proper aspects based on users resolution or preference.

If you want to start submitting issues or feature requests, feel free - i need to start getting familiar with using and resolving github issues

[liquid8d]

More work! I FINALLY have most of the drag/resize quirks worked out, so it should be pretty usable now!

Also, subimg works pretty good now..



I even added some tools in the sidebar to help



Clone is there - just select an image and click the clone button, but it may or may not work properly right now.

[liquid8d]

So I've now added saving the builder file into the generated zip, and you can now load a zipped layout built by AMBuilder by dragging it onto the layout area

If you want to give this a shot, download this layout zip and drag it right onto the builder layout area.

Let me know if you notice any issues in doing this!

[bundangdon]

Amazing work! Anything that can make layout/theme building easier for the masses is always a good thing in my opinion Keep up the good work!