Add pictograms to Technologies Used and Technologies Referenced and make grid layout

MachineVisionUiB / machinevision

We are developing a database to map and interpret the representations and uses of machine vision technologies in digital art, computer games and narratives such as science fiction novels, movies and creepypasta.

http://uib.no/en/machinevision

4 stars 0 forks source link

Add pictograms to Technologies Used and Technologies Referenced and make grid layout #125

Closed jilltxt closed 3 years ago

jilltxt commented 3 years ago

[x] Add pictograms to each of the taxonomy items in Technologies.
[x] Create a view that allows users to browse the database via Technologies Used or Technologies Referenced (maybe this is two separate views?) - the view should have a short explanation at the top and a grid showing the different technologies with a pictogram for each. It should look a bit like the poster below.
[x] Technology ref. view

The pictograms for technologies are in the Design/Piktogram folder in the project Sharepoint. We are using the pink ones.

How to test

Go to https://machine-vision.no/technologies-used - Navigate to taxonomy term by clicking image.
Navigate list in bottom by clicking text.

steinmb commented 3 years ago

Updating config before building this:

commit smbjorklund/machinevision_config@77020ac2eea9d572acdf5ec5ef39092d44bda601 (HEAD -> master, origin/master) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Fri Feb 5 12:35:58 2021 +0100

Update machine vision theme

commit smbjorklund/machinevision_config@3b2568b95cbdc90c77d2ea5199c0f3fd70e2f353 Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Fri Feb 5 12:28:47 2021 +0100

Sync up exported config

commit smbjorklund/machinevision_config@8182ddad3527a1b8b0b1da69f7c8e9d08397ec1b Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Fri Feb 5 12:24:22 2021 +0100

New module - SVG image

Extend image file type to support SVG.

steinmb commented 3 years ago

Pictograms visible in production, example found in: https://machine-vision.no/technologies/image-generation

Small screen example

Screenshot 2021-02-08 at 09 38 35

medium screen example

Screenshot 2021-02-08 at 09 38 20

large screen example

Screenshot 2021-02-08 at 09 37 59

Code changes

commit smbjorklund/machine-vision-theme@ab7d9ca159a0283a50e53d786a9dfd273d39e28a (HEAD, origin/HEAD, origin/8.x-dev, 8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Mon Feb 8 09:14:22 2021 +0100

Issue 125 - Taxonomy term position pictograms

Icons used on taxonomy terms

jilltxt commented 3 years ago

This looks great!!! Except the actual title is missing - it needs to say Image Generation or Biometrics or whatever at the top :) It’s great including the definition.

steinmb commented 3 years ago

You are right, we should also have the term title. I'll dig into that.

steinmb commented 3 years ago

Had a look. This is default coming out the system core core/modules/taxonomy/templates/taxonomy-term.html.twig. This override core but I only for technology vocabulary. We had not discussed/agreed on making this for all vocabularies so I played it safe.

Example screenshot

Screenshot 2021-02-08 at 16 48 12

Code change

commit smbjorklund/machine-vision-theme@21ef16dab496db7617850deab72ea06ef30273f8 (HEAD, origin/HEAD, origin/8.x-dev, 8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Mon Feb 8 16:43:46 2021 +0100

Issue 125 - Taxonomy term name on term pages

Default twig file do not expose the term name. This custom Twig template
override that but only for Technology vocabulary.

steinmb commented 3 years ago

These two changes introduce a starting point for navigating by technology image. It is not done but it is a starting point:

commit smbjorklund/machine-vision-theme@5be05c4acc395c15243d13246d760970caeb7a73 (HEAD -> 8.x-dev, origin/HEAD, origin/8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Tue Feb 9 09:57:13 2021 +0100

Issue 125 - Views lists technologies used

- Generic style match up with design

commit smbjorklund/machinevision_config@c0876463649a33ff4af4e7b47d8e5835b119e4c2 (HEAD -> master, origin/master, origin/HEAD) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Tue Feb 9 09:57:13 2021 +0100

Issue 125 - Views lists technologies used

- Data selection

steinmb commented 3 years ago

The page https://machine-vision.no/technologies-used lay out if content in 4 different ways depending on the screen size on the device used. We call them layout break points. The rectangles are just a visual aid, demonstrating the layout. On other words, not visible without a debugger. We need to test this in/on different browsers and tablets/phones held vertical and horizontal.

Smallest screen

Screenshot 2021-02-09 at 10 06 35

........

Screenshot 2021-02-09 at 10 07 12

Small screen 400 - 700px

Screenshot 2021-02-09 at 10 17 38

.......

Screenshot 2021-02-09 at 10 18 03

Medium screen > 700px

Screenshot 2021-02-09 at 10 21 48

.......

Screenshot 2021-02-09 at 10 22 08

Large screen > 900px

Screenshot 2021-02-09 at 10 25 59

.......

Screenshot 2021-02-09 at 10 26 08

jilltxt commented 3 years ago

This looks FANTASTIC!!! Except can we add the titles under or over the pictograms? Having them at the bottom looks fancy on a poster but is confusing as a web interface.

steinmb commented 3 years ago

Sure we can. I had the title there but then I noticed that the PDF suggested using just a numeric value. I'll have a look.

@jilltxt - We do not have a icon for Hologram. I vaguely remember it been discussed months ago, did we have to order one from the designers?

jilltxt commented 3 years ago

I think I forgot to get the hologram pictogram made! I will look into that immediately, we need that!

I was also wondering whether we can use Technology Referenced, not Technology Used for the overview page? Or ideally somehow merge the two into one for that display - but if that's not possible, then just Referenced since there are a lot more of those records.

And maybe this should actually be the front page of the database?

steinmb commented 3 years ago

Turned out a little more tricky than I thought of. Ideally the entire image and text should be on large link. Having the image and link text as two spearate links is a little odd and make the hover effect almost impossible. Also due to the length of the term titles I needed to readjust the layout grid make sure them did fit and not overflow the pictogram.

Anyway, here is a view the rewrite the output, each row as a big hyperlink with updated visual styles.

commit MachineVisionUiB/machinevision_config@7178dff43b4a931fc627e1e2bd875b2de5dbf249 commit MachineVisionUiB/machine-vision-theme@e3a84673f1197337352faae78418757ef10c451d (HEAD, origin/HEAD, origin/8.x-dev, 8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Mon Feb 15 11:02:40 2021 +0100

Issue 125 - Introduce card layout and use term text

Screenshot 2021-02-15 at 12 03 13

steinmb commented 3 years ago

@jilltxt did we get the missing Holograms pictogram?

BTW: Made this/the list of technologies the site front page. Better than the more and less empty we used to have.

ragsol commented 3 years ago

@steinmb I was sure I added them to their proper folders, but the Sharepoint bugs when I try to access long lists, so I made an own folder (like with the QR code). Hope it helps!

steinmb commented 3 years ago

@ragsol Found it! - Added it to the term. Anyone feel like go to https://machine-vision.no/taxonomy/term/1339/edit and add a hologram description? It is the only one that do not have one.

steinmb commented 3 years ago

Description also, missing from: https://machine-vision.no/technologies/surveillance-cameras https://machine-vision.no/taxonomy/term/80/edit

jilltxt commented 3 years ago

Done! This is great, thank you, @steinmb! We need to add an intro text to the front page, but I'll close this issue.

steinmb commented 3 years ago

@jilltxt this text position it self above the list of tech. on the front page. Feel free to change this - https://machine-vision.no/block/2?destination=/technologies