Object grouping and/or View based coordinate

[Drakey]

Hello,

I just discovered Webpgr today and I must say this is the most intuitive website creation interface I have seen to date.  I was able to pick up the functionalities within the hour and happy to see it supports editing of css/html/js.  As an architect, the interface is extremely familiar to the graphic editing software we use normally.

I was wondering if there is an object grouping tool.  For example rather than having to shift select objects individually every time I want to rotate everything within a view, I would like to be able to group a view and then rotate the view (and everything inside) as a block.

Also, I was wondering if there is a placing objects via view frame local coordinates option.  Currently all objects seem to operate on a global coordinate system.  It would be nice if there is a "copy" and "paste in place" feature.  For example I want to keep all the text boxes in the exact same location relative to a view frame rather than having to do the math and figuring out a new global coordinate based on view box size/spacing/location.

Very happy with the beta so far and eager to see where it goes.

My main concern with this website development format is loading times and caps on size of content as I am assuming all the image/video objects have to be loaded for it to work.  I would also like to see an image slideshow/gallery object we can drop in.

[Falko]

Hi there,
I'm Falko I developed most of the code of webpgr and I am really happy to answer your questions

On Monday, June 8, 2015 at 11:01:19 PM UTC+2, Drakey wrote:

Hello,

I just discovered Webpgr today and I must say this is the most intuitive website creation interface I have seen to date.  I was able to pick up the functionalities within the hour and happy to see it supports editing of css/html/js.  As an architect, the interface is extremely familiar to the graphic editing software we use normally.

Thanks this is music to my ears :D

I was wondering if there is an object grouping tool.  For example rather than having to shift select objects individually every time I want to rotate everything within a view, I would like to be able to group a view and then rotate the view (and everything inside) as a block.

Yes, grouping is currently in testing mode. I hope we will be able to release this within the next 3 month. 

Also, I was wondering if there is a placing objects via view frame local coordinates option.  Currently all objects seem to operate on a global coordinate system.  It would be nice if there is a "copy" and "paste in place" feature.  For example I want to keep all the text boxes in the exact same location relative to a view frame rather than having to do the math and figuring out a new global coordinate based on view box size/spacing/location.

You are completely right everything is currently in a global coordinate system and it is quite tedious to place objects at the exact same place. To overcome this we last week started to work with a new developer, his task is to not just solve the relative view placement problem but also to allow creation of multiple moving layers. This will break the limits of the current design process and allow you to create statically placed menus that hover over the main content layer with the ability to also animate the hovering menus. Other possibilities will include infinite zooms and mini maps of web pages similar to computer games where you can zoom out and have a birds eye overview over all you pages, where each page could be represented by an icon and a headline description. Or just plain endless zooming can be realized by stacking two views on top of each other where the top view moves to the background at an increased zoom level to create the illusion of an endless zoom.
These are just some of the ideas we played with and made prototypes so far.

Very happy with the beta so far and eager to see where it goes.

My main concern with this website development format is loading times and caps on size of content as I am assuming all the image/video objects have to be loaded for it to work.

On this point you are not right, the plane is infinite and also scales infinite, since webpgr works similar to google maps. New content of neighboring views is loaded on demand while you move over the canvas. The server (or an exported HTML version, yes static HTML and Android app exports will be available soon too, and can be done on request currently) prerenders each views HTML (which makes page loading as fast as loading static HTML files and additionally allows search engines to crawl you website without the usual problems of single page website frameworks) and while you request the next view our JS library dynamically loads new content from a webserver or a local JSON file.

 I would also like to see an image slideshow/gallery object we can drop in.

 A lightbox image gallery is already in the testing version of webpgr and will also be released soon. As for the slideshow we already tested some code but did not decide yet on the best way to integrate it, if you need it I'm more than happy to share it with you.

If you have more questions or need help to create something please ask, I'm always exited about new projects on webpgr.

[Drakey]

Thanks for the prompt response Falko,

On the discrete loading of views point, does this also mean that previous views are "unloaded".  For example on facebook, as you scroll down older posts automatically populate.  However, if you scroll down too much it becomes laggy presumable because all the previous content scrolled through remain.  Sorry for my poor wording, I have only an amateur's understanding on how websites work.  The upshot is, it is great that view 10 isn't loaded when I'm viewing view 1, but I also don't want it to be laggy by the time I get to view 10 because now views 1-10 are all loaded.

Having seen Webpgr, I am very excited about using it for my personal webpage as it seems to have the more basic/minimalist requirements I prefer.  As we touched upon, all I would need for my personal use is the slideshow component (to cycle through images of the same project when I'm in that project view) and the floating navigation menu separate from any particular view.

For more advanced interface features (I am doing research into ways to improve our company website as well), I would like to see search/filtering by tag options similar to the following:

http://themetrust.com/demos/reveal/

i.e. input driven dynamic object movement within a view.  This may be more difficult to achieve.  Surprisingly, I have found that this is not supported in Squarespace and quite difficult to achieve even in wordpress.

[Falko]

On Tuesday, June 9, 2015 at 7:37:00 PM UTC+2, Drakey wrote:

Thanks for the prompt response Falko,

sry this time I was not so fast ;-)

On the discrete loading of views point, does this also mean that previous views are "unloaded".  

Yes exactly. We detach all elements that are outside of the visible are (with some padding) from the HTML DOM so they are not rendered

For example on facebook, as you scroll down older posts automatically populate.  However, if you scroll down too much it becomes laggy presumable because all the previous content scrolled through remain.

This should not happen

 Sorry for my poor wording, I have only an amateur's understanding on how websites work.

So far is seems you understood everything very well and I also know exactly what you mean :D

 The upshot is, it is great that view 10 isn't loaded when I'm viewing view 1, but I also don't want it to be laggy by the time I get to view 10 because now views 1-10 are all loaded.

Having seen Webpgr, I am very excited about using it for my personal webpage as it seems to have the more basic/minimalist requirements I prefer.  As we touched upon, all I would need for my personal use is the slideshow component (to cycle through images of the same project when I'm in that project view)

Would you like to have a lightbox like on this page http://seriousclown.webpgr.com/Gallery
or rather something like this http://pavelpass.webpgr.com/home
 

and the floating navigation menu separate from any particular view.

The floating menu is in the current version only possible with a bit of HTML coding, but in about 3 month or less this will change.
For now open the developer shell with ctrl+m and go to the HTML tab.
In the HTML tab enters something like

<div id="header">
<div id="menu"><a href="home?t=2">Home</a> | <a href="about?t=2">About</a> | <a href="contact?t=2">Contact</a></div>
</div>

(the ?t=2 makes the transitions between the views slower, in this case 2 seconds)
then switch to the CSS tab to position your menu

#header {
  position:fixed;
  width:100%;
  font-family: Open Sans;
  height: 40px;
  text-align: center;
 background-color: white;
}
#header a{
 padding-left: 10px;
 padding-right: 10px;
 color:black;
 text-decoration: none;
 z-index: 90001;
}

As Douglas Adams wrote in the Hitchhikers Guide: WE APOLOGISE FOR THE INCONVENIENCE
We are working on making this better

For more advanced interface features (I am doing research into ways to improve our company website as well), I would like to see search/filtering by tag options similar to the following:

http://themetrust.com/demos/reveal/

i.e. input driven dynamic object movement within a view.  This may be more difficult to achieve.  Surprisingly, I have found that this is not supported in Squarespace and quite difficult to achieve even in wordpress.

 

I have never created such an effect but there should be a jQuery plugin out there that should do something like that. Since we are loading jQuery all the time is possible to include a plugin to achieve this effect. The plugin can than work on a text element that contains HTML code with the different boxes. You can see and work with the HTML code of a text element by selecting it and going into the "HTML Text Editor" tab in the right menu, if you switch on the "edit HTML source" you will reveal a text box where you can insert any HTML code, e.g. you can insert YouTube embed codes (use fix HTML when you get an error). In your case you could insert the HTML for your items which you could then target with your jQuery plugin.

The the answer is, it is possible but unfortunately currently not very simple.

While we already have plans and prototypes how to extend the platform with arbitrary plugins (not just jQuery) this is still in the planning phase and will need a while to be implemented.

However if you have concrete ideas how your perfect page should look like, and you have a budget for that, I am happy to tell you that we also work as a web design agency and are always look for exiting new projects :D We have created about 15 projects for clients so far and can send you example and after and initial meeting a proposal for creating your website. Of course you will be able to continue editing your website after we created whatever you need and we also welcome other designers continue improving and extending the design after we finished.

Our main goal is to create the perfect web design platform and we are prepared to do all the steps necessary to achieve that.

[Drakey]

Sounds great!

The JQuery thing does sound rather complicated... in that I don't think I understand most of what you said haha... We mostly have been looking into Wordpress of late and the plugin feature they have is rather useful.

In an ideal world, there would be a "plug-in" that we can use that would have a graphic interface of the dynamically moving elements and users can tweak the CSS and create links.

As an architect by profession, I am reasonably comfortable tweaking CSS but .html and .php stuff is a bit too deep for me to take the time to learn...

I am reaching a point where I understand what is reasonable achievable in-house and what we would need to outsource (i.e. stuff like JQuery).  I am slated to make a report to my superiors soon and we will see what direction they want to take it.  Perhaps the moving graphics will be overkill for our purposes haha...

Thanks again for your input!  Keep up the good work!