Release 2.0.0 – Import PSD, multiple upload, multiple delete, better HTML export

In this release there is basic support of importing PSD. Also, there’s upload selected or all attachments, delete of selected library items, nudge when constraints works, and more.

There is list view and grid view in the library. Added import of GIF images. Upload of GIF is sort of flakey. Items are selected when they are imported.

Export of HTML should be much more accurate. Internal HTML preview is cleaner and sized to the edges of the window. This makes it easier to see the full document.

Release Notes:
– added delete multiple attachments
– prevented autosave from uploading attachments (manual for now)
– fixed assets removed locally
– add import psd
– combined drop item, paste item and import item
– added support for gif on drop and select
– fixed placement of HTML document preview
– fixed bug when no tabs are open
– added save all attachments
– fixed upload of bitmap data to png images
– fixed bug in error messages
– looping through events reversed on undo
– added open document in internal web run button
– moved byte array, caption, slug safe name, file safe name, url and upload to attachment data
– fixed nudge not working when using constraints
– now selecting new items that are pasted
– fixed image not selected when pasting before image loads
– added default html and body styles with height, margin and padding
– added line height style to html body
– fixed bug in html video player where source attribute was set incorrectly
– set video player to disable auto play when source is set
– added className to component description
– added tooltip to console log item renderer
– auto selecting layer before or after the layer that is deleted
– prevent design view from being selected when no projects are open
– added import PSD menu item
– added different background
– rearranged layout, constraints and properties inspectors
– prevent property changes from affecting image properties unless properties are relevant
– added refresh method to search collection to enable filter to run before any input
– added word wrap button to all views to code inspector
– fixed document inspector not updating on document save
– prevent target change with same target from updating dynamic component inspector again
– fixed library items not showing for selected document
– ensure selected library item is selected and visible after refresh
– added grid view to library
– fixed error when small library images are scaled to less than zero
– added selection around library item
– added font styles to Border Container properties

Release 1.6.2 – Added convert component to image and image snapshot on export

A couple of important updates in this one. Added an option to convert components into images when exporting to HTML and added the option to create a snapshot of a component container and set it as the background of the HTML element. This is a continuation of the HTML Inspector from the last update, letting the user add HTML styles You can use this to compare the HTML output with the actual HTML elements.

User Styles

Unfortunately, the background snapshot is not rendering in the browser although the convert to image feature is. The code is the same but one is set in CSS while the other is in an img src tag. It might be a browser issue. You can view source and see the background CSS data uri.

Also, in this update is a fix for the styles not updating when changed in the properties inspector. If you clicked the clear button on a font the old was still shown in the UI.

There is also a new word wrap button in the code editor.

Also, the code editor is updating on HTML property changes.

Release notes:
– fixed styles not updating on property change
– opening browser window with document name
– added create snapshot to background in HTML export (doesn’t work)
– added convert component to image in HTML export
– added background to main view
– fixed potential memory leaks in inspector panels
– added smoothing quality to Image properties
– added word wrap to code editor in code inspector

Release 1.6.1 – Added user styles, better SVG output and login fixes

In this release the user styles are being added to the HTML output. This offers greater flexibility with mixing developer code with Radiate code. With user styles you can add your own CSS styles to the exported HTML elements. So if Radiate doesn’t get the export quite right you can modify it through this field.

The HTML user styles field can be found in the Properties Panel:
User Styles

And in the code editor:
Code editor with user styles

When you logged out and logged back in it would not show projects. If you restarted after you logged back in it would fix it but this build fixes that issue.

The zoom in and zoom out keyboard handlers and copy and paste working correctly makes a huge difference to me at least. It feels like a real workflow.

HTML output is some what accurate but it could be improved, especially in some cases. I’m working on a feature to embed a snapshot of a component into the background of an element so you can compare the HTML with what you see in the design view. The feature is shown in the HTML options view shown above but it’s not been implemented. This is mainly because it creates a bitmap data snapshot of the component and then encodes it to Base64 data uri. It did work at one point but it made the HTML export code hard to read in Radiate internal editor. There was a large encoded data section you would have to scroll through. So I’m hoping to come up with a better solution.

Also, I’ve added a exportChildDescriptors property. This is set to true by default but if set to false it would only show the MXML of the selected component, and not all child components. Doing this would make it much easier to enable round trip editing of the MXML.

Since I’m also adding HTML data to the MXML using a separate namespace, it would allow you to do additional things like easily add and modify the MXML component and see changes live in the design view, add and modify the CSS and HTML attributes during HTML export using html:style=”value” and html:property=”value” mappings. You can see MXML export is already storing HTML data now for HTML user defined styles. Notice the last attribute on the Application tag:

Screen Shot 2015-12-22 at 9.10.14 PM

Release Notes:
– fixed previous projects not getting loaded on re-login
– fixed home page saying it’s set when it’s null
– added zoom in and out keyboard listener when command + addition or minus key is pressed
– fixed graphic element not getting pasted on copy and paste operation
– added default namespaces on document save
– fixed export of mangled horizontal and vertical line export to SVG
– added user styles added to exported html elements
– fixed numerous bugs in MXML importer
– made register instructions clearer

Release 1.6.0 – Paste and Better HTML

This update can be summed up in much more support for paste of external data and drag and drop of external data. This includes paste of text, image data in the clipboard and image files.

Also in this version is a cleaner export of the HTML document. Before the HTML page was purely the markup and the styles below it. This was due to the page template not being included. Now that it is, the markup and styles are inside the HTML template. The styles are indented and inside of a style tag in the header of the page, the markup is indented and inside the body tag, the page has a title and the header section. Note: If you created pages with previous versions you may need to reset the HTML template. Go to Develop Perspective, switch to HTML output, toggle the Edit template and click the reset button and save the document.

Importing of MXML documents have been vastly improved. Now, all the values are cast to the type expected, preventing any errors from occurring. All properties and styles are extracted into their own array so IStyleClient objects will not contain styles that they do not support or in case of errors, properties that have been misspelled.

Not setting the component properties before adding to the document and combining the XML attributes into one step result in 10x reduced history length. Instead of 100 items there are now 10 in case you don’t math.

Also added is basic support of the GraphicElements Horizontal Line and Vertical Line. These are custom classes that have been extended from the Line Graphic Element. You can’t drag and drop them at this time but you can use the arrow keys or the constraints panel.

There is now a run tool bar that helps with your work flow. You can preview the image, the document or the home page from the top menu. Remember, if you don’t publish and save the document you won’t be able to view it online.

A new tutorial is being written for some of these new features. For now you can use the:

Starting From Scratch Part I
Creating the Layout Part II
Publishing to the web Part III
Getting Started Guide

Release notes:

  • added assets are now correctly linked to documents (although they should be linked to the projects)
  • when images are dragged or pasted from external source they are resized to fit within the document
  • paste now can accept text, image files, image file promises, or bitmap data from the clipboard
  • we now cast all the values during MXML import into the type that is expected (fixes some issues where styles were not applied during import)
  • if mxml during import has bad values in their attributes or child nodes we remove those and place them in an errors object with the error instance as the value
  • we now set the destination for paste as the selected item if it is a container or it’s parent or the application
  • we no longer set the default values when we create a component but we add them after its added to the document in updateComponentAfterAdd method
  • refactored the code to save example projects when you open them to a users own account
  • added hook to document save method to allow radiate class to export HTML code independently of the document
  • now saving full HTML source, styles, user styles, template and markup all in separate values on the server
  • refactored save all documents and save all projects since save all projects was not saving the document correctly
  • added a creation manager class that panels and inspectors can use to check what classes have been created in a crash or hang scenario. not fully implemented
  • added a run manager class to delegate run type operations
  • created clearProjectHomePage in ServicesManager
  • added method to add the component description to a document rather than set the descriptionDictionary
  • fixed bug where save was not happening if the document was empty
  • added basic support for GraphicElements in Selection class
  • added page title, generator, scripts, stylesheets and styles tag support
  • added dragging flag and drag incomplete event
  • now using span when exporting labels
  • fixed indentation of markup and styles
  • added support for horizontal and vertical line graphic elements and export as SVG
  • fixed icon in console log inspector
  • added cpu usage to frame rate inspector
  • set image preview popup to fit image in available space
  • added run tool bar to see changes easier
  • added a warning icon when document is scaled or graphic element is selected
  • added zoom in and zoom out buttons
  • fixed bug where search and filter of collections was not occurring until user typed values
  • added additional filters support for collections that need additional filtering than only a single field
  • added remove all logs button
  • pressing set home page toggles home page on the document
  • showing message on home change
  • refactored library inspector. many changes
  • fixed library preview not closing when space bar is pressed
  • filtering library to show selected document and selected project assets only
  • added image, document and project id to tooltip in item renderers
  • updated default HTML template with styles tags and headers tags

Release 1.5.1 Small fix

This update fixes a layout issues. When you export to HTML the layout constraints were not being exported. So top, right, bottom, and left did not work and your element was not positioned correctly. This update fixes that.

Release 1.5.0 – It works better

In this release there is better integration with WordPress and numerous other bugs fixed so you can go live. This means less logging in to your online website and doing more in Radiate.

The Vanilla theme is selected for all new blogs. When you create an account you are also creating a blog powered by WordPress. With Radiate and the Vanilla theme selected you can over write the default post design with your own. Every post that has a design uses that design with the Vanilla theme. If you are a new user you don’t have to login to the website to change your theme. Existing users will have to.

There is a new “Size Selection to Document” command. This compliments the “Size Document to Selection” command from the last release. This command allows you to select an element on the document and resize the selection to the document. For example, if you create a new document and then add an image, you can select that image, run this command and the image will be resized to the document.

From now on AutoSave is selected by default. When auto save is enabled your project is saved around once a minute. Whether you forget to save is no longer something to be concerned about. Auto save does it for you. You will see the last saved time in the lower right hand corner of the application.

Screen Shot 2015-11-19 at 6.09.14 AM

Radiate contains some great getting started examples. Unfortunately, in the last version these were not imported for new users. This has been fixed in this version. Check out the example projects. You’ll learn a lot about layout from them.

Screen Shot 2015-11-19 at 6.18.55 AM

You can now drag images onto the app window and they will automatically be added to the library and added to the document. This makes it easy to add external images into your designs.

Screen Shot 2015-11-19 at 6.15.08 AM

More components are exported into the HTML. Numeric Stepper, TextArea, Horizontal Slider, Vertical Slider, Rich Text, Video Player and Color Picker are all exported as HTML elements.

The HTML template code is now saved with the document whether it was modified or not. In the previous versions the HTML template was not saved unless it was changed. It is now saved and soon will be part of the HTML page. Currently only the body markup and corresponding CSS is sent when viewing your page.

Another thing you can do with the document HTML template is to over write the default CSS styles, add your own JavaScript, add your own HTML and so on. To edit the page HTML switch to develop or code view, select HTML output and selected the HTML template toggle button.

Screen Shot 2015-11-19 at 7.11.25 AM

There are new edit document in browser, view post, view home page and set home page buttons. The Edit Document button opens your web browser and takes you to the WordPress edit post admin page. From this page you can add edit the content of your document. Then, if you have a token, “{content}” somewhere in your page / design that token will be replaced by your post content when you view the page live.

Release Notes:

• AutoSave projects is enabled by default
• New blogs have vanilla theme by default
• add verticalAlign to label
• add font styles to border container
• fixed bug where examples were not imported for new users
• automatically save images added to the library
• automatically save on login
• added more components to HTML export
– numeric stepper
– textarea
– horizontal slider
– vertical slider
– rich text (paragraph)
– video player
– color picker
• removed border on some HTML components
• fixed width too small for HTML radio or checkbox. label was wrapping
• added colorpicker component
• added more styles support when exporting HTML
• save project on document delete to fix bug document not found
• save html template in document on save
* update window menu item on document change
• Added icon to save document alongside save project
• drag images onto the stage
• make pop up notes show up at the top
• add console log inspector to see notifications
• show note before launching unpublished document in browser
• fix numeric stepper disappearing
• fixed set home page not working
• added size selection to document command
• added edit document in browser button

Release 1.4.0 – Live site and WordPress Integration

In this release we have added numerous features so that any images you have composed or dreams you have weaved in your visual studio may eclipse the net and go live.

The Size document to Selection command allows you to select an element on the document and resize the document to that element. For example, if you create a new document and then add an image, you can select that image, run this command and the document will be resized to that image.

New buttons have been added so you can open your site, open your profile, open your dashboard, view an uploaded image, view your document, and edit your document content. A new button lets you set the home page for your site. This is the first page that will be viewable. To remove the home page go to commands and select “remove home page”.

Screen-Shot-2015-11-02-at-11.48.53-PM

Numerous UI improvements were added to the documents inspector. An rotated triangle indicates the document has been published. A round dot in the corner indicates the document is the home page.

documentsinspector

You can now use the shortcut key command + S to save your work. The native Edit menu has also been added back in so you can continue to use those keyboard shortcuts.

You can also copy and paste your selection from one document to the other.

WordPress integration

What this means is that you can now view each of your pages online, without uploading, without coding, without pressing any buttons. You just think about it and it happens! OK not that last part. When you signed up you are given a chance to create a website. You can visit that page in the browser and it will show any posts you’ve published. When you create a document in Radiate you are essentially creating a new post that is unpublished. Now though, if you publish it, you can view it in the browser. You can use tokens in your document and pull in values from your WordPress blog or post. You can edit your post and create content for it by clicking the edit document button (this button isn’t in 1.4 but will be in 1.4.1 – click the dashboard button and then show posts to edit).

I’ll explain this more in depth in an tutorial. The tutorial will show up in Radiate on the Radiate welcome screen and I’ll include a link here.

Release notes:

• added size document to selection command
• add copy selection into library command
• add formatted date token in wordpress
• add X and Y coordinates to selection tool inspector
• add link to users wordpress dashboard site
• add link to users wordpress profile site
• add link to users wordpress web site
• add open image in browser
• fix clicking locked layer when application is selected
• add show document published
• added cmd + s to save document
• add copy and paste to other document
• added original native edit menu back in
• fixed creating new project bug
• added better messages when not online
• can now set home page for your site

Milestone: WordPress site integration and update site

Today we hit a milestone in that we are now able to create both designs can show single pages and the home page or posts page. What I mean is that you can create a new project, create a document and specify an area for the loop. You can then publish that page and it will show your posts from WordPress! Then you can click the link to those posts. Create another design and publish it and when you click the link from the posts page your design page is loaded and the content is loaded with it.

Let’s just look at some examples. Here is the design:

theloopdesign

We then mark this page as the home page (posts page) in the documents inspector. Now when we “Visit Site” our site it loads up.

theloopdesignlive

In our design we enable this by using the keyword “theLoop” as the id:

thelooppropertyinspector

We are also using custom keywords that are replaced by the post values:

linktoken

Anyway, right now it’s a proof of concept. The token system will probably be replaced with a better design in time. In the mean time this should help get some dynamic pages possible.

This also means you don’t have to use the crappy FTP uploader that’s built into Radiate! Ok it’s not that bad it’s just not complete. With WP integration all you have to do is change themes to the new Vanilla theme, in Radiate set the document status to publish. A new button will be added that will let you mark a document as the posts / home page.

There are a few new buttons and links in the new version of Radiate that will make this much easier to test these new features. Check back in a few days for a new release.

Update: Version 1.4.0 has been released which contains the updates.

Release 1.3.0

In this release we have the following:

• Updated UI – some of the UI including the combobox and dropdown have new skins
• Publish documents – you can now set documents to be draft or published. Share the URL and view online
• WordPress (website) token replacements. You can use special tokens in your design and they will be replaced by your post title, post content, post date and so on.
• Scale transport – move the mouse left or right to increase or decrease the scale
• Copy selection to Library – drag an element on the document and drop it into the library and it will be rasterized. In other words a snapshot image of the selected item will be placed in to the library.
• Drag and drop images to the Library – you can select images from your desktop or file system and drop them onto the library and they will be imported
• Library image preview – click the space bar while an image is selected in the library and a preview window will be opened

The new document status dropdown lets you set the status of the document from draft to publish.

document status

When you publish a document it is made available online. Click the play button next to the status dropdown list and the page will open in the browser. You can share this URL with anyone. Note: you must set the document status to “publish” and then save the document for visitors to see it. You can also add users to your account and they can see it without you publishing the site. Just have them create an account at your site and they can see the documents you’ve shared with them.

WordPress token replacements allows you to easily show your web content in your single post documents. To use this feature, log into your account and set the theme to “Vanilla”. You can use the following tokens:

  • title
  • content
  • excerpt
  • date
  • date_gmt
  • author
  • id
  • guid
  • type
  • mime_type
  • comment_count

Now whenever you view a post (while logged in via the website or when document is set to publish) your web design will display instead of the typical WordPress page. Any of the available tokens you’ve written into your design will be replaced with your post content. For example, this design:

tokens

Turns into this page when you publish the post:
tokens live

The new library features include a better thumbnail view to clarify hard to see images.

library thumbnail

The Library preview also shows full sized images.
library image view

While in Image View you can press up or down keys and step through the images.

Release 1.2.0

This is probably the most stable, easy to use release to date. It also fixes a bug that prevented saving when clicking the save project button (the save document button worked as expected).

This adds locked layers in the layers panel. Now you can prevent specific layers from being selected.

Locked layer

There is a better library image background.

library background

It also introduces a new WordPress theme that shows the web page on the server. It is a proof of concept. I’ll be adding a button to view your page on the server.

It also adds 3 perspectives: code, design and develop. In design it hides the code panels and makes the design view much larger. In develop view it shows both design and code views. In code view it hides the design panels and expands the code panels and design view.

code perspective

There is also a new Revert menu item. If anything happens, which they do sometimes, you can revert to the design that was available when you opened the file.

Revert menu item

Finally, there is a new hand tool. This lets you move the design view around easily without needing to use the scrollbars.

hand tool

New in this release:

• fixed visibility not being applied on load
• fixed width & height not being saved
• added hide component when dragging
• added hide selection rectangle when dragging
• added drop shadow while dragging
• apply constraint when turned on in constraints panel
• added show html in wordpress theme
• created new wordpress theme
• showing selection label by default
• fixed bug in zoom combobox
• added locked layers support
• added saving locked layers
• fixed bug in blend mode
• added help window
• added credits window (not all credits added)
• refactored display list component tree function
• added better scrolling in code editors
• added better console text area
• switched to using native menus for desktop
• created new getting started tutorial
• changed button and button bar styles
• made buttons single click on welcome screen
• added different perspectives for design, develop and coding
• updated the style of the tab navigators
• fixed save document not saving when pressing save project
• fixed double attribute in setPropertiesStyles
• fixed selection bug in HistoryManager
• refactored history manager code
• created new add items to fix range error bug (so far so good)
• added select targets when clicking on history event in history inspector
• add revert menu option