Hi
Our local Basketball club want to replace there old score boards with TV’s. Has any one done a score board in maker that could help me get started. Was thinking Raspberry Pi but have never used one.
1 Like
I haven’t built a score board but this seems like a great application of Ignition on a PI esp. the new PIs that support two HDMI ports. I did a virtual nixie tube display in maker one evening just to learn some new techniques that might apply to a scoreboard. If you want to make unusual fonts, like a pattern of bulbs to mimic an old school scoreboard, the way I did the nixie tubes was to create the design in a vector graphics program that can export to .svg (Inkscape is fine if you want to use a free app). I put all the decorative eye candy stuff together in one group in the graphics program and then I made another group with just the digits. If you are unfamiliar with vector graphics programs you can select multiple items and then “group” them so they can be moved sized etc. as one object. You can then import the .svg into ignition and the groups (you can even name them in most graphics programs) are easier to find and keep organized in the .svg object. Each individual digit’s properties can then be controlled to change their color, stroke width, transparency and so on to turn them on and off. This made it easy to have my virtual nixie tube wires showing all the time and then change their stroke size and color to make them “glow”. To make this whole affair easier to style and copy to different places and reuse I added custom properties on the .svg object in Ignition like “DisplayedNum”, “OnColor”, “OffColor”, “OnWidth”, “OffWidth” and used those parameters in the logic. That way, without having to dig back into the .svg attributes I could change things up. For example, on the element, within the .svg object, for the number 3 I bound the paint attribute to this.props.DisplayedNum, then I added a Transform to the binding so if Input Type: Value = 3 Output Type: Expression {this.props.OnColor} and then for the Input Type: Value = Fallback, I set Output Type: Expression {this.props.OffColor}. A screenshot would probably make this less confusing. Hope it helps or at least gets the creative juices flowing.
2 Likes
@matthew.roberts, from a hardware perspective, I use a Pi as a client in my kitchen connected to a 32" monitor, and have a Gateway running on a separate server.
For your use case, I think you could probably get away with a Pi for both the Gateway & display. As @tanda suggested the new Pi 4B’s are probably better suited due to the native dual screen support. They also have the option of more RAM, which can be useful when running Chromium.
I use a Pi 4B with 4GB, which keeps user interaction pretty snappy. I haven’t tried installing a Gateway directly on a Pi before, but there are a few sources you can find with a quick Google search. I also stumbled across this YouTube video which may help.
1 Like
@tanda How did you export the .SVGs from Inkscape? When I export (“Save As…”) my drawing in Inkscape as a “plain SVG” I can drag and drop it into my perspective container but the elements property did not appear in the property editor. I have Ignition maker 8.1.2. I want to be able to change the fill color of a shape in a grouped object.
You should be saving as an Optimised SVG
I use these settings:
Some of the settings I’m not too sure about, but definitely need to turn on viewboxing.
Edit: Actually, I think your issue is more Ignition-side. How are you importing the SVG? don’t add it to your image library, as then you won’t have any control of it. Import it directly (the option on the right in the import window, forget it’s name)
1 Like
Saving as “plain SVG” should be okay. Two things:
First, make sure when you drag your image into your design you select the “Embed image” radio button. Otherwise, it will just create a link to the image and you won’t have access to the internals of the SVG. Essentially this is just telling your browser to go grab an image somewhere and render it. That’s not what we want. We want the elements of the SVG in our design so we can bind them to things and play with them.
Second, once the image is embedded into the design, the fill color is going to be buried down in the element tree a bit depending on how the SVG was built so it might be something like:
elements[1]
__0 {3}
____type: group
____elements [2]
______0 {3}
________type : group
________elements [10]
__________nixieZero {5}
____________type : path
____________fill {2}
______________paint : #2030FC
______________rule : nonzero
Just keep expanding out the element tree until you find what you want. You can do two things in your .SVG to make this less painful. Use the grouping function to combine those things you aren’t changing and those you are. this will create elements of “type : group” at the top level so you can ignore groups you don’t want to change and work in the groups where you do. The second thing is to name the objects in the SVG so you can find them by name in the list of elements.
1 Like
To add to this, you can also use the xml editor within Inkscape to name your objects
2 Likes