Opened 5 years ago

Closed 3 years ago

#1301 closed defect (fixed)

Update addressbook overview image

Reported by: echelon Owned by: z3r0fox
Priority: minor Milestone: 0.9.24
Component: apps/susidns Version: 0.9.13
Keywords: easy graphics Cc: str4d
Parent Tickets:

Description

Hi!

On the addressbook app, the shown information is far out of date:
http://127.0.0.1:7657/dns
still shows orion.i2p and dev.i2p, also it does NOT include the block-DB for entries.
Need a rewrite.

Subtickets

Attachments (2)

how.svg (15.5 KB) - added by z3r0fox 3 years ago.
20160117 Latest version of image, PII stripped
Screenshot.png (115.0 KB) - added by z3r0fox 3 years ago.
20160117 Screenshot of SVG appearing in console

Download all attachments as: .zip

Change History (23)

comment:1 Changed 5 years ago by str4d

  • Milestone 0.9.14 deleted
  • Summary changed from Addressbook frontpage old information to Update addressbook overview image

The out-of-date information is limited to the "how it works" image. This should be updated, and ideally redrawn as a vector image to make future changes easier.

comment:2 Changed 5 years ago by zzz

  • Component changed from apps/addressbook to apps/susimail

comment:3 Changed 5 years ago by zzz

  • Component changed from apps/susimail to apps/susidns

comment:4 Changed 4 years ago by zzz

  • Keywords easy graphics added
  • Type changed from task to defect

comment:5 Changed 3 years ago by zzz

  • Cc str4d added
  • Milestone set to 0.9.24
  • Owner set to z3r0fox
  • Status changed from new to assigned

<z3r0fox_> str4d, zzz, I'm looking at the next of the easy tickets, #1301 (update addressbook overview image). Happy to do this, but Would someone be willing to (very roughly) sketch and take a picture of the desired updates for me so I can draw it in inkscape? I could complete that ticket in fairly short order.

Don't have time to draw a picture right now but here's a list of the problems:

  • In the upper right, we should label these as subscriptions and fix the URLs to be current
  • In the upper left, we show the "master" address book but not the "private" one. But the private book is not exported to published, unlike the other two
  • The master, private, and router address books are all contained in a single hostsdb.blockfile file, not in hosts.txt
  • Maybe there needs to be a big circle around the master, private, and router books, to show that all are searched by your router clients?
  • The bottom part, showing an export to a 'published' eepsite/docroot/hosts.txt file, is disabled by default now, and the only docs on how to enable it are on the config page. Nobody does this, and probably nobody needs to. We could either label it optional or just remove it from the pic.

comment:6 Changed 3 years ago by z3r0fox

Kept things simple so should be readable at about the same size. There's a transparent and a filled background version - which do you prefer? If one of these is ok, I can insert it in the router page, or str4d could if that's faster, I have no preference. Thanks.

comment:7 Changed 3 years ago by zzz

That's a good start.

Filled background is probably best as other themes/CSS/background are possible (although it doesn't appear that susidns uses the console theme now).

The image is a little busy for my tastes. I think it would be better without the 4 lines of lowercase explanatory text under the boxes. The /var/lib path certainly isn't true for all platforms or installations.

Do you think the (not in the picture) explanatory text needs an update? We're past the tag freeze for 0.9.24. We could change the picture now if it makes sense, but text changes would have to wait for 0.9.25

comment:8 Changed 3 years ago by zzz

what do you think about 'searchable by applications' or 'searchable by your applications' instead of 'searchable by router clients'?

'router clients' is a confusing term and it even sounds like other people could search it

comment:9 Changed 3 years ago by zzz

The other reason to minimize text in the image is translations. Are we going to make 20 versions in different languages, or just stick to english and hope for the best, with translated explanatory text above the picture?

comment:10 Changed 3 years ago by z3r0fox

Fair points. I've made the changes you suggested. I thought 'Searchable by I2P Applications' would guard against any worry that applications outside of the router might have access, and it fit well in the available space.

The text on the page does need to be changed - but only to remove where it says the private address book is '(not shown in the picture)'. Everything else makes sense.

Not sure what to do about translations. Even if there were enough SVGs to justify automating the job (apparently it's just XML), the width of each phrase is going to be unpredictable across languages and scaling it would look funny. But there is that possibility.

comment:11 Changed 3 years ago by zzz

looks much better.

With the text removed, we don't need the dashed line around the private addressbook block, do we? Or if we do, what is it intended to mean?

comment:12 Changed 3 years ago by zzz

Not sure if we're going to use the svg directly in the console or not, asked on IRC if all browsers support or not.

In the meantime, console didn't set the mime type correctly, fixed in 84137828d6648f2691a97e858854c7e604be14a0 0.9.23-24-rc.

With that fix you can now test with this patch

--- apps/susidns/src/jsp/index.jsp	4a6cff3d9329f9265d7e5c5c19d831d17bf9c0a2
+++ apps/susidns/src/jsp/index.jsp	9885891aa230513c0e3f6f01fca6f6435873365b
@@ -87,7 +87,7 @@
 <%=intl._t("Hosts in the private address book can be accessed by you but their addresses are never distributed to others.")%>
 <%=intl._t("The private address book can also be used for aliases of hosts in your other address books.")%>
 </p>
-<center><img src="/themes/susidns/images/how.png" border="0" alt="address book working scheme" title="How the address book works" class="illustrate" /
></center>
+<center><img src="/themes/susidns/images/how.svg" height="298" width="433" border="0" alt="address book working scheme" title="How the address book wo
rks" class="illustrate" /></center>
 </div>
 <div id="footer">
 <hr>

and copy the svg to docs/themes/susidns/images/how.svg in the install dir. In the patch above I set the image size to the same as the old one but it probably should be bigger.

Are you happy with the white background or do you think there should be more contrast, maybe either the boxes or the background get a little shading. Just asking, not sure myself.

comment:13 Changed 3 years ago by z3r0fox

The dotted line around the Private Addressbook is supposed to provide visual emphasis that it's segregated/walled off from inclusion in the Router Addressbook. That may not be clear but it made sense at the time.

The possible (Tor) browser SVG incompatibility thing is a worry. If SVGs don't work out at least they can be stored somewhere as an easily editable resource to generate PNGs from. To get a sense of this, getting the dev version running somewhere and testing against my browsers will be a good weekend project - yeah, I run the Debian repo version on my box. Is it better to have both and do I2P development in a VM going forward? Or just run the dev version 'bare metal'? What would you consider best practice?

On the shading, once patched I'll be better able to judge. The console page is actually off-white already. There's lots of design leeway to make the pic more attractive and convey meaning with faint tints/shades to tie different functions together.

comment:14 Changed 3 years ago by zzz

re: debian, do whatever you want. I think if you drop a i2pupdate.zip file in the install or config dir, it will still install it at startup. If not, just unzip it manually overtop the install dir.

Or run a separate dev version out of your home directory. Up to you.

We need to do more research on SVG support.

comment:15 Changed 3 years ago by zzz

http://caniuse.com/svg

IE8 might be a problem

comment:16 Changed 3 years ago by z3r0fox

Got the RC up and running. Screenshot from Firefox (Iceweasel) 38.5 attached. There's an irritating partial border inside the border that doesn't apepar in Inkscape, looking into that.

Changed 3 years ago by z3r0fox

20160117 Latest version of image, PII stripped

Changed 3 years ago by z3r0fox

20160117 Screenshot of SVG appearing in console

comment:17 Changed 3 years ago by z3r0fox

Chromium, Konqueror, and Iceweasel all have thin lines at the transition from background to SVG. But they're different (along the top and bottom borders) in Chromium and Konqueror than in Iceweasel/FF (top and right borders) which points towards browser rendering. I don't have IE or Opera etc. to check those.

comment:18 Changed 3 years ago by z3r0fox

Maybe the image should be added as a PNG file for now

comment:19 Changed 3 years ago by zzz

I'm leaning toward using the svg:

  • thin lines don't bother me
  • scales better
  • we won't lose the source
  • don't care about IE8 and lower

Can you recommend a height and width that we should set in index.jsp that looks best, especially w.r.t. rendering of the text?

comment:20 Changed 3 years ago by z3r0fox

The image was originally designed at 900 x 550.

comment:21 Changed 3 years ago by zzz

  • Resolution set to fixed
  • Status changed from assigned to closed

In 8511dd159fa291cbf15fc0ea8bde4b331ed44534 0.9.23-26-rc

Note: See TracTickets for help on using tickets.