Project Solanum

[monollonom]

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

Enjoy!

[teppo]

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.

[monollonom]

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 February 21 by monollonom

[bernhard]

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:

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 😅

[netcarver]

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.

[monollonom]

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 🫥

[bernhard]

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?

[dotnetic]

6 hours ago, bernhard said:

Same experience as Teppo for me. Without his comment I would have not made it to show any content at all.

Same here

[monollonom]

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.

[ngrmm]

@monollonom nice work!
Do you use PWs $config->ajax in the templates or is the content switching done completely with custom js?

[monollonom]

@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).

[Stefanowitsch]

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 🙂

[monollonom]

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).

[ColtNikolaus]

On 2/20/2024 at 9:22 PM, monollonom said:

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

Enjoy!

Thanks for sharing it with us. I appreciate you.