Hi all.

I _think_ this could be accomplished by using an emoji instead.

This one might be a good option: https://emojipedia.org/information

I believe the unicode sequence for it is "U+2139 U+FE0F"

But there are obviously many other emojis to choose from which might be more appropriate.

Thanks,
Adam

On 26 June 2025 13:08:54 BST, Peer Dietzmann <dietzmann@brecht-schule.hamburg> wrote:
>Hello Michael, Hello Adolf,
>
>it was actually a bit hard to find a working solution to place this information somewhere. I scrolled through all the icons IPFire has "built in" and thought that a blue i icon would lead the user to think "oh what's this? What information can I get there?". When hovering then over the icon all necessary information is directly displayed without any button or box or anything which would require additional code and styling. Thereby all other icons are clickable I think there is no additional documentation required, the users will find it on their own.
>
>But I am also fine with Michael's solution.
>
>--
>
>Best regards
>
>Peer
>
>On 25.06.25 18:52, Michael Tremer wrote:
>> Hello Adolf,
>> 
>> Thank you for the feedback.
>> 
>> It is indeed not obvious. On the other hand, the large icon is not really a solution either in my opinion. It is simply too large and distracting for a feature that won’t be used *that* much.
>> 
>> I would however love some visual hint, but I cannot really think of anything between the two options that we have for now.
>> 
>> -Michael
>> 
>>> On 25 Jun 2025, at 17:40, Adolf Belka <adolf.belka@ipfire.org> wrote:
>>> 
>>> Tested-by: Adolf Belka <adolf.belka@ipfire.org>
>>> 
>>> I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.
>>> 
>>> With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.
>>> 
>>> Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown.  Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.
>>> 
>>> If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.
>>> 
>>> 
>>> On 23/06/2025 19:16, Michael Tremer wrote:
>>>> This will clutter the page less as we don't have any good icon sets.
>>>> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
>>>> ---
>>>>   html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>>>>   1 file changed, 11 insertions(+), 31 deletions(-)
>>>> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
>>>> index 69970a840..953f81e5f 100644
>>>> --- a/html/cgi-bin/fwhosts.cgi
>>>> +++ b/html/cgi-bin/fwhosts.cgi
>>>> @@ -1932,7 +1932,7 @@ sub viewtablenet
>>>>    }else{
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    }
>>>>    my $count=0;
>>>> @@ -1953,11 +1953,7 @@ END
>>>>    my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>>>>    my $netcount=&getnetcount($customnetwork{$key}[0]);
>>>>    my $netusedin=&getusedin($customnetwork{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($netusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
>>>> + print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>>>>    print<<END;
>>>>    <td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>>    <input type='hidden' name='ACTION' value='editnet'>
>>>> @@ -2091,7 +2087,7 @@ sub viewtablehost
>>>>    }else{
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    }
>>>>    my $count=0;
>>>> @@ -2112,12 +2108,9 @@ END
>>>>    my $hostcount=0;
>>>>    $hostcount=&gethostcount($customhost{$key}[0]);
>>>>    my $hostusedin=&getusedin($customhost{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($hostusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
>>>> - print<<END;
>>>> + my $color = &getcolor($ip);
>>>> + print <<END;
>>>> + <td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>>    <input type='hidden' name='ACTION' value='edithost' />
>>>>    <input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
>>>> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
>>>>    print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
>>>>    my $netgrpcount=&getnetcount($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>>>>    my $groupusedin=&getusedin($grpname);
>>>> - if ($groupusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>>>>    if($netgrpcount == '0')
>>>>    {
>>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
>>>> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>>>>    # Get group count.
>>>>    my $locationgrpcount=&getlocationcount($grpname);
>>>>    my $locationusedin=&getlocusedin($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
>>>> - if ($locationusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>>>>    # Only display delete icon, if the group is not used by a firewall rule.
>>>>    if($locationgrpcount == '0') {
>>>>    print"<form method='post' style='display:inline'>\n";
>>>> @@ -2459,7 +2446,7 @@ sub viewtableservice
>>>>    &General::readhasharray("$fwconfigout", \%fwout);
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    my $col='';
>>>>    foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
>>>> @@ -2481,14 +2468,10 @@ END
>>>>    #Neuer count
>>>>    $srvcount=&getsrvcount($customservice{$key}[0]);
>>>>    my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($serviceusedin) {
>>>> - $htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
>>>> - }
>>>>    if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>>>>    elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>>>>    print<<END;
>>>> - </td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
>>>> + </td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>>>>    <input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>>>>    <input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
>>>> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>>>>    if($count >0){print"</table>";$count=1;}
>>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
>>>>    print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
>>>> - print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
>>>>    my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
>>>> - if ($srvgrpusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
>>>> - }
>>>> + print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>>>>    if($grpcount == '0')
>>>>    {
>>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
>
>-- 
>Mit freundlichem Gruß
>Peer Dietzmann
>
>Brecht-IT  | Administration und Support
>
>Brecht-Schule Hamburg GmbH
>Norderstrasse 163-165 | 20097 Hamburg
>Tel.: +49 40 21 11 12 - 37 | Fax: +49 40 21 11 12 - 20
>E-Mail: dietzmann@brecht-schule.hamburg | www.brecht-schule.hamburg
>
>Diese Email enthält ggfs. vertrauliche und/oder rechtlich geschützte Informationen.
>Wenn Sie nicht der richtige Adressat sind oder diese Email irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Email.
>Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Email ist nicht gestattet.
>
>