• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: Controlling SVG graphics with CMSms
PostPosted: Wed Jun 26, 2013 5:45 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Aug 29, 2007 4:36 am
Posts: 246
Location: Sydney Australia
I thought I would cross-post this here from 'CMS Show Off' as it's nothing pretty to look at, but I think it's a fairly novel use of an SVG image.

The objective was to create an SVG storage unit map and let the client change the colours from within CMSms.

The site
http://www.appinstorage.com.au

I recently created a quick and dirty site for a local storage unit business. We owed them some money for a unit so I agreed to update their site instead.
I shamelessly ripped the html out of an old drupal site of mine which explains the horrific amount of nested divs.
It's not much to look at, but believe me it's 100 times better than what was there before.

The bit that I was expecting to be hard was the unit map - http://www.appinstorage.com.au/availability.htm

The client wanted to be able to visually see which units were available and unavailable.

I decided to try a vector SVG file for this and control the colour changing from within CMSms.

I used Inkscape (http://inkscape.org/ It's FREE) to draw the map as it natively saves files in SVG format. (They still need to be exported as simple SVG).

Now IE8 doesn't support SVG at all - it just displays the raw XML code.
Again I thought this was going to be hard but after a couple of failed solutions I found a javascript SVG Web toolkit - http://code.google.com/p/svgweb/

This was as simple as a javascript call in the head and wrapping the SVG code in a script tag:

\$1:
<__script__ src="svg.js"></__script>

<__script__ type="image/svg+xml">
SVG Code in Here.
</__script>


And Hey-Presto SVG works in IE8 (it actually gets converted to Flash on the fly).


How I made the colour changing Storage Units.

I installed CustomGS (Custom Global Settings) and created 40 numbered checkboxes - 1 for each unit.

The SVG file contained the following code for each unit:

\$1:
    <rect
       width="40"
       height="80"
       x="140"
       y="900"
       transform="matrix(0.79,-0.61,0.61,0.79,0,0)"
       id="use3731"
       style="fill:#aadff8;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.99;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />


I swapped out the fill colour with the CustomGS variable, and the last line ended up looking like this:

\$1:
       style="fill:{if $CustomGS.Storage_Unit_16 == '1'}#FF0000{else}#aadff8{/if};fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.99;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />



Notepad++ and Firebug are the two best tools for this kind of thing.
Firebug found the ID of each unit and Notepad++ has an excellent find and replace.

A neat little app I was very happy with and the whole site took less than a day.

Simon66


Attachments:
site.png
site.png [ 149.96 KiB | Viewed 2474 times ]
admin.png
admin.png [ 71.34 KiB | Viewed 2474 times ]
Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Controlling SVG graphics with CMSms
PostPosted: Wed Jun 26, 2013 2:08 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7708
Location: The Netherlands
Nice work, thanks!

Rolf

_________________
$1

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Controlling SVG graphics with CMSms
PostPosted: Wed Jun 26, 2013 2:31 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Sat Apr 18, 2009 10:09 pm
Posts: 1425
Location: Maidenhead, UK
Great use of CMSMS - and well explained too. Nice one! O0


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Controlling SVG graphics with CMSms
PostPosted: Tue Aug 27, 2013 12:30 pm 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
Well done you Simon66 and thanks for sharing.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting