Matching a numerical variable

[benjamin.goddard]

This sounds simple but I don’t get it.

This is my first post so please be nice! I usually don;t like to ask and prefer to figure it myself, but it’s taken a whole day to work out nothing…

I decided to make something that needs to change stuff if a variable reaches any number value up to 99 (it’s for an double digit LCD type display)

Like so:

  var speed = 62;

    if (speed === 62){
      $( "path[id|='lcd1']" ).css( {"opacity": "0" , "fill-opacity": "0","visibility": "hidden" });
      $( "path[id|='lcd2']" ).css( {"opacity": "0" , "fill-opacity": "0","visibility": "hidden" });
    }

I know none of the above is as I need, I am just wanting to see that what I try work before I waste time on the specifics all wrong and starting over!
The thing is though, it’s for SVG (you may be able to tell by the “path” selectors, so each path is a section of LCD.

The idea I have is using jquery .split later to make it easier, so each path has a prefix of “lcd1” or “lcd2” to show which digit it is for (thus the use of |)

Any ideas? I am struggling to use codepen or jsfiddle to show this to, so sorry ’bout that…

[itsLeon]

Not sure wat you really want. Can you explain better wat you want to create? Do you need help creating the numbers for your LCD thing

[benjamin.goddard]

Yes of Course!

I am asking for help as I am as good at jQuery as a toddler is at drawing an animal on an etch-a-sketch! I wish I could say Spaghetti instead but it’s only been a year and I am still getting confused by it!

I am always spending half days doing web searches for helpful “stack-overflow” answers and how to’s, trying to remember types of selectors and how to write statements properly etc!

So apologise if I sound like I want someone to do my work for them (this is just a personal experiment, to prove to myself I can at least get a working bistro of CSS and SVG)

Essentially if you can picture a double (two) digit red lit display to show speeds below 100, just like you would see on an old digital alarm clock (that would have 4 digits).

Each digit contains 7 svg shapes (well paths really) to dislay a number from 1-9, pretty obvious I guess now you know it’s like a clock.

The 7 shapes for the first digit all have unique ids starting with “#lcd-1-“, and second one with “#lcd-2-”

So to say I wanted to display 88, I would need to keep/make each & every one visible.

For 86, I would need to make digit 2’s top right shape (“#lcd-2-topright”)hidden/transparent.

Or for 91, I would have to hide “#lcd-1-bottomleft” and “#lcd-2-top” / “#lcd-2-topleft” , “#lcd-2-middle” , “#lcd-2-bottom” & “#lcd-2-bottomleft”

I am not asking anyone to to the hard work for me, just just wanted to know what command lines/syntax I need to use if that makes sense.

so basically turn a 2 digit numerical variable in to a display wit the svg shapes.

I hope this is enough info!

I should also note this is designed for mobile devices, as you may be figuring out by now, so do I need to use “opacity:”, “fill-opacity:”, and “visiblity:” together in case of certain mobile browser SVG CSS incompaibilities?

[Shikkediel]

It’s a nice idea but I think using svg here isn’t particularly suited. I’ve been working with it lately as well and noticed not all jQuery ‘commands’ work properly – and across browsers there’s a bit of difference too.

You could also use regular divs and simply use show() and hide() to create the particular digit. I would split the value for speed in two beforehand and use a switch statement to go through the numbers 0-9 and show/hide the segments.

[Shikkediel]

Thinking about it, I do get the appeal of being able to make a nice trapezoid for the segments of the digits. And it’s definitely doable (if you don’t access exotic properties).
So here’s a small pen how you can directly access the path (circle in this case) by it’s id to show or hide it :

http://tinyurl.com/svg-pen

You could make a div with an id for each digit and give classes to all segments. Each string to show or hide the elements would then be something like this :

$(‘#digit_1 .middle’).show();

And the HTML :

<svg id=”digit_1″ … >
…
<path class=”middle” … >
…
</svg>

Using classes, you’d only need a single function for both digits (and pass the svg id as a parameter to that function)…

[wilfred]

`
var speed = 62;

if (speed === 62){
  $( "path[id|='lcd1']" ).css( {"opacity": "0" , "fill-opacity": "0","visibility": "hidden" });
  $( "path[id|='lcd2']" ).css( {"opacity": "0" , "fill-opacity": "0","visibility": "hidden" });
}

`

[Paulie_D]

As far as SVG goes, my understanding is the the 7 segements that make up each number are all exactly the same shape.

So you really only need to define the shape once (as a def) and then it can be re-used as many times as you require as use elements which can receive classes and be affected by JQuery (albeit with attr not class manipulation as such…at least as far as I know)

Then each define each digit as a group of useelements (an array perhaps, my JQuery is weak at best).

Then once you have the digits defined, JS / JQ can parse any numerical value into it’s component parts and turn the relevant digits on and off

Does that sound right?

At least that’s the way my logical pattern goes.

Here’s one I found with a quick google search.

http://www.letsstartthinking.org/lab/svg/apps/ssd-digital-clock.asp

[benjamin.goddard]

Hi, I have read some of your replies and it’s really useful stuff, so thanks!

I will show you the svg here (I have done much more svg wise, so here are the shapes):

Just so you know this is a copy and paste so Inscape re-added all the junk data, sorry it’s so huge, but at least you can see it for youself by copying it to something like sublime text….

[MOD EDIT – Codedump Removed]

[Paulie_D]

DUDE…NO CODEDUMPS.

Codepen is the place for this.

[benjamin.goddard]

corrected, sorry, brain was obviously not thinking straight then!

[Paulie_D]

Anyway, as I was saying, your really only need to define the basic trapezoid once.

http://codepen.io/Paulie-D/pen/myeZZm/

[benjamin.goddard]

Ah looks like you changed it moments after I resubmitted it with an edit, so here’s the script:

Project 88 SVG codepen example

[benjamin.goddard]

Thanks Paulie_D,

I will credit you for helping too, as I will probably end up using this instead for quick loading.

Thumbs up!

[benjamin.goddard]

can I just ask what apps you use for editing stuff like this? I used to use Adobe stuff but it’s too much cost, I use sublime text and Inkscape (which can make things messy) for the record

[Paulie_D]

I’m still playing with SVG so I don’t use any software specifically.

However, ANY SVG output Adobe / Inkscape shoudl be run through an optimiser like http://petercollingridge.appspot.com/svg_optimiser

[Author]

Posts