Jump to content

Project Solanum


monollonom
 Share

Recommended Posts

Hi all,

I'm happy to share with you this website we launched two weeks ago for a Swiss movie in pre-production phase.

The client wanted to have a blog to document the project and allow users to contribute posts through a form but also with a login to the admin which — once approved — gives them access to more options for their contribution’s content. Right at the beginning they came to us with scientific visualizations as references and thus I finally got to try D3.js. I’ve known about it for a very long time but never got a chance to try it out. It wasn’t easy but in the end I managed to get (what I think is) a pretty satisfying result.

And here is a sample of the modules we used:
- Fluency
- TracyDebugger
- FormBuilder
- RepeaterMatrix
- AdminRestrictBranch
- FieldtypeOembed
- PageRenameOptions
- MarkupComponents
- Login Magic Link: this is a new one allowing to login with a link sent to the user’s email (inspired by this thread). It’s almost ready to share but I want to create a Process to have an overview of the generated links first

1661518333_Screenshot2024-02-20at16_48_38.thumb.png.b7032f400fc3eea3865acce40728fff1.png

1894344814_Screenshot2024-02-20at16_48_50.thumb.png.bf2e82132720317bdf78573d31a96c99.png

812134331_Screenshot2024-02-20at16_48_59.thumb.png.a96cebe83c2c5b1001d8a09b23c652e3.png


Enjoy!

  • Like 13
Link to comment
Share on other sites

Very interesting concept, and works nicely!

... but I have to admit that I spent a few minutes trying to figure out how to actually view any content. Clicked the labels, nothing came up, clicked other labels, lines came up but still nothing else, etc. Would've given up if I hadn't known from the screenshots here that there is more to see.

I get it now (you have to click those unlabeled sections at the outermost layer of the wheel; assumed at first that they were just a visual thing since there was nothing on them) but you might want to consider giving those sections some kind of label as well. Or add a help text or something. Just a suggestion ?

Anyway, always great to see projects that dare to be different.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, teppo said:

Or add a help text or something.

There is actually a help text: the one on the rotating circle inside (desktop) / outside (mobile) but it’s dismissed after the first click wherever. I’m going to change it so it remains as long as you didn’t click on a “post” strand.

Also, were you on mobile when seeing the website? It’s a tougher UI there for sure without hover... If not, did you notice the title of the post appearing in the bottom bar when hovering a strand? Maybe I could add at least a title="Open ”Title of the post”" so you have another hint when hovering.

In any case, thank you for you comment @teppo!

Edit: changes applied ?

Edited by monollonom
  • Like 2
Link to comment
Share on other sites

Same experience as Teppo for me. Without his comment I would have not made it to show any content at all. For example when I click on "Full Spectrum" this happens:

dvN0DL5.png

I really didn't get that I now have to click on one of the outer rings...

Maybe you could show a message in these cases in the middle of the circle - something like "Click one of the outer rings to show content" ?

Or Just show the first outer circle by default?

Hats off for mastering D3.js ?

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Interesting concept.

I'm with Bernhard when he suggested making the help text fixed in the middle. Half of the time the instructions are upside down (being in the bottom half of the screen) and moving - so hard to read unless you wait for it to make it back up. Could also do with some more contrast for those of us with slightly compromised sight.

Thanks for sharing though.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

I should give you guys an early access to our websites in the Beer Garden lol

Thank you though for the valuable feedbacks, it’s the kind of things you can have a hard time to see once you’re deep into projects with unconventional design: you get used to it and think it’s “understandable” enough. I went ahead and made the grey text darker and I’ve displayed the title in the center when you hover the outer strands. I also increased the contrast when hovering these. I hope this will do.

4 hours ago, bernhard said:

Hats off for mastering D3.js ?

Please don’t look at my code ?

  • Like 3
Link to comment
Share on other sites

For me it would still not be enough. When hovering the outer rings I get a nice text in the center - but if I didn't know that I had to do that, I'd still have a white center without any hint on what I have to do...

Also it seems you are loading youtube without consent?

Link to comment
Share on other sites

I guess best would be to either have a help popup, which I’m not fond of, or display the help text differently. I’ll stick with this for now as I think I’ve made enough changes but maybe I’ll come back to this later on.

Thank you again for all the feedbacks.

1 hour ago, bernhard said:

Also it seems you are loading youtube without consent?

My bad on this one, thanks for pointing it out.

  • Like 2
Link to comment
Share on other sites

@ngrmm both ! I make a fetch call from js and then check in the back-end using $config->ajax to only echo parts of my templates and exiting early to avoid my _main.php to be appended (because of the markup regions output strategy).

  • Like 1
Link to comment
Share on other sites

9 hours ago, monollonom said:

@ngrmm both ! I make a fetch call from js and then check in the back-end using $config->ajax to only echo parts of my templates and exiting early to avoid my _main.php to be appended (because of the markup regions output strategy).

That is an interesting idea to handle fetching data. Would you mind showing us a short code example? I am planning to do the same in a project.

Besides from that the the page you built is very avant-garde! It's kind of cool to see that designers go unusual and experimental ways in webdesign. It reminds me of the early days of the internet.

Bedsides from that I have to admit - I also had my struggles understanding how navigating this website actually works ?

  • Like 2
Link to comment
Share on other sites

Sure!

In your js:

window.addEventListener("load", () => {
	const headers = new Headers({"X-Requested-With": "XMLHttpRequest"}); // needed for $config->ajax to work
	const links   = document.querySelectorAll("a.ajax");
	const main    = document.querySelector("main");
  
	for(let i = 0; i < links.length; i++) {
		links[i].addEventListener("click", async (e) => {
			e.preventDefault();
			loadPage(e.currentTarget.href);
		});
	}

    async function loadPage(url, options) {
		const page = await fetch(url, { headers });
		main.innerHTML = await page.text();
	}
});

And in your php:

<?php namespace ProcessWire; ?>

<?php if(!$config->ajax): ?>
<main pw-id="main" pw-append>
<?php endif; ?>
  
<article><!-- Your content --></article>
  
<?php if(!$config->ajax): ?>
</main>
<?php endif; ?>

<?php
if($config->ajax) exit;

When opening the page directly it will go the usual route, outputting your content within <main> but if requested with ajax then it will only send the content and exit() so no other file is appended (_main.php in my case).

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...