Overview

Before you start with this project you should know basics of Sign Generator before you made some changes to the initial template. The goal is for the user can easily make a design for some road sign, instantly see the report/output that contains all configurations of the sign, print the exported sign, and put it in the metal.

Meanwhile, the core concept of this website is that we are manipulating SVG html (rect, path, line) based on some rules in the book and pre-defined calculation.

Sign documentation

Before you dive more deeper you have to understand rules that BDS defined to create each of sign, anything unclear or buggy about the documentation feel free to ask.

1. 500 sign rules
2. 700 sign rules
3. Plate height rules
4. Sort Element rules
5. Road Number Font Rules rules
6. Summary flow
7. Example sign

Sign types

Arrow	Background	Cross Number

Dynamic Arrow	Icon / Symbol	Ring Number

Road Number	Text	Triangle Edge

Dynamic Icon / Sign

Sign status

1. Kladd (draft)
2. Revisjon (revision)
3. Ferdig, til godkjenning (done, for approval)
4. Godkjent (approved)
5. Godkjent, klar til print (approved, ready to print)
6. Tatt ut til print (taken out for print)
7. Ble ikke ordre (do not order)

Each of status have workflow index that used to maintain sign from designing/creating part until order was finished, for more information you can see complete list.

Sign position

Sign position is key value pair inside element object of sign structure that define where the elements are placed. we can use either number or string as indexed position, it depends how the signs are and how you would manage it.

1. Use number as indexed position (0, 1, 2, 3, 4)

   

2. Use string as indexed position (top, middle, bottom)

   

Sign color

Sign colors it's different for each sign type, the color of the text will depend on the background selection, it is done to ensure that the used color does not conflict each others. The color output itself is different when we use it in the editor, report, and export. For the export section, we use CMYK -based colors while others use RGB -based colors.

Sign scale

Scale is used to make sure that Sign Height, Width, Space Between Element are fulfilled the requirement.

Size	px	mm	Editor
70	37.79	10	6/7
105	56.69	15	6/7
126	68.03	18	6/7
140	75.59	20	6/7
175	94.48	25	6/7
210	113.38	30	6/7
280	151.18	40	6/7
315	170.07	45	6/7
350	188.97	50	6/7

• Size is used as default selection on the editor.
• px is default measurement variable to display sign only on editor/website also act as multiplication variable that use to generate real size of sign.
• mm is default measurement variable to display sign on report and CorelDraw.
• Editor is base scale variable that use to calculate everything on editor/website.

Editor Layout

Layout:

1. Header
2. Sidebar
3. Main Editor
4. Menu Option

The component's Layout is the core concept of this app, to perform well they share state through context and redux.

Section:

1. Project List
2. Project Signs
3. Action related to sign (Save, Update, Delete, Export)
4. Sign with measurement
We count each sign vertically, based above image we have 1 type of signs that having 3 pieces of sign.
5. Right click action inside editor
6. Project sign global variable
7. Sign attribute
Each sign attribute is unique based on the type of sign, they are sorted automatically based on the predefined rule on the settings page.